@wordpress/components 38.0.0 → 40.0.0

package/build/border-control/border-control-dropdown/hook.cjs

@@ -33,11 +33,95 @@ __export(hook_exports, {
   useBorderControlDropdown: () => useBorderControlDropdown
 });
 module.exports = __toCommonJS(hook_exports);
-var import_element = require("@wordpress/element");
-var styles = __toESM(require("../styles.cjs"));
+var import_clsx = __toESM(require("clsx"));
 var import_utils = require("../../unit-control/utils.cjs");
 var import_context = require("../../context/index.cjs");
-var import_use_cx = require("../../utils/hooks/use-cx.cjs");
+var import_utils2 = require("../../utils/index.cjs");
+
+// 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/border-control/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("749bb52757", ".a8578c10ef7219f5__border-control{border:0;box-sizing:border-box;margin:0;padding:0}.a8578c10ef7219f5__border-control *,.a8578c10ef7219f5__border-control :after,.a8578c10ef7219f5__border-control :before{box-sizing:inherit}._89d98624def50ba2__inner-wrapper{height:40px}._89d98624def50ba2__inner-wrapper .components-unit-control{flex:1 1 40%}._89d98624def50ba2__inner-wrapper._89d98624def50ba2__inner-wrapper .components-unit-control__select.components-unit-control__select{min-height:0}._43dbe0f5c56003a8__inner-wrapper-has-width .components-unit-control{flex:0 0 auto}._25a20fddf2bf261f__dropdown{background:#fff}._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button{align-items:center;aspect-ratio:1;border:1px solid var(--wp-components-color-gray-600,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));border-end-end-radius:0;border-end-start-radius:2px;border-start-end-radius:0;border-start-start-radius:2px;display:flex;justify-content:center;padding:0}._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button:focus,._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button:hover:not(:disabled){border-color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));box-shadow:inset 0 0 0 .5px var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));position:relative;z-index:1}._956b765a9ec7feba__color-indicator-wrapper{border:2px solid transparent;border-radius:9999px;height:24px;padding:2px;width:24px}._956b765a9ec7feba__color-indicator-wrapper>span{background:linear-gradient(-45deg,transparent 48%,rgba(0,0,0,.2) 0,rgba(0,0,0,.2) 52%,transparent 0);height:16px;width:16px}.a0c5666db3f5f599__popover-controls{width:228px}._115e648628de896b__reset-button-wrapper{display:flex;justify-content:flex-end;margin-block-start:12px}.e9089c561edcd13a__slider{flex:1 1 60%;margin-inline-end:12px}");
+}
+var style_module_default = { "border-control": "a8578c10ef7219f5__border-control", "inner-wrapper": "_89d98624def50ba2__inner-wrapper", "inner-wrapper-has-width": "_43dbe0f5c56003a8__inner-wrapper-has-width", "dropdown": "_25a20fddf2bf261f__dropdown", "color-indicator-wrapper": "_956b765a9ec7feba__color-indicator-wrapper", "popover-controls": "a0c5666db3f5f599__popover-controls", "reset-button-wrapper": "_115e648628de896b__reset-button-wrapper", "slider": "e9089c561edcd13a__slider" };
+
+// packages/components/src/border-control/border-control-dropdown/hook.ts
 function useBorderControlDropdown(props) {
   const {
     border,
@@ -76,25 +160,11 @@ function useBorderControlDropdown(props) {
       style: void 0
     });
   };
-  const cx = (0, import_use_cx.useCx)();
-  const classes = (0, import_element.useMemo)(() => {
-    return cx(styles.borderControlDropdown, className);
-  }, [className, cx]);
-  const indicatorClassName = (0, import_element.useMemo)(() => {
-    return cx(styles.borderColorIndicator);
-  }, [cx]);
-  const indicatorWrapperClassName = (0, import_element.useMemo)(() => {
-    return cx(styles.colorIndicatorWrapper(border));
-  }, [border, cx]);
-  const popoverControlsClassName = (0, import_element.useMemo)(() => {
-    return cx(styles.borderControlPopoverControls);
-  }, [cx]);
-  const popoverContentClassName = (0, import_element.useMemo)(() => {
-    return cx(styles.borderControlPopoverContent);
-  }, [cx]);
-  const resetButtonWrapperClassName = (0, import_element.useMemo)(() => {
-    return cx(styles.resetButtonWrapper);
-  }, [cx]);
+  const classes = (0, import_clsx.default)(style_module_default.dropdown, className);
+  const {
+    color: indicatorColor,
+    style: indicatorStyle
+  } = border || {};
   return {
     ...otherProps,
     border,
@@ -102,14 +172,20 @@ function useBorderControlDropdown(props) {
     colors,
     enableAlpha,
     enableStyle,
-    indicatorClassName,
-    indicatorWrapperClassName,
+    indicatorWrapperClassName: style_module_default["color-indicator-wrapper"],
+    // Applied inline so CSS-wide values (e.g. `inherit`) and the `||` color
+    // fallback pass straight through to `border-style`/`border-color`. Style
+    // `none` previews as `solid`; a style without a color falls back to
+    // gray-300.
+    indicatorWrapperStyle: indicatorStyle ? {
+      borderStyle: indicatorStyle === "none" ? "solid" : indicatorStyle,
+      borderColor: indicatorColor || (indicatorStyle !== "none" ? import_utils2.COLORS.gray[300] : void 0)
+    } : void 0,
     onColorChange,
     onStyleChange,
     onReset,
-    popoverContentClassName,
-    popoverControlsClassName,
-    resetButtonWrapperClassName,
+    popoverControlsClassName: style_module_default["popover-controls"],
+    resetButtonWrapperClassName: style_module_default["reset-button-wrapper"],
     __experimentalIsRenderedInSidebar
   };
 }

