@wordpress/components 38.0.0 → 40.0.0

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("67ff33c72d", ".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._48f63719b9dc7e1a__wrapper{position:relative}._902e774d37b6698b__linked-button{inset-inline-end:0;line-height:0;position:absolute;top:8px}._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", "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": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\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": ";AAGA,SAAS,eAAe;AAKxB,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(\"67ff33c72d\", \".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._48f63719b9dc7e1a__wrapper{position:relative}._902e774d37b6698b__linked-button{inset-inline-end:0;line-height:0;position:absolute;top:8px}._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\",\"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,4xBAA4xB;AACzzB;AACA,IAAO,uBAAQ,EAAC,yBAAwB,2CAA0C,WAAU,8BAA6B,iBAAgB,oCAAmC,cAAa,iCAAgC,kBAAiB,oCAAmC,2BAA0B,6CAA4C,wBAAuB,yCAAwC;;;AFFlZ,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/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-box-control/border-box-control-split-controls/component.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlSplitControls } from './hook';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst BorderBoxControlSplitControls = (props, forwardedRef) => {\n  const {\n    centeredClassName,\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    onChange,\n    popoverPlacement,\n    popoverOffset,\n    rightAlignedClassName,\n    value,\n    __experimentalIsRenderedInSidebar,\n    ...otherProps\n  } = useBorderBoxControlSplitControls(props);\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [popoverAnchor, setPopoverAnchor] = useState(null);\n\n  // Memoize popoverProps to avoid returning a new object every time.\n  const popoverProps = useMemo(() => popoverPlacement ? {\n    placement: popoverPlacement,\n    offset: popoverOffset,\n    anchor: popoverAnchor,\n    shift: true\n  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);\n  const sharedBorderControlProps = {\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    isCompact: true,\n    __experimentalIsRenderedInSidebar\n  };\n  const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);\n  return /*#__PURE__*/_jsxs(Grid, {\n    ...otherProps,\n    ref: mergedRef,\n    gap: 3,\n    children: [/*#__PURE__*/_jsx(BorderBoxControlVisualizer, {\n      value: value\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: centeredClassName,\n      hideLabelFromVision: true,\n      label: __('Top border'),\n      onChange: newBorder => onChange(newBorder, 'top'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.top,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      hideLabelFromVision: true,\n      label: __('Left border'),\n      onChange: newBorder => onChange(newBorder, 'left'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.left,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: rightAlignedClassName,\n      hideLabelFromVision: true,\n      label: __('Right border'),\n      onChange: newBorder => onChange(newBorder, 'right'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.right,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: centeredClassName,\n      hideLabelFromVision: true,\n      label: __('Bottom border'),\n      onChange: newBorder => onChange(newBorder, 'bottom'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.bottom,\n      ...sharedBorderControlProps\n    })]\n  });\n};\nconst ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');\nexport default ConnectedBorderBoxControlSplitControls;"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB;AAClC,SAAS,oBAAoB;AAK7B,OAAO,gCAAgC;AACvC,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,wCAAwC;AACjD,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,gCAAgC,CAAC,OAAO,iBAAiB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iCAAiC,KAAK;AAI1C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AAGvD,QAAM,eAAe,QAAQ,MAAM,mBAAmB;AAAA,IACpD,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,IAAI,QAAW,CAAC,kBAAkB,eAAe,aAAa,CAAC;AAC/D,QAAM,2BAA2B;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF;AACA,QAAM,YAAY,aAAa,CAAC,kBAAkB,YAAY,CAAC;AAC/D,SAAoB,sBAAM,MAAM;AAAA,IAC9B,GAAG;AAAA,IACH,KAAK;AAAA,IACL,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,4BAA4B;AAAA,MACvD;AAAA,IACF,CAAC,GAAgB,qBAAK,eAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,OAAO,GAAG,YAAY;AAAA,MACtB,UAAU,eAAa,SAAS,WAAW,KAAK;AAAA,MAChD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,qBAAK,eAAe;AAAA,MACnC,qBAAqB;AAAA,MACrB,OAAO,GAAG,aAAa;AAAA,MACvB,UAAU,eAAa,SAAS,WAAW,MAAM;AAAA,MACjD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,qBAAK,eAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,OAAO,GAAG,cAAc;AAAA,MACxB,UAAU,eAAa,SAAS,WAAW,OAAO;AAAA,MAClD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,qBAAK,eAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,OAAO,GAAG,eAAe;AAAA,MACzB,UAAU,eAAa,SAAS,WAAW,QAAQ;AAAA,MACnD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAM,yCAAyC,eAAe,+BAA+B,+BAA+B;AAC5H,IAAO,oBAAQ;",
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlSplitControls } from './hook';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst BorderBoxControlSplitControls = (props, forwardedRef) => {\n  const {\n    centeredClassName,\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    onChange,\n    popoverPlacement,\n    popoverOffset,\n    rightAlignedClassName,\n    value,\n    __experimentalIsRenderedInSidebar,\n    ...otherProps\n  } = useBorderBoxControlSplitControls(props);\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [popoverAnchor, setPopoverAnchor] = useState(null);\n\n  // Memoize popoverProps to avoid returning a new object every time.\n  const popoverProps = useMemo(() => popoverPlacement ? {\n    placement: popoverPlacement,\n    offset: popoverOffset,\n    anchor: popoverAnchor,\n    shift: true\n  } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);\n  const sharedBorderControlProps = {\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    isCompact: true,\n    __experimentalIsRenderedInSidebar\n  };\n  const mergedRef = useMergeRefs([setPopoverAnchor, forwardedRef]);\n  return /*#__PURE__*/_jsxs(Grid, {\n    ...otherProps,\n    ref: mergedRef,\n    gap: 3,\n    children: [/*#__PURE__*/_jsx(BorderBoxControlVisualizer, {\n      value: value\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: centeredClassName,\n      hideLabelFromVision: true,\n      label: __('Top border'),\n      onChange: newBorder => onChange(newBorder, 'top'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.top,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      hideLabelFromVision: true,\n      label: __('Left border'),\n      onChange: newBorder => onChange(newBorder, 'left'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.left,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: rightAlignedClassName,\n      hideLabelFromVision: true,\n      label: __('Right border'),\n      onChange: newBorder => onChange(newBorder, 'right'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.right,\n      ...sharedBorderControlProps\n    }), /*#__PURE__*/_jsx(BorderControl, {\n      className: centeredClassName,\n      hideLabelFromVision: true,\n      label: __('Bottom border'),\n      onChange: newBorder => onChange(newBorder, 'bottom'),\n      __unstablePopoverProps: popoverProps,\n      value: value?.bottom,\n      ...sharedBorderControlProps\n    })]\n  });\n};\nconst ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');\nexport default ConnectedBorderBoxControlSplitControls;"],
+  "mappings": ";AAAA,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB;AAClC,SAAS,oBAAoB;AAC7B,OAAO,gCAAgC;AACvC,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,wCAAwC;AACjD,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,gCAAgC,CAAC,OAAO,iBAAiB;AAC7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iCAAiC,KAAK;AAI1C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AAGvD,QAAM,eAAe,QAAQ,MAAM,mBAAmB;AAAA,IACpD,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,IAAI,QAAW,CAAC,kBAAkB,eAAe,aAAa,CAAC;AAC/D,QAAM,2BAA2B;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF;AACA,QAAM,YAAY,aAAa,CAAC,kBAAkB,YAAY,CAAC;AAC/D,SAAoB,sBAAM,MAAM;AAAA,IAC9B,GAAG;AAAA,IACH,KAAK;AAAA,IACL,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,4BAA4B;AAAA,MACvD;AAAA,IACF,CAAC,GAAgB,qBAAK,eAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,OAAO,GAAG,YAAY;AAAA,MACtB,UAAU,eAAa,SAAS,WAAW,KAAK;AAAA,MAChD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,qBAAK,eAAe;AAAA,MACnC,qBAAqB;AAAA,MACrB,OAAO,GAAG,aAAa;AAAA,MACvB,UAAU,eAAa,SAAS,WAAW,MAAM;AAAA,MACjD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,qBAAK,eAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,OAAO,GAAG,cAAc;AAAA,MACxB,UAAU,eAAa,SAAS,WAAW,OAAO;AAAA,MAClD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,GAAgB,qBAAK,eAAe;AAAA,MACnC,WAAW;AAAA,MACX,qBAAqB;AAAA,MACrB,OAAO,GAAG,eAAe;AAAA,MACzB,UAAU,eAAa,SAAS,WAAW,QAAQ;AAAA,MACnD,wBAAwB;AAAA,MACxB,OAAO,OAAO;AAAA,MACd,GAAG;AAAA,IACL,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAM,yCAAyC,eAAe,+BAA+B,+BAA+B;AAC5H,IAAO,oBAAQ;",
   "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("67ff33c72d", ".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._48f63719b9dc7e1a__wrapper{position:relative}._902e774d37b6698b__linked-button{inset-inline-end:0;line-height:0;position:absolute;top:8px}._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", "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": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\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": ";AAGA,SAAS,eAAe;AAKxB,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(\"67ff33c72d\", \".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._48f63719b9dc7e1a__wrapper{position:relative}._902e774d37b6698b__linked-button{inset-inline-end:0;line-height:0;position:absolute;top:8px}._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\",\"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/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-box-control/border-box-control-visualizer/component.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { View } from '../../view';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlVisualizer } from './hook';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst BorderBoxControlVisualizer = (props, forwardedRef) => {\n  const {\n    value,\n    ...otherProps\n  } = useBorderBoxControlVisualizer(props);\n  return /*#__PURE__*/_jsx(View, {\n    ...otherProps,\n    ref: forwardedRef\n  });\n};\nconst ConnectedBorderBoxControlVisualizer = contextConnect(BorderBoxControlVisualizer, 'BorderBoxControlVisualizer');\nexport default ConnectedBorderBoxControlVisualizer;"],
-  "mappings": ";AAGA,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,qCAAqC;AAC9C,SAAS,OAAO,YAAY;AAC5B,IAAM,6BAA6B,CAAC,OAAO,iBAAiB;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI,8BAA8B,KAAK;AACvC,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AACA,IAAM,sCAAsC,eAAe,4BAA4B,4BAA4B;AACnH,IAAO,oBAAQ;",
+  "sourcesContent": ["import { View } from '../../view';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlVisualizer } from './hook';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst BorderBoxControlVisualizer = (props, forwardedRef) => {\n  const {\n    value,\n    ...otherProps\n  } = useBorderBoxControlVisualizer(props);\n  return /*#__PURE__*/_jsx(View, {\n    ...otherProps,\n    ref: forwardedRef\n  });\n};\nconst ConnectedBorderBoxControlVisualizer = contextConnect(BorderBoxControlVisualizer, 'BorderBoxControlVisualizer');\nexport default ConnectedBorderBoxControlVisualizer;"],
+  "mappings": ";AAAA,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,qCAAqC;AAC9C,SAAS,OAAO,YAAY;AAC5B,IAAM,6BAA6B,CAAC,OAAO,iBAAiB;AAC1D,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI,8BAA8B,KAAK;AACvC,SAAoB,qBAAK,MAAM;AAAA,IAC7B,GAAG;AAAA,IACH,KAAK;AAAA,EACP,CAAC;AACH;AACA,IAAM,sCAAsC,eAAe,4BAA4B,4BAA4B;AACnH,IAAO,oBAAQ;",
   "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("67ff33c72d", ".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._48f63719b9dc7e1a__wrapper{position:relative}._902e774d37b6698b__linked-button{inset-inline-end:0;line-height:0;position:absolute;top:8px}._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", "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": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\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": ";AAGA,SAAS,eAAe;AAKxB,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(\"67ff33c72d\", \".fa6e6c2331986855__linked-border-control.fa6e6c2331986855__linked-border-control{flex:1;margin-inline-end:24px}._48f63719b9dc7e1a__wrapper{position:relative}._902e774d37b6698b__linked-button{inset-inline-end:0;line-height:0;position:absolute;top:8px}._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\",\"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/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/border-box-control/utils.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport { parseCSSUnitValue } from '../utils/unit-values';\nconst sides = ['top', 'right', 'bottom', 'left'];\nconst borderProps = ['color', 'style', 'width'];\nexport const isEmptyBorder = border => {\n  if (!border) {\n    return true;\n  }\n  return !borderProps.some(prop => border[prop] !== undefined);\n};\nexport const isDefinedBorder = border => {\n  // No border, no worries :)\n  if (!border) {\n    return false;\n  }\n\n  // If we have individual borders per side within the border object we\n  // need to check whether any of those side borders have been set.\n  if (hasSplitBorders(border)) {\n    const allSidesEmpty = sides.every(side => isEmptyBorder(border[side]));\n    return !allSidesEmpty;\n  }\n\n  // If we have a top-level border only, check if that is empty. e.g.\n  // { color: undefined, style: undefined, width: undefined }\n  // Border radius can still be set within the border object as it is\n  // handled separately.\n  return !isEmptyBorder(border);\n};\nexport const isCompleteBorder = border => {\n  if (!border) {\n    return false;\n  }\n  return borderProps.every(prop => border[prop] !== undefined);\n};\nexport const hasSplitBorders = (border = {}) => {\n  return Object.keys(border).some(side => sides.indexOf(side) !== -1);\n};\nexport const hasMixedBorders = borders => {\n  if (!hasSplitBorders(borders)) {\n    return false;\n  }\n  const shorthandBorders = sides.map(side => getShorthandBorderStyle(borders?.[side]));\n  return !shorthandBorders.every(border => border === shorthandBorders[0]);\n};\nexport const getSplitBorders = border => {\n  if (!border || isEmptyBorder(border)) {\n    return undefined;\n  }\n  return {\n    top: border,\n    right: border,\n    bottom: border,\n    left: border\n  };\n};\nexport const getBorderDiff = (original, updated) => {\n  const diff = {};\n  if (original.color !== updated.color) {\n    diff.color = updated.color;\n  }\n  if (original.style !== updated.style) {\n    diff.style = updated.style;\n  }\n  if (original.width !== updated.width) {\n    diff.width = updated.width;\n  }\n  return diff;\n};\nexport const getCommonBorder = borders => {\n  if (!borders) {\n    return undefined;\n  }\n  const colors = [];\n  const styles = [];\n  const widths = [];\n  sides.forEach(side => {\n    colors.push(borders[side]?.color);\n    styles.push(borders[side]?.style);\n    widths.push(borders[side]?.width);\n  });\n  const allColorsMatch = colors.every(value => value === colors[0]);\n  const allStylesMatch = styles.every(value => value === styles[0]);\n  const allWidthsMatch = widths.every(value => value === widths[0]);\n  return {\n    color: allColorsMatch ? colors[0] : undefined,\n    style: allStylesMatch ? styles[0] : undefined,\n    width: allWidthsMatch ? widths[0] : getMostCommonUnit(widths)\n  };\n};\nexport const getShorthandBorderStyle = (border, fallbackBorder) => {\n  if (isEmptyBorder(border)) {\n    return fallbackBorder;\n  }\n  const {\n    color: fallbackColor,\n    style: fallbackStyle,\n    width: fallbackWidth\n  } = fallbackBorder || {};\n  const {\n    color = fallbackColor,\n    style = fallbackStyle,\n    width = fallbackWidth\n  } = border;\n  const hasVisibleBorder = !!width && width !== '0' || !!color;\n  const borderStyle = hasVisibleBorder ? style || 'solid' : style;\n  return [width, borderStyle, color].filter(Boolean).join(' ');\n};\nexport const getMostCommonUnit = values => {\n  // Collect all the CSS units.\n  const units = values.map(value => value === undefined ? undefined : parseCSSUnitValue(`${value}`)[1]);\n\n  // Return the most common unit out of only the defined CSS units.\n  const filteredUnits = units.filter(value => value !== undefined);\n  return mode(filteredUnits);\n};\n\n/**\n * Finds the mode value out of the array passed favouring the first value\n * as a tiebreaker.\n *\n * @param values Values to determine the mode from.\n *\n * @return The mode value.\n */\nfunction mode(values) {\n  if (values.length === 0) {\n    return undefined;\n  }\n  const map = {};\n  let maxCount = 0;\n  let currentMode;\n  values.forEach(value => {\n    map[value] = map[value] === undefined ? 1 : map[value] + 1;\n    if (map[value] > maxCount) {\n      currentMode = value;\n      maxCount = map[value];\n    }\n  });\n  return currentMode;\n}"],
