@wordpress/components 39.0.0 → 40.1.0

package/build-module/border-box-control/border-box-control/hook.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/border-box-control/border-box-control/hook.ts"],
-  "sourcesContent": ["import { useMemo, useState } from '@wordpress/element';\nimport * as styles from '../styles';\nimport { getBorderDiff, getCommonBorder, getSplitBorders, hasMixedBorders, hasSplitBorders, isCompleteBorder, isEmptyBorder } from '../utils';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nexport function useBorderBoxControl(props) {\n  const {\n    className,\n    colors = [],\n    onChange,\n    enableAlpha = false,\n    enableStyle = true,\n    value,\n    __experimentalIsRenderedInSidebar = false,\n    // Deprecated props, no longer used.\n    size: _size,\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControl');\n  const mixedBorders = hasMixedBorders(value);\n  const splitBorders = hasSplitBorders(value);\n  const linkedValue = splitBorders ? getCommonBorder(value) : value;\n  const splitValue = splitBorders ? value : getSplitBorders(value);\n\n  // If no numeric width value is set, the unit select will be disabled.\n  const hasWidthValue = !isNaN(parseFloat(`${linkedValue?.width}`));\n  const [isLinked, setIsLinked] = useState(!mixedBorders);\n  const toggleLinked = () => setIsLinked(!isLinked);\n  const onLinkedChange = newBorder => {\n    if (!newBorder) {\n      return onChange(undefined);\n    }\n\n    // If we have all props defined on the new border apply it.\n    if (!mixedBorders || isCompleteBorder(newBorder)) {\n      return onChange(isEmptyBorder(newBorder) ? undefined : newBorder);\n    }\n\n    // If we had mixed borders we might have had some shared border props\n    // that we need to maintain. For example; we could have mixed borders\n    // with all the same color but different widths. Then from the linked\n    // control we change the color. We should keep the separate  widths.\n    const changes = getBorderDiff(linkedValue, newBorder);\n    const updatedBorders = {\n      top: {\n        ...value?.top,\n        ...changes\n      },\n      right: {\n        ...value?.right,\n        ...changes\n      },\n      bottom: {\n        ...value?.bottom,\n        ...changes\n      },\n      left: {\n        ...value?.left,\n        ...changes\n      }\n    };\n    if (hasMixedBorders(updatedBorders)) {\n      return onChange(updatedBorders);\n    }\n    const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top;\n    onChange(filteredResult);\n  };\n  const onSplitChange = (newBorder, side) => {\n    const updatedBorders = {\n      ...splitValue,\n      [side]: newBorder\n    };\n    if (hasMixedBorders(updatedBorders)) {\n      onChange(updatedBorders);\n    } else {\n      onChange(newBorder);\n    }\n  };\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControl, className);\n  }, [cx, className]);\n  const linkedControlClassName = useMemo(() => {\n    return cx(styles.linkedBorderControl());\n  }, [cx]);\n  const wrapperClassName = useMemo(() => {\n    return cx(styles.wrapper);\n  }, [cx]);\n  return {\n    ...otherProps,\n    className: classes,\n    colors,\n    disableUnits: mixedBorders && !hasWidthValue,\n    enableAlpha,\n    enableStyle,\n    hasMixedBorders: mixedBorders,\n    isLinked,\n    linkedControlClassName,\n    onLinkedChange,\n    onSplitChange,\n    toggleLinked,\n    linkedValue,\n    splitValue,\n    wrapperClassName,\n    __experimentalIsRenderedInSidebar\n  };\n}"],
-  "mappings": ";AAAA,SAAS,SAAS,gBAAgB;AAClC,YAAY,YAAY;AACxB,SAAS,eAAe,iBAAiB,iBAAiB,iBAAiB,iBAAiB,kBAAkB,qBAAqB;AACnI,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACf,SAAS,oBAAoB,OAAO;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,CAAC;AAAA,IACV;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IACA,oCAAoC;AAAA;AAAA,IAEpC,MAAM;AAAA,IACN,uBAAuB;AAAA,IACvB,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,kBAAkB;AAC9C,QAAM,eAAe,gBAAgB,KAAK;AAC1C,QAAM,eAAe,gBAAgB,KAAK;AAC1C,QAAM,cAAc,eAAe,gBAAgB,KAAK,IAAI;AAC5D,QAAM,aAAa,eAAe,QAAQ,gBAAgB,KAAK;AAG/D,QAAM,gBAAgB,CAAC,MAAM,WAAW,GAAG,aAAa,KAAK,EAAE,CAAC;AAChE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC,YAAY;AACtD,QAAM,eAAe,MAAM,YAAY,CAAC,QAAQ;AAChD,QAAM,iBAAiB,eAAa;AAClC,QAAI,CAAC,WAAW;AACd,aAAO,SAAS,MAAS;AAAA,IAC3B;AAGA,QAAI,CAAC,gBAAgB,iBAAiB,SAAS,GAAG;AAChD,aAAO,SAAS,cAAc,SAAS,IAAI,SAAY,SAAS;AAAA,IAClE;AAMA,UAAM,UAAU,cAAc,aAAa,SAAS;AACpD,UAAM,iBAAiB;AAAA,MACrB,KAAK;AAAA,QACH,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,OAAO;AAAA,QACL,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,QACN,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,MAAM;AAAA,QACJ,GAAG,OAAO;AAAA,QACV,GAAG;AAAA,MACL;AAAA,IACF;AACA,QAAI,gBAAgB,cAAc,GAAG;AACnC,aAAO,SAAS,cAAc;AAAA,IAChC;AACA,UAAM,iBAAiB,cAAc,eAAe,GAAG,IAAI,SAAY,eAAe;AACtF,aAAS,cAAc;AAAA,EACzB;AACA,QAAM,gBAAgB,CAAC,WAAW,SAAS;AACzC,UAAM,iBAAiB;AAAA,MACrB,GAAG;AAAA,MACH,CAAC,IAAI,GAAG;AAAA,IACV;AACA,QAAI,gBAAgB,cAAc,GAAG;AACnC,eAAS,cAAc;AAAA,IACzB,OAAO;AACL,eAAS,SAAS;AAAA,IACpB;AAAA,EACF;AACA,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM;AAC5B,WAAO,GAAU,yBAAkB,SAAS;AAAA,EAC9C,GAAG,CAAC,IAAI,SAAS,CAAC;AAClB,QAAM,yBAAyB,QAAQ,MAAM;AAC3C,WAAO,GAAU,2BAAoB,CAAC;AAAA,EACxC,GAAG,CAAC,EAAE,CAAC;AACP,QAAM,mBAAmB,QAAQ,MAAM;AACrC,WAAO,GAAU,cAAO;AAAA,EAC1B,GAAG,CAAC,EAAE,CAAC;AACP,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,IACA,cAAc,gBAAgB,CAAC;AAAA,IAC/B;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sources": ["../../../src/border-box-control/border-box-control/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/border-box-control/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useState } from '@wordpress/element';\nimport styles from '../style.module.scss';\nimport { getBorderDiff, getCommonBorder, getSplitBorders, hasMixedBorders, hasSplitBorders, isCompleteBorder, isEmptyBorder } from '../utils';\nimport { useContextSystem } from '../../context';\nexport function useBorderBoxControl(props) {\n  const {\n    className,\n    colors = [],\n    onChange,\n    enableAlpha = false,\n    enableStyle = true,\n    hideLabelFromVision,\n    label,\n    value,\n    __experimentalIsRenderedInSidebar = false,\n    // Deprecated props, no longer used.\n    size: _size,\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControl');\n\n  // A visible label gives the control a header row to place the linked/\n  // unlinked toggle in, alongside that label. Without one the toggle stays\n  // inside the input wrapper, positioned absolutely.\n  const hasVisibleLabel = !!label && !hideLabelFromVision;\n  const mixedBorders = hasMixedBorders(value);\n  const splitBorders = hasSplitBorders(value);\n  const linkedValue = splitBorders ? getCommonBorder(value) : value;\n  const splitValue = splitBorders ? value : getSplitBorders(value);\n\n  // If no numeric width value is set, the unit select will be disabled.\n  const hasWidthValue = !isNaN(parseFloat(`${linkedValue?.width}`));\n  const [isLinked, setIsLinked] = useState(!mixedBorders);\n  const toggleLinked = () => setIsLinked(!isLinked);\n  const onLinkedChange = newBorder => {\n    if (!newBorder) {\n      return onChange(undefined);\n    }\n\n    // If we have all props defined on the new border apply it.\n    if (!mixedBorders || isCompleteBorder(newBorder)) {\n      return onChange(isEmptyBorder(newBorder) ? undefined : newBorder);\n    }\n\n    // If we had mixed borders we might have had some shared border props\n    // that we need to maintain. For example; we could have mixed borders\n    // with all the same color but different widths. Then from the linked\n    // control we change the color. We should keep the separate  widths.\n    const changes = getBorderDiff(linkedValue, newBorder);\n    const updatedBorders = {\n      top: {\n        ...value?.top,\n        ...changes\n      },\n      right: {\n        ...value?.right,\n        ...changes\n      },\n      bottom: {\n        ...value?.bottom,\n        ...changes\n      },\n      left: {\n        ...value?.left,\n        ...changes\n      }\n    };\n    if (hasMixedBorders(updatedBorders)) {\n      return onChange(updatedBorders);\n    }\n    const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top;\n    onChange(filteredResult);\n  };\n  const onSplitChange = (newBorder, side) => {\n    const updatedBorders = {\n      ...splitValue,\n      [side]: newBorder\n    };\n    if (hasMixedBorders(updatedBorders)) {\n      onChange(updatedBorders);\n    } else {\n      onChange(newBorder);\n    }\n  };\n\n  // The linked control reserves an inline-end gutter for the absolutely\n  // positioned toggle. Once the toggle moves up into the header row that\n  // gutter only shortens the input, so drop it.\n  const linkedControlClassName = clsx(styles['linked-border-control'], {\n    [styles['linked-border-control-full-width']]: hasVisibleLabel\n  });\n  const wrapperClassName = styles.wrapper;\n  const headerClassName = styles.header;\n  return {\n    ...otherProps,\n    className,\n    colors,\n    hasVisibleLabel,\n    headerClassName,\n    hideLabelFromVision,\n    label,\n    disableUnits: mixedBorders && !hasWidthValue,\n    enableAlpha,\n    enableStyle,\n    hasMixedBorders: mixedBorders,\n    isLinked,\n    linkedControlClassName,\n    onLinkedChange,\n    onSplitChange,\n    toggleLinked,\n    linkedValue,\n    splitValue,\n    wrapperClassName,\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(\"2eee37fabd\", \".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._6a6edeeb175d724f__linked-border-control-full-width._6a6edeeb175d724f__linked-border-control-full-width{margin-inline-end:0}.f5104488f80fa50f__header{margin-bottom:4px}.f5104488f80fa50f__header>span{margin-bottom:0}._48f63719b9dc7e1a__wrapper{position:relative}._48f63719b9dc7e1a__wrapper ._902e774d37b6698b__linked-button{inset-inline-end:0;position:absolute;top:8px}._902e774d37b6698b__linked-button{line-height:0}._5978f65e1d08de6c__visualizer{border-bottom:var(--wp-components-border-box-visualizer-bottom);border-inline-end:var(--wp-components-border-box-visualizer-end);border-inline-start:var(--wp-components-border-box-visualizer-start);border-top:var(--wp-components-border-box-visualizer-top);bottom:20px;position:absolute;top:20px;inset-inline:39px}.afa8e78cec6a9f62__split-controls{flex:1;position:relative}.ec002fcdf4036950__centered-border-control{grid-column:span 2;margin:0 auto}.f9ea07d7127ab067__right-border-control{margin-inline-start:auto}\");\n}\nexport default {\"linked-border-control\":\"fa6e6c2331986855__linked-border-control\",\"linked-border-control-full-width\":\"_6a6edeeb175d724f__linked-border-control-full-width\",\"header\":\"f5104488f80fa50f__header\",\"wrapper\":\"_48f63719b9dc7e1a__wrapper\",\"linked-button\":\"_902e774d37b6698b__linked-button\",\"visualizer\":\"_5978f65e1d08de6c__visualizer\",\"split-controls\":\"afa8e78cec6a9f62__split-controls\",\"centered-border-control\":\"ec002fcdf4036950__centered-border-control\",\"right-border-control\":\"f9ea07d7127ab067__right-border-control\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/border-box-control/border-box-control-linked-button/hook.mjs

@@ -1,20 +1,99 @@
 // packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
-import { useMemo } from "@wordpress/element";
-import * as styles from "../styles.mjs";
+import clsx from "clsx";
+
+// 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-box-control/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("2eee37fabd", ".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._6a6edeeb175d724f__linked-border-control-full-width._6a6edeeb175d724f__linked-border-control-full-width{margin-inline-end:0}.f5104488f80fa50f__header{margin-bottom:4px}.f5104488f80fa50f__header>span{margin-bottom:0}._48f63719b9dc7e1a__wrapper{position:relative}._48f63719b9dc7e1a__wrapper ._902e774d37b6698b__linked-button{inset-inline-end:0;position:absolute;top:8px}._902e774d37b6698b__linked-button{line-height:0}._5978f65e1d08de6c__visualizer{border-bottom:var(--wp-components-border-box-visualizer-bottom);border-inline-end:var(--wp-components-border-box-visualizer-end);border-inline-start:var(--wp-components-border-box-visualizer-start);border-top:var(--wp-components-border-box-visualizer-top);bottom:20px;position:absolute;top:20px;inset-inline:39px}.afa8e78cec6a9f62__split-controls{flex:1;position:relative}.ec002fcdf4036950__centered-border-control{grid-column:span 2;margin:0 auto}.f9ea07d7127ab067__right-border-control{margin-inline-start:auto}");
+}
+var style_module_default = { "linked-border-control": "fa6e6c2331986855__linked-border-control", "linked-border-control-full-width": "_6a6edeeb175d724f__linked-border-control-full-width", "header": "f5104488f80fa50f__header", "wrapper": "_48f63719b9dc7e1a__wrapper", "linked-button": "_902e774d37b6698b__linked-button", "visualizer": "_5978f65e1d08de6c__visualizer", "split-controls": "afa8e78cec6a9f62__split-controls", "centered-border-control": "ec002fcdf4036950__centered-border-control", "right-border-control": "f9ea07d7127ab067__right-border-control" };
+
+// packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
 import { useContextSystem } from "../../context/index.mjs";
