@wordpress/components 19.7.0 → 19.9.0

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

@@ -0,0 +1,86 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, memo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import { BackdropView } from './styles';
+
+function ToggleGroupControlBackdrop(_ref) {
+  let {
+    containerRef,
+    containerWidth,
+    isAdaptiveWidth,
+    state
+  } = _ref;
+  const [left, setLeft] = useState(0);
+  const [width, setWidth] = useState(0);
+  const [canAnimate, setCanAnimate] = useState(false);
+  const [renderBackdrop, setRenderBackdrop] = useState(false);
+  useEffect(() => {
+    const containerNode = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+    if (!containerNode) return;
+    /**
+     * Workaround for Reakit
+     */
+
+    const targetNode = containerNode.querySelector(`[data-value="${state}"]`);
+    setRenderBackdrop(!!targetNode);
+
+    if (!targetNode) {
+      return;
+    }
+
+    const computeDimensions = () => {
+      const {
+        width: offsetWidth,
+        x
+      } = targetNode.getBoundingClientRect();
+      const {
+        x: parentX
+      } = containerNode.getBoundingClientRect();
+      const borderWidth = 1;
+      const offsetLeft = x - parentX - borderWidth;
+      setLeft(offsetLeft);
+      setWidth(offsetWidth);
+    }; // Fix to make the component appear as expected inside popovers.
+    // If the targetNode width is 0 it means the element was not yet rendered we should allow
+    // some time for the render to happen.
+    // requestAnimationFrame instead of setTimeout with a small time does not seems to work.
+
+
+    const dimensionsRequestId = window.setTimeout(computeDimensions, 100);
+    let animationRequestId;
+
+    if (!canAnimate) {
+      animationRequestId = window.requestAnimationFrame(() => {
+        setCanAnimate(true);
+      });
+    }
+
+    return () => {
+      window.clearTimeout(dimensionsRequestId);
+      window.cancelAnimationFrame(animationRequestId);
+    };
+  }, [canAnimate, containerRef, containerWidth, state, isAdaptiveWidth]);
+
+  if (!renderBackdrop) {
+    return null;
+  }
+
+  return createElement(BackdropView, {
+    role: "presentation",
+    style: {
+      transform: `translateX(${left}px)`,
+      transition: canAnimate ? undefined : 'none',
+      width
+    }
+  });
+}
+
+export default memo(ToggleGroupControlBackdrop);
+//# sourceMappingURL=toggle-group-control-backdrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx"],"names":["useState","useEffect","memo","BackdropView","ToggleGroupControlBackdrop","containerRef","containerWidth","isAdaptiveWidth","state","left","setLeft","width","setWidth","canAnimate","setCanAnimate","renderBackdrop","setRenderBackdrop","containerNode","current","targetNode","querySelector","computeDimensions","offsetWidth","x","getBoundingClientRect","parentX","borderWidth","offsetLeft","dimensionsRequestId","window","setTimeout","animationRequestId","requestAnimationFrame","clearTimeout","cancelAnimationFrame","transform","transition","undefined"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,SAAnB,EAA8BC,IAA9B,QAA0C,oBAA1C;AAEA;AACA;AACA;;AAEA,SAASC,YAAT,QAA6B,UAA7B;;AAEA,SAASC,0BAAT,OAKqC;AAAA,MALA;AACpCC,IAAAA,YADoC;AAEpCC,IAAAA,cAFoC;AAGpCC,IAAAA,eAHoC;AAIpCC,IAAAA;AAJoC,GAKA;AACpC,QAAM,CAAEC,IAAF,EAAQC,OAAR,IAAoBV,QAAQ,CAAE,CAAF,CAAlC;AACA,QAAM,CAAEW,KAAF,EAASC,QAAT,IAAsBZ,QAAQ,CAAE,CAAF,CAApC;AACA,QAAM,CAAEa,UAAF,EAAcC,aAAd,IAAgCd,QAAQ,CAAE,KAAF,CAA9C;AACA,QAAM,CAAEe,cAAF,EAAkBC,iBAAlB,IAAwChB,QAAQ,CAAE,KAAF,CAAtD;AAEAC,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMgB,aAAa,GAAGZ,YAAH,aAAGA,YAAH,uBAAGA,YAAY,CAAEa,OAApC;AACA,QAAK,CAAED,aAAP,EAAuB;AAEvB;AACF;AACA;;AACE,UAAME,UAAU,GAAGF,aAAa,CAACG,aAAd,CACjB,gBAAgBZ,KAAO,IADN,CAAnB;AAGAQ,IAAAA,iBAAiB,CAAE,CAAC,CAAEG,UAAL,CAAjB;;AACA,QAAK,CAAEA,UAAP,EAAoB;AACnB;AACA;;AAED,UAAME,iBAAiB,GAAG,MAAM;AAC/B,YAAM;AACLV,QAAAA,KAAK,EAAEW,WADF;AAELC,QAAAA;AAFK,UAGFJ,UAAU,CAACK,qBAAX,EAHJ;AAKA,YAAM;AAAED,QAAAA,CAAC,EAAEE;AAAL,UAAiBR,aAAa,CAACO,qBAAd,EAAvB;AAEA,YAAME,WAAW,GAAG,CAApB;AACA,YAAMC,UAAU,GAAGJ,CAAC,GAAGE,OAAJ,GAAcC,WAAjC;AAEAhB,MAAAA,OAAO,CAAEiB,UAAF,CAAP;AACAf,MAAAA,QAAQ,CAAEU,WAAF,CAAR;AACA,KAbD,CAfgB,CA6BhB;AACA;AACA;AACA;;;AACA,UAAMM,mBAAmB,GAAGC,MAAM,CAACC,UAAP,CAAmBT,iBAAnB,EAAsC,GAAtC,CAA5B;AAEA,QAAIU,kBAAJ;;AACA,QAAK,CAAElB,UAAP,EAAoB;AACnBkB,MAAAA,kBAAkB,GAAGF,MAAM,CAACG,qBAAP,CAA8B,MAAM;AACxDlB,QAAAA,aAAa,CAAE,IAAF,CAAb;AACA,OAFoB,CAArB;AAGA;;AACD,WAAO,MAAM;AACZe,MAAAA,MAAM,CAACI,YAAP,CAAqBL,mBAArB;AACAC,MAAAA,MAAM,CAACK,oBAAP,CAA6BH,kBAA7B;AACA,KAHD;AAIA,GA7CQ,EA6CN,CAAElB,UAAF,EAAcR,YAAd,EAA4BC,cAA5B,EAA4CE,KAA5C,EAAmDD,eAAnD,CA7CM,CAAT;;AA+CA,MAAK,CAAEQ,cAAP,EAAwB;AACvB,WAAO,IAAP;AACA;;AAED,SACC,cAAC,YAAD;AACC,IAAA,IAAI,EAAC,cADN;AAEC,IAAA,KAAK,EAAG;AACPoB,MAAAA,SAAS,EAAG,cAAc1B,IAAM,KADzB;AAEP2B,MAAAA,UAAU,EAAEvB,UAAU,GAAGwB,SAAH,GAAe,MAF9B;AAGP1B,MAAAA;AAHO;AAFT,IADD;AAUA;;AAED,eAAeT,IAAI,CAAEE,0BAAF,CAAnB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, memo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ToggleGroupControlBackdropProps } from '../types';\nimport { BackdropView } from './styles';\n\nfunction ToggleGroupControlBackdrop( {\n\tcontainerRef,\n\tcontainerWidth,\n\tisAdaptiveWidth,\n\tstate,\n}: ToggleGroupControlBackdropProps ) {\n\tconst [ left, setLeft ] = useState( 0 );\n\tconst [ width, setWidth ] = useState( 0 );\n\tconst [ canAnimate, setCanAnimate ] = useState( false );\n\tconst [ renderBackdrop, setRenderBackdrop ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst containerNode = containerRef?.current;\n\t\tif ( ! containerNode ) return;\n\n\t\t/**\n\t\t * Workaround for Reakit\n\t\t */\n\t\tconst targetNode = containerNode.querySelector(\n\t\t\t`[data-value=\"${ state }\"]`\n\t\t);\n\t\tsetRenderBackdrop( !! targetNode );\n\t\tif ( ! targetNode ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst computeDimensions = () => {\n\t\t\tconst {\n\t\t\t\twidth: offsetWidth,\n\t\t\t\tx,\n\t\t\t} = targetNode.getBoundingClientRect();\n\n\t\t\tconst { x: parentX } = containerNode.getBoundingClientRect();\n\n\t\t\tconst borderWidth = 1;\n\t\t\tconst offsetLeft = x - parentX - borderWidth;\n\n\t\t\tsetLeft( offsetLeft );\n\t\t\tsetWidth( offsetWidth );\n\t\t};\n\t\t// Fix to make the component appear as expected inside popovers.\n\t\t// If the targetNode width is 0 it means the element was not yet rendered we should allow\n\t\t// some time for the render to happen.\n\t\t// requestAnimationFrame instead of setTimeout with a small time does not seems to work.\n\t\tconst dimensionsRequestId = window.setTimeout( computeDimensions, 100 );\n\n\t\tlet animationRequestId: number;\n\t\tif ( ! canAnimate ) {\n\t\t\tanimationRequestId = window.requestAnimationFrame( () => {\n\t\t\t\tsetCanAnimate( true );\n\t\t\t} );\n\t\t}\n\t\treturn () => {\n\t\t\twindow.clearTimeout( dimensionsRequestId );\n\t\t\twindow.cancelAnimationFrame( animationRequestId );\n\t\t};\n\t}, [ canAnimate, containerRef, containerWidth, state, isAdaptiveWidth ] );\n\n\tif ( ! renderBackdrop ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BackdropView\n\t\t\trole=\"presentation\"\n\t\t\tstyle={ {\n\t\t\t\ttransform: `translateX(${ left }px)`,\n\t\t\t\ttransition: canAnimate ? undefined : 'none',\n\t\t\t\twidth,\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default memo( ToggleGroupControlBackdrop );\n"]}

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