-  "mappings": "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",
+  "sourcesContent": ["import { parseCSSUnitValue } from '../utils/unit-values';\nconst sides = ['top', 'right', 'bottom', 'left'];\nconst borderProps = ['color', 'style', 'width'];\nexport const isEmptyBorder = border => {\n  if (!border) {\n    return true;\n  }\n  return !borderProps.some(prop => border[prop] !== undefined);\n};\nexport const isDefinedBorder = border => {\n  // No border, no worries :)\n  if (!border) {\n    return false;\n  }\n\n  // If we have individual borders per side within the border object we\n  // need to check whether any of those side borders have been set.\n  if (hasSplitBorders(border)) {\n    const allSidesEmpty = sides.every(side => isEmptyBorder(border[side]));\n    return !allSidesEmpty;\n  }\n\n  // If we have a top-level border only, check if that is empty. e.g.\n  // { color: undefined, style: undefined, width: undefined }\n  // Border radius can still be set within the border object as it is\n  // handled separately.\n  return !isEmptyBorder(border);\n};\nexport const isCompleteBorder = border => {\n  if (!border) {\n    return false;\n  }\n  return borderProps.every(prop => border[prop] !== undefined);\n};\nexport const hasSplitBorders = (border = {}) => {\n  return Object.keys(border).some(side => sides.indexOf(side) !== -1);\n};\nexport const hasMixedBorders = borders => {\n  if (!hasSplitBorders(borders)) {\n    return false;\n  }\n  const shorthandBorders = sides.map(side => getShorthandBorderStyle(borders?.[side]));\n  return !shorthandBorders.every(border => border === shorthandBorders[0]);\n};\nexport const getSplitBorders = border => {\n  if (!border || isEmptyBorder(border)) {\n    return undefined;\n  }\n  return {\n    top: border,\n    right: border,\n    bottom: border,\n    left: border\n  };\n};\nexport const getBorderDiff = (original, updated) => {\n  const diff = {};\n  if (original.color !== updated.color) {\n    diff.color = updated.color;\n  }\n  if (original.style !== updated.style) {\n    diff.style = updated.style;\n  }\n  if (original.width !== updated.width) {\n    diff.width = updated.width;\n  }\n  return diff;\n};\nexport const getCommonBorder = borders => {\n  if (!borders) {\n    return undefined;\n  }\n  const colors = [];\n  const styles = [];\n  const widths = [];\n  sides.forEach(side => {\n    colors.push(borders[side]?.color);\n    styles.push(borders[side]?.style);\n    widths.push(borders[side]?.width);\n  });\n  const allColorsMatch = colors.every(value => value === colors[0]);\n  const allStylesMatch = styles.every(value => value === styles[0]);\n  const allWidthsMatch = widths.every(value => value === widths[0]);\n  return {\n    color: allColorsMatch ? colors[0] : undefined,\n    style: allStylesMatch ? styles[0] : undefined,\n    width: allWidthsMatch ? widths[0] : getMostCommonUnit(widths)\n  };\n};\nexport const getShorthandBorderStyle = (border, fallbackBorder) => {\n  if (isEmptyBorder(border)) {\n    return fallbackBorder;\n  }\n  const {\n    color: fallbackColor,\n    style: fallbackStyle,\n    width: fallbackWidth\n  } = fallbackBorder || {};\n  const {\n    color = fallbackColor,\n    style = fallbackStyle,\n    width = fallbackWidth\n  } = border;\n  const hasVisibleBorder = !!width && width !== '0' || !!color;\n  const borderStyle = hasVisibleBorder ? style || 'solid' : style;\n  return [width, borderStyle, color].filter(Boolean).join(' ');\n};\nexport const getMostCommonUnit = values => {\n  // Collect all the CSS units.\n  const units = values.map(value => value === undefined ? undefined : parseCSSUnitValue(`${value}`)[1]);\n\n  // Return the most common unit out of only the defined CSS units.\n  const filteredUnits = units.filter(value => value !== undefined);\n  return mode(filteredUnits);\n};\n\n/**\n * Finds the mode value out of the array passed favouring the first value\n * as a tiebreaker.\n *\n * @param values Values to determine the mode from.\n *\n * @return The mode value.\n */\nfunction mode(values) {\n  if (values.length === 0) {\n    return undefined;\n  }\n  const map = {};\n  let maxCount = 0;\n  let currentMode;\n  values.forEach(value => {\n    map[value] = map[value] === undefined ? 1 : map[value] + 1;\n    if (map[value] > maxCount) {\n      currentMode = value;\n      maxCount = map[value];\n    }\n  });\n  return currentMode;\n}"],
+  "mappings": "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",
   "names": []
 }

