@wordpress/components 39.0.0 → 40.1.1-next.v.202608281122.0

package/build-module/resizable-box/resize-tooltip/label.mjs

@@ -1,8 +1,94 @@
 // packages/components/src/resizable-box/resize-tooltip/label.tsx
+import clsx from "clsx";
 import { forwardRef } from "@wordpress/element";
 import { isRTL } from "@wordpress/i18n";
+import { Text } from "../../text/index.mjs";
 import { POSITIONS } from "./utils.mjs";
-import { TooltipWrapper, Tooltip, LabelText } from "./styles/resize-tooltip.styles.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/resizable-box/resize-tooltip/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("6a3e579287", ".f1c3c2f08c84bcca__root{box-sizing:border-box;inset:0;pointer-events:none;position:absolute}.dd094b49bf71dfd9__tooltip-wrapper{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .12s linear}.d768357cc581321f__tooltip{background:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));border-radius:2px;box-sizing:border-box;color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:12px;padding:4px 8px;position:relative}.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text{color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));display:block;font-size:13px;line-height:1.4;white-space:nowrap}");
+}
+var style_module_default = { "root": "f1c3c2f08c84bcca__root", "tooltip-wrapper": "dd094b49bf71dfd9__tooltip-wrapper", "tooltip": "d768357cc581321f__tooltip", "label-text": "a32e43dd68941abb__label-text" };
+
+// packages/components/src/resizable-box/resize-tooltip/label.tsx
 import { jsx as _jsx } from "react/jsx-runtime";
 var CORNER_OFFSET = 4;
 var CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
@@ -44,17 +130,18 @@ function Label({
       left: isRTL() ? CORNER_OFFSET : void 0
     };
   }
