@wordpress/components 38.0.0 → 40.0.0

package/build-module/gradient-picker/index.mjs

@@ -2,10 +2,95 @@
 import { __, sprintf } from "@wordpress/i18n";
 import { useInstanceId } from "@wordpress/compose";
 import { useCallback, useMemo } from "@wordpress/element";
-import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from "../circular-option-picker/index.mjs";
+import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from "../circular-option-picker/index.mjs";
 import CustomGradientPicker from "../custom-gradient-picker/index.mjs";
 import { VStack } from "../v-stack/index.mjs";
-import { ColorHeading } from "../color-palette/styles.mjs";
+import { Heading } from "../heading/index.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/color-palette/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("a7b05d56c7", ".cf6db1948d5273a8__color-heading{text-transform:uppercase}.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading{font-size:11px;line-height:24px;margin-bottom:0}");
+}
+var style_module_default = { "color-heading": "cf6db1948d5273a8__color-heading" };
+
+// packages/components/src/gradient-picker/index.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var isMultipleOriginObject = (obj) => Array.isArray(obj.gradients) && !("gradient" in obj);
 var isMultipleOriginArray = (arr) => {
@@ -18,6 +103,7 @@ function SingleOrigin({
   onChange,
   value,
   selectedSlug,
+  presentation,
   ...additionalProps
 }) {
   const gradientOptions = useMemo(() => {
@@ -26,7 +112,7 @@ function SingleOrigin({
       name,
       slug
     }, index) => {
-      const isSelected = selectedSlug ? slug === selectedSlug : value === gradient;
+      const isSelected = presentation !== "command-buttons" && (selectedSlug ? slug === selectedSlug : value === gradient);
       return /* @__PURE__ */ _jsx(CircularOptionPicker.Option, {
         value: gradient,
         isSelected,
@@ -46,7 +132,7 @@ function SingleOrigin({
         )
       }, slug);
     });
-  }, [gradients, value, onChange, clearGradient, selectedSlug]);
+  }, [gradients, value, onChange, clearGradient, selectedSlug, presentation]);
   return /* @__PURE__ */ _jsx(CircularOptionPicker.OptionGroup, {
     className,
     options: gradientOptions,
@@ -60,7 +146,8 @@ function MultipleOrigin({
   onChange,
   value,
   selectedSlug,
-  headingLevel
+  headingLevel,
+  presentation
 }) {
   const instanceId = useInstanceId(MultipleOrigin);
   return /* @__PURE__ */ _jsx(VStack, {
@@ -73,7 +160,8 @@ function MultipleOrigin({
       const id = `color-palette-${instanceId}-${index}`;
       return /* @__PURE__ */ _jsxs(VStack, {
         spacing: 2,
-        children: [/* @__PURE__ */ _jsx(ColorHeading, {
+        children: [/* @__PURE__ */ _jsx(Heading, {
+          className: style_module_default["color-heading"],
           level: headingLevel,
           id,
           children: name
@@ -83,6 +171,7 @@ function MultipleOrigin({
           onChange: (gradient, _index, slug) => onChange(gradient, index, slug),
           value,
           selectedSlug,
+          presentation,
           "aria-labelledby": id
         })]
       }, index);
@@ -92,6 +181,7 @@ function MultipleOrigin({
 function Component(props) {
   const {
     asButtons,
+    presentation,
     loop,
     actions,
     headingLevel,
@@ -99,16 +189,20 @@ function Component(props) {
     "aria-labelledby": ariaLabelledby,
     ...additionalProps
   } = props;
+  warnIfCircularOptionPickerAsButtonsIsSet("GradientPicker", asButtons);
+  const {
+    metaProps,
+    labelProps,
+    resolvedPresentation
+  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);
   const options = isMultipleOriginArray(props.gradients) ? /* @__PURE__ */ _jsx(MultipleOrigin, {
     headingLevel,
-    ...additionalProps
+    ...additionalProps,
+    presentation: resolvedPresentation
   }) : /* @__PURE__ */ _jsx(SingleOrigin, {
-    ...additionalProps
+    ...additionalProps,
+    presentation: resolvedPresentation
   });
-  const {
-    metaProps,
-    labelProps
-  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
   return /* @__PURE__ */ _jsx(CircularOptionPicker, {
     ...metaProps,
     ...labelProps,

package/build-module/gradient-picker/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/gradient-picker/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);\nconst isMultipleOriginArray = arr => {\n  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));\n};\nfunction SingleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  ...additionalProps\n}) {\n  const gradientOptions = useMemo(() => {\n    return gradients.map(({\n      gradient,\n      name,\n      slug\n    }, index) => {\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug, which keeps two entries with the same gradient\n      // value apart. Otherwise selection falls back to matching the\n      // gradient value.\n      const isSelected = selectedSlug ? slug === selectedSlug : value === gradient;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        value: gradient,\n        isSelected: isSelected,\n        tooltipText: name ||\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient),\n        style: {\n          color: 'rgba( 0,0,0,0 )',\n          background: gradient\n        },\n        onClick: isSelected ? clearGradient : () => onChange(gradient, index, slug),\n        \"aria-label\": name ?\n        // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n        sprintf(__('Gradient: %s'), name) :\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient)\n      }, slug);\n    });\n  }, [gradients, value, onChange, clearGradient, selectedSlug]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: gradientOptions,\n    ...additionalProps\n  });\n}\nfunction MultipleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultipleOrigin);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: gradients.map(({\n      name,\n      gradients: gradientSet\n    }, index) => {\n      const id = `color-palette-${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          level: headingLevel,\n          id: id,\n          children: name\n        }), /*#__PURE__*/_jsx(SingleOrigin, {\n          clearGradient: clearGradient,\n          gradients: gradientSet,\n          onChange: (gradient, _index, slug) => onChange(gradient, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nfunction Component(props) {\n  const {\n    asButtons,\n    loop,\n    actions,\n    headingLevel,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/_jsx(MultipleOrigin, {\n    headingLevel: headingLevel,\n    ...additionalProps\n  }) : /*#__PURE__*/_jsx(SingleOrigin, {\n    ...additionalProps\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...metaProps,\n    ...labelProps,\n    actions: actions,\n    options: options\n  });\n}\n\n/**\n * GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n *\n * const MyGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState( null );\n *\n *   return (\n *     <GradientPicker\n *       value={ gradient }\n *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *       gradients={ [\n *         {\n *           name: 'JShine',\n *           gradient:\n *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *           slug: 'jshine',\n *         },\n *         {\n *           name: 'Moonlit Asteroid',\n *           gradient:\n *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *           slug: 'moonlit-asteroid',\n *         },\n *         {\n *           name: 'Rastafarie',\n *           gradient:\n *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *           slug: 'rastafari',\n *         },\n *       ] }\n *     />\n *   );\n * };\n *```\n *\n */\nexport function GradientPicker({\n  className,\n  gradients = [],\n  onChange,\n  value,\n  clearable = true,\n  enableAlpha = true,\n  disableCustomGradients = false,\n  __experimentalIsRenderedInSidebar,\n  headingLevel = 2,\n  ...additionalProps\n}) {\n  const clearGradient = useCallback(() => onChange(undefined), [onChange]);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: gradients.length ? 4 : 0,\n    children: [!disableCustomGradients && /*#__PURE__*/_jsx(CustomGradientPicker, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      enableAlpha: enableAlpha,\n      value: value,\n      onChange: onChange\n    }), (gradients.length > 0 || clearable) && /*#__PURE__*/_jsx(Component, {\n      ...additionalProps,\n      className: className,\n      clearGradient: clearGradient,\n      gradients: gradients,\n      onChange: onChange,\n      value: value,\n      actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n        onClick: clearGradient,\n        accessibleWhenDisabled: true,\n        disabled: !value,\n        children: __('Clear')\n      }),\n      headingLevel: headingLevel\n    })]\n  });\n}\nexport default GradientPicker;"],
-  "mappings": ";AAGA,SAAS,IAAI,eAAe;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,aAAa,eAAe;AAKrC,OAAO,wBAAwB,iDAAiD;AAChF,OAAO,0BAA0B;AACjC,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAG3C,IAAM,yBAAyB,SAAO,MAAM,QAAQ,IAAI,SAAS,KAAK,EAAE,cAAc;AACtF,IAAM,wBAAwB,SAAO;AACnC,SAAO,IAAI,SAAS,KAAK,IAAI,MAAM,iBAAe,uBAAuB,WAAW,CAAC;AACvF;AACA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,kBAAkB,QAAQ,MAAM;AACpC,WAAO,UAAU,IAAI,CAAC;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,IACF,GAAG,UAAU;AAKX,YAAM,aAAa,eAAe,SAAS,eAAe,UAAU;AACpE,aAAoB,qBAAK,qBAAqB,QAAQ;AAAA,QACpD,OAAO;AAAA,QACP;AAAA,QACA,aAAa;AAAA,QAEb,QAAQ,GAAG,mBAAmB,GAAG,QAAQ;AAAA,QACzC,OAAO;AAAA,UACL,OAAO;AAAA,UACP,YAAY;AAAA,QACd;AAAA,QACA,SAAS,aAAa,gBAAgB,MAAM,SAAS,UAAU,OAAO,IAAI;AAAA,QAC1E,cAAc;AAAA;AAAA,UAEd,QAAQ,GAAG,cAAc,GAAG,IAAI;AAAA;AAAA;AAAA,UAEhC,QAAQ,GAAG,mBAAmB,GAAG,QAAQ;AAAA;AAAA,MAC3C,GAAG,IAAI;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,OAAO,UAAU,eAAe,YAAY,CAAC;AAC5D,SAAoB,qBAAK,qBAAqB,aAAa;AAAA,IACzD;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,EACL,CAAC;AACH;AACA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,aAAa,cAAc,cAAc;AAC/C,SAAoB,qBAAK,QAAQ;AAAA,IAC/B,SAAS;AAAA,IACT;AAAA,IACA,UAAU,UAAU,IAAI,CAAC;AAAA,MACvB;AAAA,MACA,WAAW;AAAA,IACb,GAAG,UAAU;AACX,YAAM,KAAK,iBAAiB,UAAU,IAAI,KAAK;AAC/C,aAAoB,sBAAM,QAAQ;AAAA,QAChC,SAAS;AAAA,QACT,UAAU,CAAc,qBAAK,cAAc;AAAA,UACzC,OAAO;AAAA,UACP;AAAA,UACA,UAAU;AAAA,QACZ,CAAC,GAAgB,qBAAK,cAAc;AAAA,UAClC;AAAA,UACA,WAAW;AAAA,UACX,UAAU,CAAC,UAAU,QAAQ,SAAS,SAAS,UAAU,OAAO,IAAI;AAAA,UACpE;AAAA,UACA;AAAA,UACA,mBAAmB;AAAA,QACrB,CAAC,CAAC;AAAA,MACJ,GAAG,KAAK;AAAA,IACV,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,UAAU,OAAO;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,UAAU,sBAAsB,MAAM,SAAS,IAAiB,qBAAK,gBAAgB;AAAA,IACzF;AAAA,IACA,GAAG;AAAA,EACL,CAAC,IAAiB,qBAAK,cAAc;AAAA,IACnC,GAAG;AAAA,EACL,CAAC;AACD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,0CAA0C,WAAW,MAAM,WAAW,cAAc;AACxF,SAAoB,qBAAK,sBAAsB;AAAA,IAC7C,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,IACA;AAAA,EACF,CAAC;AACH;AA4CO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,yBAAyB;AAAA,EACzB;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,GAAG;AACD,QAAM,gBAAgB,YAAY,MAAM,SAAS,MAAS,GAAG,CAAC,QAAQ,CAAC;AACvE,SAAoB,sBAAM,QAAQ;AAAA,IAChC,SAAS,UAAU,SAAS,IAAI;AAAA,IAChC,UAAU,CAAC,CAAC,0BAAuC,qBAAK,sBAAsB;AAAA,MAC5E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,IAAI,UAAU,SAAS,KAAK,cAA2B,qBAAK,WAAW;AAAA,MACtE,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,aAAa,CAAC,0BAAuC,qBAAK,qBAAqB,cAAc;AAAA,QACpG,SAAS;AAAA,QACT,wBAAwB;AAAA,QACxB,UAAU,CAAC;AAAA,QACX,UAAU,GAAG,OAAO;AAAA,MACtB,CAAC;AAAA,MACD;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,0BAAQ;",
+  "sources": ["../../src/gradient-picker/index.tsx", "../../../style-runtime/src/index.ts", "../../src/color-palette/style.module.scss"],
+  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { Heading } from '../heading';\nimport colorPaletteStyles from '../color-palette/style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);\nconst isMultipleOriginArray = arr => {\n  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));\n};\nfunction SingleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  presentation,\n  ...additionalProps\n}) {\n  const gradientOptions = useMemo(() => {\n    return gradients.map(({\n      gradient,\n      name,\n      slug\n    }, index) => {\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug, which keeps two entries with the same gradient\n      // value apart. Otherwise selection falls back to matching the\n      // gradient value.\n      const isSelected = presentation !== 'command-buttons' && (selectedSlug ? slug === selectedSlug : value === gradient);\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        value: gradient,\n        isSelected: isSelected,\n        tooltipText: name ||\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient),\n        style: {\n          color: 'rgba( 0,0,0,0 )',\n          background: gradient\n        },\n        onClick: isSelected ? clearGradient : () => onChange(gradient, index, slug),\n        \"aria-label\": name ?\n        // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n        sprintf(__('Gradient: %s'), name) :\n        // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n        sprintf(__('Gradient code: %s'), gradient)\n      }, slug);\n    });\n  }, [gradients, value, onChange, clearGradient, selectedSlug, presentation]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: gradientOptions,\n    ...additionalProps\n  });\n}\nfunction MultipleOrigin({\n  className,\n  clearGradient,\n  gradients,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel,\n  presentation\n}) {\n  const instanceId = useInstanceId(MultipleOrigin);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: gradients.map(({\n      name,\n      gradients: gradientSet\n    }, index) => {\n      const id = `color-palette-${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(Heading, {\n          className: colorPaletteStyles['color-heading'],\n          level: headingLevel,\n          id: id,\n          children: name\n        }), /*#__PURE__*/_jsx(SingleOrigin, {\n          clearGradient: clearGradient,\n          gradients: gradientSet,\n          onChange: (gradient, _index, slug) => onChange(gradient, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          presentation: presentation,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nfunction Component(props) {\n  const {\n    asButtons,\n    presentation,\n    loop,\n    actions,\n    headingLevel,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  warnIfCircularOptionPickerAsButtonsIsSet('GradientPicker', asButtons);\n  const {\n    metaProps,\n    labelProps,\n    resolvedPresentation\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);\n  const options = isMultipleOriginArray(props.gradients) ? /*#__PURE__*/_jsx(MultipleOrigin, {\n    headingLevel: headingLevel,\n    ...additionalProps,\n    presentation: resolvedPresentation\n  }) : /*#__PURE__*/_jsx(SingleOrigin, {\n    ...additionalProps,\n    presentation: resolvedPresentation\n  });\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...metaProps,\n    ...labelProps,\n    actions: actions,\n    options: options\n  });\n}\n\n/**\n * GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n *\n * const MyGradientPicker = () => {\n *   const [ gradient, setGradient ] = useState( null );\n *\n *   return (\n *     <GradientPicker\n *       value={ gradient }\n *       onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n *       gradients={ [\n *         {\n *           name: 'JShine',\n *           gradient:\n *             'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n *           slug: 'jshine',\n *         },\n *         {\n *           name: 'Moonlit Asteroid',\n *           gradient:\n *             'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n *           slug: 'moonlit-asteroid',\n *         },\n *         {\n *           name: 'Rastafarie',\n *           gradient:\n *             'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n *           slug: 'rastafari',\n *         },\n *       ] }\n *     />\n *   );\n * };\n *```\n *\n */\nexport function GradientPicker({\n  className,\n  gradients = [],\n  onChange,\n  value,\n  clearable = true,\n  enableAlpha = true,\n  disableCustomGradients = false,\n  __experimentalIsRenderedInSidebar,\n  headingLevel = 2,\n  ...additionalProps\n}) {\n  const clearGradient = useCallback(() => onChange(undefined), [onChange]);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: gradients.length ? 4 : 0,\n    children: [!disableCustomGradients && /*#__PURE__*/_jsx(CustomGradientPicker, {\n      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      enableAlpha: enableAlpha,\n      value: value,\n      onChange: onChange\n    }), (gradients.length > 0 || clearable) && /*#__PURE__*/_jsx(Component, {\n      ...additionalProps,\n      className: className,\n      clearGradient: clearGradient,\n      gradients: gradients,\n      onChange: onChange,\n      value: value,\n      actions: clearable && !disableCustomGradients && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n        onClick: clearGradient,\n        accessibleWhenDisabled: true,\n        disabled: !value,\n        children: __('Clear')\n      }),\n      headingLevel: headingLevel\n    })]\n  });\n}\nexport default GradientPicker;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"a7b05d56c7\", \".cf6db1948d5273a8__color-heading{text-transform:uppercase}.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading{font-size:11px;line-height:24px;margin-bottom:0}\");\n}\nexport default {\"color-heading\":\"cf6db1948d5273a8__color-heading\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/grid/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/grid/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport useGrid from './hook';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedGrid(props, forwardedRef) {\n  const gridProps = useGrid(props);\n  return /*#__PURE__*/_jsx(View, {\n    ...gridProps,\n    ref: forwardedRef\n  });\n}\n\n/**\n * `Grid` is a primitive layout component that can arrange content in a grid configuration.\n *\n * ```jsx\n * import {\n * \t__experimentalGrid as Grid,\n * \t__experimentalText as Text\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Grid columns={ 3 }>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</Grid>\n * \t);\n * }\n * ```\n */\nexport const Grid = contextConnect(UnconnectedGrid, 'Grid');\nexport default Grid;"],
-  "mappings": ";AAQA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,OAAO,aAAa;AACpB,SAAS,OAAO,YAAY;AAC5B,SAAS,gBAAgB,OAAO,cAAc;AAC5C,QAAM,YAAY,QAAQ,KAAK;AAC/B,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AAsBO,IAAM,OAAO,eAAe,iBAAiB,MAAM;AAC1D,IAAO,oBAAQ;",
+  "sourcesContent": ["import { contextConnect } from '../context';\nimport { View } from '../view';\nimport useGrid from './hook';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedGrid(props, forwardedRef) {\n  const gridProps = useGrid(props);\n  return /*#__PURE__*/_jsx(View, {\n    ...gridProps,\n    ref: forwardedRef\n  });\n}\n\n/**\n * `Grid` is a primitive layout component that can arrange content in a grid configuration.\n *\n * ```jsx\n * import {\n * \t__experimentalGrid as Grid,\n * \t__experimentalText as Text\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<Grid columns={ 3 }>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</Grid>\n * \t);\n * }\n * ```\n */\nexport const Grid = contextConnect(UnconnectedGrid, 'Grid');\nexport default Grid;"],
+  "mappings": ";AAAA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,OAAO,aAAa;AACpB,SAAS,OAAO,YAAY;AAC5B,SAAS,gBAAgB,OAAO,cAAc;AAC5C,QAAM,YAAY,QAAQ,KAAK;AAC/B,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AAsBO,IAAM,OAAO,eAAe,iBAAiB,MAAM;AAC1D,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/grid/hook.mjs

@@ -42,7 +42,7 @@ function useGrid(props) {
       justifyContent: justify,
       verticalAlign: isInline ? "middle" : void 0,
       ...alignmentProps
-    }, process.env.NODE_ENV === "production" ? "" : ";label:gridClasses;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdURzQiIsImZpbGUiOiJob29rLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgV29yZFByZXNzQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0gfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB7IGdldEFsaWdubWVudFByb3BzIH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyB1c2VSZXNwb25zaXZlVmFsdWUgfSBmcm9tICcuLi91dGlscy91c2UtcmVzcG9uc2l2ZS12YWx1ZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi91dGlscy9ob29rcy91c2UtY3gnO1xuaW1wb3J0IHR5cGUgeyBHcmlkUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlR3JpZChcblx0cHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBHcmlkUHJvcHMsICdkaXYnID5cbikge1xuXHRjb25zdCB7XG5cdFx0YWxpZ24sXG5cdFx0YWxpZ25tZW50LFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjb2x1bW5HYXAsXG5cdFx0Y29sdW1ucyA9IDIsXG5cdFx0Z2FwID0gMyxcblx0XHRpc0lubGluZSA9IGZhbHNlLFxuXHRcdGp1c3RpZnksXG5cdFx0cm93R2FwLFxuXHRcdHJvd3MsXG5cdFx0dGVtcGxhdGVDb2x1bW5zLFxuXHRcdHRlbXBsYXRlUm93cyxcblx0XHQuLi5vdGhlclByb3BzXG5cdH0gPSB1c2VDb250ZXh0U3lzdGVtKCBwcm9wcywgJ0dyaWQnICk7XG5cblx0Y29uc3QgY29sdW1uc0FzQXJyYXkgPSBBcnJheS5pc0FycmF5KCBjb2x1bW5zICkgPyBjb2x1bW5zIDogWyBjb2x1bW5zIF07XG5cdGNvbnN0IGNvbHVtbiA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggY29sdW1uc0FzQXJyYXkgKTtcblx0Y29uc3Qgcm93c0FzQXJyYXkgPSBBcnJheS5pc0FycmF5KCByb3dzICkgPyByb3dzIDogWyByb3dzIF07XG5cdGNvbnN0IHJvdyA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggcm93c0FzQXJyYXkgKTtcblxuXHRjb25zdCBncmlkVGVtcGxhdGVDb2x1bW5zID1cblx0XHR0ZW1wbGF0ZUNvbHVtbnMgfHwgKCAhISBjb2x1bW5zICYmIGByZXBlYXQoICR7IGNvbHVtbiB9LCAxZnIgKWAgKTtcblx0Y29uc3QgZ3JpZFRlbXBsYXRlUm93cyA9XG5cdFx0dGVtcGxhdGVSb3dzIHx8ICggISEgcm93cyAmJiBgcmVwZWF0KCAkeyByb3cgfSwgMWZyIClgICk7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgYWxpZ25tZW50UHJvcHMgPSBnZXRBbGlnbm1lbnRQcm9wcyggYWxpZ25tZW50ICk7XG5cblx0XHRjb25zdCBncmlkQ2xhc3NlcyA9IGNzcygge1xuXHRcdFx0YWxpZ25JdGVtczogYWxpZ24sXG5cdFx0XHRkaXNwbGF5OiBpc0lubGluZSA/ICdpbmxpbmUtZ3JpZCcgOiAnZ3JpZCcsXG5cdFx0XHRnYXA6IGBjYWxjKCAkeyBDT05GSUcuZ3JpZEJhc2UgfSAqICR7IGdhcCB9IClgLFxuXHRcdFx0Z3JpZFRlbXBsYXRlQ29sdW1uczogZ3JpZFRlbXBsYXRlQ29sdW1ucyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkVGVtcGxhdGVSb3dzOiBncmlkVGVtcGxhdGVSb3dzIHx8IHVuZGVmaW5lZCxcblx0XHRcdGdyaWRSb3dHYXA6IHJvd0dhcCxcblx0XHRcdGdyaWRDb2x1bW5HYXA6IGNvbHVtbkdhcCxcblx0XHRcdGp1c3RpZnlDb250ZW50OiBqdXN0aWZ5LFxuXHRcdFx0dmVydGljYWxBbGlnbjogaXNJbmxpbmUgPyAnbWlkZGxlJyA6IHVuZGVmaW5lZCxcblx0XHRcdC4uLmFsaWdubWVudFByb3BzLFxuXHRcdH0gKTtcblxuXHRcdHJldHVybiBjeCggZ3JpZENsYXNzZXMsIGNsYXNzTmFtZSApO1xuXHR9LCBbXG5cdFx0YWxpZ24sXG5cdFx0YWxpZ25tZW50LFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjb2x1bW5HYXAsXG5cdFx0Y3gsXG5cdFx0Z2FwLFxuXHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnMsXG5cdFx0Z3JpZFRlbXBsYXRlUm93cyxcblx0XHRpc0lubGluZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XSApO1xuXG5cdHJldHVybiB7IC4uLm90aGVyUHJvcHMsIGNsYXNzTmFtZTogY2xhc3NlcyB9O1xufVxuIl19 */");
+    }, process.env.NODE_ENV === "production" ? "" : ";label:gridClasses;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENzQiIsImZpbGUiOiJob29rLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgeyB1c2VDb250ZXh0U3lzdGVtIH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgeyBnZXRBbGlnbm1lbnRQcm9wcyB9IGZyb20gJy4vdXRpbHMnO1xuaW1wb3J0IHsgdXNlUmVzcG9uc2l2ZVZhbHVlIH0gZnJvbSAnLi4vdXRpbHMvdXNlLXJlc3BvbnNpdmUtdmFsdWUnO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi91dGlscy9jb25maWctdmFsdWVzJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcbmltcG9ydCB0eXBlIHsgR3JpZFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIHVzZUdyaWQoXG5cdHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgR3JpZFByb3BzLCAnZGl2JyA+XG4pIHtcblx0Y29uc3Qge1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGNvbHVtbnMgPSAyLFxuXHRcdGdhcCA9IDMsXG5cdFx0aXNJbmxpbmUgPSBmYWxzZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XHRyb3dzLFxuXHRcdHRlbXBsYXRlQ29sdW1ucyxcblx0XHR0ZW1wbGF0ZVJvd3MsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggcHJvcHMsICdHcmlkJyApO1xuXG5cdGNvbnN0IGNvbHVtbnNBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggY29sdW1ucyApID8gY29sdW1ucyA6IFsgY29sdW1ucyBdO1xuXHRjb25zdCBjb2x1bW4gPSB1c2VSZXNwb25zaXZlVmFsdWUoIGNvbHVtbnNBc0FycmF5ICk7XG5cdGNvbnN0IHJvd3NBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggcm93cyApID8gcm93cyA6IFsgcm93cyBdO1xuXHRjb25zdCByb3cgPSB1c2VSZXNwb25zaXZlVmFsdWUoIHJvd3NBc0FycmF5ICk7XG5cblx0Y29uc3QgZ3JpZFRlbXBsYXRlQ29sdW1ucyA9XG5cdFx0dGVtcGxhdGVDb2x1bW5zIHx8ICggISEgY29sdW1ucyAmJiBgcmVwZWF0KCAkeyBjb2x1bW4gfSwgMWZyIClgICk7XG5cdGNvbnN0IGdyaWRUZW1wbGF0ZVJvd3MgPVxuXHRcdHRlbXBsYXRlUm93cyB8fCAoICEhIHJvd3MgJiYgYHJlcGVhdCggJHsgcm93IH0sIDFmciApYCApO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblxuXHRjb25zdCBjbGFzc2VzID0gdXNlTWVtbyggKCkgPT4ge1xuXHRcdGNvbnN0IGFsaWdubWVudFByb3BzID0gZ2V0QWxpZ25tZW50UHJvcHMoIGFsaWdubWVudCApO1xuXG5cdFx0Y29uc3QgZ3JpZENsYXNzZXMgPSBjc3MoIHtcblx0XHRcdGFsaWduSXRlbXM6IGFsaWduLFxuXHRcdFx0ZGlzcGxheTogaXNJbmxpbmUgPyAnaW5saW5lLWdyaWQnIDogJ2dyaWQnLFxuXHRcdFx0Z2FwOiBgY2FsYyggJHsgQ09ORklHLmdyaWRCYXNlIH0gKiAkeyBnYXAgfSApYCxcblx0XHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnM6IGdyaWRUZW1wbGF0ZUNvbHVtbnMgfHwgdW5kZWZpbmVkLFxuXHRcdFx0Z3JpZFRlbXBsYXRlUm93czogZ3JpZFRlbXBsYXRlUm93cyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkUm93R2FwOiByb3dHYXAsXG5cdFx0XHRncmlkQ29sdW1uR2FwOiBjb2x1bW5HYXAsXG5cdFx0XHRqdXN0aWZ5Q29udGVudDoganVzdGlmeSxcblx0XHRcdHZlcnRpY2FsQWxpZ246IGlzSW5saW5lID8gJ21pZGRsZScgOiB1bmRlZmluZWQsXG5cdFx0XHQuLi5hbGlnbm1lbnRQcm9wcyxcblx0XHR9ICk7XG5cblx0XHRyZXR1cm4gY3goIGdyaWRDbGFzc2VzLCBjbGFzc05hbWUgKTtcblx0fSwgW1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGN4LFxuXHRcdGdhcCxcblx0XHRncmlkVGVtcGxhdGVDb2x1bW5zLFxuXHRcdGdyaWRUZW1wbGF0ZVJvd3MsXG5cdFx0aXNJbmxpbmUsXG5cdFx0anVzdGlmeSxcblx0XHRyb3dHYXAsXG5cdF0gKTtcblxuXHRyZXR1cm4geyAuLi5vdGhlclByb3BzLCBjbGFzc05hbWU6IGNsYXNzZXMgfTtcbn1cbiJdfQ== */");
     return cx(gridClasses, className);
   }, [align, alignment, className, columnGap, cx, gap, gridTemplateColumns, gridTemplateRows, isInline, justify, rowGap]);
   return {

package/build-module/grid/hook.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/grid/hook.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { useContextSystem } from '../context';\nimport { getAlignmentProps } from './utils';\nimport { useResponsiveValue } from '../utils/use-responsive-value';\nimport CONFIG from '../utils/config-values';\nimport { useCx } from '../utils/hooks/use-cx';\nexport default function useGrid(props) {\n  const {\n    align,\n    alignment,\n    className,\n    columnGap,\n    columns = 2,\n    gap = 3,\n    isInline = false,\n    justify,\n    rowGap,\n    rows,\n    templateColumns,\n    templateRows,\n    ...otherProps\n  } = useContextSystem(props, 'Grid');\n  const columnsAsArray = Array.isArray(columns) ? columns : [columns];\n  const column = useResponsiveValue(columnsAsArray);\n  const rowsAsArray = Array.isArray(rows) ? rows : [rows];\n  const row = useResponsiveValue(rowsAsArray);\n  const gridTemplateColumns = templateColumns || !!columns && `repeat( ${column}, 1fr )`;\n  const gridTemplateRows = templateRows || !!rows && `repeat( ${row}, 1fr )`;\n  const cx = useCx();\n  const classes = useMemo(() => {\n    const alignmentProps = getAlignmentProps(alignment);\n    const gridClasses = /*#__PURE__*/css({\n      alignItems: align,\n      display: isInline ? 'inline-grid' : 'grid',\n      gap: `calc( ${CONFIG.gridBase} * ${gap} )`,\n      gridTemplateColumns: gridTemplateColumns || undefined,\n      gridTemplateRows: gridTemplateRows || undefined,\n      gridRowGap: rowGap,\n      gridColumnGap: columnGap,\n      justifyContent: justify,\n      verticalAlign: isInline ? 'middle' : undefined,\n      ...alignmentProps\n    }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:gridClasses;\", process.env.NODE_ENV === \"production\" ? \"\" : \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdURzQiIsImZpbGUiOiJob29rLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgV29yZFByZXNzQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0gfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB7IGdldEFsaWdubWVudFByb3BzIH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyB1c2VSZXNwb25zaXZlVmFsdWUgfSBmcm9tICcuLi91dGlscy91c2UtcmVzcG9uc2l2ZS12YWx1ZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi91dGlscy9ob29rcy91c2UtY3gnO1xuaW1wb3J0IHR5cGUgeyBHcmlkUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlR3JpZChcblx0cHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBHcmlkUHJvcHMsICdkaXYnID5cbikge1xuXHRjb25zdCB7XG5cdFx0YWxpZ24sXG5cdFx0YWxpZ25tZW50LFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjb2x1bW5HYXAsXG5cdFx0Y29sdW1ucyA9IDIsXG5cdFx0Z2FwID0gMyxcblx0XHRpc0lubGluZSA9IGZhbHNlLFxuXHRcdGp1c3RpZnksXG5cdFx0cm93R2FwLFxuXHRcdHJvd3MsXG5cdFx0dGVtcGxhdGVDb2x1bW5zLFxuXHRcdHRlbXBsYXRlUm93cyxcblx0XHQuLi5vdGhlclByb3BzXG5cdH0gPSB1c2VDb250ZXh0U3lzdGVtKCBwcm9wcywgJ0dyaWQnICk7XG5cblx0Y29uc3QgY29sdW1uc0FzQXJyYXkgPSBBcnJheS5pc0FycmF5KCBjb2x1bW5zICkgPyBjb2x1bW5zIDogWyBjb2x1bW5zIF07XG5cdGNvbnN0IGNvbHVtbiA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggY29sdW1uc0FzQXJyYXkgKTtcblx0Y29uc3Qgcm93c0FzQXJyYXkgPSBBcnJheS5pc0FycmF5KCByb3dzICkgPyByb3dzIDogWyByb3dzIF07XG5cdGNvbnN0IHJvdyA9IHVzZVJlc3BvbnNpdmVWYWx1ZSggcm93c0FzQXJyYXkgKTtcblxuXHRjb25zdCBncmlkVGVtcGxhdGVDb2x1bW5zID1cblx0XHR0ZW1wbGF0ZUNvbHVtbnMgfHwgKCAhISBjb2x1bW5zICYmIGByZXBlYXQoICR7IGNvbHVtbiB9LCAxZnIgKWAgKTtcblx0Y29uc3QgZ3JpZFRlbXBsYXRlUm93cyA9XG5cdFx0dGVtcGxhdGVSb3dzIHx8ICggISEgcm93cyAmJiBgcmVwZWF0KCAkeyByb3cgfSwgMWZyIClgICk7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKCAoKSA9PiB7XG5cdFx0Y29uc3QgYWxpZ25tZW50UHJvcHMgPSBnZXRBbGlnbm1lbnRQcm9wcyggYWxpZ25tZW50ICk7XG5cblx0XHRjb25zdCBncmlkQ2xhc3NlcyA9IGNzcygge1xuXHRcdFx0YWxpZ25JdGVtczogYWxpZ24sXG5cdFx0XHRkaXNwbGF5OiBpc0lubGluZSA/ICdpbmxpbmUtZ3JpZCcgOiAnZ3JpZCcsXG5cdFx0XHRnYXA6IGBjYWxjKCAkeyBDT05GSUcuZ3JpZEJhc2UgfSAqICR7IGdhcCB9IClgLFxuXHRcdFx0Z3JpZFRlbXBsYXRlQ29sdW1uczogZ3JpZFRlbXBsYXRlQ29sdW1ucyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkVGVtcGxhdGVSb3dzOiBncmlkVGVtcGxhdGVSb3dzIHx8IHVuZGVmaW5lZCxcblx0XHRcdGdyaWRSb3dHYXA6IHJvd0dhcCxcblx0XHRcdGdyaWRDb2x1bW5HYXA6IGNvbHVtbkdhcCxcblx0XHRcdGp1c3RpZnlDb250ZW50OiBqdXN0aWZ5LFxuXHRcdFx0dmVydGljYWxBbGlnbjogaXNJbmxpbmUgPyAnbWlkZGxlJyA6IHVuZGVmaW5lZCxcblx0XHRcdC4uLmFsaWdubWVudFByb3BzLFxuXHRcdH0gKTtcblxuXHRcdHJldHVybiBjeCggZ3JpZENsYXNzZXMsIGNsYXNzTmFtZSApO1xuXHR9LCBbXG5cdFx0YWxpZ24sXG5cdFx0YWxpZ25tZW50LFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjb2x1bW5HYXAsXG5cdFx0Y3gsXG5cdFx0Z2FwLFxuXHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnMsXG5cdFx0Z3JpZFRlbXBsYXRlUm93cyxcblx0XHRpc0lubGluZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XSApO1xuXG5cdHJldHVybiB7IC4uLm90aGVyUHJvcHMsIGNsYXNzTmFtZTogY2xhc3NlcyB9O1xufVxuIl19 */\");\n    return cx(gridClasses, className);\n  }, [align, alignment, className, columnGap, cx, gap, gridTemplateColumns, gridTemplateRows, isInline, justify, rowGap]);\n  return {\n    ...otherProps,\n    className: classes\n  };\n}"],
-  "mappings": ";AAGA,SAAS,WAAW;AAKpB,SAAS,eAAe;AAMxB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,YAAY;AACnB,SAAS,aAAa;AACP,SAAR,QAAyB,OAAO;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,MAAM;AAClC,QAAM,iBAAiB,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO;AAClE,QAAM,SAAS,mBAAmB,cAAc;AAChD,QAAM,cAAc,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AACtD,QAAM,MAAM,mBAAmB,WAAW;AAC1C,QAAM,sBAAsB,mBAAmB,CAAC,CAAC,WAAW,WAAW,MAAM;AAC7E,QAAM,mBAAmB,gBAAgB,CAAC,CAAC,QAAQ,WAAW,GAAG;AACjE,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM;AAC5B,UAAM,iBAAiB,kBAAkB,SAAS;AAClD,UAAM,cAA2B,oBAAI;AAAA,MACnC,YAAY;AAAA,MACZ,SAAS,WAAW,gBAAgB;AAAA,MACpC,KAAK,SAAS,OAAO,QAAQ,MAAM,GAAG;AAAA,MACtC,qBAAqB,uBAAuB;AAAA,MAC5C,kBAAkB,oBAAoB;AAAA,MACtC,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,eAAe,WAAW,WAAW;AAAA,MACrC,GAAG;AAAA,IACL,GAAG,QAAQ,IAAI,aAAa,eAAe,KAAK,uBAAuB,QAAQ,IAAI,aAAa,eAAe,KAAK,ynGAAynG;AAC7uG,WAAO,GAAG,aAAa,SAAS;AAAA,EAClC,GAAG,CAAC,OAAO,WAAW,WAAW,WAAW,IAAI,KAAK,qBAAqB,kBAAkB,UAAU,SAAS,MAAM,CAAC;AACtH,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,EACb;AACF;",
+  "sourcesContent": ["import { css } from '@emotion/react';\nimport { useMemo } from '@wordpress/element';\nimport { useContextSystem } from '../context';\nimport { getAlignmentProps } from './utils';\nimport { useResponsiveValue } from '../utils/use-responsive-value';\nimport CONFIG from '../utils/config-values';\nimport { useCx } from '../utils/hooks/use-cx';\nexport default function useGrid(props) {\n  const {\n    align,\n    alignment,\n    className,\n    columnGap,\n    columns = 2,\n    gap = 3,\n    isInline = false,\n    justify,\n    rowGap,\n    rows,\n    templateColumns,\n    templateRows,\n    ...otherProps\n  } = useContextSystem(props, 'Grid');\n  const columnsAsArray = Array.isArray(columns) ? columns : [columns];\n  const column = useResponsiveValue(columnsAsArray);\n  const rowsAsArray = Array.isArray(rows) ? rows : [rows];\n  const row = useResponsiveValue(rowsAsArray);\n  const gridTemplateColumns = templateColumns || !!columns && `repeat( ${column}, 1fr )`;\n  const gridTemplateRows = templateRows || !!rows && `repeat( ${row}, 1fr )`;\n  const cx = useCx();\n  const classes = useMemo(() => {\n    const alignmentProps = getAlignmentProps(alignment);\n    const gridClasses = /*#__PURE__*/css({\n      alignItems: align,\n      display: isInline ? 'inline-grid' : 'grid',\n      gap: `calc( ${CONFIG.gridBase} * ${gap} )`,\n      gridTemplateColumns: gridTemplateColumns || undefined,\n      gridTemplateRows: gridTemplateRows || undefined,\n      gridRowGap: rowGap,\n      gridColumnGap: columnGap,\n      justifyContent: justify,\n      verticalAlign: isInline ? 'middle' : undefined,\n      ...alignmentProps\n    }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:gridClasses;\", process.env.NODE_ENV === \"production\" ? \"\" : \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNENzQiIsImZpbGUiOiJob29rLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ0B3b3JkcHJlc3MvZWxlbWVudCc7XG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgeyB1c2VDb250ZXh0U3lzdGVtIH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgeyBnZXRBbGlnbm1lbnRQcm9wcyB9IGZyb20gJy4vdXRpbHMnO1xuaW1wb3J0IHsgdXNlUmVzcG9uc2l2ZVZhbHVlIH0gZnJvbSAnLi4vdXRpbHMvdXNlLXJlc3BvbnNpdmUtdmFsdWUnO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi91dGlscy9jb25maWctdmFsdWVzJztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcbmltcG9ydCB0eXBlIHsgR3JpZFByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIHVzZUdyaWQoXG5cdHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgR3JpZFByb3BzLCAnZGl2JyA+XG4pIHtcblx0Y29uc3Qge1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGNvbHVtbnMgPSAyLFxuXHRcdGdhcCA9IDMsXG5cdFx0aXNJbmxpbmUgPSBmYWxzZSxcblx0XHRqdXN0aWZ5LFxuXHRcdHJvd0dhcCxcblx0XHRyb3dzLFxuXHRcdHRlbXBsYXRlQ29sdW1ucyxcblx0XHR0ZW1wbGF0ZVJvd3MsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggcHJvcHMsICdHcmlkJyApO1xuXG5cdGNvbnN0IGNvbHVtbnNBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggY29sdW1ucyApID8gY29sdW1ucyA6IFsgY29sdW1ucyBdO1xuXHRjb25zdCBjb2x1bW4gPSB1c2VSZXNwb25zaXZlVmFsdWUoIGNvbHVtbnNBc0FycmF5ICk7XG5cdGNvbnN0IHJvd3NBc0FycmF5ID0gQXJyYXkuaXNBcnJheSggcm93cyApID8gcm93cyA6IFsgcm93cyBdO1xuXHRjb25zdCByb3cgPSB1c2VSZXNwb25zaXZlVmFsdWUoIHJvd3NBc0FycmF5ICk7XG5cblx0Y29uc3QgZ3JpZFRlbXBsYXRlQ29sdW1ucyA9XG5cdFx0dGVtcGxhdGVDb2x1bW5zIHx8ICggISEgY29sdW1ucyAmJiBgcmVwZWF0KCAkeyBjb2x1bW4gfSwgMWZyIClgICk7XG5cdGNvbnN0IGdyaWRUZW1wbGF0ZVJvd3MgPVxuXHRcdHRlbXBsYXRlUm93cyB8fCAoICEhIHJvd3MgJiYgYHJlcGVhdCggJHsgcm93IH0sIDFmciApYCApO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblxuXHRjb25zdCBjbGFzc2VzID0gdXNlTWVtbyggKCkgPT4ge1xuXHRcdGNvbnN0IGFsaWdubWVudFByb3BzID0gZ2V0QWxpZ25tZW50UHJvcHMoIGFsaWdubWVudCApO1xuXG5cdFx0Y29uc3QgZ3JpZENsYXNzZXMgPSBjc3MoIHtcblx0XHRcdGFsaWduSXRlbXM6IGFsaWduLFxuXHRcdFx0ZGlzcGxheTogaXNJbmxpbmUgPyAnaW5saW5lLWdyaWQnIDogJ2dyaWQnLFxuXHRcdFx0Z2FwOiBgY2FsYyggJHsgQ09ORklHLmdyaWRCYXNlIH0gKiAkeyBnYXAgfSApYCxcblx0XHRcdGdyaWRUZW1wbGF0ZUNvbHVtbnM6IGdyaWRUZW1wbGF0ZUNvbHVtbnMgfHwgdW5kZWZpbmVkLFxuXHRcdFx0Z3JpZFRlbXBsYXRlUm93czogZ3JpZFRlbXBsYXRlUm93cyB8fCB1bmRlZmluZWQsXG5cdFx0XHRncmlkUm93R2FwOiByb3dHYXAsXG5cdFx0XHRncmlkQ29sdW1uR2FwOiBjb2x1bW5HYXAsXG5cdFx0XHRqdXN0aWZ5Q29udGVudDoganVzdGlmeSxcblx0XHRcdHZlcnRpY2FsQWxpZ246IGlzSW5saW5lID8gJ21pZGRsZScgOiB1bmRlZmluZWQsXG5cdFx0XHQuLi5hbGlnbm1lbnRQcm9wcyxcblx0XHR9ICk7XG5cblx0XHRyZXR1cm4gY3goIGdyaWRDbGFzc2VzLCBjbGFzc05hbWUgKTtcblx0fSwgW1xuXHRcdGFsaWduLFxuXHRcdGFsaWdubWVudCxcblx0XHRjbGFzc05hbWUsXG5cdFx0Y29sdW1uR2FwLFxuXHRcdGN4LFxuXHRcdGdhcCxcblx0XHRncmlkVGVtcGxhdGVDb2x1bW5zLFxuXHRcdGdyaWRUZW1wbGF0ZVJvd3MsXG5cdFx0aXNJbmxpbmUsXG5cdFx0anVzdGlmeSxcblx0XHRyb3dHYXAsXG5cdF0gKTtcblxuXHRyZXR1cm4geyAuLi5vdGhlclByb3BzLCBjbGFzc05hbWU6IGNsYXNzZXMgfTtcbn1cbiJdfQ== */\");\n    return cx(gridClasses, className);\n  }, [align, alignment, className, columnGap, cx, gap, gridTemplateColumns, gridTemplateRows, isInline, justify, rowGap]);\n  return {\n    ...otherProps,\n    className: classes\n  };\n}"],
+  "mappings": ";AAAA,SAAS,WAAW;AACpB,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,OAAO,YAAY;AACnB,SAAS,aAAa;AACP,SAAR,QAAyB,OAAO;AACrC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,MAAM;AAClC,QAAM,iBAAiB,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO;AAClE,QAAM,SAAS,mBAAmB,cAAc;AAChD,QAAM,cAAc,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AACtD,QAAM,MAAM,mBAAmB,WAAW;AAC1C,QAAM,sBAAsB,mBAAmB,CAAC,CAAC,WAAW,WAAW,MAAM;AAC7E,QAAM,mBAAmB,gBAAgB,CAAC,CAAC,QAAQ,WAAW,GAAG;AACjE,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM;AAC5B,UAAM,iBAAiB,kBAAkB,SAAS;AAClD,UAAM,cAA2B,oBAAI;AAAA,MACnC,YAAY;AAAA,MACZ,SAAS,WAAW,gBAAgB;AAAA,MACpC,KAAK,SAAS,OAAO,QAAQ,MAAM,GAAG;AAAA,MACtC,qBAAqB,uBAAuB;AAAA,MAC5C,kBAAkB,oBAAoB;AAAA,MACtC,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,eAAe,WAAW,WAAW;AAAA,MACrC,GAAG;AAAA,IACL,GAAG,QAAQ,IAAI,aAAa,eAAe,KAAK,uBAAuB,QAAQ,IAAI,aAAa,eAAe,KAAK,q+FAAq+F;AACzlG,WAAO,GAAG,aAAa,SAAS;AAAA,EAClC,GAAG,CAAC,OAAO,WAAW,WAAW,WAAW,IAAI,KAAK,qBAAqB,kBAAkB,UAAU,SAAS,MAAM,CAAC;AACtH,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,EACb;AACF;",
   "names": []
 }

package/build-module/grid/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/grid/utils.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nconst ALIGNMENTS = {\n  bottom: {\n    alignItems: 'flex-end',\n    justifyContent: 'center'\n  },\n  bottomLeft: {\n    alignItems: 'flex-start',\n    justifyContent: 'flex-end'\n  },\n  bottomRight: {\n    alignItems: 'flex-end',\n    justifyContent: 'flex-end'\n  },\n  center: {\n    alignItems: 'center',\n    justifyContent: 'center'\n  },\n  spaced: {\n    alignItems: 'center',\n    justifyContent: 'space-between'\n  },\n  left: {\n    alignItems: 'center',\n    justifyContent: 'flex-start'\n  },\n  right: {\n    alignItems: 'center',\n    justifyContent: 'flex-end'\n  },\n  stretch: {\n    alignItems: 'stretch'\n  },\n  top: {\n    alignItems: 'flex-start',\n    justifyContent: 'center'\n  },\n  topLeft: {\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start'\n  },\n  topRight: {\n    alignItems: 'flex-start',\n    justifyContent: 'flex-end'\n  }\n};\nexport function getAlignmentProps(alignment) {\n  const alignmentProps = alignment ? ALIGNMENTS[alignment] : {};\n  return alignmentProps;\n}"],
-  "mappings": ";AAIA,IAAM,aAAa;AAAA,EACjB,QAAQ;AAAA,IACN,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,IACV,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,KAAK;AAAA,IACH,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AACO,SAAS,kBAAkB,WAAW;AAC3C,QAAM,iBAAiB,YAAY,WAAW,SAAS,IAAI,CAAC;AAC5D,SAAO;AACT;",
+  "sourcesContent": ["const ALIGNMENTS = {\n  bottom: {\n    alignItems: 'flex-end',\n    justifyContent: 'center'\n  },\n  bottomLeft: {\n    alignItems: 'flex-start',\n    justifyContent: 'flex-end'\n  },\n  bottomRight: {\n    alignItems: 'flex-end',\n    justifyContent: 'flex-end'\n  },\n  center: {\n    alignItems: 'center',\n    justifyContent: 'center'\n  },\n  spaced: {\n    alignItems: 'center',\n    justifyContent: 'space-between'\n  },\n  left: {\n    alignItems: 'center',\n    justifyContent: 'flex-start'\n  },\n  right: {\n    alignItems: 'center',\n    justifyContent: 'flex-end'\n  },\n  stretch: {\n    alignItems: 'stretch'\n  },\n  top: {\n    alignItems: 'flex-start',\n    justifyContent: 'center'\n  },\n  topLeft: {\n    alignItems: 'flex-start',\n    justifyContent: 'flex-start'\n  },\n  topRight: {\n    alignItems: 'flex-start',\n    justifyContent: 'flex-end'\n  }\n};\nexport function getAlignmentProps(alignment) {\n  const alignmentProps = alignment ? ALIGNMENTS[alignment] : {};\n  return alignmentProps;\n}"],
+  "mappings": ";AAAA,IAAM,aAAa;AAAA,EACjB,QAAQ;AAAA,IACN,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,IACV,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,KAAK;AAAA,IACH,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF;AACO,SAAS,kBAAkB,WAAW;AAC3C,QAAM,iBAAiB,YAAY,WAAW,SAAS,IAAI,CAAC;AAC5D,SAAO;AACT;",
   "names": []
 }

package/build-module/guide/icons.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/guide/icons.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { SVG, Circle } from '@wordpress/primitives';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const PageControlIcon = () => /*#__PURE__*/_jsx(SVG, {\n  width: \"8\",\n  height: \"8\",\n  fill: \"none\",\n  xmlns: \"http://www.w3.org/2000/svg\",\n  children: /*#__PURE__*/_jsx(Circle, {\n    cx: \"4\",\n    cy: \"4\",\n    r: \"4\"\n  })\n});"],
-  "mappings": ";AAGA,SAAS,KAAK,cAAc;AAC5B,SAAS,OAAO,YAAY;AACrB,IAAM,kBAAkB,MAAmB,qBAAK,KAAK;AAAA,EAC1D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAuB,qBAAK,QAAQ;AAAA,IAClC,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,CAAC;AACH,CAAC;",
+  "sourcesContent": ["import { SVG, Circle } from '@wordpress/primitives';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const PageControlIcon = () => /*#__PURE__*/_jsx(SVG, {\n  width: \"8\",\n  height: \"8\",\n  fill: \"none\",\n  xmlns: \"http://www.w3.org/2000/svg\",\n  children: /*#__PURE__*/_jsx(Circle, {\n    cx: \"4\",\n    cy: \"4\",\n    r: \"4\"\n  })\n});"],
+  "mappings": ";AAAA,SAAS,KAAK,cAAc;AAC5B,SAAS,OAAO,YAAY;AACrB,IAAM,kBAAkB,MAAmB,qBAAK,KAAK;AAAA,EAC1D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAuB,qBAAK,QAAQ;AAAA,IAClC,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,CAAC;AACH,CAAC;",
   "names": []
 }

package/build-module/guide/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/guide/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide({\n  children,\n  className,\n  contentLabel,\n  finishButtonText = __('Finish'),\n  nextButtonText = __('Next'),\n  previousButtonText = __('Previous'),\n  onFinish,\n  pages = []\n}) {\n  const ref = useRef(null);\n  const [currentPage, setCurrentPage] = useState(0);\n  useEffect(() => {\n    // Place focus at the top of the guide on mount and when the page changes.\n    const frame = ref.current?.querySelector('.components-guide');\n    if (frame instanceof HTMLElement) {\n      frame.focus();\n    }\n  }, [currentPage]);\n  useEffect(() => {\n    if (Children.count(children)) {\n      deprecated('Passing children to <Guide>', {\n        since: '5.5',\n        alternative: 'the `pages` prop'\n      });\n    }\n  }, [children]);\n  if (Children.count(children)) {\n    pages = Children.map(children, child => ({\n      content: child\n    })) ?? [];\n  }\n  const canGoBack = currentPage > 0;\n  const canGoForward = currentPage < pages.length - 1;\n  const goBack = () => {\n    if (canGoBack) {\n      setCurrentPage(currentPage - 1);\n    }\n  };\n  const goForward = () => {\n    if (canGoForward) {\n      setCurrentPage(currentPage + 1);\n    }\n  };\n  if (pages.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(Modal, {\n    className: clsx('components-guide', className),\n    contentLabel: contentLabel,\n    isDismissible: pages.length > 1,\n    onRequestClose: onFinish,\n    onKeyDown: event => {\n      if (event.code === 'ArrowLeft') {\n        goBack();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      } else if (event.code === 'ArrowRight') {\n        goForward();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      }\n    },\n    ref: ref,\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: \"components-guide__container\",\n      children: [/*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__page\",\n        children: [pages[currentPage].image, pages.length > 1 && /*#__PURE__*/_jsx(PageControl, {\n          currentPage: currentPage,\n          numberOfPages: pages.length,\n          setCurrentPage: setCurrentPage\n        }), pages[currentPage].content]\n      }), /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__footer\",\n        children: [canGoBack && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__back-button\",\n          variant: \"tertiary\",\n          onClick: goBack,\n          __next40pxDefaultSize: true,\n          children: previousButtonText\n        }), canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__forward-button\",\n          variant: \"primary\",\n          onClick: goForward,\n          __next40pxDefaultSize: true,\n          children: nextButtonText\n        }), !canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__finish-button\",\n          variant: \"primary\",\n          onClick: onFinish,\n          __next40pxDefaultSize: true,\n          children: finishButtonText\n        })]\n      })]\n    })\n  });\n}\nexport default Guide;"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide({\n  children,\n  className,\n  contentLabel,\n  finishButtonText = __('Finish'),\n  nextButtonText = __('Next'),\n  previousButtonText = __('Previous'),\n  onFinish,\n  pages = []\n}) {\n  const ref = useRef(null);\n  const [currentPage, setCurrentPage] = useState(0);\n  useEffect(() => {\n    // Place focus at the top of the guide on mount and when the page changes.\n    const frame = ref.current?.querySelector('.components-guide');\n    if (frame instanceof HTMLElement) {\n      frame.focus();\n    }\n  }, [currentPage]);\n  useEffect(() => {\n    if (Children.count(children)) {\n      deprecated('Passing children to <Guide>', {\n        since: '5.5',\n        alternative: 'the `pages` prop'\n      });\n    }\n  }, [children]);\n  if (Children.count(children)) {\n    pages = Children.map(children, child => ({\n      content: child\n    })) ?? [];\n  }\n  const canGoBack = currentPage > 0;\n  const canGoForward = currentPage < pages.length - 1;\n  const goBack = () => {\n    if (canGoBack) {\n      setCurrentPage(currentPage - 1);\n    }\n  };\n  const goForward = () => {\n    if (canGoForward) {\n      setCurrentPage(currentPage + 1);\n    }\n  };\n  if (pages.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(Modal, {\n    className: clsx('components-guide', className),\n    contentLabel: contentLabel,\n    isDismissible: pages.length > 1,\n    onRequestClose: onFinish,\n    onKeyDown: event => {\n      if (event.code === 'ArrowLeft') {\n        goBack();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      } else if (event.code === 'ArrowRight') {\n        goForward();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      }\n    },\n    ref: ref,\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: \"components-guide__container\",\n      children: [/*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__page\",\n        children: [pages[currentPage].image, pages.length > 1 && /*#__PURE__*/_jsx(PageControl, {\n          currentPage: currentPage,\n          numberOfPages: pages.length,\n          setCurrentPage: setCurrentPage\n        }), pages[currentPage].content]\n      }), /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__footer\",\n        children: [canGoBack && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__back-button\",\n          variant: \"tertiary\",\n          onClick: goBack,\n          __next40pxDefaultSize: true,\n          children: previousButtonText\n        }), canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__forward-button\",\n          variant: \"primary\",\n          onClick: goForward,\n          __next40pxDefaultSize: true,\n          children: nextButtonText\n        }), !canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__finish-button\",\n          variant: \"primary\",\n          onClick: onFinish,\n          __next40pxDefaultSize: true,\n          children: finishButtonText\n        })]\n      })]\n    })\n  });\n}\nexport default Guide;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/guide/page-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/guide/page-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function PageControl({\n  currentPage,\n  numberOfPages,\n  setCurrentPage\n}) {\n  return /*#__PURE__*/_jsx(\"ul\", {\n    className: \"components-guide__page-control\",\n    \"aria-label\": __('Guide controls'),\n    children: Array.from({\n      length: numberOfPages\n    }).map((_, page) => /*#__PURE__*/_jsx(\"li\", {\n      // Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n      \"aria-current\": page === currentPage ? 'step' : undefined,\n      children: /*#__PURE__*/_jsx(Button, {\n        size: \"small\",\n        icon: /*#__PURE__*/_jsx(PageControlIcon, {}),\n        \"aria-label\": sprintf(/* translators: 1: current page number 2: total number of pages */\n        __('Page %1$d of %2$d'), page + 1, numberOfPages),\n        onClick: () => setCurrentPage(page)\n      }, page)\n    }, page))\n  });\n}"],
-  "mappings": ";AAGA,SAAS,IAAI,eAAe;AAK5B,OAAO,YAAY;AACnB,SAAS,uBAAuB;AAChC,SAAS,OAAO,YAAY;AACb,SAAR,YAA6B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,SAAoB,qBAAK,MAAM;AAAA,IAC7B,WAAW;AAAA,IACX,cAAc,GAAG,gBAAgB;AAAA,IACjC,UAAU,MAAM,KAAK;AAAA,MACnB,QAAQ;AAAA,IACV,CAAC,EAAE,IAAI,CAAC,GAAG,SAAsB,qBAAK,MAAM;AAAA;AAAA,MAE1C,gBAAgB,SAAS,cAAc,SAAS;AAAA,MAChD,UAAuB,qBAAK,QAAQ;AAAA,QAClC,MAAM;AAAA,QACN,MAAmB,qBAAK,iBAAiB,CAAC,CAAC;AAAA,QAC3C,cAAc;AAAA;AAAA,UACd,GAAG,mBAAmB;AAAA,UAAG,OAAO;AAAA,UAAG;AAAA,QAAa;AAAA,QAChD,SAAS,MAAM,eAAe,IAAI;AAAA,MACpC,GAAG,IAAI;AAAA,IACT,GAAG,IAAI,CAAC;AAAA,EACV,CAAC;AACH;",
+  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function PageControl({\n  currentPage,\n  numberOfPages,\n  setCurrentPage\n}) {\n  return /*#__PURE__*/_jsx(\"ul\", {\n    className: \"components-guide__page-control\",\n    \"aria-label\": __('Guide controls'),\n    children: Array.from({\n      length: numberOfPages\n    }).map((_, page) => /*#__PURE__*/_jsx(\"li\", {\n      // Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n      \"aria-current\": page === currentPage ? 'step' : undefined,\n      children: /*#__PURE__*/_jsx(Button, {\n        size: \"small\",\n        icon: /*#__PURE__*/_jsx(PageControlIcon, {}),\n        \"aria-label\": sprintf(/* translators: 1: current page number 2: total number of pages */\n        __('Page %1$d of %2$d'), page + 1, numberOfPages),\n        onClick: () => setCurrentPage(page)\n      }, page)\n    }, page))\n  });\n}"],
+  "mappings": ";AAAA,SAAS,IAAI,eAAe;AAC5B,OAAO,YAAY;AACnB,SAAS,uBAAuB;AAChC,SAAS,OAAO,YAAY;AACb,SAAR,YAA6B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,SAAoB,qBAAK,MAAM;AAAA,IAC7B,WAAW;AAAA,IACX,cAAc,GAAG,gBAAgB;AAAA,IACjC,UAAU,MAAM,KAAK;AAAA,MACnB,QAAQ;AAAA,IACV,CAAC,EAAE,IAAI,CAAC,GAAG,SAAsB,qBAAK,MAAM;AAAA;AAAA,MAE1C,gBAAgB,SAAS,cAAc,SAAS;AAAA,MAChD,UAAuB,qBAAK,QAAQ;AAAA,QAClC,MAAM;AAAA,QACN,MAAmB,qBAAK,iBAAiB,CAAC,CAAC;AAAA,QAC3C,cAAc;AAAA;AAAA,UACd,GAAG,mBAAmB;AAAA,UAAG,OAAO;AAAA,UAAG;AAAA,QAAa;AAAA,QAChD,SAAS,MAAM,eAAe,IAAI;AAAA,MACpC,GAAG,IAAI;AAAA,IACT,GAAG,IAAI,CAAC;AAAA,EACV,CAAC;AACH;",
   "names": []
 }

package/build-module/guide/page.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/guide/page.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function GuidePage(props) {\n  useEffect(() => {\n    deprecated('<GuidePage>', {\n      since: '5.5',\n      alternative: 'the `pages` prop in <Guide>'\n    });\n  }, []);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...props\n  });\n}"],
-  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,OAAO,gBAAgB;AAKvB,SAAS,OAAO,YAAY;AACb,SAAR,UAA2B,OAAO;AACvC,YAAU,MAAM;AACd,eAAW,eAAe;AAAA,MACxB,OAAO;AAAA,MACP,aAAa;AAAA,IACf,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AACL,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG;AAAA,EACL,CAAC;AACH;",
+  "sourcesContent": ["import { useEffect } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function GuidePage(props) {\n  useEffect(() => {\n    deprecated('<GuidePage>', {\n      since: '5.5',\n      alternative: 'the `pages` prop in <Guide>'\n    });\n  }, []);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...props\n  });\n}"],
+  "mappings": ";AAAA,SAAS,iBAAiB;AAC1B,OAAO,gBAAgB;AACvB,SAAS,OAAO,YAAY;AACb,SAAR,UAA2B,OAAO;AACvC,YAAU,MAAM;AACd,eAAW,eAAe;AAAA,MACxB,OAAO;AAAA,MACP,aAAa;AAAA,IACf,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AACL,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG;AAAA,EACL,CAAC;AACH;",
   "names": []
 }

package/build-module/h-stack/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/h-stack/component.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\n\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useHStack } from './hook';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedHStack(props, forwardedRef) {\n  const hStackProps = useHStack(props);\n  return /*#__PURE__*/_jsx(View, {\n    ...hStackProps,\n    ref: forwardedRef\n  });\n}\n\n/**\n * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.\n *\n * `HStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalHStack as HStack,\n * \t__experimentalText as Text,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<HStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</HStack>\n * \t);\n * }\n * ```\n */\nexport const HStack = contextConnect(UnconnectedHStack, 'HStack');\nexport default HStack;"],
-  "mappings": ";AAIA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,OAAO,YAAY;AAC5B,SAAS,kBAAkB,OAAO,cAAc;AAC9C,QAAM,cAAc,UAAU,KAAK;AACnC,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AAwBO,IAAM,SAAS,eAAe,mBAAmB,QAAQ;AAChE,IAAO,oBAAQ;",
+  "sourcesContent": ["import { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useHStack } from './hook';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedHStack(props, forwardedRef) {\n  const hStackProps = useHStack(props);\n  return /*#__PURE__*/_jsx(View, {\n    ...hStackProps,\n    ref: forwardedRef\n  });\n}\n\n/**\n * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.\n *\n * `HStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalHStack as HStack,\n * \t__experimentalText as Text,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<HStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</HStack>\n * \t);\n * }\n * ```\n */\nexport const HStack = contextConnect(UnconnectedHStack, 'HStack');\nexport default HStack;"],
+  "mappings": ";AAAA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,OAAO,YAAY;AAC5B,SAAS,kBAAkB,OAAO,cAAc;AAC9C,QAAM,cAAc,UAAU,KAAK;AACnC,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AAwBO,IAAM,SAAS,eAAe,mBAAmB,QAAQ;AAChE,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/h-stack/hook.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/h-stack/hook.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\n\nimport { hasConnectNamespace, useContextSystem } from '../context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function useHStack(props) {\n  const {\n    alignment = 'edge',\n    children,\n    direction,\n    spacing = 2,\n    ...otherProps\n  } = useContextSystem(props, 'HStack');\n  const align = getAlignmentProps(alignment, direction);\n  const validChildren = getValidChildren(children);\n  const clonedChildren = validChildren.map((child, index) => {\n    const _isSpacer = hasConnectNamespace(child, ['Spacer']);\n    if (_isSpacer) {\n      const childElement = child;\n      const _key = childElement.key || `hstack-${index}`;\n      return /*#__PURE__*/_jsx(FlexItem, {\n        isBlock: true,\n        ...childElement.props\n      }, _key);\n    }\n    return child;\n  });\n  const propsForFlex = {\n    children: clonedChildren,\n    direction,\n    justify: 'center',\n    ...align,\n    ...otherProps,\n    gap: spacing\n  };\n\n  // Omit `isColumn` because it's not used in HStack.\n  const {\n    isColumn,\n    ...flexProps\n  } = useFlex(propsForFlex);\n  return flexProps;\n}"],
-  "mappings": ";AAQA,SAAS,qBAAqB,wBAAwB;AACtD,SAAS,UAAU,eAAe;AAClC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,OAAO,YAAY;AACrB,SAAS,UAAU,OAAO;AAC/B,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,QAAQ;AACpC,QAAM,QAAQ,kBAAkB,WAAW,SAAS;AACpD,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,iBAAiB,cAAc,IAAI,CAAC,OAAO,UAAU;AACzD,UAAM,YAAY,oBAAoB,OAAO,CAAC,QAAQ,CAAC;AACvD,QAAI,WAAW;AACb,YAAM,eAAe;AACrB,YAAM,OAAO,aAAa,OAAO,UAAU,KAAK;AAChD,aAAoB,qBAAK,UAAU;AAAA,QACjC,SAAS;AAAA,QACT,GAAG,aAAa;AAAA,MAClB,GAAG,IAAI;AAAA,IACT;AACA,WAAO;AAAA,EACT,CAAC;AACD,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,IACH,GAAG;AAAA,IACH,KAAK;AAAA,EACP;AAGA,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI,QAAQ,YAAY;AACxB,SAAO;AACT;",
+  "sourcesContent": ["import { hasConnectNamespace, useContextSystem } from '../context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function useHStack(props) {\n  const {\n    alignment = 'edge',\n    children,\n    direction,\n    spacing = 2,\n    ...otherProps\n  } = useContextSystem(props, 'HStack');\n  const align = getAlignmentProps(alignment, direction);\n  const validChildren = getValidChildren(children);\n  const clonedChildren = validChildren.map((child, index) => {\n    const _isSpacer = hasConnectNamespace(child, ['Spacer']);\n    if (_isSpacer) {\n      const childElement = child;\n      const _key = childElement.key || `hstack-${index}`;\n      return /*#__PURE__*/_jsx(FlexItem, {\n        isBlock: true,\n        ...childElement.props\n      }, _key);\n    }\n    return child;\n  });\n  const propsForFlex = {\n    children: clonedChildren,\n    direction,\n    justify: 'center',\n    ...align,\n    ...otherProps,\n    gap: spacing\n  };\n\n  // Omit `isColumn` because it's not used in HStack.\n  const {\n    isColumn,\n    ...flexProps\n  } = useFlex(propsForFlex);\n  return flexProps;\n}"],
+  "mappings": ";AAAA,SAAS,qBAAqB,wBAAwB;AACtD,SAAS,UAAU,eAAe;AAClC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,OAAO,YAAY;AACrB,SAAS,UAAU,OAAO;AAC/B,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,QAAQ;AACpC,QAAM,QAAQ,kBAAkB,WAAW,SAAS;AACpD,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,iBAAiB,cAAc,IAAI,CAAC,OAAO,UAAU;AACzD,UAAM,YAAY,oBAAoB,OAAO,CAAC,QAAQ,CAAC;AACvD,QAAI,WAAW;AACb,YAAM,eAAe;AACrB,YAAM,OAAO,aAAa,OAAO,UAAU,KAAK;AAChD,aAAoB,qBAAK,UAAU;AAAA,QACjC,SAAS;AAAA,QACT,GAAG,aAAa;AAAA,MAClB,GAAG,IAAI;AAAA,IACT;AACA,WAAO;AAAA,EACT,CAAC;AACD,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV;AAAA,IACA,SAAS;AAAA,IACT,GAAG;AAAA,IACH,GAAG;AAAA,IACH,KAAK;AAAA,EACP;AAGA,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI,QAAQ,YAAY;AACxB,SAAO;AACT;",
   "names": []
 }

package/build-module/h-stack/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/h-stack/utils.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\n\nimport { isValueDefined } from '../utils/values';\nconst H_ALIGNMENTS = {\n  bottom: {\n    align: 'flex-end',\n    justify: 'center'\n  },\n  bottomLeft: {\n    align: 'flex-end',\n    justify: 'flex-start'\n  },\n  bottomRight: {\n    align: 'flex-end',\n    justify: 'flex-end'\n  },\n  center: {\n    align: 'center',\n    justify: 'center'\n  },\n  edge: {\n    align: 'center',\n    justify: 'space-between'\n  },\n  left: {\n    align: 'center',\n    justify: 'flex-start'\n  },\n  right: {\n    align: 'center',\n    justify: 'flex-end'\n  },\n  stretch: {\n    align: 'stretch'\n  },\n  top: {\n    align: 'flex-start',\n    justify: 'center'\n  },\n  topLeft: {\n    align: 'flex-start',\n    justify: 'flex-start'\n  },\n  topRight: {\n    align: 'flex-start',\n    justify: 'flex-end'\n  }\n};\nconst V_ALIGNMENTS = {\n  bottom: {\n    justify: 'flex-end',\n    align: 'center'\n  },\n  bottomLeft: {\n    justify: 'flex-end',\n    align: 'flex-start'\n  },\n  bottomRight: {\n    justify: 'flex-end',\n    align: 'flex-end'\n  },\n  center: {\n    justify: 'center',\n    align: 'center'\n  },\n  edge: {\n    justify: 'space-between',\n    align: 'center'\n  },\n  left: {\n    justify: 'center',\n    align: 'flex-start'\n  },\n  right: {\n    justify: 'center',\n    align: 'flex-end'\n  },\n  stretch: {\n    align: 'stretch'\n  },\n  top: {\n    justify: 'flex-start',\n    align: 'center'\n  },\n  topLeft: {\n    justify: 'flex-start',\n    align: 'flex-start'\n  },\n  topRight: {\n    justify: 'flex-start',\n    align: 'flex-end'\n  }\n};\nexport function getAlignmentProps(alignment, direction = 'row') {\n  if (!isValueDefined(alignment)) {\n    return {};\n  }\n  const isVertical = direction === 'column';\n  const props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;\n  const alignmentProps = alignment in props ? props[alignment] : {\n    align: alignment\n  };\n  return alignmentProps;\n}"],
-  "mappings": ";AAQA,SAAS,sBAAsB;AAC/B,IAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,KAAK;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF;AACA,IAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,KAAK;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AACF;AACO,SAAS,kBAAkB,WAAW,YAAY,OAAO;AAC9D,MAAI,CAAC,eAAe,SAAS,GAAG;AAC9B,WAAO,CAAC;AAAA,EACV;AACA,QAAM,aAAa,cAAc;AACjC,QAAM,QAAQ,aAAa,eAAe;AAC1C,QAAM,iBAAiB,aAAa,QAAQ,MAAM,SAAS,IAAI;AAAA,IAC7D,OAAO;AAAA,EACT;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { isValueDefined } from '../utils/values';\nconst H_ALIGNMENTS = {\n  bottom: {\n    align: 'flex-end',\n    justify: 'center'\n  },\n  bottomLeft: {\n    align: 'flex-end',\n    justify: 'flex-start'\n  },\n  bottomRight: {\n    align: 'flex-end',\n    justify: 'flex-end'\n  },\n  center: {\n    align: 'center',\n    justify: 'center'\n  },\n  edge: {\n    align: 'center',\n    justify: 'space-between'\n  },\n  left: {\n    align: 'center',\n    justify: 'flex-start'\n  },\n  right: {\n    align: 'center',\n    justify: 'flex-end'\n  },\n  stretch: {\n    align: 'stretch'\n  },\n  top: {\n    align: 'flex-start',\n    justify: 'center'\n  },\n  topLeft: {\n    align: 'flex-start',\n    justify: 'flex-start'\n  },\n  topRight: {\n    align: 'flex-start',\n    justify: 'flex-end'\n  }\n};\nconst V_ALIGNMENTS = {\n  bottom: {\n    justify: 'flex-end',\n    align: 'center'\n  },\n  bottomLeft: {\n    justify: 'flex-end',\n    align: 'flex-start'\n  },\n  bottomRight: {\n    justify: 'flex-end',\n    align: 'flex-end'\n  },\n  center: {\n    justify: 'center',\n    align: 'center'\n  },\n  edge: {\n    justify: 'space-between',\n    align: 'center'\n  },\n  left: {\n    justify: 'center',\n    align: 'flex-start'\n  },\n  right: {\n    justify: 'center',\n    align: 'flex-end'\n  },\n  stretch: {\n    align: 'stretch'\n  },\n  top: {\n    justify: 'flex-start',\n    align: 'center'\n  },\n  topLeft: {\n    justify: 'flex-start',\n    align: 'flex-start'\n  },\n  topRight: {\n    justify: 'flex-start',\n    align: 'flex-end'\n  }\n};\nexport function getAlignmentProps(alignment, direction = 'row') {\n  if (!isValueDefined(alignment)) {\n    return {};\n  }\n  const isVertical = direction === 'column';\n  const props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;\n  const alignmentProps = alignment in props ? props[alignment] : {\n    align: alignment\n  };\n  return alignmentProps;\n}"],
+  "mappings": ";AAAA,SAAS,sBAAsB;AAC/B,IAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,KAAK;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF;AACA,IAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,KAAK;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AACF;AACO,SAAS,kBAAkB,WAAW,YAAY,OAAO;AAC9D,MAAI,CAAC,eAAe,SAAS,GAAG;AAC9B,WAAO,CAAC;AAAA,EACV;AACA,QAAM,aAAa,cAAc;AACjC,QAAM,QAAQ,aAAa,eAAe;AAC1C,QAAM,iBAAiB,aAAa,QAAQ,MAAM,SAAS,IAAI;AAAA,IAC7D,OAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

package/build-module/heading/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/heading/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useHeading } from './hook';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedHeading(props, forwardedRef) {\n  const headerProps = useHeading(props);\n  return /*#__PURE__*/_jsx(View, {\n    ...headerProps,\n    ref: forwardedRef\n  });\n}\n\n/**\n * `Heading` renders headings and titles using the library's typography system.\n *\n * ```jsx\n * import { __experimentalHeading as Heading } from \"@wordpress/components\";\n *\n * function Example() {\n *   return <Heading>Code is Poetry</Heading>;\n * }\n * ```\n */\nexport const Heading = contextConnect(UnconnectedHeading, 'Heading');\nexport default Heading;"],
-  "mappings": ";AAQA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,OAAO,YAAY;AAC5B,SAAS,mBAAmB,OAAO,cAAc;AAC/C,QAAM,cAAc,WAAW,KAAK;AACpC,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AAaO,IAAM,UAAU,eAAe,oBAAoB,SAAS;AACnE,IAAO,oBAAQ;",
+  "sourcesContent": ["import { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useHeading } from './hook';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedHeading(props, forwardedRef) {\n  const headerProps = useHeading(props);\n  return /*#__PURE__*/_jsx(View, {\n    ...headerProps,\n    ref: forwardedRef\n  });\n}\n\n/**\n * `Heading` renders headings and titles using the library's typography system.\n *\n * ```jsx\n * import { __experimentalHeading as Heading } from \"@wordpress/components\";\n *\n * function Example() {\n *   return <Heading>Code is Poetry</Heading>;\n * }\n * ```\n */\nexport const Heading = contextConnect(UnconnectedHeading, 'Heading');\nexport default Heading;"],
+  "mappings": ";AAAA,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,OAAO,YAAY;AAC5B,SAAS,mBAAmB,OAAO,cAAc;AAC/C,QAAM,cAAc,WAAW,KAAK;AACpC,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AAaO,IAAM,UAAU,eAAe,oBAAoB,SAAS;AACnE,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/heading/hook.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/heading/hook.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\n\nimport { useContextSystem } from '../context';\nimport { useText } from '../text';\nimport { getHeadingFontSize } from '../utils/font-size';\nimport { CONFIG, COLORS } from '../utils';\nexport function useHeading(props) {\n  const {\n    as: asProp,\n    level = 2,\n    color = COLORS.theme.foreground,\n    isBlock = true,\n    weight = CONFIG.fontWeightEmphasis,\n    ...otherProps\n  } = useContextSystem(props, 'Heading');\n  const as = asProp || `h${level}`;\n  const a11yProps = {};\n  if (typeof as === 'string' && as[0] !== 'h') {\n    // If not a semantic `h` element, add a11y props:\n    a11yProps.role = 'heading';\n    a11yProps['aria-level'] = typeof level === 'string' ? parseInt(level) : level;\n  }\n  const textProps = useText({\n    color,\n    isBlock,\n    weight,\n    size: getHeadingFontSize(level),\n    ...otherProps\n  });\n  return {\n    ...textProps,\n    ...a11yProps,\n    as\n  };\n}"],
-  "mappings": ";AAIA,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,0BAA0B;AACnC,SAAS,QAAQ,cAAc;AACxB,SAAS,WAAW,OAAO;AAChC,QAAM;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ,OAAO,MAAM;AAAA,IACrB,UAAU;AAAA,IACV,SAAS,OAAO;AAAA,IAChB,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,SAAS;AACrC,QAAM,KAAK,UAAU,IAAI,KAAK;AAC9B,QAAM,YAAY,CAAC;AACnB,MAAI,OAAO,OAAO,YAAY,GAAG,CAAC,MAAM,KAAK;AAE3C,cAAU,OAAO;AACjB,cAAU,YAAY,IAAI,OAAO,UAAU,WAAW,SAAS,KAAK,IAAI;AAAA,EAC1E;AACA,QAAM,YAAY,QAAQ;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,mBAAmB,KAAK;AAAA,IAC9B,GAAG;AAAA,EACL,CAAC;AACD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useContextSystem } from '../context';\nimport { useText } from '../text';\nimport { getHeadingFontSize } from '../utils/font-size';\nimport { CONFIG, COLORS } from '../utils';\nexport function useHeading(props) {\n  const {\n    as: asProp,\n    level = 2,\n    color = COLORS.theme.foreground,\n    isBlock = true,\n    weight = CONFIG.fontWeightEmphasis,\n    ...otherProps\n  } = useContextSystem(props, 'Heading');\n  const as = asProp || `h${level}`;\n  const a11yProps = {};\n  if (typeof as === 'string' && as[0] !== 'h') {\n    // If not a semantic `h` element, add a11y props:\n    a11yProps.role = 'heading';\n    a11yProps['aria-level'] = typeof level === 'string' ? parseInt(level) : level;\n  }\n  const textProps = useText({\n    color,\n    isBlock,\n    weight,\n    size: getHeadingFontSize(level),\n    ...otherProps\n  });\n  return {\n    ...textProps,\n    ...a11yProps,\n    as\n  };\n}"],
+  "mappings": ";AAAA,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,0BAA0B;AACnC,SAAS,QAAQ,cAAc;AACxB,SAAS,WAAW,OAAO;AAChC,QAAM;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ,OAAO,MAAM;AAAA,IACrB,UAAU;AAAA,IACV,SAAS,OAAO;AAAA,IAChB,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,SAAS;AACrC,QAAM,KAAK,UAAU,IAAI,KAAK;AAC9B,QAAM,YAAY,CAAC;AACnB,MAAI,OAAO,OAAO,YAAY,GAAG,CAAC,MAAM,KAAK;AAE3C,cAAU,OAAO;AACjB,cAAU,YAAY,IAAI,OAAO,UAAU,WAAW,SAAS,KAAK,IAAI;AAAA,EAC1E;AACA,QAAM,YAAY,QAAQ;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,mBAAmB,KAAK;AAAA,IAC9B,GAAG;AAAA,EACL,CAAC;AACD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,EACF;AACF;",
   "names": []
 }

package/build-module/higher-order/navigate-regions/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/navigate-regions/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { createHigherOrderComponent, useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultShortcuts = {\n  previous: [{\n    modifier: 'ctrlShift',\n    character: '`'\n  }, {\n    modifier: 'ctrlShift',\n    character: '~'\n  }, {\n    modifier: 'access',\n    character: 'p'\n  }],\n  next: [{\n    modifier: 'ctrl',\n    character: '`'\n  }, {\n    modifier: 'access',\n    character: 'n'\n  }]\n};\nexport function useNavigateRegions(shortcuts = defaultShortcuts) {\n  const ref = useRef(null);\n  const [isFocusingRegions, setIsFocusingRegions] = useState(false);\n  function focusRegion(offset) {\n    const regions = Array.from(ref.current?.querySelectorAll('[role=\"region\"][tabindex=\"-1\"]') ?? []);\n    if (!regions.length) {\n      return;\n    }\n    let nextRegion = regions[0];\n    // Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.\n    const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role=\"region\"][tabindex=\"-1\"]');\n    const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;\n    if (selectedIndex !== -1) {\n      let nextIndex = selectedIndex + offset;\n      nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;\n      nextIndex = nextIndex === regions.length ? 0 : nextIndex;\n      nextRegion = regions[nextIndex];\n    }\n    nextRegion.focus();\n    setIsFocusingRegions(true);\n  }\n  const clickRef = useRefEffect(element => {\n    function onClick() {\n      setIsFocusingRegions(false);\n    }\n    element.addEventListener('click', onClick);\n    return () => {\n      element.removeEventListener('click', onClick);\n    };\n  }, [setIsFocusingRegions]);\n  return {\n    ref: useMergeRefs([ref, clickRef]),\n    className: isFocusingRegions ? 'is-focusing-regions' : '',\n    onKeyDown(event) {\n      if (shortcuts.previous.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(-1);\n      } else if (shortcuts.next.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(1);\n      }\n    }\n  };\n}\n\n/**\n * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding keyboard navigation to switch between the different DOM elements marked as \"regions\" (role=\"region\").\n * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,\n * these elements must be properly labelled to briefly describe the purpose of the content in the region.\n * For more details, see \"Landmark Roles\" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)\n * and \"Landmark Regions\" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).\n *\n * ```jsx\n * import { navigateRegions } from '@wordpress/components';\n *\n * const MyComponentWithNavigateRegions = navigateRegions( () => (\n * \t<div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Header\">\n * \t\t\tHeader\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Content\">\n * \t\t\tContent\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Sidebar\">\n * \t\t\tSidebar\n * \t\t</div>\n * \t</div>\n * ) );\n * ```\n */\nexport default createHigherOrderComponent(Component => function NavigateRegions({\n  shortcuts,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...useNavigateRegions(shortcuts),\n    children: /*#__PURE__*/_jsx(Component, {\n      ...props\n    })\n  });\n}, 'navigateRegions');"],
-  "mappings": ";AAGA,SAAS,UAAU,cAAc;AACjC,SAAS,4BAA4B,cAAc,oBAAoB;AACvE,SAAS,uBAAuB;AAChC,SAAS,OAAO,YAAY;AAC5B,IAAM,mBAAmB;AAAA,EACvB,UAAU,CAAC;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AAAA,EACD,MAAM,CAAC;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AACH;AACO,SAAS,mBAAmB,YAAY,kBAAkB;AAC/D,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,WAAS,YAAY,QAAQ;AAC3B,UAAM,UAAU,MAAM,KAAK,IAAI,SAAS,iBAAiB,gCAAgC,KAAK,CAAC,CAAC;AAChG,QAAI,CAAC,QAAQ,QAAQ;AACnB;AAAA,IACF;AACA,QAAI,aAAa,QAAQ,CAAC;AAE1B,UAAM,iBAAiB,IAAI,SAAS,eAAe,eAAe,QAAQ,gCAAgC;AAC1G,UAAM,gBAAgB,iBAAiB,QAAQ,QAAQ,cAAc,IAAI;AACzE,QAAI,kBAAkB,IAAI;AACxB,UAAI,YAAY,gBAAgB;AAChC,kBAAY,cAAc,KAAK,QAAQ,SAAS,IAAI;AACpD,kBAAY,cAAc,QAAQ,SAAS,IAAI;AAC/C,mBAAa,QAAQ,SAAS;AAAA,IAChC;AACA,eAAW,MAAM;AACjB,yBAAqB,IAAI;AAAA,EAC3B;AACA,QAAM,WAAW,aAAa,aAAW;AACvC,aAAS,UAAU;AACjB,2BAAqB,KAAK;AAAA,IAC5B;AACA,YAAQ,iBAAiB,SAAS,OAAO;AACzC,WAAO,MAAM;AACX,cAAQ,oBAAoB,SAAS,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AACzB,SAAO;AAAA,IACL,KAAK,aAAa,CAAC,KAAK,QAAQ,CAAC;AAAA,IACjC,WAAW,oBAAoB,wBAAwB;AAAA,IACvD,UAAU,OAAO;AACf,UAAI,UAAU,SAAS,KAAK,CAAC;AAAA,QAC3B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,EAAE;AAAA,MAChB,WAAW,UAAU,KAAK,KAAK,CAAC;AAAA,QAC9B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,CAAC;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AA4BA,IAAO,2BAAQ,2BAA2B,eAAa,SAAS,gBAAgB;AAAA,EAC9E;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG,mBAAmB,SAAS;AAAA,IAC/B,UAAuB,qBAAK,WAAW;AAAA,MACrC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,iBAAiB;",
+  "sourcesContent": ["import { useState, useRef } from '@wordpress/element';\nimport { createHigherOrderComponent, useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultShortcuts = {\n  previous: [{\n    modifier: 'ctrlShift',\n    character: '`'\n  }, {\n    modifier: 'ctrlShift',\n    character: '~'\n  }, {\n    modifier: 'access',\n    character: 'p'\n  }],\n  next: [{\n    modifier: 'ctrl',\n    character: '`'\n  }, {\n    modifier: 'access',\n    character: 'n'\n  }]\n};\nexport function useNavigateRegions(shortcuts = defaultShortcuts) {\n  const ref = useRef(null);\n  const [isFocusingRegions, setIsFocusingRegions] = useState(false);\n  function focusRegion(offset) {\n    const regions = Array.from(ref.current?.querySelectorAll('[role=\"region\"][tabindex=\"-1\"]') ?? []);\n    if (!regions.length) {\n      return;\n    }\n    let nextRegion = regions[0];\n    // Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.\n    const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role=\"region\"][tabindex=\"-1\"]');\n    const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;\n    if (selectedIndex !== -1) {\n      let nextIndex = selectedIndex + offset;\n      nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;\n      nextIndex = nextIndex === regions.length ? 0 : nextIndex;\n      nextRegion = regions[nextIndex];\n    }\n    nextRegion.focus();\n    setIsFocusingRegions(true);\n  }\n  const clickRef = useRefEffect(element => {\n    function onClick() {\n      setIsFocusingRegions(false);\n    }\n    element.addEventListener('click', onClick);\n    return () => {\n      element.removeEventListener('click', onClick);\n    };\n  }, [setIsFocusingRegions]);\n  return {\n    ref: useMergeRefs([ref, clickRef]),\n    className: isFocusingRegions ? 'is-focusing-regions' : '',\n    onKeyDown(event) {\n      if (shortcuts.previous.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(-1);\n      } else if (shortcuts.next.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(1);\n      }\n    }\n  };\n}\n\n/**\n * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding keyboard navigation to switch between the different DOM elements marked as \"regions\" (role=\"region\").\n * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,\n * these elements must be properly labelled to briefly describe the purpose of the content in the region.\n * For more details, see \"Landmark Roles\" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)\n * and \"Landmark Regions\" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).\n *\n * ```jsx\n * import { navigateRegions } from '@wordpress/components';\n *\n * const MyComponentWithNavigateRegions = navigateRegions( () => (\n * \t<div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Header\">\n * \t\t\tHeader\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Content\">\n * \t\t\tContent\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Sidebar\">\n * \t\t\tSidebar\n * \t\t</div>\n * \t</div>\n * ) );\n * ```\n */\nexport default createHigherOrderComponent(Component => function NavigateRegions({\n  shortcuts,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...useNavigateRegions(shortcuts),\n    children: /*#__PURE__*/_jsx(Component, {\n      ...props\n    })\n  });\n}, 'navigateRegions');"],
+  "mappings": ";AAAA,SAAS,UAAU,cAAc;AACjC,SAAS,4BAA4B,cAAc,oBAAoB;AACvE,SAAS,uBAAuB;AAChC,SAAS,OAAO,YAAY;AAC5B,IAAM,mBAAmB;AAAA,EACvB,UAAU,CAAC;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AAAA,EACD,MAAM,CAAC;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AACH;AACO,SAAS,mBAAmB,YAAY,kBAAkB;AAC/D,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,WAAS,YAAY,QAAQ;AAC3B,UAAM,UAAU,MAAM,KAAK,IAAI,SAAS,iBAAiB,gCAAgC,KAAK,CAAC,CAAC;AAChG,QAAI,CAAC,QAAQ,QAAQ;AACnB;AAAA,IACF;AACA,QAAI,aAAa,QAAQ,CAAC;AAE1B,UAAM,iBAAiB,IAAI,SAAS,eAAe,eAAe,QAAQ,gCAAgC;AAC1G,UAAM,gBAAgB,iBAAiB,QAAQ,QAAQ,cAAc,IAAI;AACzE,QAAI,kBAAkB,IAAI;AACxB,UAAI,YAAY,gBAAgB;AAChC,kBAAY,cAAc,KAAK,QAAQ,SAAS,IAAI;AACpD,kBAAY,cAAc,QAAQ,SAAS,IAAI;AAC/C,mBAAa,QAAQ,SAAS;AAAA,IAChC;AACA,eAAW,MAAM;AACjB,yBAAqB,IAAI;AAAA,EAC3B;AACA,QAAM,WAAW,aAAa,aAAW;AACvC,aAAS,UAAU;AACjB,2BAAqB,KAAK;AAAA,IAC5B;AACA,YAAQ,iBAAiB,SAAS,OAAO;AACzC,WAAO,MAAM;AACX,cAAQ,oBAAoB,SAAS,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AACzB,SAAO;AAAA,IACL,KAAK,aAAa,CAAC,KAAK,QAAQ,CAAC;AAAA,IACjC,WAAW,oBAAoB,wBAAwB;AAAA,IACvD,UAAU,OAAO;AACf,UAAI,UAAU,SAAS,KAAK,CAAC;AAAA,QAC3B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,EAAE;AAAA,MAChB,WAAW,UAAU,KAAK,KAAK,CAAC;AAAA,QAC9B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gBAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,CAAC;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AA4BA,IAAO,2BAAQ,2BAA2B,eAAa,SAAS,gBAAgB;AAAA,EAC9E;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,qBAAK,OAAO;AAAA,IAC9B,GAAG,mBAAmB,SAAS;AAAA,IAC/B,UAAuB,qBAAK,WAAW;AAAA,MACrC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,iBAAiB;",
   "names": []
 }

package/build-module/higher-order/with-constrained-tabbing/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/with-constrained-tabbing/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent, useConstrainedTabbing } from '@wordpress/compose';\n\n/**\n * `withConstrainedTabbing` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding the ability to constrain keyboard navigation with the Tab key within a component.\n * For accessibility reasons, some UI components need to constrain Tab navigation, for example\n * modal dialogs or similar UI. Use of this component is recommended only in cases where a way to\n * navigate away from the wrapped component is implemented by other means, usually by pressing\n * the Escape key or using a specific UI control, e.g. a \"Close\" button.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst withConstrainedTabbing = createHigherOrderComponent(WrappedComponent => function ComponentWithConstrainedTabbing(props) {\n  const ref = useConstrainedTabbing();\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: ref,\n    tabIndex: -1,\n    children: /*#__PURE__*/_jsx(WrappedComponent, {\n      ...props\n    })\n  });\n}, 'withConstrainedTabbing');\nexport default withConstrainedTabbing;"],
-  "mappings": ";AAGA,SAAS,4BAA4B,6BAA6B;AAUlE,SAAS,OAAO,YAAY;AAC5B,IAAM,yBAAyB,2BAA2B,sBAAoB,SAAS,gCAAgC,OAAO;AAC5H,QAAM,MAAM,sBAAsB;AAClC,SAAoB,qBAAK,OAAO;AAAA,IAC9B;AAAA,IACA,UAAU;AAAA,IACV,UAAuB,qBAAK,kBAAkB;AAAA,MAC5C,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,wBAAwB;AAC3B,IAAO,mCAAQ;",
+  "sourcesContent": ["import { createHigherOrderComponent, useConstrainedTabbing } from '@wordpress/compose';\n\n/**\n * `withConstrainedTabbing` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding the ability to constrain keyboard navigation with the Tab key within a component.\n * For accessibility reasons, some UI components need to constrain Tab navigation, for example\n * modal dialogs or similar UI. Use of this component is recommended only in cases where a way to\n * navigate away from the wrapped component is implemented by other means, usually by pressing\n * the Escape key or using a specific UI control, e.g. a \"Close\" button.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst withConstrainedTabbing = createHigherOrderComponent(WrappedComponent => function ComponentWithConstrainedTabbing(props) {\n  const ref = useConstrainedTabbing();\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: ref,\n    tabIndex: -1,\n    children: /*#__PURE__*/_jsx(WrappedComponent, {\n      ...props\n    })\n  });\n}, 'withConstrainedTabbing');\nexport default withConstrainedTabbing;"],
+  "mappings": ";AAAA,SAAS,4BAA4B,6BAA6B;AAUlE,SAAS,OAAO,YAAY;AAC5B,IAAM,yBAAyB,2BAA2B,sBAAoB,SAAS,gCAAgC,OAAO;AAC5H,QAAM,MAAM,sBAAsB;AAClC,SAAoB,qBAAK,OAAO;AAAA,IAC9B;AAAA,IACA,UAAU;AAAA,IACV,UAAuB,qBAAK,kBAAkB;AAAA,MAC5C,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,wBAAwB;AAC3B,IAAO,mCAAQ;",
   "names": []
 }