package/build-module/border-control/border-control/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-control/border-control/component.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\nimport { Spacer } from '../../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst BorderLabel = props => {\n  const {\n    label,\n    hideLabelFromVision\n  } = props;\n  if (!label) {\n    return null;\n  }\n  return hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n    as: \"legend\",\n    children: label\n  }) : /*#__PURE__*/_jsx(StyledLabel, {\n    as: \"legend\",\n    children: label\n  });\n};\nconst UnconnectedBorderControl = (props, forwardedRef) => {\n  const {\n    colors,\n    disableCustomColors,\n    disableUnits,\n    enableAlpha,\n    enableStyle,\n    hideLabelFromVision,\n    innerWrapperClassName,\n    inputWidth,\n    isStyleSettable,\n    label,\n    onBorderChange,\n    onSliderChange,\n    onWidthChange,\n    placeholder,\n    __unstablePopoverProps,\n    previousStyleSelection,\n    showDropdownHeader,\n    sliderClassName,\n    value: border,\n    widthUnit,\n    widthValue,\n    withSlider,\n    __experimentalIsRenderedInSidebar,\n    ...otherProps\n  } = useBorderControl(props);\n  return /*#__PURE__*/_jsxs(View, {\n    as: \"fieldset\",\n    ...otherProps,\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(BorderLabel, {\n      label: label,\n      hideLabelFromVision: hideLabelFromVision\n    }), /*#__PURE__*/_jsxs(HStack, {\n      spacing: 4,\n      className: innerWrapperClassName,\n      children: [/*#__PURE__*/_jsx(UnitControl, {\n        prefix: /*#__PURE__*/_jsx(Spacer, {\n          marginRight: 1,\n          marginBottom: 0,\n          children: /*#__PURE__*/_jsx(BorderControlDropdown, {\n            border: border,\n            colors: colors,\n            __unstablePopoverProps: __unstablePopoverProps,\n            disableCustomColors: disableCustomColors,\n            enableAlpha: enableAlpha,\n            enableStyle: enableStyle,\n            isStyleSettable: isStyleSettable,\n            onChange: onBorderChange,\n            previousStyleSelection: previousStyleSelection,\n            __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar\n          })\n        }),\n        label: __('Border width'),\n        hideLabelFromVision: true,\n        min: 0,\n        onChange: onWidthChange,\n        value: border?.width || '',\n        placeholder: placeholder,\n        disableUnits: disableUnits,\n        __unstableInputWidth: inputWidth\n      }), withSlider && /*#__PURE__*/_jsx(RangeControl, {\n        label: __('Border width'),\n        hideLabelFromVision: true,\n        className: sliderClassName,\n        initialPosition: 0,\n        max: 100,\n        min: 0,\n        onChange: onSliderChange,\n        step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,\n        value: widthValue || undefined,\n        withInputField: false\n      })]\n    })]\n  });\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');\nexport default BorderControl;"],
-  "mappings": ";AAGA,SAAS,UAAU;AAKnB,OAAO,2BAA2B;AAClC,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,cAAc,WAAS;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AACA,SAAO,sBAAmC,qBAAK,gBAAgB;AAAA,IAC7D,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC,IAAiB,qBAAK,aAAa;AAAA,IAClC,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC;AACH;AACA,IAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,KAAK;AAC1B,SAAoB,sBAAM,MAAM;AAAA,IAC9B,IAAI;AAAA,IACJ,GAAG;AAAA,IACH,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,aAAa;AAAA,MACxC;AAAA,MACA;AAAA,IACF,CAAC,GAAgB,sBAAM,QAAQ;AAAA,MAC7B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,CAAc,qBAAK,aAAa;AAAA,QACxC,QAAqB,qBAAK,QAAQ;AAAA,UAChC,aAAa;AAAA,UACb,cAAc;AAAA,UACd,UAAuB,qBAAK,uBAAuB;AAAA,YACjD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,UACF,CAAC;AAAA,QACH,CAAC;AAAA,QACD,OAAO,GAAG,cAAc;AAAA,QACxB,qBAAqB;AAAA,QACrB,KAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO,QAAQ,SAAS;AAAA,QACxB;AAAA,QACA;AAAA,QACA,sBAAsB;AAAA,MACxB,CAAC,GAAG,cAA2B,qBAAK,cAAc;AAAA,QAChD,OAAO,GAAG,cAAc;AAAA,QACxB,qBAAqB;AAAA,QACrB,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAM,CAAC,MAAM,GAAG,EAAE,SAAS,SAAS,IAAI,IAAI;AAAA,QAC5C,OAAO,cAAc;AAAA,QACrB,gBAAgB;AAAA,MAClB,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAoCO,IAAM,gBAAgB,eAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport BorderControlDropdown from '../border-control-dropdown';\nimport UnitControl from '../../unit-control';\nimport RangeControl from '../../range-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect } from '../../context';\nimport { useBorderControl } from './hook';\nimport { Spacer } from '../../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst BorderLabel = props => {\n  const {\n    label,\n    hideLabelFromVision\n  } = props;\n  if (!label) {\n    return null;\n  }\n  return hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n    as: \"legend\",\n    children: label\n  }) : /*#__PURE__*/_jsx(StyledLabel, {\n    as: \"legend\",\n    children: label\n  });\n};\nconst UnconnectedBorderControl = (props, forwardedRef) => {\n  const {\n    colors,\n    disableCustomColors,\n    disableUnits,\n    enableAlpha,\n    enableStyle,\n    hideLabelFromVision,\n    innerWrapperClassName,\n    inputWidth,\n    isStyleSettable,\n    label,\n    onBorderChange,\n    onSliderChange,\n    onWidthChange,\n    placeholder,\n    __unstablePopoverProps,\n    previousStyleSelection,\n    showDropdownHeader,\n    sliderClassName,\n    value: border,\n    widthUnit,\n    widthValue,\n    withSlider,\n    __experimentalIsRenderedInSidebar,\n    ...otherProps\n  } = useBorderControl(props);\n  return /*#__PURE__*/_jsxs(View, {\n    as: \"fieldset\",\n    ...otherProps,\n    ref: forwardedRef,\n    children: [/*#__PURE__*/_jsx(BorderLabel, {\n      label: label,\n      hideLabelFromVision: hideLabelFromVision\n    }), /*#__PURE__*/_jsxs(HStack, {\n      spacing: 4,\n      className: innerWrapperClassName,\n      children: [/*#__PURE__*/_jsx(UnitControl, {\n        prefix: /*#__PURE__*/_jsx(Spacer, {\n          marginRight: 1,\n          marginBottom: 0,\n          children: /*#__PURE__*/_jsx(BorderControlDropdown, {\n            border: border,\n            colors: colors,\n            __unstablePopoverProps: __unstablePopoverProps,\n            disableCustomColors: disableCustomColors,\n            enableAlpha: enableAlpha,\n            enableStyle: enableStyle,\n            isStyleSettable: isStyleSettable,\n            onChange: onBorderChange,\n            previousStyleSelection: previousStyleSelection,\n            __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar\n          })\n        }),\n        label: __('Border width'),\n        hideLabelFromVision: true,\n        min: 0,\n        onChange: onWidthChange,\n        value: border?.width || '',\n        placeholder: placeholder,\n        disableUnits: disableUnits,\n        __unstableInputWidth: inputWidth\n      }), withSlider && /*#__PURE__*/_jsx(RangeControl, {\n        label: __('Border width'),\n        hideLabelFromVision: true,\n        className: sliderClassName,\n        initialPosition: 0,\n        max: 100,\n        min: 0,\n        onChange: onSliderChange,\n        step: ['px', '%'].includes(widthUnit) ? 1 : 0.1,\n        value: widthValue || undefined,\n        withInputField: false\n      })]\n    })]\n  });\n};\n\n/**\n * The `BorderControl` brings together internal sub-components which allow users to\n * set the various properties of a border. The first sub-component, a\n * `BorderDropdown` contains options representing border color and style. The\n * border width is controlled via a `UnitControl` and an optional `RangeControl`.\n *\n * Border radius is not covered by this control as it may be desired separate to\n * color, style, and width. For example, the border radius may be absorbed under\n * a \"shape\" abstraction.\n *\n * ```jsx\n * import { BorderControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n *\n * const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n *\n * const MyBorderControl = () => {\n * \tconst [ border, setBorder ] = useState();\n * \tconst onChange = ( newBorder ) => setBorder( newBorder );\n *\n * \treturn (\n * \t\t<BorderControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Border' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ border }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl');\nexport default BorderControl;"],
+  "mappings": ";AAAA,SAAS,UAAU;AACnB,OAAO,2BAA2B;AAClC,OAAO,iBAAiB;AACxB,OAAO,kBAAkB;AACzB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,cAAc,WAAS;AAC3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AACA,SAAO,sBAAmC,qBAAK,gBAAgB;AAAA,IAC7D,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC,IAAiB,qBAAK,aAAa;AAAA,IAClC,IAAI;AAAA,IACJ,UAAU;AAAA,EACZ,CAAC;AACH;AACA,IAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,KAAK;AAC1B,SAAoB,sBAAM,MAAM;AAAA,IAC9B,IAAI;AAAA,IACJ,GAAG;AAAA,IACH,KAAK;AAAA,IACL,UAAU,CAAc,qBAAK,aAAa;AAAA,MACxC;AAAA,MACA;AAAA,IACF,CAAC,GAAgB,sBAAM,QAAQ;AAAA,MAC7B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,CAAc,qBAAK,aAAa;AAAA,QACxC,QAAqB,qBAAK,QAAQ;AAAA,UAChC,aAAa;AAAA,UACb,cAAc;AAAA,UACd,UAAuB,qBAAK,uBAAuB;AAAA,YACjD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,UACF,CAAC;AAAA,QACH,CAAC;AAAA,QACD,OAAO,GAAG,cAAc;AAAA,QACxB,qBAAqB;AAAA,QACrB,KAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO,QAAQ,SAAS;AAAA,QACxB;AAAA,QACA;AAAA,QACA,sBAAsB;AAAA,MACxB,CAAC,GAAG,cAA2B,qBAAK,cAAc;AAAA,QAChD,OAAO,GAAG,cAAc;AAAA,QACxB,qBAAqB;AAAA,QACrB,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAM,CAAC,MAAM,GAAG,EAAE,SAAS,SAAS,IAAI,IAAI;AAAA,QAC5C,OAAO,cAAc;AAAA,QACrB,gBAAgB;AAAA,MAClB,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAoCO,IAAM,gBAAgB,eAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
   "names": []
 }