-  return /* @__PURE__ */ _jsx(TooltipWrapper, {
+  return /* @__PURE__ */ _jsx("div", {
     "aria-hidden": "true",
-    className: "components-resizable-tooltip__tooltip-wrapper",
+    className: clsx("components-resizable-tooltip__tooltip-wrapper", style_module_default["tooltip-wrapper"]),
     ref,
     style,
     ...props,
-    children: /* @__PURE__ */ _jsx(Tooltip, {
-      className: "components-resizable-tooltip__tooltip",
+    children: /* @__PURE__ */ _jsx("div", {
+      className: clsx("components-resizable-tooltip__tooltip", style_module_default.tooltip),
       style: labelStyle,
-      children: /* @__PURE__ */ _jsx(LabelText, {
+      children: /* @__PURE__ */ _jsx(Text, {
         as: "span",
+        className: style_module_default["label-text"],
         children: label
       })
     })

package/build-module/resizable-box/resize-tooltip/label.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/resizable-box/resize-tooltip/label.tsx"],
-  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\nimport { POSITIONS } from './utils';\nimport { TooltipWrapper, Tooltip, LabelText } from './styles/resize-tooltip.styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;\nfunction Label({\n  label,\n  position = POSITIONS.corner,\n  zIndex = 1000,\n  ...props\n}, ref) {\n  const showLabel = !!label;\n  const isBottom = position === POSITIONS.bottom;\n  const isCorner = position === POSITIONS.corner;\n  if (!showLabel) {\n    return null;\n  }\n  let style = {\n    opacity: showLabel ? 1 : undefined,\n    zIndex\n  };\n  let labelStyle = {};\n  if (isBottom) {\n    style = {\n      ...style,\n      position: 'absolute',\n      bottom: CURSOR_OFFSET_TOP * -1,\n      left: '50%',\n      transform: 'translate(-50%, 0)'\n    };\n    labelStyle = {\n      transform: `translate(0, 100%)`\n    };\n  }\n  if (isCorner) {\n    style = {\n      ...style,\n      position: 'absolute',\n      top: CORNER_OFFSET,\n      right: isRTL() ? undefined : CORNER_OFFSET,\n      left: isRTL() ? CORNER_OFFSET : undefined\n    };\n  }\n  return /*#__PURE__*/_jsx(TooltipWrapper, {\n    \"aria-hidden\": \"true\",\n    className: \"components-resizable-tooltip__tooltip-wrapper\",\n    ref: ref,\n    style: style,\n    ...props,\n    children: /*#__PURE__*/_jsx(Tooltip, {\n      className: \"components-resizable-tooltip__tooltip\",\n      style: labelStyle,\n      children: /*#__PURE__*/_jsx(LabelText, {\n        as: \"span\",\n        children: label\n      })\n    })\n  });\n}\nconst ForwardedComponent = forwardRef(Label);\nexport default ForwardedComponent;"],
-  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,SAAS,iBAAiB;AACnD,SAAS,OAAO,YAAY;AAC5B,IAAM,gBAAgB;AACtB,IAAM,oBAAoB,gBAAgB;AAC1C,SAAS,MAAM;AAAA,EACb;AAAA,EACA,WAAW,UAAU;AAAA,EACrB,SAAS;AAAA,EACT,GAAG;AACL,GAAG,KAAK;AACN,QAAM,YAAY,CAAC,CAAC;AACpB,QAAM,WAAW,aAAa,UAAU;AACxC,QAAM,WAAW,aAAa,UAAU;AACxC,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AACA,MAAI,QAAQ;AAAA,IACV,SAAS,YAAY,IAAI;AAAA,IACzB;AAAA,EACF;AACA,MAAI,aAAa,CAAC;AAClB,MAAI,UAAU;AACZ,YAAQ;AAAA,MACN,GAAG;AAAA,MACH,UAAU;AAAA,MACV,QAAQ,oBAAoB;AAAA,MAC5B,MAAM;AAAA,MACN,WAAW;AAAA,IACb;AACA,iBAAa;AAAA,MACX,WAAW;AAAA,IACb;AAAA,EACF;AACA,MAAI,UAAU;AACZ,YAAQ;AAAA,MACN,GAAG;AAAA,MACH,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO,MAAM,IAAI,SAAY;AAAA,MAC7B,MAAM,MAAM,IAAI,gBAAgB;AAAA,IAClC;AAAA,EACF;AACA,SAAoB,qBAAK,gBAAgB;AAAA,IACvC,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAuB,qBAAK,SAAS;AAAA,MACnC,WAAW;AAAA,MACX,OAAO;AAAA,MACP,UAAuB,qBAAK,WAAW;AAAA,QACrC,IAAI;AAAA,QACJ,UAAU;AAAA,MACZ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAM,qBAAqB,WAAW,KAAK;AAC3C,IAAO,gBAAQ;",
+  "sources": ["../../../src/resizable-box/resize-tooltip/label.tsx", "../../../../style-runtime/src/index.ts", "../../../src/resizable-box/resize-tooltip/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\nimport { Text } from '../../text';\nimport { POSITIONS } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst CORNER_OFFSET = 4;\nconst CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;\nfunction Label({\n  label,\n  position = POSITIONS.corner,\n  zIndex = 1000,\n  ...props\n}, ref) {\n  const showLabel = !!label;\n  const isBottom = position === POSITIONS.bottom;\n  const isCorner = position === POSITIONS.corner;\n  if (!showLabel) {\n    return null;\n  }\n  let style = {\n    opacity: showLabel ? 1 : undefined,\n    zIndex\n  };\n  let labelStyle = {};\n  if (isBottom) {\n    style = {\n      ...style,\n      position: 'absolute',\n      bottom: CURSOR_OFFSET_TOP * -1,\n      left: '50%',\n      transform: 'translate(-50%, 0)'\n    };\n    labelStyle = {\n      transform: `translate(0, 100%)`\n    };\n  }\n  if (isCorner) {\n    style = {\n      ...style,\n      position: 'absolute',\n      top: CORNER_OFFSET,\n      right: isRTL() ? undefined : CORNER_OFFSET,\n      left: isRTL() ? CORNER_OFFSET : undefined\n    };\n  }\n  return /*#__PURE__*/_jsx(\"div\", {\n    \"aria-hidden\": \"true\",\n    className: clsx('components-resizable-tooltip__tooltip-wrapper', styles['tooltip-wrapper']),\n    ref: ref,\n    style: style,\n    ...props,\n    children: /*#__PURE__*/_jsx(\"div\", {\n      className: clsx('components-resizable-tooltip__tooltip', styles.tooltip),\n      style: labelStyle,\n      children: /*#__PURE__*/_jsx(Text, {\n        as: \"span\",\n        className: styles['label-text'],\n        children: label\n      })\n    })\n  });\n}\nconst ForwardedComponent = forwardRef(Label);\nexport default ForwardedComponent;", "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(\"6a3e579287\", \".f1c3c2f08c84bcca__root{box-sizing:border-box;inset:0;pointer-events:none;position:absolute}.dd094b49bf71dfd9__tooltip-wrapper{align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .12s linear}.d768357cc581321f__tooltip{background:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));border-radius:2px;box-sizing:border-box;color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:12px;padding:4px 8px;position:relative}.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text.a32e43dd68941abb__label-text{color:var(--wp-components-color-foreground-inverted,var(--wpds-color-background-surface-neutral,#fcfcfc));display:block;font-size:13px;line-height:1.4;white-space:nowrap}\");\n}\nexport default {\"root\":\"f1c3c2f08c84bcca__root\",\"tooltip-wrapper\":\"dd094b49bf71dfd9__tooltip-wrapper\",\"tooltip\":\"d768357cc581321f__tooltip\",\"label-text\":\"a32e43dd68941abb__label-text\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/scrollable/hook.mjs

@@ -1,17 +1,104 @@
 // packages/components/src/scrollable/hook.ts
-import { useMemo } from "@wordpress/element";
+import clsx from "clsx";
 import { useContextSystem } from "../context/index.mjs";
-import * as styles from "./styles.mjs";
-import { useCx } from "../utils/hooks/use-cx.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/scrollable/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("667cbbe993", ".c8c574e84747ff1d__scrollable{height:100%}@media only screen and (min-device-width:40em){.c8c574e84747ff1d__scrollable::-webkit-scrollbar{height:12px;width:12px}.c8c574e84747ff1d__scrollable::-webkit-scrollbar-track{background:rgba(0,0,0,.04);border-radius:8px}.c8c574e84747ff1d__scrollable::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:rgba(0,0,0,.2);border:2px solid transparent;border-radius:7px}.c8c574e84747ff1d__scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.5)}}._266d253504ce997a__smooth-scroll{scroll-behavior:smooth}.e000fb9481918254__scroll-x{overflow-x:auto;overflow-y:hidden}._71594f0091995597__scroll-y{overflow-x:hidden;overflow-y:auto}.f5191978d7129fe7__scroll-auto{overflow-y:auto}");
+}
+var style_module_default = { "scrollable": "c8c574e84747ff1d__scrollable", "smooth-scroll": "_266d253504ce997a__smooth-scroll", "scroll-x": "e000fb9481918254__scroll-x", "scroll-y": "_71594f0091995597__scroll-y", "scroll-auto": "f5191978d7129fe7__scroll-auto" };
+
+// packages/components/src/scrollable/hook.ts
 function useScrollable(props) {
   const {
     className,
     scrollDirection = "y",
-    smoothScroll: smoothScroll2 = false,
+    smoothScroll = false,
     ...otherProps
   } = useContextSystem(props, "Scrollable");
-  const cx = useCx();
-  const classes = useMemo(() => cx(styles.Scrollable, styles.scrollableScrollbar, smoothScroll2 && styles.smoothScroll, scrollDirection === "x" && styles.scrollX, scrollDirection === "y" && styles.scrollY, scrollDirection === "auto" && styles.scrollAuto, className), [className, cx, scrollDirection, smoothScroll2]);
+  const classes = clsx(style_module_default.scrollable, {
+    [style_module_default["smooth-scroll"]]: smoothScroll,
+    [style_module_default["scroll-x"]]: scrollDirection === "x",
+    [style_module_default["scroll-y"]]: scrollDirection === "y",
+    [style_module_default["scroll-auto"]]: scrollDirection === "auto"
+  }, className);
   return {
     ...otherProps,
     className: classes

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/scrollable/hook.ts"],
-  "sourcesContent": ["import { useMemo } from '@wordpress/element';\nimport { useContextSystem } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\nexport function useScrollable(props) {\n  const {\n    className,\n    scrollDirection = 'y',\n    smoothScroll = false,\n    ...otherProps\n  } = useContextSystem(props, 'Scrollable');\n  const cx = useCx();\n  const classes = useMemo(() => cx(styles.Scrollable, styles.scrollableScrollbar, smoothScroll && styles.smoothScroll, scrollDirection === 'x' && styles.scrollX, scrollDirection === 'y' && styles.scrollY, scrollDirection === 'auto' && styles.scrollAuto, className), [className, cx, scrollDirection, smoothScroll]);\n  return {\n    ...otherProps,\n    className: classes\n  };\n}"],
-  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,YAAY,YAAY;AACxB,SAAS,aAAa;AACf,SAAS,cAAc,OAAO;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB;AAAA,IAClB,cAAAA,gBAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,YAAY;AACxC,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM,GAAU,mBAAmB,4BAAqBA,iBAAuB,qBAAc,oBAAoB,OAAc,gBAAS,oBAAoB,OAAc,gBAAS,oBAAoB,UAAiB,mBAAY,SAAS,GAAG,CAAC,WAAW,IAAI,iBAAiBA,aAAY,CAAC;AACtT,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,EACb;AACF;",
-  "names": ["smoothScroll"]
+  "sources": ["../../src/scrollable/hook.ts", "../../../style-runtime/src/index.ts", "../../src/scrollable/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useContextSystem } from '../context';\nimport styles from './style.module.scss';\nexport function useScrollable(props) {\n  const {\n    className,\n    scrollDirection = 'y',\n    smoothScroll = false,\n    ...otherProps\n  } = useContextSystem(props, 'Scrollable');\n  const classes = clsx(styles.scrollable, {\n    [styles['smooth-scroll']]: smoothScroll,\n    [styles['scroll-x']]: scrollDirection === 'x',\n    [styles['scroll-y']]: scrollDirection === 'y',\n    [styles['scroll-auto']]: scrollDirection === 'auto'\n  }, className);\n  return {\n    ...otherProps,\n    className: classes\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(\"667cbbe993\", \".c8c574e84747ff1d__scrollable{height:100%}@media only screen and (min-device-width:40em){.c8c574e84747ff1d__scrollable::-webkit-scrollbar{height:12px;width:12px}.c8c574e84747ff1d__scrollable::-webkit-scrollbar-track{background:rgba(0,0,0,.04);border-radius:8px}.c8c574e84747ff1d__scrollable::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:rgba(0,0,0,.2);border:2px solid transparent;border-radius:7px}.c8c574e84747ff1d__scrollable:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.5)}}._266d253504ce997a__smooth-scroll{scroll-behavior:smooth}.e000fb9481918254__scroll-x{overflow-x:auto;overflow-y:hidden}._71594f0091995597__scroll-y{overflow-x:hidden;overflow-y:auto}.f5191978d7129fe7__scroll-auto{overflow-y:auto}\");\n}\nexport default {\"scrollable\":\"c8c574e84747ff1d__scrollable\",\"smooth-scroll\":\"_266d253504ce997a__smooth-scroll\",\"scroll-x\":\"e000fb9481918254__scroll-x\",\"scroll-y\":\"_71594f0091995597__scroll-y\",\"scroll-auto\":\"f5191978d7129fe7__scroll-auto\"};\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,wBAAwB;;;ACDjC,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,4uBAA4uB;AACzwB;AACA,IAAO,uBAAQ,EAAC,cAAa,gCAA+B,iBAAgB,oCAAmC,YAAW,8BAA6B,YAAW,+BAA8B,eAAc,gCAA+B;;;AFDtO,SAAS,cAAc,OAAO;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,YAAY;AACxC,QAAM,UAAU,KAAK,qBAAO,YAAY;AAAA,IACtC,CAAC,qBAAO,eAAe,CAAC,GAAG;AAAA,IAC3B,CAAC,qBAAO,UAAU,CAAC,GAAG,oBAAoB;AAAA,IAC1C,CAAC,qBAAO,UAAU,CAAC,GAAG,oBAAoB;AAAA,IAC1C,CAAC,qBAAO,aAAa,CAAC,GAAG,oBAAoB;AAAA,EAC/C,GAAG,SAAS;AACZ,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,EACb;AACF;",
+  "names": []
 }

package/build-module/snackbar/index.mjs

@@ -1,5 +1,6 @@
 // packages/components/src/snackbar/index.tsx
 import clsx from "clsx";
+import { useIsPresent } from "framer-motion";
 import { speak } from "@wordpress/a11y";
 import { useEffect, useLayoutEffect, useRef, forwardRef, renderToString } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
@@ -31,6 +32,7 @@ function UnforwardedSnackbar({
   onDismiss,
   listRef
 }, ref) {
+  const isPresent = useIsPresent();
   function dismissMe(event) {
     if (event && event.preventDefault) {
       event.preventDefault();
@@ -58,14 +60,15 @@ function UnforwardedSnackbar({
     };
   });
   useEffect(() => {
+    if (explicitDismiss || !isPresent) {
+      return;
+    }
     const timeoutHandle = setTimeout(() => {
-      if (!explicitDismiss) {
-        callbacksRef.current.onDismiss?.();
-        callbacksRef.current.onRemove?.();
-      }
+      callbacksRef.current.onDismiss?.();
+      callbacksRef.current.onRemove?.();
     }, NOTICE_TIMEOUT);
     return () => clearTimeout(timeoutHandle);
-  }, [explicitDismiss]);
+  }, [explicitDismiss, isPresent]);
   const classes = clsx(className, "components-snackbar", {
     "components-snackbar-explicit-dismiss": !!explicitDismiss
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/snackbar/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, useLayoutEffect, useRef, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\nimport Button from '../button';\nimport ExternalLink from '../external-link';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst NOTICE_TIMEOUT = 6000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param message    Message to announce.\n * @param politeness Politeness to announce.\n */\nfunction useSpokenMessage(message, politeness) {\n  const spokenMessage = typeof message === 'string' ? message : renderToString(message);\n  useEffect(() => {\n    if (spokenMessage) {\n      speak(spokenMessage, politeness);\n    }\n  }, [spokenMessage, politeness]);\n}\nfunction UnforwardedSnackbar({\n  className,\n  children,\n  spokenMessage = children,\n  politeness = 'polite',\n  actions = [],\n  onRemove,\n  icon = null,\n  explicitDismiss = false,\n  // onDismiss is a callback executed when the snackbar is dismissed.\n  // It is distinct from onRemove, which _looks_ like a callback but is\n  // actually the function to call to remove the snackbar from the UI.\n  onDismiss,\n  listRef\n}, ref) {\n  function dismissMe(event) {\n    if (event && event.preventDefault) {\n      event.preventDefault();\n    }\n\n    // Prevent focus loss by moving it to the list element.\n    listRef?.current?.focus();\n    onDismiss?.();\n    onRemove?.();\n  }\n  function onActionClick(event, onClick) {\n    event.stopPropagation();\n    onRemove?.();\n    if (onClick) {\n      onClick(event);\n    }\n  }\n  useSpokenMessage(spokenMessage, politeness);\n\n  // The `onDismiss/onRemove` can have unstable references,\n  // trigger side-effect cleanup, and reset timers.\n  const callbacksRef = useRef({\n    onDismiss,\n    onRemove\n  });\n  useLayoutEffect(() => {\n    callbacksRef.current = {\n      onDismiss,\n      onRemove\n    };\n  });\n  useEffect(() => {\n    // Only set up the timeout dismiss if we're not explicitly dismissing.\n    const timeoutHandle = setTimeout(() => {\n      if (!explicitDismiss) {\n        callbacksRef.current.onDismiss?.();\n        callbacksRef.current.onRemove?.();\n      }\n    }, NOTICE_TIMEOUT);\n    return () => clearTimeout(timeoutHandle);\n  }, [explicitDismiss]);\n  const classes = clsx(className, 'components-snackbar', {\n    'components-snackbar-explicit-dismiss': !!explicitDismiss\n  });\n  if (actions && actions.length > 1) {\n    // We need to inform developers that snackbar only accepts 1 action.\n    globalThis.SCRIPT_DEBUG === true ? warning('Snackbar can only have one action. Use Notice if your message requires many actions.') : void 0;\n    // return first element only while keeping it inside an array\n    actions = [actions[0]];\n  }\n  const snackbarContentClassnames = clsx('components-snackbar__content', {\n    'components-snackbar__content-with-icon': !!icon\n  });\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: ref,\n    className: classes,\n    onClick: !explicitDismiss ? dismissMe : undefined,\n    tabIndex: 0,\n    role: !explicitDismiss ? 'button' : undefined,\n    onKeyPress: !explicitDismiss ? dismissMe : undefined,\n    \"aria-label\": !explicitDismiss ? __('Dismiss this notice') : undefined,\n    \"data-testid\": \"snackbar\",\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: snackbarContentClassnames,\n      children: [icon && /*#__PURE__*/_jsx(\"div\", {\n        className: \"components-snackbar__icon\",\n        children: icon\n      }), children, actions.map(({\n        label,\n        onClick,\n        url,\n        openInNewTab = false\n      }, index) => url !== undefined && openInNewTab ? /*#__PURE__*/_jsx(ExternalLink, {\n        href: url,\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index) : /*#__PURE__*/_jsx(Button, {\n        __next40pxDefaultSize: true,\n        href: url,\n        variant: \"link\",\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index)), explicitDismiss && /*#__PURE__*/_jsx(\"span\", {\n        role: \"button\",\n        \"aria-label\": __('Dismiss this notice'),\n        tabIndex: 0,\n        className: \"components-snackbar__dismiss-button\",\n        onClick: dismissMe,\n        onKeyPress: dismissMe,\n        children: \"\\u2715\"\n      })]\n    })\n  });\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef(UnforwardedSnackbar);\nSnackbar.displayName = 'Snackbar';\nexport default Snackbar;"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useIsPresent } from 'framer-motion';\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, useLayoutEffect, useRef, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\nimport Button from '../button';\nimport ExternalLink from '../external-link';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst NOTICE_TIMEOUT = 6000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param message    Message to announce.\n * @param politeness Politeness to announce.\n */\nfunction useSpokenMessage(message, politeness) {\n  const spokenMessage = typeof message === 'string' ? message : renderToString(message);\n  useEffect(() => {\n    if (spokenMessage) {\n      speak(spokenMessage, politeness);\n    }\n  }, [spokenMessage, politeness]);\n}\nfunction UnforwardedSnackbar({\n  className,\n  children,\n  spokenMessage = children,\n  politeness = 'polite',\n  actions = [],\n  onRemove,\n  icon = null,\n  explicitDismiss = false,\n  // onDismiss is a callback executed when the snackbar is dismissed.\n  // It is distinct from onRemove, which _looks_ like a callback but is\n  // actually the function to call to remove the snackbar from the UI.\n  onDismiss,\n  listRef\n}, ref) {\n  const isPresent = useIsPresent();\n  function dismissMe(event) {\n    if (event && event.preventDefault) {\n      event.preventDefault();\n    }\n\n    // Prevent focus loss by moving it to the list element.\n    listRef?.current?.focus();\n    onDismiss?.();\n    onRemove?.();\n  }\n  function onActionClick(event, onClick) {\n    event.stopPropagation();\n    onRemove?.();\n    if (onClick) {\n      onClick(event);\n    }\n  }\n  useSpokenMessage(spokenMessage, politeness);\n\n  // The `onDismiss/onRemove` can have unstable references,\n  // trigger side-effect cleanup, and reset timers.\n  const callbacksRef = useRef({\n    onDismiss,\n    onRemove\n  });\n  useLayoutEffect(() => {\n    callbacksRef.current = {\n      onDismiss,\n      onRemove\n    };\n  });\n  useEffect(() => {\n    if (explicitDismiss || !isPresent) {\n      return;\n    }\n    const timeoutHandle = setTimeout(() => {\n      callbacksRef.current.onDismiss?.();\n      callbacksRef.current.onRemove?.();\n    }, NOTICE_TIMEOUT);\n    return () => clearTimeout(timeoutHandle);\n  }, [explicitDismiss, isPresent]);\n  const classes = clsx(className, 'components-snackbar', {\n    'components-snackbar-explicit-dismiss': !!explicitDismiss\n  });\n  if (actions && actions.length > 1) {\n    // We need to inform developers that snackbar only accepts 1 action.\n    globalThis.SCRIPT_DEBUG === true ? warning('Snackbar can only have one action. Use Notice if your message requires many actions.') : void 0;\n    // return first element only while keeping it inside an array\n    actions = [actions[0]];\n  }\n  const snackbarContentClassnames = clsx('components-snackbar__content', {\n    'components-snackbar__content-with-icon': !!icon\n  });\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: ref,\n    className: classes,\n    onClick: !explicitDismiss ? dismissMe : undefined,\n    tabIndex: 0,\n    role: !explicitDismiss ? 'button' : undefined,\n    onKeyPress: !explicitDismiss ? dismissMe : undefined,\n    \"aria-label\": !explicitDismiss ? __('Dismiss this notice') : undefined,\n    \"data-testid\": \"snackbar\",\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: snackbarContentClassnames,\n      children: [icon && /*#__PURE__*/_jsx(\"div\", {\n        className: \"components-snackbar__icon\",\n        children: icon\n      }), children, actions.map(({\n        label,\n        onClick,\n        url,\n        openInNewTab = false\n      }, index) => url !== undefined && openInNewTab ? /*#__PURE__*/_jsx(ExternalLink, {\n        href: url,\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index) : /*#__PURE__*/_jsx(Button, {\n        __next40pxDefaultSize: true,\n        href: url,\n        variant: \"link\",\n        onClick: event => onActionClick(event, onClick),\n        className: \"components-snackbar__action\",\n        children: label\n      }, index)), explicitDismiss && /*#__PURE__*/_jsx(\"span\", {\n        role: \"button\",\n        \"aria-label\": __('Dismiss this notice'),\n        tabIndex: 0,\n        className: \"components-snackbar__dismiss-button\",\n        onClick: dismissMe,\n        onKeyPress: dismissMe,\n        children: \"\\u2715\"\n      })]\n    })\n  });\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef(UnforwardedSnackbar);\nSnackbar.displayName = 'Snackbar';\nexport default Snackbar;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/textarea-control/index.mjs

@@ -3,7 +3,91 @@ import clsx from "clsx";
 import { useInstanceId } from "@wordpress/compose";
 import { forwardRef } from "@wordpress/element";
 import BaseControl from "../base-control/index.mjs";
-import { StyledTextarea } from "./styles/textarea-control-styles.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/textarea-control/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("22c276380b", ".aa08a6e706634925__textarea{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-interactive-neutral,#8d8d8d);border-radius:var(--wpds-border-radius-sm,2px);color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));display:block;font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:16px;line-height:normal;padding:6px 8px;resize:vertical;width:100%}@media (min-width:600px){.aa08a6e706634925__textarea{font-size:13px;line-height:normal}}.aa08a6e706634925__textarea:hover:not(:disabled,[aria-disabled=true],[type=checkbox]){border-color:var(--wpds-color-stroke-interactive-neutral-active,#6e6e6e)}.aa08a6e706634925__textarea:focus{border-color:var(--wpds-color-stroke-interactive-neutral,#8d8d8d);box-shadow:none;outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}.aa08a6e706634925__textarea::placeholder{color:rgba(30,30,30,.62)}.aa08a6e706634925__textarea{line-height:20px;min-height:38px;padding:9px 11px}.aa08a6e706634925__textarea:disabled{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));color:var(--wp-components-color-gray-600,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa08a6e706634925__textarea::-webkit-input-placeholder{color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 38%)}.aa08a6e706634925__textarea::-moz-placeholder{color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 38%)}.aa08a6e706634925__textarea:-ms-input-placeholder{color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 38%)}.is-dark-theme .aa08a6e706634925__textarea::-webkit-input-placeholder{color:color-mix(in srgb,var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff)),transparent 35%)}.is-dark-theme .aa08a6e706634925__textarea::-moz-placeholder{color:color-mix(in srgb,var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff)),transparent 35%)}.is-dark-theme .aa08a6e706634925__textarea:-ms-input-placeholder{color:color-mix(in srgb,var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff)),transparent 35%)}");
+}
+var style_module_default = { "textarea": "aa08a6e706634925__textarea" };
+
+// packages/components/src/textarea-control/index.tsx
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedTextareaControl(props, ref) {
   const {
@@ -28,8 +112,8 @@ function UnforwardedTextareaControl(props, ref) {
     id,
     help,
     className: classes,
-    children: /* @__PURE__ */ _jsx(StyledTextarea, {
-      className: "components-textarea-control__input",
+    children: /* @__PURE__ */ _jsx("textarea", {
+      className: clsx("components-textarea-control__input", style_module_default.textarea),
       id,
       rows,
       onChange: onChangeValue,

package/build-module/textarea-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/textarea-control/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\nimport BaseControl from '../base-control';\nimport { StyledTextarea } from './styles/textarea-control-styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextareaControl(props, ref) {\n  const {\n    // Prevent passing this to `textarea`.\n    __nextHasNoMarginBottom: _,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    onChange,\n    rows = 4,\n    className,\n    ...additionalProps\n  } = props;\n  const instanceId = useInstanceId(TextareaControl);\n  const id = `inspector-textarea-control-${instanceId}`;\n  const onChangeValue = event => onChange(event.target.value);\n  const classes = clsx('components-textarea-control', className);\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: classes,\n    children: /*#__PURE__*/_jsx(StyledTextarea, {\n      className: \"components-textarea-control__input\",\n      id: id,\n      rows: rows,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      value: value,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n *\n * ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextareaControl = () => {\n *   const [ text, setText ] = useState( '' );\n *\n *   return (\n *     <TextareaControl\n *       label=\"Text\"\n *       help=\"Enter some text\"\n *       value={ text }\n *       onChange={ ( value ) => setText( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef(UnforwardedTextareaControl);\nTextareaControl.displayName = 'TextareaControl';\nexport default TextareaControl;"],
-  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,OAAO,iBAAiB;AACxB,SAAS,sBAAsB;AAC/B,SAAS,OAAO,YAAY;AAC5B,SAAS,2BAA2B,OAAO,KAAK;AAC9C,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,aAAa,cAAc,eAAe;AAChD,QAAM,KAAK,8BAA8B,UAAU;AACnD,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,QAAM,UAAU,KAAK,+BAA+B,SAAS;AAC7D,SAAoB,qBAAK,aAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAuB,qBAAK,gBAAgB;AAAA,MAC1C,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,oBAAoB,CAAC,CAAC,OAAO,KAAK,WAAW;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH;AAyBO,IAAM,kBAAkB,WAAW,0BAA0B;AACpE,gBAAgB,cAAc;AAC9B,IAAO,2BAAQ;",
+  "sources": ["../../src/textarea-control/index.tsx", "../../../style-runtime/src/index.ts", "../../src/textarea-control/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\nimport BaseControl from '../base-control';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedTextareaControl(props, ref) {\n  const {\n    // Prevent passing this to `textarea`.\n    __nextHasNoMarginBottom: _,\n    label,\n    hideLabelFromVision,\n    value,\n    help,\n    onChange,\n    rows = 4,\n    className,\n    ...additionalProps\n  } = props;\n  const instanceId = useInstanceId(TextareaControl);\n  const id = `inspector-textarea-control-${instanceId}`;\n  const onChangeValue = event => onChange(event.target.value);\n  const classes = clsx('components-textarea-control', className);\n  return /*#__PURE__*/_jsx(BaseControl, {\n    label: label,\n    hideLabelFromVision: hideLabelFromVision,\n    id: id,\n    help: help,\n    className: classes,\n    children: /*#__PURE__*/_jsx(\"textarea\", {\n      className: clsx('components-textarea-control__input', styles.textarea),\n      id: id,\n      rows: rows,\n      onChange: onChangeValue,\n      \"aria-describedby\": !!help ? id + '__help' : undefined,\n      value: value,\n      ref: ref,\n      ...additionalProps\n    })\n  });\n}\n\n/**\n * TextareaControls are TextControls that allow for multiple lines of text, and\n * wrap overflow text onto a new line. They are a fixed height and scroll\n * vertically when the cursor reaches the bottom of the field.\n *\n * ```jsx\n * import { TextareaControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTextareaControl = () => {\n *   const [ text, setText ] = useState( '' );\n *\n *   return (\n *     <TextareaControl\n *       label=\"Text\"\n *       help=\"Enter some text\"\n *       value={ text }\n *       onChange={ ( value ) => setText( value ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const TextareaControl = forwardRef(UnforwardedTextareaControl);\nTextareaControl.displayName = 'TextareaControl';\nexport default TextareaControl;", "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(\"22c276380b\", \".aa08a6e706634925__textarea{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-interactive-neutral,#8d8d8d);border-radius:var(--wpds-border-radius-sm,2px);color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));display:block;font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:16px;line-height:normal;padding:6px 8px;resize:vertical;width:100%}@media (min-width:600px){.aa08a6e706634925__textarea{font-size:13px;line-height:normal}}.aa08a6e706634925__textarea:hover:not(:disabled,[aria-disabled=true],[type=checkbox]){border-color:var(--wpds-color-stroke-interactive-neutral-active,#6e6e6e)}.aa08a6e706634925__textarea:focus{border-color:var(--wpds-color-stroke-interactive-neutral,#8d8d8d);box-shadow:none;outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}.aa08a6e706634925__textarea::placeholder{color:rgba(30,30,30,.62)}.aa08a6e706634925__textarea{line-height:20px;min-height:38px;padding:9px 11px}.aa08a6e706634925__textarea:disabled{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d));color:var(--wp-components-color-gray-600,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa08a6e706634925__textarea::-webkit-input-placeholder{color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 38%)}.aa08a6e706634925__textarea::-moz-placeholder{color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 38%)}.aa08a6e706634925__textarea:-ms-input-placeholder{color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 38%)}.is-dark-theme .aa08a6e706634925__textarea::-webkit-input-placeholder{color:color-mix(in srgb,var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff)),transparent 35%)}.is-dark-theme .aa08a6e706634925__textarea::-moz-placeholder{color:color-mix(in srgb,var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff)),transparent 35%)}.is-dark-theme .aa08a6e706634925__textarea:-ms-input-placeholder{color:color-mix(in srgb,var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff)),transparent 35%)}\");\n}\nexport default {\"textarea\":\"aa08a6e706634925__textarea\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control/component.mjs

@@ -84,7 +84,7 @@ function registerStyle(hash, css) {
 
 // packages/components/src/toggle-group-control/toggle-group-control/style.module.scss
 if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
-  registerStyle("ac15433bd4", '.f3fd102dd2f0e90e__toggle-group-control{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid transparent;border-radius:var(--wpds-border-radius-sm,2px);display:inline-flex;height:40px;min-width:0;position:relative}@media not (prefers-reduced-motion){.f3fd102dd2f0e90e__toggle-group-control[data-indicator-animated]:before{transition-duration:.2s;transition-property:transform,border-radius;transition-timing-function:ease-out}}.f3fd102dd2f0e90e__toggle-group-control:before{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border:1px solid var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));border-radius:var(--wpds-border-radius-sm,2px);content:"";height:calc(var(--selected-height, 0)*1px + 2px);left:-2px;opacity:min(1,max(0,var(--selected-width,0),var(--selected-height,0)));outline:2px solid transparent;outline-offset:-3px;pointer-events:none;position:absolute;top:-1px;transform:translateX(calc(var(--selected-left, 0)*1px));width:calc(var(--selected-width, 0)*1px + 2px)}._1344586004ce6119__has-border{border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb))}.aa98fad5b5d333be__has-enclosing-borders:hover{border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa98fad5b5d333be__has-enclosing-borders:focus-within{--focus-color:var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color);outline-color:var(--wp-components-color-accent,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));z-index:1}._4068eff8d72c19b3__is-block{display:flex;width:100%}');
+  registerStyle("a4244dfbf1", '.f3fd102dd2f0e90e__toggle-group-control{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid transparent;border-radius:var(--wpds-border-radius-sm,2px);display:inline-flex;height:40px;min-width:0;position:relative}@media not (prefers-reduced-motion){.f3fd102dd2f0e90e__toggle-group-control[data-indicator-animated]:before{transition-duration:.2s;transition-property:transform,border-radius;transition-timing-function:ease-out}}.f3fd102dd2f0e90e__toggle-group-control:before{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border:1px solid var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));border-radius:var(--wpds-border-radius-sm,2px);content:"";height:calc(var(--selected-height, 0)*1px + 2px);left:-2px;opacity:min(1,max(0,var(--selected-width,0),var(--selected-height,0)));outline:2px solid transparent;outline-offset:-3px;pointer-events:none;position:absolute;top:-1px;transform:translateX(calc(var(--selected-left, 0)*1px));width:calc(var(--selected-width, 0)*1px + 2px)}._1344586004ce6119__has-border{border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb))}.aa98fad5b5d333be__has-enclosing-borders:hover{border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa98fad5b5d333be__has-enclosing-borders:focus-within{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));z-index:1}._4068eff8d72c19b3__is-block{display:flex;width:100%}');
 }
 var style_module_default = { "toggle-group-control": "f3fd102dd2f0e90e__toggle-group-control", "has-border": "_1344586004ce6119__has-border", "has-enclosing-borders": "aa98fad5b5d333be__has-enclosing-borders", "is-block": "_4068eff8d72c19b3__is-block" };