package/build/border-control/border-control-dropdown/hook.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/border-control/border-control-dropdown/hook.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nexport function useBorderControlDropdown(props) {\n  const {\n    border,\n    className,\n    colors = [],\n    enableAlpha = false,\n    enableStyle = true,\n    onChange,\n    previousStyleSelection,\n    __experimentalIsRenderedInSidebar = false,\n    ...otherProps\n  } = useContextSystem(props, 'BorderControlDropdown');\n  const [widthValue] = parseQuantityAndUnitFromRawValue(border?.width);\n  const hasZeroWidth = widthValue === 0;\n  const onColorChange = color => {\n    const style = border?.style === 'none' ? previousStyleSelection : border?.style;\n    const width = hasZeroWidth && !!color ? '1px' : border?.width;\n    onChange({\n      color,\n      style,\n      width\n    });\n  };\n  const onStyleChange = style => {\n    const width = hasZeroWidth && !!style ? '1px' : border?.width;\n    onChange({\n      ...border,\n      style,\n      width\n    });\n  };\n  const onReset = () => {\n    onChange({\n      ...border,\n      color: undefined,\n      style: undefined\n    });\n  };\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderControlDropdown, className);\n  }, [className, cx]);\n  const indicatorClassName = useMemo(() => {\n    return cx(styles.borderColorIndicator);\n  }, [cx]);\n  const indicatorWrapperClassName = useMemo(() => {\n    return cx(styles.colorIndicatorWrapper(border));\n  }, [border, cx]);\n  const popoverControlsClassName = useMemo(() => {\n    return cx(styles.borderControlPopoverControls);\n  }, [cx]);\n  const popoverContentClassName = useMemo(() => {\n    return cx(styles.borderControlPopoverContent);\n  }, [cx]);\n  const resetButtonWrapperClassName = useMemo(() => {\n    return cx(styles.resetButtonWrapper);\n  }, [cx]);\n  return {\n    ...otherProps,\n    border,\n    className: classes,\n    colors,\n    enableAlpha,\n    enableStyle,\n    indicatorClassName,\n    indicatorWrapperClassName,\n    onColorChange,\n    onStyleChange,\n    onReset,\n    popoverContentClassName,\n    popoverControlsClassName,\n    resetButtonWrapperClassName,\n    __experimentalIsRenderedInSidebar\n  };\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AAKxB,aAAwB;AACxB,mBAAiD;AACjD,qBAAiC;AACjC,oBAAsB;AACf,SAAS,yBAAyB,OAAO;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS,CAAC;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,oCAAoC;AAAA,IACpC,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,uBAAuB;AACnD,QAAM,CAAC,UAAU,QAAI,+CAAiC,QAAQ,KAAK;AACnE,QAAM,eAAe,eAAe;AACpC,QAAM,gBAAgB,WAAS;AAC7B,UAAM,QAAQ,QAAQ,UAAU,SAAS,yBAAyB,QAAQ;AAC1E,UAAM,QAAQ,gBAAgB,CAAC,CAAC,QAAQ,QAAQ,QAAQ;AACxD,aAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACA,QAAM,gBAAgB,WAAS;AAC7B,UAAM,QAAQ,gBAAgB,CAAC,CAAC,QAAQ,QAAQ,QAAQ;AACxD,aAAS;AAAA,MACP,GAAG;AAAA,MACH;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACA,QAAM,UAAU,MAAM;AACpB,aAAS;AAAA,MACP,GAAG;AAAA,MACH,OAAO;AAAA,MACP,OAAO;AAAA,IACT,CAAC;AAAA,EACH;AAGA,QAAM,SAAK,qBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,WAAO,GAAU,8BAAuB,SAAS;AAAA,EACnD,GAAG,CAAC,WAAW,EAAE,CAAC;AAClB,QAAM,yBAAqB,wBAAQ,MAAM;AACvC,WAAO,GAAU,2BAAoB;AAAA,EACvC,GAAG,CAAC,EAAE,CAAC;AACP,QAAM,gCAA4B,wBAAQ,MAAM;AAC9C,WAAO,GAAU,6BAAsB,MAAM,CAAC;AAAA,EAChD,GAAG,CAAC,QAAQ,EAAE,CAAC;AACf,QAAM,+BAA2B,wBAAQ,MAAM;AAC7C,WAAO,GAAU,mCAA4B;AAAA,EAC/C,GAAG,CAAC,EAAE,CAAC;AACP,QAAM,8BAA0B,wBAAQ,MAAM;AAC5C,WAAO,GAAU,kCAA2B;AAAA,EAC9C,GAAG,CAAC,EAAE,CAAC;AACP,QAAM,kCAA8B,wBAAQ,MAAM;AAChD,WAAO,GAAU,yBAAkB;AAAA,EACrC,GAAG,CAAC,EAAE,CAAC;AACP,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
-  "names": []
+  "sources": ["../../../src/border-control/border-control-dropdown/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/border-control/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem } from '../../context';\nimport { COLORS } from '../../utils';\nimport styles from '../style.module.scss';\nexport function useBorderControlDropdown(props) {\n  const {\n    border,\n    className,\n    colors = [],\n    enableAlpha = false,\n    enableStyle = true,\n    onChange,\n    previousStyleSelection,\n    __experimentalIsRenderedInSidebar = false,\n    ...otherProps\n  } = useContextSystem(props, 'BorderControlDropdown');\n  const [widthValue] = parseQuantityAndUnitFromRawValue(border?.width);\n  const hasZeroWidth = widthValue === 0;\n  const onColorChange = color => {\n    const style = border?.style === 'none' ? previousStyleSelection : border?.style;\n    const width = hasZeroWidth && !!color ? '1px' : border?.width;\n    onChange({\n      color,\n      style,\n      width\n    });\n  };\n  const onStyleChange = style => {\n    const width = hasZeroWidth && !!style ? '1px' : border?.width;\n    onChange({\n      ...border,\n      style,\n      width\n    });\n  };\n  const onReset = () => {\n    onChange({\n      ...border,\n      color: undefined,\n      style: undefined\n    });\n  };\n  const classes = clsx(styles.dropdown, className);\n  const {\n    color: indicatorColor,\n    style: indicatorStyle\n  } = border || {};\n  return {\n    ...otherProps,\n    border,\n    className: classes,\n    colors,\n    enableAlpha,\n    enableStyle,\n    indicatorWrapperClassName: styles['color-indicator-wrapper'],\n    // Applied inline so CSS-wide values (e.g. `inherit`) and the `||` color\n    // fallback pass straight through to `border-style`/`border-color`. Style\n    // `none` previews as `solid`; a style without a color falls back to\n    // gray-300.\n    indicatorWrapperStyle: indicatorStyle ? {\n      borderStyle: indicatorStyle === 'none' ? 'solid' : indicatorStyle,\n      borderColor: indicatorColor || (indicatorStyle !== 'none' ? COLORS.gray[300] : undefined)\n    } : undefined,\n    onColorChange,\n    onStyleChange,\n    onReset,\n    popoverControlsClassName: styles['popover-controls'],\n    resetButtonWrapperClassName: styles['reset-button-wrapper'],\n    __experimentalIsRenderedInSidebar\n  };\n}", "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(\"749bb52757\", \".a8578c10ef7219f5__border-control{border:0;box-sizing:border-box;margin:0;padding:0}.a8578c10ef7219f5__border-control *,.a8578c10ef7219f5__border-control :after,.a8578c10ef7219f5__border-control :before{box-sizing:inherit}._89d98624def50ba2__inner-wrapper{height:40px}._89d98624def50ba2__inner-wrapper .components-unit-control{flex:1 1 40%}._89d98624def50ba2__inner-wrapper._89d98624def50ba2__inner-wrapper .components-unit-control__select.components-unit-control__select{min-height:0}._43dbe0f5c56003a8__inner-wrapper-has-width .components-unit-control{flex:0 0 auto}._25a20fddf2bf261f__dropdown{background:#fff}._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button{align-items:center;aspect-ratio:1;border:1px solid var(--wp-components-color-gray-600,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));border-end-end-radius:0;border-end-start-radius:2px;border-start-end-radius:0;border-start-start-radius:2px;display:flex;justify-content:center;padding:0}._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button:focus,._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button:hover:not(:disabled){border-color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));box-shadow:inset 0 0 0 .5px var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));position:relative;z-index:1}._956b765a9ec7feba__color-indicator-wrapper{border:2px solid transparent;border-radius:9999px;height:24px;padding:2px;width:24px}._956b765a9ec7feba__color-indicator-wrapper>span{background:linear-gradient(-45deg,transparent 48%,rgba(0,0,0,.2) 0,rgba(0,0,0,.2) 52%,transparent 0);height:16px;width:16px}.a0c5666db3f5f599__popover-controls{width:228px}._115e648628de896b__reset-button-wrapper{display:flex;justify-content:flex-end;margin-block-start:12px}.e9089c561edcd13a__slider{flex:1 1 60%;margin-inline-end:12px}\");\n}\nexport default {\"border-control\":\"a8578c10ef7219f5__border-control\",\"inner-wrapper\":\"_89d98624def50ba2__inner-wrapper\",\"inner-wrapper-has-width\":\"_43dbe0f5c56003a8__inner-wrapper-has-width\",\"dropdown\":\"_25a20fddf2bf261f__dropdown\",\"color-indicator-wrapper\":\"_956b765a9ec7feba__color-indicator-wrapper\",\"popover-controls\":\"a0c5666db3f5f599__popover-controls\",\"reset-button-wrapper\":\"_115e648628de896b__reset-button-wrapper\",\"slider\":\"e9089c561edcd13a__slider\"};\n"],
+  "mappings": "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",
+  "names": ["import_utils", "clsx"]
 }

