@wordpress/components 25.6.1 → 25.8.0

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

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ToggleGroupControl = void 0;
 var _element = require("@wordpress/element");
+var _framerMotion = require("framer-motion");
+var _compose = require("@wordpress/compose");
 var _context = require("../../ui/context");
 var _hooks = require("../../utils/hooks");
 var _baseControl = _interopRequireDefault(require("../../base-control"));
@@ -18,11 +20,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * External dependencies
  */
 
+// eslint-disable-next-line no-restricted-imports
+
 /**
  * WordPress dependencies
  */
 
-const noop = () => {};
 function UnconnectedToggleGroupControl(props, forwardedRef) {
   const {
     __nextHasNoMarginBottom = false,
@@ -33,14 +36,15 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     label,
     hideLabelFromVision = false,
     help,
-    onChange = noop,
+    onChange,
     size = 'default',
     value,
     children,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'ToggleGroupControl');
+  const baseId = (0, _compose.useInstanceId)(ToggleGroupControl, 'toggle-group-control');
   const cx = (0, _hooks.useCx)();
-  const classes = (0, _element.useMemo)(() => cx(styles.ToggleGroupControl({
+  const classes = (0, _element.useMemo)(() => cx(styles.toggleGroupControl({
     isBlock,
     isDeselectable,
     size
@@ -51,7 +55,6 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom
   }, !hideLabelFromVision && (0, _element.createElement)(styles.VisualLabelWrapper, null, (0, _element.createElement)(_baseControl.default.VisualLabel, null, label)), (0, _element.createElement)(MainControl, {
     ...otherProps,
-    children: children,
     className: classes,
     isAdaptiveWidth: isAdaptiveWidth,
     label: label,
@@ -59,7 +62,9 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     ref: forwardedRef,
     size: size,
     value: value
-  }));
+  }, (0, _element.createElement)(_framerMotion.LayoutGroup, {
+    id: baseId
+  }, children)));
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_context","_hooks","_baseControl","_interopRequireDefault","styles","_interopRequireWildcard","_asRadioGroup","_asButtonGroup","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","noop","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","useContextSystem","cx","useCx","classes","useMemo","ToggleGroupControl","block","MainControl","ToggleGroupControlAsButtonGroup","ToggleGroupControlAsRadioGroup","createElement","VisualLabelWrapper","VisualLabel","ref","contextConnect","exports","_default"],"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":"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"}
+{"version":3,"names":["_element","require","_framerMotion","_compose","_context","_hooks","_baseControl","_interopRequireDefault","styles","_interopRequireWildcard","_asRadioGroup","_asButtonGroup","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","useContextSystem","baseId","useInstanceId","ToggleGroupControl","cx","useCx","classes","useMemo","toggleGroupControl","block","MainControl","ToggleGroupControlAsButtonGroup","ToggleGroupControlAsRadioGroup","createElement","VisualLabelWrapper","VisualLabel","ref","LayoutGroup","id","contextConnect","exports","_default"],"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":";;;;;;;AAYA,IAAAA,QAAA,GAAAC,OAAA;AAPA,IAAAC,aAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAQA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAC,sBAAA,CAAAN,OAAA;AAEA,IAAAO,MAAA,GAAAC,uBAAA,CAAAR,OAAA;AAEA,IAAAS,aAAA,GAAAT,OAAA;AACA,IAAAU,cAAA,GAAAV,OAAA;AAAoE,SAAAW,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAJ,wBAAAQ,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAzBpE;AACA;AACA;;AAEA;;AAGA;AACA;AACA;;AAkBA,SAASW,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,GAAG,IAAAC,yBAAgB,EAAEf,KAAK,EAAE,oBAAqB,CAAC;EAEnD,MAAMgB,MAAM,GAAG,IAAAC,sBAAa,EAAEC,kBAAkB,EAAE,sBAAuB,CAAC;EAE1E,MAAMC,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAElB,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EACtB,MACCH,EAAE,CACD9C,MAAM,CAACkD,kBAAkB,CAAE;IAAElB,OAAO;IAAEC,cAAc;IAAEK;EAAK,CAAE,CAAC,EAC9DN,OAAO,IAAIhC,MAAM,CAACmD,KAAK,EACvBrB,SACD,CAAC,EACF,CAAEA,SAAS,EAAEgB,EAAE,EAAEd,OAAO,EAAEC,cAAc,EAAEK,IAAI,CAC/C,CAAC;EAED,MAAMc,WAAW,GAAGnB,cAAc,GAC/BoB,8CAA+B,GAC/BC,4CAA8B;EAEjC,OACC,IAAA9D,QAAA,CAAA+D,aAAA,EAACzD,YAAA,CAAAa,OAAW;IACXyB,IAAI,EAAGA,IAAM;IACbP,uBAAuB,EAAGA;EAAyB,GAEjD,CAAEM,mBAAmB,IACtB,IAAA3C,QAAA,CAAA+D,aAAA,EAACvD,MAAA,CAAAwD,kBAAkB,QAClB,IAAAhE,QAAA,CAAA+D,aAAA,EAACzD,YAAA,CAAAa,OAAW,CAAC8C,WAAW,QAAGvB,KAAgC,CACxC,CACpB,EACD,IAAA1C,QAAA,CAAA+D,aAAA,EAACH,WAAW;IAAA,GACNX,UAAU;IACfX,SAAS,EAAGkB,OAAS;IACrBjB,eAAe,EAAGA,eAAiB;IACnCG,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGA,QAAU;IACrBqB,GAAG,EAAG9B,YAAc;IACpBU,IAAI,EAAGA,IAAM;IACbC,KAAK,EAAGA;EAAO,GAEf,IAAA/C,QAAA,CAAA+D,aAAA,EAAC7D,aAAA,CAAAiE,WAAW;IAACC,EAAE,EAAGjB;EAAQ,GAAGH,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;AACO,MAAMK,kBAAkB,GAAG,IAAAgB,uBAAc,EAC/CnC,6BAA6B,EAC7B,oBACD,CAAC;AAACoC,OAAA,CAAAjB,kBAAA,GAAAA,kBAAA;AAAA,IAAAkB,QAAA,GAEalB,kBAAkB;AAAAiB,OAAA,CAAAnD,OAAA,GAAAoD,QAAA"}

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

@@ -4,27 +4,27 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleGroupControlSize = exports.block = exports.VisualLabelWrapper = exports.ToggleGroupControl = exports.BackdropView = void 0;
+exports.toggleGroupControlSize = exports.toggleGroupControl = exports.block = exports.VisualLabelWrapper = void 0;
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = require("@emotion/react");
 var _utils = require("../../utils");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const ToggleGroupControl = ({
+const toggleGroupControl = ({
   isBlock,
   isDeselectable,
   size
-}) => /*#__PURE__*/(0, _react.css)("background:", _utils.COLORS.ui.background, ";border:1px solid transparent;border-radius:", _utils.CONFIG.controlBorderRadius, ";display:inline-flex;min-width:0;padding:2px;position:relative;transition:transform ", _utils.CONFIG.transitionDurationFastest, " linear;", (0, _utils.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== */");
-exports.ToggleGroupControl = ToggleGroupControl;
+}) => /*#__PURE__*/(0, _react.css)("background:", _utils.COLORS.ui.background, ";border:1px solid transparent;border-radius:", _utils.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 */");
+exports.toggleGroupControl = toggleGroupControl;
 const enclosingBorders = isBlock => {
-  const enclosingBorder = /*#__PURE__*/(0, _react.css)("border-color:", _utils.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__*/(0, _react.css)(isBlock && enclosingBorder, " &:hover{border-color:", _utils.COLORS.ui.borderHover, ";}&:focus-within{border-color:", _utils.COLORS.ui.borderFocus, ";box-shadow:", _utils.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__*/(0, _react.css)("border-color:", _utils.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__*/(0, _react.css)(isBlock && enclosingBorder, " &:hover{border-color:", _utils.COLORS.ui.borderHover, ";}&:focus-within{border-color:", _utils.COLORS.ui.borderFocus, ";box-shadow:", _utils.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 */");
 };
 const toggleGroupControlSize = size => {
   const heights = {
     default: '36px',
     '__unstable-large': '40px'
   };
-  return /*#__PURE__*/(0, _react.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__*/(0, _react.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 */");
 };
 exports.toggleGroupControlSize = toggleGroupControlSize;
 const block = process.env.NODE_ENV === "production" ? {
@@ -33,17 +33,10 @@ 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__
 };
 exports.block = block;
-const BackdropView = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "eakva831"
-} : {
-  target: "eakva831",
-  label: "BackdropView"
-})("background:", _utils.COLORS.gray[900], ";border-radius:", _utils.CONFIG.controlBorderRadius, ";left:0;position:absolute;top:2px;bottom:2px;transition:transform ", _utils.CONFIG.transitionDurationFast, " ease;", (0, _utils.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= */"));
-exports.BackdropView = BackdropView;
 const VisualLabelWrapper = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
   target: "eakva830"
 } : {
@@ -55,7 +48,7 @@ const VisualLabelWrapper = (0, _base.default)("div", process.env.NODE_ENV === "p
 } : {
   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__
 });
 exports.VisualLabelWrapper = VisualLabelWrapper;

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

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_utils","_EMOTION_STRINGIFIED_CSS_ERROR__","ToggleGroupControl","isBlock","isDeselectable","size","css","COLORS","ui","background","CONFIG","controlBorderRadius","transitionDurationFastest","reduceMotion","toggleGroupControlSize","enclosingBorders","process","env","NODE_ENV","exports","enclosingBorder","border","borderHover","borderFocus","controlBoxShadowFocus","heights","default","block","name","styles","map","toString","BackdropView","_base","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":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAMA,IAAAC,MAAA,GAAAD,OAAA;AAA2D,SAAAE,iCAAA;AAGpD,MAAMC,kBAAkB,GAAGA,CAAE;EACnCC,OAAO;EACPC,cAAc;EACdC;AAGD,CAAC,sBAAMC,UAAG,iBACMC,aAAM,CAACC,EAAE,CAACC,UAAU,kDAEjBC,aAAM,CAACC,mBAAmB,0FAKnBD,aAAM,CAACE,yBAAyB,cACtD,IAAAC,mBAAY,EAAE,YAAa,CAAC,OAE5BC,sBAAsB,CAAET,IAAK,CAAC,OAC9B,CAAED,cAAc,IAAIW,gBAAgB,CAAEZ,OAAQ,CAAC,SAAAa,OAAA,CAAAC,GAAA,CAAAC,QAAA,wDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,2nHAClD;AAACC,OAAA,CAAAjB,kBAAA,GAAAA,kBAAA;AAEF,MAAMa,gBAAgB,GAAKZ,OAA6C,IAAM;EAC7E,MAAMiB,eAAe,oBAAGd,UAAG,mBACTC,aAAM,CAACC,EAAE,CAACa,MAAM,SAAAL,OAAA,CAAAC,GAAA,CAAAC,QAAA,qDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,2nHACjC;EAED,wBAAOZ,UAAG,EACNH,OAAO,IAAIiB,eAAe,4BAGXb,aAAM,CAACC,EAAE,CAACc,WAAW,oCAIrBf,aAAM,CAACC,EAAE,CAACe,WAAW,kBACvBb,aAAM,CAACc,qBAAqB,sEAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA,sDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAO9C,CAAC;AAEM,MAAMJ,sBAAsB,GAClCT,IAAsD,IAClD;EACJ,MAAMoB,OAAO,GAAG;IACfC,OAAO,EAAE,MAAM;IACf,kBAAkB,EAAE;EACrB,CAAC;EAED,wBAAOpB,UAAG,iBACMmB,OAAO,CAAEpB,IAAI,CAAE,SAAAW,OAAA,CAAAC,GAAA,CAAAC,QAAA,4DAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAEhC,CAAC;AAACC,OAAA,CAAAL,sBAAA,GAAAA,sBAAA;AAEK,MAAMa,KAAK,GAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAA9B;AAAA,CAGjB;AAACkB,OAAA,CAAAQ,KAAA,GAAAA,KAAA;AAEK,MAAMK,YAAY,OAAAC,KAAA,CAAAP,OAAA,SAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAgB,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,kBACT5B,aAAM,CAAC6B,IAAI,CAAE,GAAG,CAAE,qBACf1B,aAAM,CAACC,mBAAmB,wEAKnBD,aAAM,CAAC2B,sBAAsB,YACnD,IAAAxB,mBAAY,EAAE,YAAa,CAAC,qEAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,4nHAK/B;AAACC,OAAA,CAAAa,YAAA,GAAAA,YAAA;AAEK,MAAMM,kBAAkB,OAAAL,KAAA,CAAAP,OAAA,SAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAgB,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAnB,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAA9B;AAAA,EAG9B;AAACkB,OAAA,CAAAmB,kBAAA,GAAAA,kBAAA"}
+{"version":3,"names":["_react","require","_utils","_EMOTION_STRINGIFIED_CSS_ERROR__","toggleGroupControl","isBlock","isDeselectable","size","css","COLORS","ui","background","CONFIG","controlBorderRadius","toggleGroupControlSize","enclosingBorders","process","env","NODE_ENV","exports","enclosingBorder","border","borderHover","borderFocus","controlBoxShadowFocus","heights","default","block","name","styles","map","toString","VisualLabelWrapper","_base","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":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAMA,IAAAC,MAAA,GAAAD,OAAA;AAA6C,SAAAE,iCAAA;AAGtC,MAAMC,kBAAkB,GAAGA,CAAE;EACnCC,OAAO;EACPC,cAAc;EACdC;AAGD,CAAC,sBAAMC,UAAG,iBACMC,aAAM,CAACC,EAAE,CAACC,UAAU,kDAEjBC,aAAM,CAACC,mBAAmB,qEAMzCC,sBAAsB,CAAEP,IAAK,CAAC,OAC9B,CAAED,cAAc,IAAIS,gBAAgB,CAAEV,OAAQ,CAAC,SAAAW,OAAA,CAAAC,GAAA,CAAAC,QAAA,wDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,+2FAClD;AAACC,OAAA,CAAAf,kBAAA,GAAAA,kBAAA;AAEF,MAAMW,gBAAgB,GAAKV,OAA6C,IAAM;EAC7E,MAAMe,eAAe,oBAAGZ,UAAG,mBACTC,aAAM,CAACC,EAAE,CAACW,MAAM,SAAAL,OAAA,CAAAC,GAAA,CAAAC,QAAA,qDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,m3FACjC;EAED,wBAAOV,UAAG,EACNH,OAAO,IAAIe,eAAe,4BAGXX,aAAM,CAACC,EAAE,CAACY,WAAW,oCAIrBb,aAAM,CAACC,EAAE,CAACa,WAAW,kBACvBX,aAAM,CAACY,qBAAqB,sEAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA,sDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAO9C,CAAC;AAEM,MAAMJ,sBAAsB,GAClCP,IAAsD,IAClD;EACJ,MAAMkB,OAAO,GAAG;IACfC,OAAO,EAAE,MAAM;IACf,kBAAkB,EAAE;EACrB,CAAC;EAED,wBAAOlB,UAAG,iBACMiB,OAAO,CAAElB,IAAI,CAAE,SAAAS,OAAA,CAAAC,GAAA,CAAAC,QAAA,4DAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAEhC,CAAC;AAACC,OAAA,CAAAL,sBAAA,GAAAA,sBAAA;AAEK,MAAMa,KAAK,GAAAX,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAA5B;AAAA,CAGjB;AAACgB,OAAA,CAAAQ,KAAA,GAAAA,KAAA;AAEK,MAAMK,kBAAkB,OAAAC,KAAA,CAAAP,OAAA,SAAAV,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAgB,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAnB,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAU,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAA5B;AAAA,EAG9B;AAACgB,OAAA,CAAAa,kBAAA,GAAAA,kBAAA"}

package/build/toggle-group-control/toggle-group-control/utils.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useComputeControlledOrUncontrolledValue = useComputeControlledOrUncontrolledValue;
+var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Used to determine, via an internal heuristics, whether an `undefined` value
+ * received for the `value` prop should be interpreted as the component being
+ * used in uncontrolled mode, or as an "empty" value for controlled mode.
+ *
+ * @param valueProp The received `value`
+ */
+function useComputeControlledOrUncontrolledValue(valueProp) {
+  const hasEverBeenUsedInControlledMode = (0, _element.useRef)(false);
+  const previousValueProp = (0, _compose.usePrevious)(valueProp);
+  (0, _element.useEffect)(() => {
+    if (!hasEverBeenUsedInControlledMode.current) {
+      // Assume the component is being used in controlled mode if:
+      // - the `value` prop is not `undefined`
+      // - the `value` prop was not previously `undefined` and was given a new value
+      hasEverBeenUsedInControlledMode.current = valueProp !== undefined && previousValueProp !== undefined && valueProp !== previousValueProp;
+    }
+  }, [valueProp, previousValueProp]);
+  let value, defaultValue;
+  if (hasEverBeenUsedInControlledMode.current) {
+    // When in controlled mode, use `''` instead of `undefined`
+    value = valueProp !== null && valueProp !== void 0 ? valueProp : '';
+  } else {
+    // When in uncontrolled mode, the `value` should be intended as the initial value
+    defaultValue = valueProp;
+  }
+  return {
+    value,
+    defaultValue
+  };
+}
+//# sourceMappingURL=utils.js.map

package/build/toggle-group-control/toggle-group-control/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_compose","require","_element","useComputeControlledOrUncontrolledValue","valueProp","hasEverBeenUsedInControlledMode","useRef","previousValueProp","usePrevious","useEffect","current","undefined","value","defaultValue"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/utils.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ToggleGroupControlProps } from '../types';\n\ntype ValueProp = ToggleGroupControlProps[ 'value' ];\n\n/**\n * Used to determine, via an internal heuristics, whether an `undefined` value\n * received for the `value` prop should be interpreted as the component being\n * used in uncontrolled mode, or as an \"empty\" value for controlled mode.\n *\n * @param valueProp The received `value`\n */\nexport function useComputeControlledOrUncontrolledValue(\n\tvalueProp: ValueProp\n): { value: ValueProp; defaultValue: ValueProp } {\n\tconst hasEverBeenUsedInControlledMode = useRef( false );\n\tconst previousValueProp = usePrevious( valueProp );\n\n\tuseEffect( () => {\n\t\tif ( ! hasEverBeenUsedInControlledMode.current ) {\n\t\t\t// Assume the component is being used in controlled mode if:\n\t\t\t// - the `value` prop is not `undefined`\n\t\t\t// - the `value` prop was not previously `undefined` and was given a new value\n\t\t\thasEverBeenUsedInControlledMode.current =\n\t\t\t\tvalueProp !== undefined &&\n\t\t\t\tpreviousValueProp !== undefined &&\n\t\t\t\tvalueProp !== previousValueProp;\n\t\t}\n\t}, [ valueProp, previousValueProp ] );\n\n\tlet value, defaultValue;\n\n\tif ( hasEverBeenUsedInControlledMode.current ) {\n\t\t// When in controlled mode, use `''` instead of `undefined`\n\t\tvalue = valueProp ?? '';\n\t} else {\n\t\t// When in uncontrolled mode, the `value` should be intended as the initial value\n\t\tdefaultValue = valueProp;\n\t}\n\n\treturn { value, defaultValue };\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,uCAAuCA,CACtDC,SAAoB,EAC4B;EAChD,MAAMC,+BAA+B,GAAG,IAAAC,eAAM,EAAE,KAAM,CAAC;EACvD,MAAMC,iBAAiB,GAAG,IAAAC,oBAAW,EAAEJ,SAAU,CAAC;EAElD,IAAAK,kBAAS,EAAE,MAAM;IAChB,IAAK,CAAEJ,+BAA+B,CAACK,OAAO,EAAG;MAChD;MACA;MACA;MACAL,+BAA+B,CAACK,OAAO,GACtCN,SAAS,KAAKO,SAAS,IACvBJ,iBAAiB,KAAKI,SAAS,IAC/BP,SAAS,KAAKG,iBAAiB;IACjC;EACD,CAAC,EAAE,CAAEH,SAAS,EAAEG,iBAAiB,CAAG,CAAC;EAErC,IAAIK,KAAK,EAAEC,YAAY;EAEvB,IAAKR,+BAA+B,CAACK,OAAO,EAAG;IAC9C;IACAE,KAAK,GAAGR,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE;EACxB,CAAC,MAAM;IACN;IACAS,YAAY,GAAGT,SAAS;EACzB;EAEA,OAAO;IAAEQ,KAAK;IAAEC;EAAa,CAAC;AAC/B"}

package/build/toggle-group-control/toggle-group-control-option-base/component.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _element = require("@wordpress/element");
-var _reakit = require("reakit");
+var _radio = require("@ariakit/react/radio");
+var _framerMotion = require("framer-motion");
 var _compose = require("@wordpress/compose");
 var _context = require("../../ui/context");
 var _context2 = require("../context");
@@ -21,6 +22,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // eslint-disable-next-line no-restricted-imports
 
+// eslint-disable-next-line no-restricted-imports
+
 /**
  * WordPress dependencies
  */
@@ -29,6 +32,10 @@ const {
   ButtonContentView,
   LabelView
 } = styles;
+const REDUCED_MOTION_TRANSITION_CONFIG = {
+  duration: 0
+};
+const LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';
 const WithToolTip = ({
   showTooltip,
   text,
@@ -37,12 +44,13 @@ const WithToolTip = ({
   if (showTooltip && text) {
     return (0, _element.createElement)(_tooltip.default, {
       text: text,
-      position: "top center"
+      placement: "top"
     }, children);
   }
   return (0, _element.createElement)(_element.Fragment, null, children);
 };
 function ToggleGroupControlOptionBase(props, forwardedRef) {
+  const shouldReduceMotion = (0, _framerMotion.useReducedMotion)();
   const toggleGroupControlContext = (0, _context2.useToggleGroupControlContext)();
   const id = (0, _compose.useInstanceId)(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');
   const buttonProps = (0, _context.useContextSystem)({
@@ -52,8 +60,7 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
   const {
     isBlock = false,
     isDeselectable = false,
-    size = 'default',
-    ...otherContextProps /* context props for Ariakit Radio */
+    size = 'default'
   } = toggleGroupControlContext;
   const {
     className,
@@ -61,27 +68,29 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
     value,
     children,
     showTooltip = false,
+    onFocus: onFocusProp,
     ...otherButtonProps
   } = buttonProps;
-  const isPressed = otherContextProps.state === value;
+  const isPressed = toggleGroupControlContext.value === value;
   const cx = (0, _hooks.useCx)();
-  const labelViewClasses = cx(isBlock && styles.labelBlock);
-  const classes = cx(styles.buttonView({
+  const labelViewClasses = (0, _element.useMemo)(() => cx(isBlock && styles.labelBlock), [cx, isBlock]);
+  const itemClasses = (0, _element.useMemo)(() => cx(styles.buttonView({
     isDeselectable,
     isIcon,
     isPressed,
     size
-  }), className);
+  }), className), [cx, isDeselectable, isIcon, isPressed, size, className]);
+  const backdropClasses = (0, _element.useMemo)(() => cx(styles.backdropView), [cx]);
   const buttonOnClick = () => {
     if (isDeselectable && isPressed) {
-      otherContextProps.setState(undefined);
+      toggleGroupControlContext.setValue(undefined);
     } else {
-      otherContextProps.setState(value);
+      toggleGroupControlContext.setValue(value);
     }
   };
   const commonProps = {
     ...otherButtonProps,
-    className: classes,
+    className: itemClasses,
     'data-value': value,
     ref: forwardedRef
   };
@@ -92,16 +101,26 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
     text: otherButtonProps['aria-label']
   }, isDeselectable ? (0, _element.createElement)("button", {
     ...commonProps,
+    onFocus: onFocusProp,
     "aria-pressed": isPressed,
     type: "button",
     onClick: buttonOnClick
-  }, (0, _element.createElement)(ButtonContentView, null, children)) : (0, _element.createElement)(_reakit.Radio, {
-    ...commonProps,
-    ...otherContextProps /* these are only for Ariakit Radio */,
-
-    as: "button",
+  }, (0, _element.createElement)(ButtonContentView, null, children)) : (0, _element.createElement)(_radio.Radio, {
+    render: (0, _element.createElement)("button", {
+      ...commonProps,
+      onFocus: event => {
+        onFocusProp?.(event);
+        if (event.defaultPrevented) return;
+        toggleGroupControlContext.setValue(value);
+      }
+    }),
     value: value
-  }, (0, _element.createElement)(ButtonContentView, null, children))));
+  }, (0, _element.createElement)(ButtonContentView, null, children))), isPressed ? (0, _element.createElement)(_framerMotion.motion.div, {
+    className: backdropClasses,
+    transition: shouldReduceMotion ? REDUCED_MOTION_TRANSITION_CONFIG : undefined,
+    role: "presentation",
+    layoutId: LAYOUT_ID
+  }) : null);
 }
 
 /**

package/build/toggle-group-control/toggle-group-control-option-base/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reakit","require","_compose","_context","_context2","styles","_interopRequireWildcard","_hooks","_tooltip","_interopRequireDefault","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ButtonContentView","LabelView","WithToolTip","showTooltip","text","children","_element","createElement","position","Fragment","ToggleGroupControlOptionBase","props","forwardedRef","toggleGroupControlContext","useToggleGroupControlContext","id","useInstanceId","baseId","buttonProps","useContextSystem","isBlock","isDeselectable","size","otherContextProps","className","isIcon","value","otherButtonProps","isPressed","state","cx","useCx","labelViewClasses","labelBlock","classes","buttonView","buttonOnClick","setState","undefined","commonProps","ref","type","onClick","Radio","as","ConnectedToggleGroupControlOptionBase","contextConnect","_default","exports"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { Radio } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport { contextConnect, useContextSystem } from '../../ui/context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } position=\"top center\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionBaseProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId || 'toggle-group-control-option-base'\n\t) as string;\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\tconst {\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tsize = 'default',\n\t\t...otherContextProps /* context props for Ariakit Radio */\n\t} = toggleGroupControlContext;\n\tconst {\n\t\tclassName,\n\t\tisIcon = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\t...otherButtonProps\n\t} = buttonProps;\n\n\tconst isPressed = otherContextProps.state === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = cx( isBlock && styles.labelBlock );\n\tconst classes = cx(\n\t\tstyles.buttonView( { isDeselectable, isIcon, isPressed, size } ),\n\t\tclassName\n\t);\n\n\tconst buttonOnClick = () => {\n\t\tif ( isDeselectable && isPressed ) {\n\t\t\totherContextProps.setState( undefined );\n\t\t} else {\n\t\t\totherContextProps.setState( value );\n\t\t}\n\t};\n\n\tconst commonProps = {\n\t\t...otherButtonProps,\n\t\tclassName: classes,\n\t\t'data-value': value,\n\t\tref: forwardedRef,\n\t};\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ otherButtonProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t{ isDeselectable ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\taria-pressed={ isPressed }\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ buttonOnClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<Radio\n\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t...otherContextProps /* these are only for Ariakit Radio */\n\t\t\t\t\t\t}\n\t\t\t\t\t\tas=\"button\"\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</Radio>\n\t\t\t\t) }\n\t\t\t</WithToolTip>\n\t\t</LabelView>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\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 */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"],"mappings":"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"}
+{"version":3,"names":["_element","require","_radio","_framerMotion","_compose","_context","_context2","styles","_interopRequireWildcard","_hooks","_tooltip","_interopRequireDefault","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ButtonContentView","LabelView","REDUCED_MOTION_TRANSITION_CONFIG","duration","LAYOUT_ID","WithToolTip","showTooltip","text","children","createElement","placement","Fragment","ToggleGroupControlOptionBase","props","forwardedRef","shouldReduceMotion","useReducedMotion","toggleGroupControlContext","useToggleGroupControlContext","id","useInstanceId","baseId","buttonProps","useContextSystem","isBlock","isDeselectable","size","className","isIcon","value","onFocus","onFocusProp","otherButtonProps","isPressed","cx","useCx","labelViewClasses","useMemo","labelBlock","itemClasses","buttonView","backdropClasses","backdropView","buttonOnClick","setValue","undefined","commonProps","ref","type","onClick","Radio","render","event","defaultPrevented","motion","div","transition","role","layoutId","ConnectedToggleGroupControlOptionBase","contextConnect","_default","exports"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { Radio } from '@ariakit/react/radio';\n// eslint-disable-next-line no-restricted-imports\nimport { motion, useReducedMotion } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport { contextConnect, useContextSystem } from '../../ui/context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst REDUCED_MOTION_TRANSITION_CONFIG = {\n\tduration: 0,\n};\n\nconst LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } placement=\"top\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tToggleGroupControlOptionBaseProps,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t// the element's id is generated internally\n\t\t'id'\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst shouldReduceMotion = useReducedMotion();\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId || 'toggle-group-control-option-base'\n\t);\n\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\n\tconst {\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tsize = 'default',\n\t} = toggleGroupControlContext;\n\n\tconst {\n\t\tclassName,\n\t\tisIcon = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\tonFocus: onFocusProp,\n\t\t...otherButtonProps\n\t} = buttonProps;\n\n\tconst isPressed = toggleGroupControlContext.value === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = useMemo(\n\t\t() => cx( isBlock && styles.labelBlock ),\n\t\t[ cx, isBlock ]\n\t);\n\tconst itemClasses = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.buttonView( {\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tisIcon,\n\t\t\t\t\tisPressed,\n\t\t\t\t\tsize,\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ cx, isDeselectable, isIcon, isPressed, size, className ]\n\t);\n\tconst backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );\n\n\tconst buttonOnClick = () => {\n\t\tif ( isDeselectable && isPressed ) {\n\t\t\ttoggleGroupControlContext.setValue( undefined );\n\t\t} else {\n\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t}\n\t};\n\n\tconst commonProps = {\n\t\t...otherButtonProps,\n\t\tclassName: itemClasses,\n\t\t'data-value': value,\n\t\tref: forwardedRef,\n\t};\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ otherButtonProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t{ isDeselectable ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\tonFocus={ onFocusProp }\n\t\t\t\t\t\taria-pressed={ isPressed }\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ buttonOnClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<Radio\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\t\tonFocus={ ( event ) => {\n\t\t\t\t\t\t\t\t\tonFocusProp?.( event );\n\t\t\t\t\t\t\t\t\tif ( event.defaultPrevented ) return;\n\t\t\t\t\t\t\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</Radio>\n\t\t\t\t) }\n\t\t\t</WithToolTip>\n\t\t\t{ /* Animated backdrop using framer motion's shared layout animation */ }\n\t\t\t{ isPressed ? (\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName={ backdropClasses }\n\t\t\t\t\ttransition={\n\t\t\t\t\t\tshouldReduceMotion\n\t\t\t\t\t\t\t? REDUCED_MOTION_TRANSITION_CONFIG\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\tlayoutId={ LAYOUT_ID }\n\t\t\t\t/>\n\t\t\t) : null }\n\t\t</LabelView>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\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 */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"],"mappings":"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"}