@wordpress/components 25.7.0 → 25.8.1

package/build-module/toggle-group-control/toggle-group-control/as-button-group.js

@@ -1,74 +1,59 @@
 import { createElement } from "@wordpress/element";
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
-import { useMergeRefs, useInstanceId, usePrevious, useResizeObserver } from '@wordpress/compose';
-import { forwardRef, useRef, useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { View } from '../../view';
-import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
+import { useControlledValue } from '../../utils';
 import ToggleGroupControlContext from '../context';
-import { useUpdateEffect } from '../../utils/hooks';
+import { useComputeControlledOrUncontrolledValue } from './utils';
 function UnforwardedToggleGroupControlAsButtonGroup({
   children,
   isAdaptiveWidth,
   label,
   onChange,
   size,
-  value,
+  value: valueProp,
+  id: idProp,
   ...otherProps
 }, forwardedRef) {
-  const containerRef = useRef();
-  const [resizeListener, sizes] = useResizeObserver();
-  const baseId = useInstanceId(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group').toString();
-  const [selectedValue, setSelectedValue] = useState(value);
-  const groupContext = {
-    baseId,
-    state: selectedValue,
-    setState: setSelectedValue
-  };
-  const previousValue = usePrevious(value);
-
-  // Propagate groupContext.state change.
-  useUpdateEffect(() => {
-    // Avoid calling onChange if groupContext state changed
-    // from incoming value.
-    if (previousValue !== groupContext.state) {
-      onChange(groupContext.state);
-    }
-  }, [groupContext.state]);
+  const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');
+  const baseId = idProp || generatedId;
 
-  // Sync incoming value with groupContext.state.
-  useUpdateEffect(() => {
-    if (value !== groupContext.state) {
-      groupContext.setState(value);
-    }
-  }, [value]);
+  // Use a heuristic to understand if the component is being used in controlled
+  // or uncontrolled mode, and consequently:
+  // - when controlled, convert `undefined` values to `''` (ie. "no value")
+  // - use the `value` prop as the `defaultValue` when uncontrolled
+  const {
+    value,
+    defaultValue
+  } = useComputeControlledOrUncontrolledValue(valueProp);
+  const [selectedValue, setSelectedValue] = useControlledValue({
+    defaultValue,
+    value,
+    onChange
+  });
+  const groupContextValue = useMemo(() => ({
+    baseId,
+    value: selectedValue,
+    setValue: setSelectedValue,
+    isBlock: !isAdaptiveWidth,
+    isDeselectable: true,
+    size
+  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size]);
   return createElement(ToggleGroupControlContext.Provider, {
-    value: {
-      ...groupContext,
-      isBlock: !isAdaptiveWidth,
-      isDeselectable: true,
-      size
-    }
+    value: groupContextValue
   }, createElement(View, {
     "aria-label": label,
     ...otherProps,
-    ref: useMergeRefs([containerRef, forwardedRef]),
+    ref: forwardedRef,
     role: "group"
-  }, resizeListener, createElement(ToggleGroupControlBackdrop, {
-    state: groupContext.state,
-    containerRef: containerRef,
-    containerWidth: sizes.width,
-    isAdaptiveWidth: isAdaptiveWidth
-  }), children));
+  }, children));
 }
 export const ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);
 //# sourceMappingURL=as-button-group.js.map