-import { useCx } from "../../utils/hooks/use-cx.mjs";
 function useBorderBoxControlLinkedButton(props) {
   const {
     className,
     ...otherProps
   } = useContextSystem(props, "BorderBoxControlLinkedButton");
-  const cx = useCx();
-  const classes = useMemo(() => {
-    return cx(styles.borderBoxControlLinkedButton, className);
-  }, [className, cx]);
   return {
     ...otherProps,
-    className: classes
+    className: clsx(style_module_default["linked-button"], className)
   };
 }
 export {

package/build-module/border-box-control/border-box-control-linked-button/hook.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/border-box-control/border-box-control-linked-button/hook.ts"],
-  "sourcesContent": ["import { useMemo } from '@wordpress/element';\nimport * as styles from '../styles';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nexport function useBorderBoxControlLinkedButton(props) {\n  const {\n    className,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlLinkedButton');\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControlLinkedButton, className);\n  }, [className, cx]);\n  return {\n    ...otherProps,\n    className: classes\n  };\n}"],
-  "mappings": ";AAAA,SAAS,eAAe;AACxB,YAAY,YAAY;AACxB,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACf,SAAS,gCAAgC,OAAO;AACrD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,8BAA8B;AAG1D,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM;AAC5B,WAAO,GAAU,qCAA8B,SAAS;AAAA,EAC1D,GAAG,CAAC,WAAW,EAAE,CAAC;AAClB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,EACb;AACF;",
+  "sources": ["../../../src/border-box-control/border-box-control-linked-button/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/border-box-control/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport styles from '../style.module.scss';\nimport { useContextSystem } from '../../context';\nexport function useBorderBoxControlLinkedButton(props) {\n  const {\n    className,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlLinkedButton');\n  return {\n    ...otherProps,\n    className: clsx(styles['linked-button'], className)\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(\"2eee37fabd\", \".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._6a6edeeb175d724f__linked-border-control-full-width._6a6edeeb175d724f__linked-border-control-full-width{margin-inline-end:0}.f5104488f80fa50f__header{margin-bottom:4px}.f5104488f80fa50f__header>span{margin-bottom:0}._48f63719b9dc7e1a__wrapper{position:relative}._48f63719b9dc7e1a__wrapper ._902e774d37b6698b__linked-button{inset-inline-end:0;position:absolute;top:8px}._902e774d37b6698b__linked-button{line-height:0}._5978f65e1d08de6c__visualizer{border-bottom:var(--wp-components-border-box-visualizer-bottom);border-inline-end:var(--wp-components-border-box-visualizer-end);border-inline-start:var(--wp-components-border-box-visualizer-start);border-top:var(--wp-components-border-box-visualizer-top);bottom:20px;position:absolute;top:20px;inset-inline:39px}.afa8e78cec6a9f62__split-controls{flex:1;position:relative}.ec002fcdf4036950__centered-border-control{grid-column:span 2;margin:0 auto}.f9ea07d7127ab067__right-border-control{margin-inline-start:auto}\");\n}\nexport default {\"linked-border-control\":\"fa6e6c2331986855__linked-border-control\",\"linked-border-control-full-width\":\"_6a6edeeb175d724f__linked-border-control-full-width\",\"header\":\"f5104488f80fa50f__header\",\"wrapper\":\"_48f63719b9dc7e1a__wrapper\",\"linked-button\":\"_902e774d37b6698b__linked-button\",\"visualizer\":\"_5978f65e1d08de6c__visualizer\",\"split-controls\":\"afa8e78cec6a9f62__split-controls\",\"centered-border-control\":\"ec002fcdf4036950__centered-border-control\",\"right-border-control\":\"f9ea07d7127ab067__right-border-control\"};\n"],
+  "mappings": ";AAAA,OAAO,UAAU;;;ACAjB,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,kjCAAkjC;AAC/kC;AACA,IAAO,uBAAQ,EAAC,yBAAwB,2CAA0C,oCAAmC,uDAAsD,UAAS,4BAA2B,WAAU,8BAA6B,iBAAgB,oCAAmC,cAAa,iCAAgC,kBAAiB,oCAAmC,2BAA0B,6CAA4C,wBAAuB,yCAAwC;;;AFF/gB,SAAS,wBAAwB;AAC1B,SAAS,gCAAgC,OAAO;AACrD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,8BAA8B;AAC1D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW,KAAK,qBAAO,eAAe,GAAG,SAAS;AAAA,EACpD;AACF;",
   "names": []
 }

