@wordpress/components 25.0.0 → 25.1.1

package/build/toggle-control/index.js

@@ -58,17 +58,15 @@ var _space = require("../ui/utils/space");
  * };
  * ```
  */
-function ToggleControl(_ref) {
-  let {
-    __nextHasNoMarginBottom,
-    label,
-    checked,
-    help,
-    className,
-    onChange,
-    disabled
-  } = _ref;
-
+function ToggleControl({
+  __nextHasNoMarginBottom,
+  label,
+  checked,
+  help,
+  className,
+  onChange,
+  disabled
+}) {
   function onChangeToggle(event) {
     onChange(event.target.checked);
   }

package/build/toggle-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-control/index.tsx"],"names":["ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","onChangeToggle","event","target","instanceId","id","cx","classes","marginBottom","describedBy","helpLabel","undefined"],"mappings":";;;;;;;;;;;;AAIA;;AAKA;;AAKA;;AACA;;AACA;;AAGA;;AACA;;AACA;;AArBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAT,OAQ4D;AAAA,MARpC;AAC9BC,IAAAA,uBAD8B;AAE9BC,IAAAA,KAF8B;AAG9BC,IAAAA,OAH8B;AAI9BC,IAAAA,IAJ8B;AAK9BC,IAAAA,SAL8B;AAM9BC,IAAAA,QAN8B;AAO9BC,IAAAA;AAP8B,GAQoC;;AAClE,WAASC,cAAT,CAAyBC,KAAzB,EAAkE;AACjEH,IAAAA,QAAQ,CAAEG,KAAK,CAACC,MAAN,CAAaP,OAAf,CAAR;AACA;;AACD,QAAMQ,UAAU,GAAG,4BAAeX,aAAf,CAAnB;AACA,QAAMY,EAAE,GAAI,4BAA4BD,UAAY,EAApD;AAEA,QAAME,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAGD,EAAE,CACjB,2BADiB,EAEjBR,SAFiB,EAGjB,CAAEJ,uBAAF,iBAA6B,gBAAK;AAAEc,IAAAA,YAAY,EAAE,kBAAO,CAAP;AAAhB,GAAL,irIAHZ,CAAlB;AAMA,MAAIC,WAAJ,EAAiBC,SAAjB;;AACA,MAAKb,IAAL,EAAY;AACX,QAAK,OAAOA,IAAP,KAAgB,UAArB,EAAkC;AACjC;AACA;AACA;AACA,UAAKD,OAAO,KAAKe,SAAjB,EAA6B;AAC5BD,QAAAA,SAAS,GAAGb,IAAI,CAAED,OAAF,CAAhB;AACA;AACD,KAPD,MAOO;AACNc,MAAAA,SAAS,GAAGb,IAAZ;AACA;;AACD,QAAKa,SAAL,EAAiB;AAChBD,MAAAA,WAAW,GAAGJ,EAAE,GAAG,QAAnB;AACA;AACD;;AAED,SACC,4BAAC,oBAAD;AACC,IAAA,EAAE,EAAGA,EADN;AAEC,IAAA,IAAI,EAAGK,SAFR;AAGC,IAAA,SAAS,EAAGH,OAHb;AAIC,IAAA,uBAAuB;AAJxB,KAMC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC,YAAhB;AAA6B,IAAA,OAAO,EAAG;AAAvC,KACC,4BAAC,mBAAD;AACC,IAAA,EAAE,EAAGF,EADN;AAEC,IAAA,OAAO,EAAGT,OAFX;AAGC,IAAA,QAAQ,EAAGK,cAHZ;AAIC,wBAAmBQ,WAJpB;AAKC,IAAA,QAAQ,EAAGT;AALZ,IADD,EAQC,4BAAC,eAAD;AACC,IAAA,EAAE,EAAC,OADJ;AAEC,IAAA,OAAO,EAAGK,EAFX;AAGC,IAAA,SAAS,EAAC;AAHX,KAKGV,KALH,CARD,CAND,CADD;AAyBA;;eAEcF,a","sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../ui/utils/space';\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n *   const [ value, setValue ] = useState( false );\n *\n *   return (\n *     <ToggleControl\n *       label=\"Fixed Background\"\n *       checked={ value }\n *       onChange={ () => setValue( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function ToggleControl( {\n\t__nextHasNoMarginBottom,\n\tlabel,\n\tchecked,\n\thelp,\n\tclassName,\n\tonChange,\n\tdisabled,\n}: WordPressComponentProps< ToggleControlProps, 'input', false > ) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tif ( typeof help === 'function' ) {\n\t\t\t// `help` as a function works only for controlled components where\n\t\t\t// `checked` is passed down from parent component. Uncontrolled\n\t\t\t// component can show only a static help label.\n\t\t\tif ( checked !== undefined ) {\n\t\t\t\thelpLabel = help( checked );\n\t\t\t}\n\t\t} else {\n\t\t\thelpLabel = help;\n\t\t}\n\t\tif ( helpLabel ) {\n\t\t\tdescribedBy = id + '__help';\n\t\t}\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={ helpLabel }\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 3 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock\n\t\t\t\t\tas=\"label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName=\"components-toggle-control__label\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default ToggleControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-control/index.tsx"],"names":["ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","onChangeToggle","event","target","instanceId","id","cx","classes","marginBottom","describedBy","helpLabel","undefined"],"mappings":";;;;;;;;;;;;AAIA;;AAKA;;AAKA;;AACA;;AACA;;AAGA;;AACA;;AACA;;AArBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAT,CAAwB;AAC9BC,EAAAA,uBAD8B;AAE9BC,EAAAA,KAF8B;AAG9BC,EAAAA,OAH8B;AAI9BC,EAAAA,IAJ8B;AAK9BC,EAAAA,SAL8B;AAM9BC,EAAAA,QAN8B;AAO9BC,EAAAA;AAP8B,CAAxB,EAQ4D;AAClE,WAASC,cAAT,CAAyBC,KAAzB,EAAkE;AACjEH,IAAAA,QAAQ,CAAEG,KAAK,CAACC,MAAN,CAAaP,OAAf,CAAR;AACA;;AACD,QAAMQ,UAAU,GAAG,4BAAeX,aAAf,CAAnB;AACA,QAAMY,EAAE,GAAI,4BAA4BD,UAAY,EAApD;AAEA,QAAME,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAGD,EAAE,CACjB,2BADiB,EAEjBR,SAFiB,EAGjB,CAAEJ,uBAAF,iBAA6B,gBAAK;AAAEc,IAAAA,YAAY,EAAE,kBAAO,CAAP;AAAhB,GAAL,irIAHZ,CAAlB;AAMA,MAAIC,WAAJ,EAAiBC,SAAjB;;AACA,MAAKb,IAAL,EAAY;AACX,QAAK,OAAOA,IAAP,KAAgB,UAArB,EAAkC;AACjC;AACA;AACA;AACA,UAAKD,OAAO,KAAKe,SAAjB,EAA6B;AAC5BD,QAAAA,SAAS,GAAGb,IAAI,CAAED,OAAF,CAAhB;AACA;AACD,KAPD,MAOO;AACNc,MAAAA,SAAS,GAAGb,IAAZ;AACA;;AACD,QAAKa,SAAL,EAAiB;AAChBD,MAAAA,WAAW,GAAGJ,EAAE,GAAG,QAAnB;AACA;AACD;;AAED,SACC,4BAAC,oBAAD;AACC,IAAA,EAAE,EAAGA,EADN;AAEC,IAAA,IAAI,EAAGK,SAFR;AAGC,IAAA,SAAS,EAAGH,OAHb;AAIC,IAAA,uBAAuB;AAJxB,KAMC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC,YAAhB;AAA6B,IAAA,OAAO,EAAG;AAAvC,KACC,4BAAC,mBAAD;AACC,IAAA,EAAE,EAAGF,EADN;AAEC,IAAA,OAAO,EAAGT,OAFX;AAGC,IAAA,QAAQ,EAAGK,cAHZ;AAIC,wBAAmBQ,WAJpB;AAKC,IAAA,QAAQ,EAAGT;AALZ,IADD,EAQC,4BAAC,eAAD;AACC,IAAA,EAAE,EAAC,OADJ;AAEC,IAAA,OAAO,EAAGK,EAFX;AAGC,IAAA,SAAS,EAAC;AAHX,KAKGV,KALH,CARD,CAND,CADD;AAyBA;;eAEcF,a","sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../flex';\nimport FormToggle from '../form-toggle';\nimport BaseControl from '../base-control';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../ui/utils/space';\n\n/**\n * ToggleControl is used to generate a toggle user interface.\n *\n * ```jsx\n * import { ToggleControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyToggleControl = () => {\n *   const [ value, setValue ] = useState( false );\n *\n *   return (\n *     <ToggleControl\n *       label=\"Fixed Background\"\n *       checked={ value }\n *       onChange={ () => setValue( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport function ToggleControl( {\n\t__nextHasNoMarginBottom,\n\tlabel,\n\tchecked,\n\thelp,\n\tclassName,\n\tonChange,\n\tdisabled,\n}: WordPressComponentProps< ToggleControlProps, 'input', false > ) {\n\tfunction onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {\n\t\tonChange( event.target.checked );\n\t}\n\tconst instanceId = useInstanceId( ToggleControl );\n\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\tconst cx = useCx();\n\tconst classes = cx(\n\t\t'components-toggle-control',\n\t\tclassName,\n\t\t! __nextHasNoMarginBottom && css( { marginBottom: space( 3 ) } )\n\t);\n\n\tlet describedBy, helpLabel;\n\tif ( help ) {\n\t\tif ( typeof help === 'function' ) {\n\t\t\t// `help` as a function works only for controlled components where\n\t\t\t// `checked` is passed down from parent component. Uncontrolled\n\t\t\t// component can show only a static help label.\n\t\t\tif ( checked !== undefined ) {\n\t\t\t\thelpLabel = help( checked );\n\t\t\t}\n\t\t} else {\n\t\t\thelpLabel = help;\n\t\t}\n\t\tif ( helpLabel ) {\n\t\t\tdescribedBy = id + '__help';\n\t\t}\n\t}\n\n\treturn (\n\t\t<BaseControl\n\t\t\tid={ id }\n\t\t\thelp={ helpLabel }\n\t\t\tclassName={ classes }\n\t\t\t__nextHasNoMarginBottom\n\t\t>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 3 }>\n\t\t\t\t<FormToggle\n\t\t\t\t\tid={ id }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\tonChange={ onChangeToggle }\n\t\t\t\t\taria-describedby={ describedBy }\n\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock\n\t\t\t\t\tas=\"label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\tclassName=\"components-toggle-control__label\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default ToggleControl;\n"]}

package/build/toggle-control/index.native.js

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _switchCell = _interopRequireDefault(require("../mobile/bottom-sheet/switch-cell"));
 
 /**
@@ -20,26 +18,26 @@ var _switchCell = _interopRequireDefault(require("../mobile/bottom-sheet/switch-
 /**
  * Internal dependencies
  */
-const ToggleControl = (0, _element.memo)(_ref => {
-  let {
-    label,
-    checked,
-    help,
-    instanceId,
-    className,
-    onChange,
-    ...props
-  } = _ref;
+const ToggleControl = (0, _element.memo)(({
+  label,
+  checked,
+  help,
+  instanceId,
+  className,
+  onChange,
+  ...props
+}) => {
   const id = `inspector-toggle-control-${instanceId}`;
   const helpLabel = help && typeof help === 'function' ? help(checked) : help;
-  return (0, _element.createElement)(_switchCell.default, (0, _extends2.default)({
+  return (0, _element.createElement)(_switchCell.default, {
     label: label,
     id: id,
     help: helpLabel,
     className: className,
     value: checked,
-    onValueChange: onChange
-  }, props));
+    onValueChange: onChange,
+    ...props
+  });
 });
 var _default = ToggleControl;
 exports.default = _default;

package/build/toggle-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-control/index.native.js"],"names":["ToggleControl","label","checked","help","instanceId","className","onChange","props","id","helpLabel"],"mappings":";;;;;;;;;AAGA;;;;AAIA;;AAPA;AACA;AACA;;AAEA;AACA;AACA;AAGA,MAAMA,aAAa,GAAG,mBACrB,QAA2E;AAAA,MAAzE;AAAEC,IAAAA,KAAF;AAASC,IAAAA,OAAT;AAAkBC,IAAAA,IAAlB;AAAwBC,IAAAA,UAAxB;AAAoCC,IAAAA,SAApC;AAA+CC,IAAAA,QAA/C;AAAyD,OAAGC;AAA5D,GAAyE;AAC1E,QAAMC,EAAE,GAAI,4BAA4BJ,UAAY,EAApD;AAEA,QAAMK,SAAS,GACdN,IAAI,IAAI,OAAOA,IAAP,KAAgB,UAAxB,GAAqCA,IAAI,CAAED,OAAF,CAAzC,GAAuDC,IADxD;AAGA,SACC,4BAAC,mBAAD;AACC,IAAA,KAAK,EAAGF,KADT;AAEC,IAAA,EAAE,EAAGO,EAFN;AAGC,IAAA,IAAI,EAAGC,SAHR;AAIC,IAAA,SAAS,EAAGJ,SAJb;AAKC,IAAA,KAAK,EAAGH,OALT;AAMC,IAAA,aAAa,EAAGI;AANjB,KAOMC,KAPN,EADD;AAWA,CAlBoB,CAAtB;eAqBeP,a","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport SwitchCell from '../mobile/bottom-sheet/switch-cell';\n\nconst ToggleControl = memo(\n\t( { label, checked, help, instanceId, className, onChange, ...props } ) => {\n\t\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\t\tconst helpLabel =\n\t\t\thelp && typeof help === 'function' ? help( checked ) : help;\n\n\t\treturn (\n\t\t\t<SwitchCell\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ helpLabel }\n\t\t\t\tclassName={ className }\n\t\t\t\tvalue={ checked }\n\t\t\t\tonValueChange={ onChange }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport default ToggleControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-control/index.native.js"],"names":["ToggleControl","label","checked","help","instanceId","className","onChange","props","id","helpLabel"],"mappings":";;;;;;;;;AAGA;;AAIA;;AAPA;AACA;AACA;;AAEA;AACA;AACA;AAGA,MAAMA,aAAa,GAAG,mBACrB,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA,OAAT;AAAkBC,EAAAA,IAAlB;AAAwBC,EAAAA,UAAxB;AAAoCC,EAAAA,SAApC;AAA+CC,EAAAA,QAA/C;AAAyD,KAAGC;AAA5D,CAAF,KAA2E;AAC1E,QAAMC,EAAE,GAAI,4BAA4BJ,UAAY,EAApD;AAEA,QAAMK,SAAS,GACdN,IAAI,IAAI,OAAOA,IAAP,KAAgB,UAAxB,GAAqCA,IAAI,CAAED,OAAF,CAAzC,GAAuDC,IADxD;AAGA,SACC,4BAAC,mBAAD;AACC,IAAA,KAAK,EAAGF,KADT;AAEC,IAAA,EAAE,EAAGO,EAFN;AAGC,IAAA,IAAI,EAAGC,SAHR;AAIC,IAAA,SAAS,EAAGJ,SAJb;AAKC,IAAA,KAAK,EAAGH,OALT;AAMC,IAAA,aAAa,EAAGI,QANjB;AAAA,OAOMC;AAPN,IADD;AAWA,CAlBoB,CAAtB;eAqBeP,a","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport SwitchCell from '../mobile/bottom-sheet/switch-cell';\n\nconst ToggleControl = memo(\n\t( { label, checked, help, instanceId, className, onChange, ...props } ) => {\n\t\tconst id = `inspector-toggle-control-${ instanceId }`;\n\n\t\tconst helpLabel =\n\t\t\thelp && typeof help === 'function' ? help( checked ) : help;\n\n\t\treturn (\n\t\t\t<SwitchCell\n\t\t\t\tlabel={ label }\n\t\t\t\tid={ id }\n\t\t\t\thelp={ helpLabel }\n\t\t\t\tclassName={ className }\n\t\t\t\tvalue={ checked }\n\t\t\t\tonValueChange={ onChange }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n\nexport default ToggleControl;\n"]}

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

@@ -9,8 +9,6 @@ exports.ToggleGroupControlAsButtonGroup = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _compose = require("@wordpress/compose");
 
 var _view = require("../../view");
@@ -32,16 +30,15 @@ var _hooks = require("../../utils/hooks");
 /**
  * Internal dependencies
  */
-function UnforwardedToggleGroupControlAsButtonGroup(_ref, forwardedRef) {
-  let {
-    children,
-    isAdaptiveWidth,
-    label,
-    onChange,
-    size,
-    value,
-    ...otherProps
-  } = _ref;
+function UnforwardedToggleGroupControlAsButtonGroup({
+  children,
+  isAdaptiveWidth,
+  label,
+  onChange,
+  size,
+  value,
+  ...otherProps
+}, forwardedRef) {
   const containerRef = (0, _element.useRef)();
   const [resizeListener, sizes] = (0, _compose.useResizeObserver)();
   const baseId = (0, _compose.useInstanceId)(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group').toString();
@@ -72,12 +69,12 @@ function UnforwardedToggleGroupControlAsButtonGroup(_ref, forwardedRef) {
       isDeselectable: true,
       size
     }
-  }, (0, _element.createElement)(_view.View, (0, _extends2.default)({
-    "aria-label": label
-  }, otherProps, {
+  }, (0, _element.createElement)(_view.View, {
+    "aria-label": label,
+    ...otherProps,
     ref: (0, _compose.useMergeRefs)([containerRef, forwardedRef]),
     role: "group"
-  }), resizeListener, (0, _element.createElement)(_toggleGroupControlBackdrop.default, {
+  }, resizeListener, (0, _element.createElement)(_toggleGroupControlBackdrop.default, {
     state: groupContext.state,
     containerRef: containerRef,
     containerWidth: sizes.width,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"names":["UnforwardedToggleGroupControlAsButtonGroup","forwardedRef","children","isAdaptiveWidth","label","onChange","size","value","otherProps","containerRef","resizeListener","sizes","baseId","ToggleGroupControlAsButtonGroup","toString","selectedValue","setSelectedValue","groupContext","state","setState","previousValue","isBlock","isDeselectable","width"],"mappings":";;;;;;;;;AAcA;;;;AANA;;AAWA;;AACA;;AACA;;AACA;;AAtBA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AAQA,SAASA,0CAAT,OAcCC,YAdD,EAeE;AAAA,MAdD;AACCC,IAAAA,QADD;AAECC,IAAAA,eAFD;AAGCC,IAAAA,KAHD;AAICC,IAAAA,QAJD;AAKCC,IAAAA,IALD;AAMCC,IAAAA,KAND;AAOC,OAAGC;AAPJ,GAcC;AACD,QAAMC,YAAY,GAAG,sBAArB;AACA,QAAM,CAAEC,cAAF,EAAkBC,KAAlB,IAA4B,iCAAlC;AACA,QAAMC,MAAM,GAAG,4BACdC,+BADc,EAEd,sCAFc,EAGbC,QAHa,EAAf;AAIA,QAAM,CAAEC,aAAF,EAAiBC,gBAAjB,IAAsC,uBAAUT,KAAV,CAA5C;AACA,QAAMU,YAAY,GAAG;AACpBL,IAAAA,MADoB;AAEpBM,IAAAA,KAAK,EAAEH,aAFa;AAGpBI,IAAAA,QAAQ,EAAEH;AAHU,GAArB;AAKA,QAAMI,aAAa,GAAG,0BAAab,KAAb,CAAtB,CAbC,CAeD;;AACA,8BAAiB,MAAM;AACtB;AACA;AACA,QAAKa,aAAa,KAAKH,YAAY,CAACC,KAApC,EAA4C;AAC3Cb,MAAAA,QAAQ,CAAEY,YAAY,CAACC,KAAf,CAAR;AACA;AACD,GAND,EAMG,CAAED,YAAY,CAACC,KAAf,CANH,EAhBC,CAwBD;;AACA,8BAAiB,MAAM;AACtB,QAAKX,KAAK,KAAKU,YAAY,CAACC,KAA5B,EAAoC;AACnCD,MAAAA,YAAY,CAACE,QAAb,CAAuBZ,KAAvB;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,CAJH;AAMA,SACC,4BAAC,gBAAD,CAA2B,QAA3B;AACC,IAAA,KAAK,EAAG,EACP,GAAGU,YADI;AAEPI,MAAAA,OAAO,EAAE,CAAElB,eAFJ;AAGPmB,MAAAA,cAAc,EAAE,IAHT;AAIPhB,MAAAA;AAJO;AADT,KAQC,4BAAC,UAAD;AACC,kBAAaF;AADd,KAEMI,UAFN;AAGC,IAAA,GAAG,EAAG,2BAAc,CAAEC,YAAF,EAAgBR,YAAhB,CAAd,CAHP;AAIC,IAAA,IAAI,EAAC;AAJN,MAMGS,cANH,EAOC,4BAAC,mCAAD;AACC,IAAA,KAAK,EAAGO,YAAY,CAACC,KADtB;AAEC,IAAA,YAAY,EAAGT,YAFhB;AAGC,IAAA,cAAc,EAAGE,KAAK,CAACY,KAHxB;AAIC,IAAA,eAAe,EAAGpB;AAJnB,IAPD,EAaGD,QAbH,CARD,CADD;AA0BA;;AAEM,MAAMW,+BAA+B,GAAG,yBAC9Cb,0CAD8C,CAAxC","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMergeRefs,\n\tuseInstanceId,\n\tusePrevious,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { forwardRef, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlBackdrop from './toggle-group-control-backdrop';\nimport ToggleGroupControlContext from '../context';\nimport { useUpdateEffect } from '../../utils/hooks';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlMainControlProps } from '../types';\n\nfunction UnforwardedToggleGroupControlAsButtonGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst containerRef = useRef();\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\tconst baseId = useInstanceId(\n\t\tToggleGroupControlAsButtonGroup,\n\t\t'toggle-group-control-as-button-group'\n\t).toString();\n\tconst [ selectedValue, setSelectedValue ] = useState( value );\n\tconst groupContext = {\n\t\tbaseId,\n\t\tstate: selectedValue,\n\t\tsetState: setSelectedValue,\n\t};\n\tconst previousValue = usePrevious( value );\n\n\t// Propagate groupContext.state change.\n\tuseUpdateEffect( () => {\n\t\t// Avoid calling onChange if groupContext state changed\n\t\t// from incoming value.\n\t\tif ( previousValue !== groupContext.state ) {\n\t\t\tonChange( groupContext.state );\n\t\t}\n\t}, [ groupContext.state ] );\n\n\t// Sync incoming value with groupContext.state.\n\tuseUpdateEffect( () => {\n\t\tif ( value !== groupContext.state ) {\n\t\t\tgroupContext.setState( value );\n\t\t}\n\t}, [ value ] );\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider\n\t\t\tvalue={ {\n\t\t\t\t...groupContext,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tisDeselectable: true,\n\t\t\t\tsize,\n\t\t\t} }\n\t\t>\n\t\t\t<View\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t\trole=\"group\"\n\t\t\t>\n\t\t\t\t{ resizeListener }\n\t\t\t\t<ToggleGroupControlBackdrop\n\t\t\t\t\tstate={ groupContext.state }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\tcontainerWidth={ sizes.width }\n\t\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsButtonGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsButtonGroup\n);\n"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"names":["UnforwardedToggleGroupControlAsButtonGroup","children","isAdaptiveWidth","label","onChange","size","value","otherProps","forwardedRef","containerRef","resizeListener","sizes","baseId","ToggleGroupControlAsButtonGroup","toString","selectedValue","setSelectedValue","groupContext","state","setState","previousValue","isBlock","isDeselectable","width"],"mappings":";;;;;;;;;AAcA;;AANA;;AAWA;;AACA;;AACA;;AACA;;AAtBA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AAQA,SAASA,0CAAT,CACC;AACCC,EAAAA,QADD;AAECC,EAAAA,eAFD;AAGCC,EAAAA,KAHD;AAICC,EAAAA,QAJD;AAKCC,EAAAA,IALD;AAMCC,EAAAA,KAND;AAOC,KAAGC;AAPJ,CADD,EAcCC,YAdD,EAeE;AACD,QAAMC,YAAY,GAAG,sBAArB;AACA,QAAM,CAAEC,cAAF,EAAkBC,KAAlB,IAA4B,iCAAlC;AACA,QAAMC,MAAM,GAAG,4BACdC,+BADc,EAEd,sCAFc,EAGbC,QAHa,EAAf;AAIA,QAAM,CAAEC,aAAF,EAAiBC,gBAAjB,IAAsC,uBAAUV,KAAV,CAA5C;AACA,QAAMW,YAAY,GAAG;AACpBL,IAAAA,MADoB;AAEpBM,IAAAA,KAAK,EAAEH,aAFa;AAGpBI,IAAAA,QAAQ,EAAEH;AAHU,GAArB;AAKA,QAAMI,aAAa,GAAG,0BAAad,KAAb,CAAtB,CAbC,CAeD;;AACA,8BAAiB,MAAM;AACtB;AACA;AACA,QAAKc,aAAa,KAAKH,YAAY,CAACC,KAApC,EAA4C;AAC3Cd,MAAAA,QAAQ,CAAEa,YAAY,CAACC,KAAf,CAAR;AACA;AACD,GAND,EAMG,CAAED,YAAY,CAACC,KAAf,CANH,EAhBC,CAwBD;;AACA,8BAAiB,MAAM;AACtB,QAAKZ,KAAK,KAAKW,YAAY,CAACC,KAA5B,EAAoC;AACnCD,MAAAA,YAAY,CAACE,QAAb,CAAuBb,KAAvB;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,CAJH;AAMA,SACC,4BAAC,gBAAD,CAA2B,QAA3B;AACC,IAAA,KAAK,EAAG,EACP,GAAGW,YADI;AAEPI,MAAAA,OAAO,EAAE,CAAEnB,eAFJ;AAGPoB,MAAAA,cAAc,EAAE,IAHT;AAIPjB,MAAAA;AAJO;AADT,KAQC,4BAAC,UAAD;AACC,kBAAaF,KADd;AAAA,OAEMI,UAFN;AAGC,IAAA,GAAG,EAAG,2BAAc,CAAEE,YAAF,EAAgBD,YAAhB,CAAd,CAHP;AAIC,IAAA,IAAI,EAAC;AAJN,KAMGE,cANH,EAOC,4BAAC,mCAAD;AACC,IAAA,KAAK,EAAGO,YAAY,CAACC,KADtB;AAEC,IAAA,YAAY,EAAGT,YAFhB;AAGC,IAAA,cAAc,EAAGE,KAAK,CAACY,KAHxB;AAIC,IAAA,eAAe,EAAGrB;AAJnB,IAPD,EAaGD,QAbH,CARD,CADD;AA0BA;;AAEM,MAAMY,+BAA+B,GAAG,yBAC9Cb,0CAD8C,CAAxC","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMergeRefs,\n\tuseInstanceId,\n\tusePrevious,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { forwardRef, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlBackdrop from './toggle-group-control-backdrop';\nimport ToggleGroupControlContext from '../context';\nimport { useUpdateEffect } from '../../utils/hooks';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlMainControlProps } from '../types';\n\nfunction UnforwardedToggleGroupControlAsButtonGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst containerRef = useRef();\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\tconst baseId = useInstanceId(\n\t\tToggleGroupControlAsButtonGroup,\n\t\t'toggle-group-control-as-button-group'\n\t).toString();\n\tconst [ selectedValue, setSelectedValue ] = useState( value );\n\tconst groupContext = {\n\t\tbaseId,\n\t\tstate: selectedValue,\n\t\tsetState: setSelectedValue,\n\t};\n\tconst previousValue = usePrevious( value );\n\n\t// Propagate groupContext.state change.\n\tuseUpdateEffect( () => {\n\t\t// Avoid calling onChange if groupContext state changed\n\t\t// from incoming value.\n\t\tif ( previousValue !== groupContext.state ) {\n\t\t\tonChange( groupContext.state );\n\t\t}\n\t}, [ groupContext.state ] );\n\n\t// Sync incoming value with groupContext.state.\n\tuseUpdateEffect( () => {\n\t\tif ( value !== groupContext.state ) {\n\t\t\tgroupContext.setState( value );\n\t\t}\n\t}, [ value ] );\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider\n\t\t\tvalue={ {\n\t\t\t\t...groupContext,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tisDeselectable: true,\n\t\t\t\tsize,\n\t\t\t} }\n\t\t>\n\t\t\t<View\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t\trole=\"group\"\n\t\t\t>\n\t\t\t\t{ resizeListener }\n\t\t\t\t<ToggleGroupControlBackdrop\n\t\t\t\t\tstate={ groupContext.state }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\tcontainerWidth={ sizes.width }\n\t\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsButtonGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsButtonGroup\n);\n"]}

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

@@ -9,8 +9,6 @@ exports.ToggleGroupControlAsRadioGroup = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _reakit = require("reakit");
 
 var _compose = require("@wordpress/compose");
@@ -35,16 +33,15 @@ var _hooks = require("../../utils/hooks");
 /**
  * Internal dependencies
  */
-function UnforwardedToggleGroupControlAsRadioGroup(_ref, forwardedRef) {
-  let {
-    children,
-    isAdaptiveWidth,
-    label,
-    onChange,
-    size,
-    value,
-    ...otherProps
-  } = _ref;
+function UnforwardedToggleGroupControlAsRadioGroup({
+  children,
+  isAdaptiveWidth,
+  label,
+  onChange,
+  size,
+  value,
+  ...otherProps
+}, forwardedRef) {
   const containerRef = (0, _element.useRef)();
   const [resizeListener, sizes] = (0, _compose.useResizeObserver)();
   const baseId = (0, _compose.useInstanceId)(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group').toString();
@@ -72,12 +69,12 @@ function UnforwardedToggleGroupControlAsRadioGroup(_ref, forwardedRef) {
       isBlock: !isAdaptiveWidth,
       size
     }
-  }, (0, _element.createElement)(_reakit.RadioGroup, (0, _extends2.default)({}, radio, {
+  }, (0, _element.createElement)(_reakit.RadioGroup, { ...radio,
     "aria-label": label,
-    as: _view.View
-  }, otherProps, {
+    as: _view.View,
+    ...otherProps,
     ref: (0, _compose.useMergeRefs)([containerRef, forwardedRef])
-  }), resizeListener, (0, _element.createElement)(_toggleGroupControlBackdrop.default, {
+  }, resizeListener, (0, _element.createElement)(_toggleGroupControlBackdrop.default, {
     state: radio.state,
     containerRef: containerRef,
     containerWidth: sizes.width,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"names":["UnforwardedToggleGroupControlAsRadioGroup","forwardedRef","children","isAdaptiveWidth","label","onChange","size","value","otherProps","containerRef","resizeListener","sizes","baseId","ToggleGroupControlAsRadioGroup","toString","radio","state","previousValue","setState","isBlock","View","width"],"mappings":";;;;;;;;;AAgBA;;;;AAXA;;AAKA;;AAWA;;AACA;;AACA;;AACA;;AAxBA;AACA;AACA;AAEA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AAQA,SAASA,yCAAT,OAcCC,YAdD,EAeE;AAAA,MAdD;AACCC,IAAAA,QADD;AAECC,IAAAA,eAFD;AAGCC,IAAAA,KAHD;AAICC,IAAAA,QAJD;AAKCC,IAAAA,IALD;AAMCC,IAAAA,KAND;AAOC,OAAGC;AAPJ,GAcC;AACD,QAAMC,YAAY,GAAG,sBAArB;AACA,QAAM,CAAEC,cAAF,EAAkBC,KAAlB,IAA4B,iCAAlC;AACA,QAAMC,MAAM,GAAG,4BACdC,8BADc,EAEd,qCAFc,EAGbC,QAHa,EAAf;AAIA,QAAMC,KAAK,GAAG,2BAAe;AAC5BH,IAAAA,MAD4B;AAE5BI,IAAAA,KAAK,EAAET;AAFqB,GAAf,CAAd;AAIA,QAAMU,aAAa,GAAG,0BAAaV,KAAb,CAAtB,CAXC,CAaD;;AACA,8BAAiB,MAAM;AACtB;AACA;AACA,QAAKU,aAAa,KAAKF,KAAK,CAACC,KAA7B,EAAqC;AACpCX,MAAAA,QAAQ,CAAEU,KAAK,CAACC,KAAR,CAAR;AACA;AACD,GAND,EAMG,CAAED,KAAK,CAACC,KAAR,CANH,EAdC,CAsBD;;AACA,8BAAiB,MAAM;AACtB,QAAKT,KAAK,KAAKQ,KAAK,CAACC,KAArB,EAA6B;AAC5BD,MAAAA,KAAK,CAACG,QAAN,CAAgBX,KAAhB;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,CAJH;AAMA,SACC,4BAAC,gBAAD,CAA2B,QAA3B;AACC,IAAA,KAAK,EAAG,EAAE,GAAGQ,KAAL;AAAYI,MAAAA,OAAO,EAAE,CAAEhB,eAAvB;AAAwCG,MAAAA;AAAxC;AADT,KAGC,4BAAC,kBAAD,6BACMS,KADN;AAEC,kBAAaX,KAFd;AAGC,IAAA,EAAE,EAAGgB;AAHN,KAIMZ,UAJN;AAKC,IAAA,GAAG,EAAG,2BAAc,CAAEC,YAAF,EAAgBR,YAAhB,CAAd;AALP,MAOGS,cAPH,EAQC,4BAAC,mCAAD;AACC,IAAA,KAAK,EAAGK,KAAK,CAACC,KADf;AAEC,IAAA,YAAY,EAAGP,YAFhB;AAGC,IAAA,cAAc,EAAGE,KAAK,CAACU,KAHxB;AAIC,IAAA,eAAe,EAAGlB;AAJnB,IARD,EAcGD,QAdH,CAHD,CADD;AAsBA;;AAEM,MAAMW,8BAA8B,GAAG,yBAC7Cb,yCAD6C,CAAvC","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { RadioGroup, useRadioState } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMergeRefs,\n\tuseInstanceId,\n\tusePrevious,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlBackdrop from './toggle-group-control-backdrop';\nimport ToggleGroupControlContext from '../context';\nimport { useUpdateEffect } from '../../utils/hooks';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlMainControlProps } from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst containerRef = useRef();\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\tconst baseId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t).toString();\n\tconst radio = useRadioState( {\n\t\tbaseId,\n\t\tstate: value,\n\t} );\n\tconst previousValue = usePrevious( value );\n\n\t// Propagate radio.state change.\n\tuseUpdateEffect( () => {\n\t\t// Avoid calling onChange if radio state changed\n\t\t// from incoming value.\n\t\tif ( previousValue !== radio.state ) {\n\t\t\tonChange( radio.state );\n\t\t}\n\t}, [ radio.state ] );\n\n\t// Sync incoming value with radio.state.\n\tuseUpdateEffect( () => {\n\t\tif ( value !== radio.state ) {\n\t\t\tradio.setState( value );\n\t\t}\n\t}, [ value ] );\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider\n\t\t\tvalue={ { ...radio, isBlock: ! isAdaptiveWidth, size } }\n\t\t>\n\t\t\t<RadioGroup\n\t\t\t\t{ ...radio }\n\t\t\t\taria-label={ label }\n\t\t\t\tas={ View }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t>\n\t\t\t\t{ resizeListener }\n\t\t\t\t<ToggleGroupControlBackdrop\n\t\t\t\t\tstate={ radio.state }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\tcontainerWidth={ sizes.width }\n\t\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"names":["UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","size","value","otherProps","forwardedRef","containerRef","resizeListener","sizes","baseId","ToggleGroupControlAsRadioGroup","toString","radio","state","previousValue","setState","isBlock","View","width"],"mappings":";;;;;;;;;AAgBA;;AAXA;;AAKA;;AAWA;;AACA;;AACA;;AACA;;AAxBA;AACA;AACA;AAEA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AAQA,SAASA,yCAAT,CACC;AACCC,EAAAA,QADD;AAECC,EAAAA,eAFD;AAGCC,EAAAA,KAHD;AAICC,EAAAA,QAJD;AAKCC,EAAAA,IALD;AAMCC,EAAAA,KAND;AAOC,KAAGC;AAPJ,CADD,EAcCC,YAdD,EAeE;AACD,QAAMC,YAAY,GAAG,sBAArB;AACA,QAAM,CAAEC,cAAF,EAAkBC,KAAlB,IAA4B,iCAAlC;AACA,QAAMC,MAAM,GAAG,4BACdC,8BADc,EAEd,qCAFc,EAGbC,QAHa,EAAf;AAIA,QAAMC,KAAK,GAAG,2BAAe;AAC5BH,IAAAA,MAD4B;AAE5BI,IAAAA,KAAK,EAAEV;AAFqB,GAAf,CAAd;AAIA,QAAMW,aAAa,GAAG,0BAAaX,KAAb,CAAtB,CAXC,CAaD;;AACA,8BAAiB,MAAM;AACtB;AACA;AACA,QAAKW,aAAa,KAAKF,KAAK,CAACC,KAA7B,EAAqC;AACpCZ,MAAAA,QAAQ,CAAEW,KAAK,CAACC,KAAR,CAAR;AACA;AACD,GAND,EAMG,CAAED,KAAK,CAACC,KAAR,CANH,EAdC,CAsBD;;AACA,8BAAiB,MAAM;AACtB,QAAKV,KAAK,KAAKS,KAAK,CAACC,KAArB,EAA6B;AAC5BD,MAAAA,KAAK,CAACG,QAAN,CAAgBZ,KAAhB;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,CAJH;AAMA,SACC,4BAAC,gBAAD,CAA2B,QAA3B;AACC,IAAA,KAAK,EAAG,EAAE,GAAGS,KAAL;AAAYI,MAAAA,OAAO,EAAE,CAAEjB,eAAvB;AAAwCG,MAAAA;AAAxC;AADT,KAGC,4BAAC,kBAAD,OACMU,KADN;AAEC,kBAAaZ,KAFd;AAGC,IAAA,EAAE,EAAGiB,UAHN;AAAA,OAIMb,UAJN;AAKC,IAAA,GAAG,EAAG,2BAAc,CAAEE,YAAF,EAAgBD,YAAhB,CAAd;AALP,KAOGE,cAPH,EAQC,4BAAC,mCAAD;AACC,IAAA,KAAK,EAAGK,KAAK,CAACC,KADf;AAEC,IAAA,YAAY,EAAGP,YAFhB;AAGC,IAAA,cAAc,EAAGE,KAAK,CAACU,KAHxB;AAIC,IAAA,eAAe,EAAGnB;AAJnB,IARD,EAcGD,QAdH,CAHD,CADD;AAsBA;;AAEM,MAAMY,8BAA8B,GAAG,yBAC7Cb,yCAD6C,CAAvC","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { RadioGroup, useRadioState } from 'reakit';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMergeRefs,\n\tuseInstanceId,\n\tusePrevious,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport ToggleGroupControlBackdrop from './toggle-group-control-backdrop';\nimport ToggleGroupControlContext from '../context';\nimport { useUpdateEffect } from '../../utils/hooks';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlMainControlProps } from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst containerRef = useRef();\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\tconst baseId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t).toString();\n\tconst radio = useRadioState( {\n\t\tbaseId,\n\t\tstate: value,\n\t} );\n\tconst previousValue = usePrevious( value );\n\n\t// Propagate radio.state change.\n\tuseUpdateEffect( () => {\n\t\t// Avoid calling onChange if radio state changed\n\t\t// from incoming value.\n\t\tif ( previousValue !== radio.state ) {\n\t\t\tonChange( radio.state );\n\t\t}\n\t}, [ radio.state ] );\n\n\t// Sync incoming value with radio.state.\n\tuseUpdateEffect( () => {\n\t\tif ( value !== radio.state ) {\n\t\t\tradio.setState( value );\n\t\t}\n\t}, [ value ] );\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider\n\t\t\tvalue={ { ...radio, isBlock: ! isAdaptiveWidth, size } }\n\t\t>\n\t\t\t<RadioGroup\n\t\t\t\t{ ...radio }\n\t\t\t\taria-label={ label }\n\t\t\t\tas={ View }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t>\n\t\t\t\t{ resizeListener }\n\t\t\t\t<ToggleGroupControlBackdrop\n\t\t\t\t\tstate={ radio.state }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\tcontainerWidth={ sizes.width }\n\t\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"]}

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

@@ -9,8 +9,6 @@ exports.default = exports.ToggleGroupControl = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../../ui/context");
 
 var _hooks = require("../../utils/hooks");
@@ -66,7 +64,7 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
   return (0, _element.createElement)(_baseControl.default, {
     help: help,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom
-  }, !hideLabelFromVision && (0, _element.createElement)(styles.VisualLabelWrapper, null, (0, _element.createElement)(_baseControl.default.VisualLabel, null, label)), (0, _element.createElement)(MainControl, (0, _extends2.default)({}, otherProps, {
+  }, !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,
@@ -75,7 +73,7 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     ref: forwardedRef,
     size: size,
     value: value
-  })));
+  }));
 }
 /**
  * `ToggleGroupControl` is a form component that lets users choose options

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"names":["noop","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","cx","classes","styles","ToggleGroupControl","block","MainControl","ToggleGroupControlAsButtonGroup","ToggleGroupControlAsRadioGroup"],"mappings":";;;;;;;;;AAQA;;;;AAKA;;AAKA;;AACA;;AAEA;;AAEA;;AACA;;;;;;AAxBA;AACA;AACA;;AAEA;AACA;AACA;;AAIA;AACA;AACA;AAcA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,6BAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,uBAAuB,GAAG,KADrB;AAELC,IAAAA,SAFK;AAGLC,IAAAA,eAAe,GAAG,KAHb;AAILC,IAAAA,OAAO,GAAG,KAJL;AAKLC,IAAAA,cAAc,GAAG,KALZ;AAMLC,IAAAA,KANK;AAOLC,IAAAA,mBAAmB,GAAG,KAPjB;AAQLC,IAAAA,IARK;AASLC,IAAAA,QAAQ,GAAGZ,IATN;AAULa,IAAAA,IAAI,GAAG,SAVF;AAWLC,IAAAA,KAXK;AAYLC,IAAAA,QAZK;AAaL,OAAGC;AAbE,MAcF,+BAAkBd,KAAlB,EAAyB,oBAAzB,CAdJ;AAeA,QAAMe,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBACf,MACCD,EAAE,CACDE,MAAM,CAACC,kBAAP,CAA2B;AAAEb,IAAAA,OAAF;AAAWC,IAAAA,cAAX;AAA2BK,IAAAA;AAA3B,GAA3B,CADC,EAEDN,OAAO,IAAIY,MAAM,CAACE,KAFjB,EAGDhB,SAHC,CAFY,EAOf,CAAEA,SAAF,EAAaY,EAAb,EAAiBV,OAAjB,EAA0BC,cAA1B,EAA0CK,IAA1C,CAPe,CAAhB;AAUA,QAAMS,WAAW,GAAGd,cAAc,GAC/Be,8CAD+B,GAE/BC,4CAFH;AAIA,SACC,4BAAC,oBAAD;AACC,IAAA,IAAI,EAAGb,IADR;AAEC,IAAA,uBAAuB,EAAGP;AAF3B,KAIG,CAAEM,mBAAF,IACD,4BAAC,yBAAD,QACC,4BAAC,oBAAD,CAAa,WAAb,QAA2BD,KAA3B,CADD,CALF,EASC,4BAAC,WAAD,6BACMO,UADN;AAEC,IAAA,QAAQ,EAAGD,QAFZ;AAGC,IAAA,SAAS,EAAGG,OAHb;AAIC,IAAA,eAAe,EAAGZ,eAJnB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGG,QANZ;AAOC,IAAA,GAAG,EAAGT,YAPP;AAQC,IAAA,IAAI,EAAGU,IARR;AASC,IAAA,KAAK,EAAGC;AATT,KATD,CADD;AAuBA;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;;;AACO,MAAMM,kBAAkB,GAAG,6BACjCnB,6BADiC,EAEjC,oBAFiC,CAA3B;;eAKQmB,kB","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 {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} 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"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"names":["noop","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","cx","classes","styles","ToggleGroupControl","block","MainControl","ToggleGroupControlAsButtonGroup","ToggleGroupControlAsRadioGroup"],"mappings":";;;;;;;;;AAQA;;AAKA;;AAKA;;AACA;;AAEA;;AAEA;;AACA;;;;;;AAxBA;AACA;AACA;;AAEA;AACA;AACA;;AAIA;AACA;AACA;AAcA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,6BAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,uBAAuB,GAAG,KADrB;AAELC,IAAAA,SAFK;AAGLC,IAAAA,eAAe,GAAG,KAHb;AAILC,IAAAA,OAAO,GAAG,KAJL;AAKLC,IAAAA,cAAc,GAAG,KALZ;AAMLC,IAAAA,KANK;AAOLC,IAAAA,mBAAmB,GAAG,KAPjB;AAQLC,IAAAA,IARK;AASLC,IAAAA,QAAQ,GAAGZ,IATN;AAULa,IAAAA,IAAI,GAAG,SAVF;AAWLC,IAAAA,KAXK;AAYLC,IAAAA,QAZK;AAaL,OAAGC;AAbE,MAcF,+BAAkBd,KAAlB,EAAyB,oBAAzB,CAdJ;AAeA,QAAMe,EAAE,GAAG,mBAAX;AAEA,QAAMC,OAAO,GAAG,sBACf,MACCD,EAAE,CACDE,MAAM,CAACC,kBAAP,CAA2B;AAAEb,IAAAA,OAAF;AAAWC,IAAAA,cAAX;AAA2BK,IAAAA;AAA3B,GAA3B,CADC,EAEDN,OAAO,IAAIY,MAAM,CAACE,KAFjB,EAGDhB,SAHC,CAFY,EAOf,CAAEA,SAAF,EAAaY,EAAb,EAAiBV,OAAjB,EAA0BC,cAA1B,EAA0CK,IAA1C,CAPe,CAAhB;AAUA,QAAMS,WAAW,GAAGd,cAAc,GAC/Be,8CAD+B,GAE/BC,4CAFH;AAIA,SACC,4BAAC,oBAAD;AACC,IAAA,IAAI,EAAGb,IADR;AAEC,IAAA,uBAAuB,EAAGP;AAF3B,KAIG,CAAEM,mBAAF,IACD,4BAAC,yBAAD,QACC,4BAAC,oBAAD,CAAa,WAAb,QAA2BD,KAA3B,CADD,CALF,EASC,4BAAC,WAAD,OACMO,UADN;AAEC,IAAA,QAAQ,EAAGD,QAFZ;AAGC,IAAA,SAAS,EAAGG,OAHb;AAIC,IAAA,eAAe,EAAGZ,eAJnB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGG,QANZ;AAOC,IAAA,GAAG,EAAGT,YAPP;AAQC,IAAA,IAAI,EAAGU,IARR;AASC,IAAA,KAAK,EAAGC;AATT,IATD,CADD;AAuBA;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;;;AACO,MAAMM,kBAAkB,GAAG,6BACjCnB,6BADiC,EAEjC,oBAFiC,CAA3B;;eAKQmB,kB","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 {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} 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"]}

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

@@ -15,14 +15,11 @@ 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 = _ref => {
-  let {
-    isBlock,
-    isDeselectable,
-    size
-  } = _ref;
-  return /*#__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== */");
-};
+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;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/styles.ts"],"names":["ToggleGroupControl","isBlock","isDeselectable","size","css","COLORS","ui","background","CONFIG","controlBorderRadius","transitionDurationFastest","toggleGroupControlSize","enclosingBorders","enclosingBorder","border","borderHover","borderFocus","controlBoxShadowFocus","heights","default","block","BackdropView","gray","transitionDurationFast","VisualLabelWrapper"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;;;AAGO,MAAMA,kBAAkB,GAAG;AAAA,MAAE;AACnCC,IAAAA,OADmC;AAEnCC,IAAAA,cAFmC;AAGnCC,IAAAA;AAHmC,GAAF;AAAA,0BAM3BC,UAN2B,iBAOlBC,cAAOC,EAAP,CAAUC,UAPQ,kDASfC,cAAOC,mBATQ,0FAcRD,cAAOE,yBAdC,cAe9B,yBAAc,YAAd,CAf8B,OAiB9BC,sBAAsB,CAAER,IAAF,CAjBQ,OAkB9B,CAAED,cAAF,IAAoBU,gBAAgB,CAAEX,OAAF,CAlBN;AAAA,CAA3B;;;;AAqBP,MAAMW,gBAAgB,GAAKX,OAAF,IAAqD;AAC7E,QAAMY,eAAe,oBAAGT,UAAH,mBACHC,cAAOC,EAAP,CAAUQ,MADP,iuHAArB;AAIA,0BAAOV,UAAP,EACIH,OAAO,IAAIY,eADf,4BAImBR,cAAOC,EAAP,CAAUS,WAJ7B,oCAQmBV,cAAOC,EAAP,CAAUU,WAR7B,kBASiBR,cAAOS,qBATxB;AAgBA,CArBD;;AAuBO,MAAMN,sBAAsB,GAClCR,IADqC,IAEjC;AACJ,QAAMe,OAAO,GAAG;AACfC,IAAAA,OAAO,EAAE,MADM;AAEf,wBAAoB;AAFL,GAAhB;AAKA,0BAAOf,UAAP,iBACgBc,OAAO,CAAEf,IAAF,CADvB;AAGA,CAXM;;;AAaA,MAAMiB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX;;AAKA,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,kBACThB,cAAOiB,IAAP,CAAa,GAAb,CADS,qBAENd,cAAOC,mBAFD,wEAOCD,cAAOe,sBAPR,YAQrB,yBAAc,YAAd,CARqB,qtHAAlB;;AAeA,MAAMC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAxB","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"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/styles.ts"],"names":["ToggleGroupControl","isBlock","isDeselectable","size","css","COLORS","ui","background","CONFIG","controlBorderRadius","transitionDurationFastest","toggleGroupControlSize","enclosingBorders","enclosingBorder","border","borderHover","borderFocus","controlBoxShadowFocus","heights","default","block","BackdropView","gray","transitionDurationFast","VisualLabelWrapper"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;;;AAGO,MAAMA,kBAAkB,GAAG,CAAE;AACnCC,EAAAA,OADmC;AAEnCC,EAAAA,cAFmC;AAGnCC,EAAAA;AAHmC,CAAF,sBAM3BC,UAN2B,iBAOlBC,cAAOC,EAAP,CAAUC,UAPQ,kDASfC,cAAOC,mBATQ,0FAcRD,cAAOE,yBAdC,cAe9B,yBAAc,YAAd,CAf8B,OAiB9BC,sBAAsB,CAAER,IAAF,CAjBQ,OAkB9B,CAAED,cAAF,IAAoBU,gBAAgB,CAAEX,OAAF,CAlBN,ouHAA3B;;;;AAqBP,MAAMW,gBAAgB,GAAKX,OAAF,IAAqD;AAC7E,QAAMY,eAAe,oBAAGT,UAAH,mBACHC,cAAOC,EAAP,CAAUQ,MADP,iuHAArB;AAIA,0BAAOV,UAAP,EACIH,OAAO,IAAIY,eADf,4BAImBR,cAAOC,EAAP,CAAUS,WAJ7B,oCAQmBV,cAAOC,EAAP,CAAUU,WAR7B,kBASiBR,cAAOS,qBATxB;AAgBA,CArBD;;AAuBO,MAAMN,sBAAsB,GAClCR,IADqC,IAEjC;AACJ,QAAMe,OAAO,GAAG;AACfC,IAAAA,OAAO,EAAE,MADM;AAEf,wBAAoB;AAFL,GAAhB;AAKA,0BAAOf,UAAP,iBACgBc,OAAO,CAAEf,IAAF,CADvB;AAGA,CAXM;;;AAaA,MAAMiB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAX;;AAKA,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,kBACThB,cAAOiB,IAAP,CAAa,GAAb,CADS,qBAENd,cAAOC,mBAFD,wEAOCD,cAAOe,sBAPR,YAQrB,yBAAc,YAAd,CARqB,qtHAAlB;;AAeA,MAAMC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAxB","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"]}

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

@@ -12,19 +12,18 @@ var _styles = require("./styles");
 /**
  * WordPress dependencies
  */
-function ToggleGroupControlBackdrop(_ref) {
-  let {
-    containerRef,
-    containerWidth,
-    isAdaptiveWidth,
-    state
-  } = _ref;
+function ToggleGroupControlBackdrop({
+  containerRef,
+  containerWidth,
+  isAdaptiveWidth,
+  state
+}) {
   const [left, setLeft] = (0, _element.useState)(0);
   const [width, setWidth] = (0, _element.useState)(0);
   const [canAnimate, setCanAnimate] = (0, _element.useState)(false);
   const [renderBackdrop, setRenderBackdrop] = (0, _element.useState)(false);
   (0, _element.useEffect)(() => {
-    const containerNode = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+    const containerNode = containerRef?.current;
     if (!containerNode) return;
     /**
      * Workaround for Reakit

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx"],"names":["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":";;;;;;;AAGA;;AAMA;;AATA;AACA;AACA;AASA,SAASA,0BAAT,OAKqC;AAAA,MALA;AACpCC,IAAAA,YADoC;AAEpCC,IAAAA,cAFoC;AAGpCC,IAAAA,eAHoC;AAIpCC,IAAAA;AAJoC,GAKA;AACpC,QAAM,CAAEC,IAAF,EAAQC,OAAR,IAAoB,uBAAU,CAAV,CAA1B;AACA,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB,uBAAU,CAAV,CAA5B;AACA,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAU,KAAV,CAAtC;AACA,QAAM,CAAEC,cAAF,EAAkBC,iBAAlB,IAAwC,uBAAU,KAAV,CAA9C;AAEA,0BAAW,MAAM;AAChB,UAAMC,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;AAAEV,QAAAA,KAAK,EAAEW,WAAT;AAAsBC,QAAAA;AAAtB,UACLJ,UAAU,CAACK,qBAAX,EADD;AAGA,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,KAXD,CAfgB,CA2BhB;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,GA3CD,EA2CG,CAAElB,UAAF,EAAcR,YAAd,EAA4BC,cAA5B,EAA4CE,KAA5C,EAAmDD,eAAnD,CA3CH;;AA6CA,MAAK,CAAEQ,cAAP,EAAwB;AACvB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,oBAAD;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;;eAEc,mBAAMP,0BAAN,C","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 { width: offsetWidth, x } =\n\t\t\t\ttargetNode.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"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx"],"names":["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":";;;;;;;AAGA;;AAMA;;AATA;AACA;AACA;AASA,SAASA,0BAAT,CAAqC;AACpCC,EAAAA,YADoC;AAEpCC,EAAAA,cAFoC;AAGpCC,EAAAA,eAHoC;AAIpCC,EAAAA;AAJoC,CAArC,EAKqC;AACpC,QAAM,CAAEC,IAAF,EAAQC,OAAR,IAAoB,uBAAU,CAAV,CAA1B;AACA,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB,uBAAU,CAAV,CAA5B;AACA,QAAM,CAAEC,UAAF,EAAcC,aAAd,IAAgC,uBAAU,KAAV,CAAtC;AACA,QAAM,CAAEC,cAAF,EAAkBC,iBAAlB,IAAwC,uBAAU,KAAV,CAA9C;AAEA,0BAAW,MAAM;AAChB,UAAMC,aAAa,GAAGZ,YAAY,EAAEa,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;AAAEV,QAAAA,KAAK,EAAEW,WAAT;AAAsBC,QAAAA;AAAtB,UACLJ,UAAU,CAACK,qBAAX,EADD;AAGA,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,KAXD,CAfgB,CA2BhB;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,GA3CD,EA2CG,CAAElB,UAAF,EAAcR,YAAd,EAA4BC,cAA5B,EAA4CE,KAA5C,EAAmDD,eAAnD,CA3CH;;AA6CA,MAAK,CAAEQ,cAAP,EAAwB;AACvB,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,oBAAD;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;;eAEc,mBAAMP,0BAAN,C","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 { width: offsetWidth, x } =\n\t\t\t\ttargetNode.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/toggle-group-control/toggle-group-control-option/component.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.default = exports.ToggleGroupControlOption = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _toggleGroupControlOptionBase = require("../toggle-group-control-option-base");
 
 /**
@@ -26,10 +22,10 @@ function UnforwardedToggleGroupControlOption(props, ref) {
     ...restProps
   } = props;
   const optionLabel = restProps['aria-label'] || label;
-  return (0, _element.createElement)(_toggleGroupControlOptionBase.ToggleGroupControlOptionBase, (0, _extends2.default)({}, restProps, {
+  return (0, _element.createElement)(_toggleGroupControlOptionBase.ToggleGroupControlOptionBase, { ...restProps,
     "aria-label": optionLabel,
     ref: ref
-  }), label);
+  }, label);
 }
 /**
  * `ToggleGroupControlOption` is a form component and is meant to be used as a

package/build/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":["UnforwardedToggleGroupControlOption","props","ref","label","restProps","optionLabel","ToggleGroupControlOption"],"mappings":";;;;;;;;;AAQA;;;;AAOA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;AAUA,SAASA,mCAAT,CACCC,KADD,EAMCC,GAND,EAOE;AACD,QAAM;AAAEC,IAAAA,KAAF;AAAS,OAAGC;AAAZ,MAA0BH,KAAhC;AACA,QAAMI,WAAW,GAAGD,SAAS,CAAE,YAAF,CAAT,IAA6BD,KAAjD;AACA,SACC,4BAAC,0DAAD,6BACMC,SADN;AAEC,kBAAaC,WAFd;AAGC,IAAA,GAAG,EAAGH;AAHP,MAKGC,KALH,CADD;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMG,wBAAwB,GAAG,yBACvCN,mCADuC,CAAjC;;eAIQM,wB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlOptionProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\n\nfunction UnforwardedToggleGroupControlOption(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\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\tref={ ref }\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 * ```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 ToggleGroupControlOption = forwardRef(\n\tUnforwardedToggleGroupControlOption\n);\n\nexport default ToggleGroupControlOption;\n"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option/component.tsx"],"names":["UnforwardedToggleGroupControlOption","props","ref","label","restProps","optionLabel","ToggleGroupControlOption"],"mappings":";;;;;;;AAQA;;AAOA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;AAUA,SAASA,mCAAT,CACCC,KADD,EAMCC,GAND,EAOE;AACD,QAAM;AAAEC,IAAAA,KAAF;AAAS,OAAGC;AAAZ,MAA0BH,KAAhC;AACA,QAAMI,WAAW,GAAGD,SAAS,CAAE,YAAF,CAAT,IAA6BD,KAAjD;AACA,SACC,4BAAC,0DAAD,OACMC,SADN;AAEC,kBAAaC,WAFd;AAGC,IAAA,GAAG,EAAGH;AAHP,KAKGC,KALH,CADD;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMG,wBAAwB,GAAG,yBACvCN,mCADuC,CAAjC;;eAIQM,wB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type { ToggleGroupControlOptionProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\n\nfunction UnforwardedToggleGroupControlOption(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\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\tref={ ref }\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 * ```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 ToggleGroupControlOption = forwardRef(\n\tUnforwardedToggleGroupControlOption\n);\n\nexport default ToggleGroupControlOption;\n"]}

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

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _reakit = require("reakit");
 
 var _compose = require("@wordpress/compose");
@@ -46,13 +44,11 @@ const {
   LabelView
 } = styles;
 
-const WithToolTip = _ref => {
-  let {
-    showTooltip,
-    text,
-    children
-  } = _ref;
-
+const WithToolTip = ({
+  showTooltip,
+  text,
+  children
+}) => {
   if (showTooltip && text) {
     return (0, _element.createElement)(_tooltip.default, {
       text: text,
@@ -113,16 +109,17 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
   }, (0, _element.createElement)(WithToolTip, {
     showTooltip: showTooltip,
     text: otherButtonProps['aria-label']
-  }, isDeselectable ? (0, _element.createElement)("button", (0, _extends2.default)({}, commonProps, {
+  }, isDeselectable ? (0, _element.createElement)("button", { ...commonProps,
     "aria-pressed": isPressed,
     type: "button",
     onClick: buttonOnClick
-  }), (0, _element.createElement)(ButtonContentView, null, children)) : (0, _element.createElement)(_reakit.Radio, (0, _extends2.default)({}, commonProps, otherContextProps
-  /* these are only for Ariakit Radio */
-  , {
+  }, (0, _element.createElement)(ButtonContentView, null, children)) : (0, _element.createElement)(_reakit.Radio, { ...commonProps,
+    ...otherContextProps
+    /* these are only for Ariakit Radio */
+    ,
     as: "button",
     value: value
-  }), (0, _element.createElement)(ButtonContentView, null, children))));
+  }, (0, _element.createElement)(ButtonContentView, null, children))));
 }
 /**
  * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"names":["ButtonContentView","LabelView","styles","WithToolTip","showTooltip","text","children","ToggleGroupControlOptionBase","props","forwardedRef","toggleGroupControlContext","id","baseId","buttonProps","isBlock","isDeselectable","size","otherContextProps","className","isIcon","value","otherButtonProps","isPressed","state","cx","labelViewClasses","labelBlock","classes","buttonView","buttonOnClick","setState","undefined","commonProps","ref","ConnectedToggleGroupControlOptionBase"],"mappings":"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","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\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"]}
+{"version":3,"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"names":["ButtonContentView","LabelView","styles","WithToolTip","showTooltip","text","children","ToggleGroupControlOptionBase","props","forwardedRef","toggleGroupControlContext","id","baseId","buttonProps","isBlock","isDeselectable","size","otherContextProps","className","isIcon","value","otherButtonProps","isPressed","state","cx","labelViewClasses","labelBlock","classes","buttonView","buttonOnClick","setState","undefined","commonProps","ref","ConnectedToggleGroupControlOptionBase"],"mappings":"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","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\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"]}