@@ -1,82 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement } from "@wordpress/element";
 
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-import { Radio } from 'reakit';
-/**
- * WordPress dependencies
- */
-
-import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-
-import { contextConnect, useContextSystem } from '../../ui/context';
-import { useToggleGroupControlContext } from '../context';
-import * as styles from './styles';
-import { useCx } from '../../utils/hooks';
-import Tooltip from '../../tooltip';
-const {
-  ButtonContentView,
-  LabelView
-} = styles;
-
-const WithToolTip = _ref => {
-  let {
-    showTooltip,
-    text,
-    children
-  } = _ref;
-
-  if (showTooltip && text) {
-    return createElement(Tooltip, {
-      text: text,
-      position: "top center"
-    }, children);
-  }
-
-  return createElement(Fragment, null, children);
-};
-
-function ToggleGroupControlOption(props, forwardedRef) {
-  const toggleGroupControlContext = useToggleGroupControlContext();
-  const id = useInstanceId(ToggleGroupControlOption, toggleGroupControlContext.baseId || 'toggle-group-control-option');
-  const buttonProps = useContextSystem({ ...props,
-    id
-  }, 'ToggleGroupControlOption');
+import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
+export default function ToggleGroupControlOption(props) {
   const {
-    className,
-    isBlock = false,
     label,
-    value,
-    showTooltip = false,
-    ...radioProps
-  } = { ...toggleGroupControlContext,
-    ...buttonProps
-  };
-  const isActive = radioProps.state === value;
-  const cx = useCx();
-  const labelViewClasses = cx(isBlock && styles.labelBlock);
-  const classes = cx(styles.buttonView, className, isActive && styles.buttonActive);
-  const optionLabel = !!radioProps['aria-label'] ? radioProps['aria-label'] : label;
-  return createElement(LabelView, {
-    className: labelViewClasses,
-    "data-active": isActive
-  }, createElement(WithToolTip, {
-    showTooltip: showTooltip,
-    text: optionLabel
-  }, createElement(Radio, _extends({}, radioProps, {
-    as: "button",
-    "aria-label": optionLabel,
-    className: classes,
-    "data-value": value,
-    ref: forwardedRef,
-    value: value
-  }), createElement(ButtonContentView, null, label))));
+    ...restProps
+  } = props;
+  const optionLabel = restProps['aria-label'] || label;
+  return createElement(ToggleGroupControlOptionBase, _extends({}, restProps, {
+    "aria-label": optionLabel
+  }), label);
 }
 /**
  * `ToggleGroupControlOption` is a form component and is meant to be used as a
@@ -99,8 +36,4 @@ function ToggleGroupControlOption(props, forwardedRef) {
  * }
  * ```
  */