package/build-module/toggle-group-control/toggle-group-control/as-button-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMergeRefs","useInstanceId","usePrevious","useResizeObserver","forwardRef","useRef","useState","View","ToggleGroupControlBackdrop","ToggleGroupControlContext","useUpdateEffect","UnforwardedToggleGroupControlAsButtonGroup","children","isAdaptiveWidth","label","onChange","size","value","otherProps","forwardedRef","containerRef","resizeListener","sizes","baseId","ToggleGroupControlAsButtonGroup","toString","selectedValue","setSelectedValue","groupContext","state","setState","previousValue","createElement","Provider","isBlock","isDeselectable","ref","role","containerWidth","width"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMergeRefs,\n\tuseInstanceId,\n\tusePrevious,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { forwardRef, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlBackdrop from './toggle-group-control-backdrop';\nimport ToggleGroupControlContext from '../context';\nimport { useUpdateEffect } from '../../utils/hooks';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlMainControlProps } from '../types';\n\nfunction UnforwardedToggleGroupControlAsButtonGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst containerRef = useRef();\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\tconst baseId = useInstanceId(\n\t\tToggleGroupControlAsButtonGroup,\n\t\t'toggle-group-control-as-button-group'\n\t).toString();\n\tconst [ selectedValue, setSelectedValue ] = useState( value );\n\tconst groupContext = {\n\t\tbaseId,\n\t\tstate: selectedValue,\n\t\tsetState: setSelectedValue,\n\t};\n\tconst previousValue = usePrevious( value );\n\n\t// Propagate groupContext.state change.\n\tuseUpdateEffect( () => {\n\t\t// Avoid calling onChange if groupContext state changed\n\t\t// from incoming value.\n\t\tif ( previousValue !== groupContext.state ) {\n\t\t\tonChange( groupContext.state );\n\t\t}\n\t}, [ groupContext.state ] );\n\n\t// Sync incoming value with groupContext.state.\n\tuseUpdateEffect( () => {\n\t\tif ( value !== groupContext.state ) {\n\t\t\tgroupContext.setState( value );\n\t\t}\n\t}, [ value ] );\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider\n\t\t\tvalue={ {\n\t\t\t\t...groupContext,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tisDeselectable: true,\n\t\t\t\tsize,\n\t\t\t} }\n\t\t>\n\t\t\t<View\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t\trole=\"group\"\n\t\t\t>\n\t\t\t\t{ resizeListener }\n\t\t\t\t<ToggleGroupControlBackdrop\n\t\t\t\t\tstate={ groupContext.state }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\tcontainerWidth={ sizes.width }\n\t\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsButtonGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsButtonGroup\n);\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SACCA,YAAY,EACZC,aAAa,EACbC,WAAW,EACXC,iBAAiB,QACX,oBAAoB;AAC3B,SAASC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,oBAAoB;;AAEjE;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AACjC,OAAOC,0BAA0B,MAAM,iCAAiC;AACxE,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,eAAe,QAAQ,mBAAmB;AAInD,SAASC,0CAA0CA,CAClD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC,KAAK;EACL,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,YAAY,GAAGf,MAAM,CAAC,CAAC;EAC7B,MAAM,CAAEgB,cAAc,EAAEC,KAAK,CAAE,GAAGnB,iBAAiB,CAAC,CAAC;EACrD,MAAMoB,MAAM,GAAGtB,aAAa,CAC3BuB,+BAA+B,EAC/B,sCACD,CAAC,CAACC,QAAQ,CAAC,CAAC;EACZ,MAAM,CAAEC,aAAa,EAAEC,gBAAgB,CAAE,GAAGrB,QAAQ,CAAEW,KAAM,CAAC;EAC7D,MAAMW,YAAY,GAAG;IACpBL,MAAM;IACNM,KAAK,EAAEH,aAAa;IACpBI,QAAQ,EAAEH;EACX,CAAC;EACD,MAAMI,aAAa,GAAG7B,WAAW,CAAEe,KAAM,CAAC;;EAE1C;EACAP,eAAe,CAAE,MAAM;IACtB;IACA;IACA,IAAKqB,aAAa,KAAKH,YAAY,CAACC,KAAK,EAAG;MAC3Cd,QAAQ,CAAEa,YAAY,CAACC,KAAM,CAAC;IAC/B;EACD,CAAC,EAAE,CAAED,YAAY,CAACC,KAAK,CAAG,CAAC;;EAE3B;EACAnB,eAAe,CAAE,MAAM;IACtB,IAAKO,KAAK,KAAKW,YAAY,CAACC,KAAK,EAAG;MACnCD,YAAY,CAACE,QAAQ,CAAEb,KAAM,CAAC;IAC/B;EACD,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC;EAEd,OACCe,aAAA,CAACvB,yBAAyB,CAACwB,QAAQ;IAClChB,KAAK,EAAG;MACP,GAAGW,YAAY;MACfM,OAAO,EAAE,CAAErB,eAAe;MAC1BsB,cAAc,EAAE,IAAI;MACpBnB;IACD;EAAG,GAEHgB,aAAA,CAACzB,IAAI;IACJ,cAAaO,KAAO;IAAA,GACfI,UAAU;IACfkB,GAAG,EAAGpC,YAAY,CAAE,CAAEoB,YAAY,EAAED,YAAY,CAAG,CAAG;IACtDkB,IAAI,EAAC;EAAO,GAEVhB,cAAc,EAChBW,aAAA,CAACxB,0BAA0B;IAC1BqB,KAAK,EAAGD,YAAY,CAACC,KAAO;IAC5BT,YAAY,EAAGA,YAAc;IAC7BkB,cAAc,EAAGhB,KAAK,CAACiB,KAAO;IAC9B1B,eAAe,EAAGA;EAAiB,CACnC,CAAC,EACAD,QACG,CAC6B,CAAC;AAEvC;AAEA,OAAO,MAAMY,+BAA+B,GAAGpB,UAAU,CACxDO,0CACD,CAAC"}
+{"version":3,"names":["useInstanceId","forwardRef","useMemo","View","useControlledValue","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","UnforwardedToggleGroupControlAsButtonGroup","children","isAdaptiveWidth","label","onChange","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","ToggleGroupControlAsButtonGroup","baseId","defaultValue","selectedValue","setSelectedValue","groupContextValue","setValue","isBlock","isDeselectable","createElement","Provider","ref","role"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsButtonGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsButtonGroup,\n\t\t'toggle-group-control-as-button-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\tconst [ selectedValue, setSelectedValue ] = useControlledValue( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tonChange,\n\t} );\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue: setSelectedValue,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tisDeselectable: true,\n\t\t\t\tsize,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<View\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\trole=\"group\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsButtonGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsButtonGroup\n);\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,kBAAkB,QAAQ,aAAa;AAEhD,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAMjE,SAASC,0CAA0CA,CAClD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAAkD,EACjD;EACD,MAAMC,WAAW,GAAGnB,aAAa,CAChCoB,+BAA+B,EAC/B,sCACD,CAAC;EACD,MAAMC,MAAM,GAAGL,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAES;EAAa,CAAC,GAC5BhB,uCAAuC,CAAEQ,SAAU,CAAC;EAErD,MAAM,CAAES,aAAa,EAAEC,gBAAgB,CAAE,GAAGpB,kBAAkB,CAAE;IAC/DkB,YAAY;IACZT,KAAK;IACLF;EACD,CAAE,CAAC;EAEH,MAAMc,iBAAiB,GAAGvB,OAAO,CAChC,OACG;IACDmB,MAAM;IACNR,KAAK,EAAEU,aAAa;IACpBG,QAAQ,EAAEF,gBAAgB;IAC1BG,OAAO,EAAE,CAAElB,eAAe;IAC1BmB,cAAc,EAAE,IAAI;IACpBhB;EACD,CAAC,CAAoC,EACtC,CAAES,MAAM,EAAEE,aAAa,EAAEC,gBAAgB,EAAEf,eAAe,EAAEG,IAAI,CACjE,CAAC;EAED,OACCiB,aAAA,CAACxB,yBAAyB,CAACyB,QAAQ;IAACjB,KAAK,EAAGY;EAAmB,GAC9DI,aAAA,CAAC1B,IAAI;IACJ,cAAaO,KAAO;IAAA,GACfO,UAAU;IACfc,GAAG,EAAGb,YAAc;IACpBc,IAAI,EAAC;EAAO,GAEVxB,QACG,CAC6B,CAAC;AAEvC;AAEA,OAAO,MAAMY,+BAA+B,GAAGnB,UAAU,CACxDM,0CACD,CAAC"}

package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js

@@ -4,72 +4,71 @@ import { createElement } from "@wordpress/element";
  */
 
 // eslint-disable-next-line no-restricted-imports
-import { RadioGroup, useRadioState } from 'reakit';
+import { RadioGroup, useRadioStore } from '@ariakit/react/radio';
 
 /**
  * WordPress dependencies
  */
-import { useMergeRefs, useInstanceId, usePrevious, useResizeObserver } from '@wordpress/compose';
-import { forwardRef, useRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { View } from '../../view';
-import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
 import ToggleGroupControlContext from '../context';
-import { useUpdateEffect } from '../../utils/hooks';
+import { useComputeControlledOrUncontrolledValue } from './utils';
 function UnforwardedToggleGroupControlAsRadioGroup({
   children,
   isAdaptiveWidth,
   label,
-  onChange,
+  onChange: onChangeProp,
   size,
-  value,
+  value: valueProp,
+  id: idProp,
   ...otherProps
 }, forwardedRef) {
-  const containerRef = useRef();
-  const [resizeListener, sizes] = useResizeObserver();
-  const baseId = useInstanceId(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group').toString();
-  const radio = useRadioState({
-    baseId,
-    state: value
-  });
-  const previousValue = usePrevious(value);
+  const generatedId = useInstanceId(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');
+  const baseId = idProp || generatedId;
 
-  // Propagate radio.state change.
-  useUpdateEffect(() => {
-    // Avoid calling onChange if radio state changed
-    // from incoming value.
-    if (previousValue !== radio.state) {
-      onChange(radio.state);
-    }
-  }, [radio.state]);
+  // Use a heuristic to understand if the component is being used in controlled
+  // or uncontrolled mode, and consequently:
+  // - when controlled, convert `undefined` values to `''` (ie. "no value")
+  // - use the `value` prop as the `defaultValue` when uncontrolled
+  const {
+    value,
+    defaultValue
+  } = useComputeControlledOrUncontrolledValue(valueProp);
 
-  // Sync incoming value with radio.state.
-  useUpdateEffect(() => {
-    if (value !== radio.state) {
-      radio.setState(value);
-    }
-  }, [value]);
+  // `useRadioStore`'s `setValue` prop can be called with `null`, while
+  // the component's `onChange` prop only expects `undefined`
+  const wrappedOnChangeProp = onChangeProp ? v => {
+    onChangeProp(v !== null && v !== void 0 ? v : undefined);
+  } : undefined;
+  const radio = useRadioStore({
+    defaultValue,
+    value,
+    setValue: wrappedOnChangeProp
+  });
+  const selectedValue = radio.useState('value');
+  const setValue = radio.setValue;
+  const groupContextValue = useMemo(() => ({
+    baseId,
+    isBlock: !isAdaptiveWidth,
+    size,
+    value: selectedValue,
+    setValue
+  }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]);
   return createElement(ToggleGroupControlContext.Provider, {
-    value: {
-      ...radio,
-      isBlock: !isAdaptiveWidth,
-      size
-    }
+    value: groupContextValue
   }, createElement(RadioGroup, {
-    ...radio,
+    store: radio,
     "aria-label": label,
     as: View,
     ...otherProps,
-    ref: useMergeRefs([containerRef, forwardedRef])
-  }, resizeListener, createElement(ToggleGroupControlBackdrop, {
-    state: radio.state,
-    containerRef: containerRef,
-    containerWidth: sizes.width,
-    isAdaptiveWidth: isAdaptiveWidth
-  }), children));
+    id: baseId,
+    ref: forwardedRef
+  }, children));
 }
 export const ToggleGroupControlAsRadioGroup = forwardRef(UnforwardedToggleGroupControlAsRadioGroup);
 //# sourceMappingURL=as-radio-group.js.map

package/build-module/toggle-group-control/toggle-group-control/as-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["RadioGroup","useRadioState","useMergeRefs","useInstanceId","usePrevious","useResizeObserver","forwardRef","useRef","View","ToggleGroupControlBackdrop","ToggleGroupControlContext","useUpdateEffect","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","size","value","otherProps","forwardedRef","containerRef","resizeListener","sizes","baseId","ToggleGroupControlAsRadioGroup","toString","radio","state","previousValue","setState","createElement","Provider","isBlock","as","ref","containerWidth","width"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { RadioGroup, useRadioState } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMergeRefs,\n\tuseInstanceId,\n\tusePrevious,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlBackdrop from './toggle-group-control-backdrop';\nimport ToggleGroupControlContext from '../context';\nimport { useUpdateEffect } from '../../utils/hooks';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlMainControlProps } from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst containerRef = useRef();\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\tconst baseId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t).toString();\n\tconst radio = useRadioState( {\n\t\tbaseId,\n\t\tstate: value,\n\t} );\n\tconst previousValue = usePrevious( value );\n\n\t// Propagate radio.state change.\n\tuseUpdateEffect( () => {\n\t\t// Avoid calling onChange if radio state changed\n\t\t// from incoming value.\n\t\tif ( previousValue !== radio.state ) {\n\t\t\tonChange( radio.state );\n\t\t}\n\t}, [ radio.state ] );\n\n\t// Sync incoming value with radio.state.\n\tuseUpdateEffect( () => {\n\t\tif ( value !== radio.state ) {\n\t\t\tradio.setState( value );\n\t\t}\n\t}, [ value ] );\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider\n\t\t\tvalue={ { ...radio, isBlock: ! isAdaptiveWidth, size } }\n\t\t>\n\t\t\t<RadioGroup\n\t\t\t\t{ ...radio }\n\t\t\t\taria-label={ label }\n\t\t\t\tas={ View }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t>\n\t\t\t\t{ resizeListener }\n\t\t\t\t<ToggleGroupControlBackdrop\n\t\t\t\t\tstate={ radio.state }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\tcontainerWidth={ sizes.width }\n\t\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA,SAASA,UAAU,EAAEC,aAAa,QAAQ,QAAQ;;AAElD;AACA;AACA;AACA,SACCC,YAAY,EACZC,aAAa,EACbC,WAAW,EACXC,iBAAiB,QACX,oBAAoB;AAC3B,SAASC,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;;AAEvD;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AACjC,OAAOC,0BAA0B,MAAM,iCAAiC;AACxE,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,eAAe,QAAQ,mBAAmB;AAInD,SAASC,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC,KAAK;EACL,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,YAAY,GAAGd,MAAM,CAAC,CAAC;EAC7B,MAAM,CAAEe,cAAc,EAAEC,KAAK,CAAE,GAAGlB,iBAAiB,CAAC,CAAC;EACrD,MAAMmB,MAAM,GAAGrB,aAAa,CAC3BsB,8BAA8B,EAC9B,qCACD,CAAC,CAACC,QAAQ,CAAC,CAAC;EACZ,MAAMC,KAAK,GAAG1B,aAAa,CAAE;IAC5BuB,MAAM;IACNI,KAAK,EAAEV;EACR,CAAE,CAAC;EACH,MAAMW,aAAa,GAAGzB,WAAW,CAAEc,KAAM,CAAC;;EAE1C;EACAP,eAAe,CAAE,MAAM;IACtB;IACA;IACA,IAAKkB,aAAa,KAAKF,KAAK,CAACC,KAAK,EAAG;MACpCZ,QAAQ,CAAEW,KAAK,CAACC,KAAM,CAAC;IACxB;EACD,CAAC,EAAE,CAAED,KAAK,CAACC,KAAK,CAAG,CAAC;;EAEpB;EACAjB,eAAe,CAAE,MAAM;IACtB,IAAKO,KAAK,KAAKS,KAAK,CAACC,KAAK,EAAG;MAC5BD,KAAK,CAACG,QAAQ,CAAEZ,KAAM,CAAC;IACxB;EACD,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC;EAEd,OACCa,aAAA,CAACrB,yBAAyB,CAACsB,QAAQ;IAClCd,KAAK,EAAG;MAAE,GAAGS,KAAK;MAAEM,OAAO,EAAE,CAAEnB,eAAe;MAAEG;IAAK;EAAG,GAExDc,aAAA,CAAC/B,UAAU;IAAA,GACL2B,KAAK;IACV,cAAaZ,KAAO;IACpBmB,EAAE,EAAG1B,IAAM;IAAA,GACNW,UAAU;IACfgB,GAAG,EAAGjC,YAAY,CAAE,CAAEmB,YAAY,EAAED,YAAY,CAAG;EAAG,GAEpDE,cAAc,EAChBS,aAAA,CAACtB,0BAA0B;IAC1BmB,KAAK,EAAGD,KAAK,CAACC,KAAO;IACrBP,YAAY,EAAGA,YAAc;IAC7Be,cAAc,EAAGb,KAAK,CAACc,KAAO;IAC9BvB,eAAe,EAAGA;EAAiB,CACnC,CAAC,EACAD,QACS,CACuB,CAAC;AAEvC;AAEA,OAAO,MAAMY,8BAA8B,GAAGnB,UAAU,CACvDM,yCACD,CAAC"}
+{"version":3,"names":["RadioGroup","useRadioStore","useInstanceId","forwardRef","useMemo","View","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","wrappedOnChangeProp","v","undefined","radio","setValue","selectedValue","useState","groupContextValue","isBlock","createElement","Provider","store","as","ref"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { RadioGroup, useRadioStore } from '@ariakit/react/radio';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t  }\n\t\t: undefined;\n\n\tconst radio = useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t} );\n\n\tconst selectedValue = radio.useState( 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\tas={ View }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA,SAASA,UAAU,EAAEC,aAAa,QAAQ,sBAAsB;;AAEhE;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAMjE,SAASC,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAGnB,aAAa,CAChCoB,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGL,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAES;EAAa,CAAC,GAC5BjB,uCAAuC,CAAES,SAAU,CAAC;;EAErD;EACA;EACA,MAAMS,mBAAmB,GAAGZ,YAAY,GACnCa,CAAyB,IAAM;IACjCb,YAAY,CAAEa,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAG3B,aAAa,CAAE;IAC5BuB,YAAY;IACZT,KAAK;IACLc,QAAQ,EAAEJ;EACX,CAAE,CAAC;EAEH,MAAMK,aAAa,GAAGF,KAAK,CAACG,QAAQ,CAAE,OAAQ,CAAC;EAC/C,MAAMF,QAAQ,GAAGD,KAAK,CAACC,QAAQ;EAE/B,MAAMG,iBAAiB,GAAG5B,OAAO,CAChC,OACG;IACDmB,MAAM;IACNU,OAAO,EAAE,CAAEvB,eAAe;IAC1BI,IAAI;IACJC,KAAK,EAAEe,aAAa;IACpBD;EACD,CAAC,CAAoC,EACtC,CAAEN,MAAM,EAAEb,eAAe,EAAEI,IAAI,EAAEgB,aAAa,EAAED,QAAQ,CACzD,CAAC;EAED,OACCK,aAAA,CAAC5B,yBAAyB,CAAC6B,QAAQ;IAACpB,KAAK,EAAGiB;EAAmB,GAC9DE,aAAA,CAAClC,UAAU;IACVoC,KAAK,EAAGR,KAAO;IACf,cAAajB,KAAO;IACpB0B,EAAE,EAAGhC,IAAM;IAAA,GACNc,UAAU;IACfF,EAAE,EAAGM,MAAQ;IACbe,GAAG,EAAGlB;EAAc,GAElBX,QACS,CACuB,CAAC;AAEvC;AAEA,OAAO,MAAMa,8BAA8B,GAAGnB,UAAU,CACvDK,yCACD,CAAC"}

package/build-module/toggle-group-control/toggle-group-control/component.js

@@ -3,10 +3,13 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 
+// eslint-disable-next-line no-restricted-imports
+import { LayoutGroup } from 'framer-motion';
+
 /**
  * WordPress dependencies
  */
-
+import { useInstanceId } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -20,7 +23,6 @@ import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
-const noop = () => {};
 function UnconnectedToggleGroupControl(props, forwardedRef) {
   const {
     __nextHasNoMarginBottom = false,
@@ -31,14 +33,15 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     label,
     hideLabelFromVision = false,
     help,
-    onChange = noop,
+    onChange,
     size = 'default',
     value,
     children,
     ...otherProps
   } = useContextSystem(props, 'ToggleGroupControl');
+  const baseId = useInstanceId(ToggleGroupControl, 'toggle-group-control');
   const cx = useCx();
-  const classes = useMemo(() => cx(styles.ToggleGroupControl({
+  const classes = useMemo(() => cx(styles.toggleGroupControl({
     isBlock,
     isDeselectable,
     size
@@ -49,7 +52,6 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom
   }, !hideLabelFromVision && createElement(VisualLabelWrapper, null, createElement(BaseControl.VisualLabel, null, label)), createElement(MainControl, {
     ...otherProps,
-    children: children,
     className: classes,
     isAdaptiveWidth: isAdaptiveWidth,
     label: label,
@@ -57,7 +59,9 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     ref: forwardedRef,
     size: size,
     value: value
-  }));
+  }, createElement(LayoutGroup, {
+    id: baseId
+  }, children)));
 }
 
 /**

package/build-module/toggle-group-control/toggle-group-control/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","noop","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","cx","classes","ToggleGroupControl","block","MainControl","createElement","VisualLabel","ref"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport { contextConnect, useContextSystem } from '../../ui/context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\n\nconst noop = () => {};\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange = noop,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.ToggleGroupControl( { isBlock, isDeselectable, size } ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, size ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tchildren={ children }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tvalue={ value }\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAEA,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,kBAAkB;AACnE,SAASC,KAAK,QAAQ,mBAAmB;AACzC,OAAOC,WAAW,MAAM,oBAAoB;AAE5C,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,SAASC,8BAA8B,QAAQ,kBAAkB;AACjE,SAASC,+BAA+B,QAAQ,mBAAmB;AAEnE,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,SAASC,6BAA6BA,CACrCC,KAAuE,EACvEC,YAAiC,EAChC;EACD,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,SAAS;IACTC,eAAe,GAAG,KAAK;IACvBC,OAAO,GAAG,KAAK;IACfC,cAAc,GAAG,KAAK;IACtBC,KAAK;IACLC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI;IACJC,QAAQ,GAAGZ,IAAI;IACfa,IAAI,GAAG,SAAS;IAChBC,KAAK;IACLC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAGvB,gBAAgB,CAAES,KAAK,EAAE,oBAAqB,CAAC;EACnD,MAAMe,EAAE,GAAGvB,KAAK,CAAC,CAAC;EAElB,MAAMwB,OAAO,GAAG3B,OAAO,CACtB,MACC0B,EAAE,CACDpB,MAAM,CAACsB,kBAAkB,CAAE;IAAEZ,OAAO;IAAEC,cAAc;IAAEK;EAAK,CAAE,CAAC,EAC9DN,OAAO,IAAIV,MAAM,CAACuB,KAAK,EACvBf,SACD,CAAC,EACF,CAAEA,SAAS,EAAEY,EAAE,EAAEV,OAAO,EAAEC,cAAc,EAAEK,IAAI,CAC/C,CAAC;EAED,MAAMQ,WAAW,GAAGb,cAAc,GAC/BT,+BAA+B,GAC/BD,8BAA8B;EAEjC,OACCwB,aAAA,CAAC3B,WAAW;IACXgB,IAAI,EAAGA,IAAM;IACbP,uBAAuB,EAAGA;EAAyB,GAEjD,CAAEM,mBAAmB,IACtBY,aAAA,CAAC1B,kBAAkB,QAClB0B,aAAA,CAAC3B,WAAW,CAAC4B,WAAW,QAAGd,KAAgC,CACxC,CACpB,EACDa,aAAA,CAACD,WAAW;IAAA,GACNL,UAAU;IACfD,QAAQ,EAAGA,QAAU;IACrBV,SAAS,EAAGa,OAAS;IACrBZ,eAAe,EAAGA,eAAiB;IACnCG,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGA,QAAU;IACrBY,GAAG,EAAGrB,YAAc;IACpBU,IAAI,EAAGA,IAAM;IACbC,KAAK,EAAGA;EAAO,CACf,CACW,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,kBAAkB,GAAG3B,cAAc,CAC/CS,6BAA6B,EAC7B,oBACD,CAAC;AAED,eAAekB,kBAAkB"}
+{"version":3,"names":["LayoutGroup","useInstanceId","useMemo","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","baseId","ToggleGroupControl","cx","classes","toggleGroupControl","block","MainControl","createElement","VisualLabel","ref","id"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { LayoutGroup } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport { contextConnect, useContextSystem } from '../../ui/context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\n\tconst baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.toggleGroupControl( { isBlock, isDeselectable, size } ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, size ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t<LayoutGroup id={ baseId }>{ children }</LayoutGroup>\n\t\t\t</MainControl>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA,SAASA,WAAW,QAAQ,eAAe;;AAE3C;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAElD,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAEA,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,kBAAkB;AACnE,SAASC,KAAK,QAAQ,mBAAmB;AACzC,OAAOC,WAAW,MAAM,oBAAoB;AAE5C,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,SAASC,8BAA8B,QAAQ,kBAAkB;AACjE,SAASC,+BAA+B,QAAQ,mBAAmB;AAEnE,SAASC,6BAA6BA,CACrCC,KAAuE,EACvEC,YAAiC,EAChC;EACD,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,SAAS;IACTC,eAAe,GAAG,KAAK;IACvBC,OAAO,GAAG,KAAK;IACfC,cAAc,GAAG,KAAK;IACtBC,KAAK;IACLC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,SAAS;IAChBC,KAAK;IACLC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAGtB,gBAAgB,CAAEQ,KAAK,EAAE,oBAAqB,CAAC;EAEnD,MAAMe,MAAM,GAAG1B,aAAa,CAAE2B,kBAAkB,EAAE,sBAAuB,CAAC;EAE1E,MAAMC,EAAE,GAAGxB,KAAK,CAAC,CAAC;EAElB,MAAMyB,OAAO,GAAG5B,OAAO,CACtB,MACC2B,EAAE,CACDrB,MAAM,CAACuB,kBAAkB,CAAE;IAAEd,OAAO;IAAEC,cAAc;IAAEK;EAAK,CAAE,CAAC,EAC9DN,OAAO,IAAIT,MAAM,CAACwB,KAAK,EACvBjB,SACD,CAAC,EACF,CAAEA,SAAS,EAAEc,EAAE,EAAEZ,OAAO,EAAEC,cAAc,EAAEK,IAAI,CAC/C,CAAC;EAED,MAAMU,WAAW,GAAGf,cAAc,GAC/BR,+BAA+B,GAC/BD,8BAA8B;EAEjC,OACCyB,aAAA,CAAC5B,WAAW;IACXe,IAAI,EAAGA,IAAM;IACbP,uBAAuB,EAAGA;EAAyB,GAEjD,CAAEM,mBAAmB,IACtBc,aAAA,CAAC3B,kBAAkB,QAClB2B,aAAA,CAAC5B,WAAW,CAAC6B,WAAW,QAAGhB,KAAgC,CACxC,CACpB,EACDe,aAAA,CAACD,WAAW;IAAA,GACNP,UAAU;IACfX,SAAS,EAAGe,OAAS;IACrBd,eAAe,EAAGA,eAAiB;IACnCG,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGA,QAAU;IACrBc,GAAG,EAAGvB,YAAc;IACpBU,IAAI,EAAGA,IAAM;IACbC,KAAK,EAAGA;EAAO,GAEfU,aAAA,CAAClC,WAAW;IAACqC,EAAE,EAAGV;EAAQ,GAAGF,QAAuB,CACxC,CACD,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,kBAAkB,GAAGzB,cAAc,CAC/CQ,6BAA6B,EAC7B,oBACD,CAAC;AAED,eAAeiB,kBAAkB"}

package/build-module/toggle-group-control/toggle-group-control/styles.js

@@ -7,22 +7,22 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { CONFIG, COLORS, reduceMotion } from '../../utils';
-export const ToggleGroupControl = ({
+import { CONFIG, COLORS } from '../../utils';
+export const toggleGroupControl = ({
   isBlock,
   isDeselectable,
   size
-}) => /*#__PURE__*/css("background:", COLORS.ui.background, ";border:1px solid transparent;border-radius:", CONFIG.controlBorderRadius, ";display:inline-flex;min-width:0;padding:2px;position:relative;transition:transform ", CONFIG.transitionDurationFastest, " linear;", reduceMotion('transition'), " ", toggleGroupControlSize(size), " ", !isDeselectable && enclosingBorders(isBlock), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:ToggleGroupControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCVSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0aXNCbG9jayxcblx0aXNEZXNlbGVjdGFibGUsXG5cdHNpemUsXG59OiBQaWNrPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wcywgJ2lzQmxvY2snIHwgJ2lzRGVzZWxlY3RhYmxlJyA+ICYge1xuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID47XG59ICkgPT4gY3NzYFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkuYmFja2dyb3VuZCB9O1xuXHRib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdG1pbi13aWR0aDogMDtcblx0cGFkZGluZzogMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdGVzdCB9IGxpbmVhcjtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cblx0JHsgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSggc2l6ZSApIH1cblx0JHsgISBpc0Rlc2VsZWN0YWJsZSAmJiBlbmNsb3NpbmdCb3JkZXJzKCBpc0Jsb2NrICkgfVxuYDtcblxuY29uc3QgZW5jbG9zaW5nQm9yZGVycyA9ICggaXNCbG9jazogVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdpc0Jsb2NrJyBdICkgPT4ge1xuXHRjb25zdCBlbmNsb3NpbmdCb3JkZXIgPSBjc3NgXG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGA7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHQkeyBpc0Jsb2NrICYmIGVuY2xvc2luZ0JvcmRlciB9XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdFx0fVxuXG5cdFx0Jjpmb2N1cy13aXRoaW4ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0XHRcdHotaW5kZXg6IDE7XG5cdFx0XHQvLyBXaW5kb3dzIEhpZ2ggQ29udHJhc3QgbW9kZSB3aWxsIHNob3cgdGhpcyBvdXRsaW5lLCBidXQgbm90IHRoZSBib3gtc2hhZG93LlxuXHRcdFx0b3V0bGluZTogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRcdFx0b3V0bGluZS1vZmZzZXQ6IC0ycHg7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUgPSAoXG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPlxuKSA9PiB7XG5cdGNvbnN0IGhlaWdodHMgPSB7XG5cdFx0ZGVmYXVsdDogJzM2cHgnLFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzogJzQwcHgnLFxuXHR9O1xuXG5cdHJldHVybiBjc3NgXG5cdFx0bWluLWhlaWdodDogJHsgaGVpZ2h0c1sgc2l6ZSBdIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJhY2tkcm9wVmlldyA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMnB4O1xuXHRib3R0b206IDJweDtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0IH0gZWFzZTtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cdHotaW5kZXg6IDE7XG5cdC8vIFdpbmRvd3MgSGlnaCBDb250cmFzdCBtb2RlIHdpbGwgc2hvdyB0aGlzIG91dGxpbmUsIGJ1dCBub3QgdGhlIGJveC1zaGFkb3cuXG5cdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0b3V0bGluZS1vZmZzZXQ6IC0zcHg7XG5gO1xuXG5leHBvcnQgY29uc3QgVmlzdWFsTGFiZWxXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ly8gTWFrZXMgdGhlIGlubGluZSBsYWJlbCBiZSB0aGUgY29ycmVjdCBoZWlnaHQsIGVxdWl2YWxlbnQgdG8gc2V0dGluZyBsaW5lLWhlaWdodDogMFxuXHRkaXNwbGF5OiBmbGV4O1xuYDtcbiJdfQ== */");
+}) => /*#__PURE__*/css("background:", COLORS.ui.background, ";border:1px solid transparent;border-radius:", CONFIG.controlBorderRadius, ";display:inline-flex;min-width:0;padding:2px;position:relative;", toggleGroupControlSize(size), " ", !isDeselectable && enclosingBorders(isBlock), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:toggleGroupControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCVSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzQmxvY2ssXG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufTogUGljazwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMsICdpc0Jsb2NrJyB8ICdpc0Rlc2VsZWN0YWJsZScgPiAmIHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVycyggaXNCbG9jayApIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlcnMgPSAoIGlzQmxvY2s6IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnaXNCbG9jaycgXSApID0+IHtcblx0Y29uc3QgZW5jbG9zaW5nQm9yZGVyID0gY3NzYFxuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0JHsgaXNCbG9jayAmJiBlbmNsb3NpbmdCb3JkZXIgfVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0XHR6LWluZGV4OiAxO1xuXHRcdFx0Ly8gV2luZG93cyBIaWdoIENvbnRyYXN0IG1vZGUgd2lsbCBzaG93IHRoaXMgb3V0bGluZSwgYnV0IG5vdCB0aGUgYm94LXNoYWRvdy5cblx0XHRcdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0XHRcdG91dGxpbmUtb2Zmc2V0OiAtMnB4O1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxMYWJlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHQvLyBNYWtlcyB0aGUgaW5saW5lIGxhYmVsIGJlIHRoZSBjb3JyZWN0IGhlaWdodCwgZXF1aXZhbGVudCB0byBzZXR0aW5nIGxpbmUtaGVpZ2h0OiAwXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuIl19 */");
 const enclosingBorders = isBlock => {
-  const enclosingBorder = /*#__PURE__*/css("border-color:", COLORS.ui.border, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:enclosingBorder;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDNEIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzQmxvY2ssXG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufTogUGljazwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMsICdpc0Jsb2NrJyB8ICdpc0Rlc2VsZWN0YWJsZScgPiAmIHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVycyggaXNCbG9jayApIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlcnMgPSAoIGlzQmxvY2s6IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnaXNCbG9jaycgXSApID0+IHtcblx0Y29uc3QgZW5jbG9zaW5nQm9yZGVyID0gY3NzYFxuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0JHsgaXNCbG9jayAmJiBlbmNsb3NpbmdCb3JkZXIgfVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0XHR6LWluZGV4OiAxO1xuXHRcdFx0Ly8gV2luZG93cyBIaWdoIENvbnRyYXN0IG1vZGUgd2lsbCBzaG93IHRoaXMgb3V0bGluZSwgYnV0IG5vdCB0aGUgYm94LXNoYWRvdy5cblx0XHRcdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0XHRcdG91dGxpbmUtb2Zmc2V0OiAtMnB4O1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuXHQvLyBXaW5kb3dzIEhpZ2ggQ29udHJhc3QgbW9kZSB3aWxsIHNob3cgdGhpcyBvdXRsaW5lLCBidXQgbm90IHRoZSBib3gtc2hhZG93LlxuXHRvdXRsaW5lOiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdG91dGxpbmUtb2Zmc2V0OiAtM3B4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFZpc3VhbExhYmVsV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdC8vIE1ha2VzIHRoZSBpbmxpbmUgbGFiZWwgYmUgdGhlIGNvcnJlY3QgaGVpZ2h0LCBlcXVpdmFsZW50IHRvIHNldHRpbmcgbGluZS1oZWlnaHQ6IDBcblx0ZGlzcGxheTogZmxleDtcbmA7XG4iXX0= */");
-  return /*#__PURE__*/css(isBlock && enclosingBorder, " &:hover{border-color:", COLORS.ui.borderHover, ";}&:focus-within{border-color:", COLORS.ui.borderFocus, ";box-shadow:", CONFIG.controlBoxShadowFocus, ";z-index:1;outline:2px solid transparent;outline-offset:-2px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:enclosingBorders;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0aXNCbG9jayxcblx0aXNEZXNlbGVjdGFibGUsXG5cdHNpemUsXG59OiBQaWNrPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wcywgJ2lzQmxvY2snIHwgJ2lzRGVzZWxlY3RhYmxlJyA+ICYge1xuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID47XG59ICkgPT4gY3NzYFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkuYmFja2dyb3VuZCB9O1xuXHRib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdG1pbi13aWR0aDogMDtcblx0cGFkZGluZzogMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdGVzdCB9IGxpbmVhcjtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cblx0JHsgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSggc2l6ZSApIH1cblx0JHsgISBpc0Rlc2VsZWN0YWJsZSAmJiBlbmNsb3NpbmdCb3JkZXJzKCBpc0Jsb2NrICkgfVxuYDtcblxuY29uc3QgZW5jbG9zaW5nQm9yZGVycyA9ICggaXNCbG9jazogVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdpc0Jsb2NrJyBdICkgPT4ge1xuXHRjb25zdCBlbmNsb3NpbmdCb3JkZXIgPSBjc3NgXG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGA7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHQkeyBpc0Jsb2NrICYmIGVuY2xvc2luZ0JvcmRlciB9XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdFx0fVxuXG5cdFx0Jjpmb2N1cy13aXRoaW4ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0XHRcdHotaW5kZXg6IDE7XG5cdFx0XHQvLyBXaW5kb3dzIEhpZ2ggQ29udHJhc3QgbW9kZSB3aWxsIHNob3cgdGhpcyBvdXRsaW5lLCBidXQgbm90IHRoZSBib3gtc2hhZG93LlxuXHRcdFx0b3V0bGluZTogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRcdFx0b3V0bGluZS1vZmZzZXQ6IC0ycHg7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUgPSAoXG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPlxuKSA9PiB7XG5cdGNvbnN0IGhlaWdodHMgPSB7XG5cdFx0ZGVmYXVsdDogJzM2cHgnLFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzogJzQwcHgnLFxuXHR9O1xuXG5cdHJldHVybiBjc3NgXG5cdFx0bWluLWhlaWdodDogJHsgaGVpZ2h0c1sgc2l6ZSBdIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJhY2tkcm9wVmlldyA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMnB4O1xuXHRib3R0b206IDJweDtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0IH0gZWFzZTtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cdHotaW5kZXg6IDE7XG5cdC8vIFdpbmRvd3MgSGlnaCBDb250cmFzdCBtb2RlIHdpbGwgc2hvdyB0aGlzIG91dGxpbmUsIGJ1dCBub3QgdGhlIGJveC1zaGFkb3cuXG5cdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0b3V0bGluZS1vZmZzZXQ6IC0zcHg7XG5gO1xuXG5leHBvcnQgY29uc3QgVmlzdWFsTGFiZWxXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ly8gTWFrZXMgdGhlIGlubGluZSBsYWJlbCBiZSB0aGUgY29ycmVjdCBoZWlnaHQsIGVxdWl2YWxlbnQgdG8gc2V0dGluZyBsaW5lLWhlaWdodDogMFxuXHRkaXNwbGF5OiBmbGV4O1xuYDtcbiJdfQ== */");
+  const enclosingBorder = /*#__PURE__*/css("border-color:", COLORS.ui.border, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:enclosingBorder;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDNEIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBUb2dnbGVHcm91cENvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IHRvZ2dsZUdyb3VwQ29udHJvbCA9ICgge1xuXHRpc0Jsb2NrLFxuXHRpc0Rlc2VsZWN0YWJsZSxcblx0c2l6ZSxcbn06IFBpY2s8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzLCAnaXNCbG9jaycgfCAnaXNEZXNlbGVjdGFibGUnID4gJiB7XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXHQkeyAhIGlzRGVzZWxlY3RhYmxlICYmIGVuY2xvc2luZ0JvcmRlcnMoIGlzQmxvY2sgKSB9XG5gO1xuXG5jb25zdCBlbmNsb3NpbmdCb3JkZXJzID0gKCBpc0Jsb2NrOiBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ2lzQmxvY2snIF0gKSA9PiB7XG5cdGNvbnN0IGVuY2xvc2luZ0JvcmRlciA9IGNzc2Bcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXIgfTtcblx0YDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdCR7IGlzQmxvY2sgJiYgZW5jbG9zaW5nQm9yZGVyIH1cblxuXHRcdCY6aG92ZXIge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVySG92ZXIgfTtcblx0XHR9XG5cblx0XHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdFx0Ym94LXNoYWRvdzogJHsgQ09ORklHLmNvbnRyb2xCb3hTaGFkb3dGb2N1cyB9O1xuXHRcdFx0ei1pbmRleDogMTtcblx0XHRcdC8vIFdpbmRvd3MgSGlnaCBDb250cmFzdCBtb2RlIHdpbGwgc2hvdyB0aGlzIG91dGxpbmUsIGJ1dCBub3QgdGhlIGJveC1zaGFkb3cuXG5cdFx0XHRvdXRsaW5lOiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdFx0XHRvdXRsaW5lLW9mZnNldDogLTJweDtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgVmlzdWFsTGFiZWxXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ly8gTWFrZXMgdGhlIGlubGluZSBsYWJlbCBiZSB0aGUgY29ycmVjdCBoZWlnaHQsIGVxdWl2YWxlbnQgdG8gc2V0dGluZyBsaW5lLWhlaWdodDogMFxuXHRkaXNwbGF5OiBmbGV4O1xuYDtcbiJdfQ== */");
+  return /*#__PURE__*/css(isBlock && enclosingBorder, " &:hover{border-color:", COLORS.ui.borderHover, ";}&:focus-within{border-color:", COLORS.ui.borderFocus, ";box-shadow:", CONFIG.controlBoxShadowFocus, ";z-index:1;outline:2px solid transparent;outline-offset:-2px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:enclosingBorders;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzQmxvY2ssXG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufTogUGljazwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMsICdpc0Jsb2NrJyB8ICdpc0Rlc2VsZWN0YWJsZScgPiAmIHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVycyggaXNCbG9jayApIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlcnMgPSAoIGlzQmxvY2s6IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnaXNCbG9jaycgXSApID0+IHtcblx0Y29uc3QgZW5jbG9zaW5nQm9yZGVyID0gY3NzYFxuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0JHsgaXNCbG9jayAmJiBlbmNsb3NpbmdCb3JkZXIgfVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0XHR6LWluZGV4OiAxO1xuXHRcdFx0Ly8gV2luZG93cyBIaWdoIENvbnRyYXN0IG1vZGUgd2lsbCBzaG93IHRoaXMgb3V0bGluZSwgYnV0IG5vdCB0aGUgYm94LXNoYWRvdy5cblx0XHRcdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0XHRcdG91dGxpbmUtb2Zmc2V0OiAtMnB4O1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxMYWJlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHQvLyBNYWtlcyB0aGUgaW5saW5lIGxhYmVsIGJlIHRoZSBjb3JyZWN0IGhlaWdodCwgZXF1aXZhbGVudCB0byBzZXR0aW5nIGxpbmUtaGVpZ2h0OiAwXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuIl19 */");
 };
 export const toggleGroupControlSize = size => {
   const heights = {
     default: '36px',
     '__unstable-large': '40px'
   };
-  return /*#__PURE__*/css("min-height:", heights[size], ";" + (process.env.NODE_ENV === "production" ? "" : ";label:toggleGroupControlSize;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdFVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCBjb25zdCBUb2dnbGVHcm91cENvbnRyb2wgPSAoIHtcblx0aXNCbG9jayxcblx0aXNEZXNlbGVjdGFibGUsXG5cdHNpemUsXG59OiBQaWNrPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wcywgJ2lzQmxvY2snIHwgJ2lzRGVzZWxlY3RhYmxlJyA+ICYge1xuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID47XG59ICkgPT4gY3NzYFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkuYmFja2dyb3VuZCB9O1xuXHRib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0ZGlzcGxheTogaW5saW5lLWZsZXg7XG5cdG1pbi13aWR0aDogMDtcblx0cGFkZGluZzogMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdGVzdCB9IGxpbmVhcjtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cblx0JHsgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSggc2l6ZSApIH1cblx0JHsgISBpc0Rlc2VsZWN0YWJsZSAmJiBlbmNsb3NpbmdCb3JkZXJzKCBpc0Jsb2NrICkgfVxuYDtcblxuY29uc3QgZW5jbG9zaW5nQm9yZGVycyA9ICggaXNCbG9jazogVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdpc0Jsb2NrJyBdICkgPT4ge1xuXHRjb25zdCBlbmNsb3NpbmdCb3JkZXIgPSBjc3NgXG5cdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGA7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHQkeyBpc0Jsb2NrICYmIGVuY2xvc2luZ0JvcmRlciB9XG5cblx0XHQmOmhvdmVyIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckhvdmVyIH07XG5cdFx0fVxuXG5cdFx0Jjpmb2N1cy13aXRoaW4ge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdGJveC1zaGFkb3c6ICR7IENPTkZJRy5jb250cm9sQm94U2hhZG93Rm9jdXMgfTtcblx0XHRcdHotaW5kZXg6IDE7XG5cdFx0XHQvLyBXaW5kb3dzIEhpZ2ggQ29udHJhc3QgbW9kZSB3aWxsIHNob3cgdGhpcyBvdXRsaW5lLCBidXQgbm90IHRoZSBib3gtc2hhZG93LlxuXHRcdFx0b3V0bGluZTogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRcdFx0b3V0bGluZS1vZmZzZXQ6IC0ycHg7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUgPSAoXG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPlxuKSA9PiB7XG5cdGNvbnN0IGhlaWdodHMgPSB7XG5cdFx0ZGVmYXVsdDogJzM2cHgnLFxuXHRcdCdfX3Vuc3RhYmxlLWxhcmdlJzogJzQwcHgnLFxuXHR9O1xuXG5cdHJldHVybiBjc3NgXG5cdFx0bWluLWhlaWdodDogJHsgaGVpZ2h0c1sgc2l6ZSBdIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgYmxvY2sgPSBjc3NgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdHdpZHRoOiAxMDAlO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJhY2tkcm9wVmlldyA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRsZWZ0OiAwO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMnB4O1xuXHRib3R0b206IDJweDtcblx0dHJhbnNpdGlvbjogdHJhbnNmb3JtICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0IH0gZWFzZTtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cdHotaW5kZXg6IDE7XG5cdC8vIFdpbmRvd3MgSGlnaCBDb250cmFzdCBtb2RlIHdpbGwgc2hvdyB0aGlzIG91dGxpbmUsIGJ1dCBub3QgdGhlIGJveC1zaGFkb3cuXG5cdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0b3V0bGluZS1vZmZzZXQ6IC0zcHg7XG5gO1xuXG5leHBvcnQgY29uc3QgVmlzdWFsTGFiZWxXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ly8gTWFrZXMgdGhlIGlubGluZSBsYWJlbCBiZSB0aGUgY29ycmVjdCBoZWlnaHQsIGVxdWl2YWxlbnQgdG8gc2V0dGluZyBsaW5lLWhlaWdodDogMFxuXHRkaXNwbGF5OiBmbGV4O1xuYDtcbiJdfQ== */");
+  return /*#__PURE__*/css("min-height:", heights[size], ";" + (process.env.NODE_ENV === "production" ? "" : ";label:toggleGroupControlSize;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThEVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzQmxvY2ssXG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufTogUGljazwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMsICdpc0Jsb2NrJyB8ICdpc0Rlc2VsZWN0YWJsZScgPiAmIHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVycyggaXNCbG9jayApIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlcnMgPSAoIGlzQmxvY2s6IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnaXNCbG9jaycgXSApID0+IHtcblx0Y29uc3QgZW5jbG9zaW5nQm9yZGVyID0gY3NzYFxuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0JHsgaXNCbG9jayAmJiBlbmNsb3NpbmdCb3JkZXIgfVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0XHR6LWluZGV4OiAxO1xuXHRcdFx0Ly8gV2luZG93cyBIaWdoIENvbnRyYXN0IG1vZGUgd2lsbCBzaG93IHRoaXMgb3V0bGluZSwgYnV0IG5vdCB0aGUgYm94LXNoYWRvdy5cblx0XHRcdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0XHRcdG91dGxpbmUtb2Zmc2V0OiAtMnB4O1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaXN1YWxMYWJlbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHQvLyBNYWtlcyB0aGUgaW5saW5lIGxhYmVsIGJlIHRoZSBjb3JyZWN0IGhlaWdodCwgZXF1aXZhbGVudCB0byBzZXR0aW5nIGxpbmUtaGVpZ2h0OiAwXG5cdGRpc3BsYXk6IGZsZXg7XG5gO1xuIl19 */");
 };
 export const block = process.env.NODE_ENV === "production" ? {
   name: "7whenc",
@@ -30,15 +30,9 @@ export const block = process.env.NODE_ENV === "production" ? {
 } : {
   name: "2dfrl8-block",
   styles: "display:flex;width:100%;label:block;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFFd0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzQmxvY2ssXG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufTogUGljazwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMsICdpc0Jsb2NrJyB8ICdpc0Rlc2VsZWN0YWJsZScgPiAmIHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVycyggaXNCbG9jayApIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlcnMgPSAoIGlzQmxvY2s6IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnaXNCbG9jaycgXSApID0+IHtcblx0Y29uc3QgZW5jbG9zaW5nQm9yZGVyID0gY3NzYFxuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0JHsgaXNCbG9jayAmJiBlbmNsb3NpbmdCb3JkZXIgfVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0XHR6LWluZGV4OiAxO1xuXHRcdFx0Ly8gV2luZG93cyBIaWdoIENvbnRyYXN0IG1vZGUgd2lsbCBzaG93IHRoaXMgb3V0bGluZSwgYnV0IG5vdCB0aGUgYm94LXNoYWRvdy5cblx0XHRcdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0XHRcdG91dGxpbmUtb2Zmc2V0OiAtMnB4O1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuXHQvLyBXaW5kb3dzIEhpZ2ggQ29udHJhc3QgbW9kZSB3aWxsIHNob3cgdGhpcyBvdXRsaW5lLCBidXQgbm90IHRoZSBib3gtc2hhZG93LlxuXHRvdXRsaW5lOiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdG91dGxpbmUtb2Zmc2V0OiAtM3B4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFZpc3VhbExhYmVsV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdC8vIE1ha2VzIHRoZSBpbmxpbmUgbGFiZWwgYmUgdGhlIGNvcnJlY3QgaGVpZ2h0LCBlcXVpdmFsZW50IHRvIHNldHRpbmcgbGluZS1oZWlnaHQ6IDBcblx0ZGlzcGxheTogZmxleDtcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1Fd0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBUb2dnbGVHcm91cENvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IHRvZ2dsZUdyb3VwQ29udHJvbCA9ICgge1xuXHRpc0Jsb2NrLFxuXHRpc0Rlc2VsZWN0YWJsZSxcblx0c2l6ZSxcbn06IFBpY2s8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzLCAnaXNCbG9jaycgfCAnaXNEZXNlbGVjdGFibGUnID4gJiB7XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXHQkeyAhIGlzRGVzZWxlY3RhYmxlICYmIGVuY2xvc2luZ0JvcmRlcnMoIGlzQmxvY2sgKSB9XG5gO1xuXG5jb25zdCBlbmNsb3NpbmdCb3JkZXJzID0gKCBpc0Jsb2NrOiBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ2lzQmxvY2snIF0gKSA9PiB7XG5cdGNvbnN0IGVuY2xvc2luZ0JvcmRlciA9IGNzc2Bcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXIgfTtcblx0YDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdCR7IGlzQmxvY2sgJiYgZW5jbG9zaW5nQm9yZGVyIH1cblxuXHRcdCY6aG92ZXIge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVySG92ZXIgfTtcblx0XHR9XG5cblx0XHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdFx0Ym94LXNoYWRvdzogJHsgQ09ORklHLmNvbnRyb2xCb3hTaGFkb3dGb2N1cyB9O1xuXHRcdFx0ei1pbmRleDogMTtcblx0XHRcdC8vIFdpbmRvd3MgSGlnaCBDb250cmFzdCBtb2RlIHdpbGwgc2hvdyB0aGlzIG91dGxpbmUsIGJ1dCBub3QgdGhlIGJveC1zaGFkb3cuXG5cdFx0XHRvdXRsaW5lOiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdFx0XHRvdXRsaW5lLW9mZnNldDogLTJweDtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgVmlzdWFsTGFiZWxXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ly8gTWFrZXMgdGhlIGlubGluZSBsYWJlbCBiZSB0aGUgY29ycmVjdCBoZWlnaHQsIGVxdWl2YWxlbnQgdG8gc2V0dGluZyBsaW5lLWhlaWdodDogMFxuXHRkaXNwbGF5OiBmbGV4O1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export const BackdropView = _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "eakva831"
-} : {
-  target: "eakva831",
-  label: "BackdropView"
-})("background:", COLORS.gray[900], ";border-radius:", CONFIG.controlBorderRadius, ";left:0;position:absolute;top:2px;bottom:2px;transition:transform ", CONFIG.transitionDurationFast, " ease;", reduceMotion('transition'), " z-index:1;outline:2px solid transparent;outline-offset:-3px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBFc0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzQmxvY2ssXG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufTogUGljazwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMsICdpc0Jsb2NrJyB8ICdpc0Rlc2VsZWN0YWJsZScgPiAmIHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVycyggaXNCbG9jayApIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlcnMgPSAoIGlzQmxvY2s6IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnaXNCbG9jaycgXSApID0+IHtcblx0Y29uc3QgZW5jbG9zaW5nQm9yZGVyID0gY3NzYFxuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0JHsgaXNCbG9jayAmJiBlbmNsb3NpbmdCb3JkZXIgfVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0XHR6LWluZGV4OiAxO1xuXHRcdFx0Ly8gV2luZG93cyBIaWdoIENvbnRyYXN0IG1vZGUgd2lsbCBzaG93IHRoaXMgb3V0bGluZSwgYnV0IG5vdCB0aGUgYm94LXNoYWRvdy5cblx0XHRcdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0XHRcdG91dGxpbmUtb2Zmc2V0OiAtMnB4O1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuXHQvLyBXaW5kb3dzIEhpZ2ggQ29udHJhc3QgbW9kZSB3aWxsIHNob3cgdGhpcyBvdXRsaW5lLCBidXQgbm90IHRoZSBib3gtc2hhZG93LlxuXHRvdXRsaW5lOiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdG91dGxpbmUtb2Zmc2V0OiAtM3B4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFZpc3VhbExhYmVsV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdC8vIE1ha2VzIHRoZSBpbmxpbmUgbGFiZWwgYmUgdGhlIGNvcnJlY3QgaGVpZ2h0LCBlcXVpdmFsZW50IHRvIHNldHRpbmcgbGluZS1oZWlnaHQ6IDBcblx0ZGlzcGxheTogZmxleDtcbmA7XG4iXX0= */"));
 export const VisualLabelWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "eakva830"
 } : {
@@ -50,7 +44,7 @@ export const VisualLabelWrapper = _styled("div", process.env.NODE_ENV === "produ
 } : {
   name: "zjik7",
   styles: "display:flex",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlGNEMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgdHlwZSB7IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgVG9nZ2xlR3JvdXBDb250cm9sID0gKCB7XG5cdGlzQmxvY2ssXG5cdGlzRGVzZWxlY3RhYmxlLFxuXHRzaXplLFxufTogUGljazwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHMsICdpc0Jsb2NrJyB8ICdpc0Rlc2VsZWN0YWJsZScgPiAmIHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+O1xufSApID0+IGNzc2Bcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLmJhY2tncm91bmQgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtaW4td2lkdGg6IDA7XG5cdHBhZGRpbmc6IDJweDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHsgQ09ORklHLnRyYW5zaXRpb25EdXJhdGlvbkZhc3Rlc3QgfSBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXG5cdCR7IHRvZ2dsZUdyb3VwQ29udHJvbFNpemUoIHNpemUgKSB9XG5cdCR7ICEgaXNEZXNlbGVjdGFibGUgJiYgZW5jbG9zaW5nQm9yZGVycyggaXNCbG9jayApIH1cbmA7XG5cbmNvbnN0IGVuY2xvc2luZ0JvcmRlcnMgPSAoIGlzQmxvY2s6IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnaXNCbG9jaycgXSApID0+IHtcblx0Y29uc3QgZW5jbG9zaW5nQm9yZGVyID0gY3NzYFxuXHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0JHsgaXNCbG9jayAmJiBlbmNsb3NpbmdCb3JkZXIgfVxuXG5cdFx0Jjpob3ZlciB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJIb3ZlciB9O1xuXHRcdH1cblxuXHRcdCY6Zm9jdXMtd2l0aGluIHtcblx0XHRcdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRib3gtc2hhZG93OiAkeyBDT05GSUcuY29udHJvbEJveFNoYWRvd0ZvY3VzIH07XG5cdFx0XHR6LWluZGV4OiAxO1xuXHRcdFx0Ly8gV2luZG93cyBIaWdoIENvbnRyYXN0IG1vZGUgd2lsbCBzaG93IHRoaXMgb3V0bGluZSwgYnV0IG5vdCB0aGUgYm94LXNoYWRvdy5cblx0XHRcdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0XHRcdG91dGxpbmUtb2Zmc2V0OiAtMnB4O1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCB0b2dnbGVHcm91cENvbnRyb2xTaXplID0gKFxuXHRzaXplOiBOb25OdWxsYWJsZTwgVG9nZ2xlR3JvdXBDb250cm9sUHJvcHNbICdzaXplJyBdID5cbikgPT4ge1xuXHRjb25zdCBoZWlnaHRzID0ge1xuXHRcdGRlZmF1bHQ6ICczNnB4Jyxcblx0XHQnX191bnN0YWJsZS1sYXJnZSc6ICc0MHB4Jyxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdG1pbi1oZWlnaHQ6ICR7IGhlaWdodHNbIHNpemUgXSB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IGJsb2NrID0gY3NzYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWNrZHJvcFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuZ3JheVsgOTAwIF0gfTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0bGVmdDogMDtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHR0b3A6IDJweDtcblx0Ym90dG9tOiAycHg7XG5cdHRyYW5zaXRpb246IHRyYW5zZm9ybSAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGVhc2U7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR6LWluZGV4OiAxO1xuXHQvLyBXaW5kb3dzIEhpZ2ggQ29udHJhc3QgbW9kZSB3aWxsIHNob3cgdGhpcyBvdXRsaW5lLCBidXQgbm90IHRoZSBib3gtc2hhZG93LlxuXHRvdXRsaW5lOiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdG91dGxpbmUtb2Zmc2V0OiAtM3B4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFZpc3VhbExhYmVsV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdC8vIE1ha2VzIHRoZSBpbmxpbmUgbGFiZWwgYmUgdGhlIGNvcnJlY3QgaGVpZ2h0LCBlcXVpdmFsZW50IHRvIHNldHRpbmcgbGluZS1oZWlnaHQ6IDBcblx0ZGlzcGxheTogZmxleDtcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdFNEMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBUb2dnbGVHcm91cENvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IHRvZ2dsZUdyb3VwQ29udHJvbCA9ICgge1xuXHRpc0Jsb2NrLFxuXHRpc0Rlc2VsZWN0YWJsZSxcblx0c2l6ZSxcbn06IFBpY2s8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzLCAnaXNCbG9jaycgfCAnaXNEZXNlbGVjdGFibGUnID4gJiB7XG5cdHNpemU6IE5vbk51bGxhYmxlPCBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ3NpemUnIF0gPjtcbn0gKSA9PiBjc3NgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS5iYWNrZ3JvdW5kIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkIHRyYW5zcGFyZW50O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcuY29udHJvbEJvcmRlclJhZGl1cyB9O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWluLXdpZHRoOiAwO1xuXHRwYWRkaW5nOiAycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHQkeyB0b2dnbGVHcm91cENvbnRyb2xTaXplKCBzaXplICkgfVxuXHQkeyAhIGlzRGVzZWxlY3RhYmxlICYmIGVuY2xvc2luZ0JvcmRlcnMoIGlzQmxvY2sgKSB9XG5gO1xuXG5jb25zdCBlbmNsb3NpbmdCb3JkZXJzID0gKCBpc0Jsb2NrOiBUb2dnbGVHcm91cENvbnRyb2xQcm9wc1sgJ2lzQmxvY2snIF0gKSA9PiB7XG5cdGNvbnN0IGVuY2xvc2luZ0JvcmRlciA9IGNzc2Bcblx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXIgfTtcblx0YDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdCR7IGlzQmxvY2sgJiYgZW5jbG9zaW5nQm9yZGVyIH1cblxuXHRcdCY6aG92ZXIge1xuXHRcdFx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVySG92ZXIgfTtcblx0XHR9XG5cblx0XHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0XHRib3JkZXItY29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdFx0Ym94LXNoYWRvdzogJHsgQ09ORklHLmNvbnRyb2xCb3hTaGFkb3dGb2N1cyB9O1xuXHRcdFx0ei1pbmRleDogMTtcblx0XHRcdC8vIFdpbmRvd3MgSGlnaCBDb250cmFzdCBtb2RlIHdpbGwgc2hvdyB0aGlzIG91dGxpbmUsIGJ1dCBub3QgdGhlIGJveC1zaGFkb3cuXG5cdFx0XHRvdXRsaW5lOiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdFx0XHRvdXRsaW5lLW9mZnNldDogLTJweDtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgdG9nZ2xlR3JvdXBDb250cm9sU2l6ZSA9IChcblx0c2l6ZTogTm9uTnVsbGFibGU8IFRvZ2dsZUdyb3VwQ29udHJvbFByb3BzWyAnc2l6ZScgXSA+XG4pID0+IHtcblx0Y29uc3QgaGVpZ2h0cyA9IHtcblx0XHRkZWZhdWx0OiAnMzZweCcsXG5cdFx0J19fdW5zdGFibGUtbGFyZ2UnOiAnNDBweCcsXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRtaW4taGVpZ2h0OiAkeyBoZWlnaHRzWyBzaXplIF0gfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBibG9jayA9IGNzc2Bcblx0ZGlzcGxheTogZmxleDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgVmlzdWFsTGFiZWxXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ly8gTWFrZXMgdGhlIGlubGluZSBsYWJlbCBiZSB0aGUgY29ycmVjdCBoZWlnaHQsIGVxdWl2YWxlbnQgdG8gc2V0dGluZyBsaW5lLWhlaWdodDogMFxuXHRkaXNwbGF5OiBmbGV4O1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 //# sourceMappingURL=styles.js.map

package/build-module/toggle-group-control/toggle-group-control/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","CONFIG","COLORS","reduceMotion","ToggleGroupControl","isBlock","isDeselectable","size","ui","background","controlBorderRadius","transitionDurationFastest","toggleGroupControlSize","enclosingBorders","process","env","NODE_ENV","enclosingBorder","border","borderHover","borderFocus","controlBoxShadowFocus","heights","default","block","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","BackdropView","_styled","target","label","gray","transitionDurationFast","VisualLabelWrapper"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG, COLORS, reduceMotion } from '../../utils';\nimport type { ToggleGroupControlProps } from '../types';\n\nexport const ToggleGroupControl = ( {\n\tisBlock,\n\tisDeselectable,\n\tsize,\n}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {\n\tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >;\n} ) => css`\n\tbackground: ${ COLORS.ui.background };\n\tborder: 1px solid transparent;\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tdisplay: inline-flex;\n\tmin-width: 0;\n\tpadding: 2px;\n\tposition: relative;\n\ttransition: transform ${ CONFIG.transitionDurationFastest } linear;\n\t${ reduceMotion( 'transition' ) }\n\n\t${ toggleGroupControlSize( size ) }\n\t${ ! isDeselectable && enclosingBorders( isBlock ) }\n`;\n\nconst enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {\n\tconst enclosingBorder = css`\n\t\tborder-color: ${ COLORS.ui.border };\n\t`;\n\n\treturn css`\n\t\t${ isBlock && enclosingBorder }\n\n\t\t&:hover {\n\t\t\tborder-color: ${ COLORS.ui.borderHover };\n\t\t}\n\n\t\t&:focus-within {\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tbox-shadow: ${ CONFIG.controlBoxShadowFocus };\n\t\t\tz-index: 1;\n\t\t\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\t\t\toutline: 2px solid transparent;\n\t\t\toutline-offset: -2px;\n\t\t}\n\t`;\n};\n\nexport const toggleGroupControlSize = (\n\tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >\n) => {\n\tconst heights = {\n\t\tdefault: '36px',\n\t\t'__unstable-large': '40px',\n\t};\n\n\treturn css`\n\t\tmin-height: ${ heights[ size ] };\n\t`;\n};\n\nexport const block = css`\n\tdisplay: flex;\n\twidth: 100%;\n`;\n\nexport const BackdropView = styled.div`\n\tbackground: ${ COLORS.gray[ 900 ] };\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tleft: 0;\n\tposition: absolute;\n\ttop: 2px;\n\tbottom: 2px;\n\ttransition: transform ${ CONFIG.transitionDurationFast } ease;\n\t${ reduceMotion( 'transition' ) }\n\tz-index: 1;\n\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\toutline: 2px solid transparent;\n\toutline-offset: -3px;\n`;\n\nexport const VisualLabelWrapper = styled.div`\n\t// Makes the inline label be the correct height, equivalent to setting line-height: 0\n\tdisplay: flex;\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC;AACA;AACA;AACA,SAASC,MAAM,EAAEC,MAAM,EAAEC,YAAY,QAAQ,aAAa;AAG1D,OAAO,MAAMC,kBAAkB,GAAGA,CAAE;EACnCC,OAAO;EACPC,cAAc;EACdC;AAGD,CAAC,kBAAMP,GAAG,gBACME,MAAM,CAACM,EAAE,CAACC,UAAU,kDAEjBR,MAAM,CAACS,mBAAmB,0FAKnBT,MAAM,CAACU,yBAAyB,cACtDR,YAAY,CAAE,YAAa,CAAC,OAE5BS,sBAAsB,CAAEL,IAAK,CAAC,OAC9B,CAAED,cAAc,IAAIO,gBAAgB,CAAER,OAAQ,CAAC,SAAAS,OAAA,CAAAC,GAAA,CAAAC,QAAA,wDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,2nHAClD;AAED,MAAMH,gBAAgB,GAAKR,OAA6C,IAAM;EAC7E,MAAMY,eAAe,gBAAGjB,GAAG,kBACTE,MAAM,CAACM,EAAE,CAACU,MAAM,SAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,qDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,2nHACjC;EAED,oBAAOhB,GAAG,CACNK,OAAO,IAAIY,eAAe,4BAGXf,MAAM,CAACM,EAAE,CAACW,WAAW,oCAIrBjB,MAAM,CAACM,EAAE,CAACY,WAAW,kBACvBnB,MAAM,CAACoB,qBAAqB,sEAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,sDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAO9C,CAAC;AAED,OAAO,MAAMJ,sBAAsB,GAClCL,IAAsD,IAClD;EACJ,MAAMe,OAAO,GAAG;IACfC,OAAO,EAAE,MAAM;IACf,kBAAkB,EAAE;EACrB,CAAC;EAED,oBAAOvB,GAAG,gBACMsB,OAAO,CAAEf,IAAI,CAAE,SAAAO,OAAA,CAAAC,GAAA,CAAAC,QAAA,4DAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAEhC,CAAC;AAED,OAAO,MAAMQ,KAAK,GAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAS,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAGjB;AAED,OAAO,MAAMC,YAAY,GAAAC,OAAA,QAAAjB,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAgB,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,kBACT/B,MAAM,CAACgC,IAAI,CAAE,GAAG,CAAE,qBACfjC,MAAM,CAACS,mBAAmB,wEAKnBT,MAAM,CAACkC,sBAAsB,YACnDhC,YAAY,CAAE,YAAa,CAAC,qEAAAW,OAAA,CAAAC,GAAA,CAAAC,QAAA,4nHAK/B;AAED,OAAO,MAAMoB,kBAAkB,GAAAL,OAAA,QAAAjB,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAgB,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAnB,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAS,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAG9B"}
+{"version":3,"names":["css","CONFIG","COLORS","toggleGroupControl","isBlock","isDeselectable","size","ui","background","controlBorderRadius","toggleGroupControlSize","enclosingBorders","process","env","NODE_ENV","enclosingBorder","border","borderHover","borderFocus","controlBoxShadowFocus","heights","default","block","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","VisualLabelWrapper","_styled","target","label"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { CONFIG, COLORS } from '../../utils';\nimport type { ToggleGroupControlProps } from '../types';\n\nexport const toggleGroupControl = ( {\n\tisBlock,\n\tisDeselectable,\n\tsize,\n}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {\n\tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >;\n} ) => css`\n\tbackground: ${ COLORS.ui.background };\n\tborder: 1px solid transparent;\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tdisplay: inline-flex;\n\tmin-width: 0;\n\tpadding: 2px;\n\tposition: relative;\n\n\t${ toggleGroupControlSize( size ) }\n\t${ ! isDeselectable && enclosingBorders( isBlock ) }\n`;\n\nconst enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {\n\tconst enclosingBorder = css`\n\t\tborder-color: ${ COLORS.ui.border };\n\t`;\n\n\treturn css`\n\t\t${ isBlock && enclosingBorder }\n\n\t\t&:hover {\n\t\t\tborder-color: ${ COLORS.ui.borderHover };\n\t\t}\n\n\t\t&:focus-within {\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tbox-shadow: ${ CONFIG.controlBoxShadowFocus };\n\t\t\tz-index: 1;\n\t\t\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\t\t\toutline: 2px solid transparent;\n\t\t\toutline-offset: -2px;\n\t\t}\n\t`;\n};\n\nexport const toggleGroupControlSize = (\n\tsize: NonNullable< ToggleGroupControlProps[ 'size' ] >\n) => {\n\tconst heights = {\n\t\tdefault: '36px',\n\t\t'__unstable-large': '40px',\n\t};\n\n\treturn css`\n\t\tmin-height: ${ heights[ size ] };\n\t`;\n};\n\nexport const block = css`\n\tdisplay: flex;\n\twidth: 100%;\n`;\n\nexport const VisualLabelWrapper = styled.div`\n\t// Makes the inline label be the correct height, equivalent to setting line-height: 0\n\tdisplay: flex;\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC;AACA;AACA;AACA,SAASC,MAAM,EAAEC,MAAM,QAAQ,aAAa;AAG5C,OAAO,MAAMC,kBAAkB,GAAGA,CAAE;EACnCC,OAAO;EACPC,cAAc;EACdC;AAGD,CAAC,kBAAMN,GAAG,gBACME,MAAM,CAACK,EAAE,CAACC,UAAU,kDAEjBP,MAAM,CAACQ,mBAAmB,qEAMzCC,sBAAsB,CAAEJ,IAAK,CAAC,OAC9B,CAAED,cAAc,IAAIM,gBAAgB,CAAEP,OAAQ,CAAC,SAAAQ,OAAA,CAAAC,GAAA,CAAAC,QAAA,wDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,+2FAClD;AAED,MAAMH,gBAAgB,GAAKP,OAA6C,IAAM;EAC7E,MAAMW,eAAe,gBAAGf,GAAG,kBACTE,MAAM,CAACK,EAAE,CAACS,MAAM,SAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,qDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,m3FACjC;EAED,oBAAOd,GAAG,CACNI,OAAO,IAAIW,eAAe,4BAGXb,MAAM,CAACK,EAAE,CAACU,WAAW,oCAIrBf,MAAM,CAACK,EAAE,CAACW,WAAW,kBACvBjB,MAAM,CAACkB,qBAAqB,sEAAAP,OAAA,CAAAC,GAAA,CAAAC,QAAA,sDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAO9C,CAAC;AAED,OAAO,MAAMJ,sBAAsB,GAClCJ,IAAsD,IAClD;EACJ,MAAMc,OAAO,GAAG;IACfC,OAAO,EAAE,MAAM;IACf,kBAAkB,EAAE;EACrB,CAAC;EAED,oBAAOrB,GAAG,gBACMoB,OAAO,CAAEd,IAAI,CAAE,SAAAM,OAAA,CAAAC,GAAA,CAAAC,QAAA,4DAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAEhC,CAAC;AAED,OAAO,MAAMQ,KAAK,GAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAS,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAGjB;AAED,OAAO,MAAMC,kBAAkB,GAAAC,OAAA,QAAAjB,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAgB,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAnB,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAS,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAG9B"}