@wordpress/components 25.8.3 → 25.9.0

package/build-module/utils/colors.js

@@ -1,8 +1,12 @@
 /**
  * External dependencies
  */
+import memoize from 'memize';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
+
+/** @type {HTMLDivElement} */
+let colorComputationNode;
 extend([namesPlugin]);
 
 /**
@@ -19,4 +23,81 @@ extend([namesPlugin]);
 export function rgba(hexValue = '', alpha = 1) {
   return 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 = 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 = memoize(_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).
+ */
+export function getOptimalTextColor(backgroundColor) {
+  const background = getComputedBackgroundColor(backgroundColor);
+  return 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).
+ */
+export function getOptimalTextShade(backgroundColor) {
+  const result = getOptimalTextColor(backgroundColor);
+  return result === '#000000' ? 'dark' : 'light';
+}
 //# sourceMappingURL=colors.js.map

package/build-module/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","namesPlugin","rgba","hexValue","alpha","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":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;AAE9CD,MAAM,CAAE,CAAEC,WAAW,CAAG,CAAC;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,IAAIA,CAAEC,QAAQ,GAAG,EAAE,EAAEC,KAAK,GAAG,CAAC,EAAG;EAChD,OAAOL,MAAM,CAAEI,QAAS,CAAC,CAACC,KAAK,CAAEA,KAAM,CAAC,CAACC,WAAW,CAAC,CAAC;AACvD"}
+{"version":3,"names":["memoize","colord","extend","namesPlugin","colorComputationNode","rgba","hexValue","alpha","toRgbString","getColorComputationNode","document","el","createElement","setAttribute","body","appendChild","isColor","value","test","isValid","_getComputedBackgroundColor","backgroundColor","includes","style","background","computedColor","window","getComputedStyle","getComputedBackgroundColor","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":"AAAA;AACA;AACA;AACA,OAAOA,OAAO,MAAM,QAAQ;AAC5B,SAASC,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;;AAE9C;AACA,IAAIC,oBAAoB;AAExBF,MAAM,CAAE,CAAEC,WAAW,CAAG,CAAC;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,IAAIA,CAAEC,QAAQ,GAAG,EAAE,EAAEC,KAAK,GAAG,CAAC,EAAG;EAChD,OAAON,MAAM,CAAEK,QAAS,CAAC,CAACC,KAAK,CAAEA,KAAM,CAAC,CAACC,WAAW,CAAC,CAAC;AACvD;;AAEA;AACA;AACA;AACA,SAASC,uBAAuBA,CAAA,EAAG;EAClC,IAAK,OAAOC,QAAQ,KAAK,WAAW,EAAG;EAEvC,IAAK,CAAEN,oBAAoB,EAAG;IAC7B;IACA,MAAMO,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/BP,oBAAoB,GAAGO,EAAE;EAC1B;EAEA,OAAOP,oBAAoB;AAC5B;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASY,OAAOA,CAAEC,KAAK,EAAG;EACzB,IAAK,OAAOA,KAAK,KAAK,QAAQ,EAAG,OAAO,KAAK;EAC7C,MAAMC,IAAI,GAAGjB,MAAM,CAAEgB,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,GAAG5B,OAAO,CAAEoB,2BAA4B,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASS,mBAAmBA,CAAER,eAAe,EAAG;EACtD,MAAMG,UAAU,GAAGI,0BAA0B,CAAEP,eAAgB,CAAC;EAEhE,OAAOpB,MAAM,CAAEuB,UAAW,CAAC,CAACM,OAAO,CAAC,CAAC,GAAG,SAAS,GAAG,SAAS;AAC9D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAAEV,eAAe,EAAG;EACtD,MAAMW,MAAM,GAAGH,mBAAmB,CAAER,eAAgB,CAAC;EAErD,OAAOW,MAAM,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO;AAC/C"}

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

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { space } from '../ui/utils/space';
+import { space } from './space';
 import { COLORS } from './colors-values';
 const CONTROL_HEIGHT = '36px';
 const CONTROL_PADDING_X = '12px';

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

@@ -1 +1 @@
-{"version":3,"names":["space","COLORS","CONTROL_HEIGHT","CONTROL_PADDING_X","CONTROL_PROPS","controlSurfaceColor","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","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","cardPaddingSmall","cardPaddingMedium","cardPaddingLarge","popoverShadow","surfaceBackgroundColor","surfaceBackgroundSubtleColor","surfaceBackgroundTintColor","surfaceBorderColor","surfaceBorderBoldColor","surfaceBorderSubtleColor","surfaceBackgroundTertiaryColor","surfaceColor","transitionDuration","transitionDurationFast","transitionDurationFaster","transitionDurationFastest","transitionTimingFunction","transitionTimingFunctionControl"],"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","COLORS","CONTROL_HEIGHT","CONTROL_PADDING_X","CONTROL_PROPS","controlSurfaceColor","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","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","cardPaddingSmall","cardPaddingMedium","cardPaddingLarge","popoverShadow","surfaceBackgroundColor","surfaceBackgroundSubtleColor","surfaceBackgroundTintColor","surfaceBorderColor","surfaceBorderBoldColor","surfaceBorderSubtleColor","surfaceBackgroundTertiaryColor","surfaceColor","transitionDuration","transitionDurationFast","transitionDurationFaster","transitionDurationFastest","transitionTimingFunction","transitionTimingFunctionControl"],"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":"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"}

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

