@wordpress/components 25.8.6 → 25.9.1

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

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_utils","_numberControl","_interopRequireDefault","_inputControlStyles","_space","ValueInput","_base","default","NumberControl","process","env","NODE_ENV","target","label","BackdropUI","exports","baseUnitLabelStyles","selectSize","sizes","css","COLORS","gray","large","space","theme","accent","UnitLabel","unitSelectSizes","rtl","borderTopLeftRadius","borderBottomLeftRadius","ui","borderFocus","CONFIG","borderWidth","borderWidthFocus","UnitSelect"],"sources":["@wordpress/components/src/unit-control/styles/unit-control-styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../../utils';\nimport NumberControl from '../../number-control';\nimport { BackdropUI } from '../../input-control/styles/input-control-styles';\nimport type { SelectSize } from '../types';\nimport { space } from '../../ui/utils/space';\n\n// Using `selectSize` instead of `size` to avoid a type conflict with the\n// `size` HTML attribute of the `select` element.\ntype SelectProps = {\n\tselectSize: SelectSize;\n};\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const ValueInput = styled( NumberControl )`\n\t&&& {\n\t\tinput {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t${ BackdropUI } {\n\t\t\ttransition: box-shadow 0.1s linear;\n\t\t}\n\t}\n`;\n\nconst baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 2px 1px;\n\t\t\twidth: 20px;\n\t\t\tcolor: ${ COLORS.gray[ 800 ] };\n\t\t\tfont-size: 8px;\n\t\t\tline-height: 1;\n\t\t\tletter-spacing: -0.5px;\n\t\t\ttext-transform: uppercase;\n\t\t\ttext-align-last: center;\n\t\t`,\n\t\tlarge: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tmin-width: 24px;\n\t\t\tmax-width: 48px;\n\t\t\theight: 24px;\n\t\t\tmargin-inline-end: ${ space( 2 ) };\n\t\t\tpadding: ${ space( 1 ) };\n\t\t\tcolor: ${ COLORS.theme.accent };\n\t\t\tfont-size: 13px;\n\t\t\tline-height: 1;\n\t\t\ttext-align-last: center;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t`,\n\t};\n\n\treturn selectSize === '__unstable-large' ? sizes.large : sizes.default;\n};\n\nexport const UnitLabel = styled.div< SelectProps >`\n\t&&& {\n\t\tpointer-events: none;\n\n\t\t${ baseUnitLabelStyles };\n\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t}\n`;\n\nconst unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: css`\n\t\t\theight: 100%;\n\t\t\tborder: 1px solid transparent;\n\t\t\ttransition:\n\t\t\t\tbox-shadow 0.1s linear,\n\t\t\t\tborder 0.1s linear;\n\n\t\t\t${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }\n\n\t\t\t&:not(:disabled):hover {\n\t\t\t\tbackground-color: ${ COLORS.gray[ 100 ] };\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tborder: 1px solid ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline-offset: 0;\n\t\t\t\toutline: 2px solid transparent;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`,\n\t\tlarge: css`\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tbox-shadow: 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidthFocus + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidthFocus } solid transparent; // For High Contrast Mode\n\t\t\t}\n\t\t`,\n\t};\n\n\treturn selectSize === '__unstable-large' ? sizes.large : sizes.default;\n};\n\nexport const UnitSelect = styled.select< SelectProps >`\n\t// The &&& counteracts <select> styles in WP forms.css\n\t&&& {\n\t\tappearance: none;\n\t\tbackground: transparent;\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t\tdisplay: block;\n\t\toutline: none;\n\t\t/* Removing margin ensures focus styles neatly overlay the wrapper. */\n\t\tmargin: 0;\n\t\tmin-height: auto;\n\t\tfont-family: inherit;\n\n\t\t&:not( :disabled ) {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t${ baseUnitLabelStyles };\n\t\t${ unitSelectSizes };\n\t}\n`;\n"],"mappings":"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"}
+{"version":3,"names":["_react","require","_utils","_numberControl","_interopRequireDefault","_inputControlStyles","_space","ValueInput","_base","default","NumberControl","process","env","NODE_ENV","target","label","BackdropUI","exports","baseUnitLabelStyles","selectSize","sizes","small","css","COLORS","gray","space","theme","accent","UnitLabel","unitSelectSizes","rtl","borderTopLeftRadius","borderBottomLeftRadius","ui","borderFocus","CONFIG","borderWidth","borderWidthFocus","UnitSelect"],"sources":["@wordpress/components/src/unit-control/styles/unit-control-styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../../utils';\nimport NumberControl from '../../number-control';\nimport { BackdropUI } from '../../input-control/styles/input-control-styles';\nimport type { SelectSize } from '../types';\nimport { space } from '../../utils/space';\n\n// Using `selectSize` instead of `size` to avoid a type conflict with the\n// `size` HTML attribute of the `select` element.\ntype SelectProps = {\n\tselectSize: SelectSize;\n};\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const ValueInput = styled( NumberControl )`\n\t&&& {\n\t\tinput {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t${ BackdropUI } {\n\t\t\ttransition: box-shadow 0.1s linear;\n\t\t}\n\t}\n`;\n\nconst baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {\n\tconst sizes = {\n\t\tsmall: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 2px 1px;\n\t\t\twidth: 20px;\n\t\t\tcolor: ${ COLORS.gray[ 800 ] };\n\t\t\tfont-size: 8px;\n\t\t\tline-height: 1;\n\t\t\tletter-spacing: -0.5px;\n\t\t\ttext-transform: uppercase;\n\t\t\ttext-align-last: center;\n\t\t`,\n\t\tdefault: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tmin-width: 24px;\n\t\t\tmax-width: 48px;\n\t\t\theight: 24px;\n\t\t\tmargin-inline-end: ${ space( 2 ) };\n\t\t\tpadding: ${ space( 1 ) };\n\t\t\tcolor: ${ COLORS.theme.accent };\n\t\t\tfont-size: 13px;\n\t\t\tline-height: 1;\n\t\t\ttext-align-last: center;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t`,\n\t};\n\n\treturn sizes[ selectSize ];\n};\n\nexport const UnitLabel = styled.div< SelectProps >`\n\t&&& {\n\t\tpointer-events: none;\n\n\t\t${ baseUnitLabelStyles };\n\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t}\n`;\n\nconst unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {\n\tconst sizes = {\n\t\tsmall: css`\n\t\t\theight: 100%;\n\t\t\tborder: 1px solid transparent;\n\t\t\ttransition:\n\t\t\t\tbox-shadow 0.1s linear,\n\t\t\t\tborder 0.1s linear;\n\n\t\t\t${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }\n\n\t\t\t&:not(:disabled):hover {\n\t\t\t\tbackground-color: ${ COLORS.gray[ 100 ] };\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tborder: 1px solid ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline-offset: 0;\n\t\t\t\toutline: 2px solid transparent;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`,\n\t\tdefault: css`\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tbox-shadow: 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidthFocus + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidthFocus } solid transparent; // For High Contrast Mode\n\t\t\t}\n\t\t`,\n\t};\n\n\treturn sizes[ selectSize ];\n};\n\nexport const UnitSelect = styled.select< SelectProps >`\n\t// The &&& counteracts <select> styles in WP forms.css\n\t&&& {\n\t\tappearance: none;\n\t\tbackground: transparent;\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t\tdisplay: block;\n\t\toutline: none;\n\t\t/* Removing margin ensures focus styles neatly overlay the wrapper. */\n\t\tmargin: 0;\n\t\tmin-height: auto;\n\t\tfont-family: inherit;\n\n\t\t&:not( :disabled ) {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t${ baseUnitLabelStyles };\n\t\t${ unitSelectSizes };\n\t}\n`;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/unit-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { FocusEventHandler } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tInputChangeCallback,\n\tInputControlProps,\n\tSize as InputSize,\n} from '../input-control/types';\nimport type { NumberControlProps } from '../number-control/types';\n\nexport type SelectSize = InputSize;\n\nexport type WPUnitControlUnit = {\n\t/**\n\t * The value for the unit, used in a CSS value (e.g `px`).\n\t */\n\tvalue: string;\n\t/**\n\t * The label used in a dropdown selector for the unit.\n\t */\n\tlabel: string;\n\t/**\n\t * Default value (quantity) for the unit, used when switching units.\n\t */\n\tdefault?: number;\n\t/**\n\t * An accessible label used by screen readers.\n\t */\n\ta11yLabel?: string;\n\t/**\n\t * A step value used when incrementing/decrementing the value.\n\t */\n\tstep?: number;\n};\n\nexport type UnitControlOnChangeCallback = InputChangeCallback< {\n\tdata?: WPUnitControlUnit;\n} >;\n\nexport type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {\n\t/**\n\t * Whether the control can be focused via keyboard navigation.\n\t *\n\t * @default true\n\t */\n\tisUnitSelectTabbable?: boolean;\n\t/**\n\t * A callback function invoked when the value is changed.\n\t */\n\tonChange?: UnitControlOnChangeCallback;\n\t/**\n\t * Current unit.\n\t */\n\tunit?: string;\n\t/**\n\t * Available units to select from.\n\t *\n\t * @default CSS_UNITS\n\t */\n\tunits?: WPUnitControlUnit[];\n};\n\nexport type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &\n\tOmit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {\n\t\t/**\n\t\t * If `true`, the unit `<select>` is hidden.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tdisableUnits?: boolean;\n\t\t/**\n\t\t * If `true`, and the selected unit provides a `default` value, this value is set\n\t\t * when changing units.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tisResetValueOnUnitChange?: boolean;\n\t\t/**\n\t\t * Callback when the `unit` changes.\n\t\t */\n\t\tonUnitChange?: UnitControlOnChangeCallback;\n\t\t/**\n\t\t * Current unit. _Note: this prop is deprecated. Instead, provide a unit with a value through the `value` prop._\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tunit?: string;\n\t\t/**\n\t\t * Current value. If passed as a string, the current unit will be inferred from this value.\n\t\t * For example, a `value` of \"50%\" will set the current unit to `%`.\n\t\t */\n\t\tvalue?: string | number;\n\t\t/**\n\t\t * Callback when either the quantity or the unit inputs lose focus.\n\t\t */\n\t\tonBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;\n\t\t/**\n\t\t * Callback when either the quantity or the unit inputs gains focus.\n\t\t */\n\t\tonFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;\n\t};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/unit-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { FocusEventHandler } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tInputChangeCallback,\n\tInputControlProps,\n} from '../input-control/types';\nimport type { NumberControlProps } from '../number-control/types';\n\nexport type SelectSize = 'default' | 'small';\n\nexport type WPUnitControlUnit = {\n\t/**\n\t * The value for the unit, used in a CSS value (e.g `px`).\n\t */\n\tvalue: string;\n\t/**\n\t * The label used in a dropdown selector for the unit.\n\t */\n\tlabel: string;\n\t/**\n\t * Default value (quantity) for the unit, used when switching units.\n\t */\n\tdefault?: number;\n\t/**\n\t * An accessible label used by screen readers.\n\t */\n\ta11yLabel?: string;\n\t/**\n\t * A step value used when incrementing/decrementing the value.\n\t */\n\tstep?: number;\n};\n\nexport type UnitControlOnChangeCallback = InputChangeCallback< {\n\tdata?: WPUnitControlUnit;\n} >;\n\nexport type UnitSelectControlProps = {\n\t/**\n\t * Whether the control can be focused via keyboard navigation.\n\t *\n\t * @default true\n\t */\n\tisUnitSelectTabbable?: boolean;\n\t/**\n\t * A callback function invoked when the value is changed.\n\t */\n\tonChange?: UnitControlOnChangeCallback;\n\t/**\n\t * The size of the unit select.\n\t */\n\tsize?: SelectSize;\n\t/**\n\t * Current unit.\n\t */\n\tunit?: string;\n\t/**\n\t * Available units to select from.\n\t *\n\t * @default CSS_UNITS\n\t */\n\tunits?: WPUnitControlUnit[];\n};\n\nexport type UnitControlProps = Pick< InputControlProps, 'size' > &\n\tOmit< UnitSelectControlProps, 'size' | 'unit' > &\n\tOmit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {\n\t\t/**\n\t\t * If `true`, the unit `<select>` is hidden.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tdisableUnits?: boolean;\n\t\t/**\n\t\t * If `true`, and the selected unit provides a `default` value, this value is set\n\t\t * when changing units.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tisResetValueOnUnitChange?: boolean;\n\t\t/**\n\t\t * Callback when the `unit` changes.\n\t\t */\n\t\tonUnitChange?: UnitControlOnChangeCallback;\n\t\t/**\n\t\t * Current unit. _Note: this prop is deprecated. Instead, provide a unit with a value through the `value` prop._\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tunit?: string;\n\t\t/**\n\t\t * Current value. If passed as a string, the current unit will be inferred from this value.\n\t\t * For example, a `value` of \"50%\" will set the current unit to `%`.\n\t\t */\n\t\tvalue?: string | number;\n\t\t/**\n\t\t * Callback when either the quantity or the unit inputs lose focus.\n\t\t */\n\t\tonBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;\n\t\t/**\n\t\t * Callback when either the quantity or the unit inputs gains focus.\n\t\t */\n\t\tonFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;\n\t};\n"],"mappings":""}

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

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 var _unitControlStyles = require("./styles/unit-control-styles");
 var _utils = require("./utils");
 /**
@@ -27,7 +28,7 @@ function UnitSelectControl({
   ...props
 }, ref) {
   if (!(0, _utils.hasUnits)(units) || units?.length === 1) {
-    return (0, _element.createElement)(_unitControlStyles.UnitLabel, {
+    return (0, _react.createElement)(_unitControlStyles.UnitLabel, {
       className: "components-unit-control__unit-label",
       selectSize: size
     }, unit);
@@ -43,7 +44,7 @@ function UnitSelectControl({
     });
   };
   const classes = (0, _classnames.default)('components-unit-control__select', className);
-  return (0, _element.createElement)(_unitControlStyles.UnitSelect, {
+  return (0, _react.createElement)(_unitControlStyles.UnitSelect, {
     ref: ref,
     className: classes,
     onChange: handleOnChange,
@@ -51,7 +52,7 @@ function UnitSelectControl({
     tabIndex: isTabbable ? undefined : -1,
     value: unit,
     ...props
-  }, units.map(option => (0, _element.createElement)("option", {
+  }, units.map(option => (0, _react.createElement)("option", {
     value: option.value,
     key: option.value
   }, option.label)));

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_unitControlStyles","_utils","UnitSelectControl","className","isUnitSelectTabbable","isTabbable","onChange","size","unit","units","CSS_UNITS","props","ref","hasUnits","length","createElement","UnitLabel","selectSize","handleOnChange","event","value","unitValue","target","data","find","option","classes","classnames","UnitSelect","tabIndex","undefined","map","key","label","_default","forwardRef","exports","default"],"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 '../ui/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":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AANA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAYA,IAAAG,kBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAWA,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,OACC,IAAAlB,QAAA,CAAAmB,aAAA,EAACf,kBAAA,CAAAgB,SAAS;MACTb,SAAS,EAAC,qCAAqC;MAC/Cc,UAAU,EAAGV;IAAM,GAEjBC,IACQ,CAAC;EAEd;EAEA,MAAMU,cAAc,GAAKC,KAAuC,IAAM;IACrE,MAAM;MAAEC,KAAK,EAAEC;IAAU,CAAC,GAAGF,KAAK,CAACG,MAAM;IACzC,MAAMC,IAAI,GAAGd,KAAK,CAACe,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACL,KAAK,KAAKC,SAAU,CAAC;IAEnEf,QAAQ,GAAIe,SAAS,EAAE;MAAEF,KAAK;MAAEI;IAAK,CAAE,CAAC;EACzC,CAAC;EAED,MAAMG,OAAO,GAAG,IAAAC,mBAAU,EAAE,iCAAiC,EAAExB,SAAU,CAAC;EAE1E,OACC,IAAAP,QAAA,CAAAmB,aAAA,EAACf,kBAAA,CAAA4B,UAAU;IACVhB,GAAG,EAAGA,GAAK;IACXT,SAAS,EAAGuB,OAAS;IACrBpB,QAAQ,EAAGY,cAAgB;IAC3BD,UAAU,EAAGV,IAAM;IACnBsB,QAAQ,EAAGxB,UAAU,GAAGyB,SAAS,GAAG,CAAC,CAAG;IACxCV,KAAK,EAAGZ,IAAM;IAAA,GACTG;EAAK,GAERF,KAAK,CAACsB,GAAG,CAAIN,MAAM,IACpB,IAAA7B,QAAA,CAAAmB,aAAA;IAAQK,KAAK,EAAGK,MAAM,CAACL,KAAO;IAACY,GAAG,EAAGP,MAAM,CAACL;EAAO,GAChDK,MAAM,CAACQ,KACF,CACP,CACS,CAAC;AAEf;AAAC,IAAAC,QAAA,GACc,IAAAC,mBAAU,EAAEjC,iBAAkB,CAAC;AAAAkC,OAAA,CAAAC,OAAA,GAAAH,QAAA"}
+{"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","forwardRef","exports","default"],"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;;AAWA,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,GACc,IAAAC,mBAAU,EAAElC,iBAAkB,CAAC;AAAAmC,OAAA,CAAAC,OAAA,GAAAH,QAAA"}

package/build/utils/colors.js

@@ -4,13 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getOptimalTextColor = getOptimalTextColor;
+exports.getOptimalTextShade = getOptimalTextShade;
 exports.rgba = rgba;
+var _memize = _interopRequireDefault(require("memize"));
 var _colord = require("colord");
 var _names = _interopRequireDefault(require("colord/plugins/names"));
 /**
  * External dependencies
  */
 