-
-
-const ConnectedToggleGroupControlOption = contextConnect(ToggleGroupControlOption, 'ToggleGroupControlOption');
-export default ConnectedToggleGroupControlOption;
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option/component.tsx"],"names":["Radio","useInstanceId","contextConnect","useContextSystem","useToggleGroupControlContext","styles","useCx","Tooltip","ButtonContentView","LabelView","WithToolTip","showTooltip","text","children","ToggleGroupControlOption","props","forwardedRef","toggleGroupControlContext","id","baseId","buttonProps","className","isBlock","label","value","radioProps","isActive","state","cx","labelViewClasses","labelBlock","classes","buttonView","buttonActive","optionLabel","ConnectedToggleGroupControlOption"],"mappings":";;;AAAA;AACA;AACA;AAEA;AACA,SAASA,KAAT,QAAsB,QAAtB;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;;AACA,SACCC,cADD,EAECC,gBAFD,QAIO,kBAJP;AAMA,SAASC,4BAAT,QAA6C,YAA7C;AACA,OAAO,KAAKC,MAAZ,MAAwB,UAAxB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,OAAOC,OAAP,MAAoB,eAApB;AAEA,MAAM;AAAEC,EAAAA,iBAAF;AAAqBC,EAAAA;AAArB,IAAmCJ,MAAzC;;AAEA,MAAMK,WAAW,GAAG,QAAyD;AAAA,MAAvD;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,IAAf;AAAqBC,IAAAA;AAArB,GAAuD;;AAC5E,MAAKF,WAAW,IAAIC,IAApB,EAA2B;AAC1B,WACC,cAAC,OAAD;AAAS,MAAA,IAAI,EAAGA,IAAhB;AAAuB,MAAA,QAAQ,EAAC;AAAhC,OACGC,QADH,CADD;AAKA;;AACD,SAAO,8BAAIA,QAAJ,CAAP;AACA,CATD;;AAWA,SAASC,wBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,yBAAyB,GAAGb,4BAA4B,EAA9D;AACA,QAAMc,EAAE,GAAGjB,aAAa,CACvBa,wBADuB,EAEvBG,yBAAyB,CAACE,MAA1B,IAAoC,6BAFb,CAAxB;AAIA,QAAMC,WAAW,GAAGjB,gBAAgB,CACnC,EAAE,GAAGY,KAAL;AAAYG,IAAAA;AAAZ,GADmC,EAEnC,0BAFmC,CAApC;AAKA,QAAM;AACLG,IAAAA,SADK;AAELC,IAAAA,OAAO,GAAG,KAFL;AAGLC,IAAAA,KAHK;AAILC,IAAAA,KAJK;AAKLb,IAAAA,WAAW,GAAG,KALT;AAML,OAAGc;AANE,MAOF,EACH,GAAGR,yBADA;AAEH,OAAGG;AAFA,GAPJ;AAYA,QAAMM,QAAQ,GAAGD,UAAU,CAACE,KAAX,KAAqBH,KAAtC;AACA,QAAMI,EAAE,GAAGtB,KAAK,EAAhB;AACA,QAAMuB,gBAAgB,GAAGD,EAAE,CAAEN,OAAO,IAAIjB,MAAM,CAACyB,UAApB,CAA3B;AACA,QAAMC,OAAO,GAAGH,EAAE,CACjBvB,MAAM,CAAC2B,UADU,EAEjBX,SAFiB,EAGjBK,QAAQ,IAAIrB,MAAM,CAAC4B,YAHF,CAAlB;AAKA,QAAMC,WAAW,GAAG,CAAC,CAAET,UAAU,CAAE,YAAF,CAAb,GACjBA,UAAU,CAAE,YAAF,CADO,GAEjBF,KAFH;AAIA,SACC,cAAC,SAAD;AAAW,IAAA,SAAS,EAAGM,gBAAvB;AAA0C,mBAAcH;AAAxD,KACC,cAAC,WAAD;AAAa,IAAA,WAAW,EAAGf,WAA3B;AAAyC,IAAA,IAAI,EAAGuB;AAAhD,KACC,cAAC,KAAD,eACMT,UADN;AAEC,IAAA,EAAE,EAAC,QAFJ;AAGC,kBAAaS,WAHd;AAIC,IAAA,SAAS,EAAGH,OAJb;AAKC,kBAAaP,KALd;AAMC,IAAA,GAAG,EAAGR,YANP;AAOC,IAAA,KAAK,EAAGQ;AAPT,MASC,cAAC,iBAAD,QAAqBD,KAArB,CATD,CADD,CADD,CADD;AAiBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMY,iCAAiC,GAAGjC,cAAc,CACvDY,wBADuD,EAEvD,0BAFuD,CAAxD;AAKA,eAAeqB,iCAAf","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 {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport type { ToggleGroupControlOptionProps, WithToolTipProps } 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 ToggleGroupControlOption(\n\tprops: WordPressComponentProps< ToggleGroupControlOptionProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOption,\n\t\ttoggleGroupControlContext.baseId || 'toggle-group-control-option'\n\t) as string;\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOption'\n\t);\n\n\tconst {\n\t\tclassName,\n\t\tisBlock = false,\n\t\tlabel,\n\t\tvalue,\n\t\tshowTooltip = false,\n\t\t...radioProps\n\t} = {\n\t\t...toggleGroupControlContext,\n\t\t...buttonProps,\n\t};\n\n\tconst isActive = radioProps.state === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = cx( isBlock && styles.labelBlock );\n\tconst classes = cx(\n\t\tstyles.buttonView,\n\t\tclassName,\n\t\tisActive && styles.buttonActive\n\t);\n\tconst optionLabel = !! radioProps[ 'aria-label' ]\n\t\t? radioProps[ 'aria-label' ]\n\t\t: label;\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses } data-active={ isActive }>\n\t\t\t<WithToolTip showTooltip={ showTooltip } text={ optionLabel }>\n\t\t\t\t<Radio\n\t\t\t\t\t{ ...radioProps }\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\taria-label={ optionLabel }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tdata-value={ value }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t>\n\t\t\t\t\t<ButtonContentView>{ label }</ButtonContentView>\n\t\t\t\t</Radio>\n\t\t\t</WithToolTip>\n\t\t</LabelView>\n\t);\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * @example\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 */\nconst ConnectedToggleGroupControlOption = contextConnect(\n\tToggleGroupControlOption,\n\t'ToggleGroupControlOption'\n);\n\nexport default ConnectedToggleGroupControlOption;\n"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option/component.tsx"],"names":["ToggleGroupControlOptionBase","ToggleGroupControlOption","props","label","restProps","optionLabel"],"mappings":";;;AAAA;AACA;AACA;AAGA,SAASA,4BAAT,QAA6C,qCAA7C;AAEA,eAAe,SAASC,wBAAT,CACdC,KADc,EAMb;AACD,QAAM;AAAEC,IAAAA,KAAF;AAAS,OAAGC;AAAZ,MAA0BF,KAAhC;AACA,QAAMG,WAAW,GAAGD,SAAS,CAAE,YAAF,CAAT,IAA6BD,KAAjD;AACA,SACC,cAAC,4BAAD,eACMC,SADN;AAEC,kBAAaC;AAFd,MAIGF,KAJH,CADD;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlOptionProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\n\nexport default function ToggleGroupControlOption(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionProps,\n\t\t'button',\n\t\tfalse\n\t>\n) {\n\tconst { label, ...restProps } = props;\n\tconst optionLabel = restProps[ 'aria-label' ] || label;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\taria-label={ optionLabel }\n\t\t>\n\t\t\t{ label }\n\t\t</ToggleGroupControlOptionBase>\n\t);\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * @example\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 */\n"]}

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

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import { Radio } from 'reakit';
+/**
+ * WordPress dependencies
+ */
+
+import { useInstanceId } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+
+import { contextConnect, useContextSystem } from '../../ui/context';
+import { useToggleGroupControlContext } from '../context';
+import * as styles from './styles';
+import { useCx } from '../../utils/hooks';
+import Tooltip from '../../tooltip';
+const {
+  ButtonContentView,
+  LabelView
+} = styles;
+
+const WithToolTip = _ref => {
+  let {
+    showTooltip,
+    text,
+    children
+  } = _ref;
+
+  if (showTooltip && text) {
+    return createElement(Tooltip, {
+      text: text,
+      position: "top center"
+    }, children);
+  }
+
+  return createElement(Fragment, null, children);
+};
+
+function ToggleGroupControlOptionBase(props, forwardedRef) {
+  const toggleGroupControlContext = useToggleGroupControlContext();
+  const id = useInstanceId(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');
+  const buttonProps = useContextSystem({ ...props,
+    id
+  }, 'ToggleGroupControlOptionBase');
+  const {
+    className,
+    isBlock = false,
+    value,
+    children,
+    showTooltip = false,
+    ...radioProps
+  } = { ...toggleGroupControlContext,
+    ...buttonProps
+  };
+  const isActive = radioProps.state === value;
+  const cx = useCx();
+  const labelViewClasses = cx(isBlock && styles.labelBlock);
+  const classes = cx(styles.buttonView, className, isActive && styles.buttonActive);
+  return createElement(LabelView, {
+    className: labelViewClasses,
+    "data-active": isActive
+  }, createElement(WithToolTip, {
+    showTooltip: showTooltip,
+    text: radioProps['aria-label']
+  }, createElement(Radio, _extends({}, radioProps, {
+    as: "button",
+    "aria-label": radioProps['aria-label'],
+    className: classes,
+    "data-value": value,
+    ref: forwardedRef,
+    value: value
+  }), createElement(ButtonContentView, null, children))));
+}
+/**
+ * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,
+ * generic component for any children of `ToggleGroupControl`.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalToggleGroupControl as ToggleGroupControl,
+ *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
+ *       <ToggleGroupControlOption value="vertical" label="Vertical" />
+ *     </ToggleGroupControl>
+ *   );
+ * }
+ * ```
+ */
+
+
+const ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');
+export default ConnectedToggleGroupControlOptionBase;
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"names":["Radio","useInstanceId","contextConnect","useContextSystem","useToggleGroupControlContext","styles","useCx","Tooltip","ButtonContentView","LabelView","WithToolTip","showTooltip","text","children","ToggleGroupControlOptionBase","props","forwardedRef","toggleGroupControlContext","id","baseId","buttonProps","className","isBlock","value","radioProps","isActive","state","cx","labelViewClasses","labelBlock","classes","buttonView","buttonActive","ConnectedToggleGroupControlOptionBase"],"mappings":";;;AAAA;AACA;AACA;AAEA;AACA,SAASA,KAAT,QAAsB,QAAtB;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;;AACA,SACCC,cADD,EAECC,gBAFD,QAIO,kBAJP;AASA,SAASC,4BAAT,QAA6C,YAA7C;AACA,OAAO,KAAKC,MAAZ,MAAwB,UAAxB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,OAAOC,OAAP,MAAoB,eAApB;AAEA,MAAM;AAAEC,EAAAA,iBAAF;AAAqBC,EAAAA;AAArB,IAAmCJ,MAAzC;;AAEA,MAAMK,WAAW,GAAG,QAAyD;AAAA,MAAvD;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,IAAf;AAAqBC,IAAAA;AAArB,GAAuD;;AAC5E,MAAKF,WAAW,IAAIC,IAApB,EAA2B;AAC1B,WACC,cAAC,OAAD;AAAS,MAAA,IAAI,EAAGA,IAAhB;AAAuB,MAAA,QAAQ,EAAC;AAAhC,OACGC,QADH,CADD;AAKA;;AACD,SAAO,8BAAIA,QAAJ,CAAP;AACA,CATD;;AAWA,SAASC,4BAAT,CACCC,KADD,EAMCC,YAND,EAOE;AACD,QAAMC,yBAAyB,GAAGb,4BAA4B,EAA9D;AACA,QAAMc,EAAE,GAAGjB,aAAa,CACvBa,4BADuB,EAEvBG,yBAAyB,CAACE,MAA1B,IAAoC,kCAFb,CAAxB;AAIA,QAAMC,WAAW,GAAGjB,gBAAgB,CACnC,EAAE,GAAGY,KAAL;AAAYG,IAAAA;AAAZ,GADmC,EAEnC,8BAFmC,CAApC;AAIA,QAAM;AACLG,IAAAA,SADK;AAELC,IAAAA,OAAO,GAAG,KAFL;AAGLC,IAAAA,KAHK;AAILV,IAAAA,QAJK;AAKLF,IAAAA,WAAW,GAAG,KALT;AAML,OAAGa;AANE,MAOF,EACH,GAAGP,yBADA;AAEH,OAAGG;AAFA,GAPJ;AAYA,QAAMK,QAAQ,GAAGD,UAAU,CAACE,KAAX,KAAqBH,KAAtC;AACA,QAAMI,EAAE,GAAGrB,KAAK,EAAhB;AACA,QAAMsB,gBAAgB,GAAGD,EAAE,CAAEL,OAAO,IAAIjB,MAAM,CAACwB,UAApB,CAA3B;AACA,QAAMC,OAAO,GAAGH,EAAE,CACjBtB,MAAM,CAAC0B,UADU,EAEjBV,SAFiB,EAGjBI,QAAQ,IAAIpB,MAAM,CAAC2B,YAHF,CAAlB;AAMA,SACC,cAAC,SAAD;AAAW,IAAA,SAAS,EAAGJ,gBAAvB;AAA0C,mBAAcH;AAAxD,KACC,cAAC,WAAD;AACC,IAAA,WAAW,EAAGd,WADf;AAEC,IAAA,IAAI,EAAGa,UAAU,CAAE,YAAF;AAFlB,KAIC,cAAC,KAAD,eACMA,UADN;AAEC,IAAA,EAAE,EAAC,QAFJ;AAGC,kBAAaA,UAAU,CAAE,YAAF,CAHxB;AAIC,IAAA,SAAS,EAAGM,OAJb;AAKC,kBAAaP,KALd;AAMC,IAAA,GAAG,EAAGP,YANP;AAOC,IAAA,KAAK,EAAGO;AAPT,MASC,cAAC,iBAAD,QAAqBV,QAArB,CATD,CAJD,CADD,CADD;AAoBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMoB,qCAAqC,GAAG/B,cAAc,CAC3DY,4BAD2D,EAE3D,8BAF2D,CAA5D;AAKA,eAAemB,qCAAf","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 {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} 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\tclassName,\n\t\tisBlock = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\t...radioProps\n\t} = {\n\t\t...toggleGroupControlContext,\n\t\t...buttonProps,\n\t};\n\n\tconst isActive = radioProps.state === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = cx( isBlock && styles.labelBlock );\n\tconst classes = cx(\n\t\tstyles.buttonView,\n\t\tclassName,\n\t\tisActive && styles.buttonActive\n\t);\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses } data-active={ isActive }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ radioProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t<Radio\n\t\t\t\t\t{ ...radioProps }\n\t\t\t\t\tas=\"button\"\n\t\t\t\t\taria-label={ radioProps[ 'aria-label' ] }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tdata-value={ value }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t>\n\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t</Radio>\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"]}