@@ -5,7 +5,7 @@
 /**
  * Internal dependencies
  */
-import CONFIG from '../../utils/config-values';
+import CONFIG from './config-values';
 export const BASE_FONT_SIZE = 13;
 export const PRESET_FONT_SIZES = {
   body: BASE_FONT_SIZE,

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

@@ -0,0 +1 @@
+{"version":3,"names":["CONFIG","BASE_FONT_SIZE","PRESET_FONT_SIZES","body","caption","footnote","largeTitle","subheadline","title","HEADING_FONT_SIZES","flatMap","n","toString","getFontSize","size","parsed","parseFloat","Number","isNaN","ratio","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":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,iBAAiB;AAgBpC,OAAO,MAAMC,cAAc,GAAG,EAAE;AAEhC,OAAO,MAAMC,iBAAiB,GAAG;EAChCC,IAAI,EAAEF,cAAc;EACpBG,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,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;AAEH,OAAO,SAASC,WAAWA,CAC1BC,IAEiC,GAAGb,cAAc,EACzC;EACT,IAAKa,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,MAAMb,cAAgB,GAAE;EACjD,OAAQ,QAAQkB,KAAO,MAAMnB,MAAM,CAACoB,QAAU,GAAE;AACjD;AAEA,OAAO,SAASC,kBAAkBA,CAAEP,IAAe,GAAG,CAAC,EAAW;EACjE,IAAK,CAAEL,kBAAkB,CAACa,QAAQ,CAAER,IAAoB,CAAC,EAAG;IAC3D,OAAOD,WAAW,CAAEC,IAAK,CAAC;EAC3B;EAEA,MAAMS,WAAW,GAAI,YAAYT,IAAM,EAAgC;EACvE,OAAOd,MAAM,CAAEuB,WAAW,CAAE;AAC7B"}

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

@@ -0,0 +1 @@
+{"version":3,"names":["Children","isValidElement","getValidChildren","children","toArray","filter","child"],"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":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,cAAc,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC/BC,QAAmB,EACiC;EACpD,IAAK,OAAOA,QAAQ,KAAK,QAAQ,EAAG,OAAO,CAAEA,QAAQ,CAAE;EAEvD,OAAOH,QAAQ,CAACI,OAAO,CAAED,QAAS,CAAC,CAACE,MAAM,CAAIC,KAAK,IAClDL,cAAc,CAAEK,KAAM,CACvB,CAAC;AACF"}

package/build-module/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;AACA,OAAO,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-module/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-module/utils/use-deprecated-props.js

@@ -3,7 +3,8 @@
  */
 import deprecated from '@wordpress/deprecated';
 export 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,
@@ -12,7 +13,7 @@ componentIdentifier) {
   if (typeof __next36pxDefaultSize !== 'undefined') {
     deprecated('`__next36pxDefaultSize` prop in ' + componentIdentifier, {
       alternative: '`__next40pxDefaultSize`',
-      since: '6.3'
+      since
     });
   }
   return {

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

@@ -1 +1 @@
-{"version":3,"names":["deprecated","useDeprecated36pxDefaultSizeProp","props","componentIdentifier","__next36pxDefaultSize","__next40pxDefaultSize","otherProps","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":"AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,uBAAuB;AAE9C,OAAO,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;IACnDJ,UAAU,CAAE,kCAAkC,GAAGG,mBAAmB,EAAE;MACrEI,WAAW,EAAE,yBAAyB;MACtCC,KAAK,EAAE;IACR,CAAE,CAAC;EACJ;EAEA,OAAO;IACN,GAAGF,UAAU;IACbD,qBAAqB,EAAEA,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAID;EACjD,CAAC;AACF"}
+{"version":3,"names":["deprecated","useDeprecated36pxDefaultSizeProp","props","componentIdentifier","since","__next36pxDefaultSize","__next40pxDefaultSize","otherProps","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":"AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,uBAAuB;AAE9C,OAAO,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;IACnDL,UAAU,CAAE,kCAAkC,GAAGG,mBAAmB,EAAE;MACrEK,WAAW,EAAE,yBAAyB;MACtCJ;IACD,CAAE,CAAC;EACJ;EAEA,OAAO;IACN,GAAGG,UAAU;IACbD,qBAAqB,EAAEA,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAID;EACjD,CAAC;AACF"}

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

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","breakpoints","useBreakpointIndex","options","defaultIndex","TypeError","length","RangeError","value","setValue","getIndex","filter","bp","window","matchMedia","matches","onResize","newValue","addEventListener","removeEventListener","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":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AAExD,MAAMC,WAAW,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAE;AAE9C,OAAO,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,GAAGT,QAAQ,CAAEI,YAAa,CAAC;EAEpDL,SAAS,CAAE,MAAM;IAChB,MAAMW,QAAQ,GAAGA,CAAA,KAChBT,WAAW,CAACU,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,CAACT,MAAM;IAEX,MAAMU,QAAQ,GAAGA,CAAA,KAAM;MACtB,MAAMC,QAAQ,GAAGP,QAAQ,CAAC,CAAC;MAC3B,IAAKF,KAAK,KAAKS,QAAQ,EAAG;QACzBR,QAAQ,CAAEQ,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,CAAER,KAAK,CAAG,CAAC;EAEd,OAAOA,KAAK;AACb,CAAC;AAED,OAAO,SAASY,kBAAkBA,CACjCC,MAA2B,EAC3BlB,OAAqD,GAAG,CAAC,CAAC,EAC1C;EAChB,MAAMmB,KAAK,GAAGpB,kBAAkB,CAAEC,OAAQ,CAAC;;EAE3C;EACA,IAAK,CAAEoB,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,CAACnB,MAAM,GAAGmB,KAAK,CAACnB,MAAM,GAAG,CAAC,GAAGgB,KAAK;EAChD;AACF"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -7,7 +7,7 @@ import { createElement } from "@wordpress/element";
  * Internal dependencies
  */
 
-import { contextConnect } from '../ui/context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useVStack } from './hook';
 function UnconnectedVStack(props, forwardedRef) {

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

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","View","useVStack","UnconnectedVStack","props","forwardedRef","vStackProps","createElement","ref","VStack"],"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":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,SAAS,QAAQ,QAAQ;AAGlC,SAASC,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAGJ,SAAS,CAAEE,KAAM,CAAC;EAEtC,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,WAAW;IAAGE,GAAG,EAAGH;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;AACA,OAAO,MAAMI,MAAM,GAAGT,cAAc,CAAEG,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeM,MAAM"}
+{"version":3,"names":["contextConnect","View","useVStack","UnconnectedVStack","props","forwardedRef","vStackProps","createElement","ref","VStack"],"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":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,SAAS,QAAQ,QAAQ;AAGlC,SAASC,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAGJ,SAAS,CAAEE,KAAM,CAAC;EAEtC,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,WAAW;IAAGE,GAAG,EAAGH;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;AACA,OAAO,MAAMI,MAAM,GAAGT,cAAc,CAAEG,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeM,MAAM"}

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

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 
-import { useContextSystem } from '../ui/context';
+import { useContextSystem } from '../context';
 import { useHStack } from '../h-stack';
 export function useVStack(props) {
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["useContextSystem","useHStack","useVStack","props","expanded","alignment","otherProps","hStackProps","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":"AAAA;AACA;AACA;;AAEA,SAASA,gBAAgB,QAAQ,eAAe;AAChD,SAASC,SAAS,QAAQ,YAAY;AAGtC,OAAO,SAASC,SAASA,CACxBC,KAAoD,EACnD;EACD,MAAM;IACLC,QAAQ,GAAG,KAAK;IAChBC,SAAS,GAAG,SAAS;IACrB,GAAGC;EACJ,CAAC,GAAGN,gBAAgB,CAAEG,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMI,WAAW,GAAGN,SAAS,CAAE;IAC9BO,SAAS,EAAE,QAAQ;IACnBJ,QAAQ;IACRC,SAAS;IACT,GAAGC;EACJ,CAAE,CAAC;EAEH,OAAOC,WAAW;AACnB"}
+{"version":3,"names":["useContextSystem","useHStack","useVStack","props","expanded","alignment","otherProps","hStackProps","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":"AAAA;AACA;AACA;;AAEA,SAASA,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,SAAS,QAAQ,YAAY;AAGtC,OAAO,SAASC,SAASA,CACxBC,KAAoD,EACnD;EACD,MAAM;IACLC,QAAQ,GAAG,KAAK;IAChBC,SAAS,GAAG,SAAS;IACrB,GAAGC;EACJ,CAAC,GAAGN,gBAAgB,CAAEG,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMI,WAAW,GAAGN,SAAS,CAAE;IAC9BO,SAAS,EAAE,QAAQ;IACnBJ,QAAQ;IACRC,SAAS;IACT,GAAGC;EACJ,CAAE,CAAC;EAEH,OAAOC,WAAW;AACnB"}

package/build-module/view/component.js

@@ -24,7 +24,7 @@ export const View = _styled("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== */");
 View.selector = '.components-view';
 View.displayName = 'View';
 export default View;

package/build-module/view/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","_styled","process","env","NODE_ENV","target","label","selector","displayName"],"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;AACA,OAAO,MAAMA,IAIZ,GAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,24CAAe;AAEhBJ,IAAI,CAACO,QAAQ,GAAG,kBAAkB;AAClCP,IAAI,CAACQ,WAAW,GAAG,MAAM;AAEzB,eAAeR,IAAI"}
+{"version":3,"names":["View","_styled","process","env","NODE_ENV","target","label","selector","displayName"],"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;AACA,OAAO,MAAMA,IAIZ,GAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,u4CAAe;AAEhBJ,IAAI,CAACO,QAAQ,GAAG,kBAAkB;AAClCP,IAAI,CAACQ,WAAW,GAAG,MAAM;AAEzB,eAAeR,IAAI"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -7,7 +7,7 @@ import { createElement } from "@wordpress/element";
  * Internal dependencies
  */
 
-import { useContextSystem, contextConnect } from '../ui/context';
+import { useContextSystem, contextConnect } from '../context';
 import { visuallyHidden } from './styles';
 import { View } from '../view';
 function UnconnectedVisuallyHidden(props, forwardedRef) {

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

@@ -1 +1 @@
-{"version":3,"names":["useContextSystem","contextConnect","visuallyHidden","View","UnconnectedVisuallyHidden","props","forwardedRef","style","styleProp","contextProps","createElement","ref","VisuallyHidden"],"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":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,gBAAgB,EAAEC,cAAc,QAAQ,eAAe;AAChE,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,IAAI,QAAQ,SAAS;AAG9B,SAASC,yBAAyBA,CACjCC,KAA4D,EAC5DC,YAAiC,EAChC;EACD,MAAM;IAAEC,KAAK,EAAEC,SAAS;IAAE,GAAGC;EAAa,CAAC,GAAGT,gBAAgB,CAC7DK,KAAK,EACL,gBACD,CAAC;EACD,OACCK,aAAA,CAACP,IAAI;IACJQ,GAAG,EAAGL,YAAc;IAAA,GACfG,YAAY;IACjBF,KAAK,EAAG;MAAE,GAAGL,cAAc;MAAE,IAAKM,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;AACA,OAAO,MAAMI,cAAc,GAAGX,cAAc,CAC3CG,yBAAyB,EACzB,gBACD,CAAC;AAED,eAAeQ,cAAc"}
+{"version":3,"names":["useContextSystem","contextConnect","visuallyHidden","View","UnconnectedVisuallyHidden","props","forwardedRef","style","styleProp","contextProps","createElement","ref","VisuallyHidden"],"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":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,gBAAgB,EAAEC,cAAc,QAAQ,YAAY;AAC7D,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,IAAI,QAAQ,SAAS;AAG9B,SAASC,yBAAyBA,CACjCC,KAA4D,EAC5DC,YAAiC,EAChC;EACD,MAAM;IAAEC,KAAK,EAAEC,SAAS;IAAE,GAAGC;EAAa,CAAC,GAAGT,gBAAgB,CAC7DK,KAAK,EACL,gBACD,CAAC;EACD,OACCK,aAAA,CAACP,IAAI;IACJQ,GAAG,EAAGL,YAAc;IAAA,GACfG,YAAY;IACjBF,KAAK,EAAG;MAAE,GAAGL,cAAc;MAAE,IAAKM,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;AACA,OAAO,MAAMI,cAAc,GAAGX,cAAc,CAC3CG,yBAAyB,EACzB,gBACD,CAAC;AAED,eAAeQ,cAAc"}

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -11,8 +11,8 @@ import { isValidElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { getValidChildren } from '../ui/utils/get-valid-children';
-import { contextConnect, useContextSystem } from '../ui/context';
+import { getValidChildren } from '../utils/get-valid-children';
+import { contextConnect, useContextSystem } from '../context';
 import { ZStackView, ZStackChildView } from './styles';
 function UnconnectedZStack(props, forwardedRef) {
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["isValidElement","getValidChildren","contextConnect","useContextSystem","ZStackView","ZStackChildView","UnconnectedZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","validChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key","createElement","ref","ZStack"],"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":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,eAAe;AAChE,SAASC,UAAU,EAAEC,eAAe,QAAQ,UAAU;AAItD,SAASC,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,GAAGX,gBAAgB,CAAEI,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMQ,aAAa,GAAGd,gBAAgB,CAAEQ,QAAS,CAAC;EAClD,MAAMO,iBAAiB,GAAGD,aAAa,CAACE,MAAM,GAAG,CAAC;EAElD,MAAMC,cAAc,GAAGH,aAAa,CAACI,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,MAAM,GAAGV,UAAU,GAAGI,iBAAiB,GAAGK,KAAK,GAAGA,KAAK;IAC7D;IACA;IACA,MAAME,YAAY,GAAGZ,SAAS,GAAGE,MAAM,GAAGQ,KAAK,GAAGR,MAAM;IAExD,MAAMW,GAAG,GAAGxB,cAAc,CAAEoB,KAAM,CAAC,GAAGA,KAAK,CAACI,GAAG,GAAGH,KAAK;IAEvD,OACCI,aAAA,CAACpB,eAAe;MACfkB,YAAY,EAAGA,YAAc;MAC7BD,MAAM,EAAGA,MAAQ;MACjBE,GAAG,EAAGA;IAAK,GAETJ,KACc,CAAC;EAEpB,CAAE,CAAC;EAEH,OACCK,aAAA,CAACrB,UAAU;IAAA,GACLU,UAAU;IACfJ,SAAS,EAAGA,SAAW;IACvBC,SAAS,EAAGA,SAAW;IACvBe,GAAG,EAAGlB;EAAc,GAElBU,cACS,CAAC;AAEf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMS,MAAM,GAAGzB,cAAc,CAAEI,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeqB,MAAM"}
+{"version":3,"names":["isValidElement","getValidChildren","contextConnect","useContextSystem","ZStackView","ZStackChildView","UnconnectedZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","validChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key","createElement","ref","ZStack"],"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":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,YAAY;AAC7D,SAASC,UAAU,EAAEC,eAAe,QAAQ,UAAU;AAItD,SAASC,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,GAAGX,gBAAgB,CAAEI,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMQ,aAAa,GAAGd,gBAAgB,CAAEQ,QAAS,CAAC;EAClD,MAAMO,iBAAiB,GAAGD,aAAa,CAACE,MAAM,GAAG,CAAC;EAElD,MAAMC,cAAc,GAAGH,aAAa,CAACI,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,MAAM,GAAGV,UAAU,GAAGI,iBAAiB,GAAGK,KAAK,GAAGA,KAAK;IAC7D;IACA;IACA,MAAME,YAAY,GAAGZ,SAAS,GAAGE,MAAM,GAAGQ,KAAK,GAAGR,MAAM;IAExD,MAAMW,GAAG,GAAGxB,cAAc,CAAEoB,KAAM,CAAC,GAAGA,KAAK,CAACI,GAAG,GAAGH,KAAK;IAEvD,OACCI,aAAA,CAACpB,eAAe;MACfkB,YAAY,EAAGA,YAAc;MAC7BD,MAAM,EAAGA,MAAQ;MACjBE,GAAG,EAAGA;IAAK,GAETJ,KACc,CAAC;EAEpB,CAAE,CAAC;EAEH,OACCK,aAAA,CAACrB,UAAU;IAAA,GACLU,UAAU;IACfJ,SAAS,EAAGA,SAAW;IACvBC,SAAS,EAAGA,SAAW;IACvBe,GAAG,EAAGlB;EAAc,GAElBU,cACS,CAAC;AAEf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMS,MAAM,GAAGzB,cAAc,CAAEI,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeqB,MAAM"}

package/build-style/style-rtl.css

@@ -96,7 +96,7 @@
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (min-resolution: 192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -327,7 +327,7 @@
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   background: transparent;
 }
-.components-button.is-secondary:hover:not(:disabled) {
+.components-button.is-secondary:hover:not(:disabled, [aria-disabled=true]) {
   box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 }
 .components-button.is-tertiary {
@@ -441,15 +441,15 @@ p + .components-button.is-tertiary {
   padding-right: 8px;
   gap: 4px;
 }
-.components-button.is-pressed {
+.components-button[aria-pressed=true], .components-button[aria-pressed=mixed] {
   color: var(--wp-components-color-foreground-inverted, #fff);
   background: var(--wp-components-color-foreground, #1e1e1e);
 }
-.components-button.is-pressed:focus:not(:disabled) {
+.components-button[aria-pressed=true]:focus:not(:disabled), .components-button[aria-pressed=mixed]:focus:not(:disabled) {
   box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
 }
-.components-button.is-pressed:hover:not(:disabled) {
+.components-button[aria-pressed=true]:hover:not(:disabled), .components-button[aria-pressed=mixed]:hover:not(:disabled) {
   color: var(--wp-components-color-foreground-inverted, #fff);
   background: var(--wp-components-color-foreground, #1e1e1e);
 }
@@ -499,8 +499,7 @@ p + .components-button.is-tertiary {
   vertical-align: top;
   width: 24px;
   height: 24px;
-  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
   transition: 0.1s border-color ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -717,13 +716,13 @@ svg.components-checkbox-control__indeterminate {
 .components-circular-option-picker__option:hover {
   box-shadow: inset 0 0 0 14px !important;
 }
-.components-circular-option-picker__option.is-pressed {
+.components-circular-option-picker__option[aria-pressed=true], .components-circular-option-picker__option[aria-selected=true] {
   box-shadow: inset 0 0 0 4px;
   position: relative;
   z-index: 1;
   overflow: visible;
 }
-.components-circular-option-picker__option.is-pressed + svg {
+.components-circular-option-picker__option[aria-pressed=true] + svg, .components-circular-option-picker__option[aria-selected=true] + svg {
   position: absolute;
   right: 2px;
   top: 2px;
@@ -1068,7 +1067,7 @@ input.components-combobox-control__input[type=text]:focus {
   cursor: default;
   line-height: 28px;
 }
-.components-custom-select-control__item:not(.is-next-36px-default-size) {
+.components-custom-select-control__item:not(.is-next-40px-default-size) {
   padding: 8px;
 }
 .components-custom-select-control__item.has-hint {
@@ -1553,6 +1552,7 @@ body.is-dragging-components-draggable {
   list-style: none;
   box-shadow: inset 0 1px 0 0 #949494;
   margin: 0;
+  padding: 0;
 }
 @media (prefers-reduced-motion: reduce) {
   .components-form-token-field__suggestions-list {
@@ -1569,6 +1569,7 @@ body.is-dragging-components-draggable {
   min-height: 32px;
   margin: 0;
   cursor: pointer;
+  box-sizing: border-box;
 }
 .components-form-token-field__suggestion.is-selected {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -1866,6 +1867,26 @@ body.is-dragging-components-draggable {
     max-width: none;
   }
 }
+@media (min-width: 600px) {
+  .components-modal__frame.has-size-small, .components-modal__frame.has-size-medium, .components-modal__frame.has-size-large {
+    width: 100%;
+  }
+}
+@media (min-width: 600px) {
+  .components-modal__frame.has-size-small {
+    max-width: 384px;
+  }
+}
+@media (min-width: 600px) {
+  .components-modal__frame.has-size-medium {
+    max-width: 512px;
+  }
+}
+@media (min-width: 600px) {
+  .components-modal__frame.has-size-large {
+    max-width: 840px;
+  }
+}
 @media (min-width: 960px) {
   .components-modal__frame {
     max-height: 70%;
@@ -2717,7 +2738,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 /* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy.
 See https://bugs.webkit.org/show_bug.cgi?id=187903. */
-@media not all and (min-resolution: 0.001dpcm) {
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) {
     .components-resizable-box__side-handle.components-resizable-box__handle-top:hover::before,
 .components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
@@ -2869,6 +2890,8 @@ body.lockscroll {
 }
 .components-search-control.is-size-compact input[type=search].components-search-control__input {
   height: 32px;
+  padding-right: 8px;
+  padding-left: 32px;
 }
 
 .components-search-control__icon {
@@ -2881,6 +2904,9 @@ body.lockscroll {
   justify-content: center;
   width: 24px;
 }
+.is-size-compact .components-search-control__icon {
+  left: 4px;
+}
 
 .components-search-control__input-wrapper {
   position: relative;