package/build/border-control/border-control-style-picker/component.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-control/border-control-style-picker/component.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect } from '../../context';\nimport { ToggleGroupControl, ToggleGroupControlOptionIcon } from '../../toggle-group-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst BORDER_STYLES = [{\n  label: __('Solid'),\n  icon: lineSolid,\n  value: 'solid'\n}, {\n  label: __('Dashed'),\n  icon: lineDashed,\n  value: 'dashed'\n}, {\n  label: __('Dotted'),\n  icon: lineDotted,\n  value: 'dotted'\n}];\nfunction UnconnectedBorderControlStylePicker({\n  onChange,\n  ...restProps\n}, forwardedRef) {\n  return /*#__PURE__*/_jsx(ToggleGroupControl, {\n    ref: forwardedRef,\n    isDeselectable: true,\n    onChange: value => {\n      onChange?.(value);\n    },\n    ...restProps,\n    children: BORDER_STYLES.map(borderStyle => /*#__PURE__*/_jsx(ToggleGroupControlOptionIcon, {\n      value: borderStyle.value,\n      icon: borderStyle.icon,\n      label: borderStyle.label\n    }, borderStyle.value))\n  });\n}\nconst BorderControlStylePicker = contextConnect(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker');\nexport default BorderControlStylePicker;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAkD;AAClD,kBAAmB;AAKnB,qBAA+B;AAC/B,kCAAiE;AACjE,yBAA4B;AAC5B,IAAM,gBAAgB,CAAC;AAAA,EACrB,WAAO,gBAAG,OAAO;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AACT,GAAG;AAAA,EACD,WAAO,gBAAG,QAAQ;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AACT,GAAG;AAAA,EACD,WAAO,gBAAG,QAAQ;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AACD,SAAS,oCAAoC;AAAA,EAC3C;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,SAAoB,uCAAAA,KAAK,gDAAoB;AAAA,IAC3C,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,UAAU,WAAS;AACjB,iBAAW,KAAK;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,IACH,UAAU,cAAc,IAAI,iBAA4B,uCAAAA,KAAK,0DAA8B;AAAA,MACzF,OAAO,YAAY;AAAA,MACnB,MAAM,YAAY;AAAA,MAClB,OAAO,YAAY;AAAA,IACrB,GAAG,YAAY,KAAK,CAAC;AAAA,EACvB,CAAC;AACH;AACA,IAAM,+BAA2B,+BAAe,qCAAqC,0BAA0B;AAC/G,IAAO,oBAAQ;",
+  "sourcesContent": ["import { lineDashed, lineDotted, lineSolid } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { contextConnect } from '../../context';\nimport { ToggleGroupControl, ToggleGroupControlOptionIcon } from '../../toggle-group-control';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst BORDER_STYLES = [{\n  label: __('Solid'),\n  icon: lineSolid,\n  value: 'solid'\n}, {\n  label: __('Dashed'),\n  icon: lineDashed,\n  value: 'dashed'\n}, {\n  label: __('Dotted'),\n  icon: lineDotted,\n  value: 'dotted'\n}];\nfunction UnconnectedBorderControlStylePicker({\n  onChange,\n  ...restProps\n}, forwardedRef) {\n  return /*#__PURE__*/_jsx(ToggleGroupControl, {\n    ref: forwardedRef,\n    isDeselectable: true,\n    onChange: value => {\n      onChange?.(value);\n    },\n    ...restProps,\n    children: BORDER_STYLES.map(borderStyle => /*#__PURE__*/_jsx(ToggleGroupControlOptionIcon, {\n      value: borderStyle.value,\n      icon: borderStyle.icon,\n      label: borderStyle.label\n    }, borderStyle.value))\n  });\n}\nconst BorderControlStylePicker = contextConnect(UnconnectedBorderControlStylePicker, 'BorderControlStylePicker');\nexport default BorderControlStylePicker;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkD;AAClD,kBAAmB;AACnB,qBAA+B;AAC/B,kCAAiE;AACjE,yBAA4B;AAC5B,IAAM,gBAAgB,CAAC;AAAA,EACrB,WAAO,gBAAG,OAAO;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AACT,GAAG;AAAA,EACD,WAAO,gBAAG,QAAQ;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AACT,GAAG;AAAA,EACD,WAAO,gBAAG,QAAQ;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AACD,SAAS,oCAAoC;AAAA,EAC3C;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,SAAoB,uCAAAA,KAAK,gDAAoB;AAAA,IAC3C,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,UAAU,WAAS;AACjB,iBAAW,KAAK;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,IACH,UAAU,cAAc,IAAI,iBAA4B,uCAAAA,KAAK,0DAA8B;AAAA,MACzF,OAAO,YAAY;AAAA,MACnB,MAAM,YAAY;AAAA,MAClB,OAAO,YAAY;AAAA,IACrB,GAAG,YAAY,KAAK,CAAC;AAAA,EACvB,CAAC;AACH;AACA,IAAM,+BAA2B,+BAAe,qCAAqC,0BAA0B;AAC/G,IAAO,oBAAQ;",
   "names": ["_jsx"]
 }