package/build-module/toggle-group-control/toggle-group-control-option-base/index.js

@@ -0,0 +1,2 @@
+export { default as ToggleGroupControlOptionBase } from './component';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/index.ts"],"names":["default","ToggleGroupControlOptionBase"],"mappings":"AAAA,SAASA,OAAO,IAAIC,4BAApB,QAAwD,aAAxD","sourcesContent":["export { default as ToggleGroupControlOptionBase } from './component';\n"]}

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

@@ -0,0 +1,55 @@
+import _styled from "@emotion/styled/base";
+
+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)."; }
+
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { CONFIG, COLORS, reduceMotion } from '../../utils';
+export const LabelView = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "et6ln9s1"
+} : {
+  target: "et6ln9s1",
+  label: "LabelView"
+})(process.env.NODE_ENV === "production" ? {
+  name: "sln1fl",
+  styles: "display:inline-flex;max-width:100%;min-width:0;position:relative"
+} : {
+  name: "sln1fl",
+  styles: "display:inline-flex;max-width:100%;min-width:0;position:relative",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wtb3B0aW9uLWJhc2Uvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVdtQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3RvZ2dsZS1ncm91cC1jb250cm9sL3RvZ2dsZS1ncm91cC1jb250cm9sLW9wdGlvbi1iYXNlL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09ORklHLCBDT0xPUlMsIHJlZHVjZU1vdGlvbiB9IGZyb20gJy4uLy4uL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IExhYmVsVmlldyA9IHN0eWxlZC5kaXZgXG5cdGRpc3BsYXk6IGlubGluZS1mbGV4O1xuXHRtYXgtd2lkdGg6IDEwMCU7XG5cdG1pbi13aWR0aDogMDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuYDtcblxuZXhwb3J0IGNvbnN0IGxhYmVsQmxvY2sgPSBjc3NgXG5cdGZsZXg6IDE7XG5gO1xuXG5leHBvcnQgY29uc3QgYnV0dG9uVmlldyA9IGNzc2Bcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0YXBwZWFyYW5jZTogbm9uZTtcblx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdGJvcmRlcjogbm9uZTtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLmNvbnRyb2xCb3JkZXJSYWRpdXMgfTtcblx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA3MDAgXSB9O1xuXHRmaWxsOiBjdXJyZW50Q29sb3I7XG5cdGN1cnNvcjogcG9pbnRlcjtcblx0ZGlzcGxheTogZmxleDtcblx0Zm9udC1mYW1pbHk6IGluaGVyaXQ7XG5cdGhlaWdodDogMTAwJTtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdGxpbmUtaGVpZ2h0OiAxMDAlO1xuXHRvdXRsaW5lOiBub25lO1xuXHRwYWRkaW5nOiAwIDEycHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0dGV4dC1hbGlnbjogY2VudGVyO1xuXHR0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0IH0gbGluZWFyLFxuXHRcdGNvbG9yICR7IENPTkZJRy50cmFuc2l0aW9uRHVyYXRpb25GYXN0IH0gbGluZWFyLCBmb250LXdlaWdodCA2MG1zIGxpbmVhcjtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5cdHVzZXItc2VsZWN0OiBub25lO1xuXHR3aWR0aDogMTAwJTtcblx0ei1pbmRleDogMjtcblxuXHQmOjotbW96LWZvY3VzLWlubmVyIHtcblx0XHRib3JkZXI6IDA7XG5cdH1cblxuXHQmOmFjdGl2ZSB7XG5cdFx0YmFja2dyb3VuZDogJHsgQ09ORklHLnRvZ2dsZUdyb3VwQ29udHJvbEJhY2tncm91bmRDb2xvciB9O1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgYnV0dG9uQWN0aXZlID0gY3NzYFxuXHRjb2xvcjogJHsgQ09MT1JTLndoaXRlIH07XG5cdCY6YWN0aXZlIHtcblx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IEJ1dHRvbkNvbnRlbnRWaWV3ID0gc3R5bGVkLmRpdmBcblx0Zm9udC1zaXplOiAkeyBDT05GSUcuZm9udFNpemUgfTtcblx0bGluZS1oZWlnaHQ6IDE7XG5gO1xuXG5leHBvcnQgY29uc3Qgc2VwYXJhdG9yQWN0aXZlID0gY3NzYFxuXHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbmA7XG5cbmV4cG9ydCBjb25zdCBtZWRpdW0gPSBjc3NgXG5cdG1pbi1oZWlnaHQ6ICR7IENPTkZJRy5jb250cm9sSGVpZ2h0IH07XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export const labelBlock = process.env.NODE_ENV === "production" ? {
+  name: "82a6rk",
+  styles: "flex:1"
+} : {
+  name: "1sypmw-labelBlock",
+  styles: "flex:1;label:labelBlock;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wtb3B0aW9uLWJhc2Uvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCNkIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC1vcHRpb24tYmFzZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBMYWJlbFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4td2lkdGg6IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBsYWJlbEJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvblZpZXcgPSBjc3NgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGFwcGVhcmFuY2U6IG5vbmU7XG5cdGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXHRib3JkZXI6IG5vbmU7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcblx0ZmlsbDogY3VycmVudENvbG9yO1xuXHRjdXJzb3I6IHBvaW50ZXI7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRsaW5lLWhlaWdodDogMTAwJTtcblx0b3V0bGluZTogbm9uZTtcblx0cGFkZGluZzogMCAxMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRleHQtYWxpZ246IGNlbnRlcjtcblx0dHJhbnNpdGlvbjogYmFja2dyb3VuZCAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhcixcblx0XHRjb2xvciAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhciwgZm9udC13ZWlnaHQgNjBtcyBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR1c2VyLXNlbGVjdDogbm9uZTtcblx0d2lkdGg6IDEwMCU7XG5cdHotaW5kZXg6IDI7XG5cblx0Jjo6LW1vei1mb2N1cy1pbm5lciB7XG5cdFx0Ym9yZGVyOiAwO1xuXHR9XG5cblx0JjphY3RpdmUge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy50b2dnbGVHcm91cENvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvbkFjdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy53aGl0ZSB9O1xuXHQmOmFjdGl2ZSB7XG5cdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBCdXR0b25Db250ZW50VmlldyA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtc2l6ZTogJHsgQ09ORklHLmZvbnRTaXplIH07XG5cdGxpbmUtaGVpZ2h0OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNlcGFyYXRvckFjdGl2ZSA9IGNzc2Bcblx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgbWVkaXVtID0gY3NzYFxuXHRtaW4taGVpZ2h0OiAkeyBDT05GSUcuY29udHJvbEhlaWdodCB9O1xuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export const buttonView = /*#__PURE__*/css("align-items:center;appearance:none;background:transparent;border:none;border-radius:", CONFIG.controlBorderRadius, ";color:", COLORS.gray[700], ";fill:currentColor;cursor:pointer;display:flex;font-family:inherit;height:100%;justify-content:center;line-height:100%;outline:none;padding:0 12px;position:relative;text-align:center;transition:background ", CONFIG.transitionDurationFast, " linear,color ", CONFIG.transitionDurationFast, " linear,font-weight 60ms linear;", reduceMotion('transition'), " user-select:none;width:100%;z-index:2;&::-moz-focus-inner{border:0;}&:active{background:", CONFIG.toggleGroupControlBackgroundColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonView;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wtb3B0aW9uLWJhc2Uvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCNkIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC1vcHRpb24tYmFzZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBMYWJlbFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4td2lkdGg6IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBsYWJlbEJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvblZpZXcgPSBjc3NgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGFwcGVhcmFuY2U6IG5vbmU7XG5cdGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXHRib3JkZXI6IG5vbmU7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcblx0ZmlsbDogY3VycmVudENvbG9yO1xuXHRjdXJzb3I6IHBvaW50ZXI7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRsaW5lLWhlaWdodDogMTAwJTtcblx0b3V0bGluZTogbm9uZTtcblx0cGFkZGluZzogMCAxMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRleHQtYWxpZ246IGNlbnRlcjtcblx0dHJhbnNpdGlvbjogYmFja2dyb3VuZCAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhcixcblx0XHRjb2xvciAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhciwgZm9udC13ZWlnaHQgNjBtcyBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR1c2VyLXNlbGVjdDogbm9uZTtcblx0d2lkdGg6IDEwMCU7XG5cdHotaW5kZXg6IDI7XG5cblx0Jjo6LW1vei1mb2N1cy1pbm5lciB7XG5cdFx0Ym9yZGVyOiAwO1xuXHR9XG5cblx0JjphY3RpdmUge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy50b2dnbGVHcm91cENvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvbkFjdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy53aGl0ZSB9O1xuXHQmOmFjdGl2ZSB7XG5cdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBCdXR0b25Db250ZW50VmlldyA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtc2l6ZTogJHsgQ09ORklHLmZvbnRTaXplIH07XG5cdGxpbmUtaGVpZ2h0OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNlcGFyYXRvckFjdGl2ZSA9IGNzc2Bcblx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgbWVkaXVtID0gY3NzYFxuXHRtaW4taGVpZ2h0OiAkeyBDT05GSUcuY29udHJvbEhlaWdodCB9O1xuYDtcbiJdfQ== */");
+export const buttonActive = /*#__PURE__*/css("color:", COLORS.white, ";&:active{background:transparent;}" + (process.env.NODE_ENV === "production" ? "" : ";label:buttonActive;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wtb3B0aW9uLWJhc2Uvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdEK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC1vcHRpb24tYmFzZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBMYWJlbFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4td2lkdGg6IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBsYWJlbEJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvblZpZXcgPSBjc3NgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGFwcGVhcmFuY2U6IG5vbmU7XG5cdGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXHRib3JkZXI6IG5vbmU7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcblx0ZmlsbDogY3VycmVudENvbG9yO1xuXHRjdXJzb3I6IHBvaW50ZXI7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRsaW5lLWhlaWdodDogMTAwJTtcblx0b3V0bGluZTogbm9uZTtcblx0cGFkZGluZzogMCAxMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRleHQtYWxpZ246IGNlbnRlcjtcblx0dHJhbnNpdGlvbjogYmFja2dyb3VuZCAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhcixcblx0XHRjb2xvciAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhciwgZm9udC13ZWlnaHQgNjBtcyBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR1c2VyLXNlbGVjdDogbm9uZTtcblx0d2lkdGg6IDEwMCU7XG5cdHotaW5kZXg6IDI7XG5cblx0Jjo6LW1vei1mb2N1cy1pbm5lciB7XG5cdFx0Ym9yZGVyOiAwO1xuXHR9XG5cblx0JjphY3RpdmUge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy50b2dnbGVHcm91cENvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvbkFjdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy53aGl0ZSB9O1xuXHQmOmFjdGl2ZSB7XG5cdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBCdXR0b25Db250ZW50VmlldyA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtc2l6ZTogJHsgQ09ORklHLmZvbnRTaXplIH07XG5cdGxpbmUtaGVpZ2h0OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNlcGFyYXRvckFjdGl2ZSA9IGNzc2Bcblx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgbWVkaXVtID0gY3NzYFxuXHRtaW4taGVpZ2h0OiAkeyBDT05GSUcuY29udHJvbEhlaWdodCB9O1xuYDtcbiJdfQ== */");
+export const ButtonContentView = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "et6ln9s0"
+} : {
+  target: "et6ln9s0",
+  label: "ButtonContentView"
+})("font-size:", CONFIG.fontSize, ";line-height:1;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wtb3B0aW9uLWJhc2Uvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStEMkMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC1vcHRpb24tYmFzZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBMYWJlbFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4td2lkdGg6IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBsYWJlbEJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvblZpZXcgPSBjc3NgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGFwcGVhcmFuY2U6IG5vbmU7XG5cdGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXHRib3JkZXI6IG5vbmU7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcblx0ZmlsbDogY3VycmVudENvbG9yO1xuXHRjdXJzb3I6IHBvaW50ZXI7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRsaW5lLWhlaWdodDogMTAwJTtcblx0b3V0bGluZTogbm9uZTtcblx0cGFkZGluZzogMCAxMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRleHQtYWxpZ246IGNlbnRlcjtcblx0dHJhbnNpdGlvbjogYmFja2dyb3VuZCAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhcixcblx0XHRjb2xvciAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhciwgZm9udC13ZWlnaHQgNjBtcyBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR1c2VyLXNlbGVjdDogbm9uZTtcblx0d2lkdGg6IDEwMCU7XG5cdHotaW5kZXg6IDI7XG5cblx0Jjo6LW1vei1mb2N1cy1pbm5lciB7XG5cdFx0Ym9yZGVyOiAwO1xuXHR9XG5cblx0JjphY3RpdmUge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy50b2dnbGVHcm91cENvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvbkFjdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy53aGl0ZSB9O1xuXHQmOmFjdGl2ZSB7XG5cdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBCdXR0b25Db250ZW50VmlldyA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtc2l6ZTogJHsgQ09ORklHLmZvbnRTaXplIH07XG5cdGxpbmUtaGVpZ2h0OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNlcGFyYXRvckFjdGl2ZSA9IGNzc2Bcblx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgbWVkaXVtID0gY3NzYFxuXHRtaW4taGVpZ2h0OiAkeyBDT05GSUcuY29udHJvbEhlaWdodCB9O1xuYDtcbiJdfQ== */"));
+export const separatorActive = process.env.NODE_ENV === "production" ? {
+  name: "1qsuvl4",
+  styles: "background:transparent"
+} : {
+  name: "s82tmb-separatorActive",
+  styles: "background:transparent;label:separatorActive;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wtb3B0aW9uLWJhc2Uvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9Fa0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC1vcHRpb24tYmFzZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBMYWJlbFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4td2lkdGg6IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBsYWJlbEJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvblZpZXcgPSBjc3NgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGFwcGVhcmFuY2U6IG5vbmU7XG5cdGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXHRib3JkZXI6IG5vbmU7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcblx0ZmlsbDogY3VycmVudENvbG9yO1xuXHRjdXJzb3I6IHBvaW50ZXI7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRsaW5lLWhlaWdodDogMTAwJTtcblx0b3V0bGluZTogbm9uZTtcblx0cGFkZGluZzogMCAxMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRleHQtYWxpZ246IGNlbnRlcjtcblx0dHJhbnNpdGlvbjogYmFja2dyb3VuZCAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhcixcblx0XHRjb2xvciAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhciwgZm9udC13ZWlnaHQgNjBtcyBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR1c2VyLXNlbGVjdDogbm9uZTtcblx0d2lkdGg6IDEwMCU7XG5cdHotaW5kZXg6IDI7XG5cblx0Jjo6LW1vei1mb2N1cy1pbm5lciB7XG5cdFx0Ym9yZGVyOiAwO1xuXHR9XG5cblx0JjphY3RpdmUge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy50b2dnbGVHcm91cENvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvbkFjdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy53aGl0ZSB9O1xuXHQmOmFjdGl2ZSB7XG5cdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBCdXR0b25Db250ZW50VmlldyA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtc2l6ZTogJHsgQ09ORklHLmZvbnRTaXplIH07XG5cdGxpbmUtaGVpZ2h0OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNlcGFyYXRvckFjdGl2ZSA9IGNzc2Bcblx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgbWVkaXVtID0gY3NzYFxuXHRtaW4taGVpZ2h0OiAkeyBDT05GSUcuY29udHJvbEhlaWdodCB9O1xuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export const medium = /*#__PURE__*/css("min-height:", CONFIG.controlHeight, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:medium;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWdyb3VwLWNvbnRyb2wvdG9nZ2xlLWdyb3VwLWNvbnRyb2wtb3B0aW9uLWJhc2Uvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdFeUIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtZ3JvdXAtY29udHJvbC90b2dnbGUtZ3JvdXAtY29udHJvbC1vcHRpb24tYmFzZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTkZJRywgQ09MT1JTLCByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi8uLi91dGlscyc7XG5cbmV4cG9ydCBjb25zdCBMYWJlbFZpZXcgPSBzdHlsZWQuZGl2YFxuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0bWF4LXdpZHRoOiAxMDAlO1xuXHRtaW4td2lkdGg6IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBsYWJlbEJsb2NrID0gY3NzYFxuXHRmbGV4OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvblZpZXcgPSBjc3NgXG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGFwcGVhcmFuY2U6IG5vbmU7XG5cdGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXHRib3JkZXI6IG5vbmU7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5jb250cm9sQm9yZGVyUmFkaXVzIH07XG5cdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgNzAwIF0gfTtcblx0ZmlsbDogY3VycmVudENvbG9yO1xuXHRjdXJzb3I6IHBvaW50ZXI7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRsaW5lLWhlaWdodDogMTAwJTtcblx0b3V0bGluZTogbm9uZTtcblx0cGFkZGluZzogMCAxMnB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHRleHQtYWxpZ246IGNlbnRlcjtcblx0dHJhbnNpdGlvbjogYmFja2dyb3VuZCAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhcixcblx0XHRjb2xvciAkeyBDT05GSUcudHJhbnNpdGlvbkR1cmF0aW9uRmFzdCB9IGxpbmVhciwgZm9udC13ZWlnaHQgNjBtcyBsaW5lYXI7XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuXHR1c2VyLXNlbGVjdDogbm9uZTtcblx0d2lkdGg6IDEwMCU7XG5cdHotaW5kZXg6IDI7XG5cblx0Jjo6LW1vei1mb2N1cy1pbm5lciB7XG5cdFx0Ym9yZGVyOiAwO1xuXHR9XG5cblx0JjphY3RpdmUge1xuXHRcdGJhY2tncm91bmQ6ICR7IENPTkZJRy50b2dnbGVHcm91cENvbnRyb2xCYWNrZ3JvdW5kQ29sb3IgfTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IGJ1dHRvbkFjdGl2ZSA9IGNzc2Bcblx0Y29sb3I6ICR7IENPTE9SUy53aGl0ZSB9O1xuXHQmOmFjdGl2ZSB7XG5cdFx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBCdXR0b25Db250ZW50VmlldyA9IHN0eWxlZC5kaXZgXG5cdGZvbnQtc2l6ZTogJHsgQ09ORklHLmZvbnRTaXplIH07XG5cdGxpbmUtaGVpZ2h0OiAxO1xuYDtcblxuZXhwb3J0IGNvbnN0IHNlcGFyYXRvckFjdGl2ZSA9IGNzc2Bcblx0YmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgbWVkaXVtID0gY3NzYFxuXHRtaW4taGVpZ2h0OiAkeyBDT05GSUcuY29udHJvbEhlaWdodCB9O1xuYDtcbiJdfQ== */");
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts"],"names":["css","CONFIG","COLORS","reduceMotion","LabelView","labelBlock","buttonView","controlBorderRadius","gray","transitionDurationFast","toggleGroupControlBackgroundColor","buttonActive","white","ButtonContentView","fontSize","separatorActive","medium","controlHeight"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,SAASC,MAAT,EAAiBC,MAAjB,EAAyBC,YAAzB,QAA6C,aAA7C;AAEA,OAAO,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;AAOP,OAAO,MAAMC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAhB;AAIP,OAAO,MAAMC,UAAU,gBAAGN,GAAH,yFAKJC,MAAM,CAACM,mBALH,aAMZL,MAAM,CAACM,IAAP,CAAa,GAAb,CANY,mNAkBIP,MAAM,CAACQ,sBAlBX,oBAmBZR,MAAM,CAACQ,sBAnBK,sCAoBnBN,YAAY,CAAE,YAAF,CApBO,+FA8BNF,MAAM,CAACS,iCA9BD,6mFAAhB;AAkCP,OAAO,MAAMC,YAAY,gBAAGX,GAAH,WACdE,MAAM,CAACU,KADO,+oFAAlB;AAOP,OAAO,MAAMC,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,iBACfZ,MAAM,CAACa,QADQ,ujFAAvB;AAKP,OAAO,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAArB;AAIP,OAAO,MAAMC,MAAM,gBAAGhB,GAAH,gBACHC,MAAM,CAACgB,aADJ,wmFAAZ","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';\n\nexport const LabelView = styled.div`\n\tdisplay: inline-flex;\n\tmax-width: 100%;\n\tmin-width: 0;\n\tposition: relative;\n`;\n\nexport const labelBlock = css`\n\tflex: 1;\n`;\n\nexport const buttonView = css`\n\talign-items: center;\n\tappearance: none;\n\tbackground: transparent;\n\tborder: none;\n\tborder-radius: ${ CONFIG.controlBorderRadius };\n\tcolor: ${ COLORS.gray[ 700 ] };\n\tfill: currentColor;\n\tcursor: pointer;\n\tdisplay: flex;\n\tfont-family: inherit;\n\theight: 100%;\n\tjustify-content: center;\n\tline-height: 100%;\n\toutline: none;\n\tpadding: 0 12px;\n\tposition: relative;\n\ttext-align: center;\n\ttransition: background ${ CONFIG.transitionDurationFast } linear,\n\t\tcolor ${ CONFIG.transitionDurationFast } linear, font-weight 60ms linear;\n\t${ reduceMotion( 'transition' ) }\n\tuser-select: none;\n\twidth: 100%;\n\tz-index: 2;\n\n\t&::-moz-focus-inner {\n\t\tborder: 0;\n\t}\n\n\t&:active {\n\t\tbackground: ${ CONFIG.toggleGroupControlBackgroundColor };\n\t}\n`;\n\nexport const buttonActive = css`\n\tcolor: ${ COLORS.white };\n\t&:active {\n\t\tbackground: transparent;\n\t}\n`;\n\nexport const ButtonContentView = styled.div`\n\tfont-size: ${ CONFIG.fontSize };\n\tline-height: 1;\n`;\n\nexport const separatorActive = css`\n\tbackground: transparent;\n`;\n\nexport const medium = css`\n\tmin-height: ${ CONFIG.controlHeight };\n`;\n"]}

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

