@wordpress/components 27.5.0 → 28.0.0

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

@@ -1 +1 @@
-{"version":3,"names":["css","forwardRef","useInstanceId","FlexBlock","FormToggle","BaseControl","HStack","useCx","space","ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","ref","onChangeToggle","event","target","instanceId","id","cx","classes","marginBottom","process","env","NODE_ENV","describedBy","helpLabel","undefined","createElement","justify","spacing","as","htmlFor"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\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 '../context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../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{\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tchecked,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\tdisabled,\n\t}: WordPressComponentProps< ToggleControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\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\tref={ ref }\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 forwardRef( ToggleControl );\n"],"mappings":";AAAA;AACA;AACA;;AAEA,SAASA,GAAG,QAAQ,gBAAgB;;AAEpC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,SAASC,SAAS,QAAQ,SAAS;AACnC,OAAOC,UAAU,MAAM,gBAAgB;AACvC,OAAOC,WAAW,MAAM,iBAAiB;AAGzC,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,KAAK,QAAQ,gBAAgB;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAC5B;EACCC,uBAAuB;EACvBC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC;AAC8D,CAAC,EAChEC,GAAqC,EACpC;EACD,SAASC,cAAcA,CAAEC,KAAsC,EAAG;IACjEJ,QAAQ,CAAEI,KAAK,CAACC,MAAM,CAACR,OAAQ,CAAC;EACjC;EACA,MAAMS,UAAU,GAAGnB,aAAa,CAAEO,aAAc,CAAC;EACjD,MAAMa,EAAE,GAAI,4BAA4BD,UAAY,EAAC;EAErD,MAAME,EAAE,GAAGhB,KAAK,CAAC,CAAC;EAClB,MAAMiB,OAAO,GAAGD,EAAE,CACjB,2BAA2B,EAC3BT,SAAS,EACT,CAAEJ,uBAAuB,iBAAIV,GAAG,CAAE;IAAEyB,YAAY,EAAEjB,KAAK,CAAE,CAAE;EAAE,CAAC,EAAAkB,OAAA,CAAAC,GAAA,CAAAC,QAAA,4CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,0yIAAC,CAChE,CAAC;EAED,IAAIC,WAAW,EAAEC,SAAS;EAC1B,IAAKjB,IAAI,EAAG;IACX,IAAK,OAAOA,IAAI,KAAK,UAAU,EAAG;MACjC;MACA;MACA;MACA,IAAKD,OAAO,KAAKmB,SAAS,EAAG;QAC5BD,SAAS,GAAGjB,IAAI,CAAED,OAAQ,CAAC;MAC5B;IACD,CAAC,MAAM;MACNkB,SAAS,GAAGjB,IAAI;IACjB;IACA,IAAKiB,SAAS,EAAG;MAChBD,WAAW,GAAGP,EAAE,GAAG,QAAQ;IAC5B;EACD;EAEA,OACCU,aAAA,CAAC3B,WAAW;IACXiB,EAAE,EAAGA,EAAI;IACTT,IAAI,EAAGiB,SAAW;IAClBhB,SAAS,EAAGU,OAAS;IACrBd,uBAAuB;EAAA,GAEvBsB,aAAA,CAAC1B,MAAM;IAAC2B,OAAO,EAAC,YAAY;IAACC,OAAO,EAAG;EAAG,GACzCF,aAAA,CAAC5B,UAAU;IACVkB,EAAE,EAAGA,EAAI;IACTV,OAAO,EAAGA,OAAS;IACnBG,QAAQ,EAAGG,cAAgB;IAC3B,oBAAmBW,WAAa;IAChCb,QAAQ,EAAGA,QAAU;IACrBC,GAAG,EAAGA;EAAK,CACX,CAAC,EACFe,aAAA,CAAC7B,SAAS;IACTgC,EAAE,EAAC,OAAO;IACVC,OAAO,EAAGd,EAAI;IACdR,SAAS,EAAC;EAAkC,GAE1CH,KACQ,CACJ,CACI,CAAC;AAEhB;AAEA,eAAeV,UAAU,CAAEQ,aAAc,CAAC","ignoreList":[]}
+{"version":3,"names":["css","forwardRef","useInstanceId","FlexBlock","FormToggle","BaseControl","HStack","useCx","space","jsx","_jsx","jsxs","_jsxs","ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","ref","onChangeToggle","event","target","instanceId","id","cx","classes","marginBottom","process","env","NODE_ENV","describedBy","helpLabel","undefined","children","justify","spacing","as","htmlFor"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ChangeEvent, ForwardedRef } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\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 '../context/wordpress-component';\nimport type { ToggleControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { useCx } from '../utils';\nimport { space } from '../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{\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tchecked,\n\t\thelp,\n\t\tclassName,\n\t\tonChange,\n\t\tdisabled,\n\t}: WordPressComponentProps< ToggleControlProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\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\tref={ ref }\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 forwardRef( ToggleControl );\n"],"mappings":"AAAA;AACA;AACA;;AAEA,SAASA,GAAG,QAAQ,gBAAgB;;AAEpC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,SAASC,SAAS,QAAQ,SAAS;AACnC,OAAOC,UAAU,MAAM,gBAAgB;AACvC,OAAOC,WAAW,MAAM,iBAAiB;AAGzC,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,KAAK,QAAQ,gBAAgB;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAnBA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAoBA,OAAO,SAASC,aAAaA,CAC5B;EACCC,uBAAuB;EACvBC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC;AAC8D,CAAC,EAChEC,GAAqC,EACpC;EACD,SAASC,cAAcA,CAAEC,KAAsC,EAAG;IACjEJ,QAAQ,CAAEI,KAAK,CAACC,MAAM,CAACR,OAAQ,CAAC;EACjC;EACA,MAAMS,UAAU,GAAGvB,aAAa,CAAEW,aAAc,CAAC;EACjD,MAAMa,EAAE,GAAI,4BAA4BD,UAAY,EAAC;EAErD,MAAME,EAAE,GAAGpB,KAAK,CAAC,CAAC;EAClB,MAAMqB,OAAO,GAAGD,EAAE,CACjB,2BAA2B,EAC3BT,SAAS,EACT,CAAEJ,uBAAuB,iBAAId,GAAG,CAAE;IAAE6B,YAAY,EAAErB,KAAK,CAAE,CAAE;EAAE,CAAC,EAAAsB,OAAA,CAAAC,GAAA,CAAAC,QAAA,4CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,0yIAAC,CAChE,CAAC;EAED,IAAIC,WAAW,EAAEC,SAAS;EAC1B,IAAKjB,IAAI,EAAG;IACX,IAAK,OAAOA,IAAI,KAAK,UAAU,EAAG;MACjC;MACA;MACA;MACA,IAAKD,OAAO,KAAKmB,SAAS,EAAG;QAC5BD,SAAS,GAAGjB,IAAI,CAAED,OAAQ,CAAC;MAC5B;IACD,CAAC,MAAM;MACNkB,SAAS,GAAGjB,IAAI;IACjB;IACA,IAAKiB,SAAS,EAAG;MAChBD,WAAW,GAAGP,EAAE,GAAG,QAAQ;IAC5B;EACD;EAEA,oBACChB,IAAA,CAACL,WAAW;IACXqB,EAAE,EAAGA,EAAI;IACTT,IAAI,EAAGiB,SAAW;IAClBhB,SAAS,EAAGU,OAAS;IACrBd,uBAAuB;IAAAsB,QAAA,eAEvBxB,KAAA,CAACN,MAAM;MAAC+B,OAAO,EAAC,YAAY;MAACC,OAAO,EAAG,CAAG;MAAAF,QAAA,gBACzC1B,IAAA,CAACN,UAAU;QACVsB,EAAE,EAAGA,EAAI;QACTV,OAAO,EAAGA,OAAS;QACnBG,QAAQ,EAAGG,cAAgB;QAC3B,oBAAmBW,WAAa;QAChCb,QAAQ,EAAGA,QAAU;QACrBC,GAAG,EAAGA;MAAK,CACX,CAAC,eACFX,IAAA,CAACP,SAAS;QACToC,EAAE,EAAC,OAAO;QACVC,OAAO,EAAGd,EAAI;QACdR,SAAS,EAAC,kCAAkC;QAAAkB,QAAA,EAE1CrB;MAAK,CACG,CAAC;IAAA,CACL;EAAC,CACG,CAAC;AAEhB;AAEA,eAAed,UAAU,CAAEY,aAAc,CAAC","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -7,6 +6,7 @@ import { memo } from '@wordpress/element';
  * Internal dependencies
  */
 import SwitchCell from '../mobile/bottom-sheet/switch-cell';
+import { jsx as _jsx } from "react/jsx-runtime";
 const ToggleControl = memo(({
   label,
   checked,
@@ -18,7 +18,7 @@ const ToggleControl = memo(({
 }) => {
   const id = `inspector-toggle-control-${instanceId}`;
   const helpLabel = help && typeof help === 'function' ? help(checked) : help;
-  return createElement(SwitchCell, {
+  return /*#__PURE__*/_jsx(SwitchCell, {
     label: label,
     id: id,
     help: helpLabel,

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

@@ -1 +1 @@
-{"version":3,"names":["memo","SwitchCell","ToggleControl","label","checked","help","instanceId","className","onChange","props","id","helpLabel","createElement","value","onValueChange"],"sources":["@wordpress/components/src/toggle-control/index.native.js"],"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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,oBAAoB;AACzC;AACA;AACA;AACA,OAAOC,UAAU,MAAM,oCAAoC;AAE3D,MAAMC,aAAa,GAAGF,IAAI,CACzB,CAAE;EAAEG,KAAK;EAAEC,OAAO;EAAEC,IAAI;EAAEC,UAAU;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAM;EAC1E,MAAMC,EAAE,GAAI,4BAA4BJ,UAAY,EAAC;EAErD,MAAMK,SAAS,GACdN,IAAI,IAAI,OAAOA,IAAI,KAAK,UAAU,GAAGA,IAAI,CAAED,OAAQ,CAAC,GAAGC,IAAI;EAE5D,OACCO,aAAA,CAACX,UAAU;IACVE,KAAK,EAAGA,KAAO;IACfO,EAAE,EAAGA,EAAI;IACTL,IAAI,EAAGM,SAAW;IAClBJ,SAAS,EAAGA,SAAW;IACvBM,KAAK,EAAGT,OAAS;IACjBU,aAAa,EAAGN,QAAU;IAAA,GACrBC;EAAK,CACV,CAAC;AAEJ,CACD,CAAC;AAED,eAAeP,aAAa","ignoreList":[]}
+{"version":3,"names":["memo","SwitchCell","jsx","_jsx","ToggleControl","label","checked","help","instanceId","className","onChange","props","id","helpLabel","value","onValueChange"],"sources":["@wordpress/components/src/toggle-control/index.native.js"],"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"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,oBAAoB;AACzC;AACA;AACA;AACA,OAAOC,UAAU,MAAM,oCAAoC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5D,MAAMC,aAAa,GAAGJ,IAAI,CACzB,CAAE;EAAEK,KAAK;EAAEC,OAAO;EAAEC,IAAI;EAAEC,UAAU;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAM;EAC1E,MAAMC,EAAE,GAAI,4BAA4BJ,UAAY,EAAC;EAErD,MAAMK,SAAS,GACdN,IAAI,IAAI,OAAOA,IAAI,KAAK,UAAU,GAAGA,IAAI,CAAED,OAAQ,CAAC,GAAGC,IAAI;EAE5D,oBACCJ,IAAA,CAACF,UAAU;IACVI,KAAK,EAAGA,KAAO;IACfO,EAAE,EAAGA,EAAI;IACTL,IAAI,EAAGM,SAAW;IAClBJ,SAAS,EAAGA,SAAW;IACvBK,KAAK,EAAGR,OAAS;IACjBS,aAAa,EAAGL,QAAU;IAAA,GACrBC;EAAK,CACV,CAAC;AAEJ,CACD,CAAC;AAED,eAAeP,aAAa","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -12,6 +11,7 @@ import { View } from '../../view';
 import { useControlledValue } from '../../utils';
 import ToggleGroupControlContext from '../context';
 import { useComputeControlledOrUncontrolledValue } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedToggleGroupControlAsButtonGroup({
   children,
   isAdaptiveWidth,
@@ -46,14 +46,16 @@ function UnforwardedToggleGroupControlAsButtonGroup({
     isDeselectable: true,
     size
   }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size]);
-  return createElement(ToggleGroupControlContext.Provider, {
-    value: groupContextValue
-  }, createElement(View, {
-    "aria-label": label,
-    ...otherProps,
-    ref: forwardedRef,
-    role: "group"
-  }, children));
+  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {
+    value: groupContextValue,
+    children: /*#__PURE__*/_jsx(View, {
+      "aria-label": label,
+      ...otherProps,
+      ref: forwardedRef,
+      role: "group",
+      children: children
+    })
+  });
 }
 export const ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);
 //# sourceMappingURL=as-button-group.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useInstanceId","forwardRef","useMemo","View","useControlledValue","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","UnforwardedToggleGroupControlAsButtonGroup","children","isAdaptiveWidth","label","onChange","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","ToggleGroupControlAsButtonGroup","baseId","defaultValue","selectedValue","setSelectedValue","groupContextValue","setValue","isBlock","isDeselectable","createElement","Provider","ref","role"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsButtonGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsButtonGroup,\n\t\t'toggle-group-control-as-button-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\tconst [ selectedValue, setSelectedValue ] = useControlledValue( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tonChange,\n\t} );\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue: setSelectedValue,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tisDeselectable: true,\n\t\t\t\tsize,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<View\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\trole=\"group\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsButtonGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsButtonGroup\n);\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,kBAAkB,QAAQ,aAAa;AAEhD,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAMjE,SAASC,0CAA0CA,CAClD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAAkD,EACjD;EACD,MAAMC,WAAW,GAAGnB,aAAa,CAChCoB,+BAA+B,EAC/B,sCACD,CAAC;EACD,MAAMC,MAAM,GAAGL,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAES;EAAa,CAAC,GAC5BhB,uCAAuC,CAAEQ,SAAU,CAAC;EAErD,MAAM,CAAES,aAAa,EAAEC,gBAAgB,CAAE,GAAGpB,kBAAkB,CAAE;IAC/DkB,YAAY;IACZT,KAAK;IACLF;EACD,CAAE,CAAC;EAEH,MAAMc,iBAAiB,GAAGvB,OAAO,CAChC,OACG;IACDmB,MAAM;IACNR,KAAK,EAAEU,aAAa;IACpBG,QAAQ,EAAEF,gBAAgB;IAC1BG,OAAO,EAAE,CAAElB,eAAe;IAC1BmB,cAAc,EAAE,IAAI;IACpBhB;EACD,CAAC,CAAoC,EACtC,CAAES,MAAM,EAAEE,aAAa,EAAEC,gBAAgB,EAAEf,eAAe,EAAEG,IAAI,CACjE,CAAC;EAED,OACCiB,aAAA,CAACxB,yBAAyB,CAACyB,QAAQ;IAACjB,KAAK,EAAGY;EAAmB,GAC9DI,aAAA,CAAC1B,IAAI;IACJ,cAAaO,KAAO;IAAA,GACfO,UAAU;IACfc,GAAG,EAAGb,YAAc;IACpBc,IAAI,EAAC;EAAO,GAEVxB,QACG,CAC6B,CAAC;AAEvC;AAEA,OAAO,MAAMY,+BAA+B,GAAGnB,UAAU,CACxDM,0CACD,CAAC","ignoreList":[]}
+{"version":3,"names":["useInstanceId","forwardRef","useMemo","View","useControlledValue","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","jsx","_jsx","UnforwardedToggleGroupControlAsButtonGroup","children","isAdaptiveWidth","label","onChange","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","ToggleGroupControlAsButtonGroup","baseId","defaultValue","selectedValue","setSelectedValue","groupContextValue","setValue","isBlock","isDeselectable","Provider","ref","role"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsButtonGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsButtonGroup,\n\t\t'toggle-group-control-as-button-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\tconst [ selectedValue, setSelectedValue ] = useControlledValue( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tonChange,\n\t} );\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue: setSelectedValue,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tisDeselectable: true,\n\t\t\t\tsize,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<View\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\trole=\"group\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsButtonGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsButtonGroup\n);\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,kBAAkB,QAAQ,aAAa;AAEhD,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMlE,SAASC,0CAA0CA,CAClD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAAkD,EACjD;EACD,MAAMC,WAAW,GAAGrB,aAAa,CAChCsB,+BAA+B,EAC/B,sCACD,CAAC;EACD,MAAMC,MAAM,GAAGL,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAES;EAAa,CAAC,GAC5BlB,uCAAuC,CAAEU,SAAU,CAAC;EAErD,MAAM,CAAES,aAAa,EAAEC,gBAAgB,CAAE,GAAGtB,kBAAkB,CAAE;IAC/DoB,YAAY;IACZT,KAAK;IACLF;EACD,CAAE,CAAC;EAEH,MAAMc,iBAAiB,GAAGzB,OAAO,CAChC,OACG;IACDqB,MAAM;IACNR,KAAK,EAAEU,aAAa;IACpBG,QAAQ,EAAEF,gBAAgB;IAC1BG,OAAO,EAAE,CAAElB,eAAe;IAC1BmB,cAAc,EAAE,IAAI;IACpBhB;EACD,CAAC,CAAoC,EACtC,CAAES,MAAM,EAAEE,aAAa,EAAEC,gBAAgB,EAAEf,eAAe,EAAEG,IAAI,CACjE,CAAC;EAED,oBACCN,IAAA,CAACH,yBAAyB,CAAC0B,QAAQ;IAAChB,KAAK,EAAGY,iBAAmB;IAAAjB,QAAA,eAC9DF,IAAA,CAACL,IAAI;MACJ,cAAaS,KAAO;MAAA,GACfO,UAAU;MACfa,GAAG,EAAGZ,YAAc;MACpBa,IAAI,EAAC,OAAO;MAAAvB,QAAA,EAEVA;IAAQ,CACL;EAAC,CAC4B,CAAC;AAEvC;AAEA,OAAO,MAAMY,+BAA+B,GAAGrB,UAAU,CACxDQ,0CACD,CAAC","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -18,6 +17,7 @@ import { forwardRef, useMemo } from '@wordpress/element';
 import { View } from '../../view';
 import ToggleGroupControlContext from '../context';
 import { useComputeControlledOrUncontrolledValue } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedToggleGroupControlAsRadioGroup({
   children,
   isAdaptiveWidth,
@@ -59,16 +59,18 @@ function UnforwardedToggleGroupControlAsRadioGroup({
     value: selectedValue,
     setValue
   }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]);
-  return createElement(ToggleGroupControlContext.Provider, {
-    value: groupContextValue
-  }, createElement(Ariakit.RadioGroup, {
-    store: radio,
-    "aria-label": label,
-    render: createElement(View, null),
-    ...otherProps,
-    id: baseId,
-    ref: forwardedRef
-  }, children));
+  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {
+    value: groupContextValue,
+    children: /*#__PURE__*/_jsx(Ariakit.RadioGroup, {
+      store: radio,
+      "aria-label": label,
+      render: /*#__PURE__*/_jsx(View, {}),
+      ...otherProps,
+      id: baseId,
+      ref: forwardedRef,
+      children: children
+    })
+  });
 }
 export const ToggleGroupControlAsRadioGroup = forwardRef(UnforwardedToggleGroupControlAsRadioGroup);
 //# sourceMappingURL=as-radio-group.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","useInstanceId","forwardRef","useMemo","View","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","selectedValue","useState","groupContextValue","isBlock","createElement","Provider","RadioGroup","store","render","ref"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t  }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t} );\n\n\tconst selectedValue = radio.useState( 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAMjE,SAASC,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAGnB,aAAa,CAChCoB,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGL,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAES;EAAa,CAAC,GAC5BjB,uCAAuC,CAAES,SAAU,CAAC;;EAErD;EACA;EACA,MAAMS,mBAAmB,GAAGZ,YAAY,GACnCa,CAAyB,IAAM;IACjCb,YAAY,CAAEa,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAG3B,OAAO,CAAC4B,aAAa,CAAE;IACpCL,YAAY;IACZT,KAAK;IACLe,QAAQ,EAAEL;EACX,CAAE,CAAC;EAEH,MAAMM,aAAa,GAAGH,KAAK,CAACI,QAAQ,CAAE,OAAQ,CAAC;EAC/C,MAAMF,QAAQ,GAAGF,KAAK,CAACE,QAAQ;EAE/B,MAAMG,iBAAiB,GAAG7B,OAAO,CAChC,OACG;IACDmB,MAAM;IACNW,OAAO,EAAE,CAAExB,eAAe;IAC1BI,IAAI;IACJC,KAAK,EAAEgB,aAAa;IACpBD;EACD,CAAC,CAAoC,EACtC,CAAEP,MAAM,EAAEb,eAAe,EAAEI,IAAI,EAAEiB,aAAa,EAAED,QAAQ,CACzD,CAAC;EAED,OACCK,aAAA,CAAC7B,yBAAyB,CAAC8B,QAAQ;IAACrB,KAAK,EAAGkB;EAAmB,GAC9DE,aAAA,CAAClC,OAAO,CAACoC,UAAU;IAClBC,KAAK,EAAGV,KAAO;IACf,cAAajB,KAAO;IACpB4B,MAAM,EAAGJ,aAAA,CAAC9B,IAAI,MAAE,CAAG;IAAA,GACdc,UAAU;IACfF,EAAE,EAAGM,MAAQ;IACbiB,GAAG,EAAGpB;EAAc,GAElBX,QACiB,CACe,CAAC;AAEvC;AAEA,OAAO,MAAMa,8BAA8B,GAAGnB,UAAU,CACvDK,yCACD,CAAC","ignoreList":[]}
+{"version":3,"names":["Ariakit","useInstanceId","forwardRef","useMemo","View","ToggleGroupControlContext","useComputeControlledOrUncontrolledValue","jsx","_jsx","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","selectedValue","useState","groupContextValue","isBlock","Provider","RadioGroup","store","render","ref"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t  }\n\t\t: undefined;\n\n\tconst radio = Ariakit.useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t} );\n\n\tconst selectedValue = radio.useState( 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<Ariakit.RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\trender={ <View /> }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Ariakit.RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,OAAO,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAOC,yBAAyB,MAAM,YAAY;AAClD,SAASC,uCAAuC,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMlE,SAASC,yCAAyCA,CACjD;EACCC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,IAAI;EACJC,KAAK,EAAEC,SAAS;EAChBC,EAAE,EAAEC,MAAM;EACV,GAAGC;AAKJ,CAAC,EACDC,YAA4C,EAC3C;EACD,MAAMC,WAAW,GAAGrB,aAAa,CAChCsB,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGL,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAES;EAAa,CAAC,GAC5BnB,uCAAuC,CAAEW,SAAU,CAAC;;EAErD;EACA;EACA,MAAMS,mBAAmB,GAAGZ,YAAY,GACnCa,CAAyB,IAAM;IACjCb,YAAY,CAAEa,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAG7B,OAAO,CAAC8B,aAAa,CAAE;IACpCL,YAAY;IACZT,KAAK;IACLe,QAAQ,EAAEL;EACX,CAAE,CAAC;EAEH,MAAMM,aAAa,GAAGH,KAAK,CAACI,QAAQ,CAAE,OAAQ,CAAC;EAC/C,MAAMF,QAAQ,GAAGF,KAAK,CAACE,QAAQ;EAE/B,MAAMG,iBAAiB,GAAG/B,OAAO,CAChC,OACG;IACDqB,MAAM;IACNW,OAAO,EAAE,CAAExB,eAAe;IAC1BI,IAAI;IACJC,KAAK,EAAEgB,aAAa;IACpBD;EACD,CAAC,CAAoC,EACtC,CAAEP,MAAM,EAAEb,eAAe,EAAEI,IAAI,EAAEiB,aAAa,EAAED,QAAQ,CACzD,CAAC;EAED,oBACCvB,IAAA,CAACH,yBAAyB,CAAC+B,QAAQ;IAACpB,KAAK,EAAGkB,iBAAmB;IAAAxB,QAAA,eAC9DF,IAAA,CAACR,OAAO,CAACqC,UAAU;MAClBC,KAAK,EAAGT,KAAO;MACf,cAAajB,KAAO;MACpB2B,MAAM,eAAG/B,IAAA,CAACJ,IAAI,IAAE,CAAG;MAAA,GACdgB,UAAU;MACfF,EAAE,EAAGM,MAAQ;MACbgB,GAAG,EAAGnB,YAAc;MAAAX,QAAA,EAElBA;IAAQ,CACS;EAAC,CACc,CAAC;AAEvC;AAEA,OAAO,MAAMa,8BAA8B,GAAGrB,UAAU,CACvDO,yCACD,CAAC","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -23,6 +22,8 @@ import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function UnconnectedToggleGroupControl(props, forwardedRef) {
   const {
     __nextHasNoMarginBottom = false,
@@ -49,21 +50,28 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     size: normalizedSize
   }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, normalizedSize]);
   const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;
-  return createElement(BaseControl, {
+  return /*#__PURE__*/_jsxs(BaseControl, {
     help: help,
-    __nextHasNoMarginBottom: __nextHasNoMarginBottom
-  }, !hideLabelFromVision && createElement(VisualLabelWrapper, null, createElement(BaseControl.VisualLabel, null, label)), createElement(MainControl, {
-    ...otherProps,
-    className: classes,
-    isAdaptiveWidth: isAdaptiveWidth,
-    label: label,
-    onChange: onChange,
-    ref: forwardedRef,
-    size: normalizedSize,
-    value: value
-  }, createElement(LayoutGroup, {
-    id: baseId
-  }, children)));
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom,
+    children: [!hideLabelFromVision && /*#__PURE__*/_jsx(VisualLabelWrapper, {
+      children: /*#__PURE__*/_jsx(BaseControl.VisualLabel, {
+        children: label
+      })
+    }), /*#__PURE__*/_jsx(MainControl, {
+      ...otherProps,
+      className: classes,
+      isAdaptiveWidth: isAdaptiveWidth,
+      label: label,
+      onChange: onChange,
+      ref: forwardedRef,
+      size: normalizedSize,
+      value: value,
+      children: /*#__PURE__*/_jsx(LayoutGroup, {
+        id: baseId,
+        children: children
+      })
+    })]
+  });
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"names":["LayoutGroup","useInstanceId","useMemo","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","__next40pxDefaultSize","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","baseId","ToggleGroupControl","normalizedSize","cx","classes","toggleGroupControl","block","MainControl","createElement","VisualLabel","ref","id"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { LayoutGroup } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\n\tconst baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );\n\tconst normalizedSize =\n\t\t__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.toggleGroupControl( {\n\t\t\t\t\tisBlock,\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tsize: normalizedSize,\n\t\t\t\t} ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, normalizedSize ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ normalizedSize }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t<LayoutGroup id={ baseId }>{ children }</LayoutGroup>\n\t\t\t</MainControl>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA,SAASA,WAAW,QAAQ,eAAe;;AAE3C;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAElD,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAEA,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,eAAe;AAChE,SAASC,KAAK,QAAQ,mBAAmB;AACzC,OAAOC,WAAW,MAAM,oBAAoB;AAE5C,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,SAASC,8BAA8B,QAAQ,kBAAkB;AACjE,SAASC,+BAA+B,QAAQ,mBAAmB;AAEnE,SAASC,6BAA6BA,CACrCC,KAAuE,EACvEC,YAAiC,EAChC;EACD,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,qBAAqB,GAAG,KAAK;IAC7BC,SAAS;IACTC,eAAe,GAAG,KAAK;IACvBC,OAAO,GAAG,KAAK;IACfC,cAAc,GAAG,KAAK;IACtBC,KAAK;IACLC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,SAAS;IAChBC,KAAK;IACLC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAGvB,gBAAgB,CAAEQ,KAAK,EAAE,oBAAqB,CAAC;EAEnD,MAAMgB,MAAM,GAAG3B,aAAa,CAAE4B,kBAAkB,EAAE,sBAAuB,CAAC;EAC1E,MAAMC,cAAc,GACnBf,qBAAqB,IAAIS,IAAI,KAAK,SAAS,GAAG,kBAAkB,GAAGA,IAAI;EAExE,MAAMO,EAAE,GAAG1B,KAAK,CAAC,CAAC;EAElB,MAAM2B,OAAO,GAAG9B,OAAO,CACtB,MACC6B,EAAE,CACDvB,MAAM,CAACyB,kBAAkB,CAAE;IAC1Bf,OAAO;IACPC,cAAc;IACdK,IAAI,EAAEM;EACP,CAAE,CAAC,EACHZ,OAAO,IAAIV,MAAM,CAAC0B,KAAK,EACvBlB,SACD,CAAC,EACF,CAAEA,SAAS,EAAEe,EAAE,EAAEb,OAAO,EAAEC,cAAc,EAAEW,cAAc,CACzD,CAAC;EAED,MAAMK,WAAW,GAAGhB,cAAc,GAC/BT,+BAA+B,GAC/BD,8BAA8B;EAEjC,OACC2B,aAAA,CAAC9B,WAAW;IACXgB,IAAI,EAAGA,IAAM;IACbR,uBAAuB,EAAGA;EAAyB,GAEjD,CAAEO,mBAAmB,IACtBe,aAAA,CAAC7B,kBAAkB,QAClB6B,aAAA,CAAC9B,WAAW,CAAC+B,WAAW,QAAGjB,KAAgC,CACxC,CACpB,EACDgB,aAAA,CAACD,WAAW;IAAA,GACNR,UAAU;IACfX,SAAS,EAAGgB,OAAS;IACrBf,eAAe,EAAGA,eAAiB;IACnCG,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGA,QAAU;IACrBe,GAAG,EAAGzB,YAAc;IACpBW,IAAI,EAAGM,cAAgB;IACvBL,KAAK,EAAGA;EAAO,GAEfW,aAAA,CAACpC,WAAW;IAACuC,EAAE,EAAGX;EAAQ,GAAGF,QAAuB,CACxC,CACD,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,kBAAkB,GAAG1B,cAAc,CAC/CQ,6BAA6B,EAC7B,oBACD,CAAC;AAED,eAAekB,kBAAkB","ignoreList":[]}
+{"version":3,"names":["LayoutGroup","useInstanceId","useMemo","contextConnect","useContextSystem","useCx","BaseControl","VisualLabelWrapper","styles","ToggleGroupControlAsRadioGroup","ToggleGroupControlAsButtonGroup","jsx","_jsx","jsxs","_jsxs","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","__next40pxDefaultSize","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","baseId","ToggleGroupControl","normalizedSize","cx","classes","toggleGroupControl","block","MainControl","VisualLabel","ref","id"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { LayoutGroup } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\t__next40pxDefaultSize = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\n\tconst baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );\n\tconst normalizedSize =\n\t\t__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.toggleGroupControl( {\n\t\t\t\t\tisBlock,\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tsize: normalizedSize,\n\t\t\t\t} ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, normalizedSize ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ normalizedSize }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t<LayoutGroup id={ baseId }>{ children }</LayoutGroup>\n\t\t\t</MainControl>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA,SAASA,WAAW,QAAQ,eAAe;;AAE3C;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAElD,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAEA,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,eAAe;AAChE,SAASC,KAAK,QAAQ,mBAAmB;AACzC,OAAOC,WAAW,MAAM,oBAAoB;AAE5C,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,SAASC,8BAA8B,QAAQ,kBAAkB;AACjE,SAASC,+BAA+B,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEpE,SAASC,6BAA6BA,CACrCC,KAAuE,EACvEC,YAAiC,EAChC;EACD,MAAM;IACLC,uBAAuB,GAAG,KAAK;IAC/BC,qBAAqB,GAAG,KAAK;IAC7BC,SAAS;IACTC,eAAe,GAAG,KAAK;IACvBC,OAAO,GAAG,KAAK;IACfC,cAAc,GAAG,KAAK;IACtBC,KAAK;IACLC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI;IACJC,QAAQ;IACRC,IAAI,GAAG,SAAS;IAChBC,KAAK;IACLC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAG3B,gBAAgB,CAAEY,KAAK,EAAE,oBAAqB,CAAC;EAEnD,MAAMgB,MAAM,GAAG/B,aAAa,CAAEgC,kBAAkB,EAAE,sBAAuB,CAAC;EAC1E,MAAMC,cAAc,GACnBf,qBAAqB,IAAIS,IAAI,KAAK,SAAS,GAAG,kBAAkB,GAAGA,IAAI;EAExE,MAAMO,EAAE,GAAG9B,KAAK,CAAC,CAAC;EAElB,MAAM+B,OAAO,GAAGlC,OAAO,CACtB,MACCiC,EAAE,CACD3B,MAAM,CAAC6B,kBAAkB,CAAE;IAC1Bf,OAAO;IACPC,cAAc;IACdK,IAAI,EAAEM;EACP,CAAE,CAAC,EACHZ,OAAO,IAAId,MAAM,CAAC8B,KAAK,EACvBlB,SACD,CAAC,EACF,CAAEA,SAAS,EAAEe,EAAE,EAAEb,OAAO,EAAEC,cAAc,EAAEW,cAAc,CACzD,CAAC;EAED,MAAMK,WAAW,GAAGhB,cAAc,GAC/Bb,+BAA+B,GAC/BD,8BAA8B;EAEjC,oBACCK,KAAA,CAACR,WAAW;IACXoB,IAAI,EAAGA,IAAM;IACbR,uBAAuB,EAAGA,uBAAyB;IAAAY,QAAA,GAEjD,CAAEL,mBAAmB,iBACtBb,IAAA,CAACL,kBAAkB;MAAAuB,QAAA,eAClBlB,IAAA,CAACN,WAAW,CAACkC,WAAW;QAAAV,QAAA,EAAGN;MAAK,CAA2B;IAAC,CACzC,CACpB,eACDZ,IAAA,CAAC2B,WAAW;MAAA,GACNR,UAAU;MACfX,SAAS,EAAGgB,OAAS;MACrBf,eAAe,EAAGA,eAAiB;MACnCG,KAAK,EAAGA,KAAO;MACfG,QAAQ,EAAGA,QAAU;MACrBc,GAAG,EAAGxB,YAAc;MACpBW,IAAI,EAAGM,cAAgB;MACvBL,KAAK,EAAGA,KAAO;MAAAC,QAAA,eAEflB,IAAA,CAACZ,WAAW;QAAC0C,EAAE,EAAGV,MAAQ;QAAAF,QAAA,EAAGA;MAAQ,CAAe;IAAC,CACzC,CAAC;EAAA,CACF,CAAC;AAEhB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,kBAAkB,GAAG9B,cAAc,CAC/CY,6BAA6B,EAC7B,oBACD,CAAC;AAED,eAAekB,kBAAkB","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -13,17 +12,19 @@ import { forwardRef } from '@wordpress/element';
  */
 
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedToggleGroupControlOption(props, ref) {
   const {
     label,
     ...restProps
   } = props;
   const optionLabel = restProps['aria-label'] || label;
-  return createElement(ToggleGroupControlOptionBase, {
+  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {
     ...restProps,
     "aria-label": optionLabel,
-    ref: ref
-  }, label);
+    ref: ref,
+    children: label
+  });
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","ToggleGroupControlOptionBase","UnforwardedToggleGroupControlOption","props","ref","label","restProps","optionLabel","createElement","ToggleGroupControlOption"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option/component.tsx"],"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 '../../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"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAGA,SAASC,4BAA4B,QAAQ,qCAAqC;AAElF,SAASC,mCAAmCA,CAC3CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EACrC,MAAMI,WAAW,GAAGD,SAAS,CAAE,YAAY,CAAE,IAAID,KAAK;EACtD,OACCG,aAAA,CAACP,4BAA4B;IAAA,GACvBK,SAAS;IACd,cAAaC,WAAa;IAC1BH,GAAG,EAAGA;EAAK,GAETC,KAC2B,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,wBAAwB,GAAGT,UAAU,CACjDE,mCACD,CAAC;AAED,eAAeO,wBAAwB","ignoreList":[]}
+{"version":3,"names":["forwardRef","ToggleGroupControlOptionBase","jsx","_jsx","UnforwardedToggleGroupControlOption","props","ref","label","restProps","optionLabel","children","ToggleGroupControlOption"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option/component.tsx"],"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 '../../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"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAGA,SAASC,4BAA4B,QAAQ,qCAAqC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEnF,SAASC,mCAAmCA,CAC3CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGH,KAAK;EACrC,MAAMI,WAAW,GAAGD,SAAS,CAAE,YAAY,CAAE,IAAID,KAAK;EACtD,oBACCJ,IAAA,CAACF,4BAA4B;IAAA,GACvBO,SAAS;IACd,cAAaC,WAAa;IAC1BH,GAAG,EAAGA,GAAK;IAAAI,QAAA,EAETH;EAAK,CACsB,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,wBAAwB,GAAGX,UAAU,CACjDI,mCACD,CAAC;AAED,eAAeO,wBAAwB","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -23,6 +22,9 @@ import { useToggleGroupControlContext } from '../context';
 import * as styles from './styles';
 import { useCx } from '../../utils/hooks';
 import Tooltip from '../../tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   ButtonContentView,
   LabelView
@@ -37,12 +39,15 @@ const WithToolTip = ({
   children
 }) => {
   if (showTooltip && text) {
-    return createElement(Tooltip, {
+    return /*#__PURE__*/_jsx(Tooltip, {
       text: text,
-      placement: "top"
-    }, children);
+      placement: "top",
+      children: children
+    });
   }
-  return createElement(Fragment, null, children);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
 };
 function ToggleGroupControlOptionBase(props, forwardedRef) {
   const shouldReduceMotion = useReducedMotion();
@@ -89,39 +94,48 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
     'data-value': value,
     ref: forwardedRef
   };
-  return createElement(LabelView, {
-    className: labelViewClasses
-  }, createElement(WithToolTip, {
-    showTooltip: showTooltip,
-    text: otherButtonProps['aria-label']
-  }, isDeselectable ? createElement("button", {
-    ...commonProps,
-    onFocus: onFocusProp,
-    "aria-pressed": isPressed,
-    type: "button",
-    onClick: buttonOnClick
-  }, createElement(ButtonContentView, null, children)) : createElement(Ariakit.Radio, {
-    render: createElement("button", {
-      type: "button",
-      ...commonProps,
-      onFocus: event => {
-        onFocusProp?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        toggleGroupControlContext.setValue(value);
-      }
-    }),
-    value: value
-  }, createElement(ButtonContentView, null, children))), isPressed ? createElement(motion.div, {
-    layout: true,
-    layoutRoot: true
-  }, createElement(motion.div, {
-    className: backdropClasses,
-    transition: shouldReduceMotion ? REDUCED_MOTION_TRANSITION_CONFIG : undefined,
-    role: "presentation",
-    layoutId: LAYOUT_ID
-  })) : null);
+  return /*#__PURE__*/_jsxs(LabelView, {
+    className: labelViewClasses,
+    children: [/*#__PURE__*/_jsx(WithToolTip, {
+      showTooltip: showTooltip,
+      text: otherButtonProps['aria-label'],
+      children: isDeselectable ? /*#__PURE__*/_jsx("button", {
+        ...commonProps,
+        onFocus: onFocusProp,
+        "aria-pressed": isPressed,
+        type: "button",
+        onClick: buttonOnClick,
+        children: /*#__PURE__*/_jsx(ButtonContentView, {
+          children: children
+        })
+      }) : /*#__PURE__*/_jsx(Ariakit.Radio, {
+        render: /*#__PURE__*/_jsx("button", {
+          type: "button",
+          ...commonProps,
+          onFocus: event => {
+            onFocusProp?.(event);
+            if (event.defaultPrevented) {
+              return;
+            }
+            toggleGroupControlContext.setValue(value);
+          }
+        }),
+        value: value,
+        children: /*#__PURE__*/_jsx(ButtonContentView, {
+          children: children
+        })
+      })
+    }), isPressed ? /*#__PURE__*/_jsx(motion.div, {
+      layout: true,
+      layoutRoot: true,
+      children: /*#__PURE__*/_jsx(motion.div, {
+        className: backdropClasses,
+        transition: shouldReduceMotion ? REDUCED_MOTION_TRANSITION_CONFIG : undefined,
+        role: "presentation",
+        layoutId: LAYOUT_ID
+      })
+    }) : null]
+  });
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"names":["Ariakit","motion","useReducedMotion","useInstanceId","useMemo","contextConnect","useContextSystem","useToggleGroupControlContext","styles","useCx","Tooltip","ButtonContentView","LabelView","REDUCED_MOTION_TRANSITION_CONFIG","duration","LAYOUT_ID","WithToolTip","showTooltip","text","children","createElement","placement","Fragment","ToggleGroupControlOptionBase","props","forwardedRef","shouldReduceMotion","toggleGroupControlContext","id","baseId","buttonProps","isBlock","isDeselectable","size","className","isIcon","value","onFocus","onFocusProp","otherButtonProps","isPressed","cx","labelViewClasses","labelBlock","itemClasses","buttonView","backdropClasses","backdropView","buttonOnClick","setValue","undefined","commonProps","ref","type","onClick","Radio","render","event","defaultPrevented","div","layout","layoutRoot","transition","role","layoutId","ConnectedToggleGroupControlOptionBase"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n// eslint-disable-next-line no-restricted-imports\nimport { motion } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst REDUCED_MOTION_TRANSITION_CONFIG = {\n\tduration: 0,\n};\n\nconst LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } placement=\"top\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tToggleGroupControlOptionBaseProps,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t// the element's id is generated internally\n\t\t'id'\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst shouldReduceMotion = useReducedMotion();\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId || 'toggle-group-control-option-base'\n\t);\n\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\n\tconst {\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tsize = 'default',\n\t} = toggleGroupControlContext;\n\n\tconst {\n\t\tclassName,\n\t\tisIcon = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\tonFocus: onFocusProp,\n\t\t...otherButtonProps\n\t} = buttonProps;\n\n\tconst isPressed = toggleGroupControlContext.value === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = useMemo(\n\t\t() => cx( isBlock && styles.labelBlock ),\n\t\t[ cx, isBlock ]\n\t);\n\tconst itemClasses = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.buttonView( {\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tisIcon,\n\t\t\t\t\tisPressed,\n\t\t\t\t\tsize,\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ cx, isDeselectable, isIcon, isPressed, size, className ]\n\t);\n\tconst backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );\n\n\tconst buttonOnClick = () => {\n\t\tif ( isDeselectable && isPressed ) {\n\t\t\ttoggleGroupControlContext.setValue( undefined );\n\t\t} else {\n\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t}\n\t};\n\n\tconst commonProps = {\n\t\t...otherButtonProps,\n\t\tclassName: itemClasses,\n\t\t'data-value': value,\n\t\tref: forwardedRef,\n\t};\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ otherButtonProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t{ isDeselectable ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\tonFocus={ onFocusProp }\n\t\t\t\t\t\taria-pressed={ isPressed }\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ buttonOnClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<Ariakit.Radio\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\t\tonFocus={ ( event ) => {\n\t\t\t\t\t\t\t\t\tonFocusProp?.( event );\n\t\t\t\t\t\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</Ariakit.Radio>\n\t\t\t\t) }\n\t\t\t</WithToolTip>\n\t\t\t{ /* Animated backdrop using framer motion's shared layout animation */ }\n\t\t\t{ isPressed ? (\n\t\t\t\t<motion.div layout layoutRoot>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName={ backdropClasses }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tshouldReduceMotion\n\t\t\t\t\t\t\t\t? REDUCED_MOTION_TRANSITION_CONFIG\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\tlayoutId={ LAYOUT_ID }\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\t\t\t) : null }\n\t\t</LabelView>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Ariakit","motion","useReducedMotion","useInstanceId","useMemo","contextConnect","useContextSystem","useToggleGroupControlContext","styles","useCx","Tooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ButtonContentView","LabelView","REDUCED_MOTION_TRANSITION_CONFIG","duration","LAYOUT_ID","WithToolTip","showTooltip","text","children","placement","ToggleGroupControlOptionBase","props","forwardedRef","shouldReduceMotion","toggleGroupControlContext","id","baseId","buttonProps","isBlock","isDeselectable","size","className","isIcon","value","onFocus","onFocusProp","otherButtonProps","isPressed","cx","labelViewClasses","labelBlock","itemClasses","buttonView","backdropClasses","backdropView","buttonOnClick","setValue","undefined","commonProps","ref","type","onClick","Radio","render","event","defaultPrevented","div","layout","layoutRoot","transition","role","layoutId","ConnectedToggleGroupControlOptionBase"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n// eslint-disable-next-line no-restricted-imports\nimport { motion } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useInstanceId } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect, useContextSystem } from '../../context';\nimport type {\n\tToggleGroupControlOptionBaseProps,\n\tWithToolTipProps,\n} from '../types';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\n\nconst { ButtonContentView, LabelView } = styles;\n\nconst REDUCED_MOTION_TRANSITION_CONFIG = {\n\tduration: 0,\n};\n\nconst LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';\n\nconst WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {\n\tif ( showTooltip && text ) {\n\t\treturn (\n\t\t\t<Tooltip text={ text } placement=\"top\">\n\t\t\t\t{ children }\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\treturn <>{ children }</>;\n};\n\nfunction ToggleGroupControlOptionBase(\n\tprops: Omit<\n\t\tWordPressComponentProps<\n\t\t\tToggleGroupControlOptionBaseProps,\n\t\t\t'button',\n\t\t\tfalse\n\t\t>,\n\t\t// the element's id is generated internally\n\t\t'id'\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst shouldReduceMotion = useReducedMotion();\n\tconst toggleGroupControlContext = useToggleGroupControlContext();\n\n\tconst id = useInstanceId(\n\t\tToggleGroupControlOptionBase,\n\t\ttoggleGroupControlContext.baseId || 'toggle-group-control-option-base'\n\t);\n\n\tconst buttonProps = useContextSystem(\n\t\t{ ...props, id },\n\t\t'ToggleGroupControlOptionBase'\n\t);\n\n\tconst {\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tsize = 'default',\n\t} = toggleGroupControlContext;\n\n\tconst {\n\t\tclassName,\n\t\tisIcon = false,\n\t\tvalue,\n\t\tchildren,\n\t\tshowTooltip = false,\n\t\tonFocus: onFocusProp,\n\t\t...otherButtonProps\n\t} = buttonProps;\n\n\tconst isPressed = toggleGroupControlContext.value === value;\n\tconst cx = useCx();\n\tconst labelViewClasses = useMemo(\n\t\t() => cx( isBlock && styles.labelBlock ),\n\t\t[ cx, isBlock ]\n\t);\n\tconst itemClasses = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.buttonView( {\n\t\t\t\t\tisDeselectable,\n\t\t\t\t\tisIcon,\n\t\t\t\t\tisPressed,\n\t\t\t\t\tsize,\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ cx, isDeselectable, isIcon, isPressed, size, className ]\n\t);\n\tconst backdropClasses = useMemo( () => cx( styles.backdropView ), [ cx ] );\n\n\tconst buttonOnClick = () => {\n\t\tif ( isDeselectable && isPressed ) {\n\t\t\ttoggleGroupControlContext.setValue( undefined );\n\t\t} else {\n\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t}\n\t};\n\n\tconst commonProps = {\n\t\t...otherButtonProps,\n\t\tclassName: itemClasses,\n\t\t'data-value': value,\n\t\tref: forwardedRef,\n\t};\n\n\treturn (\n\t\t<LabelView className={ labelViewClasses }>\n\t\t\t<WithToolTip\n\t\t\t\tshowTooltip={ showTooltip }\n\t\t\t\ttext={ otherButtonProps[ 'aria-label' ] }\n\t\t\t>\n\t\t\t\t{ isDeselectable ? (\n\t\t\t\t\t<button\n\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\tonFocus={ onFocusProp }\n\t\t\t\t\t\taria-pressed={ isPressed }\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={ buttonOnClick }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</button>\n\t\t\t\t) : (\n\t\t\t\t\t<Ariakit.Radio\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\t\tonFocus={ ( event ) => {\n\t\t\t\t\t\t\t\t\tonFocusProp?.( event );\n\t\t\t\t\t\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\ttoggleGroupControlContext.setValue( value );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ButtonContentView>{ children }</ButtonContentView>\n\t\t\t\t\t</Ariakit.Radio>\n\t\t\t\t) }\n\t\t\t</WithToolTip>\n\t\t\t{ /* Animated backdrop using framer motion's shared layout animation */ }\n\t\t\t{ isPressed ? (\n\t\t\t\t<motion.div layout layoutRoot>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName={ backdropClasses }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tshouldReduceMotion\n\t\t\t\t\t\t\t\t? REDUCED_MOTION_TRANSITION_CONFIG\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\tlayoutId={ LAYOUT_ID }\n\t\t\t\t\t/>\n\t\t\t\t</motion.div>\n\t\t\t) : null }\n\t\t</LabelView>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(\n\tToggleGroupControlOptionBase,\n\t'ToggleGroupControlOptionBase'\n);\n\nexport default ConnectedToggleGroupControlOptionBase;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -14,21 +13,23 @@ import { forwardRef } from '@wordpress/element';
 
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 import Icon from '../../icon';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedToggleGroupControlOptionIcon(props, ref) {
   const {
     icon,
     label,
     ...restProps
   } = props;
-  return createElement(ToggleGroupControlOptionBase, {
+  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {
     ...restProps,
     isIcon: true,
     "aria-label": label,
     showTooltip: true,
-    ref: ref
-  }, createElement(Icon, {
-    icon: icon
-  }));
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: icon
+    })
+  });
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","ToggleGroupControlOptionBase","Icon","UnforwardedToggleGroupControlOptionIcon","props","ref","icon","label","restProps","createElement","isIcon","showTooltip","ToggleGroupControlOptionIcon"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx"],"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 '../../context';\nimport type { ToggleGroupControlOptionIconProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport Icon from '../../icon';\n\nfunction UnforwardedToggleGroupControlOptionIcon(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionIconProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\n) {\n\tconst { icon, label, ...restProps } = props;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\tisIcon\n\t\t\taria-label={ label }\n\t\t\tshowTooltip\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<Icon icon={ icon } />\n\t\t</ToggleGroupControlOptionBase>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a\n * child of `ToggleGroupControl` and displays an icon.\n *\n * ```jsx\n *\n * import {\n *\t__experimentalToggleGroupControl as ToggleGroupControl,\n *\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n * from '@wordpress/components';\n * import { formatLowercase, formatUppercase } from '@wordpress/icons';\n *\n * function Example() {\n *\treturn (\n *\t\t<ToggleGroupControl>\n *\t\t\t<ToggleGroupControlOptionIcon\n *\t\t\t\tvalue=\"uppercase\"\n *\t\t\t\tlabel=\"Uppercase\"\n *\t\t\t\ticon={ formatUppercase }\n *\t\t\t/>\n *\t\t\t<ToggleGroupControlOptionIcon\n *\t\t\t\tvalue=\"lowercase\"\n *\t\t\t\tlabel=\"Lowercase\"\n *\t\t\t\ticon={ formatLowercase }\n *\t\t\t/>\n *\t\t</ToggleGroupControl>\n *\t);\n * }\n * ```\n */\nexport const ToggleGroupControlOptionIcon = forwardRef(\n\tUnforwardedToggleGroupControlOptionIcon\n);\n\nexport default ToggleGroupControlOptionIcon;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAGA,SAASC,4BAA4B,QAAQ,qCAAqC;AAClF,OAAOC,IAAI,MAAM,YAAY;AAE7B,SAASC,uCAAuCA,CAC/CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC3C,OACCK,aAAA,CAACR,4BAA4B;IAAA,GACvBO,SAAS;IACdE,MAAM;IACN,cAAaH,KAAO;IACpBI,WAAW;IACXN,GAAG,EAAGA;EAAK,GAEXI,aAAA,CAACP,IAAI;IAACI,IAAI,EAAGA;EAAM,CAAE,CACQ,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,4BAA4B,GAAGZ,UAAU,CACrDG,uCACD,CAAC;AAED,eAAeS,4BAA4B","ignoreList":[]}
+{"version":3,"names":["forwardRef","ToggleGroupControlOptionBase","Icon","jsx","_jsx","UnforwardedToggleGroupControlOptionIcon","props","ref","icon","label","restProps","isIcon","showTooltip","children","ToggleGroupControlOptionIcon"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx"],"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 '../../context';\nimport type { ToggleGroupControlOptionIconProps } from '../types';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport Icon from '../../icon';\n\nfunction UnforwardedToggleGroupControlOptionIcon(\n\tprops: WordPressComponentProps<\n\t\tToggleGroupControlOptionIconProps,\n\t\t'button',\n\t\tfalse\n\t>,\n\tref: ForwardedRef< any >\n) {\n\tconst { icon, label, ...restProps } = props;\n\treturn (\n\t\t<ToggleGroupControlOptionBase\n\t\t\t{ ...restProps }\n\t\t\tisIcon\n\t\t\taria-label={ label }\n\t\t\tshowTooltip\n\t\t\tref={ ref }\n\t\t>\n\t\t\t<Icon icon={ icon } />\n\t\t</ToggleGroupControlOptionBase>\n\t);\n}\n\n/**\n * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a\n * child of `ToggleGroupControl` and displays an icon.\n *\n * ```jsx\n *\n * import {\n *\t__experimentalToggleGroupControl as ToggleGroupControl,\n *\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n * from '@wordpress/components';\n * import { formatLowercase, formatUppercase } from '@wordpress/icons';\n *\n * function Example() {\n *\treturn (\n *\t\t<ToggleGroupControl>\n *\t\t\t<ToggleGroupControlOptionIcon\n *\t\t\t\tvalue=\"uppercase\"\n *\t\t\t\tlabel=\"Uppercase\"\n *\t\t\t\ticon={ formatUppercase }\n *\t\t\t/>\n *\t\t\t<ToggleGroupControlOptionIcon\n *\t\t\t\tvalue=\"lowercase\"\n *\t\t\t\tlabel=\"Lowercase\"\n *\t\t\t\ticon={ formatLowercase }\n *\t\t\t/>\n *\t\t</ToggleGroupControl>\n *\t);\n * }\n * ```\n */\nexport const ToggleGroupControlOptionIcon = forwardRef(\n\tUnforwardedToggleGroupControlOptionIcon\n);\n\nexport default ToggleGroupControlOptionIcon;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAGA,SAASC,4BAA4B,QAAQ,qCAAqC;AAClF,OAAOC,IAAI,MAAM,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9B,SAASC,uCAAuCA,CAC/CC,KAIC,EACDC,GAAwB,EACvB;EACD,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAE,GAAGC;EAAU,CAAC,GAAGJ,KAAK;EAC3C,oBACCF,IAAA,CAACH,4BAA4B;IAAA,GACvBS,SAAS;IACdC,MAAM;IACN,cAAaF,KAAO;IACpBG,WAAW;IACXL,GAAG,EAAGA,GAAK;IAAAM,QAAA,eAEXT,IAAA,CAACF,IAAI;MAACM,IAAI,EAAGA;IAAM,CAAE;EAAC,CACO,CAAC;AAEjC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,4BAA4B,GAAGd,UAAU,CACrDK,uCACD,CAAC;AAED,eAAeS,4BAA4B","ignoreList":[]}