package/build/box-control/box-input-control.cjs

@@ -33,6 +33,7 @@ __export(box_input_control_exports, {
   default: () => BoxInputControl
 });
 module.exports = __toCommonJS(box_input_control_exports);
+var import_clsx = __toESM(require("clsx"));
 var import_compose = require("@wordpress/compose");
 var import_i18n = require("@wordpress/i18n");
 var import_element = require("@wordpress/element");
@@ -40,8 +41,96 @@ var import_icons = require("@wordpress/icons");
 var import_tooltip = __toESM(require("../tooltip/index.cjs"));
 var import_utils = require("../unit-control/utils.cjs");
 var import_utils2 = require("./utils.cjs");
-var import_box_control_styles = require("./styles/box-control-styles.cjs");
+var import_icon = __toESM(require("./icon.cjs"));
 var import_button = __toESM(require("../button/index.cjs"));
+var import_h_stack = require("../h-stack/index.cjs");
+var import_range_control = __toESM(require("../range-control/index.cjs"));
+var import_unit_control = __toESM(require("../unit-control/index.cjs"));
+
+// 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/box-control/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("541c332c55", ".d5a55650545c8e59__unit-control{max-width:90px}.ea5687e40d8b3401__input-wrapper{grid-column:1/span 3}._33fca83ebb9a56db__reset-button{grid-area:1/2;justify-self:end}._80f02f0884ee052b__linked-button-wrapper{grid-area:1/3;justify-self:end}._432c155702d177a9__icon{flex:0 0 auto}._4c5932d5023e1609__range-control{margin-inline-end:8px;width:100%}");
+}
+var style_module_default = { "unit-control": "d5a55650545c8e59__unit-control", "input-wrapper": "ea5687e40d8b3401__input-wrapper", "reset-button": "_33fca83ebb9a56db__reset-button", "linked-button-wrapper": "_80f02f0884ee052b__linked-button-wrapper", "icon": "_432c155702d177a9__icon", "range-control": "_4c5932d5023e1609__range-control" };
+
+// packages/components/src/box-control/box-input-control.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var noop = () => {
 };
