@wordpress/components 25.8.2 → 25.9.0

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _reactNative = require("react-native");
 var _baseControl = _interopRequireDefault(require("../base-control"));
 /**
@@ -23,10 +23,10 @@ function TextareaControl({
   onChange,
   rows = 4
 }) {
-  return (0, _element.createElement)(_baseControl.default, {
+  return (0, _react.createElement)(_baseControl.default, {
     label: label,
     help: help
-  }, (0, _element.createElement)(_reactNative.TextInput, {
+  }, (0, _react.createElement)(_reactNative.TextInput, {
     style: {
       height: 80,
       borderColor: 'gray',

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_baseControl","_interopRequireDefault","TextareaControl","label","value","help","onChange","rows","_element","createElement","default","TextInput","style","height","borderColor","borderWidth","onChangeText","numberOfLines","multiline","textAlignVertical","_default","exports"],"sources":["@wordpress/components/src/textarea-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { TextInput } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nfunction TextareaControl( { label, value, help, onChange, rows = 4 } ) {\n\treturn (\n\t\t<BaseControl label={ label } help={ help }>\n\t\t\t<TextInput\n\t\t\t\tstyle={ { height: 80, borderColor: 'gray', borderWidth: 1 } }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChangeText={ onChange }\n\t\t\t\tnumberOfLines={ rows }\n\t\t\t\tmultiline={ rows > 1 }\n\t\t\t\ttextAlignVertical=\"top\"\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default TextareaControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,SAASG,eAAeA,CAAE;EAAEC,KAAK;EAAEC,KAAK;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,IAAI,GAAG;AAAE,CAAC,EAAG;EACtE,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACT,YAAA,CAAAU,OAAW;IAACP,KAAK,EAAGA,KAAO;IAACE,IAAI,EAAGA;EAAM,GACzC,IAAAG,QAAA,CAAAC,aAAA,EAACX,YAAA,CAAAa,SAAS;IACTC,KAAK,EAAG;MAAEC,MAAM,EAAE,EAAE;MAAEC,WAAW,EAAE,MAAM;MAAEC,WAAW,EAAE;IAAE,CAAG;IAC7DX,KAAK,EAAGA,KAAO;IACfY,YAAY,EAAGV,QAAU;IACzBW,aAAa,EAAGV,IAAM;IACtBW,SAAS,EAAGX,IAAI,GAAG,CAAG;IACtBY,iBAAiB,EAAC;EAAK,CACvB,CACW,CAAC;AAEhB;AAAC,IAAAC,QAAA,GAEclB,eAAe;AAAAmB,OAAA,CAAAX,OAAA,GAAAU,QAAA"}
+{"version":3,"names":["_reactNative","require","_baseControl","_interopRequireDefault","TextareaControl","label","value","help","onChange","rows","_react","createElement","default","TextInput","style","height","borderColor","borderWidth","onChangeText","numberOfLines","multiline","textAlignVertical","_default","exports"],"sources":["@wordpress/components/src/textarea-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { TextInput } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nfunction TextareaControl( { label, value, help, onChange, rows = 4 } ) {\n\treturn (\n\t\t<BaseControl label={ label } help={ help }>\n\t\t\t<TextInput\n\t\t\t\tstyle={ { height: 80, borderColor: 'gray', borderWidth: 1 } }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChangeText={ onChange }\n\t\t\t\tnumberOfLines={ rows }\n\t\t\t\tmultiline={ rows > 1 }\n\t\t\t\ttextAlignVertical=\"top\"\n\t\t\t/>\n\t\t</BaseControl>\n\t);\n}\n\nexport default TextareaControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,SAASG,eAAeA,CAAE;EAAEC,KAAK;EAAEC,KAAK;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,IAAI,GAAG;AAAE,CAAC,EAAG;EACtE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACT,YAAA,CAAAU,OAAW;IAACP,KAAK,EAAGA,KAAO;IAACE,IAAI,EAAGA;EAAM,GACzC,IAAAG,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAa,SAAS;IACTC,KAAK,EAAG;MAAEC,MAAM,EAAE,EAAE;MAAEC,WAAW,EAAE,MAAM;MAAEC,WAAW,EAAE;IAAE,CAAG;IAC7DX,KAAK,EAAGA,KAAO;IACfY,YAAY,EAAGV,QAAU;IACzBW,aAAa,EAAGV,IAAM;IACtBW,SAAS,EAAGX,IAAI,GAAG,CAAG;IACtBY,iBAAiB,EAAC;EAAK,CACvB,CACW,CAAC;AAEhB;AAAC,IAAAC,QAAA,GAEclB,eAAe;AAAAmB,OAAA,CAAAX,OAAA,GAAAU,QAAA"}

package/build/theme/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 var _element = require("@wordpress/element");
 var _styles = require("./styles");
 var _colorAlgorithms = require("./color-algorithms");
@@ -42,7 +43,7 @@ function Theme({
     accent,
     background
   })), className), [accent, background, className, cx]);
-  return (0, _element.createElement)(_styles.Wrapper, {
+  return (0, _react.createElement)(_styles.Wrapper, {
     className: classes,
     ...props
   });

package/build/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_styles","_colorAlgorithms","_utils","Theme","accent","background","className","props","cx","useCx","classes","useMemo","colorVariables","generateThemeVariables","createElement","Wrapper","_default","exports","default"],"sources":["@wordpress/components/src/theme/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport { colorVariables, Wrapper } from './styles';\nimport { generateThemeVariables } from './color-algorithms';\nimport { useCx } from '../utils';\n\n/**\n * `Theme` allows defining theme variables for components in the `@wordpress/components` package.\n *\n * Multiple `Theme` components can be nested in order to override specific theme variables.\n *\n *\n * ```jsx\n * const Example = () => {\n *   return (\n *     <Theme accent=\"red\">\n *       <Button variant=\"primary\">I'm red</Button>\n *       <Theme accent=\"blue\">\n *         <Button variant=\"primary\">I'm blue</Button>\n *       </Theme>\n *     </Theme>\n *   );\n * };\n * ```\n */\nfunction Theme( {\n\taccent,\n\tbackground,\n\tclassName,\n\t...props\n}: WordPressComponentProps< ThemeProps, 'div', true > ) {\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\t...colorVariables(\n\t\t\t\t\tgenerateThemeVariables( { accent, background } )\n\t\t\t\t),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ accent, background, className, cx ]\n\t);\n\n\treturn <Wrapper className={ classes } { ...props } />;\n}\n\nexport default Theme;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAOA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAZA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASI,KAAKA,CAAE;EACfC,MAAM;EACNC,UAAU;EACVC,SAAS;EACT,GAAGC;AACgD,CAAC,EAAG;EACvD,MAAMC,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAClB,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EACtB,MACCH,EAAE,CACD,GAAG,IAAAI,sBAAc,EAChB,IAAAC,uCAAsB,EAAE;IAAET,MAAM;IAAEC;EAAW,CAAE,CAChD,CAAC,EACDC,SACD,CAAC,EACF,CAAEF,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEE,EAAE,CACpC,CAAC;EAED,OAAO,IAAAV,QAAA,CAAAgB,aAAA,EAACd,OAAA,CAAAe,OAAO;IAACT,SAAS,EAAGI,OAAS;IAAA,GAAMH;EAAK,CAAI,CAAC;AACtD;AAAC,IAAAS,QAAA,GAEcb,KAAK;AAAAc,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_element","require","_styles","_colorAlgorithms","_utils","Theme","accent","background","className","props","cx","useCx","classes","useMemo","colorVariables","generateThemeVariables","_react","createElement","Wrapper","_default","exports","default"],"sources":["@wordpress/components/src/theme/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport { colorVariables, Wrapper } from './styles';\nimport { generateThemeVariables } from './color-algorithms';\nimport { useCx } from '../utils';\n\n/**\n * `Theme` allows defining theme variables for components in the `@wordpress/components` package.\n *\n * Multiple `Theme` components can be nested in order to override specific theme variables.\n *\n *\n * ```jsx\n * const Example = () => {\n *   return (\n *     <Theme accent=\"red\">\n *       <Button variant=\"primary\">I'm red</Button>\n *       <Theme accent=\"blue\">\n *         <Button variant=\"primary\">I'm blue</Button>\n *       </Theme>\n *     </Theme>\n *   );\n * };\n * ```\n */\nfunction Theme( {\n\taccent,\n\tbackground,\n\tclassName,\n\t...props\n}: WordPressComponentProps< ThemeProps, 'div', true > ) {\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\t...colorVariables(\n\t\t\t\t\tgenerateThemeVariables( { accent, background } )\n\t\t\t\t),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ accent, background, className, cx ]\n\t);\n\n\treturn <Wrapper className={ classes } { ...props } />;\n}\n\nexport default Theme;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAOA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAZA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASI,KAAKA,CAAE;EACfC,MAAM;EACNC,UAAU;EACVC,SAAS;EACT,GAAGC;AACgD,CAAC,EAAG;EACvD,MAAMC,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAClB,MAAMC,OAAO,GAAG,IAAAC,gBAAO,EACtB,MACCH,EAAE,CACD,GAAG,IAAAI,sBAAc,EAChB,IAAAC,uCAAsB,EAAE;IAAET,MAAM;IAAEC;EAAW,CAAE,CAChD,CAAC,EACDC,SACD,CAAC,EACF,CAAEF,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEE,EAAE,CACpC,CAAC;EAED,OAAO,IAAAM,MAAA,CAAAC,aAAA,EAACf,OAAA,CAAAgB,OAAO;IAACV,SAAS,EAAGI,OAAS;IAAA,GAAMH;EAAK,CAAI,CAAC;AACtD;AAAC,IAAAU,QAAA,GAEcd,KAAK;AAAAe,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/build/tip/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tip = Tip;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _icons = require("@wordpress/icons");
 /**
  * WordPress dependencies
@@ -15,11 +15,11 @@ function Tip(props) {
   const {
     children
   } = props;
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: "components-tip"
-  }, (0, _element.createElement)(_icons.Icon, {
+  }, (0, _react.createElement)(_icons.Icon, {
     icon: _icons.tip
-  }), (0, _element.createElement)("p", null, children));
+  }), (0, _react.createElement)("p", null, children));
 }
 var _default = Tip;
 exports.default = _default;

package/build/tip/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","Tip","props","children","_element","createElement","className","Icon","icon","tip","_default","exports","default"],"sources":["@wordpress/components/src/tip/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Icon, tip } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { TipProps } from './types';\n\nexport function Tip( props: TipProps ) {\n\tconst { children } = props;\n\n\treturn (\n\t\t<div className=\"components-tip\">\n\t\t\t<Icon icon={ tip } />\n\t\t\t<p>{ children }</p>\n\t\t</div>\n\t);\n}\n\nexport default Tip;\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAQO,SAASC,GAAGA,CAAEC,KAAe,EAAG;EACtC,MAAM;IAAEC;EAAS,CAAC,GAAGD,KAAK;EAE1B,OACC,IAAAE,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAgB,GAC9B,IAAAF,QAAA,CAAAC,aAAA,EAACN,MAAA,CAAAQ,IAAI;IAACC,IAAI,EAAGC;EAAK,CAAE,CAAC,EACrB,IAAAL,QAAA,CAAAC,aAAA,aAAKF,QAAa,CACd,CAAC;AAER;AAAC,IAAAO,QAAA,GAEcT,GAAG;AAAAU,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_icons","require","Tip","props","children","_react","createElement","className","Icon","icon","tip","_default","exports","default"],"sources":["@wordpress/components/src/tip/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Icon, tip } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { TipProps } from './types';\n\nexport function Tip( props: TipProps ) {\n\tconst { children } = props;\n\n\treturn (\n\t\t<div className=\"components-tip\">\n\t\t\t<Icon icon={ tip } />\n\t\t\t<p>{ children }</p>\n\t\t</div>\n\t);\n}\n\nexport default Tip;\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAQO,SAASC,GAAGA,CAAEC,KAAe,EAAG;EACtC,MAAM;IAAEC;EAAS,CAAC,GAAGD,KAAK;EAE1B,OACC,IAAAE,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAgB,GAC9B,IAAAF,MAAA,CAAAC,aAAA,EAACN,MAAA,CAAAQ,IAAI;IAACC,IAAI,EAAGC;EAAK,CAAE,CAAC,EACrB,IAAAL,MAAA,CAAAC,aAAA,aAAKF,QAAa,CACd,CAAC;AAER;AAAC,IAAAO,QAAA,GAEcT,GAAG;AAAAU,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/build/toggle-control/index.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ToggleControl = ToggleControl;
 exports.default = void 0;
-var _element = require("@wordpress/element");
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _compose = require("@wordpress/compose");
 var _flex = require("../flex");
 var _formToggle = _interopRequireDefault(require("../form-toggle"));
 var _baseControl = _interopRequireDefault(require("../base-control"));
 var _hStack = require("../h-stack");
 var _utils = require("../utils");
-var _space = require("../ui/utils/space");
+var _space = require("../utils/space");
 /**
  * External dependencies
  */