+/** @type {HTMLDivElement} */
+let colorComputationNode;
 (0, _colord.extend)([_names.default]);
 
 /**
@@ -27,4 +32,81 @@ var _names = _interopRequireDefault(require("colord/plugins/names"));
 function rgba(hexValue = '', alpha = 1) {
   return (0, _colord.colord)(hexValue).alpha(alpha).toRgbString();
 }
+
+/**
+ * @return {HTMLDivElement | undefined} The HTML element for color computation.
+ */
+function getColorComputationNode() {
+  if (typeof document === 'undefined') return;
+  if (!colorComputationNode) {
+    // Create a temporary element for style computation.
+    const el = document.createElement('div');
+    el.setAttribute('data-g2-color-computation-node', '');
+    // Inject for window computed style.
+    document.body.appendChild(el);
+    colorComputationNode = el;
+  }
+  return colorComputationNode;
+}
+
+/**
+ * @param {string | unknown} value
+ *
+ * @return {boolean} Whether the value is a valid color.
+ */
+function isColor(value) {
+  if (typeof value !== 'string') return false;
+  const test = (0, _colord.colord)(value);
+  return test.isValid();
+}
+
+/**
+ * Retrieves the computed background color. This is useful for getting the
+ * value of a CSS variable color.
+ *
+ * @param {string | unknown} backgroundColor The background color to compute.
+ *
+ * @return {string} The computed background color.
+ */
+function _getComputedBackgroundColor(backgroundColor) {
+  if (typeof backgroundColor !== 'string') return '';
+  if (isColor(backgroundColor)) return backgroundColor;
+  if (!backgroundColor.includes('var(')) return '';
+  if (typeof document === 'undefined') return '';
+
+  // Attempts to gracefully handle CSS variables color values.
+  const el = getColorComputationNode();
+  if (!el) return '';
+  el.style.background = backgroundColor;
+  // Grab the style.
+  const computedColor = window?.getComputedStyle(el).background;
+  // Reset.
+  el.style.background = '';
+  return computedColor || '';
+}
+const getComputedBackgroundColor = (0, _memize.default)(_getComputedBackgroundColor);
+
+/**
+ * Get the text shade optimized for readability, based on a background color.
+ *
+ * @param {string | unknown} backgroundColor The background color.
+ *
+ * @return {string} The optimized text color (black or white).
+ */
+function getOptimalTextColor(backgroundColor) {
+  const background = getComputedBackgroundColor(backgroundColor);
+  return (0, _colord.colord)(background).isLight() ? '#000000' : '#ffffff';
+}
+
+/**
+ * Get the text shade optimized for readability, based on a background color.
+ *
+ * @param {string | unknown} backgroundColor The background color.
+ *
+ * @return {string} The optimized text shade (dark or light).
+ */
+function getOptimalTextShade(backgroundColor) {
+  const result = getOptimalTextColor(backgroundColor);
+  return result === '#000000' ? 'dark' : 'light';
+}
 //# sourceMappingURL=colors.js.map