@@ -70,10 +159,10 @@ function getSidesToModify(side, sides, isAlt) {
         modifiedSides.push("top");
         break;
       case "left":
-        modifiedSides.push("left");
+        modifiedSides.push("right");
         break;
       case "right":
-        modifiedSides.push("right");
+        modifiedSides.push("left");
         break;
     }
   }
@@ -166,19 +255,21 @@ function BoxInputControl({
     label: "",
     tooltip: preset.name ?? preset.slug
   }))] : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_box_control_styles.InputWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_h_stack.HStack, {
+    className: style_module_default["input-wrapper"],
     expanded: true,
-    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_box_control_styles.FlexedBoxControlIcon, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.default, {
+      className: style_module_default.icon,
       side,
       sides
     }), showCustomValueControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.default, {
         placement: "top-end",
         text: import_utils2.LABELS[side],
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_box_control_styles.StyledUnitControl, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_unit_control.default, {
           ...props,
           min,
-          className: "component-box-control__unit-control",
+          className: (0, import_clsx.default)(style_module_default["unit-control"], "component-box-control__unit-control"),
           id: inputId,
           isPressEnterToChange: true,
           disableUnits: isMixed || isMixedUnit,
@@ -190,7 +281,8 @@ function BoxInputControl({
           placeholder: mixedPlaceholder ?? placeholderProp,
           hideLabelFromVision: true
         })
-      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_box_control_styles.FlexedRangeControl, {
+      }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_range_control.default, {
+        className: style_module_default["range-control"],
         "aria-controls": inputId,
         label: import_utils2.LABELS[side],
         hideLabelFromVision: true,
@@ -203,8 +295,8 @@ function BoxInputControl({
         value: parsedQuantity ?? 0,
         withInputField: false
       })]
-    }), hasPresets && !showCustomValueControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_box_control_styles.FlexedRangeControl, {
-      className: "spacing-sizes-control__range-control",
+    }), hasPresets && !showCustomValueControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_range_control.default, {
+      className: (0, import_clsx.default)(style_module_default["range-control"], "spacing-sizes-control__range-control"),
       value: presetIndex !== void 0 ? presetIndex + 1 : 0,
       onChange: (newIndex) => {
         const newValue = newIndex === 0 || newIndex === void 0 ? void 0 : (0, import_utils2.getPresetValueFromIndex)(newIndex - 1, presetKey, presets);

package/build/box-control/box-input-control.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/box-control/box-input-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';\nimport { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';\nimport Button from '../button';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction getSidesToModify(side, sides, isAlt) {\n  const allowedSides = getAllowedSides(sides);\n  let modifiedSides = [];\n  switch (side) {\n    case 'all':\n      modifiedSides = ['top', 'bottom', 'left', 'right'];\n      break;\n    case 'horizontal':\n      modifiedSides = ['left', 'right'];\n      break;\n    case 'vertical':\n      modifiedSides = ['top', 'bottom'];\n      break;\n    default:\n      modifiedSides = [side];\n  }\n  if (isAlt) {\n    switch (side) {\n      case 'top':\n        modifiedSides.push('bottom');\n        break;\n      case 'bottom':\n        modifiedSides.push('top');\n        break;\n      case 'left':\n        modifiedSides.push('left');\n        break;\n      case 'right':\n        modifiedSides.push('right');\n        break;\n    }\n  }\n  return modifiedSides.filter(s => allowedSides.has(s));\n}\nexport default function BoxInputControl({\n  onChange = noop,\n  onFocus = noop,\n  values,\n  selectedUnits,\n  setSelectedUnits,\n  sides,\n  side,\n  min = 0,\n  presets,\n  presetKey,\n  placeholder: placeholderProp,\n  ...props\n}) {\n  const defaultValuesToModify = getSidesToModify(side, sides);\n  const handleOnFocus = event => {\n    onFocus(event, {\n      side\n    });\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n  };\n  const handleRawOnValueChange = next => {\n    const nextValues = {\n      ...values\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      nextValues[modifiedSide] = next;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnValueChange = (next, extra) => {\n    const nextValues = {\n      ...values\n    };\n    const isNumeric = next !== undefined && !isNaN(parseFloat(next));\n    const nextValue = isNumeric ? next : undefined;\n    const modifiedSides = getSidesToModify(side, sides,\n    /**\n     * Supports changing pair sides. For example, holding the ALT key\n     * when changing the TOP will also update BOTTOM.\n     */\n    // @ts-expect-error - TODO: event.altKey is only present when the change event was\n    // triggered by a keyboard event. Should this feature be implemented differently so\n    // it also works with drag events?\n    !!extra?.event.altKey);\n    modifiedSides.forEach(modifiedSide => {\n      nextValues[modifiedSide] = nextValue;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnUnitChange = next => {\n    const newUnits = {\n      ...selectedUnits\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      newUnits[modifiedSide] = next;\n    });\n    setSelectedUnits(newUnits);\n  };\n  const mergedValue = getMergedValue(values, defaultValuesToModify);\n  const hasValues = isValuesDefined(values);\n  const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify);\n  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue);\n  const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];\n  const generatedId = useInstanceId(BoxInputControl, 'box-control-input');\n  const inputId = [generatedId, side].join('-');\n  const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);\n  const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n  const mixedPlaceholder = isMixed || isMixedUnit ? __('Mixed') : undefined;\n  const hasPresets = presets && presets.length > 0 && presetKey;\n  const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);\n  const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);\n  const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;\n  const marks = hasPresets ? [{\n    value: 0,\n    label: '',\n    tooltip: __('None')\n  }, ...presets.map((preset, index) => ({\n    value: index + 1,\n    label: '',\n    tooltip: preset.name ?? preset.slug\n  }))] : [];\n  return /*#__PURE__*/_jsxs(InputWrapper, {\n    expanded: true,\n    children: [/*#__PURE__*/_jsx(FlexedBoxControlIcon, {\n      side: side,\n      sides: sides\n    }), showCustomValueControl && /*#__PURE__*/_jsxs(_Fragment, {\n      children: [/*#__PURE__*/_jsx(Tooltip, {\n        placement: \"top-end\",\n        text: LABELS[side],\n        children: /*#__PURE__*/_jsx(StyledUnitControl, {\n          ...props,\n          min: min,\n          className: \"component-box-control__unit-control\",\n          id: inputId,\n          isPressEnterToChange: true,\n          disableUnits: isMixed || isMixedUnit,\n          value: usedValue,\n          onChange: handleOnValueChange,\n          onUnitChange: handleOnUnitChange,\n          onFocus: handleOnFocus,\n          label: LABELS[side],\n          placeholder: mixedPlaceholder ?? placeholderProp,\n          hideLabelFromVision: true\n        })\n      }), /*#__PURE__*/_jsx(FlexedRangeControl, {\n        \"aria-controls\": inputId,\n        label: LABELS[side],\n        hideLabelFromVision: true,\n        onChange: newValue => {\n          handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);\n        },\n        min: isFinite(min) ? min : 0,\n        max: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.max ?? 10,\n        step: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.step ?? 0.1,\n        value: parsedQuantity ?? 0,\n        withInputField: false\n      })]\n    }), hasPresets && !showCustomValueControl && /*#__PURE__*/_jsx(FlexedRangeControl, {\n      className: \"spacing-sizes-control__range-control\",\n      value: presetIndex !== undefined ? presetIndex + 1 : 0,\n      onChange: newIndex => {\n        const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);\n        handleRawOnValueChange(newValue);\n      },\n      withInputField: false,\n      \"aria-valuenow\": presetIndex !== undefined ? presetIndex + 1 : 0,\n      \"aria-valuetext\": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,\n      renderTooltipContent: index => marks[!index ? 0 : index].tooltip,\n      min: 0,\n      max: marks.length - 1,\n      marks: marks,\n      label: LABELS[side],\n      hideLabelFromVision: true\n    }), hasPresets && /*#__PURE__*/_jsx(Button, {\n      label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),\n      icon: settings,\n      onClick: () => {\n        setShowCustomValueControl(!showCustomValueControl);\n      },\n      isPressed: showCustomValueControl,\n      size: \"small\",\n      iconSize: 24\n    })]\n  }, `box-control-${side}`);\n}"],
-  "mappings": "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",
-  "names": ["import_utils", "_jsxs", "_jsx", "_Fragment", "Tooltip", "Button"]
+  "sources": ["../../src/box-control/box-input-control.tsx", "../../../style-runtime/src/index.ts", "../../src/box-control/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';\nimport BoxControlIcon from './icon';\nimport Button from '../button';\nimport { HStack } from '../h-stack';\nimport RangeControl from '../range-control';\nimport UnitControl from '../unit-control';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction getSidesToModify(side, sides, isAlt) {\n  const allowedSides = getAllowedSides(sides);\n  let modifiedSides = [];\n  switch (side) {\n    case 'all':\n      modifiedSides = ['top', 'bottom', 'left', 'right'];\n      break;\n    case 'horizontal':\n      modifiedSides = ['left', 'right'];\n      break;\n    case 'vertical':\n      modifiedSides = ['top', 'bottom'];\n      break;\n    default:\n      modifiedSides = [side];\n  }\n  if (isAlt) {\n    switch (side) {\n      case 'top':\n        modifiedSides.push('bottom');\n        break;\n      case 'bottom':\n        modifiedSides.push('top');\n        break;\n      case 'left':\n        modifiedSides.push('right');\n        break;\n      case 'right':\n        modifiedSides.push('left');\n        break;\n    }\n  }\n  return modifiedSides.filter(s => allowedSides.has(s));\n}\nexport default function BoxInputControl({\n  onChange = noop,\n  onFocus = noop,\n  values,\n  selectedUnits,\n  setSelectedUnits,\n  sides,\n  side,\n  min = 0,\n  presets,\n  presetKey,\n  placeholder: placeholderProp,\n  ...props\n}) {\n  const defaultValuesToModify = getSidesToModify(side, sides);\n  const handleOnFocus = event => {\n    onFocus(event, {\n      side\n    });\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n  };\n  const handleRawOnValueChange = next => {\n    const nextValues = {\n      ...values\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      nextValues[modifiedSide] = next;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnValueChange = (next, extra) => {\n    const nextValues = {\n      ...values\n    };\n    const isNumeric = next !== undefined && !isNaN(parseFloat(next));\n    const nextValue = isNumeric ? next : undefined;\n    const modifiedSides = getSidesToModify(side, sides,\n    /**\n     * Supports changing pair sides. For example, holding the ALT key\n     * when changing the TOP will also update BOTTOM.\n     */\n    // @ts-expect-error - TODO: event.altKey is only present when the change event was\n    // triggered by a keyboard event. Should this feature be implemented differently so\n    // it also works with drag events?\n    !!extra?.event.altKey);\n    modifiedSides.forEach(modifiedSide => {\n      nextValues[modifiedSide] = nextValue;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnUnitChange = next => {\n    const newUnits = {\n      ...selectedUnits\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      newUnits[modifiedSide] = next;\n    });\n    setSelectedUnits(newUnits);\n  };\n  const mergedValue = getMergedValue(values, defaultValuesToModify);\n  const hasValues = isValuesDefined(values);\n  const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify);\n  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue);\n  const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];\n  const generatedId = useInstanceId(BoxInputControl, 'box-control-input');\n  const inputId = [generatedId, side].join('-');\n  const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);\n  const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n  const mixedPlaceholder = isMixed || isMixedUnit ? __('Mixed') : undefined;\n  const hasPresets = presets && presets.length > 0 && presetKey;\n  const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);\n  const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);\n  const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;\n  const marks = hasPresets ? [{\n    value: 0,\n    label: '',\n    tooltip: __('None')\n  }, ...presets.map((preset, index) => ({\n    value: index + 1,\n    label: '',\n    tooltip: preset.name ?? preset.slug\n  }))] : [];\n  return /*#__PURE__*/_jsxs(HStack, {\n    className: styles['input-wrapper'],\n    expanded: true,\n    children: [/*#__PURE__*/_jsx(BoxControlIcon, {\n      className: styles.icon,\n      side: side,\n      sides: sides\n    }), showCustomValueControl && /*#__PURE__*/_jsxs(_Fragment, {\n      children: [/*#__PURE__*/_jsx(Tooltip, {\n        placement: \"top-end\",\n        text: LABELS[side],\n        children: /*#__PURE__*/_jsx(UnitControl, {\n          ...props,\n          min: min,\n          className: clsx(styles['unit-control'], 'component-box-control__unit-control'),\n          id: inputId,\n          isPressEnterToChange: true,\n          disableUnits: isMixed || isMixedUnit,\n          value: usedValue,\n          onChange: handleOnValueChange,\n          onUnitChange: handleOnUnitChange,\n          onFocus: handleOnFocus,\n          label: LABELS[side],\n          placeholder: mixedPlaceholder ?? placeholderProp,\n          hideLabelFromVision: true\n        })\n      }), /*#__PURE__*/_jsx(RangeControl, {\n        className: styles['range-control'],\n        \"aria-controls\": inputId,\n        label: LABELS[side],\n        hideLabelFromVision: true,\n        onChange: newValue => {\n          handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);\n        },\n        min: isFinite(min) ? min : 0,\n        max: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.max ?? 10,\n        step: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.step ?? 0.1,\n        value: parsedQuantity ?? 0,\n        withInputField: false\n      })]\n    }), hasPresets && !showCustomValueControl && /*#__PURE__*/_jsx(RangeControl, {\n      className: clsx(styles['range-control'], 'spacing-sizes-control__range-control'),\n      value: presetIndex !== undefined ? presetIndex + 1 : 0,\n      onChange: newIndex => {\n        const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);\n        handleRawOnValueChange(newValue);\n      },\n      withInputField: false,\n      \"aria-valuenow\": presetIndex !== undefined ? presetIndex + 1 : 0,\n      \"aria-valuetext\": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,\n      renderTooltipContent: index => marks[!index ? 0 : index].tooltip,\n      min: 0,\n      max: marks.length - 1,\n      marks: marks,\n      label: LABELS[side],\n      hideLabelFromVision: true\n    }), hasPresets && /*#__PURE__*/_jsx(Button, {\n      label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),\n      icon: settings,\n      onClick: () => {\n        setShowCustomValueControl(!showCustomValueControl);\n      },\n      isPressed: showCustomValueControl,\n      size: \"small\",\n      iconSize: 24\n    })]\n  }, `box-control-${side}`);\n}", "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(\"541c332c55\", \".d5a55650545c8e59__unit-control{max-width:90px}.ea5687e40d8b3401__input-wrapper{grid-column:1/span 3}._33fca83ebb9a56db__reset-button{grid-area:1/2;justify-self:end}._80f02f0884ee052b__linked-button-wrapper{grid-area:1/3;justify-self:end}._432c155702d177a9__icon{flex:0 0 auto}._4c5932d5023e1609__range-control{margin-inline-end:8px;width:100%}\");\n}\nexport default {\"unit-control\":\"d5a55650545c8e59__unit-control\",\"input-wrapper\":\"ea5687e40d8b3401__input-wrapper\",\"reset-button\":\"_33fca83ebb9a56db__reset-button\",\"linked-button-wrapper\":\"_80f02f0884ee052b__linked-button-wrapper\",\"icon\":\"_432c155702d177a9__icon\",\"range-control\":\"_4c5932d5023e1609__range-control\"};\n"],
+  "mappings": "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",
+  "names": ["import_utils", "_jsxs", "_jsx", "BoxControlIcon", "_Fragment", "Tooltip", "UnitControl", "clsx", "RangeControl", "Button"]
 }

package/build/box-control/icon.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/box-control/icon.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\n\nimport { Root, Viewbox, TopStroke, RightStroke, BottomStroke, LeftStroke } from './styles/box-control-icon-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst BASE_ICON_SIZE = 24;\nexport default function BoxControlIcon({\n  size = 24,\n  side = 'all',\n  sides,\n  ...props\n}) {\n  const isSideDisabled = value => sides?.length && !sides.includes(value);\n  const hasSide = value => {\n    if (isSideDisabled(value)) {\n      return false;\n    }\n    return side === 'all' || side === value;\n  };\n  const top = hasSide('top') || hasSide('vertical');\n  const right = hasSide('right') || hasSide('horizontal');\n  const bottom = hasSide('bottom') || hasSide('vertical');\n  const left = hasSide('left') || hasSide('horizontal');\n\n  // Simulates SVG Icon scaling.\n  const scale = size / BASE_ICON_SIZE;\n  return /*#__PURE__*/_jsx(Root, {\n    style: {\n      transform: `scale(${scale})`\n    },\n    ...props,\n    children: /*#__PURE__*/_jsxs(Viewbox, {\n      children: [/*#__PURE__*/_jsx(TopStroke, {\n        isFocused: top\n      }), /*#__PURE__*/_jsx(RightStroke, {\n        isFocused: right\n      }), /*#__PURE__*/_jsx(BottomStroke, {\n        isFocused: bottom\n      }), /*#__PURE__*/_jsx(LeftStroke, {\n        isFocused: left\n      })]\n    })\n  });\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,qCAAgF;AAChF,yBAA2C;AAC3C,IAAM,iBAAiB;AACR,SAAR,eAAgC;AAAA,EACrC,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,iBAAiB,WAAS,OAAO,UAAU,CAAC,MAAM,SAAS,KAAK;AACtE,QAAM,UAAU,WAAS;AACvB,QAAI,eAAe,KAAK,GAAG;AACzB,aAAO;AAAA,IACT;AACA,WAAO,SAAS,SAAS,SAAS;AAAA,EACpC;AACA,QAAM,MAAM,QAAQ,KAAK,KAAK,QAAQ,UAAU;AAChD,QAAM,QAAQ,QAAQ,OAAO,KAAK,QAAQ,YAAY;AACtD,QAAM,SAAS,QAAQ,QAAQ,KAAK,QAAQ,UAAU;AACtD,QAAM,OAAO,QAAQ,MAAM,KAAK,QAAQ,YAAY;AAGpD,QAAM,QAAQ,OAAO;AACrB,SAAoB,uCAAAA,KAAK,qCAAM;AAAA,IAC7B,OAAO;AAAA,MACL,WAAW,SAAS,KAAK;AAAA,IAC3B;AAAA,IACA,GAAG;AAAA,IACH,UAAuB,uCAAAC,MAAM,wCAAS;AAAA,MACpC,UAAU,CAAc,uCAAAD,KAAK,0CAAW;AAAA,QACtC,WAAW;AAAA,MACb,CAAC,GAAgB,uCAAAA,KAAK,4CAAa;AAAA,QACjC,WAAW;AAAA,MACb,CAAC,GAAgB,uCAAAA,KAAK,6CAAc;AAAA,QAClC,WAAW;AAAA,MACb,CAAC,GAAgB,uCAAAA,KAAK,2CAAY;AAAA,QAChC,WAAW;AAAA,MACb,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
+  "sourcesContent": ["import { Root, Viewbox, TopStroke, RightStroke, BottomStroke, LeftStroke } from './styles/box-control-icon-styles';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst BASE_ICON_SIZE = 24;\nexport default function BoxControlIcon({\n  size = 24,\n  side = 'all',\n  sides,\n  ...props\n}) {\n  const isSideDisabled = value => sides?.length && !sides.includes(value);\n  const hasSide = value => {\n    if (isSideDisabled(value)) {\n      return false;\n    }\n    return side === 'all' || side === value;\n  };\n  const top = hasSide('top') || hasSide('vertical');\n  const right = hasSide('right') || hasSide('horizontal');\n  const bottom = hasSide('bottom') || hasSide('vertical');\n  const left = hasSide('left') || hasSide('horizontal');\n\n  // Simulates SVG Icon scaling.\n  const scale = size / BASE_ICON_SIZE;\n  return /*#__PURE__*/_jsx(Root, {\n    style: {\n      transform: `scale(${scale})`\n    },\n    ...props,\n    children: /*#__PURE__*/_jsxs(Viewbox, {\n      children: [/*#__PURE__*/_jsx(TopStroke, {\n        isFocused: top\n      }), /*#__PURE__*/_jsx(RightStroke, {\n        isFocused: right\n      }), /*#__PURE__*/_jsx(BottomStroke, {\n        isFocused: bottom\n      }), /*#__PURE__*/_jsx(LeftStroke, {\n        isFocused: left\n      })]\n    })\n  });\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAAgF;AAChF,yBAA2C;AAC3C,IAAM,iBAAiB;AACR,SAAR,eAAgC;AAAA,EACrC,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,iBAAiB,WAAS,OAAO,UAAU,CAAC,MAAM,SAAS,KAAK;AACtE,QAAM,UAAU,WAAS;AACvB,QAAI,eAAe,KAAK,GAAG;AACzB,aAAO;AAAA,IACT;AACA,WAAO,SAAS,SAAS,SAAS;AAAA,EACpC;AACA,QAAM,MAAM,QAAQ,KAAK,KAAK,QAAQ,UAAU;AAChD,QAAM,QAAQ,QAAQ,OAAO,KAAK,QAAQ,YAAY;AACtD,QAAM,SAAS,QAAQ,QAAQ,KAAK,QAAQ,UAAU;AACtD,QAAM,OAAO,QAAQ,MAAM,KAAK,QAAQ,YAAY;AAGpD,QAAM,QAAQ,OAAO;AACrB,SAAoB,uCAAAA,KAAK,qCAAM;AAAA,IAC7B,OAAO;AAAA,MACL,WAAW,SAAS,KAAK;AAAA,IAC3B;AAAA,IACA,GAAG;AAAA,IACH,UAAuB,uCAAAC,MAAM,wCAAS;AAAA,MACpC,UAAU,CAAc,uCAAAD,KAAK,0CAAW;AAAA,QACtC,WAAW;AAAA,MACb,CAAC,GAAgB,uCAAAA,KAAK,4CAAa;AAAA,QACjC,WAAW;AAAA,MACb,CAAC,GAAgB,uCAAAA,KAAK,6CAAc;AAAA,QAClC,WAAW;AAAA,MACb,CAAC,GAAgB,uCAAAA,KAAK,2CAAY;AAAA,QAChC,WAAW;AAAA,MACb,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
   "names": ["_jsx", "_jsxs"]
 }