@@ -62,9 +62,9 @@ function ToggleControl({
   const instanceId = (0, _compose.useInstanceId)(ToggleControl);
   const id = `inspector-toggle-control-${instanceId}`;
   const cx = (0, _utils.useCx)();
-  const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/(0, _react.css)({
+  const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/(0, _react2.css)({
     marginBottom: (0, _space.space)(3)
-  }, process.env.NODE_ENV === "production" ? "" : ";label:classes;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWNvbnRyb2wvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThEK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtY29udHJvbC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IENoYW5nZUV2ZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlSW5zdGFuY2VJZCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXhCbG9jayB9IGZyb20gJy4uL2ZsZXgnO1xuaW1wb3J0IEZvcm1Ub2dnbGUgZnJvbSAnLi4vZm9ybS10b2dnbGUnO1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vdWkvY29udGV4dC93b3JkcHJlc3MtY29tcG9uZW50JztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlQ29udHJvbFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91aS91dGlscy9zcGFjZSc7XG5cbi8qKlxuICogVG9nZ2xlQ29udHJvbCBpcyB1c2VkIHRvIGdlbmVyYXRlIGEgdG9nZ2xlIHVzZXIgaW50ZXJmYWNlLlxuICpcbiAqIGBgYGpzeFxuICogaW1wb3J0IHsgVG9nZ2xlQ29udHJvbCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKiBpbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG4gKlxuICogY29uc3QgTXlUb2dnbGVDb250cm9sID0gKCkgPT4ge1xuICogICBjb25zdCBbIHZhbHVlLCBzZXRWYWx1ZSBdID0gdXNlU3RhdGUoIGZhbHNlICk7XG4gKlxuICogICByZXR1cm4gKFxuICogICAgIDxUb2dnbGVDb250cm9sXG4gKiAgICAgICBsYWJlbD1cIkZpeGVkIEJhY2tncm91bmRcIlxuICogICAgICAgY2hlY2tlZD17IHZhbHVlIH1cbiAqICAgICAgIG9uQ2hhbmdlPXsgKCkgPT4gc2V0VmFsdWUoICggc3RhdGUgKSA9PiAhIHN0YXRlICkgfVxuICogICAgIC8+XG4gKiAgICk7XG4gKiB9O1xuICogYGBgXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBUb2dnbGVDb250cm9sKCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tLFxuXHRsYWJlbCxcblx0Y2hlY2tlZCxcblx0aGVscCxcblx0Y2xhc3NOYW1lLFxuXHRvbkNoYW5nZSxcblx0ZGlzYWJsZWQsXG59OiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgVG9nZ2xlQ29udHJvbFByb3BzLCAnaW5wdXQnLCBmYWxzZSA+ICkge1xuXHRmdW5jdGlvbiBvbkNoYW5nZVRvZ2dsZSggZXZlbnQ6IENoYW5nZUV2ZW50PCBIVE1MSW5wdXRFbGVtZW50ID4gKSB7XG5cdFx0b25DaGFuZ2UoIGV2ZW50LnRhcmdldC5jaGVja2VkICk7XG5cdH1cblx0Y29uc3QgaW5zdGFuY2VJZCA9IHVzZUluc3RhbmNlSWQoIFRvZ2dsZUNvbnRyb2wgKTtcblx0Y29uc3QgaWQgPSBgaW5zcGVjdG9yLXRvZ2dsZS1jb250cm9sLSR7IGluc3RhbmNlSWQgfWA7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXHRjb25zdCBjbGFzc2VzID0gY3goXG5cdFx0J2NvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2wnLFxuXHRcdGNsYXNzTmFtZSxcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGNzcyggeyBtYXJnaW5Cb3R0b206IHNwYWNlKCAzICkgfSApXG5cdCk7XG5cblx0bGV0IGRlc2NyaWJlZEJ5LCBoZWxwTGFiZWw7XG5cdGlmICggaGVscCApIHtcblx0XHRpZiAoIHR5cGVvZiBoZWxwID09PSAnZnVuY3Rpb24nICkge1xuXHRcdFx0Ly8gYGhlbHBgIGFzIGEgZnVuY3Rpb24gd29ya3Mgb25seSBmb3IgY29udHJvbGxlZCBjb21wb25lbnRzIHdoZXJlXG5cdFx0XHQvLyBgY2hlY2tlZGAgaXMgcGFzc2VkIGRvd24gZnJvbSBwYXJlbnQgY29tcG9uZW50LiBVbmNvbnRyb2xsZWRcblx0XHRcdC8vIGNvbXBvbmVudCBjYW4gc2hvdyBvbmx5IGEgc3RhdGljIGhlbHAgbGFiZWwuXG5cdFx0XHRpZiAoIGNoZWNrZWQgIT09IHVuZGVmaW5lZCApIHtcblx0XHRcdFx0aGVscExhYmVsID0gaGVscCggY2hlY2tlZCApO1xuXHRcdFx0fVxuXHRcdH0gZWxzZSB7XG5cdFx0XHRoZWxwTGFiZWwgPSBoZWxwO1xuXHRcdH1cblx0XHRpZiAoIGhlbHBMYWJlbCApIHtcblx0XHRcdGRlc2NyaWJlZEJ5ID0gaWQgKyAnX19oZWxwJztcblx0XHR9XG5cdH1cblxuXHRyZXR1cm4gKFxuXHRcdDxCYXNlQ29udHJvbFxuXHRcdFx0aWQ9eyBpZCB9XG5cdFx0XHRoZWxwPXsgaGVscExhYmVsIH1cblx0XHRcdGNsYXNzTmFtZT17IGNsYXNzZXMgfVxuXHRcdFx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b21cblx0XHQ+XG5cdFx0XHQ8SFN0YWNrIGp1c3RpZnk9XCJmbGV4LXN0YXJ0XCIgc3BhY2luZz17IDMgfT5cblx0XHRcdFx0PEZvcm1Ub2dnbGVcblx0XHRcdFx0XHRpZD17IGlkIH1cblx0XHRcdFx0XHRjaGVja2VkPXsgY2hlY2tlZCB9XG5cdFx0XHRcdFx0b25DaGFuZ2U9eyBvbkNoYW5nZVRvZ2dsZSB9XG5cdFx0XHRcdFx0YXJpYS1kZXNjcmliZWRieT17IGRlc2NyaWJlZEJ5IH1cblx0XHRcdFx0XHRkaXNhYmxlZD17IGRpc2FibGVkIH1cblx0XHRcdFx0Lz5cblx0XHRcdFx0PEZsZXhCbG9ja1xuXHRcdFx0XHRcdGFzPVwibGFiZWxcIlxuXHRcdFx0XHRcdGh0bWxGb3I9eyBpZCB9XG5cdFx0XHRcdFx0Y2xhc3NOYW1lPVwiY29tcG9uZW50cy10b2dnbGUtY29udHJvbF9fbGFiZWxcIlxuXHRcdFx0XHQ+XG5cdFx0XHRcdFx0eyBsYWJlbCB9XG5cdFx0XHRcdDwvRmxleEJsb2NrPlxuXHRcdFx0PC9IU3RhY2s+XG5cdFx0PC9CYXNlQ29udHJvbD5cblx0KTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgVG9nZ2xlQ29udHJvbDtcbiJdfQ== */"));
+  }, process.env.NODE_ENV === "production" ? "" : ";label:classes;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdG9nZ2xlLWNvbnRyb2wvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThEK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90b2dnbGUtY29udHJvbC9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IENoYW5nZUV2ZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlSW5zdGFuY2VJZCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXhCbG9jayB9IGZyb20gJy4uL2ZsZXgnO1xuaW1wb3J0IEZvcm1Ub2dnbGUgZnJvbSAnLi4vZm9ybS10b2dnbGUnO1xuaW1wb3J0IEJhc2VDb250cm9sIGZyb20gJy4uL2Jhc2UtY29udHJvbCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dC93b3JkcHJlc3MtY29tcG9uZW50JztcbmltcG9ydCB0eXBlIHsgVG9nZ2xlQ29udHJvbFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBIU3RhY2sgfSBmcm9tICcuLi9oLXN0YWNrJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91dGlscy9zcGFjZSc7XG5cbi8qKlxuICogVG9nZ2xlQ29udHJvbCBpcyB1c2VkIHRvIGdlbmVyYXRlIGEgdG9nZ2xlIHVzZXIgaW50ZXJmYWNlLlxuICpcbiAqIGBgYGpzeFxuICogaW1wb3J0IHsgVG9nZ2xlQ29udHJvbCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKiBpbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG4gKlxuICogY29uc3QgTXlUb2dnbGVDb250cm9sID0gKCkgPT4ge1xuICogICBjb25zdCBbIHZhbHVlLCBzZXRWYWx1ZSBdID0gdXNlU3RhdGUoIGZhbHNlICk7XG4gKlxuICogICByZXR1cm4gKFxuICogICAgIDxUb2dnbGVDb250cm9sXG4gKiAgICAgICBsYWJlbD1cIkZpeGVkIEJhY2tncm91bmRcIlxuICogICAgICAgY2hlY2tlZD17IHZhbHVlIH1cbiAqICAgICAgIG9uQ2hhbmdlPXsgKCkgPT4gc2V0VmFsdWUoICggc3RhdGUgKSA9PiAhIHN0YXRlICkgfVxuICogICAgIC8+XG4gKiAgICk7XG4gKiB9O1xuICogYGBgXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBUb2dnbGVDb250cm9sKCB7XG5cdF9fbmV4dEhhc05vTWFyZ2luQm90dG9tLFxuXHRsYWJlbCxcblx0Y2hlY2tlZCxcblx0aGVscCxcblx0Y2xhc3NOYW1lLFxuXHRvbkNoYW5nZSxcblx0ZGlzYWJsZWQsXG59OiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgVG9nZ2xlQ29udHJvbFByb3BzLCAnaW5wdXQnLCBmYWxzZSA+ICkge1xuXHRmdW5jdGlvbiBvbkNoYW5nZVRvZ2dsZSggZXZlbnQ6IENoYW5nZUV2ZW50PCBIVE1MSW5wdXRFbGVtZW50ID4gKSB7XG5cdFx0b25DaGFuZ2UoIGV2ZW50LnRhcmdldC5jaGVja2VkICk7XG5cdH1cblx0Y29uc3QgaW5zdGFuY2VJZCA9IHVzZUluc3RhbmNlSWQoIFRvZ2dsZUNvbnRyb2wgKTtcblx0Y29uc3QgaWQgPSBgaW5zcGVjdG9yLXRvZ2dsZS1jb250cm9sLSR7IGluc3RhbmNlSWQgfWA7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXHRjb25zdCBjbGFzc2VzID0gY3goXG5cdFx0J2NvbXBvbmVudHMtdG9nZ2xlLWNvbnRyb2wnLFxuXHRcdGNsYXNzTmFtZSxcblx0XHQhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tICYmIGNzcyggeyBtYXJnaW5Cb3R0b206IHNwYWNlKCAzICkgfSApXG5cdCk7XG5cblx0bGV0IGRlc2NyaWJlZEJ5LCBoZWxwTGFiZWw7XG5cdGlmICggaGVscCApIHtcblx0XHRpZiAoIHR5cGVvZiBoZWxwID09PSAnZnVuY3Rpb24nICkge1xuXHRcdFx0Ly8gYGhlbHBgIGFzIGEgZnVuY3Rpb24gd29ya3Mgb25seSBmb3IgY29udHJvbGxlZCBjb21wb25lbnRzIHdoZXJlXG5cdFx0XHQvLyBgY2hlY2tlZGAgaXMgcGFzc2VkIGRvd24gZnJvbSBwYXJlbnQgY29tcG9uZW50LiBVbmNvbnRyb2xsZWRcblx0XHRcdC8vIGNvbXBvbmVudCBjYW4gc2hvdyBvbmx5IGEgc3RhdGljIGhlbHAgbGFiZWwuXG5cdFx0XHRpZiAoIGNoZWNrZWQgIT09IHVuZGVmaW5lZCApIHtcblx0XHRcdFx0aGVscExhYmVsID0gaGVscCggY2hlY2tlZCApO1xuXHRcdFx0fVxuXHRcdH0gZWxzZSB7XG5cdFx0XHRoZWxwTGFiZWwgPSBoZWxwO1xuXHRcdH1cblx0XHRpZiAoIGhlbHBMYWJlbCApIHtcblx0XHRcdGRlc2NyaWJlZEJ5ID0gaWQgKyAnX19oZWxwJztcblx0XHR9XG5cdH1cblxuXHRyZXR1cm4gKFxuXHRcdDxCYXNlQ29udHJvbFxuXHRcdFx0aWQ9eyBpZCB9XG5cdFx0XHRoZWxwPXsgaGVscExhYmVsIH1cblx0XHRcdGNsYXNzTmFtZT17IGNsYXNzZXMgfVxuXHRcdFx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b21cblx0XHQ+XG5cdFx0XHQ8SFN0YWNrIGp1c3RpZnk9XCJmbGV4LXN0YXJ0XCIgc3BhY2luZz17IDMgfT5cblx0XHRcdFx0PEZvcm1Ub2dnbGVcblx0XHRcdFx0XHRpZD17IGlkIH1cblx0XHRcdFx0XHRjaGVja2VkPXsgY2hlY2tlZCB9XG5cdFx0XHRcdFx0b25DaGFuZ2U9eyBvbkNoYW5nZVRvZ2dsZSB9XG5cdFx0XHRcdFx0YXJpYS1kZXNjcmliZWRieT17IGRlc2NyaWJlZEJ5IH1cblx0XHRcdFx0XHRkaXNhYmxlZD17IGRpc2FibGVkIH1cblx0XHRcdFx0Lz5cblx0XHRcdFx0PEZsZXhCbG9ja1xuXHRcdFx0XHRcdGFzPVwibGFiZWxcIlxuXHRcdFx0XHRcdGh0bWxGb3I9eyBpZCB9XG5cdFx0XHRcdFx0Y2xhc3NOYW1lPVwiY29tcG9uZW50cy10b2dnbGUtY29udHJvbF9fbGFiZWxcIlxuXHRcdFx0XHQ+XG5cdFx0XHRcdFx0eyBsYWJlbCB9XG5cdFx0XHRcdDwvRmxleEJsb2NrPlxuXHRcdFx0PC9IU3RhY2s+XG5cdFx0PC9CYXNlQ29udHJvbD5cblx0KTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgVG9nZ2xlQ29udHJvbDtcbiJdfQ== */"));
   let describedBy, helpLabel;
   if (help) {
     if (typeof help === 'function') {
@@ -81,21 +81,21 @@ function ToggleControl({
       describedBy = id + '__help';
     }
   }
-  return (0, _element.createElement)(_baseControl.default, {
+  return (0, _react.createElement)(_baseControl.default, {
     id: id,
     help: helpLabel,
     className: classes,
     __nextHasNoMarginBottom: true
-  }, (0, _element.createElement)(_hStack.HStack, {
+  }, (0, _react.createElement)(_hStack.HStack, {
     justify: "flex-start",
     spacing: 3
-  }, (0, _element.createElement)(_formToggle.default, {
+  }, (0, _react.createElement)(_formToggle.default, {
     id: id,
     checked: checked,
     onChange: onChangeToggle,
     "aria-describedby": describedBy,
     disabled: disabled
-  }), (0, _element.createElement)(_flex.FlexBlock, {
+  }), (0, _react.createElement)(_flex.FlexBlock, {
     as: "label",
     htmlFor: id,
     className: "components-toggle-control__label"

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

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_compose","_flex","_formToggle","_interopRequireDefault","_baseControl","_hStack","_utils","_space","ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","onChangeToggle","event","target","instanceId","useInstanceId","id","cx","useCx","classes","css","marginBottom","space","process","env","NODE_ENV","describedBy","helpLabel","undefined","_element","createElement","default","HStack","justify","spacing","FlexBlock","as","htmlFor","_default","exports"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"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"],"mappings":";;;;;;;;;AAIA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAD,sBAAA,CAAAJ,OAAA;AAGA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;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,SAASS,aAAaA,CAAE;EAC9BC,uBAAuB;EACvBC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC;AAC8D,CAAC,EAAG;EAClE,SAASC,cAAcA,CAAEC,KAAsC,EAAG;IACjEH,QAAQ,CAAEG,KAAK,CAACC,MAAM,CAACP,OAAQ,CAAC;EACjC;EACA,MAAMQ,UAAU,GAAG,IAAAC,sBAAa,EAAEZ,aAAc,CAAC;EACjD,MAAMa,EAAE,GAAI,4BAA4BF,UAAY,EAAC;EAErD,MAAMG,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAClB,MAAMC,OAAO,GAAGF,EAAE,CACjB,2BAA2B,EAC3BT,SAAS,EACT,CAAEJ,uBAAuB,iBAAI,IAAAgB,UAAG,EAAE;IAAEC,YAAY,EAAE,IAAAC,YAAK,EAAE,CAAE;EAAE,CAAC,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,4CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,0lIAAC,CAChE,CAAC;EAED,IAAIC,WAAW,EAAEC,SAAS;EAC1B,IAAKpB,IAAI,EAAG;IACX,IAAK,OAAOA,IAAI,KAAK,UAAU,EAAG;MACjC;MACA;MACA;MACA,IAAKD,OAAO,KAAKsB,SAAS,EAAG;QAC5BD,SAAS,GAAGpB,IAAI,CAAED,OAAQ,CAAC;MAC5B;IACD,CAAC,MAAM;MACNqB,SAAS,GAAGpB,IAAI;IACjB;IACA,IAAKoB,SAAS,EAAG;MAChBD,WAAW,GAAGV,EAAE,GAAG,QAAQ;IAC5B;EACD;EAEA,OACC,IAAAa,QAAA,CAAAC,aAAA,EAAC/B,YAAA,CAAAgC,OAAW;IACXf,EAAE,EAAGA,EAAI;IACTT,IAAI,EAAGoB,SAAW;IAClBnB,SAAS,EAAGW,OAAS;IACrBf,uBAAuB;EAAA,GAEvB,IAAAyB,QAAA,CAAAC,aAAA,EAAC9B,OAAA,CAAAgC,MAAM;IAACC,OAAO,EAAC,YAAY;IAACC,OAAO,EAAG;EAAG,GACzC,IAAAL,QAAA,CAAAC,aAAA,EAACjC,WAAA,CAAAkC,OAAU;IACVf,EAAE,EAAGA,EAAI;IACTV,OAAO,EAAGA,OAAS;IACnBG,QAAQ,EAAGE,cAAgB;IAC3B,oBAAmBe,WAAa;IAChChB,QAAQ,EAAGA;EAAU,CACrB,CAAC,EACF,IAAAmB,QAAA,CAAAC,aAAA,EAAClC,KAAA,CAAAuC,SAAS;IACTC,EAAE,EAAC,OAAO;IACVC,OAAO,EAAGrB,EAAI;IACdR,SAAS,EAAC;EAAkC,GAE1CH,KACQ,CACJ,CACI,CAAC;AAEhB;AAAC,IAAAiC,QAAA,GAEcnC,aAAa;AAAAoC,OAAA,CAAAR,OAAA,GAAAO,QAAA"}
+{"version":3,"names":["_react2","require","_compose","_flex","_formToggle","_interopRequireDefault","_baseControl","_hStack","_utils","_space","ToggleControl","__nextHasNoMarginBottom","label","checked","help","className","onChange","disabled","onChangeToggle","event","target","instanceId","useInstanceId","id","cx","useCx","classes","css","marginBottom","space","process","env","NODE_ENV","describedBy","helpLabel","undefined","_react","createElement","default","HStack","justify","spacing","FlexBlock","as","htmlFor","_default","exports"],"sources":["@wordpress/components/src/toggle-control/index.tsx"],"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 '../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__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"],"mappings":";;;;;;;;;AAIA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAD,sBAAA,CAAAJ,OAAA;AAGA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;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,SAASS,aAAaA,CAAE;EAC9BC,uBAAuB;EACvBC,KAAK;EACLC,OAAO;EACPC,IAAI;EACJC,SAAS;EACTC,QAAQ;EACRC;AAC8D,CAAC,EAAG;EAClE,SAASC,cAAcA,CAAEC,KAAsC,EAAG;IACjEH,QAAQ,CAAEG,KAAK,CAACC,MAAM,CAACP,OAAQ,CAAC;EACjC;EACA,MAAMQ,UAAU,GAAG,IAAAC,sBAAa,EAAEZ,aAAc,CAAC;EACjD,MAAMa,EAAE,GAAI,4BAA4BF,UAAY,EAAC;EAErD,MAAMG,EAAE,GAAG,IAAAC,YAAK,EAAC,CAAC;EAClB,MAAMC,OAAO,GAAGF,EAAE,CACjB,2BAA2B,EAC3BT,SAAS,EACT,CAAEJ,uBAAuB,iBAAI,IAAAgB,WAAG,EAAE;IAAEC,YAAY,EAAE,IAAAC,YAAK,EAAE,CAAE;EAAE,CAAC,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,4CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,klIAAC,CAChE,CAAC;EAED,IAAIC,WAAW,EAAEC,SAAS;EAC1B,IAAKpB,IAAI,EAAG;IACX,IAAK,OAAOA,IAAI,KAAK,UAAU,EAAG;MACjC;MACA;MACA;MACA,IAAKD,OAAO,KAAKsB,SAAS,EAAG;QAC5BD,SAAS,GAAGpB,IAAI,CAAED,OAAQ,CAAC;MAC5B;IACD,CAAC,MAAM;MACNqB,SAAS,GAAGpB,IAAI;IACjB;IACA,IAAKoB,SAAS,EAAG;MAChBD,WAAW,GAAGV,EAAE,GAAG,QAAQ;IAC5B;EACD;EAEA,OACC,IAAAa,MAAA,CAAAC,aAAA,EAAC/B,YAAA,CAAAgC,OAAW;IACXf,EAAE,EAAGA,EAAI;IACTT,IAAI,EAAGoB,SAAW;IAClBnB,SAAS,EAAGW,OAAS;IACrBf,uBAAuB;EAAA,GAEvB,IAAAyB,MAAA,CAAAC,aAAA,EAAC9B,OAAA,CAAAgC,MAAM;IAACC,OAAO,EAAC,YAAY;IAACC,OAAO,EAAG;EAAG,GACzC,IAAAL,MAAA,CAAAC,aAAA,EAACjC,WAAA,CAAAkC,OAAU;IACVf,EAAE,EAAGA,EAAI;IACTV,OAAO,EAAGA,OAAS;IACnBG,QAAQ,EAAGE,cAAgB;IAC3B,oBAAmBe,WAAa;IAChChB,QAAQ,EAAGA;EAAU,CACrB,CAAC,EACF,IAAAmB,MAAA,CAAAC,aAAA,EAAClC,KAAA,CAAAuC,SAAS;IACTC,EAAE,EAAC,OAAO;IACVC,OAAO,EAAGrB,EAAI;IACdR,SAAS,EAAC;EAAkC,GAE1CH,KACQ,CACJ,CACI,CAAC;AAEhB;AAAC,IAAAiC,QAAA,GAEcnC,aAAa;AAAAoC,OAAA,CAAAR,OAAA,GAAAO,QAAA"}

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 var _element = require("@wordpress/element");
 var _switchCell = _interopRequireDefault(require("../mobile/bottom-sheet/switch-cell"));
 /**
@@ -26,7 +27,7 @@ const ToggleControl = (0, _element.memo)(({
 }) => {
   const id = `inspector-toggle-control-${instanceId}`;
   const helpLabel = help && typeof help === 'function' ? help(checked) : help;
-  return (0, _element.createElement)(_switchCell.default, {
+  return (0, _react.createElement)(_switchCell.default, {
     label: label,
     id: id,
     help: helpLabel,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_switchCell","_interopRequireDefault","ToggleControl","memo","label","checked","help","instanceId","className","onChange","props","id","helpLabel","createElement","default","value","onValueChange","_default","exports"],"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":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAIA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAPA;AACA;AACA;;AAEA;AACA;AACA;;AAGA,MAAMG,aAAa,GAAG,IAAAC,aAAI,EACzB,CAAE;EAAEC,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,OACC,IAAAR,QAAA,CAAAe,aAAA,EAACb,WAAA,CAAAc,OAAU;IACVV,KAAK,EAAGA,KAAO;IACfO,EAAE,EAAGA,EAAI;IACTL,IAAI,EAAGM,SAAW;IAClBJ,SAAS,EAAGA,SAAW;IACvBO,KAAK,EAAGV,OAAS;IACjBW,aAAa,EAAGP,QAAU;IAAA,GACrBC;EAAK,CACV,CAAC;AAEJ,CACD,CAAC;AAAC,IAAAO,QAAA,GAEaf,aAAa;AAAAgB,OAAA,CAAAJ,OAAA,GAAAG,QAAA"}
+{"version":3,"names":["_element","require","_switchCell","_interopRequireDefault","ToggleControl","memo","label","checked","help","instanceId","className","onChange","props","id","helpLabel","_react","createElement","default","value","onValueChange","_default","exports"],"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":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAIA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAPA;AACA;AACA;;AAEA;AACA;AACA;;AAGA,MAAMG,aAAa,GAAG,IAAAC,aAAI,EACzB,CAAE;EAAEC,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,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACd,WAAA,CAAAe,OAAU;IACVX,KAAK,EAAGA,KAAO;IACfO,EAAE,EAAGA,EAAI;IACTL,IAAI,EAAGM,SAAW;IAClBJ,SAAS,EAAGA,SAAW;IACvBQ,KAAK,EAAGX,OAAS;IACjBY,aAAa,EAAGR,QAAU;IAAA,GACrBC;EAAK,CACV,CAAC;AAEJ,CACD,CAAC;AAAC,IAAAQ,QAAA,GAEahB,aAAa;AAAAiB,OAAA,CAAAJ,OAAA,GAAAG,QAAA"}

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

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToggleGroupControlAsButtonGroup = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _view = require("../../view");
 var _utils = require("../../utils");
 var _context = _interopRequireDefault(require("../context"));
@@ -53,9 +54,9 @@ function UnforwardedToggleGroupControlAsButtonGroup({
     isDeselectable: true,
     size
   }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size]);
-  return (0, _element.createElement)(_context.default.Provider, {
+  return (0, _react.createElement)(_context.default.Provider, {
     value: groupContextValue
-  }, (0, _element.createElement)(_view.View, {
+  }, (0, _react.createElement)(_view.View, {
     "aria-label": label,
     ...otherProps,
     ref: forwardedRef,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_view","_utils","_context","_interopRequireDefault","_utils2","UnforwardedToggleGroupControlAsButtonGroup","children","isAdaptiveWidth","label","onChange","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsButtonGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","selectedValue","setSelectedValue","useControlledValue","groupContextValue","useMemo","setValue","isBlock","isDeselectable","createElement","default","Provider","View","ref","role","forwardRef","exports"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsButtonGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsButtonGroup,\n\t\t'toggle-group-control-as-button-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\tconst [ selectedValue, setSelectedValue ] = useControlledValue( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tonChange,\n\t} );\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue: setSelectedValue,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tisDeselectable: true,\n\t\t\t\tsize,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<View\n\t\t\t\taria-label={ label }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\trole=\"group\"\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsButtonGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsButtonGroup\n);\n"],"mappings":";;;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AADA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAbA;AACA;AACA;;AAIA;AACA;AACA;;AAWA,SAASO,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,GAAG,IAAAC,sBAAa,EAChCC,+BAA+B,EAC/B,sCACD,CAAC;EACD,MAAMC,MAAM,GAAGN,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAEU;EAAa,CAAC,GAC5B,IAAAC,+CAAuC,EAAEV,SAAU,CAAC;EAErD,MAAM,CAAEW,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,yBAAkB,EAAE;IAC/DJ,YAAY;IACZV,KAAK;IACLF;EACD,CAAE,CAAC;EAEH,MAAMiB,iBAAiB,GAAG,IAAAC,gBAAO,EAChC,OACG;IACDP,MAAM;IACNT,KAAK,EAAEY,aAAa;IACpBK,QAAQ,EAAEJ,gBAAgB;IAC1BK,OAAO,EAAE,CAAEtB,eAAe;IAC1BuB,cAAc,EAAE,IAAI;IACpBpB;EACD,CAAC,CAAoC,EACtC,CAAEU,MAAM,EAAEG,aAAa,EAAEC,gBAAgB,EAAEjB,eAAe,EAAEG,IAAI,CACjE,CAAC;EAED,OACC,IAAAb,QAAA,CAAAkC,aAAA,EAAC7B,QAAA,CAAA8B,OAAyB,CAACC,QAAQ;IAACtB,KAAK,EAAGe;EAAmB,GAC9D,IAAA7B,QAAA,CAAAkC,aAAA,EAAC/B,KAAA,CAAAkC,IAAI;IACJ,cAAa1B,KAAO;IAAA,GACfO,UAAU;IACfoB,GAAG,EAAGnB,YAAc;IACpBoB,IAAI,EAAC;EAAO,GAEV9B,QACG,CAC6B,CAAC;AAEvC;AAEO,MAAMa,+BAA+B,GAAG,IAAAkB,mBAAU,EACxDhC,0CACD,CAAC;AAACiC,OAAA,CAAAnB,+BAAA,GAAAA,+BAAA"}
+{"version":3,"names":["_compose","require","_element","_view","_utils","_context","_interopRequireDefault","_utils2","UnforwardedToggleGroupControlAsButtonGroup","children","isAdaptiveWidth","label","onChange","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsButtonGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","selectedValue","setSelectedValue","useControlledValue","groupContextValue","useMemo","setValue","isBlock","isDeselectable","_react","createElement","default","Provider","View","ref","role","forwardRef","exports"],"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":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAbA;AACA;AACA;;AAIA;AACA;AACA;;AAWA,SAASO,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,GAAG,IAAAC,sBAAa,EAChCC,+BAA+B,EAC/B,sCACD,CAAC;EACD,MAAMC,MAAM,GAAGN,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAEU;EAAa,CAAC,GAC5B,IAAAC,+CAAuC,EAAEV,SAAU,CAAC;EAErD,MAAM,CAAEW,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,yBAAkB,EAAE;IAC/DJ,YAAY;IACZV,KAAK;IACLF;EACD,CAAE,CAAC;EAEH,MAAMiB,iBAAiB,GAAG,IAAAC,gBAAO,EAChC,OACG;IACDP,MAAM;IACNT,KAAK,EAAEY,aAAa;IACpBK,QAAQ,EAAEJ,gBAAgB;IAC1BK,OAAO,EAAE,CAAEtB,eAAe;IAC1BuB,cAAc,EAAE,IAAI;IACpBpB;EACD,CAAC,CAAoC,EACtC,CAAEU,MAAM,EAAEG,aAAa,EAAEC,gBAAgB,EAAEjB,eAAe,EAAEG,IAAI,CACjE,CAAC;EAED,OACC,IAAAqB,MAAA,CAAAC,aAAA,EAAC9B,QAAA,CAAA+B,OAAyB,CAACC,QAAQ;IAACvB,KAAK,EAAGe;EAAmB,GAC9D,IAAAK,MAAA,CAAAC,aAAA,EAAChC,KAAA,CAAAmC,IAAI;IACJ,cAAa3B,KAAO;IAAA,GACfO,UAAU;IACfqB,GAAG,EAAGpB,YAAc;IACpBqB,IAAI,EAAC;EAAO,GAEV/B,QACG,CAC6B,CAAC;AAEvC;AAEO,MAAMa,+BAA+B,GAAG,IAAAmB,mBAAU,EACxDjC,0CACD,CAAC;AAACkC,OAAA,CAAApB,+BAAA,GAAAA,+BAAA"}

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

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToggleGroupControlAsRadioGroup = void 0;
-var _element = require("@wordpress/element");
-var _radio = require("@ariakit/react/radio");
+var _react = require("react");
+var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _view = require("../../view");
 var _context = _interopRequireDefault(require("../context"));
 var _utils = require("./utils");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * External dependencies
  */
@@ -52,7 +55,7 @@ function UnforwardedToggleGroupControlAsRadioGroup({
   const wrappedOnChangeProp = onChangeProp ? v => {
     onChangeProp(v !== null && v !== void 0 ? v : undefined);
   } : undefined;
-  const radio = (0, _radio.useRadioStore)({
+  const radio = Ariakit.useRadioStore({
     defaultValue,
     value,
     setValue: wrappedOnChangeProp
@@ -66,12 +69,12 @@ function UnforwardedToggleGroupControlAsRadioGroup({
     value: selectedValue,
     setValue
   }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]);
-  return (0, _element.createElement)(_context.default.Provider, {
+  return (0, _react.createElement)(_context.default.Provider, {
     value: groupContextValue
-  }, (0, _element.createElement)(_radio.RadioGroup, {
+  }, (0, _react.createElement)(Ariakit.RadioGroup, {
     store: radio,
     "aria-label": label,
-    as: _view.View,
+    render: (0, _react.createElement)(_view.View, null),
     ...otherProps,
     id: baseId,
     ref: forwardedRef

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_radio","_compose","_view","_context","_interopRequireDefault","_utils","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","selectedValue","useState","groupContextValue","useMemo","isBlock","createElement","default","Provider","RadioGroup","store","as","View","ref","forwardRef","exports"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { RadioGroup, useRadioStore } from '@ariakit/react/radio';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport type {\n\tToggleGroupControlMainControlProps,\n\tToggleGroupControlContextProps,\n} from '../types';\n\nfunction UnforwardedToggleGroupControlAsRadioGroup(\n\t{\n\t\tchildren,\n\t\tisAdaptiveWidth,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tsize,\n\t\tvalue: valueProp,\n\t\tid: idProp,\n\t\t...otherProps\n\t}: WordPressComponentProps<\n\t\tToggleGroupControlMainControlProps,\n\t\t'div',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst generatedId = useInstanceId(\n\t\tToggleGroupControlAsRadioGroup,\n\t\t'toggle-group-control-as-radio-group'\n\t);\n\tconst baseId = idProp || generatedId;\n\n\t// Use a heuristic to understand if the component is being used in controlled\n\t// or uncontrolled mode, and consequently:\n\t// - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n\t// - use the `value` prop as the `defaultValue` when uncontrolled\n\tconst { value, defaultValue } =\n\t\tuseComputeControlledOrUncontrolledValue( valueProp );\n\n\t// `useRadioStore`'s `setValue` prop can be called with `null`, while\n\t// the component's `onChange` prop only expects `undefined`\n\tconst wrappedOnChangeProp = onChangeProp\n\t\t? ( v: string | number | null ) => {\n\t\t\t\tonChangeProp( v ?? undefined );\n\t\t  }\n\t\t: undefined;\n\n\tconst radio = useRadioStore( {\n\t\tdefaultValue,\n\t\tvalue,\n\t\tsetValue: wrappedOnChangeProp,\n\t} );\n\n\tconst selectedValue = radio.useState( 'value' );\n\tconst setValue = radio.setValue;\n\n\tconst groupContextValue = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tbaseId,\n\t\t\t\tisBlock: ! isAdaptiveWidth,\n\t\t\t\tsize,\n\t\t\t\tvalue: selectedValue,\n\t\t\t\tsetValue,\n\t\t\t} ) as ToggleGroupControlContextProps,\n\t\t[ baseId, isAdaptiveWidth, size, selectedValue, setValue ]\n\t);\n\n\treturn (\n\t\t<ToggleGroupControlContext.Provider value={ groupContextValue }>\n\t\t\t<RadioGroup\n\t\t\t\tstore={ radio }\n\t\t\t\taria-label={ label }\n\t\t\t\tas={ View }\n\t\t\t\t{ ...otherProps }\n\t\t\t\tid={ baseId }\n\t\t\t\tref={ forwardedRef }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</RadioGroup>\n\t\t</ToggleGroupControlContext.Provider>\n\t);\n}\n\nexport const ToggleGroupControlAsRadioGroup = forwardRef(\n\tUnforwardedToggleGroupControlAsRadioGroup\n);\n"],"mappings":";;;;;;;AAWA,IAAAA,QAAA,GAAAC,OAAA;AANA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AAMA,IAAAG,KAAA,GAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAnBA;AACA;AACA;;AAEA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAUA,SAASO,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,GAAG,IAAAC,sBAAa,EAChCC,8BAA8B,EAC9B,qCACD,CAAC;EACD,MAAMC,MAAM,GAAGN,MAAM,IAAIG,WAAW;;EAEpC;EACA;EACA;EACA;EACA,MAAM;IAAEN,KAAK;IAAEU;EAAa,CAAC,GAC5B,IAAAC,8CAAuC,EAAEV,SAAU,CAAC;;EAErD;EACA;EACA,MAAMW,mBAAmB,GAAGd,YAAY,GACnCe,CAAyB,IAAM;IACjCf,YAAY,CAAEe,CAAC,aAADA,CAAC,cAADA,CAAC,GAAIC,SAAU,CAAC;EAC9B,CAAC,GACDA,SAAS;EAEZ,MAAMC,KAAK,GAAG,IAAAC,oBAAa,EAAE;IAC5BN,YAAY;IACZV,KAAK;IACLiB,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,IAAAC,gBAAO,EAChC,OACG;IACDZ,MAAM;IACNa,OAAO,EAAE,CAAE3B,eAAe;IAC1BI,IAAI;IACJC,KAAK,EAAEkB,aAAa;IACpBD;EACD,CAAC,CAAoC,EACtC,CAAER,MAAM,EAAEd,eAAe,EAAEI,IAAI,EAAEmB,aAAa,EAAED,QAAQ,CACzD,CAAC;EAED,OACC,IAAAhC,QAAA,CAAAsC,aAAA,EAACjC,QAAA,CAAAkC,OAAyB,CAACC,QAAQ;IAACzB,KAAK,EAAGoB;EAAmB,GAC9D,IAAAnC,QAAA,CAAAsC,aAAA,EAACpC,MAAA,CAAAuC,UAAU;IACVC,KAAK,EAAGZ,KAAO;IACf,cAAanB,KAAO;IACpBgC,EAAE,EAAGC,UAAM;IAAA,GACNzB,UAAU;IACfF,EAAE,EAAGO,MAAQ;IACbqB,GAAG,EAAGzB;EAAc,GAElBX,QACS,CACuB,CAAC;AAEvC;AAEO,MAAMc,8BAA8B,GAAG,IAAAuB,mBAAU,EACvDtC,yCACD,CAAC;AAACuC,OAAA,CAAAxB,8BAAA,GAAAA,8BAAA"}
+{"version":3,"names":["Ariakit","_interopRequireWildcard","require","_compose","_element","_view","_context","_interopRequireDefault","_utils","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","UnforwardedToggleGroupControlAsRadioGroup","children","isAdaptiveWidth","label","onChange","onChangeProp","size","value","valueProp","id","idProp","otherProps","forwardedRef","generatedId","useInstanceId","ToggleGroupControlAsRadioGroup","baseId","defaultValue","useComputeControlledOrUncontrolledValue","wrappedOnChangeProp","v","undefined","radio","useRadioStore","setValue","selectedValue","useState","groupContextValue","useMemo","isBlock","_react","createElement","Provider","RadioGroup","store","render","View","ref","forwardRef","exports"],"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":"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"}

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

@@ -5,10 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ToggleGroupControl = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _framerMotion = require("framer-motion");
 var _compose = require("@wordpress/compose");
-var _context = require("../../ui/context");
+var _element = require("@wordpress/element");
+var _context = require("../../context");
 var _hooks = require("../../utils/hooks");
 var _baseControl = _interopRequireDefault(require("../../base-control"));
 var styles = _interopRequireWildcard(require("./styles"));
@@ -50,10 +51,10 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     size
   }), isBlock && styles.block, className), [className, cx, isBlock, isDeselectable, size]);
   const MainControl = isDeselectable ? _asButtonGroup.ToggleGroupControlAsButtonGroup : _asRadioGroup.ToggleGroupControlAsRadioGroup;
-  return (0, _element.createElement)(_baseControl.default, {
+  return (0, _react.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, {
+  }, !hideLabelFromVision && (0, _react.createElement)(styles.VisualLabelWrapper, null, (0, _react.createElement)(_baseControl.default.VisualLabel, null, label)), (0, _react.createElement)(MainControl, {
     ...otherProps,
     className: classes,
     isAdaptiveWidth: isAdaptiveWidth,
@@ -62,7 +63,7 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     ref: forwardedRef,
     size: size,
     value: value
-  }, (0, _element.createElement)(_framerMotion.LayoutGroup, {
+  }, (0, _react.createElement)(_framerMotion.LayoutGroup, {
     id: baseId
   }, children)));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_framerMotion","_compose","_context","_hooks","_baseControl","_interopRequireDefault","styles","_interopRequireWildcard","_asRadioGroup","_asButtonGroup","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","useContextSystem","baseId","useInstanceId","ToggleGroupControl","cx","useCx","classes","useMemo","toggleGroupControl","block","MainControl","ToggleGroupControlAsButtonGroup","ToggleGroupControlAsRadioGroup","createElement","VisualLabelWrapper","VisualLabel","ref","LayoutGroup","id","contextConnect","exports","_default"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { LayoutGroup } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../ui/context';\nimport { contextConnect, useContextSystem } from '../../ui/context';\nimport { useCx } from '../../utils/hooks';\nimport BaseControl from '../../base-control';\nimport type { ToggleGroupControlProps } from '../types';\nimport { VisualLabelWrapper } from './styles';\nimport * as styles from './styles';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\n\nfunction UnconnectedToggleGroupControl(\n\tprops: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\n\tconst baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.toggleGroupControl( { isBlock, isDeselectable, size } ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, size ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t<LayoutGroup id={ baseId }>{ children }</LayoutGroup>\n\t\t\t</MainControl>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":"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"}
+{"version":3,"names":["_framerMotion","require","_compose","_element","_context","_hooks","_baseControl","_interopRequireDefault","styles","_interopRequireWildcard","_asRadioGroup","_asButtonGroup","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","UnconnectedToggleGroupControl","props","forwardedRef","__nextHasNoMarginBottom","className","isAdaptiveWidth","isBlock","isDeselectable","label","hideLabelFromVision","help","onChange","size","value","children","otherProps","useContextSystem","baseId","useInstanceId","ToggleGroupControl","cx","useCx","classes","useMemo","toggleGroupControl","block","MainControl","ToggleGroupControlAsButtonGroup","ToggleGroupControlAsRadioGroup","_react","createElement","VisualLabelWrapper","VisualLabel","ref","LayoutGroup","id","contextConnect","exports","_default"],"sources":["@wordpress/components/src/toggle-group-control/toggle-group-control/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { LayoutGroup } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../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\tclassName,\n\t\tisAdaptiveWidth = false,\n\t\tisBlock = false,\n\t\tisDeselectable = false,\n\t\tlabel,\n\t\thideLabelFromVision = false,\n\t\thelp,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToggleGroupControl' );\n\n\tconst baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );\n\n\tconst cx = useCx();\n\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tstyles.toggleGroupControl( { isBlock, isDeselectable, size } ),\n\t\t\t\tisBlock && styles.block,\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx, isBlock, isDeselectable, size ]\n\t);\n\n\tconst MainControl = isDeselectable\n\t\t? ToggleGroupControlAsButtonGroup\n\t\t: ToggleGroupControlAsRadioGroup;\n\n\treturn (\n\t\t<BaseControl\n\t\t\thelp={ help }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t>\n\t\t\t{ ! hideLabelFromVision && (\n\t\t\t\t<VisualLabelWrapper>\n\t\t\t\t\t<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>\n\t\t\t\t</VisualLabelWrapper>\n\t\t\t) }\n\t\t\t<MainControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName={ classes }\n\t\t\t\tisAdaptiveWidth={ isAdaptiveWidth }\n\t\t\t\tlabel={ label }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tvalue={ value }\n\t\t\t>\n\t\t\t\t<LayoutGroup id={ baseId }>{ children }</LayoutGroup>\n\t\t\t</MainControl>\n\t\t</BaseControl>\n\t);\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(\n\tUnconnectedToggleGroupControl,\n\t'ToggleGroupControl'\n);\n\nexport default ToggleGroupControl;\n"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ToggleGroupControlOption = void 0;
+var _react = require("react");
 var _element = require("@wordpress/element");
 var _toggleGroupControlOptionBase = require("../toggle-group-control-option-base");
 /**
@@ -20,7 +21,7 @@ function UnforwardedToggleGroupControlOption(props, ref) {
     ...restProps
   } = props;
   const optionLabel = restProps['aria-label'] || label;
-  return (0, _element.createElement)(_toggleGroupControlOptionBase.ToggleGroupControlOptionBase, {
+  return (0, _react.createElement)(_toggleGroupControlOptionBase.ToggleGroupControlOptionBase, {
     ...restProps,
     "aria-label": optionLabel,
     ref: ref

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_toggleGroupControlOptionBase","UnforwardedToggleGroupControlOption","props","ref","label","restProps","optionLabel","createElement","ToggleGroupControlOptionBase","ToggleGroupControlOption","forwardRef","exports","_default","default"],"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 '../../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"],"mappings":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAOA,IAAAC,6BAAA,GAAAD,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAUA,SAASE,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,OACC,IAAAN,QAAA,CAAAS,aAAA,EAACP,6BAAA,CAAAQ,4BAA4B;IAAA,GACvBH,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;AACO,MAAMK,wBAAwB,GAAG,IAAAC,mBAAU,EACjDT,mCACD,CAAC;AAACU,OAAA,CAAAF,wBAAA,GAAAA,wBAAA;AAAA,IAAAG,QAAA,GAEaH,wBAAwB;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}
+{"version":3,"names":["_element","require","_toggleGroupControlOptionBase","UnforwardedToggleGroupControlOption","props","ref","label","restProps","optionLabel","_react","createElement","ToggleGroupControlOptionBase","ToggleGroupControlOption","forwardRef","exports","_default","default"],"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":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAOA,IAAAC,6BAAA,GAAAD,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAUA,SAASE,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,OACC,IAAAG,MAAA,CAAAC,aAAA,EAACR,6BAAA,CAAAS,4BAA4B;IAAA,GACvBJ,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;AACO,MAAMM,wBAAwB,GAAG,IAAAC,mBAAU,EACjDV,mCACD,CAAC;AAACW,OAAA,CAAAF,wBAAA,GAAAA,wBAAA;AAAA,IAAAG,QAAA,GAEaH,wBAAwB;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

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

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
-var _radio = require("@ariakit/react/radio");
+var _react = require("react");
+var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
 var _framerMotion = require("framer-motion");
 var _compose = require("@wordpress/compose");
-var _context = require("../../ui/context");
+var _element = require("@wordpress/element");
+var _context = require("../../context");
 var _context2 = require("../context");
 var styles = _interopRequireWildcard(require("./styles"));
 var _hooks = require("../../utils/hooks");
@@ -42,12 +43,12 @@ const WithToolTip = ({
   children
 }) => {
   if (showTooltip && text) {
-    return (0, _element.createElement)(_tooltip.default, {
+    return (0, _react.createElement)(_tooltip.default, {
       text: text,
       placement: "top"
     }, children);
   }
-  return (0, _element.createElement)(_element.Fragment, null, children);
+  return (0, _react.createElement)(_react.Fragment, null, children);
 };
 function ToggleGroupControlOptionBase(props, forwardedRef) {
   const shouldReduceMotion = (0, _framerMotion.useReducedMotion)();
@@ -94,19 +95,19 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
     'data-value': value,
     ref: forwardedRef
   };
-  return (0, _element.createElement)(LabelView, {
+  return (0, _react.createElement)(LabelView, {
     className: labelViewClasses
-  }, (0, _element.createElement)(WithToolTip, {
+  }, (0, _react.createElement)(WithToolTip, {
     showTooltip: showTooltip,
     text: otherButtonProps['aria-label']
-  }, isDeselectable ? (0, _element.createElement)("button", {
+  }, isDeselectable ? (0, _react.createElement)("button", {
     ...commonProps,
     onFocus: onFocusProp,
     "aria-pressed": isPressed,
     type: "button",
     onClick: buttonOnClick
-  }, (0, _element.createElement)(ButtonContentView, null, children)) : (0, _element.createElement)(_radio.Radio, {
-    render: (0, _element.createElement)("button", {
+  }, (0, _react.createElement)(ButtonContentView, null, children)) : (0, _react.createElement)(Ariakit.Radio, {
+    render: (0, _react.createElement)("button", {
       ...commonProps,
       onFocus: event => {
         onFocusProp?.(event);
@@ -115,7 +116,7 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
       }
     }),
     value: value
-  }, (0, _element.createElement)(ButtonContentView, null, children))), isPressed ? (0, _element.createElement)(_framerMotion.motion.div, {
+  }, (0, _react.createElement)(ButtonContentView, null, children))), isPressed ? (0, _react.createElement)(_framerMotion.motion.div, {
     className: backdropClasses,
     transition: shouldReduceMotion ? REDUCED_MOTION_TRANSITION_CONFIG : undefined,
     role: "presentation",