package/build/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","extend","namesPlugin","rgba","hexValue","alpha","colord","toRgbString"],"sources":["@wordpress/components/src/utils/colors.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\nextend( [ namesPlugin ] );\n\n/**\n * Generating a CSS compliant rgba() color value.\n *\n * @param {string} hexValue The hex value to convert to rgba().\n * @param {number} alpha    The alpha value for opacity.\n * @return {string} The converted rgba() color value.\n *\n * @example\n * rgba( '#000000', 0.5 )\n * // rgba(0, 0, 0, 0.5)\n */\nexport function rgba( hexValue = '', alpha = 1 ) {\n\treturn colord( hexValue ).alpha( alpha ).toRgbString();\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAJA;AACA;AACA;;AAIA,IAAAG,cAAM,EAAE,CAAEC,cAAW,CAAG,CAAC;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,IAAIA,CAAEC,QAAQ,GAAG,EAAE,EAAEC,KAAK,GAAG,CAAC,EAAG;EAChD,OAAO,IAAAC,cAAM,EAAEF,QAAS,CAAC,CAACC,KAAK,CAAEA,KAAM,CAAC,CAACE,WAAW,CAAC,CAAC;AACvD"}
+{"version":3,"names":["_memize","_interopRequireDefault","require","_colord","_names","colorComputationNode","extend","namesPlugin","rgba","hexValue","alpha","colord","toRgbString","getColorComputationNode","document","el","createElement","setAttribute","body","appendChild","isColor","value","test","isValid","_getComputedBackgroundColor","backgroundColor","includes","style","background","computedColor","window","getComputedStyle","getComputedBackgroundColor","memoize","getOptimalTextColor","isLight","getOptimalTextShade","result"],"sources":["@wordpress/components/src/utils/colors.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport memoize from 'memize';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/** @type {HTMLDivElement} */\nlet colorComputationNode;\n\nextend( [ namesPlugin ] );\n\n/**\n * Generating a CSS compliant rgba() color value.\n *\n * @param {string} hexValue The hex value to convert to rgba().\n * @param {number} alpha    The alpha value for opacity.\n * @return {string} The converted rgba() color value.\n *\n * @example\n * rgba( '#000000', 0.5 )\n * // rgba(0, 0, 0, 0.5)\n */\nexport function rgba( hexValue = '', alpha = 1 ) {\n\treturn colord( hexValue ).alpha( alpha ).toRgbString();\n}\n\n/**\n * @return {HTMLDivElement | undefined} The HTML element for color computation.\n */\nfunction getColorComputationNode() {\n\tif ( typeof document === 'undefined' ) return;\n\n\tif ( ! colorComputationNode ) {\n\t\t// Create a temporary element for style computation.\n\t\tconst el = document.createElement( 'div' );\n\t\tel.setAttribute( 'data-g2-color-computation-node', '' );\n\t\t// Inject for window computed style.\n\t\tdocument.body.appendChild( el );\n\t\tcolorComputationNode = el;\n\t}\n\n\treturn colorComputationNode;\n}\n\n/**\n * @param {string | unknown} value\n *\n * @return {boolean} Whether the value is a valid color.\n */\nfunction isColor( value ) {\n\tif ( typeof value !== 'string' ) return false;\n\tconst test = colord( value );\n\n\treturn test.isValid();\n}\n\n/**\n * Retrieves the computed background color. This is useful for getting the\n * value of a CSS variable color.\n *\n * @param {string | unknown} backgroundColor The background color to compute.\n *\n * @return {string} The computed background color.\n */\nfunction _getComputedBackgroundColor( backgroundColor ) {\n\tif ( typeof backgroundColor !== 'string' ) return '';\n\n\tif ( isColor( backgroundColor ) ) return backgroundColor;\n\n\tif ( ! backgroundColor.includes( 'var(' ) ) return '';\n\tif ( typeof document === 'undefined' ) return '';\n\n\t// Attempts to gracefully handle CSS variables color values.\n\tconst el = getColorComputationNode();\n\tif ( ! el ) return '';\n\n\tel.style.background = backgroundColor;\n\t// Grab the style.\n\tconst computedColor = window?.getComputedStyle( el ).background;\n\t// Reset.\n\tel.style.background = '';\n\n\treturn computedColor || '';\n}\n\nconst getComputedBackgroundColor = memoize( _getComputedBackgroundColor );\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text color (black or white).\n */\nexport function getOptimalTextColor( backgroundColor ) {\n\tconst background = getComputedBackgroundColor( backgroundColor );\n\n\treturn colord( background ).isLight() ? '#000000' : '#ffffff';\n}\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text shade (dark or light).\n */\nexport function getOptimalTextShade( backgroundColor ) {\n\tconst result = getOptimalTextColor( backgroundColor );\n\n\treturn result === '#000000' ? 'dark' : 'light';\n}\n"],"mappings":";;;;;;;;;AAGA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AALA;AACA;AACA;;AAKA;AACA,IAAIG,oBAAoB;AAExB,IAAAC,cAAM,EAAE,CAAEC,cAAW,CAAG,CAAC;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,IAAIA,CAAEC,QAAQ,GAAG,EAAE,EAAEC,KAAK,GAAG,CAAC,EAAG;EAChD,OAAO,IAAAC,cAAM,EAAEF,QAAS,CAAC,CAACC,KAAK,CAAEA,KAAM,CAAC,CAACE,WAAW,CAAC,CAAC;AACvD;;AAEA;AACA;AACA;AACA,SAASC,uBAAuBA,CAAA,EAAG;EAClC,IAAK,OAAOC,QAAQ,KAAK,WAAW,EAAG;EAEvC,IAAK,CAAET,oBAAoB,EAAG;IAC7B;IACA,MAAMU,EAAE,GAAGD,QAAQ,CAACE,aAAa,CAAE,KAAM,CAAC;IAC1CD,EAAE,CAACE,YAAY,CAAE,gCAAgC,EAAE,EAAG,CAAC;IACvD;IACAH,QAAQ,CAACI,IAAI,CAACC,WAAW,CAAEJ,EAAG,CAAC;IAC/BV,oBAAoB,GAAGU,EAAE;EAC1B;EAEA,OAAOV,oBAAoB;AAC5B;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASe,OAAOA,CAAEC,KAAK,EAAG;EACzB,IAAK,OAAOA,KAAK,KAAK,QAAQ,EAAG,OAAO,KAAK;EAC7C,MAAMC,IAAI,GAAG,IAAAX,cAAM,EAAEU,KAAM,CAAC;EAE5B,OAAOC,IAAI,CAACC,OAAO,CAAC,CAAC;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,2BAA2BA,CAAEC,eAAe,EAAG;EACvD,IAAK,OAAOA,eAAe,KAAK,QAAQ,EAAG,OAAO,EAAE;EAEpD,IAAKL,OAAO,CAAEK,eAAgB,CAAC,EAAG,OAAOA,eAAe;EAExD,IAAK,CAAEA,eAAe,CAACC,QAAQ,CAAE,MAAO,CAAC,EAAG,OAAO,EAAE;EACrD,IAAK,OAAOZ,QAAQ,KAAK,WAAW,EAAG,OAAO,EAAE;;EAEhD;EACA,MAAMC,EAAE,GAAGF,uBAAuB,CAAC,CAAC;EACpC,IAAK,CAAEE,EAAE,EAAG,OAAO,EAAE;EAErBA,EAAE,CAACY,KAAK,CAACC,UAAU,GAAGH,eAAe;EACrC;EACA,MAAMI,aAAa,GAAGC,MAAM,EAAEC,gBAAgB,CAAEhB,EAAG,CAAC,CAACa,UAAU;EAC/D;EACAb,EAAE,CAACY,KAAK,CAACC,UAAU,GAAG,EAAE;EAExB,OAAOC,aAAa,IAAI,EAAE;AAC3B;AAEA,MAAMG,0BAA0B,GAAG,IAAAC,eAAO,EAAET,2BAA4B,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASU,mBAAmBA,CAAET,eAAe,EAAG;EACtD,MAAMG,UAAU,GAAGI,0BAA0B,CAAEP,eAAgB,CAAC;EAEhE,OAAO,IAAAd,cAAM,EAAEiB,UAAW,CAAC,CAACO,OAAO,CAAC,CAAC,GAAG,SAAS,GAAG,SAAS;AAC9D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,mBAAmBA,CAAEX,eAAe,EAAG;EACtD,MAAMY,MAAM,GAAGH,mBAAmB,CAAET,eAAgB,CAAC;EAErD,OAAOY,MAAM,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO;AAC/C"}

package/build/utils/config-values.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _space = require("../ui/utils/space");
+var _space = require("./space");
 var _colorsValues = require("./colors-values");
 /**
  * Internal dependencies

package/build/utils/config-values.js.map

@@ -1 +1 @@
-{"version":3,"names":["_space","require","_colorsValues","CONTROL_HEIGHT","CONTROL_PADDING_X","CONTROL_PROPS","controlSurfaceColor","COLORS","white","controlTextActiveColor","theme","accent","controlPaddingX","controlPaddingXLarge","controlPaddingXSmall","controlBackgroundColor","controlBorderRadius","controlBoxShadow","controlBoxShadowFocus","controlDestructiveBorderColor","alert","red","controlHeight","controlHeightXSmall","controlHeightSmall","controlHeightLarge","controlHeightXLarge","TOGGLE_GROUP_CONTROL_PROPS","toggleGroupControlBackgroundColor","toggleGroupControlBorderColor","ui","border","toggleGroupControlBackdropBackgroundColor","toggleGroupControlBackdropBorderColor","toggleGroupControlButtonColorActive","_default","Object","assign","colorDivider","colorScrollbarThumb","colorScrollbarThumbHover","colorScrollbarTrack","elevationIntensity","radiusBlockUi","borderWidth","borderWidthFocus","borderWidthTab","spinnerSize","fontSize","fontSizeH1","fontSizeH2","fontSizeH3","fontSizeH4","fontSizeH5","fontSizeH6","fontSizeInputMobile","fontSizeMobile","fontSizeSmall","fontSizeXSmall","fontLineHeightBase","fontWeight","fontWeightHeading","gridBase","cardBorderRadius","cardPaddingXSmall","space","cardPaddingSmall","cardPaddingMedium","cardPaddingLarge","popoverShadow","surfaceBackgroundColor","surfaceBackgroundSubtleColor","surfaceBackgroundTintColor","surfaceBorderColor","surfaceBorderBoldColor","surfaceBorderSubtleColor","surfaceBackgroundTertiaryColor","surfaceColor","transitionDuration","transitionDurationFast","transitionDurationFaster","transitionDurationFastest","transitionTimingFunction","transitionTimingFunctionControl","exports","default"],"sources":["@wordpress/components/src/utils/config-values.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { space } from '../ui/utils/space';\nimport { COLORS } from './colors-values';\n\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PADDING_X = '12px';\n\nconst CONTROL_PROPS = {\n\tcontrolSurfaceColor: COLORS.white,\n\tcontrolTextActiveColor: COLORS.theme.accent,\n\tcontrolPaddingX: CONTROL_PADDING_X,\n\tcontrolPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,\n\tcontrolPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,\n\tcontrolBackgroundColor: COLORS.white,\n\tcontrolBorderRadius: '2px',\n\tcontrolBoxShadow: 'transparent',\n\tcontrolBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,\n\tcontrolDestructiveBorderColor: COLORS.alert.red,\n\tcontrolHeight: CONTROL_HEIGHT,\n\tcontrolHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,\n\tcontrolHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,\n\tcontrolHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,\n\tcontrolHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,\n};\n\nconst TOGGLE_GROUP_CONTROL_PROPS = {\n\ttoggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,\n\ttoggleGroupControlBorderColor: COLORS.ui.border,\n\ttoggleGroupControlBackdropBackgroundColor:\n\t\tCONTROL_PROPS.controlSurfaceColor,\n\ttoggleGroupControlBackdropBorderColor: COLORS.ui.border,\n\ttoggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {\n\tcolorDivider: 'rgba(0, 0, 0, 0.1)',\n\tcolorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n\tcolorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n\tcolorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n\televationIntensity: 1,\n\tradiusBlockUi: '2px',\n\tborderWidth: '1px',\n\tborderWidthFocus: '1.5px',\n\tborderWidthTab: '4px',\n\tspinnerSize: 16,\n\tfontSize: '13px',\n\tfontSizeH1: 'calc(2.44 * 13px)',\n\tfontSizeH2: 'calc(1.95 * 13px)',\n\tfontSizeH3: 'calc(1.56 * 13px)',\n\tfontSizeH4: 'calc(1.25 * 13px)',\n\tfontSizeH5: '13px',\n\tfontSizeH6: 'calc(0.8 * 13px)',\n\tfontSizeInputMobile: '16px',\n\tfontSizeMobile: '15px',\n\tfontSizeSmall: 'calc(0.92 * 13px)',\n\tfontSizeXSmall: 'calc(0.75 * 13px)',\n\tfontLineHeightBase: '1.2',\n\tfontWeight: 'normal',\n\tfontWeightHeading: '600',\n\tgridBase: '4px',\n\tcardBorderRadius: '2px',\n\tcardPaddingXSmall: `${ space( 2 ) }`,\n\tcardPaddingSmall: `${ space( 4 ) }`,\n\tcardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,\n\tcardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,\n\tpopoverShadow: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,\n\tsurfaceBackgroundColor: COLORS.white,\n\tsurfaceBackgroundSubtleColor: '#F3F3F3',\n\tsurfaceBackgroundTintColor: '#F5F5F5',\n\tsurfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n\tsurfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',\n\tsurfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',\n\tsurfaceBackgroundTertiaryColor: COLORS.white,\n\tsurfaceColor: COLORS.white,\n\ttransitionDuration: '200ms',\n\ttransitionDurationFast: '160ms',\n\ttransitionDurationFaster: '120ms',\n\ttransitionDurationFastest: '100ms',\n\ttransitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n\ttransitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',\n} );\n"],"mappings":"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"}
+{"version":3,"names":["_space","require","_colorsValues","CONTROL_HEIGHT","CONTROL_PADDING_X","CONTROL_PROPS","controlSurfaceColor","COLORS","white","controlTextActiveColor","theme","accent","controlPaddingX","controlPaddingXLarge","controlPaddingXSmall","controlBackgroundColor","controlBorderRadius","controlBoxShadow","controlBoxShadowFocus","controlDestructiveBorderColor","alert","red","controlHeight","controlHeightXSmall","controlHeightSmall","controlHeightLarge","controlHeightXLarge","TOGGLE_GROUP_CONTROL_PROPS","toggleGroupControlBackgroundColor","toggleGroupControlBorderColor","ui","border","toggleGroupControlBackdropBackgroundColor","toggleGroupControlBackdropBorderColor","toggleGroupControlButtonColorActive","_default","Object","assign","colorDivider","colorScrollbarThumb","colorScrollbarThumbHover","colorScrollbarTrack","elevationIntensity","radiusBlockUi","borderWidth","borderWidthFocus","borderWidthTab","spinnerSize","fontSize","fontSizeH1","fontSizeH2","fontSizeH3","fontSizeH4","fontSizeH5","fontSizeH6","fontSizeInputMobile","fontSizeMobile","fontSizeSmall","fontSizeXSmall","fontLineHeightBase","fontWeight","fontWeightHeading","gridBase","cardBorderRadius","cardPaddingXSmall","space","cardPaddingSmall","cardPaddingMedium","cardPaddingLarge","popoverShadow","surfaceBackgroundColor","surfaceBackgroundSubtleColor","surfaceBackgroundTintColor","surfaceBorderColor","surfaceBorderBoldColor","surfaceBorderSubtleColor","surfaceBackgroundTertiaryColor","surfaceColor","transitionDuration","transitionDurationFast","transitionDurationFaster","transitionDurationFastest","transitionTimingFunction","transitionTimingFunctionControl","exports","default"],"sources":["@wordpress/components/src/utils/config-values.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { space } from './space';\nimport { COLORS } from './colors-values';\n\nconst CONTROL_HEIGHT = '36px';\nconst CONTROL_PADDING_X = '12px';\n\nconst CONTROL_PROPS = {\n\tcontrolSurfaceColor: COLORS.white,\n\tcontrolTextActiveColor: COLORS.theme.accent,\n\tcontrolPaddingX: CONTROL_PADDING_X,\n\tcontrolPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,\n\tcontrolPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,\n\tcontrolBackgroundColor: COLORS.white,\n\tcontrolBorderRadius: '2px',\n\tcontrolBoxShadow: 'transparent',\n\tcontrolBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,\n\tcontrolDestructiveBorderColor: COLORS.alert.red,\n\tcontrolHeight: CONTROL_HEIGHT,\n\tcontrolHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,\n\tcontrolHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,\n\tcontrolHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,\n\tcontrolHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,\n};\n\nconst TOGGLE_GROUP_CONTROL_PROPS = {\n\ttoggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,\n\ttoggleGroupControlBorderColor: COLORS.ui.border,\n\ttoggleGroupControlBackdropBackgroundColor:\n\t\tCONTROL_PROPS.controlSurfaceColor,\n\ttoggleGroupControlBackdropBorderColor: COLORS.ui.border,\n\ttoggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,\n};\n\n// Using Object.assign to avoid creating circular references when emitting\n// TypeScript type declarations.\nexport default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {\n\tcolorDivider: 'rgba(0, 0, 0, 0.1)',\n\tcolorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',\n\tcolorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',\n\tcolorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',\n\televationIntensity: 1,\n\tradiusBlockUi: '2px',\n\tborderWidth: '1px',\n\tborderWidthFocus: '1.5px',\n\tborderWidthTab: '4px',\n\tspinnerSize: 16,\n\tfontSize: '13px',\n\tfontSizeH1: 'calc(2.44 * 13px)',\n\tfontSizeH2: 'calc(1.95 * 13px)',\n\tfontSizeH3: 'calc(1.56 * 13px)',\n\tfontSizeH4: 'calc(1.25 * 13px)',\n\tfontSizeH5: '13px',\n\tfontSizeH6: 'calc(0.8 * 13px)',\n\tfontSizeInputMobile: '16px',\n\tfontSizeMobile: '15px',\n\tfontSizeSmall: 'calc(0.92 * 13px)',\n\tfontSizeXSmall: 'calc(0.75 * 13px)',\n\tfontLineHeightBase: '1.2',\n\tfontWeight: 'normal',\n\tfontWeightHeading: '600',\n\tgridBase: '4px',\n\tcardBorderRadius: '2px',\n\tcardPaddingXSmall: `${ space( 2 ) }`,\n\tcardPaddingSmall: `${ space( 4 ) }`,\n\tcardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,\n\tcardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,\n\tpopoverShadow: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,\n\tsurfaceBackgroundColor: COLORS.white,\n\tsurfaceBackgroundSubtleColor: '#F3F3F3',\n\tsurfaceBackgroundTintColor: '#F5F5F5',\n\tsurfaceBorderColor: 'rgba(0, 0, 0, 0.1)',\n\tsurfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',\n\tsurfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',\n\tsurfaceBackgroundTertiaryColor: COLORS.white,\n\tsurfaceColor: COLORS.white,\n\ttransitionDuration: '200ms',\n\ttransitionDurationFast: '160ms',\n\ttransitionDurationFaster: '120ms',\n\ttransitionDurationFastest: '100ms',\n\ttransitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',\n\ttransitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)',\n} );\n"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIA,MAAME,cAAc,GAAG,MAAM;AAC7B,MAAMC,iBAAiB,GAAG,MAAM;AAEhC,MAAMC,aAAa,GAAG;EACrBC,mBAAmB,EAAEC,oBAAM,CAACC,KAAK;EACjCC,sBAAsB,EAAEF,oBAAM,CAACG,KAAK,CAACC,MAAM;EAC3CC,eAAe,EAAER,iBAAiB;EAClCS,oBAAoB,EAAG,QAAQT,iBAAmB,YAAW;EAC7DU,oBAAoB,EAAG,QAAQV,iBAAmB,YAAW;EAC7DW,sBAAsB,EAAER,oBAAM,CAACC,KAAK;EACpCQ,mBAAmB,EAAE,KAAK;EAC1BC,gBAAgB,EAAE,aAAa;EAC/BC,qBAAqB,EAAG,eAAeX,oBAAM,CAACG,KAAK,CAACC,MAAQ,EAAC;EAC7DQ,6BAA6B,EAAEZ,oBAAM,CAACa,KAAK,CAACC,GAAG;EAC/CC,aAAa,EAAEnB,cAAc;EAC7BoB,mBAAmB,EAAG,SAASpB,cAAgB,UAAS;EACxDqB,kBAAkB,EAAG,SAASrB,cAAgB,UAAS;EACvDsB,kBAAkB,EAAG,SAAStB,cAAgB,UAAS;EACvDuB,mBAAmB,EAAG,SAASvB,cAAgB;AAChD,CAAC;AAED,MAAMwB,0BAA0B,GAAG;EAClCC,iCAAiC,EAAEvB,aAAa,CAACU,sBAAsB;EACvEc,6BAA6B,EAAEtB,oBAAM,CAACuB,EAAE,CAACC,MAAM;EAC/CC,yCAAyC,EACxC3B,aAAa,CAACC,mBAAmB;EAClC2B,qCAAqC,EAAE1B,oBAAM,CAACuB,EAAE,CAACC,MAAM;EACvDG,mCAAmC,EAAE7B,aAAa,CAACU;AACpD,CAAC;;AAED;AACA;AAAA,IAAAoB,QAAA,GACeC,MAAM,CAACC,MAAM,CAAE,CAAC,CAAC,EAAEhC,aAAa,EAAEsB,0BAA0B,EAAE;EAC5EW,YAAY,EAAE,oBAAoB;EAClCC,mBAAmB,EAAE,oBAAoB;EACzCC,wBAAwB,EAAE,oBAAoB;EAC9CC,mBAAmB,EAAE,qBAAqB;EAC1CC,kBAAkB,EAAE,CAAC;EACrBC,aAAa,EAAE,KAAK;EACpBC,WAAW,EAAE,KAAK;EAClBC,gBAAgB,EAAE,OAAO;EACzBC,cAAc,EAAE,KAAK;EACrBC,WAAW,EAAE,EAAE;EACfC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,mBAAmB;EAC/BC,UAAU,EAAE,mBAAmB;EAC/BC,UAAU,EAAE,mBAAmB;EAC/BC,UAAU,EAAE,mBAAmB;EAC/BC,UAAU,EAAE,MAAM;EAClBC,UAAU,EAAE,kBAAkB;EAC9BC,mBAAmB,EAAE,MAAM;EAC3BC,cAAc,EAAE,MAAM;EACtBC,aAAa,EAAE,mBAAmB;EAClCC,cAAc,EAAE,mBAAmB;EACnCC,kBAAkB,EAAE,KAAK;EACzBC,UAAU,EAAE,QAAQ;EACpBC,iBAAiB,EAAE,KAAK;EACxBC,QAAQ,EAAE,KAAK;EACfC,gBAAgB,EAAE,KAAK;EACvBC,iBAAiB,EAAG,GAAG,IAAAC,YAAK,EAAE,CAAE,CAAG,EAAC;EACpCC,gBAAgB,EAAG,GAAG,IAAAD,YAAK,EAAE,CAAE,CAAG,EAAC;EACnCE,iBAAiB,EAAG,GAAG,IAAAF,YAAK,EAAE,CAAE,CAAG,IAAI,IAAAA,YAAK,EAAE,CAAE,CAAG,EAAC;EACpDG,gBAAgB,EAAG,GAAG,IAAAH,YAAK,EAAE,CAAE,CAAG,IAAI,IAAAA,YAAK,EAAE,CAAE,CAAG,EAAC;EACnDI,aAAa,EAAG,kHAAiH;EACjIC,sBAAsB,EAAE/D,oBAAM,CAACC,KAAK;EACpC+D,4BAA4B,EAAE,SAAS;EACvCC,0BAA0B,EAAE,SAAS;EACrCC,kBAAkB,EAAE,oBAAoB;EACxCC,sBAAsB,EAAE,qBAAqB;EAC7CC,wBAAwB,EAAE,qBAAqB;EAC/CC,8BAA8B,EAAErE,oBAAM,CAACC,KAAK;EAC5CqE,YAAY,EAAEtE,oBAAM,CAACC,KAAK;EAC1BsE,kBAAkB,EAAE,OAAO;EAC3BC,sBAAsB,EAAE,OAAO;EAC/BC,wBAAwB,EAAE,OAAO;EACjCC,yBAAyB,EAAE,OAAO;EAClCC,wBAAwB,EAAE,mCAAmC;EAC7DC,+BAA+B,EAAE;AAClC,CAAE,CAAC;AAAAC,OAAA,CAAAC,OAAA,GAAAlD,QAAA"}

package/build/{ui/utils → utils}/font-size.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PRESET_FONT_SIZES = exports.HEADING_FONT_SIZES = exports.BASE_FONT_SIZE = void 0;
 exports.getFontSize = getFontSize;
 exports.getHeadingFontSize = getHeadingFontSize;
-var _configValues = _interopRequireDefault(require("../../utils/config-values"));
+var _configValues = _interopRequireDefault(require("./config-values"));
 /**
  * External dependencies
  */

package/build/utils/font-size.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_configValues","_interopRequireDefault","require","BASE_FONT_SIZE","exports","PRESET_FONT_SIZES","body","caption","footnote","largeTitle","subheadline","title","HEADING_FONT_SIZES","flatMap","n","toString","getFontSize","size","parsed","parseFloat","Number","isNaN","ratio","CONFIG","fontSize","getHeadingFontSize","includes","headingSize"],"sources":["@wordpress/components/src/utils/font-size.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactText } from 'react';\n\n/**\n * Internal dependencies\n */\nimport CONFIG from './config-values';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport const BASE_FONT_SIZE = 13;\n\nexport const PRESET_FONT_SIZES = {\n\tbody: BASE_FONT_SIZE,\n\tcaption: 10,\n\tfootnote: 11,\n\tlargeTitle: 28,\n\tsubheadline: 12,\n\ttitle: 20,\n};\n\nexport const HEADING_FONT_SIZES = [ 1, 2, 3, 4, 5, 6 ].flatMap( ( n ) => [\n\tn as HeadingSize,\n\tn.toString() as HeadingSize,\n] );\n\nexport function getFontSize(\n\tsize:\n\t\t| CSSProperties[ 'fontSize' ]\n\t\t| keyof typeof PRESET_FONT_SIZES = BASE_FONT_SIZE\n): string {\n\tif ( size in PRESET_FONT_SIZES ) {\n\t\treturn getFontSize(\n\t\t\tPRESET_FONT_SIZES[ size as keyof typeof PRESET_FONT_SIZES ]\n\t\t);\n\t}\n\n\tif ( typeof size !== 'number' ) {\n\t\tconst parsed = parseFloat( size );\n\t\tif ( Number.isNaN( parsed ) ) return size;\n\t\tsize = parsed;\n\t}\n\n\tconst ratio = `(${ size } / ${ BASE_FONT_SIZE })`;\n\treturn `calc(${ ratio } * ${ CONFIG.fontSize })`;\n}\n\nexport function getHeadingFontSize( size: ReactText = 3 ): string {\n\tif ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) {\n\t\treturn getFontSize( size );\n\t}\n\n\tconst headingSize = `fontSizeH${ size }` as `fontSizeH${ HeadingSize }`;\n\treturn CONFIG[ headingSize ];\n}\n"],"mappings":";;;;;;;;;AAQA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAiBO,MAAMC,cAAc,GAAG,EAAE;AAACC,OAAA,CAAAD,cAAA,GAAAA,cAAA;AAE1B,MAAME,iBAAiB,GAAG;EAChCC,IAAI,EAAEH,cAAc;EACpBI,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE;AACR,CAAC;AAACP,OAAA,CAAAC,iBAAA,GAAAA,iBAAA;AAEK,MAAMO,kBAAkB,GAAG,CAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE,CAACC,OAAO,CAAIC,CAAC,IAAM,CACxEA,CAAC,EACDA,CAAC,CAACC,QAAQ,CAAC,CAAC,CACX,CAAC;AAACX,OAAA,CAAAQ,kBAAA,GAAAA,kBAAA;AAEG,SAASI,WAAWA,CAC1BC,IAEiC,GAAGd,cAAc,EACzC;EACT,IAAKc,IAAI,IAAIZ,iBAAiB,EAAG;IAChC,OAAOW,WAAW,CACjBX,iBAAiB,CAAEY,IAAI,CACxB,CAAC;EACF;EAEA,IAAK,OAAOA,IAAI,KAAK,QAAQ,EAAG;IAC/B,MAAMC,MAAM,GAAGC,UAAU,CAAEF,IAAK,CAAC;IACjC,IAAKG,MAAM,CAACC,KAAK,CAAEH,MAAO,CAAC,EAAG,OAAOD,IAAI;IACzCA,IAAI,GAAGC,MAAM;EACd;EAEA,MAAMI,KAAK,GAAI,IAAIL,IAAM,MAAMd,cAAgB,GAAE;EACjD,OAAQ,QAAQmB,KAAO,MAAMC,qBAAM,CAACC,QAAU,GAAE;AACjD;AAEO,SAASC,kBAAkBA,CAAER,IAAe,GAAG,CAAC,EAAW;EACjE,IAAK,CAAEL,kBAAkB,CAACc,QAAQ,CAAET,IAAoB,CAAC,EAAG;IAC3D,OAAOD,WAAW,CAAEC,IAAK,CAAC;EAC3B;EAEA,MAAMU,WAAW,GAAI,YAAYV,IAAM,EAAgC;EACvE,OAAOM,qBAAM,CAAEI,WAAW,CAAE;AAC7B"}