package/build-module/border-box-control/border-box-control-split-controls/hook.mjs

@@ -1,8 +1,91 @@
 // packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
-import { useMemo } from "@wordpress/element";
-import * as styles from "../styles.mjs";
+import clsx from "clsx";
+
+// 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-box-control/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("2eee37fabd", ".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._6a6edeeb175d724f__linked-border-control-full-width._6a6edeeb175d724f__linked-border-control-full-width{margin-inline-end:0}.f5104488f80fa50f__header{margin-bottom:4px}.f5104488f80fa50f__header>span{margin-bottom:0}._48f63719b9dc7e1a__wrapper{position:relative}._48f63719b9dc7e1a__wrapper ._902e774d37b6698b__linked-button{inset-inline-end:0;position:absolute;top:8px}._902e774d37b6698b__linked-button{line-height:0}._5978f65e1d08de6c__visualizer{border-bottom:var(--wp-components-border-box-visualizer-bottom);border-inline-end:var(--wp-components-border-box-visualizer-end);border-inline-start:var(--wp-components-border-box-visualizer-start);border-top:var(--wp-components-border-box-visualizer-top);bottom:20px;position:absolute;top:20px;inset-inline:39px}.afa8e78cec6a9f62__split-controls{flex:1;position:relative}.ec002fcdf4036950__centered-border-control{grid-column:span 2;margin:0 auto}.f9ea07d7127ab067__right-border-control{margin-inline-start:auto}");
+}
+var style_module_default = { "linked-border-control": "fa6e6c2331986855__linked-border-control", "linked-border-control-full-width": "_6a6edeeb175d724f__linked-border-control-full-width", "header": "f5104488f80fa50f__header", "wrapper": "_48f63719b9dc7e1a__wrapper", "linked-button": "_902e774d37b6698b__linked-button", "visualizer": "_5978f65e1d08de6c__visualizer", "split-controls": "afa8e78cec6a9f62__split-controls", "centered-border-control": "ec002fcdf4036950__centered-border-control", "right-border-control": "f9ea07d7127ab067__right-border-control" };
+
+// packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
 import { useContextSystem } from "../../context/index.mjs";
