diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index d6aa982..a60283d 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -13,3 +13,4 @@ jobs:
       - run: bun run build
       - run: bun run lint --format=github
       - run: bun run fmt --check
+      - run: bun run are-the-types-wrong
diff --git a/.oxfmtrc.json b/.oxfmtrc.json
index a6a699f..8c31900 100644
--- a/.oxfmtrc.json
+++ b/.oxfmtrc.json
@@ -1,6 +1,5 @@
 {
   "$schema": "./node_modules/oxfmt/configuration_schema.json",
-  "ignorePatterns": [],
   "printWidth": 100,
   "tabWidth": 2,
   "useTabs": false,
@@ -15,6 +14,28 @@
   "sortImports": {
     "newlinesBetween": false
   },
+  "ignorePatterns": [
+    // Hidden(ish) files
+    "**/.*",
+    // Generated
+    "*Parser.js",
+    // Binaries
+    "*.jpeg",
+    "*.jpg",
+    "*.png",
+    "*.svg",
+    "bun.lockb",
+    // Unsupported
+    "*.jison",
+    "*.toml",
+    "CNAME",
+    "*.go",
+    "go.mod",
+    "go.sum",
+    // Misc
+    "lerna.json",
+    "bun.lock"
+  ],
   "overrides": [{
     "files": ["example/**/*.ts{,x}"],
     "options": {
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index ea5b8f5..0000000
--- a/.prettierignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# Hidden(ish) files
-**/.*
-
-# Generated
-*Parser.js
-
-# Binaries
-*.jpeg
-*.jpg
-*.png
-*.svg
-bun.lockb
-
-# Unsupported
-*.jison
-*.toml
-CNAME
-*.go
-go.mod
-go.sum
-
-# Misc
-lerna.json
-bun.lock
diff --git a/README.md b/README.md
index 85477c3..6f08e5b 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ Official [react-querybuilder](https://npmjs.com/package/react-querybuilder) comp
 ## Installation
 
 ```bash
-npm i react-querybuilder @react-querybuilder/chakra @chakra-ui/icons@2 @chakra-ui/react@2 @chakra-ui/system@2 @emotion/react @emotion/styled framer-motion
+npm i react-querybuilder @react-querybuilder/chakra2 @chakra-ui/icons@2 @chakra-ui/react@2 @chakra-ui/system@2 @emotion/react @emotion/styled framer-motion
 # OR yarn add / pnpm add / bun add
 ```
 
@@ -27,7 +27,7 @@ To configure the query builder to use Chakra-compatible components, place `Query
 
 ```tsx
 import { ChakraProvider, extendTheme } from '@chakra-ui/react';
-import { QueryBuilderChakra } from '@react-querybuilder/chakra';
+import { QueryBuilderChakra } from '@react-querybuilder/chakra2';
 import { useState } from 'react';
 import { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';
 
@@ -83,6 +83,7 @@ export function App() {
 | `ChakraActionElement`   | `controlElements.actionElement` |
 | `ChakraDragHandle`      | `controlElements.dragHandle`    |
 | `ChakraNotToggle`       | `controlElements.notToggle`     |
+| `ChakraShiftActions`    | `controlElements.shiftActions`  |
 | `ChakraValueEditor`     | `controlElements.valueEditor`   |
 | `ChakraValueSelector`   | `controlElements.valueSelector` |
 
diff --git a/bun.lock b/bun.lock
index a88389f..e0dcb75 100644
--- a/bun.lock
+++ b/bun.lock
@@ -32,10 +32,6 @@
       "peerDependencies": {
         "@chakra-ui/icons": "^2",
         "@chakra-ui/react": "^2",
-        "@chakra-ui/system": "^2",
-        "@emotion/react": "^11",
-        "@emotion/styled": "^11",
-        "framer-motion": "^11",
         "react": ">=18",
         "react-querybuilder": "^8",
       },
diff --git a/example/package.json b/example/package.json
index 5d4281d..82b546b 100644
--- a/example/package.json
+++ b/example/package.json
@@ -2,11 +2,7 @@
   "dependencies": {
     "@chakra-ui/icons": "^2",
     "@chakra-ui/react": "^2",
-    "@chakra-ui/system": "^2",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
     "@react-querybuilder/chakra2": "8.24.0",
-    "framer-motion": "^11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-querybuilder": "8.24.0"
diff --git a/package.json b/package.json
index 87153ba..65d01c8 100644
--- a/package.json
+++ b/package.json
@@ -82,10 +82,6 @@
   "peerDependencies": {
     "@chakra-ui/icons": "^2",
     "@chakra-ui/react": "^2",
-    "@chakra-ui/system": "^2",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "framer-motion": "^11",
     "react": ">=18",
     "react-querybuilder": "^8"
   }
diff --git a/prettier.config.mjs b/prettier.config.mjs
deleted file mode 100644
index 21294ea..0000000
--- a/prettier.config.mjs
+++ /dev/null
@@ -1,20 +0,0 @@
-/** @type {import("prettier").Options} */
-export default {
-  printWidth: 100,
-  tabWidth: 2,
-  useTabs: false,
-  semi: true,
-  singleQuote: true,
-  trailingComma: 'es5',
-  bracketSpacing: true,
-  bracketSameLine: true,
-  arrowParens: 'avoid',
-  overrides: [
-    {
-      files: 'example/**/*.!(css|scss)*',
-      options: {
-        printWidth: 80,
-      },
-    },
-  ],
-};
diff --git a/src/ChakraActionElement.tsx b/src/ChakraActionElement.tsx
index 4b7def1..5e68a4e 100644
--- a/src/ChakraActionElement.tsx
+++ b/src/ChakraActionElement.tsx
@@ -12,8 +12,8 @@ export const ChakraActionElement = ({
   title,
   disabled,
   disabledTranslation,
+  testID,
   // Props that should not be in extraProps
-  testID: _testID,
   rules: _rules,
   level: _level,
   path: _path,
@@ -24,6 +24,7 @@ export const ChakraActionElement = ({
   ...extraProps
 }: ChakraActionProps): React.JSX.Element => (
   <Button
+    data-testid={testID}
     className={className}
     title={disabledTranslation && disabled ? disabledTranslation.title : title}
     onClick={e => handleOnClick(e)}
diff --git a/src/ChakraDragHandle.tsx b/src/ChakraDragHandle.tsx
index 374a21e..50b60ae 100644
--- a/src/ChakraDragHandle.tsx
+++ b/src/ChakraDragHandle.tsx
@@ -5,11 +5,11 @@ import * as React from 'react';
 import { forwardRef } from 'react';
 import type { DragHandleProps } from 'react-querybuilder';
 
-type IBP = ComponentPropsWithRef<typeof IconButton>;
+type IconButtonProps = ComponentPropsWithRef<typeof IconButton>;
 
 export type ChakraDragHandleProps = DragHandleProps &
-  Omit<IBP, 'aria-label'> &
-  Partial<Pick<IBP, 'aria-label'>>;
+  Omit<IconButtonProps, 'aria-label'> &
+  Partial<Pick<IconButtonProps, 'aria-label'>>;
 
 export const ChakraDragHandle: React.ForwardRefExoticComponent<
   Omit<ChakraDragHandleProps, 'ref'> & React.RefAttributes<HTMLSpanElement>
@@ -19,8 +19,8 @@ export const ChakraDragHandle: React.ForwardRefExoticComponent<
       className,
       title,
       disabled,
+      testID,
       // Props that should not be in extraProps
-      testID: _testID,
       level: _level,
       path: _path,
       label: _label,
@@ -32,11 +32,11 @@ export const ChakraDragHandle: React.ForwardRefExoticComponent<
     },
     dragRef
   ) => (
-    <span ref={dragRef} className={className} title={title}>
+    <span data-testid={testID} ref={dragRef} className={className} title={title}>
       <IconButton
         isDisabled={disabled}
         icon={<DragHandleIcon />}
-        aria-label={title ?? /* istanbul ignore next */ ''}
+        aria-label={title ?? ''}
         {...extraProps}
       />
     </span>
diff --git a/src/ChakraNotToggle.tsx b/src/ChakraNotToggle.tsx
index bfbff5d..6692e48 100644
--- a/src/ChakraNotToggle.tsx
+++ b/src/ChakraNotToggle.tsx
@@ -13,11 +13,11 @@ export const ChakraNotToggle = ({
   checked,
   title,
   disabled,
+  testID,
   // Props that should not be in extraProps
   path: _path,
   context: _context,
   validation: _validation,
-  testID: _testID,
   schema: _schema,
   ruleGroup: _ruleGroup,
   ...extraProps
@@ -27,6 +27,7 @@ export const ChakraNotToggle = ({
   return (
     <div style={{ display: 'inline-block' }}>
       <FormControl
+        data-testid={testID}
         display="flex"
         alignItems="center"
         className={className}
diff --git a/src/ChakraValueEditor.tsx b/src/ChakraValueEditor.tsx
index 274fffd..2bc1a7f 100644
--- a/src/ChakraValueEditor.tsx
+++ b/src/ChakraValueEditor.tsx
@@ -4,7 +4,7 @@ import type { ValueEditorProps } from 'react-querybuilder';
 import { ValueEditor, useValueEditor } from 'react-querybuilder';
 
 // oxlint-disable-next-line no-explicit-any
-type ChakraValueEditorProps = ValueEditorProps & { extraProps?: Record<string, any> };
+export type ChakraValueEditorProps = ValueEditorProps & { extraProps?: Record<string, any> };
 
 export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.Element | null => {
   const {
@@ -19,7 +19,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     values = [],
     listsAsArrays: _listsAsArrays,
     separator,
-    valueSource: _vs,
+    valueSource: _valueSource,
     testID,
     disabled,
     selectorComponent: SelectorComponent = allProps.schema.controls.valueSelector,
@@ -34,7 +34,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     return null;
   }
 
-  const placeHolderText = fieldData?.placeholder ?? '';
+  const placeholderText = fieldData?.placeholder ?? '';
   const inputTypeCoerced = ['in', 'notIn'].includes(operator) ? 'text' : inputType || 'text';
 
   if (
@@ -50,7 +50,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
             value={valueAsArray[i] ?? ''}
             isDisabled={disabled}
             className={valueListItemClassName}
-            placeholder={placeHolderText}
+            placeholder={placeholderText}
             onChange={e => multiValueHandler(e.target.value, i)}
             {...extraProps}
           />
@@ -72,6 +72,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
       return (
         <SelectorComponent
           {...propsForValueSelector}
+          data-testid={testID}
           className={className}
           title={title}
           value={value}
@@ -87,11 +88,12 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'textarea':
       return (
         <Textarea
+          data-testid={testID}
           value={value}
           title={title}
           isDisabled={disabled}
           className={className}
-          placeholder={placeHolderText}
+          placeholder={placeholderText}
           onChange={e => handleOnChange(e.target.value)}
           {...extraProps}
         />
@@ -100,6 +102,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'switch':
       return (
         <Switch
+          data-testid={testID}
           className={className}
           isChecked={!!value}
           title={title}
@@ -112,6 +115,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'checkbox':
       return (
         <Checkbox
+          data-testid={testID}
           className={className}
           title={title}
           isDisabled={disabled}
@@ -124,6 +128,7 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
     case 'radio':
       return (
         <RadioGroup
+          data-testid={testID}
           className={className}
           title={title}
           value={value}
@@ -143,12 +148,13 @@ export const ChakraValueEditor = (allProps: ChakraValueEditorProps): React.JSX.E
 
   return (
     <Input
+      data-testid={testID}
       type={inputTypeCoerced}
       value={value}
       title={title}
       isDisabled={disabled}
       className={className}
-      placeholder={placeHolderText}
+      placeholder={placeholderText}
       onChange={e => handleOnChange(e.target.value)}
       {...extraProps}
     />
diff --git a/src/ChakraValueSelector.tsx b/src/ChakraValueSelector.tsx
index a2e372d..9b2691b 100644
--- a/src/ChakraValueSelector.tsx
+++ b/src/ChakraValueSelector.tsx
@@ -2,41 +2,47 @@ import { Select } from '@chakra-ui/react';
 import type { ComponentPropsWithoutRef } from 'react';
 import * as React from 'react';
 import type { VersatileSelectorProps } from 'react-querybuilder';
-import { toOptions } from 'react-querybuilder';
+import { toOptions, useSelectElementChangeHandler, useValueSelector } from 'react-querybuilder';
 
 export type ChakraValueSelectorProps = VersatileSelectorProps &
   ComponentPropsWithoutRef<typeof Select>;
 
-export const ChakraValueSelector = ({
-  className,
-  handleOnChange,
-  options,
-  value,
-  title,
-  disabled,
-  // Props that should not be in extraProps
-  testID: _testID,
-  rule: _rule,
-  rules: _rules,
-  level: _level,
-  path: _path,
-  context: _context,
-  validation: _validation,
-  operator: _operator,
-  field: _field,
-  fieldData: _fieldData,
-  multiple: _multiple,
-  listsAsArrays: _listsAsArrays,
-  schema: _schema,
-  ...extraProps
-}: ChakraValueSelectorProps): React.JSX.Element => (
-  <Select
-    className={className}
-    title={title}
-    value={value}
-    disabled={disabled}
-    onChange={e => handleOnChange(e.target.value)}
-    {...extraProps}>
-    {toOptions(options)}
-  </Select>
-);
+export const ChakraValueSelector = (props: ChakraValueSelectorProps): React.JSX.Element => {
+  const {
+    className,
+    options,
+    title,
+    disabled,
+    multiple,
+    testID,
+    // Props that should not be in extraProps
+    rule: _rule,
+    rules: _rules,
+    level: _level,
+    path: _path,
+    context: _context,
+    validation: _validation,
+    operator: _operator,
+    field: _field,
+    fieldData: _fieldData,
+    listsAsArrays: _listsAsArrays,
+    schema: _schema,
+    ...extraProps
+  } = props;
+  const { onChange, val } = useValueSelector(props);
+  const selectElementChangeHandler = useSelectElementChangeHandler({ multiple, onChange });
+  return (
+    <Select
+      data-testid={testID}
+      className={className}
+      title={title}
+      value={val}
+      isDisabled={disabled}
+      // Chakra v2 doesn't support multiselect
+      // multiple={!!multiple}
+      onChange={selectElementChangeHandler}
+      {...extraProps}>
+      {toOptions(options)}
+    </Select>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
index 1cf9051..d51cc41 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,6 +6,8 @@ import {
   LockIcon,
   UnlockIcon,
   UpDownIcon,
+  ViewIcon,
+  ViewOffIcon,
 } from '@chakra-ui/icons';
 import * as React from 'react';
 import type {
@@ -18,12 +20,14 @@ import { getCompatContextProvider } from 'react-querybuilder';
 import { ChakraActionElement } from './ChakraActionElement';
 import { ChakraDragHandle } from './ChakraDragHandle';
 import { ChakraNotToggle } from './ChakraNotToggle';
+import { ChakraShiftActions } from './ChakraShiftActions';
 import { ChakraValueEditor } from './ChakraValueEditor';
 import { ChakraValueSelector } from './ChakraValueSelector';
 
 export * from './ChakraActionElement';
 export * from './ChakraDragHandle';
 export * from './ChakraNotToggle';
+export * from './ChakraShiftActions';
 export * from './ChakraValueEditor';
 export * from './ChakraValueSelector';
 
@@ -32,6 +36,7 @@ export const chakraControlElements: ControlElementsProp<FullField, string> = {
   valueSelector: ChakraValueSelector,
   dragHandle: ChakraDragHandle,
   notToggle: ChakraNotToggle,
+  shiftActions: ChakraShiftActions,
   valueEditor: ChakraValueEditor,
 };
 
@@ -45,6 +50,10 @@ export const chakraTranslations: Partial<Translations> = {
   lockRule: { label: <UnlockIcon /> },
   lockGroupDisabled: { label: <LockIcon /> },
   lockRuleDisabled: { label: <LockIcon /> },
+  muteRule: { label: <ViewIcon /> },
+  muteGroup: { label: <ViewIcon /> },
+  unmuteRule: { label: <ViewOffIcon /> },
+  unmuteGroup: { label: <ViewOffIcon /> },
   shiftActionDown: { label: <ChevronDownIcon /> },
   shiftActionUp: { label: <ChevronUpIcon /> },
 };
diff --git a/tsdown.config.ts b/tsdown.config.ts
index 626c60b..99408b9 100644
--- a/tsdown.config.ts
+++ b/tsdown.config.ts
@@ -14,7 +14,7 @@ export default (async options => {
 
   const productionOptions = {
     minify: true,
-    define: { NODE_ENV: 'production' },
+    define: { 'process.env.NODE_ENV': 'production' },
   } satisfies UserConfig;
 
   const opts: UserConfig[] = [
diff --git a/typedoc.json b/typedoc.json
deleted file mode 100644
index c6cae0e..0000000
--- a/typedoc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "entryPoints": ["src/index.tsx"],
-  "extends": ["../../typedoc.json"]
-}