@wordpress/components 39.0.0 → 40.1.0

package/build/border-box-control/border-box-control-visualizer/hook.cjs

@@ -33,23 +33,123 @@ __export(hook_exports, {
   useBorderBoxControlVisualizer: () => useBorderBoxControlVisualizer
 });
 module.exports = __toCommonJS(hook_exports);
-var import_element = require("@wordpress/element");
-var styles = __toESM(require("../styles.cjs"));
-var import_context = require("../../context/index.cjs");
+var import_clsx = __toESM(require("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
 var import_utils = require("../../utils/index.cjs");
+var import_context = require("../../context/index.cjs");
+var borderBoxStyleWithFallback = (border) => {
+  const {
+    color = import_utils.COLORS.gray[200],
+    style = "solid",
+    width = import_utils.CONFIG.borderWidth
+  } = border || {};
+  const clampedWidth = width !== import_utils.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
   } = (0, import_context.useContextSystem)(props, "BorderBoxControlVisualizer");
-  const cx = (0, import_utils.useCx)();
-  const classes = (0, import_element.useMemo)(() => {
-    return cx(styles.borderBoxControlVisualizer(value), className);
-  }, [cx, className, value]);
   return {
     ...otherProps,
-    className: classes,
+    className: (0, import_clsx.default)(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/border-box-control/border-box-control-visualizer/hook.cjs.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;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAwB;AACxB,aAAwB;AACxB,qBAAiC;AACjC,mBAAsB;AACf,SAAS,8BAA8B,OAAO;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,4BAA4B;AAGxD,QAAM,SAAK,oBAAM;AACjB,QAAM,cAAU,wBAAQ,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;",
-  "names": []
+  "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;;;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,mBAA+B;AAC/B,qBAAiC;AACjC,IAAM,6BAA6B,YAAU;AAC3C,QAAM;AAAA,IACJ,QAAQ,oBAAO,KAAK,GAAG;AAAA,IACvB,QAAQ;AAAA,IACR,QAAQ,oBAAO;AAAA,EACjB,IAAI,UAAU,CAAC;AACf,QAAM,eAAe,UAAU,oBAAO,cAAc,cAAc,KAAK,YAAY;AACnF,QAAM,mBAAmB,CAAC,CAAC,SAAS,UAAU,OAAO,CAAC,CAAC;AACvD,QAAM,cAAc,mBAAmB,SAAS,UAAU;AAC1D,SAAO,GAAG,KAAK,IAAI,WAAW,IAAI,YAAY;AAChD;AACO,SAAS,8BAA8B,OAAO;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,4BAA4B;AACxD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,eAAW,YAAAA,SAAK,qBAAO,YAAY,SAAS;AAAA,IAC5C,OAAO;AAAA,MACL,GAAG;AAAA,MACH,6CAA6C,2BAA2B,OAAO,GAAG;AAAA,MAClF,gDAAgD,2BAA2B,OAAO,MAAM;AAAA;AAAA,MAExF,+CAA+C,2BAA2B,OAAO,IAAI;AAAA,MACrF,6CAA6C,2BAA2B,OAAO,KAAK;AAAA,IACtF;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": ["clsx"]
 }

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

@@ -33,11 +33,95 @@ __export(hook_exports, {
   useBorderControl: () => useBorderControl
 });
 module.exports = __toCommonJS(hook_exports);
+var import_clsx = __toESM(require("clsx"));
 var import_element = require("@wordpress/element");
-var styles = __toESM(require("../styles.cjs"));
 var import_utils = require("../../unit-control/utils.cjs");
 var import_context = require("../../context/index.cjs");
-var import_use_cx = require("../../utils/hooks/use-cx.cjs");
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/border-control/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("749bb52757", ".a8578c10ef7219f5__border-control{border:0;box-sizing:border-box;margin:0;padding:0}.a8578c10ef7219f5__border-control *,.a8578c10ef7219f5__border-control :after,.a8578c10ef7219f5__border-control :before{box-sizing:inherit}._89d98624def50ba2__inner-wrapper{height:40px}._89d98624def50ba2__inner-wrapper .components-unit-control{flex:1 1 40%}._89d98624def50ba2__inner-wrapper._89d98624def50ba2__inner-wrapper .components-unit-control__select.components-unit-control__select{min-height:0}._43dbe0f5c56003a8__inner-wrapper-has-width .components-unit-control{flex:0 0 auto}._25a20fddf2bf261f__dropdown{background:#fff}._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button{align-items:center;aspect-ratio:1;border:1px solid var(--wp-components-color-gray-600,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));border-end-end-radius:0;border-end-start-radius:2px;border-start-end-radius:0;border-start-start-radius:2px;display:flex;justify-content:center;padding:0}._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button:focus,._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button:hover:not(:disabled){border-color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));box-shadow:inset 0 0 0 .5px var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));position:relative;z-index:1}._956b765a9ec7feba__color-indicator-wrapper{border:2px solid transparent;border-radius:9999px;height:24px;padding:2px;width:24px}._956b765a9ec7feba__color-indicator-wrapper>span{background:linear-gradient(-45deg,transparent 48%,rgba(0,0,0,.2) 0,rgba(0,0,0,.2) 52%,transparent 0);height:16px;width:16px}.a0c5666db3f5f599__popover-controls{width:228px}._115e648628de896b__reset-button-wrapper{display:flex;justify-content:flex-end;margin-block-start:12px}.e9089c561edcd13a__slider{flex:1 1 60%;margin-inline-end:12px}");
+}
+var style_module_default = { "border-control": "a8578c10ef7219f5__border-control", "inner-wrapper": "_89d98624def50ba2__inner-wrapper", "inner-wrapper-has-width": "_43dbe0f5c56003a8__inner-wrapper-has-width", "dropdown": "_25a20fddf2bf261f__dropdown", "color-indicator-wrapper": "_956b765a9ec7feba__color-indicator-wrapper", "popover-controls": "a0c5666db3f5f599__popover-controls", "reset-button-wrapper": "_115e648628de896b__reset-button-wrapper", "slider": "e9089c561edcd13a__slider" };
+
+// packages/components/src/border-control/border-control/hook.ts
 var isValidBorder = (border) => {
   const hasWidth = border?.width !== void 0 && border.width !== "";
   const hasColor = border?.color !== void 0;
@@ -100,22 +184,13 @@ function useBorderControl(props) {
   const onSliderChange = (0, import_element.useCallback)((value) => {
     onWidthChange(`${value}${widthUnit}`);
   }, [onWidthChange, widthUnit]);
-  const cx = (0, import_use_cx.useCx)();
-  const classes = (0, import_element.useMemo)(() => {
-    return cx(styles.borderControl, className);
-  }, [className, cx]);
+  const classes = (0, import_clsx.default)(style_module_default["border-control"], className);
   let wrapperWidth = width;
   if (isCompact) {
     wrapperWidth = "116px";
   }
-  const innerWrapperClassName = (0, import_element.useMemo)(() => {
-    return cx(styles.getInnerWrapperStyles({
-      hasWidth: !!wrapperWidth
-    }));
-  }, [wrapperWidth, cx]);
-  const sliderClassName = (0, import_element.useMemo)(() => {
-    return cx(styles.borderSlider());
-  }, [cx]);
+  const innerWrapperClassName = (0, import_clsx.default)(style_module_default["inner-wrapper"], !!wrapperWidth && style_module_default["inner-wrapper-has-width"]);
+  const sliderClassName = style_module_default.slider;
   return {
     ...otherProps,
     className: classes,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/border-control/border-control/hook.ts"],
-  "sourcesContent": ["import { useCallback, useMemo, useState } from '@wordpress/element';\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\n// If either width or color are defined, the border is considered valid\n// and a border style can be set as well.\nconst isValidBorder = border => {\n  const hasWidth = border?.width !== undefined && border.width !== '';\n  const hasColor = border?.color !== undefined;\n  return hasWidth || hasColor;\n};\nexport function useBorderControl(props) {\n  const {\n    className,\n    colors = [],\n    isCompact,\n    onChange,\n    enableAlpha = true,\n    enableStyle = true,\n    shouldSanitizeBorder = true,\n    value: border,\n    width,\n    __experimentalIsRenderedInSidebar = false,\n    // Deprecated props, no longer used.\n    size: _size,\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    ...otherProps\n  } = useContextSystem(props, 'BorderControl');\n  const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);\n  const widthUnit = originalWidthUnit || 'px';\n  const hadPreviousZeroWidth = widthValue === 0;\n  const [colorSelection, setColorSelection] = useState();\n  const [styleSelection, setStyleSelection] = useState();\n  const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;\n  const onBorderChange = useCallback(newBorder => {\n    if (shouldSanitizeBorder && !isValidBorder(newBorder)) {\n      onChange(undefined);\n      return;\n    }\n    onChange(newBorder);\n  }, [onChange, shouldSanitizeBorder]);\n  const onWidthChange = useCallback(newWidth => {\n    const newWidthValue = newWidth === '' ? undefined : newWidth;\n    const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth);\n    const hasZeroWidth = parsedValue === 0;\n    const updatedBorder = {\n      ...border,\n      width: newWidthValue\n    };\n\n    // Setting the border width explicitly to zero will also set the\n    // border style to `none` and clear the border color.\n    if (hasZeroWidth && !hadPreviousZeroWidth) {\n      // Before clearing the color and style selections, keep track of\n      // the current selections so they can be restored when the width\n      // changes to a non-zero value.\n      setColorSelection(border?.color);\n      setStyleSelection(border?.style);\n\n      // Clear the color and style border properties.\n      updatedBorder.color = undefined;\n      updatedBorder.style = 'none';\n    }\n\n    // Selection has changed from zero border width to non-zero width.\n    if (!hasZeroWidth && hadPreviousZeroWidth) {\n      // Restore previous border color and style selections if width\n      // is now not zero.\n      if (updatedBorder.color === undefined) {\n        updatedBorder.color = colorSelection;\n      }\n      if (updatedBorder.style === 'none') {\n        updatedBorder.style = styleSelection;\n      }\n    }\n    onBorderChange(updatedBorder);\n  }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]);\n  const onSliderChange = useCallback(value => {\n    onWidthChange(`${value}${widthUnit}`);\n  }, [onWidthChange, widthUnit]);\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderControl, className);\n  }, [className, cx]);\n  let wrapperWidth = width;\n  if (isCompact) {\n    // Widths below represent the minimum usable width for compact controls.\n    // Taller controls contain greater internal padding, thus greater width.\n    wrapperWidth = '116px';\n  }\n  const innerWrapperClassName = useMemo(() => {\n    return cx(styles.getInnerWrapperStyles({\n      hasWidth: !!wrapperWidth\n    }));\n  }, [wrapperWidth, cx]);\n  const sliderClassName = useMemo(() => {\n    return cx(styles.borderSlider());\n  }, [cx]);\n  return {\n    ...otherProps,\n    className: classes,\n    colors,\n    enableAlpha,\n    enableStyle,\n    innerWrapperClassName,\n    inputWidth: wrapperWidth,\n    isStyleSettable,\n    onBorderChange,\n    onSliderChange,\n    onWidthChange,\n    previousStyleSelection: styleSelection,\n    sliderClassName,\n    value: border,\n    widthUnit,\n    widthValue,\n    __experimentalIsRenderedInSidebar\n  };\n}"],
-  "mappings": "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",
-  "names": []
+  "sources": ["../../../src/border-control/border-control/hook.ts", "../../../../style-runtime/src/index.ts", "../../../src/border-control/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useCallback, useState } from '@wordpress/element';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem } from '../../context';\nimport styles from '../style.module.scss';\n// If either width or color are defined, the border is considered valid\n// and a border style can be set as well.\nconst isValidBorder = border => {\n  const hasWidth = border?.width !== undefined && border.width !== '';\n  const hasColor = border?.color !== undefined;\n  return hasWidth || hasColor;\n};\nexport function useBorderControl(props) {\n  const {\n    className,\n    colors = [],\n    isCompact,\n    onChange,\n    enableAlpha = true,\n    enableStyle = true,\n    shouldSanitizeBorder = true,\n    value: border,\n    width,\n    __experimentalIsRenderedInSidebar = false,\n    // Deprecated props, no longer used.\n    size: _size,\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    ...otherProps\n  } = useContextSystem(props, 'BorderControl');\n  const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);\n  const widthUnit = originalWidthUnit || 'px';\n  const hadPreviousZeroWidth = widthValue === 0;\n  const [colorSelection, setColorSelection] = useState();\n  const [styleSelection, setStyleSelection] = useState();\n  const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;\n  const onBorderChange = useCallback(newBorder => {\n    if (shouldSanitizeBorder && !isValidBorder(newBorder)) {\n      onChange(undefined);\n      return;\n    }\n    onChange(newBorder);\n  }, [onChange, shouldSanitizeBorder]);\n  const onWidthChange = useCallback(newWidth => {\n    const newWidthValue = newWidth === '' ? undefined : newWidth;\n    const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth);\n    const hasZeroWidth = parsedValue === 0;\n    const updatedBorder = {\n      ...border,\n      width: newWidthValue\n    };\n\n    // Setting the border width explicitly to zero will also set the\n    // border style to `none` and clear the border color.\n    if (hasZeroWidth && !hadPreviousZeroWidth) {\n      // Before clearing the color and style selections, keep track of\n      // the current selections so they can be restored when the width\n      // changes to a non-zero value.\n      setColorSelection(border?.color);\n      setStyleSelection(border?.style);\n\n      // Clear the color and style border properties.\n      updatedBorder.color = undefined;\n      updatedBorder.style = 'none';\n    }\n\n    // Selection has changed from zero border width to non-zero width.\n    if (!hasZeroWidth && hadPreviousZeroWidth) {\n      // Restore previous border color and style selections if width\n      // is now not zero.\n      if (updatedBorder.color === undefined) {\n        updatedBorder.color = colorSelection;\n      }\n      if (updatedBorder.style === 'none') {\n        updatedBorder.style = styleSelection;\n      }\n    }\n    onBorderChange(updatedBorder);\n  }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]);\n  const onSliderChange = useCallback(value => {\n    onWidthChange(`${value}${widthUnit}`);\n  }, [onWidthChange, widthUnit]);\n  const classes = clsx(styles['border-control'], className);\n  let wrapperWidth = width;\n  if (isCompact) {\n    // Widths below represent the minimum usable width for compact controls.\n    // Taller controls contain greater internal padding, thus greater width.\n    wrapperWidth = '116px';\n  }\n  const innerWrapperClassName = clsx(styles['inner-wrapper'], !!wrapperWidth && styles['inner-wrapper-has-width']);\n  const sliderClassName = styles.slider;\n  return {\n    ...otherProps,\n    className: classes,\n    colors,\n    enableAlpha,\n    enableStyle,\n    innerWrapperClassName,\n    inputWidth: wrapperWidth,\n    isStyleSettable,\n    onBorderChange,\n    onSliderChange,\n    onWidthChange,\n    previousStyleSelection: styleSelection,\n    sliderClassName,\n    value: border,\n    widthUnit,\n    widthValue,\n    __experimentalIsRenderedInSidebar\n  };\n}", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"749bb52757\", \".a8578c10ef7219f5__border-control{border:0;box-sizing:border-box;margin:0;padding:0}.a8578c10ef7219f5__border-control *,.a8578c10ef7219f5__border-control :after,.a8578c10ef7219f5__border-control :before{box-sizing:inherit}._89d98624def50ba2__inner-wrapper{height:40px}._89d98624def50ba2__inner-wrapper .components-unit-control{flex:1 1 40%}._89d98624def50ba2__inner-wrapper._89d98624def50ba2__inner-wrapper .components-unit-control__select.components-unit-control__select{min-height:0}._43dbe0f5c56003a8__inner-wrapper-has-width .components-unit-control{flex:0 0 auto}._25a20fddf2bf261f__dropdown{background:#fff}._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button{align-items:center;aspect-ratio:1;border:1px solid var(--wp-components-color-gray-600,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));border-end-end-radius:0;border-end-start-radius:2px;border-start-end-radius:0;border-start-start-radius:2px;display:flex;justify-content:center;padding:0}._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button:focus,._25a20fddf2bf261f__dropdown._25a20fddf2bf261f__dropdown>button:hover:not(:disabled){border-color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));box-shadow:inset 0 0 0 .5px var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));position:relative;z-index:1}._956b765a9ec7feba__color-indicator-wrapper{border:2px solid transparent;border-radius:9999px;height:24px;padding:2px;width:24px}._956b765a9ec7feba__color-indicator-wrapper>span{background:linear-gradient(-45deg,transparent 48%,rgba(0,0,0,.2) 0,rgba(0,0,0,.2) 52%,transparent 0);height:16px;width:16px}.a0c5666db3f5f599__popover-controls{width:228px}._115e648628de896b__reset-button-wrapper{display:flex;justify-content:flex-end;margin-block-start:12px}.e9089c561edcd13a__slider{flex:1 1 60%;margin-inline-end:12px}\");\n}\nexport default {\"border-control\":\"a8578c10ef7219f5__border-control\",\"inner-wrapper\":\"_89d98624def50ba2__inner-wrapper\",\"inner-wrapper-has-width\":\"_43dbe0f5c56003a8__inner-wrapper-has-width\",\"dropdown\":\"_25a20fddf2bf261f__dropdown\",\"color-indicator-wrapper\":\"_956b765a9ec7feba__color-indicator-wrapper\",\"popover-controls\":\"a0c5666db3f5f599__popover-controls\",\"reset-button-wrapper\":\"_115e648628de896b__reset-button-wrapper\",\"slider\":\"e9089c561edcd13a__slider\"};\n"],
+  "mappings": "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",
+  "names": ["clsx"]
 }

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

@@ -122,13 +122,12 @@ var BorderControlDropdown = (props, forwardedRef) => {
     disableCustomColors,
     enableAlpha,
     enableStyle,
-    indicatorClassName,
     indicatorWrapperClassName,
+    indicatorWrapperStyle,
     isStyleSettable,
     onReset,
     onColorChange,
     onStyleChange,
-    popoverContentClassName,
     popoverControlsClassName,
     resetButtonWrapperClassName,
     __unstablePopoverProps,
@@ -154,8 +153,8 @@ var BorderControlDropdown = (props, forwardedRef) => {
     __next40pxDefaultSize: true,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
       className: indicatorWrapperClassName,
+      style: indicatorWrapperStyle,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_indicator.default, {
-        className: indicatorClassName,
         colorValue: color
       })
     })
@@ -167,7 +166,6 @@ var BorderControlDropdown = (props, forwardedRef) => {
         className: popoverControlsClassName,
         spacing: 6,
         children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_palette.default, {
-          className: popoverContentClassName,
           value: color,
           onChange: onColorChange,
           colors,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/border-control/border-control-dropdown/component.tsx"],
-  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { VStack } from '../../v-stack';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst getAriaLabelColorValue = colorValue => {\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  return colorValue.replace(/^var\\((.+)\\)$/, '$1');\n};\nconst getColorObject = (colorValue, colors) => {\n  if (!colorValue || !colors) {\n    return;\n  }\n  if (isMultiplePaletteArray(colors)) {\n    // Multiple origins\n    let matchedColor;\n    colors.some(origin => origin.colors.some(color => {\n      if (color.color === colorValue) {\n        matchedColor = color;\n        return true;\n      }\n      return false;\n    }));\n    return matchedColor;\n  }\n\n  // Single origin\n  return colors.find(color => color.color === colorValue);\n};\nconst getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {\n  if (isStyleEnabled) {\n    if (colorObject) {\n      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);\n      return style ? sprintf(\n      // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\". 3: The current border style selection e.g. \"solid\".\n      __('Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".'), colorObject.name, ariaLabelValue, style) : sprintf(\n      // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\".\n      __('Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, ariaLabelValue);\n    }\n    if (colorValue) {\n      const ariaLabelValue = getAriaLabelColorValue(colorValue);\n      return style ? sprintf(\n      // translators: 1: The color's hex code e.g.: \"#f00:\". 2: The current border style selection e.g. \"solid\".\n      __('Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".'), ariaLabelValue, style) : sprintf(\n      // translators: %s: The color's hex code e.g: \"#f00\".\n      __('Border color and style picker. The currently selected color has a value of \"%s\".'), ariaLabelValue);\n    }\n    return __('Border color and style picker.');\n  }\n  if (colorObject) {\n    return sprintf(\n    // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n    __('Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, getAriaLabelColorValue(colorObject.color));\n  }\n  if (colorValue) {\n    return sprintf(\n    // translators: %s: The color's hex code e.g: \"#f00\".\n    __('Border color picker. The currently selected color has a value of \"%s\".'), getAriaLabelColorValue(colorValue));\n  }\n  return __('Border color picker.');\n};\nconst BorderControlDropdown = (props, forwardedRef) => {\n  const {\n    __experimentalIsRenderedInSidebar,\n    border,\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    indicatorClassName,\n    indicatorWrapperClassName,\n    isStyleSettable,\n    onReset,\n    onColorChange,\n    onStyleChange,\n    popoverContentClassName,\n    popoverControlsClassName,\n    resetButtonWrapperClassName,\n    __unstablePopoverProps,\n    ...otherProps\n  } = useBorderControlDropdown(props);\n  const {\n    color,\n    style\n  } = border || {};\n  const colorObject = getColorObject(color, colors);\n  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);\n  const enableResetButton = color || style && style !== 'none';\n  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;\n  const renderToggle = ({\n    onToggle\n  }) => /*#__PURE__*/_jsx(Button, {\n    onClick: onToggle,\n    variant: \"tertiary\",\n    \"aria-label\": toggleAriaLabel,\n    tooltipPosition: dropdownPosition,\n    label: __('Border color and style picker'),\n    showTooltip: true,\n    __next40pxDefaultSize: true,\n    children: /*#__PURE__*/_jsx(\"span\", {\n      className: indicatorWrapperClassName,\n      children: /*#__PURE__*/_jsx(ColorIndicator, {\n        className: indicatorClassName,\n        colorValue: color\n      })\n    })\n  });\n  const renderContent = () => /*#__PURE__*/_jsx(_Fragment, {\n    children: /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n      paddingSize: \"medium\",\n      children: [/*#__PURE__*/_jsxs(VStack, {\n        className: popoverControlsClassName,\n        spacing: 6,\n        children: [/*#__PURE__*/_jsx(ColorPalette, {\n          className: popoverContentClassName,\n          value: color,\n          onChange: onColorChange,\n          colors,\n          disableCustomColors,\n          __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n          clearable: false,\n          enableAlpha: enableAlpha\n        }), enableStyle && isStyleSettable && /*#__PURE__*/_jsx(BorderControlStylePicker, {\n          label: __('Style'),\n          value: style,\n          onChange: onStyleChange\n        })]\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: resetButtonWrapperClassName,\n        children: /*#__PURE__*/_jsx(Button, {\n          variant: \"tertiary\",\n          onClick: () => {\n            onReset();\n          },\n          disabled: !enableResetButton,\n          accessibleWhenDisabled: true,\n          __next40pxDefaultSize: true,\n          children: __('Reset')\n        })\n      })]\n    })\n  });\n  return /*#__PURE__*/_jsx(Dropdown, {\n    renderToggle: renderToggle,\n    renderContent: renderContent,\n    popoverProps: {\n      ...__unstablePopoverProps\n    },\n    ...otherProps,\n    ref: forwardedRef\n  });\n};\nconst ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');\nexport default ConnectedBorderControlDropdown;"],
-  "mappings": "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",
+  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport BorderControlStylePicker from '../border-control-style-picker';\nimport Button from '../../button';\nimport ColorIndicator from '../../color-indicator';\nimport ColorPalette from '../../color-palette';\nimport Dropdown from '../../dropdown';\nimport { VStack } from '../../v-stack';\nimport { contextConnect } from '../../context';\nimport { useBorderControlDropdown } from './hook';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { isMultiplePaletteArray } from '../../color-palette/utils';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst getAriaLabelColorValue = colorValue => {\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  return colorValue.replace(/^var\\((.+)\\)$/, '$1');\n};\nconst getColorObject = (colorValue, colors) => {\n  if (!colorValue || !colors) {\n    return;\n  }\n  if (isMultiplePaletteArray(colors)) {\n    // Multiple origins\n    let matchedColor;\n    colors.some(origin => origin.colors.some(color => {\n      if (color.color === colorValue) {\n        matchedColor = color;\n        return true;\n      }\n      return false;\n    }));\n    return matchedColor;\n  }\n\n  // Single origin\n  return colors.find(color => color.color === colorValue);\n};\nconst getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {\n  if (isStyleEnabled) {\n    if (colorObject) {\n      const ariaLabelValue = getAriaLabelColorValue(colorObject.color);\n      return style ? sprintf(\n      // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\". 3: The current border style selection e.g. \"solid\".\n      __('Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\". The currently selected style is \"%3$s\".'), colorObject.name, ariaLabelValue, style) : sprintf(\n      // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g.: \"#f00:\".\n      __('Border color and style picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, ariaLabelValue);\n    }\n    if (colorValue) {\n      const ariaLabelValue = getAriaLabelColorValue(colorValue);\n      return style ? sprintf(\n      // translators: 1: The color's hex code e.g.: \"#f00:\". 2: The current border style selection e.g. \"solid\".\n      __('Border color and style picker. The currently selected color has a value of \"%1$s\". The currently selected style is \"%2$s\".'), ariaLabelValue, style) : sprintf(\n      // translators: %s: The color's hex code e.g: \"#f00\".\n      __('Border color and style picker. The currently selected color has a value of \"%s\".'), ariaLabelValue);\n    }\n    return __('Border color and style picker.');\n  }\n  if (colorObject) {\n    return sprintf(\n    // translators: 1: The name of the color e.g. \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n    __('Border color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), colorObject.name, getAriaLabelColorValue(colorObject.color));\n  }\n  if (colorValue) {\n    return sprintf(\n    // translators: %s: The color's hex code e.g: \"#f00\".\n    __('Border color picker. The currently selected color has a value of \"%s\".'), getAriaLabelColorValue(colorValue));\n  }\n  return __('Border color picker.');\n};\nconst BorderControlDropdown = (props, forwardedRef) => {\n  const {\n    __experimentalIsRenderedInSidebar,\n    border,\n    colors,\n    disableCustomColors,\n    enableAlpha,\n    enableStyle,\n    indicatorWrapperClassName,\n    indicatorWrapperStyle,\n    isStyleSettable,\n    onReset,\n    onColorChange,\n    onStyleChange,\n    popoverControlsClassName,\n    resetButtonWrapperClassName,\n    __unstablePopoverProps,\n    ...otherProps\n  } = useBorderControlDropdown(props);\n  const {\n    color,\n    style\n  } = border || {};\n  const colorObject = getColorObject(color, colors);\n  const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);\n  const enableResetButton = color || style && style !== 'none';\n  const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;\n  const renderToggle = ({\n    onToggle\n  }) => /*#__PURE__*/_jsx(Button, {\n    onClick: onToggle,\n    variant: \"tertiary\",\n    \"aria-label\": toggleAriaLabel,\n    tooltipPosition: dropdownPosition,\n    label: __('Border color and style picker'),\n    showTooltip: true,\n    __next40pxDefaultSize: true,\n    children: /*#__PURE__*/_jsx(\"span\", {\n      className: indicatorWrapperClassName,\n      style: indicatorWrapperStyle,\n      children: /*#__PURE__*/_jsx(ColorIndicator, {\n        colorValue: color\n      })\n    })\n  });\n  const renderContent = () => /*#__PURE__*/_jsx(_Fragment, {\n    children: /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n      paddingSize: \"medium\",\n      children: [/*#__PURE__*/_jsxs(VStack, {\n        className: popoverControlsClassName,\n        spacing: 6,\n        children: [/*#__PURE__*/_jsx(ColorPalette, {\n          value: color,\n          onChange: onColorChange,\n          colors,\n          disableCustomColors,\n          __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,\n          clearable: false,\n          enableAlpha: enableAlpha\n        }), enableStyle && isStyleSettable && /*#__PURE__*/_jsx(BorderControlStylePicker, {\n          label: __('Style'),\n          value: style,\n          onChange: onStyleChange\n        })]\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: resetButtonWrapperClassName,\n        children: /*#__PURE__*/_jsx(Button, {\n          variant: \"tertiary\",\n          onClick: () => {\n            onReset();\n          },\n          disabled: !enableResetButton,\n          accessibleWhenDisabled: true,\n          __next40pxDefaultSize: true,\n          children: __('Reset')\n        })\n      })]\n    })\n  });\n  return /*#__PURE__*/_jsx(Dropdown, {\n    renderToggle: renderToggle,\n    renderContent: renderContent,\n    popoverProps: {\n      ...__unstablePopoverProps\n    },\n    ...otherProps,\n    ref: forwardedRef\n  });\n};\nconst ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');\nexport default ConnectedBorderControlDropdown;"],
+  "mappings": "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",
   "names": ["_jsx", "Button", "ColorIndicator", "_Fragment", "_jsxs", "DropdownContentWrapper", "ColorPalette", "BorderControlStylePicker", "Dropdown"]
 }

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

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