package/build/utils/get-valid-children.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","getValidChildren","children","Children","toArray","filter","child","isValidElement"],"sources":["@wordpress/components/src/utils/get-valid-children.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Children, isValidElement } from '@wordpress/element';\n\n/**\n * Gets a collection of available children elements from a React component's children prop.\n *\n * @param children\n *\n * @return An array of available children.\n */\nexport function getValidChildren(\n\tchildren: ReactNode\n): Array< ReactChild | ReactFragment | ReactPortal > {\n\tif ( typeof children === 'string' ) return [ children ];\n\n\treturn Children.toArray( children ).filter( ( child ) =>\n\t\tisValidElement( child )\n\t);\n}\n"],"mappings":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,gBAAgBA,CAC/BC,QAAmB,EACiC;EACpD,IAAK,OAAOA,QAAQ,KAAK,QAAQ,EAAG,OAAO,CAAEA,QAAQ,CAAE;EAEvD,OAAOC,iBAAQ,CAACC,OAAO,CAAEF,QAAS,CAAC,CAACG,MAAM,CAAIC,KAAK,IAClD,IAAAC,uBAAc,EAAED,KAAM,CACvB,CAAC;AACF"}

package/build/utils/space.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GRID_BASE","space","value","undefined","asInt","Number","window","CSS","supports","toString","isNaN"],"sources":["@wordpress/components/src/utils/space.ts"],"sourcesContent":["/**\n * The argument value for the `space()` utility function.\n *\n * When this is a number or a numeric string, it will be interpreted as a\n * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.\n *\n * Otherwise, it will be interpreted as a literal CSS length value. For example,\n * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.\n */\nexport type SpaceInput = number | string;\n\nconst GRID_BASE = '4px';\n\n/**\n * A function that handles numbers, numeric strings, and unit values.\n *\n * When given a number or a numeric string, it will return the grid-based\n * value as a factor of GRID_BASE, defined above.\n *\n * When given a unit value or one of the named CSS values like `auto`,\n * it will simply return the value back.\n *\n * @param value A number, numeric string, or a unit value.\n */\nexport function space( value?: SpaceInput ): string | undefined {\n\tif ( typeof value === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\n\t// Handle empty strings, if it's the number 0 this still works.\n\tif ( ! value ) {\n\t\treturn '0';\n\t}\n\n\tconst asInt = typeof value === 'number' ? value : Number( value );\n\n\t// Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.\n\tif (\n\t\t( typeof window !== 'undefined' &&\n\t\t\twindow.CSS?.supports?.( 'margin', value.toString() ) ) ||\n\t\tNumber.isNaN( asInt )\n\t) {\n\t\treturn value.toString();\n\t}\n\n\treturn `calc(${ GRID_BASE } * ${ value })`;\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,MAAMA,SAAS,GAAG,KAAK;;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,KAAKA,CAAEC,KAAkB,EAAuB;EAC/D,IAAK,OAAOA,KAAK,KAAK,WAAW,EAAG;IACnC,OAAOC,SAAS;EACjB;;EAEA;EACA,IAAK,CAAED,KAAK,EAAG;IACd,OAAO,GAAG;EACX;EAEA,MAAME,KAAK,GAAG,OAAOF,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGG,MAAM,CAAEH,KAAM,CAAC;;EAEjE;EACA,IACG,OAAOI,MAAM,KAAK,WAAW,IAC9BA,MAAM,CAACC,GAAG,EAAEC,QAAQ,GAAI,QAAQ,EAAEN,KAAK,CAACO,QAAQ,CAAC,CAAE,CAAC,IACrDJ,MAAM,CAACK,KAAK,CAAEN,KAAM,CAAC,EACpB;IACD,OAAOF,KAAK,CAACO,QAAQ,CAAC,CAAC;EACxB;EAEA,OAAQ,QAAQT,SAAW,MAAME,KAAO,GAAE;AAC3C"}

package/build/utils/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/utils/types.ts"],"sourcesContent":["export type SizeRangeDefault =\n\t| 'xLarge'\n\t| 'large'\n\t| 'medium'\n\t| 'small'\n\t| 'xSmall';\n\nexport type SizeRangeReduced = 'large' | 'medium' | 'small';\n\nexport type PopperPlacement =\n\t| 'auto'\n\t| 'auto-start'\n\t| 'auto-end'\n\t| 'top'\n\t| 'top-start'\n\t| 'top-end'\n\t| 'right'\n\t| 'right-start'\n\t| 'right-end'\n\t| 'bottom'\n\t| 'bottom-start'\n\t| 'bottom-end'\n\t| 'left'\n\t| 'left-start'\n\t| 'left-end';\n\nexport type PopperProps = {\n\t/**\n\t * Position of the popover element.\n\t *\n\t * @default 'auto'\n\t *\n\t * @see https://popper.js.org/docs/v1/#popperplacements--codeenumcode\n\t */\n\tplacement?: PopperPlacement;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/utils/types.ts"],"sourcesContent":["export type ResponsiveCSSValue< T > = Array< T | undefined > | T;\n"],"mappings":""}

package/build/utils/use-deprecated-props.js

@@ -11,7 +11,8 @@ var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
  */
 
 function useDeprecated36pxDefaultSizeProp(props, /** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */
-componentIdentifier) {
+componentIdentifier, /** Version in which the prop was deprecated. */
+since = '6.3') {
   const {
     __next36pxDefaultSize,
     __next40pxDefaultSize,
@@ -20,7 +21,7 @@ componentIdentifier) {
   if (typeof __next36pxDefaultSize !== 'undefined') {
     (0, _deprecated.default)('`__next36pxDefaultSize` prop in ' + componentIdentifier, {
       alternative: '`__next40pxDefaultSize`',
-      since: '6.3'
+      since
     });
   }
   return {

package/build/utils/use-deprecated-props.js.map

@@ -1 +1 @@
-{"version":3,"names":["_deprecated","_interopRequireDefault","require","useDeprecated36pxDefaultSizeProp","props","componentIdentifier","__next36pxDefaultSize","__next40pxDefaultSize","otherProps","deprecated","alternative","since"],"sources":["@wordpress/components/src/utils/use-deprecated-props.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\nexport function useDeprecated36pxDefaultSizeProp<\n\tP extends Record< string, any > & {\n\t\t__next36pxDefaultSize?: boolean;\n\t\t__next40pxDefaultSize?: boolean;\n\t},\n>(\n\tprops: P,\n\t/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */\n\tcomponentIdentifier: string\n) {\n\tconst { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =\n\t\tprops;\n\tif ( typeof __next36pxDefaultSize !== 'undefined' ) {\n\t\tdeprecated( '`__next36pxDefaultSize` prop in ' + componentIdentifier, {\n\t\t\talternative: '`__next40pxDefaultSize`',\n\t\t\tsince: '6.3',\n\t\t} );\n\t}\n\n\treturn {\n\t\t...otherProps,\n\t\t__next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGO,SAASC,gCAAgCA,CAM/CC,KAAQ,EACR;AACAC,mBAA2B,EAC1B;EACD,MAAM;IAAEC,qBAAqB;IAAEC,qBAAqB;IAAE,GAAGC;EAAW,CAAC,GACpEJ,KAAK;EACN,IAAK,OAAOE,qBAAqB,KAAK,WAAW,EAAG;IACnD,IAAAG,mBAAU,EAAE,kCAAkC,GAAGJ,mBAAmB,EAAE;MACrEK,WAAW,EAAE,yBAAyB;MACtCC,KAAK,EAAE;IACR,CAAE,CAAC;EACJ;EAEA,OAAO;IACN,GAAGH,UAAU;IACbD,qBAAqB,EAAEA,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAID;EACjD,CAAC;AACF"}
+{"version":3,"names":["_deprecated","_interopRequireDefault","require","useDeprecated36pxDefaultSizeProp","props","componentIdentifier","since","__next36pxDefaultSize","__next40pxDefaultSize","otherProps","deprecated","alternative"],"sources":["@wordpress/components/src/utils/use-deprecated-props.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\nexport function useDeprecated36pxDefaultSizeProp<\n\tP extends Record< string, any > & {\n\t\t__next36pxDefaultSize?: boolean;\n\t\t__next40pxDefaultSize?: boolean;\n\t},\n>(\n\tprops: P,\n\t/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */\n\tcomponentIdentifier: string,\n\t/** Version in which the prop was deprecated. */\n\tsince: string = '6.3'\n) {\n\tconst { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =\n\t\tprops;\n\tif ( typeof __next36pxDefaultSize !== 'undefined' ) {\n\t\tdeprecated( '`__next36pxDefaultSize` prop in ' + componentIdentifier, {\n\t\t\talternative: '`__next40pxDefaultSize`',\n\t\t\tsince,\n\t\t} );\n\t}\n\n\treturn {\n\t\t...otherProps,\n\t\t__next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGO,SAASC,gCAAgCA,CAM/CC,KAAQ,EACR;AACAC,mBAA2B,EAC3B;AACAC,KAAa,GAAG,KAAK,EACpB;EACD,MAAM;IAAEC,qBAAqB;IAAEC,qBAAqB;IAAE,GAAGC;EAAW,CAAC,GACpEL,KAAK;EACN,IAAK,OAAOG,qBAAqB,KAAK,WAAW,EAAG;IACnD,IAAAG,mBAAU,EAAE,kCAAkC,GAAGL,mBAAmB,EAAE;MACrEM,WAAW,EAAE,yBAAyB;MACtCL;IACD,CAAE,CAAC;EACJ;EAEA,OAAO;IACN,GAAGG,UAAU;IACbD,qBAAqB,EAAEA,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAID;EACjD,CAAC;AACF"}

package/build/utils/use-responsive-value.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","breakpoints","useBreakpointIndex","options","defaultIndex","TypeError","length","RangeError","value","setValue","useState","useEffect","getIndex","filter","bp","window","matchMedia","matches","onResize","newValue","addEventListener","removeEventListener","exports","useResponsiveValue","values","index","Array","isArray","array"],"sources":["@wordpress/components/src/utils/use-responsive-value.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\nconst breakpoints = [ '40em', '52em', '64em' ];\n\nexport const useBreakpointIndex = (\n\toptions: { defaultIndex?: number } = {}\n) => {\n\tconst { defaultIndex = 0 } = options;\n\n\tif ( typeof defaultIndex !== 'number' ) {\n\t\tthrow new TypeError(\n\t\t\t`Default breakpoint index should be a number. Got: ${ defaultIndex }, ${ typeof defaultIndex }`\n\t\t);\n\t} else if ( defaultIndex < 0 || defaultIndex > breakpoints.length - 1 ) {\n\t\tthrow new RangeError(\n\t\t\t`Default breakpoint index out of range. Theme has ${ breakpoints.length } breakpoints, got index ${ defaultIndex }`\n\t\t);\n\t}\n\n\tconst [ value, setValue ] = useState( defaultIndex );\n\n\tuseEffect( () => {\n\t\tconst getIndex = () =>\n\t\t\tbreakpoints.filter( ( bp ) => {\n\t\t\t\treturn typeof window !== 'undefined'\n\t\t\t\t\t? window.matchMedia( `screen and (min-width: ${ bp })` )\n\t\t\t\t\t\t\t.matches\n\t\t\t\t\t: false;\n\t\t\t} ).length;\n\n\t\tconst onResize = () => {\n\t\t\tconst newValue = getIndex();\n\t\t\tif ( value !== newValue ) {\n\t\t\t\tsetValue( newValue );\n\t\t\t}\n\t\t};\n\n\t\tonResize();\n\n\t\tif ( typeof window !== 'undefined' ) {\n\t\t\twindow.addEventListener( 'resize', onResize );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( typeof window !== 'undefined' ) {\n\t\t\t\twindow.removeEventListener( 'resize', onResize );\n\t\t\t}\n\t\t};\n\t}, [ value ] );\n\n\treturn value;\n};\n\nexport function useResponsiveValue< T >(\n\tvalues: ( T | undefined )[],\n\toptions: Parameters< typeof useBreakpointIndex >[ 0 ] = {}\n): T | undefined {\n\tconst index = useBreakpointIndex( options );\n\n\t// Allow calling the function with a \"normal\" value without having to check on the outside.\n\tif ( ! Array.isArray( values ) && typeof values !== 'function' )\n\t\treturn values;\n\n\tconst array = values || [];\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\treturn /** @type {T[]} */ array[\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\tindex >= array.length ? array.length - 1 : index\n\t];\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA,MAAMC,WAAW,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAE;AAEvC,MAAMC,kBAAkB,GAAGA,CACjCC,OAAkC,GAAG,CAAC,CAAC,KACnC;EACJ,MAAM;IAAEC,YAAY,GAAG;EAAE,CAAC,GAAGD,OAAO;EAEpC,IAAK,OAAOC,YAAY,KAAK,QAAQ,EAAG;IACvC,MAAM,IAAIC,SAAS,CACjB,qDAAqDD,YAAc,KAAK,OAAOA,YAAc,EAC/F,CAAC;EACF,CAAC,MAAM,IAAKA,YAAY,GAAG,CAAC,IAAIA,YAAY,GAAGH,WAAW,CAACK,MAAM,GAAG,CAAC,EAAG;IACvE,MAAM,IAAIC,UAAU,CAClB,oDAAoDN,WAAW,CAACK,MAAQ,2BAA2BF,YAAc,EACnH,CAAC;EACF;EAEA,MAAM,CAAEI,KAAK,EAAEC,QAAQ,CAAE,GAAG,IAAAC,iBAAQ,EAAEN,YAAa,CAAC;EAEpD,IAAAO,kBAAS,EAAE,MAAM;IAChB,MAAMC,QAAQ,GAAGA,CAAA,KAChBX,WAAW,CAACY,MAAM,CAAIC,EAAE,IAAM;MAC7B,OAAO,OAAOC,MAAM,KAAK,WAAW,GACjCA,MAAM,CAACC,UAAU,CAAG,0BAA0BF,EAAI,GAAG,CAAC,CACrDG,OAAO,GACR,KAAK;IACT,CAAE,CAAC,CAACX,MAAM;IAEX,MAAMY,QAAQ,GAAGA,CAAA,KAAM;MACtB,MAAMC,QAAQ,GAAGP,QAAQ,CAAC,CAAC;MAC3B,IAAKJ,KAAK,KAAKW,QAAQ,EAAG;QACzBV,QAAQ,CAAEU,QAAS,CAAC;MACrB;IACD,CAAC;IAEDD,QAAQ,CAAC,CAAC;IAEV,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;MACpCA,MAAM,CAACK,gBAAgB,CAAE,QAAQ,EAAEF,QAAS,CAAC;IAC9C;IACA,OAAO,MAAM;MACZ,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;QACpCA,MAAM,CAACM,mBAAmB,CAAE,QAAQ,EAAEH,QAAS,CAAC;MACjD;IACD,CAAC;EACF,CAAC,EAAE,CAAEV,KAAK,CAAG,CAAC;EAEd,OAAOA,KAAK;AACb,CAAC;AAACc,OAAA,CAAApB,kBAAA,GAAAA,kBAAA;AAEK,SAASqB,kBAAkBA,CACjCC,MAA2B,EAC3BrB,OAAqD,GAAG,CAAC,CAAC,EAC1C;EAChB,MAAMsB,KAAK,GAAGvB,kBAAkB,CAAEC,OAAQ,CAAC;;EAE3C;EACA,IAAK,CAAEuB,KAAK,CAACC,OAAO,CAAEH,MAAO,CAAC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAC7D,OAAOA,MAAM;EAEd,MAAMI,KAAK,GAAGJ,MAAM,IAAI,EAAE;;EAE1B;EACA,OAAO,mBAAmBI,KAAK,CAC9B;IACAH,KAAK,IAAIG,KAAK,CAACtB,MAAM,GAAGsB,KAAK,CAACtB,MAAM,GAAG,CAAC,GAAGmB,KAAK;EAChD;AACF"}

package/build/v-stack/component.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.VStack = void 0;
-var _element = require("@wordpress/element");
-var _context = require("../ui/context");
+var _react = require("react");
+var _context = require("../context");
 var _view = require("../view");
 var _hook = require("./hook");
 /**
@@ -18,7 +18,7 @@ var _hook = require("./hook");
 
 function UnconnectedVStack(props, forwardedRef) {
   const vStackProps = (0, _hook.useVStack)(props);
-  return (0, _element.createElement)(_view.View, {
+  return (0, _react.createElement)(_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","_element","createElement","View","ref","VStack","contextConnect","exports","_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 '../ui/context';\nimport { contextConnect } from '../ui/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,QAAA,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,GAAG,IAAAC,uBAAc,EAAEV,iBAAiB,EAAE,QAAS,CAAC;AAACW,OAAA,CAAAF,MAAA,GAAAA,MAAA;AAAA,IAAAG,QAAA,GAErDH,MAAM;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}
+{"version":3,"names":["_context","require","_view","_hook","UnconnectedVStack","props","forwardedRef","vStackProps","useVStack","_react","createElement","View","ref","VStack","contextConnect","exports","_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,GAAG,IAAAC,uBAAc,EAAEV,iBAAiB,EAAE,QAAS,CAAC;AAACW,OAAA,CAAAF,MAAA,GAAAA,MAAA;AAAA,IAAAG,QAAA,GAErDH,MAAM;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

package/build/v-stack/hook.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useVStack = useVStack;
-var _context = require("../ui/context");
+var _context = require("../context");
 var _hStack = require("../h-stack");
 /**
  * Internal dependencies

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

@@ -1 +1 @@
-{"version":3,"names":["_context","require","_hStack","useVStack","props","expanded","alignment","otherProps","useContextSystem","hStackProps","useHStack","direction"],"sources":["@wordpress/components/src/v-stack/hook.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { useContextSystem } from '../ui/context';\nimport { useHStack } from '../h-stack';\nimport type { VStackProps } from './types';\n\nexport function useVStack(\n\tprops: WordPressComponentProps< VStackProps, 'div' >\n) {\n\tconst {\n\t\texpanded = false,\n\t\talignment = 'stretch',\n\t\t...otherProps\n\t} = useContextSystem( props, 'VStack' );\n\n\tconst hStackProps = useHStack( {\n\t\tdirection: 'column',\n\t\texpanded,\n\t\talignment,\n\t\t...otherProps,\n\t} );\n\n\treturn hStackProps;\n}\n"],"mappings":";;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AALA;AACA;AACA;;AAMO,SAASE,SAASA,CACxBC,KAAoD,EACnD;EACD,MAAM;IACLC,QAAQ,GAAG,KAAK;IAChBC,SAAS,GAAG,SAAS;IACrB,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEJ,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMK,WAAW,GAAG,IAAAC,iBAAS,EAAE;IAC9BC,SAAS,EAAE,QAAQ;IACnBN,QAAQ;IACRC,SAAS;IACT,GAAGC;EACJ,CAAE,CAAC;EAEH,OAAOE,WAAW;AACnB"}
+{"version":3,"names":["_context","require","_hStack","useVStack","props","expanded","alignment","otherProps","useContextSystem","hStackProps","useHStack","direction"],"sources":["@wordpress/components/src/v-stack/hook.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem } from '../context';\nimport { useHStack } from '../h-stack';\nimport type { VStackProps } from './types';\n\nexport function useVStack(\n\tprops: WordPressComponentProps< VStackProps, 'div' >\n) {\n\tconst {\n\t\texpanded = false,\n\t\talignment = 'stretch',\n\t\t...otherProps\n\t} = useContextSystem( props, 'VStack' );\n\n\tconst hStackProps = useHStack( {\n\t\tdirection: 'column',\n\t\texpanded,\n\t\talignment,\n\t\t...otherProps,\n\t} );\n\n\treturn hStackProps;\n}\n"],"mappings":";;;;;;AAIA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AALA;AACA;AACA;;AAMO,SAASE,SAASA,CACxBC,KAAoD,EACnD;EACD,MAAM;IACLC,QAAQ,GAAG,KAAK;IAChBC,SAAS,GAAG,SAAS;IACrB,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEJ,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMK,WAAW,GAAG,IAAAC,iBAAS,EAAE;IAC9BC,SAAS,EAAE,QAAQ;IACnBN,QAAQ;IACRC,SAAS;IACT,GAAGC;EACJ,CAAE,CAAC;EAEH,OAAOE,WAAW;AACnB"}

package/build/view/component.js

@@ -31,7 +31,7 @@ const View = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
 } : {
   target: "e19lxcc00",
   label: "View"
-})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdmlldy9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDYyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3ZpZXcvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB0eXBlIHsgUmVmQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnQgfSBmcm9tICcuLi91aS9jb250ZXh0L3dvcmRwcmVzcy1jb21wb25lbnQnO1xuaW1wb3J0IHR5cGUgeyBWaWV3UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuLyoqXG4gKiBgVmlld2AgaXMgYSBjb3JlIGNvbXBvbmVudCB0aGF0IHJlbmRlcnMgZXZlcnl0aGluZyBpbiB0aGUgbGlicmFyeS5cbiAqIEl0IGlzIHRoZSBwcmluY2lwbGUgY29tcG9uZW50IGluIHRoZSBlbnRpcmUgbGlicmFyeS5cbiAqXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7IFZpZXcgfSBmcm9tIGBAd29yZHByZXNzL2NvbXBvbmVudHNgO1xuICpcbiAqIGZ1bmN0aW9uIEV4YW1wbGUoKSB7XG4gKiBcdHJldHVybiAoXG4gKiBcdFx0PFZpZXc+XG4gKiBcdFx0XHQgQ29kZSBpcyBQb2V0cnlcbiAqIFx0XHQ8L1ZpZXc+XG4gKiBcdCk7XG4gKiB9XG4gKiBgYGBcbiAqL1xuZXhwb3J0IGNvbnN0IFZpZXc6IFdvcmRQcmVzc0NvbXBvbmVudDxcblx0J2RpdicsXG5cdFZpZXdQcm9wcyAmIFJlZkF0dHJpYnV0ZXM8IGFueSA+LFxuXHR0cnVlXG4+ID0gc3R5bGVkLmRpdmBgO1xuXG5WaWV3LnNlbGVjdG9yID0gJy5jb21wb25lbnRzLXZpZXcnO1xuVmlldy5kaXNwbGF5TmFtZSA9ICdWaWV3JztcblxuZXhwb3J0IGRlZmF1bHQgVmlldztcbiJdfQ== */");
+})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdmlldy9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDYyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3ZpZXcvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB0eXBlIHsgUmVmQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnQgfSBmcm9tICcuLi9jb250ZXh0L3dvcmRwcmVzcy1jb21wb25lbnQnO1xuaW1wb3J0IHR5cGUgeyBWaWV3UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuLyoqXG4gKiBgVmlld2AgaXMgYSBjb3JlIGNvbXBvbmVudCB0aGF0IHJlbmRlcnMgZXZlcnl0aGluZyBpbiB0aGUgbGlicmFyeS5cbiAqIEl0IGlzIHRoZSBwcmluY2lwbGUgY29tcG9uZW50IGluIHRoZSBlbnRpcmUgbGlicmFyeS5cbiAqXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7IFZpZXcgfSBmcm9tIGBAd29yZHByZXNzL2NvbXBvbmVudHNgO1xuICpcbiAqIGZ1bmN0aW9uIEV4YW1wbGUoKSB7XG4gKiBcdHJldHVybiAoXG4gKiBcdFx0PFZpZXc+XG4gKiBcdFx0XHQgQ29kZSBpcyBQb2V0cnlcbiAqIFx0XHQ8L1ZpZXc+XG4gKiBcdCk7XG4gKiB9XG4gKiBgYGBcbiAqL1xuZXhwb3J0IGNvbnN0IFZpZXc6IFdvcmRQcmVzc0NvbXBvbmVudDxcblx0J2RpdicsXG5cdFZpZXdQcm9wcyAmIFJlZkF0dHJpYnV0ZXM8IGFueSA+LFxuXHR0cnVlXG4+ID0gc3R5bGVkLmRpdmBgO1xuXG5WaWV3LnNlbGVjdG9yID0gJy5jb21wb25lbnRzLXZpZXcnO1xuVmlldy5kaXNwbGF5TmFtZSA9ICdWaWV3JztcblxuZXhwb3J0IGRlZmF1bHQgVmlldztcbiJdfQ== */");
 exports.View = View;
 View.selector = '.components-view';
 View.displayName = 'View';

package/build/view/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","_base","default","process","env","NODE_ENV","target","label","exports","selector","displayName","_default"],"sources":["@wordpress/components/src/view/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport type { RefAttributes } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponent } from '../ui/context/wordpress-component';\nimport type { ViewProps } from './types';\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: WordPressComponent<\n\t'div',\n\tViewProps & RefAttributes< any >,\n\ttrue\n> = styled.div``;\n\nView.selector = '.components-view';\nView.displayName = 'View';\n\nexport default View;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAIZ,OAAAC,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,24CAAe;AAACG,OAAA,CAAAR,IAAA,GAAAA,IAAA;AAEjBA,IAAI,CAACS,QAAQ,GAAG,kBAAkB;AAClCT,IAAI,CAACU,WAAW,GAAG,MAAM;AAAC,IAAAC,QAAA,GAEXX,IAAI;AAAAQ,OAAA,CAAAN,OAAA,GAAAS,QAAA"}
+{"version":3,"names":["View","_base","default","process","env","NODE_ENV","target","label","exports","selector","displayName","_default"],"sources":["@wordpress/components/src/view/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport type { RefAttributes } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponent } from '../context/wordpress-component';\nimport type { ViewProps } from './types';\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: WordPressComponent<\n\t'div',\n\tViewProps & RefAttributes< any >,\n\ttrue\n> = styled.div``;\n\nView.selector = '.components-view';\nView.displayName = 'View';\n\nexport default View;\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAIZ,OAAAC,KAAA,CAAAC,OAAA,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,u4CAAe;AAACG,OAAA,CAAAR,IAAA,GAAAA,IAAA;AAEjBA,IAAI,CAACS,QAAQ,GAAG,kBAAkB;AAClCT,IAAI,CAACU,WAAW,GAAG,MAAM;AAAC,IAAAC,QAAA,GAEXX,IAAI;AAAAQ,OAAA,CAAAN,OAAA,GAAAS,QAAA"}

package/build/visually-hidden/component.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.VisuallyHidden = void 0;
-var _element = require("@wordpress/element");
-var _context = require("../ui/context");
+var _react = require("react");
+var _context = require("../context");
 var _styles = require("./styles");
 var _view = require("../view");
 /**
@@ -21,7 +21,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
     style: styleProp,
     ...contextProps
   } = (0, _context.useContextSystem)(props, 'VisuallyHidden');
-  return (0, _element.createElement)(_view.View, {
+  return (0, _react.createElement)(_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","_element","createElement","View","ref","visuallyHidden","VisuallyHidden","contextConnect","exports","_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 '../ui/context';\nimport { useContextSystem, contextConnect } from '../ui/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,QAAA,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,GAAG,IAAAC,uBAAc,EAC3Cb,yBAAyB,EACzB,gBACD,CAAC;AAACc,OAAA,CAAAF,cAAA,GAAAA,cAAA;AAAA,IAAAG,QAAA,GAEaH,cAAc;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}
+{"version":3,"names":["_context","require","_styles","_view","UnconnectedVisuallyHidden","props","forwardedRef","style","styleProp","contextProps","useContextSystem","_react","createElement","View","ref","visuallyHidden","VisuallyHidden","contextConnect","exports","_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,GAAG,IAAAC,uBAAc,EAC3Cb,yBAAyB,EACzB,gBACD,CAAC;AAACc,OAAA,CAAAF,cAAA,GAAAA,cAAA;AAAA,IAAAG,QAAA,GAEaH,cAAc;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

package/build/z-stack/component.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ZStack = void 0;
+var _react = require("react");
 var _element = require("@wordpress/element");
-var _getValidChildren = require("../ui/utils/get-valid-children");
-var _context = require("../ui/context");
+var _getValidChildren = require("../utils/get-valid-children");
+var _context = require("../context");
 var _styles = require("./styles");
 /**
  * External dependencies
@@ -37,13 +38,13 @@ 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, _element.createElement)(_styles.ZStackChildView, {
+    return (0, _react.createElement)(_styles.ZStackChildView, {
       offsetAmount: offsetAmount,
       zIndex: zIndex,
       key: key
     }, child);
   });
-  return (0, _element.createElement)(_styles.ZStackView, {
+  return (0, _react.createElement)(_styles.ZStackView, {
     ...otherProps,
     className: className,
     isLayered: isLayered,

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","createElement","ZStackChildView","ZStackView","ref","ZStack","contextConnect","exports","_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 '../ui/utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../ui/context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport type { ZStackProps } from './types';\nimport type { WordPressComponentProps } from '../ui/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,IAAAtB,QAAA,CAAA2B,aAAA,EAACvB,OAAA,CAAAwB,eAAe;MACfJ,YAAY,EAAGA,YAAc;MAC7BD,MAAM,EAAGA,MAAQ;MACjBE,GAAG,EAAGA;IAAK,GAETJ,KACc,CAAC;EAEpB,CAAE,CAAC;EAEH,OACC,IAAArB,QAAA,CAAA2B,aAAA,EAACvB,OAAA,CAAAyB,UAAU;IAAA,GACLhB,UAAU;IACfJ,SAAS,EAAGA,SAAW;IACvBC,SAAS,EAAGA,SAAW;IACvBoB,GAAG,EAAGvB;EAAc,GAElBY,cACS,CAAC;AAEf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMY,MAAM,GAAG,IAAAC,uBAAc,EAAE3B,iBAAiB,EAAE,QAAS,CAAC;AAAC4B,OAAA,CAAAF,MAAA,GAAAA,MAAA;AAAA,IAAAG,QAAA,GAErDH,MAAM;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}
+{"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","contextConnect","exports","_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,GAAG,IAAAC,uBAAc,EAAE5B,iBAAiB,EAAE,QAAS,CAAC;AAAC6B,OAAA,CAAAF,MAAA,GAAAA,MAAA;AAAA,IAAAG,QAAA,GAErDH,MAAM;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * Internal dependencies
  */

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

@@ -1 +1 @@
-{"version":3,"names":["CompositeItem","Tooltip","VisuallyHidden","ALIGNMENT_LABEL","Cell","CellView","Point","isActive","value","props","tooltipText","createElement","text","as","role"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite';\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 '../ui/context';\n\nexport default function Cell( {\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 as={ CellView } role=\"gridcell\" { ...props }>\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,cAAc;AAC5C,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,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGP,eAAe,CAAEK,KAAK,CAAE;EAE5C,OACCG,aAAA,CAACV,OAAO;IAACW,IAAI,EAAGF;EAAa,GAC5BC,aAAA,CAACX,aAAa;IAACa,EAAE,EAAGR,QAAU;IAACS,IAAI,EAAC,UAAU;IAAA,GAAML;EAAK,GAIxDE,aAAA,CAACT,cAAc,QAAGM,KAAuB,CAAC,EAC1CG,aAAA,CAACL,KAAK;IAACC,QAAQ,EAAGA,QAAU;IAACO,IAAI,EAAC;EAAc,CAAE,CACpC,CACP,CAAC;AAEZ"}
+{"version":3,"names":["CompositeItem","Tooltip","VisuallyHidden","ALIGNMENT_LABEL","Cell","CellView","Point","isActive","value","props","tooltipText","createElement","text","as","role"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite';\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\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 as={ CellView } role=\"gridcell\" { ...props }>\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,cAAc;AAC5C,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,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGP,eAAe,CAAEK,KAAK,CAAE;EAE5C,OACCG,aAAA,CAACV,OAAO;IAACW,IAAI,EAAGF;EAAa,GAC5BC,aAAA,CAACX,aAAa;IAACa,EAAE,EAAGR,QAAU;IAACS,IAAI,EAAC,UAAU;IAAA,GAAML;EAAK,GAIxDE,aAAA,CAACT,cAAc,QAAGM,KAAuB,CAAC,EAC1CG,aAAA,CAACL,KAAK;IAACC,QAAQ,EAAGA,QAAU;IAACO,IAAI,EAAC;EAAc,CAAE,CACpC,CACP,CAAC;AAEZ"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */