@wordpress/components 27.5.0 → 28.0.0

package/build/unit-control/unit-select-control.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _unitControlStyles = require("./styles/unit-control-styles");
 var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -32,10 +32,11 @@ function UnitSelectControl({
   ...props
 }, ref) {
   if (!(0, _utils.hasUnits)(units) || units?.length === 1) {
-    return (0, _react.createElement)(_unitControlStyles.UnitLabel, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_unitControlStyles.UnitLabel, {
       className: "components-unit-control__unit-label",
-      selectSize: size
-    }, unit);
+      selectSize: size,
+      children: unit
+    });
   }
   const handleOnChange = event => {
     const {
@@ -47,19 +48,20 @@ function UnitSelectControl({
       data
     });
   };
-  const classes = (0, _classnames.default)('components-unit-control__select', className);
-  return (0, _react.createElement)(_unitControlStyles.UnitSelect, {
+  const classes = (0, _clsx.default)('components-unit-control__select', className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_unitControlStyles.UnitSelect, {
     ref: ref,
     className: classes,
     onChange: handleOnChange,
     selectSize: size,
     tabIndex: isTabbable ? undefined : -1,
     value: unit,
-    ...props
-  }, units.map(option => (0, _react.createElement)("option", {
-    value: option.value,
-    key: option.value
-  }, option.label)));
+    ...props,
+    children: units.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+      value: option.value,
+      children: option.label
+    }, option.value))
+  });
 }
 var _default = exports.default = (0, _element.forwardRef)(UnitSelectControl);
 //# sourceMappingURL=unit-select-control.js.map

package/build/unit-control/unit-select-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_unitControlStyles","_utils","UnitSelectControl","className","isUnitSelectTabbable","isTabbable","onChange","size","unit","units","CSS_UNITS","props","ref","hasUnits","length","_react","createElement","UnitLabel","selectSize","handleOnChange","event","value","unitValue","target","data","find","option","classes","classnames","UnitSelect","tabIndex","undefined","map","key","label","_default","exports","default","forwardRef"],"sources":["@wordpress/components/src/unit-control/unit-select-control.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent, 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 { UnitSelect, UnitLabel } from './styles/unit-control-styles';\nimport { CSS_UNITS, hasUnits } from './utils';\nimport type { UnitSelectControlProps } from './types';\n\nfunction UnitSelectControl(\n\t{\n\t\tclassName,\n\t\tisUnitSelectTabbable: isTabbable = true,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunit = 'px',\n\t\tunits = CSS_UNITS,\n\t\t...props\n\t}: WordPressComponentProps< UnitSelectControlProps, 'select', false >,\n\tref: ForwardedRef< any >\n) {\n\tif ( ! hasUnits( units ) || units?.length === 1 ) {\n\t\treturn (\n\t\t\t<UnitLabel\n\t\t\t\tclassName=\"components-unit-control__unit-label\"\n\t\t\t\tselectSize={ size }\n\t\t\t>\n\t\t\t\t{ unit }\n\t\t\t</UnitLabel>\n\t\t);\n\t}\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {\n\t\tconst { value: unitValue } = event.target;\n\t\tconst data = units.find( ( option ) => option.value === unitValue );\n\n\t\tonChange?.( unitValue, { event, data } );\n\t};\n\n\tconst classes = classnames( 'components-unit-control__select', className );\n\n\treturn (\n\t\t<UnitSelect\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonChange={ handleOnChange }\n\t\t\tselectSize={ size }\n\t\t\ttabIndex={ isTabbable ? undefined : -1 }\n\t\t\tvalue={ unit }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ units.map( ( option ) => (\n\t\t\t\t<option value={ option.value } key={ option.value }>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</option>\n\t\t\t) ) }\n\t\t</UnitSelect>\n\t);\n}\nexport default forwardRef( UnitSelectControl );\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,kBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAMA,SAASI,iBAAiBA,CACzB;EACCC,SAAS;EACTC,oBAAoB,EAAEC,UAAU,GAAG,IAAI;EACvCC,QAAQ;EACRC,IAAI,GAAG,SAAS;EAChBC,IAAI,GAAG,IAAI;EACXC,KAAK,GAAGC,gBAAS;EACjB,GAAGC;AACgE,CAAC,EACrEC,GAAwB,EACvB;EACD,IAAK,CAAE,IAAAC,eAAQ,EAAEJ,KAAM,CAAC,IAAIA,KAAK,EAAEK,MAAM,KAAK,CAAC,EAAG;IACjD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAChB,kBAAA,CAAAiB,SAAS;MACTd,SAAS,EAAC,qCAAqC;MAC/Ce,UAAU,EAAGX;IAAM,GAEjBC,IACQ,CAAC;EAEd;EAEA,MAAMW,cAAc,GAAKC,KAAuC,IAAM;IACrE,MAAM;MAAEC,KAAK,EAAEC;IAAU,CAAC,GAAGF,KAAK,CAACG,MAAM;IACzC,MAAMC,IAAI,GAAGf,KAAK,CAACgB,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACL,KAAK,KAAKC,SAAU,CAAC;IAEnEhB,QAAQ,GAAIgB,SAAS,EAAE;MAAEF,KAAK;MAAEI;IAAK,CAAE,CAAC;EACzC,CAAC;EAED,MAAMG,OAAO,GAAG,IAAAC,mBAAU,EAAE,iCAAiC,EAAEzB,SAAU,CAAC;EAE1E,OACC,IAAAY,MAAA,CAAAC,aAAA,EAAChB,kBAAA,CAAA6B,UAAU;IACVjB,GAAG,EAAGA,GAAK;IACXT,SAAS,EAAGwB,OAAS;IACrBrB,QAAQ,EAAGa,cAAgB;IAC3BD,UAAU,EAAGX,IAAM;IACnBuB,QAAQ,EAAGzB,UAAU,GAAG0B,SAAS,GAAG,CAAC,CAAG;IACxCV,KAAK,EAAGb,IAAM;IAAA,GACTG;EAAK,GAERF,KAAK,CAACuB,GAAG,CAAIN,MAAM,IACpB,IAAAX,MAAA,CAAAC,aAAA;IAAQK,KAAK,EAAGK,MAAM,CAACL,KAAO;IAACY,GAAG,EAAGP,MAAM,CAACL;EAAO,GAChDK,MAAM,CAACQ,KACF,CACP,CACS,CAAC;AAEf;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACc,IAAAC,mBAAU,EAAEpC,iBAAkB,CAAC","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_unitControlStyles","_utils","_jsxRuntime","UnitSelectControl","className","isUnitSelectTabbable","isTabbable","onChange","size","unit","units","CSS_UNITS","props","ref","hasUnits","length","jsx","UnitLabel","selectSize","children","handleOnChange","event","value","unitValue","target","data","find","option","classes","clsx","UnitSelect","tabIndex","undefined","map","label","_default","exports","default","forwardRef"],"sources":["@wordpress/components/src/unit-control/unit-select-control.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent, 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 { UnitSelect, UnitLabel } from './styles/unit-control-styles';\nimport { CSS_UNITS, hasUnits } from './utils';\nimport type { UnitSelectControlProps } from './types';\n\nfunction UnitSelectControl(\n\t{\n\t\tclassName,\n\t\tisUnitSelectTabbable: isTabbable = true,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunit = 'px',\n\t\tunits = CSS_UNITS,\n\t\t...props\n\t}: WordPressComponentProps< UnitSelectControlProps, 'select', false >,\n\tref: ForwardedRef< any >\n) {\n\tif ( ! hasUnits( units ) || units?.length === 1 ) {\n\t\treturn (\n\t\t\t<UnitLabel\n\t\t\t\tclassName=\"components-unit-control__unit-label\"\n\t\t\t\tselectSize={ size }\n\t\t\t>\n\t\t\t\t{ unit }\n\t\t\t</UnitLabel>\n\t\t);\n\t}\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {\n\t\tconst { value: unitValue } = event.target;\n\t\tconst data = units.find( ( option ) => option.value === unitValue );\n\n\t\tonChange?.( unitValue, { event, data } );\n\t};\n\n\tconst classes = clsx( 'components-unit-control__select', className );\n\n\treturn (\n\t\t<UnitSelect\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonChange={ handleOnChange }\n\t\t\tselectSize={ size }\n\t\t\ttabIndex={ isTabbable ? undefined : -1 }\n\t\t\tvalue={ unit }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ units.map( ( option ) => (\n\t\t\t\t<option value={ option.value } key={ option.value }>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</option>\n\t\t\t) ) }\n\t\t</UnitSelect>\n\t);\n}\nexport default forwardRef( UnitSelectControl );\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AAMA,IAAAE,kBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA8C,IAAAI,WAAA,GAAAJ,OAAA;AAhB9C;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAMA,SAASK,iBAAiBA,CACzB;EACCC,SAAS;EACTC,oBAAoB,EAAEC,UAAU,GAAG,IAAI;EACvCC,QAAQ;EACRC,IAAI,GAAG,SAAS;EAChBC,IAAI,GAAG,IAAI;EACXC,KAAK,GAAGC,gBAAS;EACjB,GAAGC;AACgE,CAAC,EACrEC,GAAwB,EACvB;EACD,IAAK,CAAE,IAAAC,eAAQ,EAAEJ,KAAM,CAAC,IAAIA,KAAK,EAAEK,MAAM,KAAK,CAAC,EAAG;IACjD,oBACC,IAAAb,WAAA,CAAAc,GAAA,EAAChB,kBAAA,CAAAiB,SAAS;MACTb,SAAS,EAAC,qCAAqC;MAC/Cc,UAAU,EAAGV,IAAM;MAAAW,QAAA,EAEjBV;IAAI,CACI,CAAC;EAEd;EAEA,MAAMW,cAAc,GAAKC,KAAuC,IAAM;IACrE,MAAM;MAAEC,KAAK,EAAEC;IAAU,CAAC,GAAGF,KAAK,CAACG,MAAM;IACzC,MAAMC,IAAI,GAAGf,KAAK,CAACgB,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACL,KAAK,KAAKC,SAAU,CAAC;IAEnEhB,QAAQ,GAAIgB,SAAS,EAAE;MAAEF,KAAK;MAAEI;IAAK,CAAE,CAAC;EACzC,CAAC;EAED,MAAMG,OAAO,GAAG,IAAAC,aAAI,EAAE,iCAAiC,EAAEzB,SAAU,CAAC;EAEpE,oBACC,IAAAF,WAAA,CAAAc,GAAA,EAAChB,kBAAA,CAAA8B,UAAU;IACVjB,GAAG,EAAGA,GAAK;IACXT,SAAS,EAAGwB,OAAS;IACrBrB,QAAQ,EAAGa,cAAgB;IAC3BF,UAAU,EAAGV,IAAM;IACnBuB,QAAQ,EAAGzB,UAAU,GAAG0B,SAAS,GAAG,CAAC,CAAG;IACxCV,KAAK,EAAGb,IAAM;IAAA,GACTG,KAAK;IAAAO,QAAA,EAERT,KAAK,CAACuB,GAAG,CAAIN,MAAM,iBACpB,IAAAzB,WAAA,CAAAc,GAAA;MAAQM,KAAK,EAAGK,MAAM,CAACL,KAAO;MAAAH,QAAA,EAC3BQ,MAAM,CAACO;IAAK,GADsBP,MAAM,CAACL,KAEpC,CACP;EAAC,CACQ,CAAC;AAEf;AAAC,IAAAa,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACc,IAAAC,mBAAU,EAAEnC,iBAAkB,CAAC","ignoreList":[]}

package/build/utils/style-mixins.js

@@ -40,12 +40,6 @@ Object.defineProperty(exports, "font", {
     return _font.font;
   }
 });
-Object.defineProperty(exports, "reduceMotion", {
-  enumerable: true,
-  get: function () {
-    return _reduceMotion.reduceMotion;
-  }
-});
 Object.defineProperty(exports, "rgba", {
   enumerable: true,
   get: function () {
@@ -60,7 +54,6 @@ Object.defineProperty(exports, "rtl", {
 });
 var _boxSizing = require("./box-sizing");
 var _colors = require("./colors");
-var _reduceMotion = require("./reduce-motion");
 var _rtl = require("./rtl");
 var _font = require("./font");
 var _breakpoint = require("./breakpoint");

package/build/utils/style-mixins.js.map

@@ -1 +1 @@
-{"version":3,"names":["_boxSizing","require","_colors","_reduceMotion","_rtl","_font","_breakpoint","_configValues","_interopRequireDefault","_colorsValues","_baseLabel"],"sources":["@wordpress/components/src/utils/style-mixins.js"],"sourcesContent":["export { boxSizingReset } from './box-sizing';\nexport { rgba } from './colors';\nexport { reduceMotion } from './reduce-motion';\nexport { rtl } from './rtl';\nexport { font } from './font';\nexport { breakpoint } from './breakpoint';\nexport { default as CONFIG } from './config-values';\nexport { COLORS } from './colors-values';\nexport { baseLabelTypography } from './base-label';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,IAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,aAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,aAAA,GAAAR,OAAA;AACA,IAAAS,UAAA,GAAAT,OAAA","ignoreList":[]}
+{"version":3,"names":["_boxSizing","require","_colors","_rtl","_font","_breakpoint","_configValues","_interopRequireDefault","_colorsValues","_baseLabel"],"sources":["@wordpress/components/src/utils/style-mixins.js"],"sourcesContent":["export { boxSizingReset } from './box-sizing';\nexport { rgba } from './colors';\nexport { rtl } from './rtl';\nexport { font } from './font';\nexport { breakpoint } from './breakpoint';\nexport { default as CONFIG } from './config-values';\nexport { COLORS } from './colors-values';\nexport { baseLabelTypography } from './base-label';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,aAAA,GAAAP,OAAA;AACA,IAAAQ,UAAA,GAAAR,OAAA","ignoreList":[]}

package/build/v-stack/component.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.VStack = void 0;
-var _react = require("react");
 var _context = require("../context");
 var _view = require("../view");
 var _hook = require("./hook");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -18,7 +18,7 @@ var _hook = require("./hook");
 
 function UnconnectedVStack(props, forwardedRef) {
   const vStackProps = (0, _hook.useVStack)(props);
-  return (0, _react.createElement)(_view.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
     ...vStackProps,
     ref: forwardedRef
   });

package/build/v-stack/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_view","_hook","UnconnectedVStack","props","forwardedRef","vStackProps","useVStack","_react","createElement","View","ref","VStack","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/v-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useVStack } from './hook';\nimport type { VStackProps } from './types';\n\nfunction UnconnectedVStack(\n\tprops: WordPressComponentProps< VStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst vStackProps = useVStack( props );\n\n\treturn <View { ...vStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `VStack` (or Vertical Stack) is a layout component that arranges child\n * elements in a vertical line.\n *\n * `VStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalText as Text,\n * \t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<VStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\nexport const VStack = contextConnect( UnconnectedVStack, 'VStack' );\n\nexport default VStack;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASG,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAG,IAAAC,eAAS,EAAEH,KAAM,CAAC;EAEtC,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMJ,WAAW;IAAGK,GAAG,EAAGN;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,uBAAc,EAAEX,iBAAiB,EAAE,QAAS,CAAC;AAAC,IAAAY,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAErDJ,MAAM","ignoreList":[]}
+{"version":3,"names":["_context","require","_view","_hook","_jsxRuntime","UnconnectedVStack","props","forwardedRef","vStackProps","useVStack","jsx","View","ref","VStack","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/v-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useVStack } from './hook';\nimport type { VStackProps } from './types';\n\nfunction UnconnectedVStack(\n\tprops: WordPressComponentProps< VStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst vStackProps = useVStack( props );\n\n\treturn <View { ...vStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `VStack` (or Vertical Stack) is a layout component that arranges child\n * elements in a vertical line.\n *\n * `VStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalText as Text,\n * \t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<VStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\nexport const VStack = contextConnect( UnconnectedVStack, 'VStack' );\n\nexport default VStack;\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAAmC,IAAAG,WAAA,GAAAH,OAAA;AAXnC;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAG,IAAAC,eAAS,EAAEH,KAAM,CAAC;EAEtC,oBAAO,IAAAF,WAAA,CAAAM,GAAA,EAACR,KAAA,CAAAS,IAAI;IAAA,GAAMH,WAAW;IAAGI,GAAG,EAAGL;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,uBAAc,EAAEV,iBAAiB,EAAE,QAAS,CAAC;AAAC,IAAAW,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAErDJ,MAAM","ignoreList":[]}

package/build/view/component.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.View = void 0;
-var _react = require("react");
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _element = require("@wordpress/element");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -30,7 +30,7 @@ function UnforwardedView({
   as,
   ...restProps
 }, ref) {
-  return (0, _react.createElement)(PolymorphicDiv, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PolymorphicDiv, {
     as: as,
     ref: ref,
     ...restProps

package/build/view/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","PolymorphicDiv","_base","default","process","env","NODE_ENV","target","label","UnforwardedView","as","restProps","ref","_react","createElement","View","exports","Object","assign","forwardRef","selector","_default"],"sources":["@wordpress/components/src/view/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\n\nconst PolymorphicDiv = styled.div``;\n\nfunction UnforwardedView< T extends React.ElementType = 'div' >(\n\t{ as, ...restProps }: WordPressComponentProps< {}, T >,\n\tref: React.ForwardedRef< any >\n) {\n\treturn <PolymorphicDiv as={ as } ref={ ref } { ...restProps } />;\n}\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\nexport const View = Object.assign( forwardRef( UnforwardedView ), {\n\tselector: '.components-view',\n} );\n\nexport default View;\n"],"mappings":";;;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAMC,cAAc,oBAAAC,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,moDAAe;AAEnC,SAASG,eAAeA,CACvB;EAAEC,EAAE;EAAE,GAAGC;AAA4C,CAAC,EACtDC,GAA8B,EAC7B;EACD,OAAO,IAAAC,MAAA,CAAAC,aAAA,EAACb,cAAc;IAACS,EAAE,EAAGA,EAAI;IAACE,GAAG,EAAGA,GAAK;IAAA,GAAMD;EAAS,CAAI,CAAC;AACjE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMI,IAAI,GAAAC,OAAA,CAAAD,IAAA,GAAGE,MAAM,CAACC,MAAM,CAAE,IAAAC,mBAAU,EAAEV,eAAgB,CAAC,EAAE;EACjEW,QAAQ,EAAE;AACX,CAAE,CAAC;AAAC,IAAAC,QAAA,GAAAL,OAAA,CAAAb,OAAA,GAEWY,IAAI","ignoreList":[]}
+{"version":3,"names":["_element","require","_jsxRuntime","PolymorphicDiv","_base","default","process","env","NODE_ENV","target","label","UnforwardedView","as","restProps","ref","jsx","View","exports","Object","assign","forwardRef","selector","_default"],"sources":["@wordpress/components/src/view/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\n\nconst PolymorphicDiv = styled.div``;\n\nfunction UnforwardedView< T extends React.ElementType = 'div' >(\n\t{ as, ...restProps }: WordPressComponentProps< {}, T >,\n\tref: React.ForwardedRef< any >\n) {\n\treturn <PolymorphicDiv as={ as } ref={ ref } { ...restProps } />;\n}\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\nexport const View = Object.assign( forwardRef( UnforwardedView ), {\n\tselector: '.components-view',\n} );\n\nexport default View;\n"],"mappings":";;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAAgD,IAAAC,WAAA,GAAAD,OAAA;AARhD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAME,cAAc,oBAAAC,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,moDAAe;AAEnC,SAASG,eAAeA,CACvB;EAAEC,EAAE;EAAE,GAAGC;AAA4C,CAAC,EACtDC,GAA8B,EAC7B;EACD,oBAAO,IAAAZ,WAAA,CAAAa,GAAA,EAACZ,cAAc;IAACS,EAAE,EAAGA,EAAI;IAACE,GAAG,EAAGA,GAAK;IAAA,GAAMD;EAAS,CAAI,CAAC;AACjE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,IAAI,GAAAC,OAAA,CAAAD,IAAA,GAAGE,MAAM,CAACC,MAAM,CAAE,IAAAC,mBAAU,EAAET,eAAgB,CAAC,EAAE;EACjEU,QAAQ,EAAE;AACX,CAAE,CAAC;AAAC,IAAAC,QAAA,GAAAL,OAAA,CAAAZ,OAAA,GAEWW,IAAI","ignoreList":[]}

package/build/visually-hidden/component.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.VisuallyHidden = void 0;
-var _react = require("react");
 var _context = require("../context");
 var _styles = require("./styles");
 var _view = require("../view");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -21,7 +21,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
     style: styleProp,
     ...contextProps
   } = (0, _context.useContextSystem)(props, 'VisuallyHidden');
-  return (0, _react.createElement)(_view.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
     ref: forwardedRef,
     ...contextProps,
     style: {

package/build/visually-hidden/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_styles","_view","UnconnectedVisuallyHidden","props","forwardedRef","style","styleProp","contextProps","useContextSystem","_react","createElement","View","ref","visuallyHidden","VisuallyHidden","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/visually-hidden/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { visuallyHidden } from './styles';\nimport { View } from '../view';\nimport type { VisuallyHiddenProps } from './types';\n\nfunction UnconnectedVisuallyHidden(\n\tprops: WordPressComponentProps< VisuallyHiddenProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { style: styleProp, ...contextProps } = useContextSystem(\n\t\tprops,\n\t\t'VisuallyHidden'\n\t);\n\treturn (\n\t\t<View\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...contextProps }\n\t\t\tstyle={ { ...visuallyHidden, ...( styleProp || {} ) } }\n\t\t/>\n\t);\n}\n\n/**\n * `VisuallyHidden` is a component used to render text intended to be visually\n * hidden, but will show for alternate devices, for example a screen reader.\n *\n * ```jsx\n * import { VisuallyHidden } from `@wordpress/components`;\n *\n * function Example() {\n *   return (\n *     <VisuallyHidden>\n *       <label>Code is Poetry</label>\n *     </VisuallyHidden>\n *   );\n * }\n * ```\n */\nexport const VisuallyHidden = contextConnect(\n\tUnconnectedVisuallyHidden,\n\t'VisuallyHidden'\n);\n\nexport default VisuallyHidden;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASG,yBAAyBA,CACjCC,KAA4D,EAC5DC,YAAiC,EAChC;EACD,MAAM;IAAEC,KAAK,EAAEC,SAAS;IAAE,GAAGC;EAAa,CAAC,GAAG,IAAAC,yBAAgB,EAC7DL,KAAK,EACL,gBACD,CAAC;EACD,OACC,IAAAM,MAAA,CAAAC,aAAA,EAACT,KAAA,CAAAU,IAAI;IACJC,GAAG,EAAGR,YAAc;IAAA,GACfG,YAAY;IACjBF,KAAK,EAAG;MAAE,GAAGQ,sBAAc;MAAE,IAAKP,SAAS,IAAI,CAAC,CAAC;IAAG;EAAG,CACvD,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMQ,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,IAAAE,uBAAc,EAC3Cd,yBAAyB,EACzB,gBACD,CAAC;AAAC,IAAAe,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEaJ,cAAc","ignoreList":[]}
+{"version":3,"names":["_context","require","_styles","_view","_jsxRuntime","UnconnectedVisuallyHidden","props","forwardedRef","style","styleProp","contextProps","useContextSystem","jsx","View","ref","visuallyHidden","VisuallyHidden","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/visually-hidden/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { visuallyHidden } from './styles';\nimport { View } from '../view';\nimport type { VisuallyHiddenProps } from './types';\n\nfunction UnconnectedVisuallyHidden(\n\tprops: WordPressComponentProps< VisuallyHiddenProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { style: styleProp, ...contextProps } = useContextSystem(\n\t\tprops,\n\t\t'VisuallyHidden'\n\t);\n\treturn (\n\t\t<View\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...contextProps }\n\t\t\tstyle={ { ...visuallyHidden, ...( styleProp || {} ) } }\n\t\t/>\n\t);\n}\n\n/**\n * `VisuallyHidden` is a component used to render text intended to be visually\n * hidden, but will show for alternate devices, for example a screen reader.\n *\n * ```jsx\n * import { VisuallyHidden } from `@wordpress/components`;\n *\n * function Example() {\n *   return (\n *     <VisuallyHidden>\n *       <label>Code is Poetry</label>\n *     </VisuallyHidden>\n *   );\n * }\n * ```\n */\nexport const VisuallyHidden = contextConnect(\n\tUnconnectedVisuallyHidden,\n\t'VisuallyHidden'\n);\n\nexport default VisuallyHidden;\n"],"mappings":";;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAA+B,IAAAG,WAAA,GAAAH,OAAA;AAX/B;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,yBAAyBA,CACjCC,KAA4D,EAC5DC,YAAiC,EAChC;EACD,MAAM;IAAEC,KAAK,EAAEC,SAAS;IAAE,GAAGC;EAAa,CAAC,GAAG,IAAAC,yBAAgB,EAC7DL,KAAK,EACL,gBACD,CAAC;EACD,oBACC,IAAAF,WAAA,CAAAQ,GAAA,EAACT,KAAA,CAAAU,IAAI;IACJC,GAAG,EAAGP,YAAc;IAAA,GACfG,YAAY;IACjBF,KAAK,EAAG;MAAE,GAAGO,sBAAc;MAAE,IAAKN,SAAS,IAAI,CAAC,CAAC;IAAG;EAAG,CACvD,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAG,IAAAE,uBAAc,EAC3Cb,yBAAyB,EACzB,gBACD,CAAC;AAAC,IAAAc,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEaJ,cAAc","ignoreList":[]}

package/build/z-stack/component.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ZStack = void 0;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _getValidChildren = require("../utils/get-valid-children");
 var _context = require("../context");
 var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -38,18 +38,19 @@ function UnconnectedZStack(props, forwardedRef) {
     // the item's index, so that items can correctly stack at the right distance
     const offsetAmount = isLayered ? offset * index : offset;
     const key = (0, _element.isValidElement)(child) ? child.key : index;
-    return (0, _react.createElement)(_styles.ZStackChildView, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ZStackChildView, {
       offsetAmount: offsetAmount,
       zIndex: zIndex,
-      key: key
-    }, child);
+      children: child
+    }, key);
   });
-  return (0, _react.createElement)(_styles.ZStackView, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ZStackView, {
     ...otherProps,
     className: className,
     isLayered: isLayered,
-    ref: forwardedRef
-  }, clonedChildren);
+    ref: forwardedRef,
+    children: clonedChildren
+  });
 }
 
 /**

package/build/z-stack/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_getValidChildren","_context","_styles","UnconnectedZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","useContextSystem","validChildren","getValidChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key","isValidElement","_react","createElement","ZStackChildView","ZStackView","ref","ZStack","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/z-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { isValidElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport type { ZStackProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnconnectedZStack(\n\tprops: WordPressComponentProps< ZStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tisLayered = true,\n\t\tisReversed = false,\n\t\toffset = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ZStack' );\n\n\tconst validChildren = getValidChildren( children );\n\tconst childrenLastIndex = validChildren.length - 1;\n\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst zIndex = isReversed ? childrenLastIndex - index : index;\n\t\t// Only when the component is layered, the offset needs to be multiplied by\n\t\t// the item's index, so that items can correctly stack at the right distance\n\t\tconst offsetAmount = isLayered ? offset * index : offset;\n\n\t\tconst key = isValidElement( child ) ? child.key : index;\n\n\t\treturn (\n\t\t\t<ZStackChildView\n\t\t\t\toffsetAmount={ offsetAmount }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t\tkey={ key }\n\t\t\t>\n\t\t\t\t{ child }\n\t\t\t</ZStackChildView>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<ZStackView\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ className }\n\t\t\tisLayered={ isLayered }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ clonedChildren }\n\t\t</ZStackView>\n\t);\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect( UnconnectedZStack, 'ZStack' );\n\nexport default ZStack;\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASI,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAM;IACLC,QAAQ;IACRC,SAAS;IACTC,SAAS,GAAG,IAAI;IAChBC,UAAU,GAAG,KAAK;IAClBC,MAAM,GAAG,CAAC;IACV,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAER,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMS,aAAa,GAAG,IAAAC,kCAAgB,EAAER,QAAS,CAAC;EAClD,MAAMS,iBAAiB,GAAGF,aAAa,CAACG,MAAM,GAAG,CAAC;EAElD,MAAMC,cAAc,GAAGJ,aAAa,CAACK,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,MAAM,GAAGZ,UAAU,GAAGM,iBAAiB,GAAGK,KAAK,GAAGA,KAAK;IAC7D;IACA;IACA,MAAME,YAAY,GAAGd,SAAS,GAAGE,MAAM,GAAGU,KAAK,GAAGV,MAAM;IAExD,MAAMa,GAAG,GAAG,IAAAC,uBAAc,EAAEL,KAAM,CAAC,GAAGA,KAAK,CAACI,GAAG,GAAGH,KAAK;IAEvD,OACC,IAAAK,MAAA,CAAAC,aAAA,EAACxB,OAAA,CAAAyB,eAAe;MACfL,YAAY,EAAGA,YAAc;MAC7BD,MAAM,EAAGA,MAAQ;MACjBE,GAAG,EAAGA;IAAK,GAETJ,KACc,CAAC;EAEpB,CAAE,CAAC;EAEH,OACC,IAAAM,MAAA,CAAAC,aAAA,EAACxB,OAAA,CAAA0B,UAAU;IAAA,GACLjB,UAAU;IACfJ,SAAS,EAAGA,SAAW;IACvBC,SAAS,EAAGA,SAAW;IACvBqB,GAAG,EAAGxB;EAAc,GAElBY,cACS,CAAC;AAEf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMa,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,uBAAc,EAAE7B,iBAAiB,EAAE,QAAS,CAAC;AAAC,IAAA8B,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAErDJ,MAAM","ignoreList":[]}
+{"version":3,"names":["_element","require","_getValidChildren","_context","_styles","_jsxRuntime","UnconnectedZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","useContextSystem","validChildren","getValidChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key","isValidElement","jsx","ZStackChildView","ZStackView","ref","ZStack","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/z-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { isValidElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport type { ZStackProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnconnectedZStack(\n\tprops: WordPressComponentProps< ZStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tisLayered = true,\n\t\tisReversed = false,\n\t\toffset = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ZStack' );\n\n\tconst validChildren = getValidChildren( children );\n\tconst childrenLastIndex = validChildren.length - 1;\n\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst zIndex = isReversed ? childrenLastIndex - index : index;\n\t\t// Only when the component is layered, the offset needs to be multiplied by\n\t\t// the item's index, so that items can correctly stack at the right distance\n\t\tconst offsetAmount = isLayered ? offset * index : offset;\n\n\t\tconst key = isValidElement( child ) ? child.key : index;\n\n\t\treturn (\n\t\t\t<ZStackChildView\n\t\t\t\toffsetAmount={ offsetAmount }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t\tkey={ key }\n\t\t\t>\n\t\t\t\t{ child }\n\t\t\t</ZStackChildView>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<ZStackView\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ className }\n\t\t\tisLayered={ isLayered }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ clonedChildren }\n\t\t</ZStackView>\n\t);\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect( UnconnectedZStack, 'ZStack' );\n\nexport default ZStack;\n"],"mappings":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAuD,IAAAI,WAAA,GAAAJ,OAAA;AAfvD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASK,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAM;IACLC,QAAQ;IACRC,SAAS;IACTC,SAAS,GAAG,IAAI;IAChBC,UAAU,GAAG,KAAK;IAClBC,MAAM,GAAG,CAAC;IACV,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAER,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMS,aAAa,GAAG,IAAAC,kCAAgB,EAAER,QAAS,CAAC;EAClD,MAAMS,iBAAiB,GAAGF,aAAa,CAACG,MAAM,GAAG,CAAC;EAElD,MAAMC,cAAc,GAAGJ,aAAa,CAACK,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,MAAM,GAAGZ,UAAU,GAAGM,iBAAiB,GAAGK,KAAK,GAAGA,KAAK;IAC7D;IACA;IACA,MAAME,YAAY,GAAGd,SAAS,GAAGE,MAAM,GAAGU,KAAK,GAAGV,MAAM;IAExD,MAAMa,GAAG,GAAG,IAAAC,uBAAc,EAAEL,KAAM,CAAC,GAAGA,KAAK,CAACI,GAAG,GAAGH,KAAK;IAEvD,oBACC,IAAAlB,WAAA,CAAAuB,GAAA,EAACxB,OAAA,CAAAyB,eAAe;MACfJ,YAAY,EAAGA,YAAc;MAC7BD,MAAM,EAAGA,MAAQ;MAAAf,QAAA,EAGfa;IAAK,GAFDI,GAGU,CAAC;EAEpB,CAAE,CAAC;EAEH,oBACC,IAAArB,WAAA,CAAAuB,GAAA,EAACxB,OAAA,CAAA0B,UAAU;IAAA,GACLhB,UAAU;IACfJ,SAAS,EAAGA,SAAW;IACvBC,SAAS,EAAGA,SAAW;IACvBoB,GAAG,EAAGvB,YAAc;IAAAC,QAAA,EAElBW;EAAc,CACL,CAAC;AAEf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMY,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,uBAAc,EAAE5B,iBAAiB,EAAE,QAAS,CAAC;AAAC,IAAA6B,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAErDJ,MAAM","ignoreList":[]}

package/build-module/alignment-matrix-control/cell.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * Internal dependencies
  */
@@ -11,6 +10,8 @@ import { VisuallyHidden } from '../visually-hidden';
  */
 import { ALIGNMENT_LABEL } from './utils';
 import { Cell as CellView, Point } from './styles/alignment-matrix-control-styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Cell({
   id,
   isActive = false,
@@ -18,17 +19,21 @@ export default function Cell({
   ...props
 }) {
   const tooltipText = ALIGNMENT_LABEL[value];
-  return createElement(Tooltip, {
-    text: tooltipText
-  }, createElement(CompositeItem, {
-    id: id,
-    render: createElement(CellView, {
-      ...props,
-      role: "gridcell"
+  return /*#__PURE__*/_jsx(Tooltip, {
+    text: tooltipText,
+    children: /*#__PURE__*/_jsxs(CompositeItem, {
+      id: id,
+      render: /*#__PURE__*/_jsx(CellView, {
+        ...props,
+        role: "gridcell"
+      }),
+      children: [/*#__PURE__*/_jsx(VisuallyHidden, {
+        children: value
+      }), /*#__PURE__*/_jsx(Point, {
+        isActive: isActive,
+        role: "presentation"
+      })]
     })
-  }, createElement(VisuallyHidden, null, value), createElement(Point, {
-    isActive: isActive,
-    role: "presentation"
-  })));
+  });
 }
 //# sourceMappingURL=cell.js.map

package/build-module/alignment-matrix-control/cell.js.map

@@ -1 +1 @@
-{"version":3,"names":["CompositeItem","Tooltip","VisuallyHidden","ALIGNMENT_LABEL","Cell","CellView","Point","id","isActive","value","props","tooltipText","createElement","text","render","role"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport {\n\tCell as CellView,\n\tPoint,\n} from './styles/alignment-matrix-control-styles';\nimport type { AlignmentMatrixControlCellProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function Cell( {\n\tid,\n\tisActive = false,\n\tvalue,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {\n\tconst tooltipText = ALIGNMENT_LABEL[ value ];\n\n\treturn (\n\t\t<Tooltip text={ tooltipText }>\n\t\t\t<CompositeItem\n\t\t\t\tid={ id }\n\t\t\t\trender={ <CellView { ...props } role=\"gridcell\" /> }\n\t\t\t>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point isActive={ isActive } role=\"presentation\" />\n\t\t\t</CompositeItem>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,iBAAiB;AAC/C,OAAOC,OAAO,MAAM,YAAY;AAChC,SAASC,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA,SAASC,eAAe,QAAQ,SAAS;AACzC,SACCC,IAAI,IAAIC,QAAQ,EAChBC,KAAK,QACC,0CAA0C;AAIjD,eAAe,SAASF,IAAIA,CAAE;EAC7BG,EAAE;EACFC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGR,eAAe,CAAEM,KAAK,CAAE;EAE5C,OACCG,aAAA,CAACX,OAAO;IAACY,IAAI,EAAGF;EAAa,GAC5BC,aAAA,CAACZ,aAAa;IACbO,EAAE,EAAGA,EAAI;IACTO,MAAM,EAAGF,aAAA,CAACP,QAAQ;MAAA,GAAMK,KAAK;MAAGK,IAAI,EAAC;IAAU,CAAE;EAAG,GAKpDH,aAAA,CAACV,cAAc,QAAGO,KAAuB,CAAC,EAC1CG,aAAA,CAACN,KAAK;IAACE,QAAQ,EAAGA,QAAU;IAACO,IAAI,EAAC;EAAc,CAAE,CACpC,CACP,CAAC;AAEZ","ignoreList":[]}
+{"version":3,"names":["CompositeItem","Tooltip","VisuallyHidden","ALIGNMENT_LABEL","Cell","CellView","Point","jsx","_jsx","jsxs","_jsxs","id","isActive","value","props","tooltipText","text","children","render","role"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport {\n\tCell as CellView,\n\tPoint,\n} from './styles/alignment-matrix-control-styles';\nimport type { AlignmentMatrixControlCellProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function Cell( {\n\tid,\n\tisActive = false,\n\tvalue,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {\n\tconst tooltipText = ALIGNMENT_LABEL[ value ];\n\n\treturn (\n\t\t<Tooltip text={ tooltipText }>\n\t\t\t<CompositeItem\n\t\t\t\tid={ id }\n\t\t\t\trender={ <CellView { ...props } role=\"gridcell\" /> }\n\t\t\t>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point isActive={ isActive } role=\"presentation\" />\n\t\t\t</CompositeItem>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,iBAAiB;AAC/C,OAAOC,OAAO,MAAM,YAAY;AAChC,SAASC,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA,SAASC,eAAe,QAAQ,SAAS;AACzC,SACCC,IAAI,IAAIC,QAAQ,EAChBC,KAAK,QACC,0CAA0C;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIlD,eAAe,SAASN,IAAIA,CAAE;EAC7BO,EAAE;EACFC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGZ,eAAe,CAAEU,KAAK,CAAE;EAE5C,oBACCL,IAAA,CAACP,OAAO;IAACe,IAAI,EAAGD,WAAa;IAAAE,QAAA,eAC5BP,KAAA,CAACV,aAAa;MACbW,EAAE,EAAGA,EAAI;MACTO,MAAM,eAAGV,IAAA,CAACH,QAAQ;QAAA,GAAMS,KAAK;QAAGK,IAAI,EAAC;MAAU,CAAE,CAAG;MAAAF,QAAA,gBAKpDT,IAAA,CAACN,cAAc;QAAAe,QAAA,EAAGJ;MAAK,CAAkB,CAAC,eAC1CL,IAAA,CAACF,KAAK;QAACM,QAAQ,EAAGA,QAAU;QAACO,IAAI,EAAC;MAAc,CAAE,CAAC;IAAA,CACrC;EAAC,CACR,CAAC;AAEZ","ignoreList":[]}

package/build-module/alignment-matrix-control/icon.js

@@ -1,14 +1,14 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
  */
 import { ALIGNMENTS, getAlignmentIndex } from './utils';
 import { Root, Cell, Point } from './styles/alignment-matrix-control-icon-styles';
+import { jsx as _jsx } from "react/jsx-runtime";
 const BASE_SIZE = 24;
 function AlignmentMatrixControlIcon({
   className,
@@ -20,25 +20,26 @@ function AlignmentMatrixControlIcon({
 }) {
   const alignIndex = getAlignmentIndex(value);
   const scale = (size / BASE_SIZE).toFixed(2);
-  const classes = classnames('component-alignment-matrix-control-icon', className);
+  const classes = clsx('component-alignment-matrix-control-icon', className);
   const styles = {
     ...style,
     transform: `scale(${scale})`
   };
-  return createElement(Root, {
+  return /*#__PURE__*/_jsx(Root, {
     ...props,
     className: classes,
     disablePointerEvents: disablePointerEvents,
     role: "presentation",
-    style: styles
-  }, ALIGNMENTS.map((align, index) => {
-    const isActive = alignIndex === index;
-    return createElement(Cell, {
-      key: align
-    }, createElement(Point, {
-      isActive: isActive
-    }));
-  }));
+    style: styles,
+    children: ALIGNMENTS.map((align, index) => {
+      const isActive = alignIndex === index;
+      return /*#__PURE__*/_jsx(Cell, {
+        children: /*#__PURE__*/_jsx(Point, {
+          isActive: isActive
+        })
+      }, align);
+    })
+  });
 }
 export default AlignmentMatrixControlIcon;
 //# sourceMappingURL=icon.js.map

package/build-module/alignment-matrix-control/icon.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","ALIGNMENTS","getAlignmentIndex","Root","Cell","Point","BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","scale","toFixed","classes","styles","transform","createElement","role","map","align","index","isActive","key"],"sources":["@wordpress/components/src/alignment-matrix-control/icon.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport {\n\tRoot,\n\tCell,\n\tPoint,\n} from './styles/alignment-matrix-control-icon-styles';\nimport type { AlignmentMatrixControlIconProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst BASE_SIZE = 24;\n\nfunction AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize = BASE_SIZE,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'div', false > ) {\n\tconst alignIndex = getAlignmentIndex( value );\n\tconst scale = ( size / BASE_SIZE ).toFixed( 2 );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control-icon',\n\t\tclassName\n\t);\n\n\tconst styles = {\n\t\t...style,\n\t\ttransform: `scale(${ scale })`,\n\t};\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdisablePointerEvents={ disablePointerEvents }\n\t\t\trole=\"presentation\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst isActive = alignIndex === index;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Cell key={ align }>\n\t\t\t\t\t\t<Point isActive={ isActive } />\n\t\t\t\t\t</Cell>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Root>\n\t);\n}\n\nexport default AlignmentMatrixControlIcon;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,SAAS;AACvD,SACCC,IAAI,EACJC,IAAI,EACJC,KAAK,QACC,+CAA+C;AAItD,MAAMC,SAAS,GAAG,EAAE;AAEpB,SAASC,0BAA0BA,CAAE;EACpCC,SAAS;EACTC,oBAAoB,GAAG,IAAI;EAC3BC,IAAI,GAAGJ,SAAS;EAChBK,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,QAAQ;EAChB,GAAGC;AACsE,CAAC,EAAG;EAC7E,MAAMC,UAAU,GAAGZ,iBAAiB,CAAEU,KAAM,CAAC;EAC7C,MAAMG,KAAK,GAAG,CAAEL,IAAI,GAAGJ,SAAS,EAAGU,OAAO,CAAE,CAAE,CAAC;EAE/C,MAAMC,OAAO,GAAGjB,UAAU,CACzB,yCAAyC,EACzCQ,SACD,CAAC;EAED,MAAMU,MAAM,GAAG;IACd,GAAGP,KAAK;IACRQ,SAAS,EAAG,SAASJ,KAAO;EAC7B,CAAC;EAED,OACCK,aAAA,CAACjB,IAAI;IAAA,GACCU,KAAK;IACVL,SAAS,EAAGS,OAAS;IACrBR,oBAAoB,EAAGA,oBAAsB;IAC7CY,IAAI,EAAC,cAAc;IACnBV,KAAK,EAAGO;EAAQ,GAEdjB,UAAU,CAACqB,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IACrC,MAAMC,QAAQ,GAAGX,UAAU,KAAKU,KAAK;IAErC,OACCJ,aAAA,CAAChB,IAAI;MAACsB,GAAG,EAAGH;IAAO,GAClBH,aAAA,CAACf,KAAK;MAACoB,QAAQ,EAAGA;IAAU,CAAE,CACzB,CAAC;EAET,CAAE,CACG,CAAC;AAET;AAEA,eAAelB,0BAA0B","ignoreList":[]}
+{"version":3,"names":["clsx","ALIGNMENTS","getAlignmentIndex","Root","Cell","Point","jsx","_jsx","BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","scale","toFixed","classes","styles","transform","role","children","map","align","index","isActive"],"sources":["@wordpress/components/src/alignment-matrix-control/icon.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport {\n\tRoot,\n\tCell,\n\tPoint,\n} from './styles/alignment-matrix-control-icon-styles';\nimport type { AlignmentMatrixControlIconProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst BASE_SIZE = 24;\n\nfunction AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize = BASE_SIZE,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'div', false > ) {\n\tconst alignIndex = getAlignmentIndex( value );\n\tconst scale = ( size / BASE_SIZE ).toFixed( 2 );\n\n\tconst classes = clsx(\n\t\t'component-alignment-matrix-control-icon',\n\t\tclassName\n\t);\n\n\tconst styles = {\n\t\t...style,\n\t\ttransform: `scale(${ scale })`,\n\t};\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdisablePointerEvents={ disablePointerEvents }\n\t\t\trole=\"presentation\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst isActive = alignIndex === index;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Cell key={ align }>\n\t\t\t\t\t\t<Point isActive={ isActive } />\n\t\t\t\t\t</Cell>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Root>\n\t);\n}\n\nexport default AlignmentMatrixControlIcon;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,SAAS;AACvD,SACCC,IAAI,EACJC,IAAI,EACJC,KAAK,QACC,+CAA+C;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIvD,MAAMC,SAAS,GAAG,EAAE;AAEpB,SAASC,0BAA0BA,CAAE;EACpCC,SAAS;EACTC,oBAAoB,GAAG,IAAI;EAC3BC,IAAI,GAAGJ,SAAS;EAChBK,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,QAAQ;EAChB,GAAGC;AACsE,CAAC,EAAG;EAC7E,MAAMC,UAAU,GAAGd,iBAAiB,CAAEY,KAAM,CAAC;EAC7C,MAAMG,KAAK,GAAG,CAAEL,IAAI,GAAGJ,SAAS,EAAGU,OAAO,CAAE,CAAE,CAAC;EAE/C,MAAMC,OAAO,GAAGnB,IAAI,CACnB,yCAAyC,EACzCU,SACD,CAAC;EAED,MAAMU,MAAM,GAAG;IACd,GAAGP,KAAK;IACRQ,SAAS,EAAG,SAASJ,KAAO;EAC7B,CAAC;EAED,oBACCV,IAAA,CAACJ,IAAI;IAAA,GACCY,KAAK;IACVL,SAAS,EAAGS,OAAS;IACrBR,oBAAoB,EAAGA,oBAAsB;IAC7CW,IAAI,EAAC,cAAc;IACnBT,KAAK,EAAGO,MAAQ;IAAAG,QAAA,EAEdtB,UAAU,CAACuB,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;MACrC,MAAMC,QAAQ,GAAGX,UAAU,KAAKU,KAAK;MAErC,oBACCnB,IAAA,CAACH,IAAI;QAAAmB,QAAA,eACJhB,IAAA,CAACF,KAAK;UAACsB,QAAQ,EAAGA;QAAU,CAAE;MAAC,GADpBF,KAEN,CAAC;IAET,CAAE;EAAC,CACE,CAAC;AAET;AAEA,eAAehB,0BAA0B","ignoreList":[]}

package/build-module/alignment-matrix-control/index.js

@@ -1,8 +1,7 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -18,6 +17,7 @@ import { Composite, CompositeRow, useCompositeStore } from '../composite/v2';
 import { Root, Row } from './styles/alignment-matrix-control-styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId, getItemValue } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  *
  * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
@@ -61,32 +61,32 @@ export function AlignmentMatrixControl({
     rtl: isRTL()
   });
   const activeId = compositeStore.useState('activeId');
-  const classes = classnames('component-alignment-matrix-control', className);
-  return createElement(Composite, {
+  const classes = clsx('component-alignment-matrix-control', className);
+  return /*#__PURE__*/_jsx(Composite, {
     store: compositeStore,
-    render: createElement(Root, {
+    render: /*#__PURE__*/_jsx(Root, {
       ...props,
       "aria-label": label,
       className: classes,
       id: baseId,
       role: "grid",
       size: width
-    })
-  }, GRID.map((cells, index) => createElement(CompositeRow, {
-    render: createElement(Row, {
-      role: "row"
     }),
-    key: index
-  }, cells.map(cell => {
-    const cellId = getItemId(baseId, cell);
-    const isActive = cellId === activeId;
-    return createElement(Cell, {
-      id: cellId,
-      isActive: isActive,
-      key: cell,
-      value: cell
-    });
-  }))));
+    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(CompositeRow, {
+      render: /*#__PURE__*/_jsx(Row, {
+        role: "row"
+      }),
+      children: cells.map(cell => {
+        const cellId = getItemId(baseId, cell);
+        const isActive = cellId === activeId;
+        return /*#__PURE__*/_jsx(Cell, {
+          id: cellId,
+          isActive: isActive,
+          value: cell
+        }, cell);
+      })
+    }, index))
+  });
 }
 AlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;
 export default AlignmentMatrixControl;

package/build-module/alignment-matrix-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","__","isRTL","useInstanceId","Cell","Composite","CompositeRow","useCompositeStore","Root","Row","AlignmentMatrixControlIcon","GRID","getItemId","getItemValue","AlignmentMatrixControl","className","id","label","defaultValue","value","onChange","width","props","baseId","compositeStore","defaultActiveId","activeId","setActiveId","nextActiveId","nextValue","rtl","useState","classes","createElement","store","render","role","size","map","cells","index","key","cell","cellId","isActive","Icon"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeRow, useCompositeStore } from '../composite/v2';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type { AlignmentMatrixControlProps } from './types';\n\n/**\n *\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst baseId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control',\n\t\tid\n\t);\n\n\tconst compositeStore = useCompositeStore( {\n\t\tdefaultActiveId: getItemId( baseId, defaultValue ),\n\t\tactiveId: getItemId( baseId, value ),\n\t\tsetActiveId: ( nextActiveId ) => {\n\t\t\tconst nextValue = getItemValue( baseId, nextActiveId );\n\t\t\tif ( nextValue ) {\n\t\t\t\tonChange?.( nextValue );\n\t\t\t}\n\t\t},\n\t\trtl: isRTL(),\n\t} );\n\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trender={\n\t\t\t\t<Root\n\t\t\t\t\t{ ...props }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\trole=\"grid\"\n\t\t\t\t\tsize={ width }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeRow render={ <Row role=\"row\" /> } key={ index }>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = cellId === activeId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</CompositeRow>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n\nexport default AlignmentMatrixControl;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,OAAOC,IAAI,MAAM,QAAQ;AACzB,SAASC,SAAS,EAAEC,YAAY,EAAEC,iBAAiB,QAAQ,iBAAiB;AAC5E,SAASC,IAAI,EAAEC,GAAG,QAAQ,0CAA0C;AACpE,OAAOC,0BAA0B,MAAM,QAAQ;AAC/C,SAASC,IAAI,EAAEC,SAAS,EAAEC,YAAY,QAAQ,SAAS;AAIvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CAAE;EACvCC,SAAS;EACTC,EAAE;EACFC,KAAK,GAAGhB,EAAE,CAAE,0BAA2B,CAAC;EACxCiB,YAAY,GAAG,eAAe;EAC9BC,KAAK;EACLC,QAAQ;EACRC,KAAK,GAAG,EAAE;EACV,GAAGC;AACkE,CAAC,EAAG;EACzE,MAAMC,MAAM,GAAGpB,aAAa,CAC3BW,sBAAsB,EACtB,0BAA0B,EAC1BE,EACD,CAAC;EAED,MAAMQ,cAAc,GAAGjB,iBAAiB,CAAE;IACzCkB,eAAe,EAAEb,SAAS,CAAEW,MAAM,EAAEL,YAAa,CAAC;IAClDQ,QAAQ,EAAEd,SAAS,CAAEW,MAAM,EAAEJ,KAAM,CAAC;IACpCQ,WAAW,EAAIC,YAAY,IAAM;MAChC,MAAMC,SAAS,GAAGhB,YAAY,CAAEU,MAAM,EAAEK,YAAa,CAAC;MACtD,IAAKC,SAAS,EAAG;QAChBT,QAAQ,GAAIS,SAAU,CAAC;MACxB;IACD,CAAC;IACDC,GAAG,EAAE5B,KAAK,CAAC;EACZ,CAAE,CAAC;EAEH,MAAMwB,QAAQ,GAAGF,cAAc,CAACO,QAAQ,CAAE,UAAW,CAAC;EAEtD,MAAMC,OAAO,GAAGhC,UAAU,CACzB,oCAAoC,EACpCe,SACD,CAAC;EAED,OACCkB,aAAA,CAAC5B,SAAS;IACT6B,KAAK,EAAGV,cAAgB;IACxBW,MAAM,EACLF,aAAA,CAACzB,IAAI;MAAA,GACCc,KAAK;MACV,cAAaL,KAAO;MACpBF,SAAS,EAAGiB,OAAS;MACrBhB,EAAE,EAAGO,MAAQ;MACba,IAAI,EAAC,MAAM;MACXC,IAAI,EAAGhB;IAAO,CACd;EACD,GAECV,IAAI,CAAC2B,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KACzBP,aAAA,CAAC3B,YAAY;IAAC6B,MAAM,EAAGF,aAAA,CAACxB,GAAG;MAAC2B,IAAI,EAAC;IAAK,CAAE,CAAG;IAACK,GAAG,EAAGD;EAAO,GACtDD,KAAK,CAACD,GAAG,CAAII,IAAI,IAAM;IACxB,MAAMC,MAAM,GAAG/B,SAAS,CAAEW,MAAM,EAAEmB,IAAK,CAAC;IACxC,MAAME,QAAQ,GAAGD,MAAM,KAAKjB,QAAQ;IAEpC,OACCO,aAAA,CAAC7B,IAAI;MACJY,EAAE,EAAG2B,MAAQ;MACbC,QAAQ,EAAGA,QAAU;MACrBH,GAAG,EAAGC,IAAM;MACZvB,KAAK,EAAGuB;IAAM,CACd,CAAC;EAEJ,CAAE,CACW,CACb,CACQ,CAAC;AAEd;AAEA5B,sBAAsB,CAAC+B,IAAI,GAAGnC,0BAA0B;AAExD,eAAeI,sBAAsB","ignoreList":[]}
+{"version":3,"names":["clsx","__","isRTL","useInstanceId","Cell","Composite","CompositeRow","useCompositeStore","Root","Row","AlignmentMatrixControlIcon","GRID","getItemId","getItemValue","jsx","_jsx","AlignmentMatrixControl","className","id","label","defaultValue","value","onChange","width","props","baseId","compositeStore","defaultActiveId","activeId","setActiveId","nextActiveId","nextValue","rtl","useState","classes","store","render","role","size","children","map","cells","index","cell","cellId","isActive","Icon"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeRow, useCompositeStore } from '../composite/v2';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type { AlignmentMatrixControlProps } from './types';\n\n/**\n *\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst baseId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control',\n\t\tid\n\t);\n\n\tconst compositeStore = useCompositeStore( {\n\t\tdefaultActiveId: getItemId( baseId, defaultValue ),\n\t\tactiveId: getItemId( baseId, value ),\n\t\tsetActiveId: ( nextActiveId ) => {\n\t\t\tconst nextValue = getItemValue( baseId, nextActiveId );\n\t\t\tif ( nextValue ) {\n\t\t\t\tonChange?.( nextValue );\n\t\t\t}\n\t\t},\n\t\trtl: isRTL(),\n\t} );\n\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tconst classes = clsx( 'component-alignment-matrix-control', className );\n\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trender={\n\t\t\t\t<Root\n\t\t\t\t\t{ ...props }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\trole=\"grid\"\n\t\t\t\t\tsize={ width }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeRow render={ <Row role=\"row\" /> } key={ index }>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = cellId === activeId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</CompositeRow>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n\nexport default AlignmentMatrixControl;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SAASC,aAAa,QAAQ,oBAAoB;;AAElD;AACA;AACA;AACA,OAAOC,IAAI,MAAM,QAAQ;AACzB,SAASC,SAAS,EAAEC,YAAY,EAAEC,iBAAiB,QAAQ,iBAAiB;AAC5E,SAASC,IAAI,EAAEC,GAAG,QAAQ,0CAA0C;AACpE,OAAOC,0BAA0B,MAAM,QAAQ;AAC/C,SAASC,IAAI,EAAEC,SAAS,EAAEC,YAAY,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CAAE;EACvCC,SAAS;EACTC,EAAE;EACFC,KAAK,GAAGlB,EAAE,CAAE,0BAA2B,CAAC;EACxCmB,YAAY,GAAG,eAAe;EAC9BC,KAAK;EACLC,QAAQ;EACRC,KAAK,GAAG,EAAE;EACV,GAAGC;AACkE,CAAC,EAAG;EACzE,MAAMC,MAAM,GAAGtB,aAAa,CAC3Ba,sBAAsB,EACtB,0BAA0B,EAC1BE,EACD,CAAC;EAED,MAAMQ,cAAc,GAAGnB,iBAAiB,CAAE;IACzCoB,eAAe,EAAEf,SAAS,CAAEa,MAAM,EAAEL,YAAa,CAAC;IAClDQ,QAAQ,EAAEhB,SAAS,CAAEa,MAAM,EAAEJ,KAAM,CAAC;IACpCQ,WAAW,EAAIC,YAAY,IAAM;MAChC,MAAMC,SAAS,GAAGlB,YAAY,CAAEY,MAAM,EAAEK,YAAa,CAAC;MACtD,IAAKC,SAAS,EAAG;QAChBT,QAAQ,GAAIS,SAAU,CAAC;MACxB;IACD,CAAC;IACDC,GAAG,EAAE9B,KAAK,CAAC;EACZ,CAAE,CAAC;EAEH,MAAM0B,QAAQ,GAAGF,cAAc,CAACO,QAAQ,CAAE,UAAW,CAAC;EAEtD,MAAMC,OAAO,GAAGlC,IAAI,CAAE,oCAAoC,EAAEiB,SAAU,CAAC;EAEvE,oBACCF,IAAA,CAACV,SAAS;IACT8B,KAAK,EAAGT,cAAgB;IACxBU,MAAM,eACLrB,IAAA,CAACP,IAAI;MAAA,GACCgB,KAAK;MACV,cAAaL,KAAO;MACpBF,SAAS,EAAGiB,OAAS;MACrBhB,EAAE,EAAGO,MAAQ;MACbY,IAAI,EAAC,MAAM;MACXC,IAAI,EAAGf;IAAO,CACd,CACD;IAAAgB,QAAA,EAEC5B,IAAI,CAAC6B,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,kBACzB3B,IAAA,CAACT,YAAY;MAAC8B,MAAM,eAAGrB,IAAA,CAACN,GAAG;QAAC4B,IAAI,EAAC;MAAK,CAAE,CAAG;MAAAE,QAAA,EACxCE,KAAK,CAACD,GAAG,CAAIG,IAAI,IAAM;QACxB,MAAMC,MAAM,GAAGhC,SAAS,CAAEa,MAAM,EAAEkB,IAAK,CAAC;QACxC,MAAME,QAAQ,GAAGD,MAAM,KAAKhB,QAAQ;QAEpC,oBACCb,IAAA,CAACX,IAAI;UACJc,EAAE,EAAG0B,MAAQ;UACbC,QAAQ,EAAGA,QAAU;UAErBxB,KAAK,EAAGsB;QAAM,GADRA,IAEN,CAAC;MAEJ,CAAE;IAAC,GAb8CD,KAcpC,CACb;EAAC,CACO,CAAC;AAEd;AAEA1B,sBAAsB,CAAC8B,IAAI,GAAGpC,0BAA0B;AAExD,eAAeM,sBAAsB","ignoreList":[]}

package/build-module/angle-picker-control/angle-circle.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -9,6 +8,7 @@ import { __experimentalUseDragging as useDragging } from '@wordpress/compose';
  * Internal dependencies
  */
 import { CircleRoot, CircleIndicatorWrapper, CircleIndicator } from './styles/angle-picker-control-styles';
+import { jsx as _jsx } from "react/jsx-runtime";
 function AngleCircle({
   value,
   onChange,
@@ -67,20 +67,22 @@ function AngleCircle({
       previousCursorValue.current = undefined;
     }
   }, [isDragging]);
-  return createElement(CircleRoot, {
+  return /*#__PURE__*/_jsx(CircleRoot, {
     ref: angleCircleRef,
     onMouseDown: startDrag,
     className: "components-angle-picker-control__angle-circle",
-    ...props
-  }, createElement(CircleIndicatorWrapper, {
-    style: value ? {
-      transform: `rotate(${value}deg)`
-    } : undefined,
-    className: "components-angle-picker-control__angle-circle-indicator-wrapper",
-    tabIndex: -1
-  }, createElement(CircleIndicator, {
-    className: "components-angle-picker-control__angle-circle-indicator"
-  })));
+    ...props,
+    children: /*#__PURE__*/_jsx(CircleIndicatorWrapper, {
+      style: value ? {
+        transform: `rotate(${value}deg)`
+      } : undefined,
+      className: "components-angle-picker-control__angle-circle-indicator-wrapper",
+      tabIndex: -1,
+      children: /*#__PURE__*/_jsx(CircleIndicator, {
+        className: "components-angle-picker-control__angle-circle-indicator"
+      })
+    })
+  });
 }
 function getAngle(centerX, centerY, pointX, pointY) {
   const y = pointY - centerY;