@@ -0,0 +1,50 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+
+import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
+export default function ToggleGroupControlOptionIcon(props) {
+  const {
+    icon,
+    ...restProps
+  } = props;
+  return createElement(ToggleGroupControlOptionBase, restProps, createElement(Icon, {
+    icon: icon
+  }));
+}
+/**
+ * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a
+ * child of `ToggleGroupControl` and displays an icon.
+ *
+ * @example
+ * ```jsx
+ *
+ * import {
+ *	__experimentalToggleGroupControl as ToggleGroupControl,
+ *	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+ * from '@wordpress/components';
+ * import { formatLowercase, formatUppercase } from '@wordpress/icons';
+ *
+ * function Example() {
+ *	return (
+ *		<ToggleGroupControl label="my label" value="vertical" isBlock>
+ *			<ToggleGroupControlOptionIcon
+ *				value="uppercase"
+ *				icon={ formatUppercase }
+ *			/>
+ *			<ToggleGroupControlOptionIcon
+ *				value="lowercase"
+ *				icon={ formatLowercase }
+ *			/>
+ *		</ToggleGroupControl>
+ *	);
+ * }
+ ** ```
+ */
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx"],"names":["Icon","ToggleGroupControlOptionBase","ToggleGroupControlOptionIcon","props","icon","restProps"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,kBAArB;AAEA;AACA;AACA;;AAGA,SAASC,4BAAT,QAA6C,qCAA7C;AAEA,eAAe,SAASC,4BAAT,CACdC,KADc,EAMb;AACD,QAAM;AAAEC,IAAAA,IAAF;AAAQ,OAAGC;AAAX,MAAyBF,KAA/B;AACA,SACC,cAAC,4BAAD,EAAmCE,SAAnC,EACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGD;AAAb,IADD,CADD;AAKA;AAED;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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlOptionIconProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\n\nexport default function ToggleGroupControlOptionIcon(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionIconProps,\n\t\t'button',\n\t\tfalse\n\t>\n) {\n\tconst { icon, ...restProps } = props;\n\treturn (\n\t\t<ToggleGroupControlOptionBase { ...restProps }>\n\t\t\t<Icon icon={ icon } />\n\t\t</ToggleGroupControlOptionBase>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a\n * child of `ToggleGroupControl` and displays an icon.\n *\n * @example\n * ```jsx\n *\n * import {\n *\t__experimentalToggleGroupControl as ToggleGroupControl,\n *\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n * from '@wordpress/components';\n * import { formatLowercase, formatUppercase } from '@wordpress/icons';\n *\n * function Example() {\n *\treturn (\n *\t\t<ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *\t\t\t<ToggleGroupControlOptionIcon\n *\t\t\t\tvalue=\"uppercase\"\n *\t\t\t\ticon={ formatUppercase }\n *\t\t\t/>\n *\t\t\t<ToggleGroupControlOptionIcon\n *\t\t\t\tvalue=\"lowercase\"\n *\t\t\t\ticon={ formatLowercase }\n *\t\t\t/>\n *\t\t</ToggleGroupControl>\n *\t);\n * }\n ** ```\n */\n"]}