-import { useCx } from "../../utils/index.mjs";
 function useBorderBoxControlSplitControls(props) {
   const {
     className,
@@ -12,24 +95,14 @@ function useBorderBoxControlSplitControls(props) {
     __experimentalIsRenderedInSidebar = false,
     ...otherProps
   } = useContextSystem(props, "BorderBoxControlSplitControls");
-  const cx = useCx();
-  const classes = useMemo(() => {
-    return cx(styles.borderBoxControlSplitControls, className);
-  }, [cx, className]);
-  const centeredClassName = useMemo(() => {
-    return cx(styles.centeredBorderControl, className);
-  }, [cx, className]);
-  const rightAlignedClassName = useMemo(() => {
-    return cx(styles.rightBorderControl(), className);
-  }, [cx, className]);
   return {
     ...otherProps,
-    centeredClassName,
-    className: classes,
+    centeredClassName: clsx(style_module_default["centered-border-control"], className),
+    className: clsx(style_module_default["split-controls"], className),
     colors,
     enableAlpha,
     enableStyle,
-    rightAlignedClassName,
+    rightAlignedClassName: clsx(style_module_default["right-border-control"], className),
     __experimentalIsRenderedInSidebar
   };
 }

package/build-module/border-box-control/border-box-control-split-controls/hook.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/border-box-control/border-box-control-split-controls/hook.ts"],
-  "sourcesContent": ["import { useMemo } from '@wordpress/element';\nimport * as styles from '../styles';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/';\nexport function useBorderBoxControlSplitControls(props) {\n  const {\n    className,\n    colors = [],\n    enableAlpha = false,\n    enableStyle = true,\n    __experimentalIsRenderedInSidebar = false,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlSplitControls');\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControlSplitControls, className);\n  }, [cx, className]);\n  const centeredClassName = useMemo(() => {\n    return cx(styles.centeredBorderControl, className);\n  }, [cx, className]);\n  const rightAlignedClassName = useMemo(() => {\n    return cx(styles.rightBorderControl(), className);\n  }, [cx, className]);\n  return {\n    ...otherProps,\n    centeredClassName,\n    className: classes,\n    colors,\n    enableAlpha,\n    enableStyle,\n    rightAlignedClassName,\n    __experimentalIsRenderedInSidebar\n  };\n}"],
-  "mappings": ";AAAA,SAAS,eAAe;AACxB,YAAY,YAAY;AACxB,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACf,SAAS,iCAAiC,OAAO;AACtD,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,CAAC;AAAA,IACV,cAAc;AAAA,IACd,cAAc;AAAA,IACd,oCAAoC;AAAA,IACpC,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,+BAA+B;AAG3D,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM;AAC5B,WAAO,GAAU,sCAA+B,SAAS;AAAA,EAC3D,GAAG,CAAC,IAAI,SAAS,CAAC;AAClB,QAAM,oBAAoB,QAAQ,MAAM;AACtC,WAAO,GAAU,8BAAuB,SAAS;AAAA,EACnD,GAAG,CAAC,IAAI,SAAS,CAAC;AAClB,QAAM,wBAAwB,QAAQ,MAAM;AAC1C,WAAO,GAAU,0BAAmB,GAAG,SAAS;AAAA,EAClD,GAAG,CAAC,IAAI,SAAS,CAAC;AAClB,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sources": ["../../../src/border-box-control/border-box-control-split-controls/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/border-box-control/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport styles from '../style.module.scss';\nimport { useContextSystem } from '../../context';\nexport function useBorderBoxControlSplitControls(props) {\n  const {\n    className,\n    colors = [],\n    enableAlpha = false,\n    enableStyle = true,\n    __experimentalIsRenderedInSidebar = false,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlSplitControls');\n  return {\n    ...otherProps,\n    centeredClassName: clsx(styles['centered-border-control'], className),\n    className: clsx(styles['split-controls'], className),\n    colors,\n    enableAlpha,\n    enableStyle,\n    rightAlignedClassName: clsx(styles['right-border-control'], className),\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(\"2eee37fabd\", \".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._6a6edeeb175d724f__linked-border-control-full-width._6a6edeeb175d724f__linked-border-control-full-width{margin-inline-end:0}.f5104488f80fa50f__header{margin-bottom:4px}.f5104488f80fa50f__header>span{margin-bottom:0}._48f63719b9dc7e1a__wrapper{position:relative}._48f63719b9dc7e1a__wrapper ._902e774d37b6698b__linked-button{inset-inline-end:0;position:absolute;top:8px}._902e774d37b6698b__linked-button{line-height:0}._5978f65e1d08de6c__visualizer{border-bottom:var(--wp-components-border-box-visualizer-bottom);border-inline-end:var(--wp-components-border-box-visualizer-end);border-inline-start:var(--wp-components-border-box-visualizer-start);border-top:var(--wp-components-border-box-visualizer-top);bottom:20px;position:absolute;top:20px;inset-inline:39px}.afa8e78cec6a9f62__split-controls{flex:1;position:relative}.ec002fcdf4036950__centered-border-control{grid-column:span 2;margin:0 auto}.f9ea07d7127ab067__right-border-control{margin-inline-start:auto}\");\n}\nexport default {\"linked-border-control\":\"fa6e6c2331986855__linked-border-control\",\"linked-border-control-full-width\":\"_6a6edeeb175d724f__linked-border-control-full-width\",\"header\":\"f5104488f80fa50f__header\",\"wrapper\":\"_48f63719b9dc7e1a__wrapper\",\"linked-button\":\"_902e774d37b6698b__linked-button\",\"visualizer\":\"_5978f65e1d08de6c__visualizer\",\"split-controls\":\"afa8e78cec6a9f62__split-controls\",\"centered-border-control\":\"ec002fcdf4036950__centered-border-control\",\"right-border-control\":\"f9ea07d7127ab067__right-border-control\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/border-box-control/border-box-control-visualizer/hook.mjs

@@ -1,21 +1,121 @@
 // packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
-import { useMemo } from "@wordpress/element";
-import * as styles from "../styles.mjs";
+import clsx from "clsx";
+
+// 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-box-control/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("2eee37fabd", ".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._6a6edeeb175d724f__linked-border-control-full-width._6a6edeeb175d724f__linked-border-control-full-width{margin-inline-end:0}.f5104488f80fa50f__header{margin-bottom:4px}.f5104488f80fa50f__header>span{margin-bottom:0}._48f63719b9dc7e1a__wrapper{position:relative}._48f63719b9dc7e1a__wrapper ._902e774d37b6698b__linked-button{inset-inline-end:0;position:absolute;top:8px}._902e774d37b6698b__linked-button{line-height:0}._5978f65e1d08de6c__visualizer{border-bottom:var(--wp-components-border-box-visualizer-bottom);border-inline-end:var(--wp-components-border-box-visualizer-end);border-inline-start:var(--wp-components-border-box-visualizer-start);border-top:var(--wp-components-border-box-visualizer-top);bottom:20px;position:absolute;top:20px;inset-inline:39px}.afa8e78cec6a9f62__split-controls{flex:1;position:relative}.ec002fcdf4036950__centered-border-control{grid-column:span 2;margin:0 auto}.f9ea07d7127ab067__right-border-control{margin-inline-start:auto}");
+}
+var style_module_default = { "linked-border-control": "fa6e6c2331986855__linked-border-control", "linked-border-control-full-width": "_6a6edeeb175d724f__linked-border-control-full-width", "header": "f5104488f80fa50f__header", "wrapper": "_48f63719b9dc7e1a__wrapper", "linked-button": "_902e774d37b6698b__linked-button", "visualizer": "_5978f65e1d08de6c__visualizer", "split-controls": "afa8e78cec6a9f62__split-controls", "centered-border-control": "ec002fcdf4036950__centered-border-control", "right-border-control": "f9ea07d7127ab067__right-border-control" };
+
+// packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
+import { COLORS, CONFIG } from "../../utils/index.mjs";
 import { useContextSystem } from "../../context/index.mjs";
-import { useCx } from "../../utils/index.mjs";
+var borderBoxStyleWithFallback = (border) => {
+  const {
+    color = COLORS.gray[200],
+    style = "solid",
+    width = CONFIG.borderWidth
+  } = border || {};
+  const clampedWidth = width !== CONFIG.borderWidth ? `clamp(1px, ${width}, 10px)` : width;
+  const hasVisibleBorder = !!width && width !== "0" || !!color;
+  const borderStyle = hasVisibleBorder ? style || "solid" : style;
+  return `${color} ${borderStyle} ${clampedWidth}`;
+};
 function useBorderBoxControlVisualizer(props) {
   const {
     className,
+    style,
     value,
     ...otherProps
   } = useContextSystem(props, "BorderBoxControlVisualizer");
-  const cx = useCx();
-  const classes = useMemo(() => {
-    return cx(styles.borderBoxControlVisualizer(value), className);
-  }, [cx, className, value]);
   return {
     ...otherProps,
-    className: classes,
+    className: clsx(style_module_default.visualizer, className),
+    style: {
+      ...style,
+      "--wp-components-border-box-visualizer-top": borderBoxStyleWithFallback(value?.top),
+      "--wp-components-border-box-visualizer-bottom": borderBoxStyleWithFallback(value?.bottom),
+      // Logical properties map left/right to inline start/end for RTL.
+      "--wp-components-border-box-visualizer-start": borderBoxStyleWithFallback(value?.left),
+      "--wp-components-border-box-visualizer-end": borderBoxStyleWithFallback(value?.right)
+    },
     value
   };
 }

package/build-module/border-box-control/border-box-control-visualizer/hook.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/border-box-control/border-box-control-visualizer/hook.ts"],
-  "sourcesContent": ["import { useMemo } from '@wordpress/element';\nimport * as styles from '../styles';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils';\nexport function useBorderBoxControlVisualizer(props) {\n  const {\n    className,\n    value,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlVisualizer');\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderBoxControlVisualizer(value), className);\n  }, [cx, className, value]);\n  return {\n    ...otherProps,\n    className: classes,\n    value\n  };\n}"],
-  "mappings": ";AAAA,SAAS,eAAe;AACxB,YAAY,YAAY;AACxB,SAAS,wBAAwB;AACjC,SAAS,aAAa;AACf,SAAS,8BAA8B,OAAO;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,4BAA4B;AAGxD,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM;AAC5B,WAAO,GAAU,kCAA2B,KAAK,GAAG,SAAS;AAAA,EAC/D,GAAG,CAAC,IAAI,WAAW,KAAK,CAAC;AACzB,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,EACF;AACF;",
+  "sources": ["../../../src/border-box-control/border-box-control-visualizer/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/border-box-control/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport styles from '../style.module.scss';\nimport { COLORS, CONFIG } from '../../utils';\nimport { useContextSystem } from '../../context';\nconst borderBoxStyleWithFallback = border => {\n  const {\n    color = COLORS.gray[200],\n    style = 'solid',\n    width = CONFIG.borderWidth\n  } = border || {};\n  const clampedWidth = width !== CONFIG.borderWidth ? `clamp(1px, ${width}, 10px)` : width;\n  const hasVisibleBorder = !!width && width !== '0' || !!color;\n  const borderStyle = hasVisibleBorder ? style || 'solid' : style;\n  return `${color} ${borderStyle} ${clampedWidth}`;\n};\nexport function useBorderBoxControlVisualizer(props) {\n  const {\n    className,\n    style,\n    value,\n    ...otherProps\n  } = useContextSystem(props, 'BorderBoxControlVisualizer');\n  return {\n    ...otherProps,\n    className: clsx(styles.visualizer, className),\n    style: {\n      ...style,\n      '--wp-components-border-box-visualizer-top': borderBoxStyleWithFallback(value?.top),\n      '--wp-components-border-box-visualizer-bottom': borderBoxStyleWithFallback(value?.bottom),\n      // Logical properties map left/right to inline start/end for RTL.\n      '--wp-components-border-box-visualizer-start': borderBoxStyleWithFallback(value?.left),\n      '--wp-components-border-box-visualizer-end': borderBoxStyleWithFallback(value?.right)\n    },\n    value\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(\"2eee37fabd\", \".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._6a6edeeb175d724f__linked-border-control-full-width._6a6edeeb175d724f__linked-border-control-full-width{margin-inline-end:0}.f5104488f80fa50f__header{margin-bottom:4px}.f5104488f80fa50f__header>span{margin-bottom:0}._48f63719b9dc7e1a__wrapper{position:relative}._48f63719b9dc7e1a__wrapper ._902e774d37b6698b__linked-button{inset-inline-end:0;position:absolute;top:8px}._902e774d37b6698b__linked-button{line-height:0}._5978f65e1d08de6c__visualizer{border-bottom:var(--wp-components-border-box-visualizer-bottom);border-inline-end:var(--wp-components-border-box-visualizer-end);border-inline-start:var(--wp-components-border-box-visualizer-start);border-top:var(--wp-components-border-box-visualizer-top);bottom:20px;position:absolute;top:20px;inset-inline:39px}.afa8e78cec6a9f62__split-controls{flex:1;position:relative}.ec002fcdf4036950__centered-border-control{grid-column:span 2;margin:0 auto}.f9ea07d7127ab067__right-border-control{margin-inline-start:auto}\");\n}\nexport default {\"linked-border-control\":\"fa6e6c2331986855__linked-border-control\",\"linked-border-control-full-width\":\"_6a6edeeb175d724f__linked-border-control-full-width\",\"header\":\"f5104488f80fa50f__header\",\"wrapper\":\"_48f63719b9dc7e1a__wrapper\",\"linked-button\":\"_902e774d37b6698b__linked-button\",\"visualizer\":\"_5978f65e1d08de6c__visualizer\",\"split-controls\":\"afa8e78cec6a9f62__split-controls\",\"centered-border-control\":\"ec002fcdf4036950__centered-border-control\",\"right-border-control\":\"f9ea07d7127ab067__right-border-control\"};\n"],
+  "mappings": "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",
   "names": []
 }