package/build-module/toggle-group-control/toggle-group-control-option-icon/index.js

@@ -0,0 +1,2 @@
+export { default as ToggleGroupControlOptionIcon } from './component';
+//# sourceMappingURL=index.js.map

package/build-module/toggle-group-control/toggle-group-control-option-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-icon/index.ts"],"names":["default","ToggleGroupControlOptionIcon"],"mappings":"AAAA,SAASA,OAAO,IAAIC,4BAApB,QAAwD,aAAxD","sourcesContent":["export { default as ToggleGroupControlOptionIcon } from './component';\n"]}

package/build-module/toolbar-dropdown-menu/index.js

@@ -20,7 +20,7 @@ function ToolbarDropdownMenu(props, ref) {
     return createElement(DropdownMenu, props);
   } // ToobarItem will pass all props to the render prop child, which will pass
   // all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu
-  // has the same API as DrpodownMenu.
+  // has the same API as DropdownMenu.
 
 
   return createElement(ToolbarItem, _extends({

package/build-module/toolbar-dropdown-menu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toolbar-dropdown-menu/index.js"],"names":["forwardRef","useContext","ToolbarItem","ToolbarContext","DropdownMenu","ToolbarDropdownMenu","props","ref","accessibleToolbarState","toggleProps","toolbarItemProps","isAlternate","popoverProps"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,oBAAvC;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;;AAEA,SAASC,mBAAT,CAA8BC,KAA9B,EAAqCC,GAArC,EAA2C;AAC1C,QAAMC,sBAAsB,GAAGP,UAAU,CAAEE,cAAF,CAAzC;;AAEA,MAAK,CAAEK,sBAAP,EAAgC;AAC/B,WAAO,cAAC,YAAD,EAAmBF,KAAnB,CAAP;AACA,GALyC,CAO1C;AACA;AACA;;;AACA,SACC,cAAC,WAAD;AAAa,IAAA,GAAG,EAAGC;AAAnB,KAA8BD,KAAK,CAACG,WAApC,GACKC,gBAAF,IACD,cAAC,YAAD,eACMJ,KADN;AAEC,IAAA,YAAY,EAAG;AACdK,MAAAA,WAAW,EAAE,IADC;AAEd,SAAGL,KAAK,CAACM;AAFK,KAFhB;AAMC,IAAA,WAAW,EAAGF;AANf,KAFF,CADD;AAcA;;AAED,eAAeV,UAAU,CAAEK,mBAAF,CAAzB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport DropdownMenu from '../dropdown-menu';\n\nfunction ToolbarDropdownMenu( props, ref ) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ! accessibleToolbarState ) {\n\t\treturn <DropdownMenu { ...props } />;\n\t}\n\n\t// ToobarItem will pass all props to the render prop child, which will pass\n\t// all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu\n\t// has the same API as DrpodownMenu.\n\treturn (\n\t\t<ToolbarItem ref={ ref } { ...props.toggleProps }>\n\t\t\t{ ( toolbarItemProps ) => (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\tisAlternate: true,\n\t\t\t\t\t\t...props.popoverProps,\n\t\t\t\t\t} }\n\t\t\t\t\ttoggleProps={ toolbarItemProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</ToolbarItem>\n\t);\n}\n\nexport default forwardRef( ToolbarDropdownMenu );\n"]}
+{"version":3,"sources":["@wordpress/components/src/toolbar-dropdown-menu/index.js"],"names":["forwardRef","useContext","ToolbarItem","ToolbarContext","DropdownMenu","ToolbarDropdownMenu","props","ref","accessibleToolbarState","toggleProps","toolbarItemProps","isAlternate","popoverProps"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,EAAqBC,UAArB,QAAuC,oBAAvC;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,YAAP,MAAyB,kBAAzB;;AAEA,SAASC,mBAAT,CAA8BC,KAA9B,EAAqCC,GAArC,EAA2C;AAC1C,QAAMC,sBAAsB,GAAGP,UAAU,CAAEE,cAAF,CAAzC;;AAEA,MAAK,CAAEK,sBAAP,EAAgC;AAC/B,WAAO,cAAC,YAAD,EAAmBF,KAAnB,CAAP;AACA,GALyC,CAO1C;AACA;AACA;;;AACA,SACC,cAAC,WAAD;AAAa,IAAA,GAAG,EAAGC;AAAnB,KAA8BD,KAAK,CAACG,WAApC,GACKC,gBAAF,IACD,cAAC,YAAD,eACMJ,KADN;AAEC,IAAA,YAAY,EAAG;AACdK,MAAAA,WAAW,EAAE,IADC;AAEd,SAAGL,KAAK,CAACM;AAFK,KAFhB;AAMC,IAAA,WAAW,EAAGF;AANf,KAFF,CADD;AAcA;;AAED,eAAeV,UAAU,CAAEK,mBAAF,CAAzB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ToolbarItem from '../toolbar-item';\nimport ToolbarContext from '../toolbar-context';\nimport DropdownMenu from '../dropdown-menu';\n\nfunction ToolbarDropdownMenu( props, ref ) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tif ( ! accessibleToolbarState ) {\n\t\treturn <DropdownMenu { ...props } />;\n\t}\n\n\t// ToobarItem will pass all props to the render prop child, which will pass\n\t// all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu\n\t// has the same API as DropdownMenu.\n\treturn (\n\t\t<ToolbarItem ref={ ref } { ...props.toggleProps }>\n\t\t\t{ ( toolbarItemProps ) => (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\tisAlternate: true,\n\t\t\t\t\t\t...props.popoverProps,\n\t\t\t\t\t} }\n\t\t\t\t\ttoggleProps={ toolbarItemProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</ToolbarItem>\n\t);\n}\n\nexport default forwardRef( ToolbarDropdownMenu );\n"]}

package/build-module/ui/spinner/component.js

@@ -26,7 +26,7 @@ import { COLORS } from '../../utils/colors-values';
 
 function Spinner(props, forwardedRef) {
   const {
-    color = COLORS.black,
+    color = COLORS.gray[900],
     size = BASE_SIZE,
     ...otherProps
   } = useContextSystem(props, 'Spinner');

package/build-module/ui/spinner/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/ui/spinner/component.js"],"names":["BarsView","BarsWrapperView","ContainerView","BASE_SIZE","WRAPPER_SIZE","contextConnect","useContextSystem","COLORS","Spinner","props","forwardedRef","color","black","size","otherProps","ratio","scale","transform","styles","height","width"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,eAAnB,EAAoCC,aAApC,QAAyD,UAAzD;AACA,SAASC,SAAT,EAAoBC,YAApB,QAAwC,SAAxC;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,YAAjD;AACA,SAASC,MAAT,QAAuB,2BAAvB;AAEA;;AACA;AACA;AACA;AACA;AACA;;AACA;;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,OAAT,CAAkBC,KAAlB,EAAyBC,YAAzB,EAAwC;AACvC,QAAM;AACLC,IAAAA,KAAK,GAAGJ,MAAM,CAACK,KADV;AAELC,IAAAA,IAAI,GAAGV,SAFF;AAGL,OAAGW;AAHE,MAIFR,gBAAgB,CAAEG,KAAF,EAAS,SAAT,CAJpB;AAKA,QAAMM,KAAK,GAAGF,IAAI,GAAGV,SAArB;AACA,QAAMa,KAAK,GAAKD,KAAK,GAAGZ,SAAV,GAAwBC,YAAtC;AACA,QAAMa,SAAS,GAAI,SAASD,KAAO,GAAnC;AAEA,QAAME,MAAM,GAAG;AAAED,IAAAA;AAAF,GAAf;AAEA,SACC,cAAC,aAAD,eACMH,UADN;AAEC,iBAAY,IAFb;AAGC,IAAA,GAAG,EAAGJ,YAHP;AAIC,IAAA,KAAK,EAAG;AAAES,MAAAA,MAAM,EAAEN,IAAV;AAAgBO,MAAAA,KAAK,EAAEP;AAAvB;AAJT,MAMC,cAAC,eAAD;AAAiB,mBAAc,IAA/B;AAAsC,IAAA,KAAK,EAAGK;AAA9C,KACC,cAAC,QAAD;AAAU,IAAA,KAAK,EAAG;AAAEP,MAAAA;AAAF;AAAlB,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,IADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,IAFD,EAGC;AAAK,IAAA,SAAS,EAAC;AAAf,IAHD,EAIC;AAAK,IAAA,SAAS,EAAC;AAAf,IAJD,EAKC;AAAK,IAAA,SAAS,EAAC;AAAf,IALD,EAMC;AAAK,IAAA,SAAS,EAAC;AAAf,IAND,EAOC;AAAK,IAAA,SAAS,EAAC;AAAf,IAPD,EAQC;AAAK,IAAA,SAAS,EAAC;AAAf,IARD,EASC;AAAK,IAAA,SAAS,EAAC;AAAf,IATD,EAUC;AAAK,IAAA,SAAS,EAAC;AAAf,IAVD,EAWC;AAAK,IAAA,SAAS,EAAC;AAAf,IAXD,EAYC;AAAK,IAAA,SAAS,EAAC;AAAf,IAZD,CADD,CAND,CADD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAeN,cAAc,CAAEG,OAAF,EAAW,SAAX,CAA7B","sourcesContent":["/**\n * Internal dependencies\n */\nimport { BarsView, BarsWrapperView, ContainerView } from './styles';\nimport { BASE_SIZE, WRAPPER_SIZE } from './utils';\nimport { contextConnect, useContextSystem } from '../context';\nimport { COLORS } from '../../utils/colors-values';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @typedef Props\n * @property {import('react').CSSProperties['color']} [color]   Color of `Spinner`.\n * @property {number}                                 [size=16] Size of `Spinner`.\n */\n/* eslint-enable jsdoc/valid-types */\n\n/**\n *\n * @param {import('../context').WordPressComponentProps<Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                          forwardedRef\n */\nfunction Spinner( props, forwardedRef ) {\n\tconst {\n\t\tcolor = COLORS.black,\n\t\tsize = BASE_SIZE,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Spinner' );\n\tconst ratio = size / BASE_SIZE;\n\tconst scale = ( ratio * BASE_SIZE ) / WRAPPER_SIZE;\n\tconst transform = `scale(${ scale })`;\n\n\tconst styles = { transform };\n\n\treturn (\n\t\t<ContainerView\n\t\t\t{ ...otherProps }\n\t\t\taria-busy={ true }\n\t\t\tref={ forwardedRef }\n\t\t\tstyle={ { height: size, width: size } }\n\t\t>\n\t\t\t<BarsWrapperView aria-hidden={ true } style={ styles }>\n\t\t\t\t<BarsView style={ { color } }>\n\t\t\t\t\t<div className=\"InnerBar1\" />\n\t\t\t\t\t<div className=\"InnerBar2\" />\n\t\t\t\t\t<div className=\"InnerBar3\" />\n\t\t\t\t\t<div className=\"InnerBar4\" />\n\t\t\t\t\t<div className=\"InnerBar5\" />\n\t\t\t\t\t<div className=\"InnerBar6\" />\n\t\t\t\t\t<div className=\"InnerBar7\" />\n\t\t\t\t\t<div className=\"InnerBar8\" />\n\t\t\t\t\t<div className=\"InnerBar9\" />\n\t\t\t\t\t<div className=\"InnerBar10\" />\n\t\t\t\t\t<div className=\"InnerBar11\" />\n\t\t\t\t\t<div className=\"InnerBar12\" />\n\t\t\t\t</BarsView>\n\t\t\t</BarsWrapperView>\n\t\t</ContainerView>\n\t);\n}\n\n/**\n * `Spinner` is a component that notify users that their action is being processed.\n *\n * @example\n * ```jsx\n * import { Spinner } from `@wordpress/components/ui`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Spinner />\n * \t);\n * }\n * ```\n */\nexport default contextConnect( Spinner, 'Spinner' );\n"]}
+{"version":3,"sources":["@wordpress/components/src/ui/spinner/component.js"],"names":["BarsView","BarsWrapperView","ContainerView","BASE_SIZE","WRAPPER_SIZE","contextConnect","useContextSystem","COLORS","Spinner","props","forwardedRef","color","gray","size","otherProps","ratio","scale","transform","styles","height","width"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,eAAnB,EAAoCC,aAApC,QAAyD,UAAzD;AACA,SAASC,SAAT,EAAoBC,YAApB,QAAwC,SAAxC;AACA,SAASC,cAAT,EAAyBC,gBAAzB,QAAiD,YAAjD;AACA,SAASC,MAAT,QAAuB,2BAAvB;AAEA;;AACA;AACA;AACA;AACA;AACA;;AACA;;AAEA;AACA;AACA;AACA;AACA;;AACA,SAASC,OAAT,CAAkBC,KAAlB,EAAyBC,YAAzB,EAAwC;AACvC,QAAM;AACLC,IAAAA,KAAK,GAAGJ,MAAM,CAACK,IAAP,CAAa,GAAb,CADH;AAELC,IAAAA,IAAI,GAAGV,SAFF;AAGL,OAAGW;AAHE,MAIFR,gBAAgB,CAAEG,KAAF,EAAS,SAAT,CAJpB;AAKA,QAAMM,KAAK,GAAGF,IAAI,GAAGV,SAArB;AACA,QAAMa,KAAK,GAAKD,KAAK,GAAGZ,SAAV,GAAwBC,YAAtC;AACA,QAAMa,SAAS,GAAI,SAASD,KAAO,GAAnC;AAEA,QAAME,MAAM,GAAG;AAAED,IAAAA;AAAF,GAAf;AAEA,SACC,cAAC,aAAD,eACMH,UADN;AAEC,iBAAY,IAFb;AAGC,IAAA,GAAG,EAAGJ,YAHP;AAIC,IAAA,KAAK,EAAG;AAAES,MAAAA,MAAM,EAAEN,IAAV;AAAgBO,MAAAA,KAAK,EAAEP;AAAvB;AAJT,MAMC,cAAC,eAAD;AAAiB,mBAAc,IAA/B;AAAsC,IAAA,KAAK,EAAGK;AAA9C,KACC,cAAC,QAAD;AAAU,IAAA,KAAK,EAAG;AAAEP,MAAAA;AAAF;AAAlB,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,IADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,IAFD,EAGC;AAAK,IAAA,SAAS,EAAC;AAAf,IAHD,EAIC;AAAK,IAAA,SAAS,EAAC;AAAf,IAJD,EAKC;AAAK,IAAA,SAAS,EAAC;AAAf,IALD,EAMC;AAAK,IAAA,SAAS,EAAC;AAAf,IAND,EAOC;AAAK,IAAA,SAAS,EAAC;AAAf,IAPD,EAQC;AAAK,IAAA,SAAS,EAAC;AAAf,IARD,EASC;AAAK,IAAA,SAAS,EAAC;AAAf,IATD,EAUC;AAAK,IAAA,SAAS,EAAC;AAAf,IAVD,EAWC;AAAK,IAAA,SAAS,EAAC;AAAf,IAXD,EAYC;AAAK,IAAA,SAAS,EAAC;AAAf,IAZD,CADD,CAND,CADD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAeN,cAAc,CAAEG,OAAF,EAAW,SAAX,CAA7B","sourcesContent":["/**\n * Internal dependencies\n */\nimport { BarsView, BarsWrapperView, ContainerView } from './styles';\nimport { BASE_SIZE, WRAPPER_SIZE } from './utils';\nimport { contextConnect, useContextSystem } from '../context';\nimport { COLORS } from '../../utils/colors-values';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @typedef Props\n * @property {import('react').CSSProperties['color']} [color]   Color of `Spinner`.\n * @property {number}                                 [size=16] Size of `Spinner`.\n */\n/* eslint-enable jsdoc/valid-types */\n\n/**\n *\n * @param {import('../context').WordPressComponentProps<Props, 'div'>} props\n * @param {import('react').ForwardedRef<any>}                          forwardedRef\n */\nfunction Spinner( props, forwardedRef ) {\n\tconst {\n\t\tcolor = COLORS.gray[ 900 ],\n\t\tsize = BASE_SIZE,\n\t\t...otherProps\n\t} = useContextSystem( props, 'Spinner' );\n\tconst ratio = size / BASE_SIZE;\n\tconst scale = ( ratio * BASE_SIZE ) / WRAPPER_SIZE;\n\tconst transform = `scale(${ scale })`;\n\n\tconst styles = { transform };\n\n\treturn (\n\t\t<ContainerView\n\t\t\t{ ...otherProps }\n\t\t\taria-busy={ true }\n\t\t\tref={ forwardedRef }\n\t\t\tstyle={ { height: size, width: size } }\n\t\t>\n\t\t\t<BarsWrapperView aria-hidden={ true } style={ styles }>\n\t\t\t\t<BarsView style={ { color } }>\n\t\t\t\t\t<div className=\"InnerBar1\" />\n\t\t\t\t\t<div className=\"InnerBar2\" />\n\t\t\t\t\t<div className=\"InnerBar3\" />\n\t\t\t\t\t<div className=\"InnerBar4\" />\n\t\t\t\t\t<div className=\"InnerBar5\" />\n\t\t\t\t\t<div className=\"InnerBar6\" />\n\t\t\t\t\t<div className=\"InnerBar7\" />\n\t\t\t\t\t<div className=\"InnerBar8\" />\n\t\t\t\t\t<div className=\"InnerBar9\" />\n\t\t\t\t\t<div className=\"InnerBar10\" />\n\t\t\t\t\t<div className=\"InnerBar11\" />\n\t\t\t\t\t<div className=\"InnerBar12\" />\n\t\t\t\t</BarsView>\n\t\t\t</BarsWrapperView>\n\t\t</ContainerView>\n\t);\n}\n\n/**\n * `Spinner` is a component that notify users that their action is being processed.\n *\n * @example\n * ```jsx\n * import { Spinner } from `@wordpress/components/ui`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Spinner />\n * \t);\n * }\n * ```\n */\nexport default contextConnect( Spinner, 'Spinner' );\n"]}

package/build-module/unit-control/index.js

@@ -41,6 +41,7 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     unit: unitProp,
     units: unitsProp = CSS_UNITS,
     value: valueProp,
+    onBlur: onBlurProp,
     ...props
   } = unitControlProps;
 
@@ -122,7 +123,10 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     }
   };
 
-  const handleOnBlur = mayUpdateUnit;
+  const handleOnBlur = event => {
+    mayUpdateUnit(event);
+    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(event);
+  };
 
   const handleOnKeyDown = event => {
     const {
@@ -181,7 +185,8 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     onChange: handleOnUnitChange,
     size: size,
     unit: unit,
-    units: units
+    units: units,
+    onBlur: onBlurProp
   }) : null;
   let step = props.step;
   /*