twico-ui 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -1,9 +1,22 @@
 "use client";
-import React22 from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React23 from 'react';
+import React23__default from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
 // components/navigation/Accordion.jsx
+var SUPPORTS_STYLE_HOIST = parseInt(String(React23.version), 10) >= 19;
+function useScopedStyles(id, css) {
+  React23.useInsertionEffect(() => {
+    if (SUPPORTS_STYLE_HOIST) return;
+    if (typeof document === "undefined" || document.getElementById(id)) return;
+    const el = document.createElement("style");
+    el.id = id;
+    el.textContent = css;
+    document.head.appendChild(el);
+  }, [id, css]);
+  return SUPPORTS_STYLE_HOIST ? React23.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
+}
 var ACCORDION_CSS = `
 .twc-accordion { display: flex; flex-direction: column; font-family: var(--font-sans);
   border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
@@ -38,16 +51,10 @@ function Accordion({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-accordion-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-accordion-styles";
-    el.textContent = ACCORDION_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [internal, setInternal] = React22.useState(() => new Set(defaultOpen));
+  const __twcStyles = useScopedStyles("twc-accordion-styles", ACCORDION_CSS);
+  const [internal, setInternal] = React23__default.useState(() => new Set(defaultOpen));
   const open = openProp !== void 0 ? new Set(openProp) : internal;
-  const baseId = React22.useId();
+  const baseId = React23__default.useId();
   function toggle(val) {
     const next = new Set(open);
     if (next.has(val)) next.delete(val);
@@ -58,19 +65,22 @@ function Accordion({
     if (openProp === void 0) setInternal(next);
     onOpenChange?.([...next]);
   }
-  return /* @__PURE__ */ jsx("div", { className: `twc-accordion ${className}`, ...rest, children: items.map((it, i) => {
-    const isOpen = open.has(it.value);
-    const triggerId = `${baseId}-trigger-${i}`;
-    const panelId = `${baseId}-panel-${i}`;
-    return /* @__PURE__ */ jsxs("div", { className: "twc-accordion__item", children: [
-      /* @__PURE__ */ jsxs("button", { type: "button", id: triggerId, className: "twc-accordion__trigger", "data-open": isOpen || void 0, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(it.value), children: [
-        it.icon,
-        /* @__PURE__ */ jsx("span", { className: "twc-accordion__label", children: it.label }),
-        /* @__PURE__ */ jsx("span", { className: "twc-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "twc-accordion__panel", id: panelId, role: "region", "aria-labelledby": triggerId, "data-open": isOpen || void 0, children: /* @__PURE__ */ jsx("div", { className: "twc-accordion__panel-inner", children: /* @__PURE__ */ jsx("div", { className: "twc-accordion__content", children: it.content }) }) })
-    ] }, it.value);
-  }) });
+  return /* @__PURE__ */ jsxs("div", { className: `twc-accordion ${className}`, ...rest, children: [
+    __twcStyles,
+    items.map((it, i) => {
+      const isOpen = open.has(it.value);
+      const triggerId = `${baseId}-trigger-${i}`;
+      const panelId = `${baseId}-panel-${i}`;
+      return /* @__PURE__ */ jsxs("div", { className: "twc-accordion__item", children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", id: triggerId, className: "twc-accordion__trigger", "data-open": isOpen || void 0, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(it.value), children: [
+          it.icon,
+          /* @__PURE__ */ jsx("span", { className: "twc-accordion__label", children: it.label }),
+          /* @__PURE__ */ jsx("span", { className: "twc-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "twc-accordion__panel", id: panelId, role: "region", "aria-labelledby": triggerId, "data-open": isOpen || void 0, children: /* @__PURE__ */ jsx("div", { className: "twc-accordion__panel-inner", children: /* @__PURE__ */ jsx("div", { className: "twc-accordion__content", children: it.content }) }) })
+      ] }, it.value);
+    })
+  ] });
 }
 var ALERT_CSS = `
 .twc-alert {
@@ -125,14 +135,9 @@ function Alert({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-alert-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-alert-styles";
-    el.textContent = ALERT_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-alert-styles", ALERT_CSS);
   return /* @__PURE__ */ jsxs("div", { className: `twc-alert ${className}`, "data-tone": tone, "data-variant": variant, role: "alert", ...rest, children: [
+    __twcStyles,
     /* @__PURE__ */ jsx("span", { className: "twc-alert__icon", "aria-hidden": "true", children: icon || /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
       /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
       /* @__PURE__ */ jsx("path", { d: ICONS[tone] })
@@ -194,14 +199,8 @@ function Avatar({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-avatar-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-avatar-styles";
-    el.textContent = AVATAR_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [errored, setErrored] = React22.useState(false);
+  const __twcStyles = useScopedStyles("twc-avatar-styles", AVATAR_CSS);
+  const [errored, setErrored] = React23__default.useState(false);
   const cleanSrc = safeSrc(src);
   const showImg = cleanSrc && !errored;
   return /* @__PURE__ */ jsxs(
@@ -214,6 +213,7 @@ function Avatar({
       "aria-label": name || "avatar",
       ...rest,
       children: [
+        __twcStyles,
         showImg ? /* @__PURE__ */ jsx("img", { className: "twc-avatar__img", src: cleanSrc, alt: name || "", onError: () => setErrored(true) }, cleanSrc) : initials(name),
         status ? /* @__PURE__ */ jsx("span", { className: "twc-avatar__status", "data-status": status }) : null
       ]
@@ -235,7 +235,7 @@ var MENU_CSS = `
 @media (prefers-reduced-motion: reduce) { .twc-menu[data-state] { animation-duration: 1ms; } }
 .twc-menu[data-flip="true"] { transform-origin: bottom; }
 .twc-menu__header { display: flex; align-items: center; gap: var(--space-2-5); padding: 8px 10px 10px; margin-bottom: var(--space-1-5); border-bottom: var(--border-thin) solid var(--color-divider); }
-.twc-menu__header-main { min-width: 0; }
+.twc-menu__header-main { min-width: 0; display: flex; flex-direction: column; }
 .twc-menu__header-title { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .twc-menu__header-sub { font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .twc-menu__label { padding: 6px 10px 4px; font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); }
@@ -268,29 +268,23 @@ function Menu({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-menu-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-menu-styles";
-    el.textContent = MENU_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [openState, setOpenState] = React22.useState(defaultOpen);
-  const [render, setRender] = React22.useState(false);
-  const [pos, setPos] = React22.useState(null);
-  const [active, setActive] = React22.useState(-1);
-  const wrapRef = React22.useRef(null);
-  const menuRef = React22.useRef(null);
-  const menuId = React22.useId();
+  const __twcStyles = useScopedStyles("twc-menu-styles", MENU_CSS);
+  const [openState, setOpenState] = React23__default.useState(defaultOpen);
+  const [render, setRender] = React23__default.useState(false);
+  const [pos, setPos] = React23__default.useState(null);
+  const [active, setActive] = React23__default.useState(-1);
+  const wrapRef = React23__default.useRef(null);
+  const menuRef = React23__default.useRef(null);
+  const menuId = React23__default.useId();
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React22.useRef(open);
+  const openRef = React23__default.useRef(open);
   openRef.current = open;
-  const controlledRef = React22.useRef(controlled);
+  const controlledRef = React23__default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React22.useRef(onOpenChange);
+  const onOpenChangeRef = React23__default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React22.useCallback((next) => {
+  const setOpen = React23__default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -298,7 +292,7 @@ function Menu({
   }, []);
   const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
   const interactiveIdx = items.map((it, i) => !it.separator && !it.heading ? i : -1).filter((i) => i >= 0);
-  const place = React22.useCallback(() => {
+  const place = React23__default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -313,7 +307,7 @@ function Menu({
     const avail = (flip ? r.top : vh - r.bottom) - gap - M;
     setPos({ top, bottom, left, width: w, flip, maxHeight: Math.max(120, avail) });
   }, [align, width]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -331,7 +325,7 @@ function Menu({
       document.removeEventListener("mousedown", onDown);
     };
   }, [open, place]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -394,6 +388,7 @@ function Menu({
       role: "menu",
       style: { top: pos.top, bottom: pos.bottom, left: pos.left, minWidth: pos.width, width: pos.width, maxHeight: pos.maxHeight },
       children: [
+        __twcStyles,
         header ? /* @__PURE__ */ jsx("div", { className: "twc-menu__header", children: header }) : null,
         items.map((it, i) => {
           if (it.separator) return /* @__PURE__ */ jsx("div", { className: "twc-menu__sep", role: "separator" }, `s${i}`);
@@ -427,7 +422,7 @@ function Menu({
     }
   ) : null;
   const activeDescId = open && active >= 0 ? `${menuId}-item-${active}` : void 0;
-  const triggerEl = React22.isValidElement(trigger) ? React22.cloneElement(trigger, {
+  const triggerEl = React23__default.isValidElement(trigger) ? React23__default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -481,13 +476,7 @@ function AvatarMenu({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-avatar-menu-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-avatar-menu-styles";
-    el.textContent = AVATARMENU_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-avatar-menu-styles", AVATARMENU_CSS);
   const sub = subtitle ?? email;
   const showChev = showChevron ?? showName;
   const header = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -506,6 +495,7 @@ function AvatarMenu({
       "aria-haspopup": "menu",
       "aria-label": `${name || "Account"} menu`,
       children: [
+        __twcStyles,
         /* @__PURE__ */ jsx(Avatar, { name, src, size, status }),
         showName ? /* @__PURE__ */ jsxs("span", { className: "twc-avatar-menu__text", children: [
           /* @__PURE__ */ jsx("span", { className: "twc-avatar-menu__name", children: name }),
@@ -563,14 +553,9 @@ function Badge({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-badge-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-badge-styles";
-    el.textContent = BADGE_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-badge-styles", BADGE_CSS);
   return /* @__PURE__ */ jsxs("span", { className: `twc-badge ${className}`, "data-tone": tone, "data-variant": variant, "data-size": size, ...rest, children: [
+    __twcStyles,
     dot ? /* @__PURE__ */ jsx("span", { className: "twc-badge__dot" }) : null,
     children
   ] });
@@ -600,14 +585,8 @@ function Breadcrumb({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-breadcrumb-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-breadcrumb-styles";
-    el.textContent = BREADCRUMB_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [expanded, setExpanded] = React22.useState(false);
+  const __twcStyles = useScopedStyles("twc-breadcrumb-styles", BREADCRUMB_CSS);
+  const [expanded, setExpanded] = React23__default.useState(false);
   const sep = separator || /* @__PURE__ */ jsx(ChevronSep, {});
   let display = items;
   if (maxItems > 0 && items.length > maxItems && !expanded) {
@@ -616,35 +595,38 @@ function Breadcrumb({
     const tail = items.slice(items.length - keepTail);
     display = [...head, { ellipsis: true }, ...tail];
   }
-  return /* @__PURE__ */ jsx("nav", { className: `twc-breadcrumb ${className}`, "aria-label": "Breadcrumb", ...rest, children: display.map((it, i) => {
-    const last = i === display.length - 1;
-    return /* @__PURE__ */ jsxs(React22.Fragment, { children: [
-      it.ellipsis ? /* @__PURE__ */ jsx("button", { className: "twc-breadcrumb__ellipsis", "aria-label": "Show more", onClick: () => setExpanded(true), children: "\u2026" }) : last ? /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: "twc-breadcrumb__item",
-          "aria-current": "page",
-          onClick: it.onClick,
-          children: [
-            it.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: it.icon }) : null,
-            it.label
-          ]
-        }
-      ) : /* @__PURE__ */ jsxs(
-        "a",
-        {
-          className: "twc-breadcrumb__item",
-          href: safeHref(it.href) || "#",
-          onClick: it.onClick,
-          children: [
-            it.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: it.icon }) : null,
-            it.label
-          ]
-        }
-      ),
-      !last ? /* @__PURE__ */ jsx("span", { className: "twc-breadcrumb__sep", "aria-hidden": "true", children: sep }) : null
-    ] }, i);
-  }) });
+  return /* @__PURE__ */ jsxs("nav", { className: `twc-breadcrumb ${className}`, "aria-label": "Breadcrumb", ...rest, children: [
+    __twcStyles,
+    display.map((it, i) => {
+      const last = i === display.length - 1;
+      return /* @__PURE__ */ jsxs(React23__default.Fragment, { children: [
+        it.ellipsis ? /* @__PURE__ */ jsx("button", { className: "twc-breadcrumb__ellipsis", "aria-label": "Show more", onClick: () => setExpanded(true), children: "\u2026" }) : last ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "twc-breadcrumb__item",
+            "aria-current": "page",
+            onClick: it.onClick,
+            children: [
+              it.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: it.icon }) : null,
+              it.label
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "a",
+          {
+            className: "twc-breadcrumb__item",
+            href: safeHref(it.href) || "#",
+            onClick: it.onClick,
+            children: [
+              it.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: it.icon }) : null,
+              it.label
+            ]
+          }
+        ),
+        !last ? /* @__PURE__ */ jsx("span", { className: "twc-breadcrumb__sep", "aria-hidden": "true", children: sep }) : null
+      ] }, i);
+    })
+  ] });
 }
 var CSS2 = `
 .twc-btn {
@@ -741,15 +723,6 @@ function safeHref2(url) {
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function useInjectedStyle(id, css) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById(id)) return;
-    const el = document.createElement("style");
-    el.id = id;
-    el.textContent = css;
-    document.head.appendChild(el);
-  }, [id, css]);
-}
 function Button({
   children,
   variant = "solid",
@@ -766,8 +739,8 @@ function Button({
   onClick,
   ...rest
 }) {
-  useInjectedStyle("twc-btn-styles", CSS2);
-  const [ripples, setRipples] = React22.useState([]);
+  const __twcStyles = useScopedStyles("twc-btn-styles", CSS2);
+  const [ripples, setRipples] = React23__default.useState([]);
   const Tag2 = as;
   const inert = Tag2 === "a" && (disabled || loading);
   function handleClick(e) {
@@ -803,6 +776,7 @@ function Button({
       onClick: handleClick,
       ...rest,
       children: [
+        __twcStyles,
         /* @__PURE__ */ jsxs("span", { className: "twc-btn__content", children: [
           leftIcon ? /* @__PURE__ */ jsx("span", { className: "twc-btn__icon", "aria-hidden": "true", children: leftIcon }) : null,
           children,
@@ -860,13 +834,7 @@ function Card({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-card-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-card-styles";
-    el.textContent = CARD_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-card-styles", CARD_CSS);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -877,6 +845,7 @@ function Card({
       "data-full": fullHeight || void 0,
       ...rest,
       children: [
+        __twcStyles,
         title || subtitle ? /* @__PURE__ */ jsxs("div", { className: "twc-card__header", children: [
           title ? /* @__PURE__ */ jsx("div", { className: "twc-card__title", children: title }) : null,
           subtitle ? /* @__PURE__ */ jsx("div", { className: "twc-card__subtitle", children: subtitle }) : null
@@ -922,26 +891,20 @@ function Carousel({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-carousel-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-carousel-styles";
-    el.textContent = CAROUSEL_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const slides = React22.Children.toArray(children);
+  const __twcStyles = useScopedStyles("twc-carousel-styles", CAROUSEL_CSS);
+  const slides = React23__default.Children.toArray(children);
   const count = slides.length;
-  const [internal, setInternal] = React22.useState(defaultIndex);
+  const [internal, setInternal] = React23__default.useState(defaultIndex);
   const index = indexProp !== void 0 ? indexProp : internal;
-  const [paused, setPaused] = React22.useState(false);
-  const setIndex = React22.useCallback((i) => {
+  const [paused, setPaused] = React23__default.useState(false);
+  const setIndex = React23__default.useCallback((i) => {
     if (indexProp === void 0) setInternal(i);
     onIndexChange?.(i);
   }, [indexProp, onIndexChange]);
-  const go = React22.useCallback((i) => {
+  const go = React23__default.useCallback((i) => {
     setIndex(loop ? (i + count) % count : Math.min(Math.max(i, 0), count - 1));
   }, [count, loop, setIndex]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!autoPlay || paused || count <= 1) return;
     const t = setInterval(() => {
       const next = loop ? (index + 1) % count : index + 1 >= count ? index : index + 1;
@@ -963,6 +926,7 @@ function Carousel({
       "aria-roledescription": "carousel",
       ...rest,
       children: [
+        __twcStyles,
         /* @__PURE__ */ jsx("div", { className: "twc-carousel__viewport", children: /* @__PURE__ */ jsx("div", { className: "twc-carousel__track", style: { transform: `translateX(-${index * 100}%)` }, children: slides.map((s, i) => /* @__PURE__ */ jsx("div", { className: "twc-carousel__slide", role: "group", "aria-roledescription": "slide", "aria-label": `${i + 1} of ${count}`, "aria-hidden": i !== index || void 0, inert: i !== index || void 0, children: s }, i)) }) }),
         showArrows && count > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("button", { className: "twc-carousel__arrow", "data-dir": "prev", "aria-label": "Previous", disabled: atStart, onClick: () => go(index - 1), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
@@ -1003,13 +967,7 @@ function Chart({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-chart-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-chart-styles";
-    el.textContent = CHART_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-chart-styles", CHART_CSS);
   const keys = series || ["value"];
   const palette = colors && colors.length ? colors : SERIES_COLORS;
   const W = 600, H = height, padL = showAxis ? 40 : 8, padR = 8, padT = 12, padB = showAxis ? 26 : 8;
@@ -1021,6 +979,7 @@ function Chart({
   const ticks = 4;
   const svgAriaLabel = ariaLabelProp ?? ariaLabel ?? `${type} chart`;
   return /* @__PURE__ */ jsxs("div", { className: `twc-chart ${className}`, ...rest, children: [
+    __twcStyles,
     /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${W} ${H}`, role: "img", "aria-label": svgAriaLabel, preserveAspectRatio: "none", children: [
       showGrid ? Array.from({ length: ticks + 1 }).map((_, i) => {
         const gy = padT + innerH / ticks * i;
@@ -1104,11 +1063,7 @@ function Checkbox({
   onChange,
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-checkbox-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-checkbox-styles";
-    el.textContent = `
+  const __twcStyles = useScopedStyles("twc-checkbox-styles", `
 .twc-check { display: inline-flex; align-items: flex-start; gap: var(--space-2-5); cursor: pointer; font-family: var(--font-sans); }
 /* tone \u2192 accent set (default primary). Mirrors Button's --_accent model; Badge's tone vocabulary. */
 .twc-check { --_accent: var(--color-primary); --_accent-fg: var(--color-primary-fg); --_accent-subtle: var(--color-primary-subtle); --_accent-subtle-fg: var(--color-primary-subtle-fg); --_accent-border: var(--color-primary-border); }
@@ -1146,19 +1101,18 @@ function Checkbox({
 .twc-check__desc { font-size: var(--text-xs); color: var(--color-text-muted); }
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
-`;
-    document.head.appendChild(el);
-  }, []);
-  const autoId = React22.useId();
+`);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
-  const ref = React22.useRef(null);
-  React22.useEffect(() => {
+  const ref = React23__default.useRef(null);
+  React23__default.useEffect(() => {
     if (ref.current) ref.current.indeterminate = indeterminate;
   }, [indeterminate]);
   const describedBy = [rest["aria-describedby"], error ? errId : null].filter(Boolean).join(" ") || void 0;
   const control = /* @__PURE__ */ jsxs("label", { className: `twc-check ${className}`, "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, htmlFor: fieldId, children: [
+    __twcStyles,
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -1288,33 +1242,22 @@ function ColorPicker({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (!document.getElementById("twc-field-styles")) {
-      const fel = document.createElement("style");
-      fel.id = "twc-field-styles";
-      fel.textContent = FIELD_CSS;
-      document.head.appendChild(fel);
-    }
-    if (document.getElementById("twc-colorpicker-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-colorpicker-styles";
-    el.textContent = COLORPICKER_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [internal, setInternal] = React22.useState(defaultValue);
+  const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
+  const __twcStyles1 = useScopedStyles("twc-colorpicker-styles", COLORPICKER_CSS);
+  const [internal, setInternal] = React23__default.useState(defaultValue);
   const hex = (value !== void 0 ? value : internal) || "#000000";
-  const lastValidRef = React22.useRef(hex);
+  const lastValidRef = React23__default.useRef(hex);
   if (/^#[0-9a-f]{6}$/i.test(hex)) lastValidRef.current = hex;
-  const [open, setOpen] = React22.useState(false);
-  const [hsv, setHsv] = React22.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94 });
-  const [coords, setCoords] = React22.useState(null);
-  const wrapRef = React22.useRef(null);
-  const triggerRef = React22.useRef(null);
-  const popRef = React22.useRef(null);
-  const areaRef = React22.useRef(null);
-  const hueRef = React22.useRef(null);
+  const [open, setOpen] = React23__default.useState(false);
+  const [hsv, setHsv] = React23__default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94 });
+  const [coords, setCoords] = React23__default.useState(null);
+  const wrapRef = React23__default.useRef(null);
+  const triggerRef = React23__default.useRef(null);
+  const popRef = React23__default.useRef(null);
+  const areaRef = React23__default.useRef(null);
+  const hueRef = React23__default.useRef(null);
   const POP_W = 240;
-  const place = React22.useCallback(() => {
+  const place = React23__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1325,7 +1268,7 @@ function ColorPicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -1336,17 +1279,17 @@ function ColorPicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  const labelId = React22.useId();
+  const labelId = React23__default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     const v = hexToHsv(hex);
     if (v && hsvToHex(v.h, v.s, v.v).toLowerCase() !== hsvToHex(hsv.h, hsv.s, hsv.v).toLowerCase()) setHsv(v);
   }, [hex]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1363,8 +1306,8 @@ function ColorPicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React22.useRef(false);
-  React22.useEffect(() => {
+  const prevOpen = React23__default.useRef(false);
+  React23__default.useEffect(() => {
     let id;
     if (!prevOpen.current && open) {
       id = setTimeout(() => areaRef.current?.focus({ preventScroll: true }), 20);
@@ -1424,6 +1367,8 @@ function ColorPicker({
     commit({ ...hsv, h });
   };
   return /* @__PURE__ */ jsxs("div", { className: `twc-cp twc-field ${className}`, ref: wrapRef, ...rest, children: [
+    __twcStyles0,
+    __twcStyles1,
     label ? /* @__PURE__ */ jsxs("span", { className: "twc-field__label", id: labelId, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -1681,36 +1626,30 @@ function Combobox({
   onKeyDown,
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-combo-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-combo-styles";
-    el.textContent = COMBO_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const groups = React22.useMemo(() => normalizeGroups(options), [options]);
-  const flat = React22.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React22.useId();
+  const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
+  const groups = React23__default.useMemo(() => normalizeGroups(options), [options]);
+  const flat = React23__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React22.useState(defaultValue);
+  const [internal, setInternal] = React23__default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
   const selected = flat.find((o) => o.value === current);
-  const [open, setOpen] = React22.useState(false);
-  const [query, setQuery] = React22.useState("");
-  const [active, setActive] = React22.useState(0);
-  const [coords, setCoords] = React22.useState(null);
-  const wrapRef = React22.useRef(null);
-  const controlRef = React22.useRef(null);
-  const inputRef = React22.useRef(null);
-  const popRef = React22.useRef(null);
-  const listRef = React22.useRef(null);
-  const activeRef = React22.useRef(null);
-  const fGroups = React22.useMemo(
+  const [open, setOpen] = React23__default.useState(false);
+  const [query, setQuery] = React23__default.useState("");
+  const [active, setActive] = React23__default.useState(0);
+  const [coords, setCoords] = React23__default.useState(null);
+  const wrapRef = React23__default.useRef(null);
+  const controlRef = React23__default.useRef(null);
+  const inputRef = React23__default.useRef(null);
+  const popRef = React23__default.useRef(null);
+  const listRef = React23__default.useRef(null);
+  const activeRef = React23__default.useRef(null);
+  const fGroups = React23__default.useMemo(
     () => groups.map((g) => ({ group: g.group, options: g.options.filter((o) => matches(o, query.trim())) })).filter((g) => g.options.length),
     [groups, query]
   );
-  const visible = React22.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
-  const place = React22.useCallback(() => {
+  const visible = React23__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const place = React23__default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1725,7 +1664,7 @@ function Combobox({
       flip
     });
   }, [placement, minWidth]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -1736,7 +1675,7 @@ function Combobox({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1746,10 +1685,10 @@ function Combobox({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (open) ensureVisible(listRef.current, activeRef.current);
   }, [active, open]);
   function openMenu() {
@@ -1792,7 +1731,7 @@ function Combobox({
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
   let counter = -1;
-  const popInner = /* @__PURE__ */ jsx("div", { className: "twc-pop__list", ref: listRef, children: visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: "No results found" }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React22.Fragment, { children: [
+  const popInner = /* @__PURE__ */ jsx("div", { className: "twc-pop__list", ref: listRef, children: visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: "No results found" }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React23__default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
@@ -1849,6 +1788,7 @@ function Combobox({
     }
   }
   return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
+    __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -1973,21 +1913,15 @@ function CommandPalette({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-cmdk-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-cmdk-styles";
-    el.textContent = COMMAND_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [query, setQuery] = React22.useState("");
-  const [active, setActive] = React22.useState(0);
-  const inputRef = React22.useRef(null);
-  const listRef = React22.useRef(null);
-  const paletteRef = React22.useRef(null);
-  const baseId = React22.useId();
-  const [mounted, setMounted] = React22.useState(open);
-  React22.useEffect(() => {
+  const __twcStyles = useScopedStyles("twc-cmdk-styles", COMMAND_CSS);
+  const [query, setQuery] = React23__default.useState("");
+  const [active, setActive] = React23__default.useState(0);
+  const inputRef = React23__default.useRef(null);
+  const listRef = React23__default.useRef(null);
+  const paletteRef = React23__default.useRef(null);
+  const baseId = React23__default.useId();
+  const [mounted, setMounted] = React23__default.useState(open);
+  React23__default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -1995,7 +1929,7 @@ function CommandPalette({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return void 0;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -2003,7 +1937,7 @@ function CommandPalette({
       document.body.style.overflow = prev;
     };
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (open) {
       setQuery("");
       setActive(0);
@@ -2011,14 +1945,14 @@ function CommandPalette({
       return () => clearTimeout(t);
     }
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     const prevFocused = document.activeElement;
     return () => {
       if (prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
     };
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     const focusables = (node) => node ? Array.from(
       node.querySelectorAll(
@@ -2054,7 +1988,7 @@ function CommandPalette({
     return () => document.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   const q = query.trim().toLowerCase();
-  const filtered = React22.useMemo(() => commands.filter(
+  const filtered = React23__default.useMemo(() => commands.filter(
     (c) => !q || c.label.toLowerCase().includes(q) || (c.keywords || "").toLowerCase().includes(q) || (c.group || "").toLowerCase().includes(q)
   ), [commands, q]);
   const groups = [];
@@ -2069,7 +2003,7 @@ function CommandPalette({
     g.items.push(c);
     flat.push(c);
   });
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     setActive(0);
   }, [query]);
   const run = (cmd) => {
@@ -2089,7 +2023,7 @@ function CommandPalette({
       if (cmd) run(cmd);
     }
   }
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     const node = listRef.current?.querySelector('[data-active="true"]');
     if (node) node.scrollIntoView({ block: "nearest" });
   }, [active]);
@@ -2099,63 +2033,66 @@ function CommandPalette({
   const optionId = (i) => `${baseId}-opt-${i}`;
   const activeId = flat[active] ? optionId(active) : void 0;
   let idx = -1;
-  const overlay = /* @__PURE__ */ jsx("div", { className: "twc-cmdk__overlay", "data-state": state, onMouseDown: (e) => {
+  const overlay = /* @__PURE__ */ jsxs("div", { className: "twc-cmdk__overlay", "data-state": state, onMouseDown: (e) => {
     if (e.target === e.currentTarget) onClose?.();
-  }, children: /* @__PURE__ */ jsxs("div", { ref: paletteRef, className: `twc-cmdk ${className}`, "data-state": state, role: "dialog", "aria-modal": "true", "aria-label": "Command palette", tabIndex: -1, ...rest, children: [
-    /* @__PURE__ */ jsxs("div", { className: "twc-cmdk__search", children: [
-      /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: inputRef,
-          className: "twc-cmdk__input",
-          value: query,
-          placeholder,
-          role: "combobox",
-          "aria-expanded": "true",
-          "aria-controls": listId,
-          "aria-activedescendant": activeId,
-          onChange: (e) => setQuery(e.target.value),
-          onKeyDown
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "twc-cmdk__kbd", children: "esc" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "twc-cmdk__list", id: listId, role: "listbox", ref: listRef, children: flat.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-cmdk__empty", children: emptyText }) : groups.map((g) => /* @__PURE__ */ jsxs("div", { role: "group", children: [
-      g.key ? /* @__PURE__ */ jsx("div", { className: "twc-cmdk__group-label", children: g.key }) : null,
-      g.items.map((c) => {
-        idx += 1;
-        const i = idx;
-        return /* @__PURE__ */ jsxs(
-          "button",
+  }, children: [
+    __twcStyles,
+    /* @__PURE__ */ jsxs("div", { ref: paletteRef, className: `twc-cmdk ${className}`, "data-state": state, role: "dialog", "aria-modal": "true", "aria-label": "Command palette", tabIndex: -1, ...rest, children: [
+      /* @__PURE__ */ jsxs("div", { className: "twc-cmdk__search", children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
           {
-            id: optionId(i),
-            type: "button",
-            className: "twc-cmdk__item",
-            role: "option",
-            "aria-selected": i === active,
-            tabIndex: -1,
-            "data-active": i === active || void 0,
-            onMouseEnter: () => setActive(i),
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => run(c),
-            children: [
-              c.icon ? /* @__PURE__ */ jsx("span", { className: "twc-cmdk__item-ic", "aria-hidden": "true", children: c.icon }) : null,
-              /* @__PURE__ */ jsxs("span", { className: "twc-cmdk__item-main", children: [
-                /* @__PURE__ */ jsx("span", { className: "twc-cmdk__item-label", children: c.label }),
-                c.description ? /* @__PURE__ */ jsx("span", { className: "twc-cmdk__item-desc", children: c.description }) : null
-              ] }),
-              c.shortcut ? /* @__PURE__ */ jsx("span", { className: "twc-cmdk__item-sc", children: c.shortcut }) : null
-            ]
-          },
-          c.id || i
-        );
-      })
-    ] }, g.key || "_")) })
-  ] }) });
+            ref: inputRef,
+            className: "twc-cmdk__input",
+            value: query,
+            placeholder,
+            role: "combobox",
+            "aria-expanded": "true",
+            "aria-controls": listId,
+            "aria-activedescendant": activeId,
+            onChange: (e) => setQuery(e.target.value),
+            onKeyDown
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "twc-cmdk__kbd", children: "esc" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "twc-cmdk__list", id: listId, role: "listbox", ref: listRef, children: flat.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-cmdk__empty", children: emptyText }) : groups.map((g) => /* @__PURE__ */ jsxs("div", { role: "group", children: [
+        g.key ? /* @__PURE__ */ jsx("div", { className: "twc-cmdk__group-label", children: g.key }) : null,
+        g.items.map((c) => {
+          idx += 1;
+          const i = idx;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              id: optionId(i),
+              type: "button",
+              className: "twc-cmdk__item",
+              role: "option",
+              "aria-selected": i === active,
+              tabIndex: -1,
+              "data-active": i === active || void 0,
+              onMouseEnter: () => setActive(i),
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => run(c),
+              children: [
+                c.icon ? /* @__PURE__ */ jsx("span", { className: "twc-cmdk__item-ic", "aria-hidden": "true", children: c.icon }) : null,
+                /* @__PURE__ */ jsxs("span", { className: "twc-cmdk__item-main", children: [
+                  /* @__PURE__ */ jsx("span", { className: "twc-cmdk__item-label", children: c.label }),
+                  c.description ? /* @__PURE__ */ jsx("span", { className: "twc-cmdk__item-desc", children: c.description }) : null
+                ] }),
+                c.shortcut ? /* @__PURE__ */ jsx("span", { className: "twc-cmdk__item-sc", children: c.shortcut }) : null
+              ]
+            },
+            c.id || i
+          );
+        })
+      ] }, g.key || "_")) })
+    ] })
+  ] });
   const RD = typeof createPortal === "function" ? createPortal : null;
   return RD ? RD(overlay, document.body) : overlay;
 }
@@ -2234,15 +2171,6 @@ var CUR_CSS = `
 .twc-cur__el::placeholder { color: var(--color-text-subtle); }
 .twc-cur__el::-webkit-outer-spin-button, .twc-cur__el::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 `;
-function useCurStyles() {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-cur-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-cur-styles";
-    el.textContent = CUR_CSS;
-    document.head.appendChild(el);
-  }, []);
-}
 function Currency({
   label,
   hint,
@@ -2264,16 +2192,16 @@ function Currency({
   className = "",
   ...rest
 }) {
-  useCurStyles();
+  const __twcStyles = useScopedStyles("twc-cur-styles", CUR_CSS);
   const meta = CURRENCIES[currency] || CURRENCIES.USD;
   const prec = precision != null ? precision : meta.precision;
   const sym = symbol != null ? symbol : meta.symbol;
   const cur = code != null ? code : meta.code;
-  const autoId = React22.useId();
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const controlled = value !== void 0;
-  const [internal, setInternal] = React22.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [internal, setInternal] = React23__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
   const shown = controlled ? clampPrecision(String(value ?? ""), prec) : internal;
   const describedBy = [error ? `${fieldId}-error` : hint ? `${fieldId}-hint` : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   function handleChange(e) {
@@ -2292,6 +2220,7 @@ function Currency({
     onValueChange?.(Number(fixed), fixed);
   }
   return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, children: [
+    __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -2445,39 +2374,33 @@ function Select({
   onKeyDown,
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-select-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-select-styles";
-    el.textContent = SELECT_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const groups = React22.useMemo(() => normalizeGroups2(options), [options]);
-  const flat = React22.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React22.useId();
+  const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
+  const groups = React23__default.useMemo(() => normalizeGroups2(options), [options]);
+  const flat = React23__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React22.useState(defaultValue);
+  const [internal, setInternal] = React23__default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
-  const [open, setOpen] = React22.useState(false);
-  const [render, setRender] = React22.useState(false);
-  const [active, setActive] = React22.useState(0);
-  const [coords, setCoords] = React22.useState(null);
-  const [query, setQuery] = React22.useState("");
-  const wrapRef = React22.useRef(null);
-  const triggerRef = React22.useRef(null);
-  const popRef = React22.useRef(null);
-  const listRef = React22.useRef(null);
-  const activeRef = React22.useRef(null);
-  const searchRef = React22.useRef(null);
+  const [open, setOpen] = React23__default.useState(false);
+  const [render, setRender] = React23__default.useState(false);
+  const [active, setActive] = React23__default.useState(0);
+  const [coords, setCoords] = React23__default.useState(null);
+  const [query, setQuery] = React23__default.useState("");
+  const wrapRef = React23__default.useRef(null);
+  const triggerRef = React23__default.useRef(null);
+  const popRef = React23__default.useRef(null);
+  const listRef = React23__default.useRef(null);
+  const activeRef = React23__default.useRef(null);
+  const searchRef = React23__default.useRef(null);
   const showSearch = searchable === void 0 ? flat.length > 5 : searchable;
-  const fGroups = React22.useMemo(() => {
+  const fGroups = React23__default.useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return groups;
     return groups.map((g) => ({ group: g.group, options: g.options.filter((o) => o.label.toLowerCase().includes(q) || o.description && o.description.toLowerCase().includes(q)) })).filter((g) => g.options.length);
   }, [groups, query]);
-  const visible = React22.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React23__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
   const selected = flat.find((o) => o.value === current);
-  const place = React22.useCallback(() => {
+  const place = React23__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -2492,7 +2415,7 @@ function Select({
       flip
     });
   }, [placement, minWidth]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -2503,7 +2426,7 @@ function Select({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     const idx = flat.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
@@ -2519,13 +2442,13 @@ function Select({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (open) ensureVisible2(listRef.current, activeRef.current);
   }, [active, open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -2533,8 +2456,8 @@ function Select({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  const prevOpen = React22.useRef(false);
-  React22.useEffect(() => {
+  const prevOpen = React23__default.useRef(false);
+  React23__default.useEffect(() => {
     if (prevOpen.current && !open) {
       const ae = typeof document !== "undefined" ? document.activeElement : null;
       if (popRef.current && ae && popRef.current.contains(ae)) triggerRef.current?.focus();
@@ -2607,7 +2530,7 @@ function Select({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsx("div", { className: "twc-pop__list", ref: listRef, children: visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: "No results found" }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React22.Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "twc-pop__list", ref: listRef, children: visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: "No results found" }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React23__default.Fragment, { children: [
       g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
       g.options.map((o) => {
         counter += 1;
@@ -2666,6 +2589,7 @@ function Select({
     }
   }
   return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
+    __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -2758,15 +2682,6 @@ var CURF_CSS = `
 .twc-curf__pick .twc-sel__trigger:focus-visible { box-shadow: var(--ring); }
 .twc-curf__pick .twc-sel__value { font-weight: var(--font-semibold); color: var(--color-text-muted); }
 `;
-function useCurfStyles() {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-curf-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-curf-styles";
-    el.textContent = CURF_CSS;
-    document.head.appendChild(el);
-  }, []);
-}
 function CurrencyField({
   label,
   hint,
@@ -2788,20 +2703,20 @@ function CurrencyField({
   className = "",
   ...rest
 }) {
-  useCurfStyles();
-  const autoId = React22.useId();
+  const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const curControlled = currency !== void 0;
-  const [curInternal, setCurInternal] = React22.useState(defaultCurrency);
+  const [curInternal, setCurInternal] = React23__default.useState(defaultCurrency);
   const cur = curControlled ? currency : curInternal;
   const meta = CURRENCIES[cur] || CURRENCIES.USD;
   const prec = meta.precision;
   const valControlled = value !== void 0;
-  const [valInternal, setValInternal] = React22.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [valInternal, setValInternal] = React23__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
   const shown = valControlled ? clampPrecision(String(value ?? ""), prec) : valInternal;
   const describedBy = [error ? `${fieldId}-error` : hint ? `${fieldId}-hint` : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
-  const options = React22.useMemo(() => {
+  const options = React23__default.useMemo(() => {
     if (!currencies) return CURRENCY_OPTIONS;
     return currencies.map((c) => typeof c === "string" ? { value: c, label: `${c} \u2014 ${(CURRENCIES[c] || {}).label || c}` } : c);
   }, [currencies]);
@@ -2828,6 +2743,7 @@ function CurrencyField({
     onValueChange?.(Number(fixed), fixed, cur);
   }
   return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, children: [
+    __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -2919,15 +2835,6 @@ var FIELD_CSS2 = `
 .twc-input__reveal:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-input__reveal svg { width: 17px; height: 17px; }
 `;
-function useFieldStyles() {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-field-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-field-styles";
-    el.textContent = FIELD_CSS2;
-    document.head.appendChild(el);
-  }, []);
-}
 function Input({
   label,
   hint,
@@ -2943,13 +2850,13 @@ function Input({
   className = "",
   ...rest
 }) {
-  useFieldStyles();
-  const autoId = React22.useId();
+  const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
   const isPassword = type === "password";
-  const [revealed, setRevealed] = React22.useState(false);
+  const [revealed, setRevealed] = React23__default.useState(false);
   const effectiveType = isPassword && revealed ? "text" : type;
   const suffix = rightIcon ? /* @__PURE__ */ jsx("span", { className: "twc-input__affix", children: rightIcon }) : isPassword ? /* @__PURE__ */ jsx(
     "button",
@@ -2973,6 +2880,7 @@ function Input({
     }
   ) : null;
   return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, children: [
+    __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -3128,35 +3036,29 @@ function MultiSelect({
   onKeyDown,
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-ms-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-ms-styles";
-    el.textContent = MULTI_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const groups = React22.useMemo(() => normalizeGroups3(options), [options]);
-  const flat = React22.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React22.useId();
+  const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
+  const groups = React23__default.useMemo(() => normalizeGroups3(options), [options]);
+  const flat = React23__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React22.useState(defaultValue);
+  const [internal, setInternal] = React23__default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React22.useState(false);
-  const [query, setQuery] = React22.useState("");
-  const [active, setActive] = React22.useState(0);
-  const [coords, setCoords] = React22.useState(null);
-  const wrapRef = React22.useRef(null);
-  const controlRef = React22.useRef(null);
-  const inputRef = React22.useRef(null);
-  const popRef = React22.useRef(null);
-  const listRef = React22.useRef(null);
-  const activeRef = React22.useRef(null);
-  const fGroups = React22.useMemo(
+  const [open, setOpen] = React23__default.useState(false);
+  const [query, setQuery] = React23__default.useState("");
+  const [active, setActive] = React23__default.useState(0);
+  const [coords, setCoords] = React23__default.useState(null);
+  const wrapRef = React23__default.useRef(null);
+  const controlRef = React23__default.useRef(null);
+  const inputRef = React23__default.useRef(null);
+  const popRef = React23__default.useRef(null);
+  const listRef = React23__default.useRef(null);
+  const activeRef = React23__default.useRef(null);
+  const fGroups = React23__default.useMemo(
     () => groups.map((g) => ({ group: g.group, options: g.options.filter((o) => matches2(o, query.trim())) })).filter((g) => g.options.length),
     [groups, query]
   );
-  const visible = React22.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
-  const place = React22.useCallback(() => {
+  const visible = React23__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const place = React23__default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -3171,7 +3073,7 @@ function MultiSelect({
       flip
     });
   }, [placement, minWidth]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -3182,7 +3084,7 @@ function MultiSelect({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -3193,10 +3095,10 @@ function MultiSelect({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (open) ensureVisible3(listRef.current, activeRef.current);
   }, [active, open]);
   function commit(next) {
@@ -3233,7 +3135,7 @@ function MultiSelect({
   const descId = `${fieldId}-desc`;
   const describedBy = error || hint ? descId : void 0;
   let counter = -1;
-  const popInner = /* @__PURE__ */ jsx("div", { className: "twc-pop__list", id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": "true", children: visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: "No results found" }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React22.Fragment, { children: [
+  const popInner = /* @__PURE__ */ jsx("div", { className: "twc-pop__list", id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": "true", children: visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: "No results found" }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React23__default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
@@ -3288,6 +3190,7 @@ function MultiSelect({
     }
   }
   return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, ref: wrapRef, children: [
+    __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -3445,14 +3348,8 @@ function Pagination({
   ...rest
 }) {
   const jumperEnabled = showPageJumper ?? showJumper;
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-pagination-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-pagination-styles";
-    el.textContent = PAGINATION_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [internal, setInternal] = React22.useState(defaultPage);
+  const __twcStyles = useScopedStyles("twc-pagination-styles", PAGINATION_CSS);
+  const [internal, setInternal] = React23__default.useState(defaultPage);
   const page = pageProp !== void 0 ? pageProp : internal;
   const pages = buildPages(page, total, siblings, boundaries);
   const go = (p) => {
@@ -3460,13 +3357,14 @@ function Pagination({
     if (pageProp === void 0) setInternal(p);
     onChange?.(p);
   };
-  const [jump, setJump] = React22.useState("");
+  const [jump, setJump] = React23__default.useState("");
   const submitJump = () => {
     const n = parseInt(jump, 10);
     if (!Number.isNaN(n)) go(Math.min(Math.max(n, 1), total));
     setJump("");
   };
   return /* @__PURE__ */ jsxs("nav", { className: `twc-pagination ${className}`, "aria-label": "Pagination", ...rest, children: [
+    __twcStyles,
     /* @__PURE__ */ jsx("button", { type: "button", className: "twc-page", "data-size": size, onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "Previous page", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
     pages.map(
       (p, i) => p === "\u2026" ? /* @__PURE__ */ jsx("span", { className: "twc-page twc-page__ellipsis", "aria-hidden": "true", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
@@ -4069,9 +3967,9 @@ function runDatatableQuery(rows, query, options = {}) {
   return { rows: page, total, filtered: out };
 }
 function useFloating() {
-  const [pos, setPos] = React22.useState(null);
-  const cfg = React22.useRef(null);
-  const place = React22.useCallback(() => {
+  const [pos, setPos] = React23__default.useState(null);
+  const cfg = React23__default.useRef(null);
+  const place = React23__default.useCallback(() => {
     const c = cfg.current;
     if (!c || !c.el || !c.el.isConnected) return null;
     const r = c.el.getBoundingClientRect();
@@ -4082,17 +3980,17 @@ function useFloating() {
     const top = r.bottom + 6;
     return { top, left, width: c.width, anchorX: r.left + r.width / 2, maxHeight: Math.max(180, vh - top - M) };
   }, []);
-  const open = React22.useCallback((el, align = "left", width = 220) => {
+  const open = React23__default.useCallback((el, align = "left", width = 220) => {
     cfg.current = { el, align, width };
     const p = place();
     if (p) setPos(p);
   }, [place]);
-  const close = React22.useCallback(() => {
+  const close = React23__default.useCallback(() => {
     cfg.current = null;
     setPos(null);
   }, []);
   const isOpen = pos != null;
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!isOpen) return void 0;
     const update = () => {
       const p = place();
@@ -4116,9 +4014,9 @@ function Caret({ pos }) {
   return /* @__PURE__ */ jsx("span", { className: "twc-dt__caret", style: { left } });
 }
 function EditCell({ col, value, options, onChange, onCommit, onCommitValue, onCancel, onKeyDown }) {
-  const ref = React22.useRef(null);
+  const ref = React23__default.useRef(null);
   const isSelect = col.editType === "select" || options && col.editType !== "text";
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (isSelect) {
       const t = setTimeout(() => ref.current?.querySelector(".twc-sel__trigger")?.click(), 0);
       return () => clearTimeout(t);
@@ -4318,14 +4216,8 @@ function Datatable({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-dt-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-dt-styles";
-    el.textContent = DT_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const cols = React22.useMemo(() => {
+  const __twcStyles = useScopedStyles("twc-dt-styles", DT_CSS);
+  const cols = React23__default.useMemo(() => {
     const out = columns.map((c) => {
       const isActions = c.type === "actions";
       return {
@@ -4360,7 +4252,7 @@ function Datatable({
     }
     return out;
   }, [columns, rowPinning]);
-  const _autoKey = React22.useRef();
+  const _autoKey = React23__default.useRef();
   if (!_autoKey.current) _autoKey.current = { map: /* @__PURE__ */ new WeakMap(), n: 0 };
   const keyOf = rowKey || ((r, i) => {
     if (r != null && r.id != null) return r.id;
@@ -4375,17 +4267,17 @@ function Datatable({
     }
     return i;
   });
-  const [sort, setSort] = React22.useState(null);
-  const [filters, setFilters] = React22.useState([]);
-  const [hidden, setHidden] = React22.useState(() => /* @__PURE__ */ new Set());
-  const [showRowNum, setShowRowNum] = React22.useState(rowNumbers);
-  const [wrapped, setWrapped] = React22.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
+  const [sort, setSort] = React23__default.useState(null);
+  const [filters, setFilters] = React23__default.useState([]);
+  const [hidden, setHidden] = React23__default.useState(() => /* @__PURE__ */ new Set());
+  const [showRowNum, setShowRowNum] = React23__default.useState(rowNumbers);
+  const [wrapped, setWrapped] = React23__default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
   const toggleWrap = (field) => setWrapped((w) => {
     const n = new Set(w);
     n.has(field) ? n.delete(field) : n.add(field);
     return n;
   });
-  const [pins, setPins] = React22.useState(() => {
+  const [pins, setPins] = React23__default.useState(() => {
     const left = [], right = [];
     columns.forEach((c) => {
       if (c.pinned === "left") left.push(c.field);
@@ -4393,34 +4285,34 @@ function Datatable({
     });
     return { left, right };
   });
-  const [density, setDensity] = React22.useState(densityProp);
-  const [quick, setQuick] = React22.useState("");
-  const [selected, setSelected] = React22.useState(() => /* @__PURE__ */ new Set());
-  const [activeRow, setActiveRow] = React22.useState(null);
-  const [activeCell, setActiveCell] = React22.useState(null);
-  const [page, setPage] = React22.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React22.useState(pageSize > 0 ? pageSize : 10);
-  const [colQuery, setColQuery] = React22.useState("");
-  const [widths, setWidths] = React22.useState({});
-  const [order, setOrder] = React22.useState(() => columns.map((c) => c.field));
-  const [drag, setDrag] = React22.useState({ from: null, over: null, after: false });
-  const [aggOn, setAggOn] = React22.useState(showAggregation);
-  const [focus, setFocus] = React22.useState({ r: 0, c: 0 });
-  const gridRef = React22.useRef(null);
-  const [groupBy, setGroupBy] = React22.useState(rowGrouping || []);
-  const [collapsed, setCollapsed] = React22.useState(() => /* @__PURE__ */ new Set());
-  const [pinnedRows, setPinnedRows] = React22.useState({ top: [], bottom: [] });
-  const [headH, setHeadH] = React22.useState(41);
-  const theadRef = React22.useRef(null);
-  const [rowOrder, setRowOrder] = React22.useState(null);
-  const [rowHeights, setRowHeights] = React22.useState({});
-  const [rowDrag, setRowDrag] = React22.useState({ from: null, over: null, after: false });
-  const [rowGrab, setRowGrab] = React22.useState(null);
-  const [reorderMsg, setReorderMsg] = React22.useState("");
-  const rowFocusRef = React22.useRef(null);
-  const rootRef = React22.useRef(null);
-  const [compact, setCompact] = React22.useState(false);
-  React22.useEffect(() => {
+  const [density, setDensity] = React23__default.useState(densityProp);
+  const [quick, setQuick] = React23__default.useState("");
+  const [selected, setSelected] = React23__default.useState(() => /* @__PURE__ */ new Set());
+  const [activeRow, setActiveRow] = React23__default.useState(null);
+  const [activeCell, setActiveCell] = React23__default.useState(null);
+  const [page, setPage] = React23__default.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React23__default.useState(pageSize > 0 ? pageSize : 10);
+  const [colQuery, setColQuery] = React23__default.useState("");
+  const [widths, setWidths] = React23__default.useState({});
+  const [order, setOrder] = React23__default.useState(() => columns.map((c) => c.field));
+  const [drag, setDrag] = React23__default.useState({ from: null, over: null, after: false });
+  const [aggOn, setAggOn] = React23__default.useState(showAggregation);
+  const [focus, setFocus] = React23__default.useState({ r: 0, c: 0 });
+  const gridRef = React23__default.useRef(null);
+  const [groupBy, setGroupBy] = React23__default.useState(rowGrouping || []);
+  const [collapsed, setCollapsed] = React23__default.useState(() => /* @__PURE__ */ new Set());
+  const [pinnedRows, setPinnedRows] = React23__default.useState({ top: [], bottom: [] });
+  const [headH, setHeadH] = React23__default.useState(41);
+  const theadRef = React23__default.useRef(null);
+  const [rowOrder, setRowOrder] = React23__default.useState(null);
+  const [rowHeights, setRowHeights] = React23__default.useState({});
+  const [rowDrag, setRowDrag] = React23__default.useState({ from: null, over: null, after: false });
+  const [rowGrab, setRowGrab] = React23__default.useState(null);
+  const [reorderMsg, setReorderMsg] = React23__default.useState("");
+  const rowFocusRef = React23__default.useRef(null);
+  const rootRef = React23__default.useRef(null);
+  const [compact, setCompact] = React23__default.useState(false);
+  React23__default.useEffect(() => {
     const el = rootRef.current;
     if (!el) return void 0;
     const measure = () => setCompact((el.clientWidth || 0) < 720);
@@ -4433,11 +4325,11 @@ function Datatable({
       else if (typeof window !== "undefined") window.removeEventListener("resize", measure);
     };
   }, []);
-  const scrollRef = React22.useRef(null);
-  const [scrollTop, setScrollTop] = React22.useState(0);
-  const [viewportH, setViewportH] = React22.useState(0);
-  const [pivotOn, setPivotOn] = React22.useState(pivotMode);
-  const [aggConfig, setAggConfig] = React22.useState(() => {
+  const scrollRef = React23__default.useRef(null);
+  const [scrollTop, setScrollTop] = React23__default.useState(0);
+  const [viewportH, setViewportH] = React23__default.useState(0);
+  const [pivotOn, setPivotOn] = React23__default.useState(pivotMode);
+  const [aggConfig, setAggConfig] = React23__default.useState(() => {
     const m = {};
     (columns || []).forEach((c) => {
       if (typeof c.aggregation === "string") m[c.field] = c.aggregation;
@@ -4445,13 +4337,13 @@ function Datatable({
     return m;
   });
   const aggOf = (c) => aggConfig[c.field] || (typeof c.aggregation === "function" ? c.aggregation : null);
-  const [pivotConfig, setPivotConfig] = React22.useState(() => ({
+  const [pivotConfig, setPivotConfig] = React23__default.useState(() => ({
     rows: pivot && pivot.rows || [],
     columns: pivot && pivot.columns || [],
     values: pivot && pivot.values || []
   }));
   const pivotActive = pivotOn && pivotConfig.rows.length > 0 && pivotConfig.values.length > 0;
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     setOrder((prev) => {
       const fields = columns.map((c) => c.field);
       const kept = prev.filter((f) => fields.includes(f));
@@ -4459,32 +4351,32 @@ function Datatable({
       return [...kept, ...added];
     });
   }, [columns]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     setDensity(densityProp);
   }, [densityProp]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     setAggOn(showAggregation);
   }, [showAggregation]);
   const rowGroupingKey = (rowGrouping || []).join("\0");
-  const rowGroupingKeyRef = React22.useRef(rowGroupingKey);
-  React22.useEffect(() => {
+  const rowGroupingKeyRef = React23__default.useRef(rowGroupingKey);
+  React23__default.useEffect(() => {
     if (rowGroupingKeyRef.current === rowGroupingKey) return;
     rowGroupingKeyRef.current = rowGroupingKey;
     setGroupBy(rowGrouping || []);
   }, [rowGroupingKey]);
   const widthOf = (c) => widths[c.field] ?? c.width ?? 160;
-  const [colMenu, setColMenu] = React22.useState(null);
+  const [colMenu, setColMenu] = React23__default.useState(null);
   const [menuPos, openMenu, closeMenu] = useFloating();
-  const [panel, setPanel] = React22.useState(null);
+  const [panel, setPanel] = React23__default.useState(null);
   const [panelPos, openPanel, closePanel] = useFloating();
-  const [rowMenu, setRowMenu] = React22.useState(null);
+  const [rowMenu, setRowMenu] = React23__default.useState(null);
   const [rowMenuPos, openRowMenu, closeRowMenu] = useFloating();
-  const [exportOpen, setExportOpen] = React22.useState(false);
+  const [exportOpen, setExportOpen] = React23__default.useState(false);
   const [exportPos, openExport, closeExport] = useFloating();
-  const menuTriggerRef = React22.useRef(null);
-  const colMenuRef = React22.useRef(null);
-  const rowMenuRef = React22.useRef(null);
-  const exportMenuRef = React22.useRef(null);
+  const menuTriggerRef = React23__default.useRef(null);
+  const colMenuRef = React23__default.useRef(null);
+  const rowMenuRef = React23__default.useRef(null);
+  const exportMenuRef = React23__default.useRef(null);
   function focusFirstItem(container) {
     if (!container) return;
     const first = container.querySelector('[role="menuitem"]:not([disabled])');
@@ -4523,16 +4415,16 @@ function Datatable({
       restoreTriggerFocus();
     }
   }
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (colMenu) focusFirstItem(colMenuRef.current);
   }, [colMenu]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (rowMenu) focusFirstItem(rowMenuRef.current);
   }, [rowMenu]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (exportOpen) focusFirstItem(exportMenuRef.current);
   }, [exportOpen]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!colMenu && !panel && !rowMenu) return;
     const closeAll = () => {
       setColMenu(null);
@@ -4555,7 +4447,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [colMenu, panel, rowMenu]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!exportOpen) return;
     const close = () => {
       setExportOpen(false);
@@ -4574,9 +4466,9 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [exportOpen]);
-  const colByField = React22.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
+  const colByField = React23__default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
   const visibleCols = cols.filter((c) => !hidden.has(c.field));
-  const ordered = React22.useMemo(() => {
+  const ordered = React23__default.useMemo(() => {
     const orderIdx = (f) => {
       const i = order.indexOf(f);
       return i === -1 ? 9999 : i;
@@ -4611,7 +4503,7 @@ function Datatable({
     }
     return {};
   };
-  const processed = React22.useMemo(() => {
+  const processed = React23__default.useMemo(() => {
     if (serverMode) {
       if (rowOrder) {
         const idx = new Map(rowOrder.map((k, i) => [k, i]));
@@ -4650,10 +4542,10 @@ function Datatable({
   const totalRows = serverMode ? serverTotal : processed.length;
   const totalPages = paginated ? Math.max(1, Math.ceil(totalRows / rowsPerPage)) : 1;
   const paged = !paginated || serverMode ? processed : processed.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (page > totalPages - 1) setPage(0);
   }, [totalPages]);
-  const activeGroupBy = React22.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
+  const activeGroupBy = React23__default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
   function subtotalText(rowsIn) {
     const parts = [];
     for (const c of ordered) {
@@ -4680,7 +4572,7 @@ function Datatable({
     if (agg === "max") return Math.max(...nums);
     return null;
   }
-  const displayItems = React22.useMemo(() => {
+  const displayItems = React23__default.useMemo(() => {
     if (!activeGroupBy.length) return null;
     const build = (rowsIn, depth, prefix) => {
       if (depth >= activeGroupBy.length) return rowsIn.map((row) => ({ kind: "leaf", row }));
@@ -4722,7 +4614,7 @@ function Datatable({
       return { top, bottom };
     });
   }
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!rowPinning) return;
     const measure = () => {
       if (theadRef.current) setHeadH(theadRef.current.offsetHeight || 41);
@@ -4736,12 +4628,12 @@ function Datatable({
   const pinnedTopRows = canPinRows ? pinnedRows.top.map((k) => leafRows.find((r, i) => keyOf(r, i) === k)).filter(Boolean) : [];
   const pinnedBottomRows = canPinRows ? pinnedRows.bottom.map((k) => leafRows.find((r, i) => keyOf(r, i) === k)).filter(Boolean) : [];
   const middleRows = canPinRows ? leafRows.filter((r, i) => !pinSideOf(keyOf(r, i))) : leafRows;
-  const keyIndex = React22.useMemo(() => {
+  const keyIndex = React23__default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     leafRows.forEach((r, i) => m.set(keyOf(r, i), i));
     return m;
   }, [leafRows]);
-  const keyIndexMid = React22.useMemo(() => {
+  const keyIndexMid = React23__default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     middleRows.forEach((r, i) => m.set(keyOf(r, keyIndex.get(keyOf(r)) ?? i), i));
     return m;
@@ -4826,7 +4718,7 @@ function Datatable({
       setReorderMsg("Reorder cancelled.");
     }
   }
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (rowFocusRef.current == null) return;
     const key = rowFocusRef.current;
     rowFocusRef.current = null;
@@ -4838,7 +4730,7 @@ function Datatable({
   });
   const estRowH = rowHeight ?? (density === "compact" ? 36 : density === "comfortable" ? 56 : 44);
   const virtualizing = virtualized && !paginated && !activeGroupBy.length && !loading;
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -4848,13 +4740,13 @@ function Datatable({
     if (ro) ro.observe(el);
     return () => ro && ro.disconnect();
   }, [virtualizing, height]);
-  const onScrollVirtual = React22.useCallback((e) => {
+  const onScrollVirtual = React23__default.useCallback((e) => {
     setScrollTop(e.currentTarget.scrollTop);
   }, []);
   const vh = viewportH || (typeof height === "number" ? height : 440);
-  const rowHRef = React22.useRef(/* @__PURE__ */ new Map());
-  const [measureTick, setMeasureTick] = React22.useState(0);
-  const offsets = React22.useMemo(() => {
+  const rowHRef = React23__default.useRef(/* @__PURE__ */ new Map());
+  const [measureTick, setMeasureTick] = React23__default.useState(0);
+  const offsets = React23__default.useMemo(() => {
     if (!virtualizing) return null;
     const total = middleRows.length;
     const arr = new Float64Array(total + 1);
@@ -4864,7 +4756,7 @@ function Datatable({
     }
     return arr;
   }, [virtualizing, middleRows, estRowH, measureTick]);
-  const vWindow = React22.useMemo(() => {
+  const vWindow = React23__default.useMemo(() => {
     if (!virtualizing || !offsets) return null;
     const total = middleRows.length;
     const totalH = offsets[total];
@@ -4893,7 +4785,7 @@ function Datatable({
     if (start > end) start = end;
     return { start, end, padTop: offsets[start], padBottom: Math.max(0, totalH - offsets[end]) };
   }, [virtualizing, offsets, middleRows.length, vh, scrollTop, overscan]);
-  React22.useLayoutEffect(() => {
+  React23__default.useLayoutEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -4908,9 +4800,9 @@ function Datatable({
     }
     if (changed) setMeasureTick((t) => t + 1);
   });
-  const onServerChangeRef = React22.useRef(onServerChange);
+  const onServerChangeRef = React23__default.useRef(onServerChange);
   onServerChangeRef.current = onServerChange;
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!serverMode) return;
     const t = setTimeout(() => {
       onServerChangeRef.current?.({
@@ -4945,7 +4837,7 @@ function Datatable({
       return n;
     });
   }
-  const movableMidFields = React22.useMemo(
+  const movableMidFields = React23__default.useMemo(
     () => ordered.filter((c) => !pins.left.includes(c.field) && !pins.right.includes(c.field)).map((c) => c.field),
     [ordered, pins]
   );
@@ -4976,7 +4868,7 @@ function Datatable({
     }
     return [...set].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
   }
-  const [resizing, setResizing] = React22.useState(false);
+  const [resizing, setResizing] = React23__default.useState(false);
   function startResize(e, field) {
     e.preventDefault();
     e.stopPropagation();
@@ -5083,7 +4975,7 @@ function Datatable({
     if (!agg) return null;
     if (aggregationValues && col.field in aggregationValues) {
       const pre = aggregationValues[col.field];
-      if (pre && typeof pre === "object" && !React22.isValidElement(pre)) {
+      if (pre && typeof pre === "object" && !React23__default.isValidElement(pre)) {
         if (typeof agg === "string" && agg in pre) return pre[agg];
       } else {
         return pre;
@@ -5201,14 +5093,14 @@ function Datatable({
       focusCell(r, c);
     }
   }
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     setFocus((f) => ({ r: Math.min(f.r, Math.max(0, leafRows.length - 1)), c: Math.min(f.c, Math.max(0, ordered.length - 1)) }));
   }, [leafRows.length, ordered.length, page]);
-  const selectedRows = React22.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
+  const selectedRows = React23__default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
   function clearSelection() {
     setSelected(/* @__PURE__ */ new Set());
   }
-  const [editing, setEditing] = React22.useState(null);
+  const [editing, setEditing] = React23__default.useState(null);
   const isColEditable = (c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false));
   function beginEdit(rowK, col, row) {
     if (!isColEditable(col)) return;
@@ -5243,17 +5135,17 @@ function Datatable({
       cancelEdit();
     }
   }
-  const batchEditableCols = React22.useMemo(
+  const batchEditableCols = React23__default.useMemo(
     () => cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false))),
     [cols, editMode]
   );
-  const [batchEdit, setBatchEdit] = React22.useState(null);
+  const [batchEdit, setBatchEdit] = React23__default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
   function openBatchEditor(el) {
     setBatchEdit({ fields: {}, values: {} });
     openBatchEdit(el, "left", 320);
   }
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!batchEdit) return;
     const close = () => {
       setBatchEdit(null);
@@ -5272,7 +5164,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [batchEdit]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (batchEdit && selected.size === 0) {
       setBatchEdit(null);
       closeBatchEdit();
@@ -5309,7 +5201,7 @@ function Datatable({
     setBatchEdit(null);
     closeBatchEdit();
   }
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!editing) return;
     const onDown = (e) => {
       if (e.target.closest(".twc-dt__editor-wrap") || e.target.closest(".twc-pop")) return;
@@ -5665,6 +5557,7 @@ function Datatable({
     ] }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: `twc-dt ${className}`, ref: rootRef, "data-density": density, "data-resizing": resizing || void 0, ...rest, children: [
+    __twcStyles,
     /* @__PURE__ */ jsxs("div", { className: "twc-dt__toolbar", "data-compact": compact || void 0, children: [
       batchActions.length && selected.size > 0 ? /* @__PURE__ */ jsxs("div", { className: "twc-dt__batch", children: [
         /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dt__batch-x", onClick: clearSelection, "aria-label": "Clear selection", children: /* @__PURE__ */ jsx(Svg, { d: I.x }) }),
@@ -6819,36 +6712,25 @@ function DatePicker({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (!document.getElementById("twc-field-styles")) {
-      const fel = document.createElement("style");
-      fel.id = "twc-field-styles";
-      fel.textContent = FIELD_CSS3;
-      document.head.appendChild(fel);
-    }
-    if (document.getElementById("twc-datepicker-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-datepicker-styles";
-    el.textContent = DATEPICKER_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const autoId = React22.useId();
+  const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
+  const __twcStyles1 = useScopedStyles("twc-datepicker-styles", DATEPICKER_CSS);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
-  const [internal, setInternal] = React22.useState(defaultValue);
+  const [internal, setInternal] = React23__default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React22.useState(false);
-  const [view, setView] = React22.useState(selected || /* @__PURE__ */ new Date());
-  const [mode, setMode] = React22.useState("days");
-  const [focusDate, setFocusDate] = React22.useState(null);
-  const [coords, setCoords] = React22.useState(null);
-  const wrapRef = React22.useRef(null);
-  const triggerRef = React22.useRef(null);
-  const popRef = React22.useRef(null);
-  const gridRef = React22.useRef(null);
+  const [open, setOpen] = React23__default.useState(false);
+  const [view, setView] = React23__default.useState(selected || /* @__PURE__ */ new Date());
+  const [mode, setMode] = React23__default.useState("days");
+  const [focusDate, setFocusDate] = React23__default.useState(null);
+  const [coords, setCoords] = React23__default.useState(null);
+  const wrapRef = React23__default.useRef(null);
+  const triggerRef = React23__default.useRef(null);
+  const popRef = React23__default.useRef(null);
+  const gridRef = React23__default.useRef(null);
   const POP_W = 280;
-  const place = React22.useCallback(() => {
+  const place = React23__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -6859,7 +6741,7 @@ function DatePicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -6870,7 +6752,7 @@ function DatePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     setView(selected || /* @__PURE__ */ new Date());
     setMode("days");
@@ -6890,8 +6772,8 @@ function DatePicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React22.useRef(false);
-  React22.useEffect(() => {
+  const prevOpen = React23__default.useRef(false);
+  React23__default.useEffect(() => {
     let id2;
     if (!prevOpen.current && open) {
       id2 = setTimeout(() => gridRef.current?.querySelector('[tabindex="0"]')?.focus({ preventScroll: true }), 30);
@@ -6902,9 +6784,9 @@ function DatePicker({
     prevOpen.current = open;
     return () => clearTimeout(id2);
   }, [open]);
-  const months = React22.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
-  const monthsShort = React22.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
-  const dows = React22.useMemo(
+  const months = React23__default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
+  const monthsShort = React23__default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
+  const dows = React23__default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW[(i + weekStartsOn) % 7]) : weekdayNames(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -6932,7 +6814,7 @@ function DatePicker({
   };
   const cells = Array.from({ length: 42 }, (_, i) => new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
   const tabbableDate = (focusDate && cells.some((c) => sameDay(c, focusDate)) ? focusDate : null) || (selected && cells.some((c) => sameDay(c, selected)) ? selected : null) || (cells.some((c) => sameDay(c, today)) ? today : null) || new Date(y, m, 1);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open || mode !== "days" || !focusDate) return;
     gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
   }, [focusDate, open, mode]);
@@ -6963,6 +6845,8 @@ function DatePicker({
     if (next.getFullYear() !== y || next.getMonth() !== m) setView(new Date(next.getFullYear(), next.getMonth(), 1));
   };
   return /* @__PURE__ */ jsxs("div", { className: `twc-dp twc-field ${className}`, ref: wrapRef, ...rest, children: [
+    __twcStyles0,
+    __twcStyles1,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", id: `${fieldId}-label`, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -7151,36 +7035,25 @@ function DateRangePicker({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (!document.getElementById("twc-field-styles")) {
-      const fel = document.createElement("style");
-      fel.id = "twc-field-styles";
-      fel.textContent = FIELD_CSS4;
-      document.head.appendChild(fel);
-    }
-    if (document.getElementById("twc-drp-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-drp-styles";
-    el.textContent = RANGE_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [internal, setInternal] = React22.useState(defaultValue);
+  const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
+  const __twcStyles1 = useScopedStyles("twc-drp-styles", RANGE_CSS);
+  const [internal, setInternal] = React23__default.useState(defaultValue);
   const range = value !== void 0 ? value : internal;
-  const [open, setOpen] = React22.useState(false);
-  const [view, setView] = React22.useState(range.start || /* @__PURE__ */ new Date());
-  const [hover, setHover] = React22.useState(null);
-  const [coords, setCoords] = React22.useState(null);
-  const wrapRef = React22.useRef(null);
-  const triggerRef = React22.useRef(null);
-  const popRef = React22.useRef(null);
-  const labelId = React22.useId();
+  const [open, setOpen] = React23__default.useState(false);
+  const [view, setView] = React23__default.useState(range.start || /* @__PURE__ */ new Date());
+  const [hover, setHover] = React23__default.useState(null);
+  const [coords, setCoords] = React23__default.useState(null);
+  const wrapRef = React23__default.useRef(null);
+  const triggerRef = React23__default.useRef(null);
+  const popRef = React23__default.useRef(null);
+  const labelId = React23__default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const POP_W = 420;
-  const place = React22.useCallback(() => {
+  const place = React23__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -7191,7 +7064,7 @@ function DateRangePicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -7202,7 +7075,7 @@ function DateRangePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -7240,8 +7113,8 @@ function DateRangePicker({
     setView(start);
     setOpen(false);
   };
-  const months = React22.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
-  const dows = React22.useMemo(
+  const months = React23__default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
+  const dows = React23__default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW2[(i + weekStartsOn) % 7]) : weekdayNames2(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -7265,6 +7138,8 @@ function DateRangePicker({
   };
   const text = range.start ? `${fmtD(range.start, locale)} \u2013 ${range.end ? fmtD(range.end, locale) : "\u2026"}` : "";
   return /* @__PURE__ */ jsxs("div", { className: `twc-drp twc-field ${className}`, ref: wrapRef, ...rest, children: [
+    __twcStyles0,
+    __twcStyles1,
     label ? /* @__PURE__ */ jsxs("span", { className: "twc-field__label", id: labelId, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -7420,19 +7295,13 @@ function Dialog({
   className = "",
   ...rest
 }) {
-  const autoId = React22.useId();
+  const autoId = React23__default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const dialogRef = React22.useRef(null);
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-dialog-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-dialog-styles";
-    el.textContent = DIALOG_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [mounted, setMounted] = React22.useState(open);
-  React22.useEffect(() => {
+  const dialogRef = React23__default.useRef(null);
+  const __twcStyles = useScopedStyles("twc-dialog-styles", DIALOG_CSS);
+  const [mounted, setMounted] = React23__default.useState(open);
+  React23__default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -7440,7 +7309,7 @@ function Dialog({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return void 0;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -7448,7 +7317,7 @@ function Dialog({
       document.body.style.overflow = prev;
     };
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open || !mounted) return void 0;
     const node = dialogRef.current;
     const prevFocused = document.activeElement;
@@ -7460,7 +7329,7 @@ function Dialog({
       if (prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
     };
   }, [open, mounted]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     const node = dialogRef.current;
     const focusables = () => node ? Array.from(
@@ -7497,19 +7366,22 @@ function Dialog({
   }, [open, onClose]);
   if (!mounted) return null;
   const state = open ? "open" : "closed";
-  const overlay = /* @__PURE__ */ jsx("div", { className: "twc-dialog__overlay", "data-state": state, onMouseDown: (e) => {
+  const overlay = /* @__PURE__ */ jsxs("div", { className: "twc-dialog__overlay", "data-state": state, onMouseDown: (e) => {
     if (closeOnBackdrop && e.target === e.currentTarget) onClose?.();
-  }, children: /* @__PURE__ */ jsxs("div", { ref: dialogRef, className: `twc-dialog ${className}`, "data-state": state, "data-size": size, "data-scroll-body": scrollBody ? "true" : void 0, role: "dialog", "aria-modal": "true", tabIndex: -1, "aria-labelledby": title ? titleId : void 0, "aria-label": !title ? "Dialog" : void 0, "aria-describedby": description ? descId : void 0, ...rest, children: [
-    title || description || onClose ? /* @__PURE__ */ jsxs("div", { className: "twc-dialog__header", children: [
-      /* @__PURE__ */ jsxs("div", { className: "twc-dialog__titles", children: [
-        title ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__title", id: titleId, children: title }) : null,
-        description ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__desc", id: descId, children: description }) : null
-      ] }),
-      onClose ? /* @__PURE__ */ jsx("button", { className: "twc-dialog__close", onClick: onClose, "aria-label": "Close", type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
-    ] }) : null,
-    children ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__body", children }) : null,
-    footer ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__footer", children: footer }) : null
-  ] }) });
+  }, children: [
+    __twcStyles,
+    /* @__PURE__ */ jsxs("div", { ref: dialogRef, className: `twc-dialog ${className}`, "data-state": state, "data-size": size, "data-scroll-body": scrollBody ? "true" : void 0, role: "dialog", "aria-modal": "true", tabIndex: -1, "aria-labelledby": title ? titleId : void 0, "aria-label": !title ? "Dialog" : void 0, "aria-describedby": description ? descId : void 0, ...rest, children: [
+      title || description || onClose ? /* @__PURE__ */ jsxs("div", { className: "twc-dialog__header", children: [
+        /* @__PURE__ */ jsxs("div", { className: "twc-dialog__titles", children: [
+          title ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__title", id: titleId, children: title }) : null,
+          description ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__desc", id: descId, children: description }) : null
+        ] }),
+        onClose ? /* @__PURE__ */ jsx("button", { className: "twc-dialog__close", onClick: onClose, "aria-label": "Close", type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
+      ] }) : null,
+      children ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__body", children }) : null,
+      footer ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__footer", children: footer }) : null
+    ] })
+  ] });
   if (typeof document === "undefined") return null;
   const RD = typeof createPortal === "function" ? createPortal : null;
   return RD ? RD(overlay, document.body) : overlay;
@@ -7536,28 +7408,28 @@ function Divider({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-divider-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-divider-styles";
-    el.textContent = DIVIDER_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-divider-styles", DIVIDER_CSS);
   const resolvedAlign = align === "left" ? "start" : align === "right" ? "end" : align;
   if (children) {
-    return /* @__PURE__ */ jsx("div", { className: `twc-divider-label ${className}`, "data-align": resolvedAlign, role: "separator", ...rest, children });
+    return /* @__PURE__ */ jsxs("div", { className: `twc-divider-label ${className}`, "data-align": resolvedAlign, role: "separator", ...rest, children: [
+      __twcStyles,
+      children
+    ] });
   }
-  return /* @__PURE__ */ jsx(
-    "hr",
-    {
-      className: `twc-divider ${className}`,
-      "data-orientation": orientation,
-      "data-inset": inset || void 0,
-      role: "separator",
-      "aria-orientation": orientation,
-      ...rest
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    __twcStyles,
+    /* @__PURE__ */ jsx(
+      "hr",
+      {
+        className: `twc-divider ${className}`,
+        "data-orientation": orientation,
+        "data-inset": inset || void 0,
+        role: "separator",
+        "aria-orientation": orientation,
+        ...rest
+      }
+    )
+  ] });
 }
 var DRAWER_CSS = `
 .twc-drawer__overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-overlay); backdrop-filter: blur(2px); }
@@ -7626,19 +7498,13 @@ function Drawer({
   style,
   ...rest
 }) {
-  const autoId = React22.useId();
+  const autoId = React23__default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const panelRef = React22.useRef(null);
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-drawer-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-drawer-styles";
-    el.textContent = DRAWER_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [mounted, setMounted] = React22.useState(open);
-  React22.useEffect(() => {
+  const panelRef = React23__default.useRef(null);
+  const __twcStyles = useScopedStyles("twc-drawer-styles", DRAWER_CSS);
+  const [mounted, setMounted] = React23__default.useState(open);
+  React23__default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -7646,7 +7512,7 @@ function Drawer({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return void 0;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -7654,7 +7520,7 @@ function Drawer({
       document.body.style.overflow = prev;
     };
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open || !mounted) return void 0;
     const node = panelRef.current;
     const prevFocused = document.activeElement;
@@ -7666,7 +7532,7 @@ function Drawer({
       if (prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
     };
   }, [open, mounted]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     const node = panelRef.current;
     const focusables = () => node ? Array.from(
@@ -7707,19 +7573,22 @@ function Drawer({
   const raw = isHorizontal ? width : height;
   const dim = DRAWER_SIZES[raw] || (typeof raw === "number" ? `${raw}px` : raw);
   const sizeVar = isHorizontal ? { "--_w": dim } : { "--_h": dim };
-  const overlay = /* @__PURE__ */ jsx("div", { className: "twc-drawer__overlay", "data-state": state, onMouseDown: (e) => {
+  const overlay = /* @__PURE__ */ jsxs("div", { className: "twc-drawer__overlay", "data-state": state, onMouseDown: (e) => {
     if (closeOnBackdrop && e.target === e.currentTarget) onClose?.();
-  }, children: /* @__PURE__ */ jsxs("div", { ref: panelRef, className: `twc-drawer ${className}`, "data-side": side, "data-state": state, role: "dialog", "aria-modal": "true", tabIndex: -1, "aria-labelledby": title ? titleId : void 0, "aria-label": !title ? "Drawer" : void 0, "aria-describedby": description ? descId : void 0, style: { ...dim ? sizeVar : null, ...style }, ...rest, children: [
-    title || description || onClose ? /* @__PURE__ */ jsxs("div", { className: "twc-drawer__header", children: [
-      /* @__PURE__ */ jsxs("div", { className: "twc-drawer__titles", children: [
-        title ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__title", id: titleId, children: title }) : null,
-        description ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__desc", id: descId, children: description }) : null
-      ] }),
-      onClose ? /* @__PURE__ */ jsx("button", { className: "twc-drawer__close", onClick: onClose, "aria-label": "Close", type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
-    ] }) : null,
-    /* @__PURE__ */ jsx("div", { className: "twc-drawer__body", children }),
-    footer ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__footer", children: footer }) : null
-  ] }) });
+  }, children: [
+    __twcStyles,
+    /* @__PURE__ */ jsxs("div", { ref: panelRef, className: `twc-drawer ${className}`, "data-side": side, "data-state": state, role: "dialog", "aria-modal": "true", tabIndex: -1, "aria-labelledby": title ? titleId : void 0, "aria-label": !title ? "Drawer" : void 0, "aria-describedby": description ? descId : void 0, style: { ...dim ? sizeVar : null, ...style }, ...rest, children: [
+      title || description || onClose ? /* @__PURE__ */ jsxs("div", { className: "twc-drawer__header", children: [
+        /* @__PURE__ */ jsxs("div", { className: "twc-drawer__titles", children: [
+          title ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__title", id: titleId, children: title }) : null,
+          description ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__desc", id: descId, children: description }) : null
+        ] }),
+        onClose ? /* @__PURE__ */ jsx("button", { className: "twc-drawer__close", onClick: onClose, "aria-label": "Close", type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx("div", { className: "twc-drawer__body", children }),
+      footer ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__footer", children: footer }) : null
+    ] })
+  ] });
   if (typeof document === "undefined") return null;
   const RD = typeof createPortal === "function" ? createPortal : null;
   return RD ? RD(overlay, document.body) : overlay;
@@ -7746,14 +7615,9 @@ function EmptyState({
   ...rest
 }) {
   const hasBorder = border ?? bordered;
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-empty-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-empty-styles";
-    el.textContent = EMPTY_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-empty-styles", EMPTY_CSS);
   return /* @__PURE__ */ jsxs("div", { className: `twc-empty ${className}`, "data-bordered": hasBorder || void 0, ...rest, children: [
+    __twcStyles,
     icon ? /* @__PURE__ */ jsx("span", { className: "twc-empty__icon", "aria-hidden": "true", children: icon }) : null,
     title ? /* @__PURE__ */ jsx("div", { className: "twc-empty__title", children: title }) : null,
     description ? /* @__PURE__ */ jsx("div", { className: "twc-empty__desc", children: description }) : null,
@@ -7767,15 +7631,6 @@ var FIELD_CSS5 = `
 .twc-field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `;
-function useFieldStyles2() {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-field-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-field-styles";
-    el.textContent = FIELD_CSS5;
-    document.head.appendChild(el);
-  }, []);
-}
 function Field({
   label,
   hint,
@@ -7788,11 +7643,12 @@ function Field({
   children,
   ...rest
 }) {
-  useFieldStyles2();
-  const autoId = React22.useId();
+  const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS5);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, "data-size": size, ...rest, children: [
+    __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -7867,18 +7723,12 @@ function FileUpload({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-upload-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-upload-styles";
-    el.textContent = UPLOAD_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [internal, setInternal] = React22.useState(defaultValue);
+  const __twcStyles = useScopedStyles("twc-upload-styles", UPLOAD_CSS);
+  const [internal, setInternal] = React23__default.useState(defaultValue);
   const files = value !== void 0 ? value : internal;
-  const [drag, setDrag] = React22.useState(false);
-  const inputRef = React22.useRef(null);
-  const autoId = React22.useId();
+  const [drag, setDrag] = React23__default.useState(false);
+  const inputRef = React23__default.useRef(null);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
@@ -7894,6 +7744,7 @@ function FileUpload({
     set(files.filter((_, idx) => idx !== i));
   }
   return /* @__PURE__ */ jsxs("div", { className: `twc-upload ${className}`, ...rest, children: [
+    __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -8025,14 +7876,8 @@ function IconButton({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-iconbtn-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-iconbtn-styles";
-    el.textContent = ICONBTN_CSS;
-    document.head.appendChild(el);
-  }, []);
-  return /* @__PURE__ */ jsx(
+  const __twcStyles = useScopedStyles("twc-iconbtn-styles", ICONBTN_CSS);
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       className: `twc-iconbtn ${className}`,
@@ -8044,7 +7889,10 @@ function IconButton({
       type: "button",
       "aria-label": ariaLabel,
       ...rest,
-      children: icon || children
+      children: [
+        __twcStyles,
+        icon || children
+      ]
     }
   );
 }
@@ -8081,22 +7929,16 @@ function Kanban({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-kanban-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-kanban-styles";
-    el.textContent = KANBAN_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [internal, setInternal] = React22.useState(cards ?? defaultCards ?? []);
+  const __twcStyles = useScopedStyles("twc-kanban-styles", KANBAN_CSS);
+  const [internal, setInternal] = React23__default.useState(cards ?? defaultCards ?? []);
   const items = cards !== void 0 ? cards : internal;
-  const [drag, setDrag] = React22.useState(null);
-  const [overCol, setOverCol] = React22.useState(null);
-  const [grab, setGrab] = React22.useState(null);
-  const [announce, setAnnounce] = React22.useState("");
-  const rootRef = React22.useRef(null);
-  const focusIdRef = React22.useRef(null);
-  React22.useEffect(() => {
+  const [drag, setDrag] = React23__default.useState(null);
+  const [overCol, setOverCol] = React23__default.useState(null);
+  const [grab, setGrab] = React23__default.useState(null);
+  const [announce, setAnnounce] = React23__default.useState("");
+  const rootRef = React23__default.useRef(null);
+  const focusIdRef = React23__default.useRef(null);
+  React23__default.useEffect(() => {
     if (focusIdRef.current == null) return void 0;
     const raf = requestAnimationFrame(() => {
       const id = focusIdRef.current;
@@ -8149,6 +7991,7 @@ function Kanban({
   };
   const keyTargetCol = grab ? columns[grab.targetIdx]?.id : null;
   return /* @__PURE__ */ jsxs("div", { className: `twc-kanban ${className}`, ref: rootRef, ...rest, children: [
+    __twcStyles,
     /* @__PURE__ */ jsx("div", { className: "twc-kanban__sr", role: "status", "aria-live": "polite", children: announce }),
     columns.map((col, colIdx) => {
       const colCards = items.filter((c) => c.column === col.id);
@@ -8240,43 +8083,40 @@ var LIST_CSS = `
 .twc-list__trail { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-subtle); font-size: var(--text-sm); }
 `;
 function List({ items, plain = false, className = "", ...rest }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-list-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-list-styles";
-    el.textContent = LIST_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-list-styles", LIST_CSS);
   const safeHref11 = (url) => {
     if (url == null) return void 0;
     const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
     return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
   };
-  return /* @__PURE__ */ jsx("ul", { className: `twc-list ${className}`, "data-plain": plain || void 0, ...rest, children: items.map((it, i) => {
-    const href = safeHref11(it.href);
-    const interactive = Boolean(it.onClick || href);
-    const Tag2 = href ? "a" : interactive ? "button" : "div";
-    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      it.leading ? /* @__PURE__ */ jsx("span", { className: "twc-list__lead", "aria-hidden": "true", children: it.leading }) : null,
-      /* @__PURE__ */ jsxs("span", { className: "twc-list__main", children: [
-        /* @__PURE__ */ jsx("span", { className: "twc-list__title", children: it.title }),
-        it.description ? /* @__PURE__ */ jsx("span", { className: "twc-list__desc", children: it.description }) : null
-      ] }),
-      it.trailing ? /* @__PURE__ */ jsx("span", { className: "twc-list__trail", children: it.trailing }) : null
-    ] });
-    return /* @__PURE__ */ jsx("li", { style: { display: "contents" }, children: /* @__PURE__ */ jsx(
-      Tag2,
-      {
-        className: "twc-list__item",
-        "data-interactive": interactive || void 0,
-        "data-active": it.active || void 0,
-        href,
-        type: Tag2 === "button" ? "button" : void 0,
-        onClick: it.onClick,
-        children: content
-      }
-    ) }, i);
-  }) });
+  return /* @__PURE__ */ jsxs("ul", { className: `twc-list ${className}`, "data-plain": plain || void 0, ...rest, children: [
+    __twcStyles,
+    items.map((it, i) => {
+      const href = safeHref11(it.href);
+      const interactive = Boolean(it.onClick || href);
+      const Tag2 = href ? "a" : interactive ? "button" : "div";
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        it.leading ? /* @__PURE__ */ jsx("span", { className: "twc-list__lead", "aria-hidden": "true", children: it.leading }) : null,
+        /* @__PURE__ */ jsxs("span", { className: "twc-list__main", children: [
+          /* @__PURE__ */ jsx("span", { className: "twc-list__title", children: it.title }),
+          it.description ? /* @__PURE__ */ jsx("span", { className: "twc-list__desc", children: it.description }) : null
+        ] }),
+        it.trailing ? /* @__PURE__ */ jsx("span", { className: "twc-list__trail", children: it.trailing }) : null
+      ] });
+      return /* @__PURE__ */ jsx("li", { style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+        Tag2,
+        {
+          className: "twc-list__item",
+          "data-interactive": interactive || void 0,
+          "data-active": it.active || void 0,
+          href,
+          type: Tag2 === "button" ? "button" : void 0,
+          onClick: it.onClick,
+          children: content
+        }
+      ) }, i);
+    })
+  ] });
 }
 var NAVBAR_CSS = `
 .twc-navbar { display: flex; align-items: center; gap: var(--space-4); height: 60px; padding: 0 var(--space-5);
@@ -8322,14 +8162,9 @@ function Navbar({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-navbar-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-navbar-styles";
-    el.textContent = NAVBAR_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-navbar-styles", NAVBAR_CSS);
   return /* @__PURE__ */ jsxs("header", { className: `twc-navbar ${className}`, "data-sticky": sticky || void 0, ...rest, children: [
+    __twcStyles,
     onMenuClick ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-navbar__menu-btn", "aria-label": "Open menu", onClick: onMenuClick, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }) }) }) : null,
     brand ? brandHref ? /* @__PURE__ */ jsx("a", { className: "twc-navbar__brand", href: safeHref3(brandHref), children: brand }) : onBrandClick ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-navbar__brand", onClick: onBrandClick, children: brand }) : /* @__PURE__ */ jsx("span", { className: "twc-navbar__brand", children: brand }) : null,
     /* @__PURE__ */ jsx("nav", { className: "twc-navbar__links", children: links.map((l, i) => {
@@ -8400,28 +8235,22 @@ function Popover({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-popover-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-popover-styles";
-    el.textContent = POPOVER_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [openState, setOpenState] = React22.useState(defaultOpen);
-  const [render, setRender] = React22.useState(false);
-  const [pos, setPos] = React22.useState(null);
-  const wrapRef = React22.useRef(null);
-  const popRef = React22.useRef(null);
-  const popId = React22.useId();
+  const __twcStyles = useScopedStyles("twc-popover-styles", POPOVER_CSS);
+  const [openState, setOpenState] = React23__default.useState(defaultOpen);
+  const [render, setRender] = React23__default.useState(false);
+  const [pos, setPos] = React23__default.useState(null);
+  const wrapRef = React23__default.useRef(null);
+  const popRef = React23__default.useRef(null);
+  const popId = React23__default.useId();
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React22.useRef(open);
+  const openRef = React23__default.useRef(open);
   openRef.current = open;
-  const controlledRef = React22.useRef(controlled);
+  const controlledRef = React23__default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React22.useRef(onOpenChange);
+  const onOpenChangeRef = React23__default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React22.useCallback((next) => {
+  const setOpen = React23__default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -8429,7 +8258,7 @@ function Popover({
   }, []);
   const toggle = () => setOpen((o) => !o);
   const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
-  const place = React22.useCallback(() => {
+  const place = React23__default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -8460,7 +8289,7 @@ function Popover({
     arrow = { top: Math.min(Math.max(cy - top - 5.5, 8), ph - 18), [onRight ? "left" : "right"]: -6 };
     setPos({ top, left, width: w, flip: false, arrow });
   }, [placement, align, width]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -8483,7 +8312,7 @@ function Popover({
       document.removeEventListener("keydown", onKey);
     };
   }, [open, place]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -8491,12 +8320,12 @@ function Popover({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (render && open) place();
   }, [render, place]);
-  const restoreRef = React22.useRef(null);
-  const needFocusRef = React22.useRef(false);
-  React22.useEffect(() => {
+  const restoreRef = React23__default.useRef(null);
+  const needFocusRef = React23__default.useRef(false);
+  React23__default.useEffect(() => {
     if (open) {
       restoreRef.current = document.activeElement;
       needFocusRef.current = true;
@@ -8507,7 +8336,7 @@ function Popover({
     needFocusRef.current = false;
     if (prev && typeof prev.focus === "function" && popRef.current?.contains(document.activeElement)) prev.focus();
   }, [open]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (open && render && pos && needFocusRef.current) {
       needFocusRef.current = false;
       popRef.current?.focus({ preventScroll: true });
@@ -8526,6 +8355,7 @@ function Popover({
       "aria-labelledby": title ? `${popId}-title` : void 0,
       style: { top: pos.top, bottom: pos.bottom, left: pos.left, width: pos.width },
       children: [
+        __twcStyles,
         /* @__PURE__ */ jsx("span", { className: "twc-popover__arrow", style: pos.arrow, "aria-hidden": "true" }),
         /* @__PURE__ */ jsxs("div", { className: "twc-popover__inner", children: [
           title ? /* @__PURE__ */ jsx("div", { className: "twc-popover__title", id: `${popId}-title`, children: title }) : null,
@@ -8534,7 +8364,7 @@ function Popover({
       ]
     }
   ) : null;
-  const triggerEl = React22.isValidElement(trigger) ? React22.cloneElement(trigger, {
+  const triggerEl = React23__default.isValidElement(trigger) ? React23__default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -8576,11 +8406,7 @@ function Progress({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-progress-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-progress-styles";
-    el.textContent = `
+  const __twcStyles = useScopedStyles("twc-progress-styles", `
 .twc-progress-wrap { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
 .twc-progress {
   --_h: 8px;
@@ -8612,15 +8438,14 @@ function Progress({
 @media (prefers-reduced-motion: reduce) {
   .twc-progress[data-indeterminate="true"] .twc-progress__bar { animation-duration: 1.3s !important; animation-iteration-count: infinite !important; }
 }
-`;
-    document.head.appendChild(el);
-  }, []);
+`);
   const v = Number.isFinite(value) ? value : 0;
   const pct = indeterminate ? 0 : max > 0 ? Math.min(100, Math.max(0, v / max * 100)) : 0;
   return (
     // Single-root contract: className and ...rest (style, id, handlers, …) share the outer
     // wrapper; role="progressbar" + aria-value* stay on the inner track.
     /* @__PURE__ */ jsxs("div", { className: `twc-progress-wrap ${className}`, ...rest, children: [
+      __twcStyles,
       showLabel && !indeterminate ? /* @__PURE__ */ jsxs("div", { className: "twc-progress__meta", children: [
         /* @__PURE__ */ jsx("span", { children: "Progress" }),
         /* @__PURE__ */ jsxs("span", { children: [
@@ -8662,11 +8487,7 @@ function Radio({
   onChange,
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-radio-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-radio-styles";
-    el.textContent = `
+  const __twcStyles = useScopedStyles("twc-radio-styles", `
 .twc-radio { display: inline-flex; align-items: flex-start; gap: var(--space-2-5); cursor: pointer; font-family: var(--font-sans); }
 /* tone \u2192 accent set (default primary). Mirrors Button's --_accent model; Badge's tone vocabulary. */
 .twc-radio { --_accent: var(--color-primary); --_accent-fg: var(--color-primary-fg); --_accent-subtle: var(--color-primary-subtle); --_accent-subtle-fg: var(--color-primary-subtle-fg); --_accent-border: var(--color-primary-border); }
@@ -8703,15 +8524,14 @@ function Radio({
 .twc-radio__desc { font-size: var(--text-xs); color: var(--color-text-muted); }
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
-`;
-    document.head.appendChild(el);
-  }, []);
-  const autoId = React22.useId();
+`);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
   const describedBy = [rest["aria-describedby"], error ? errId : null].filter(Boolean).join(" ") || void 0;
   const control = /* @__PURE__ */ jsxs("label", { className: `twc-radio ${className}`, "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, htmlFor: fieldId, children: [
+    __twcStyles,
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -8782,19 +8602,13 @@ function Rating({
   style,
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-rating-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-rating-styles";
-    el.textContent = RATING_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [internal, setInternal] = React22.useState(defaultValue);
-  const [hover, setHover] = React22.useState(0);
+  const __twcStyles = useScopedStyles("twc-rating-styles", RATING_CSS);
+  const [internal, setInternal] = React23__default.useState(defaultValue);
+  const [hover, setHover] = React23__default.useState(0);
   const val = value !== void 0 ? value : internal;
   const shown = hover || val;
   const interactive = !readOnly && !disabled;
-  const btnRefs = React22.useRef([]);
+  const btnRefs = React23__default.useRef([]);
   const tabStar = Math.min(count, Math.max(1, Math.round(val) || 1));
   const set = (v) => {
     if (!interactive) return;
@@ -8827,6 +8641,7 @@ function Rating({
       "aria-disabled": disabled || void 0,
       ...rest,
       children: [
+        __twcStyles,
         /* @__PURE__ */ jsx("span", { className: "twc-rating__stars", onMouseLeave: () => setHover(0), onKeyDown, children: Array.from({ length: count }).map((_, i) => {
           const n = i + 1;
           return /* @__PURE__ */ jsx(
@@ -8908,14 +8723,8 @@ function Sidebar({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-sidebar-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-sidebar-styles";
-    el.textContent = SIDEBAR_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [internal, setInternal] = React22.useState(defaultCollapsed);
+  const __twcStyles = useScopedStyles("twc-sidebar-styles", SIDEBAR_CSS);
+  const [internal, setInternal] = React23__default.useState(defaultCollapsed);
   const collapsed = collapsedProp !== void 0 ? collapsedProp : internal;
   const toggle = () => {
     const next = !collapsed;
@@ -8928,6 +8737,7 @@ function Sidebar({
     return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
   };
   return /* @__PURE__ */ jsxs("aside", { className: `twc-sidebar ${className}`, "data-collapsed": collapsed || void 0, ...rest, children: [
+    __twcStyles,
     brand ? /* @__PURE__ */ jsx("div", { className: "twc-sidebar__head", children: /* @__PURE__ */ jsx("span", { className: "twc-sidebar__brand", children: brand }) }) : null,
     /* @__PURE__ */ jsx("nav", { className: "twc-sidebar__nav", children: items.map(
       (it, i) => it.section ? /* @__PURE__ */ jsx("div", { className: "twc-sidebar__section", children: it.section }, i) : (() => {
@@ -8967,11 +8777,7 @@ function Skeleton({
   style,
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-skeleton-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-skeleton-styles";
-    el.textContent = `
+  const __twcStyles = useScopedStyles("twc-skeleton-styles", `
 .twc-skeleton {
   position: relative; overflow: hidden;
   background: var(--color-surface-sunken); border-radius: var(--radius-md);
@@ -8990,11 +8796,12 @@ function Skeleton({
 @media (prefers-reduced-motion: reduce) {
   .twc-skeleton::after { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
 }
-`;
-    document.head.appendChild(el);
-  }, []);
+`);
   if (variant === "text" && lines > 1) {
-    return /* @__PURE__ */ jsx("div", { className: `twc-skeleton__group ${className}`, style: { height, ...style }, ...rest, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("span", { className: "twc-skeleton", "data-variant": "text", style: { width: width || "100%" } }, i)) });
+    return /* @__PURE__ */ jsxs("div", { className: `twc-skeleton__group ${className}`, style: { height, ...style }, ...rest, children: [
+      __twcStyles,
+      Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("span", { className: "twc-skeleton", "data-variant": "text", style: { width: width || "100%" } }, i))
+    ] });
   }
   return /* @__PURE__ */ jsx(
     "span",
@@ -9002,7 +8809,8 @@ function Skeleton({
       className: `twc-skeleton ${className}`,
       "data-variant": variant,
       style: { width, height, ...style },
-      ...rest
+      ...rest,
+      children: __twcStyles
     }
   );
 }
@@ -9068,19 +8876,13 @@ function Slider({
   const min = Number.isFinite(minProp) ? minProp : 0;
   const max = Number.isFinite(maxProp) && maxProp > min ? maxProp : min + 1;
   const step = Number.isFinite(stepProp) && stepProp > 0 ? stepProp : 1;
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-slider-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-slider-styles";
-    el.textContent = SLIDER_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const autoId = React22.useId();
+  const __twcStyles = useScopedStyles("twc-slider-styles", SLIDER_CSS);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React22.useState(defaultValue);
+  const [internal, setInternal] = React23__default.useState(defaultValue);
   const val = value !== void 0 ? value : internal;
-  const trackRef = React22.useRef(null);
-  const [dragging, setDragging] = React22.useState(false);
+  const trackRef = React23__default.useRef(null);
+  const [dragging, setDragging] = React23__default.useState(false);
   const pct = (val - min) / (max - min) * 100;
   const fmt = (v) => formatValue ? formatValue(v) : v;
   const clampSnap = (raw) => {
@@ -9098,8 +8900,8 @@ function Slider({
     const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
     return clampSnap(min + ratio * (max - min));
   };
-  const dragCleanupRef = React22.useRef(null);
-  React22.useEffect(() => () => dragCleanupRef.current?.(), []);
+  const dragCleanupRef = React23__default.useRef(null);
+  React23__default.useEffect(() => () => dragCleanupRef.current?.(), []);
   function onPointerDown(e) {
     if (disabled) return;
     e.preventDefault();
@@ -9137,6 +8939,7 @@ function Slider({
   const display = fmt(val);
   const valueText = formatValue && (typeof display === "string" || typeof display === "number") ? String(display) : void 0;
   return /* @__PURE__ */ jsxs("div", { className: `twc-slider ${className}`, "data-tone": tone, "data-disabled": disabled || void 0, ...rest, children: [
+    __twcStyles,
     label || showValue ? /* @__PURE__ */ jsxs("div", { className: "twc-slider__head", children: [
       label ? /* @__PURE__ */ jsx("label", { className: "twc-slider__label", id: labelId, children: label }) : /* @__PURE__ */ jsx("span", {}),
       showValue ? /* @__PURE__ */ jsx("span", { className: "twc-slider__value", children: display }) : null
@@ -9179,11 +8982,7 @@ function Spinner({
   ...rest
 }) {
   const resolvedColor = color ?? tone;
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-spinner-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-spinner-styles";
-    el.textContent = `
+  const __twcStyles = useScopedStyles("twc-spinner-styles", `
 .twc-spinner {
   --_sz: 24px; --_bw: 2.5px;
   display: inline-block; width: var(--_sz); height: var(--_sz);
@@ -9207,10 +9006,8 @@ function Spinner({
 @media (prefers-reduced-motion: reduce) {
   .twc-spinner { animation-duration: 0.65s !important; animation-iteration-count: infinite !important; }
 }
-`;
-    document.head.appendChild(el);
-  }, []);
-  return /* @__PURE__ */ jsx("span", { className: `twc-spinner ${className}`, "data-size": size, "data-tone": resolvedColor, role: "status", "aria-label": label, ...rest });
+`);
+  return /* @__PURE__ */ jsx("span", { className: `twc-spinner ${className}`, "data-size": size, "data-tone": resolvedColor, role: "status", "aria-label": label, ...rest, children: __twcStyles });
 }
 var STAT_CSS = `
 .twc-stat { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans);
@@ -9243,16 +9040,11 @@ function Stat({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-stat-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-stat-styles";
-    el.textContent = STAT_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-stat-styles", STAT_CSS);
   const isNeg = delta != null && String(delta).trim().startsWith("-");
   const dir = deltaDirection || (delta != null ? isNeg ? "down" : "up" : void 0);
   return /* @__PURE__ */ jsxs("div", { className: `twc-stat ${className}`, "data-plain": plain || void 0, ...rest, children: [
+    __twcStyles,
     /* @__PURE__ */ jsxs("div", { className: "twc-stat__top", children: [
       /* @__PURE__ */ jsx("span", { className: "twc-stat__label", children: label }),
       icon ? /* @__PURE__ */ jsx("span", { className: "twc-stat__icon", "aria-hidden": "true", children: icon }) : null
@@ -9319,14 +9111,8 @@ function Stepper({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-stepper-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-stepper-styles";
-    el.textContent = STEPPER_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [activeInternal, setActiveInternal] = React22.useState(defaultActive);
+  const __twcStyles = useScopedStyles("twc-stepper-styles", STEPPER_CSS);
+  const [activeInternal, setActiveInternal] = React23__default.useState(defaultActive);
   const active = activeProp !== void 0 ? activeProp : activeInternal;
   const handleStep = (i) => {
     if (activeProp === void 0) setActiveInternal(i);
@@ -9338,23 +9124,47 @@ function Stepper({
     if (i === active) return "active";
     return "upcoming";
   };
-  return /* @__PURE__ */ jsx("div", { className: `twc-stepper ${className}`, "data-orientation": orientation, "data-tone": tone, ...rest, children: steps.map((step, i) => {
-    const state = stateOf(i, step);
-    const last = i === steps.length - 1;
-    const isClickable = clickable && i <= active;
-    const interactive = isClickable ? {
-      role: "button",
-      tabIndex: 0,
-      onClick: () => handleStep(i),
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handleStep(i);
+  return /* @__PURE__ */ jsxs("div", { className: `twc-stepper ${className}`, "data-orientation": orientation, "data-tone": tone, ...rest, children: [
+    __twcStyles,
+    steps.map((step, i) => {
+      const state = stateOf(i, step);
+      const last = i === steps.length - 1;
+      const isClickable = clickable && i <= active;
+      const interactive = isClickable ? {
+        role: "button",
+        tabIndex: 0,
+        onClick: () => handleStep(i),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleStep(i);
+          }
         }
+      } : null;
+      const indicator = /* @__PURE__ */ jsx("span", { className: "twc-step__indicator", "aria-hidden": "true", children: state === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : state === "error" ? /* @__PURE__ */ jsx(BangIcon, {}) : step.icon || i + 1 });
+      if (orientation === "vertical") {
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "twc-step",
+            "data-state": state,
+            "data-clickable": isClickable || void 0,
+            "aria-current": state === "active" ? "step" : void 0,
+            ...interactive,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "twc-step__col", children: [
+                indicator,
+                !last ? /* @__PURE__ */ jsx("span", { className: "twc-step__connector" }) : null
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "twc-step__body twc-step__vbody", children: [
+                /* @__PURE__ */ jsx("span", { className: "twc-step__title", children: step.title }),
+                step.description ? /* @__PURE__ */ jsx("span", { className: "twc-step__desc", children: step.description }) : null
+              ] })
+            ]
+          },
+          i
+        );
       }
-    } : null;
-    const indicator = /* @__PURE__ */ jsx("span", { className: "twc-step__indicator", "aria-hidden": "true", children: state === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : state === "error" ? /* @__PURE__ */ jsx(BangIcon, {}) : step.icon || i + 1 });
-    if (orientation === "vertical") {
       return /* @__PURE__ */ jsxs(
         "div",
         {
@@ -9364,11 +9174,9 @@ function Stepper({
           "aria-current": state === "active" ? "step" : void 0,
           ...interactive,
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "twc-step__col", children: [
-              indicator,
-              !last ? /* @__PURE__ */ jsx("span", { className: "twc-step__connector" }) : null
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "twc-step__body twc-step__vbody", children: [
+            indicator,
+            !last ? /* @__PURE__ */ jsx("span", { className: "twc-step__connector" }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "twc-step__body", children: [
               /* @__PURE__ */ jsx("span", { className: "twc-step__title", children: step.title }),
               step.description ? /* @__PURE__ */ jsx("span", { className: "twc-step__desc", children: step.description }) : null
             ] })
@@ -9376,27 +9184,8 @@ function Stepper({
         },
         i
       );
-    }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "twc-step",
-        "data-state": state,
-        "data-clickable": isClickable || void 0,
-        "aria-current": state === "active" ? "step" : void 0,
-        ...interactive,
-        children: [
-          indicator,
-          !last ? /* @__PURE__ */ jsx("span", { className: "twc-step__connector" }) : null,
-          /* @__PURE__ */ jsxs("div", { className: "twc-step__body", children: [
-            /* @__PURE__ */ jsx("span", { className: "twc-step__title", children: step.title }),
-            step.description ? /* @__PURE__ */ jsx("span", { className: "twc-step__desc", children: step.description }) : null
-          ] })
-        ]
-      },
-      i
-    );
-  }) });
+    })
+  ] });
 }
 function Switch({
   label,
@@ -9413,11 +9202,7 @@ function Switch({
   onChange,
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-switch-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-switch-styles";
-    el.textContent = `
+  const __twcStyles = useScopedStyles("twc-switch-styles", `
 /* tone \u2192 accent set (default primary). Mirrors Button's --_accent model; Badge's tone vocabulary. */
 .twc-switch { --_accent: var(--color-primary); --_accent-fg: var(--color-primary-fg); --_accent-subtle: var(--color-primary-subtle); --_accent-subtle-fg: var(--color-primary-subtle-fg); --_accent-border: var(--color-primary-border); }
 .twc-switch[data-tone="success"] { --_accent: var(--color-success); --_accent-fg: var(--color-success-fg); --_accent-subtle: var(--color-success-subtle); --_accent-subtle-fg: var(--color-success-subtle-fg); --_accent-border: var(--color-success); }
@@ -9453,15 +9238,14 @@ function Switch({
 .twc-switch__desc { font-size: var(--text-xs); color: var(--color-text-muted); }
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
-`;
-    document.head.appendChild(el);
-  }, []);
-  const autoId = React22.useId();
+`);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
   const describedBy = [rest["aria-describedby"], error ? errId : null].filter(Boolean).join(" ") || void 0;
   const control = /* @__PURE__ */ jsxs("label", { className: `twc-switch ${className}`, "data-size": size, "data-tone": tone, "data-invalid": invalid || void 0, "data-disabled": disabled || void 0, htmlFor: fieldId, children: [
+    __twcStyles,
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -9538,21 +9322,15 @@ function Table({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-table-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-table-styles";
-    el.textContent = TABLE_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const cols = React22.useMemo(
+  const __twcStyles = useScopedStyles("twc-table-styles", TABLE_CSS);
+  const cols = React23__default.useMemo(
     () => (columns || []).map((c) => ({ ...c, header: c.headerName, render: c.renderCell })),
     [columns]
   );
   const dataRows = rowsProp || [];
-  const [internalSort, setInternalSort] = React22.useState(defaultSort || { field: null, dir: "asc" });
+  const [internalSort, setInternalSort] = React23__default.useState(defaultSort || { field: null, dir: "asc" });
   const sort = (sortProp !== void 0 ? sortProp : internalSort) || { field: null, dir: "asc" };
-  const rows = React22.useMemo(() => {
+  const rows = React23__default.useMemo(() => {
     if (!sortable || !sort.field) return dataRows;
     const col = cols.find((c) => c.field === sort.field);
     if (!col) return dataRows;
@@ -9573,32 +9351,35 @@ function Table({
   const keyFn = rowKey || ((_, i) => i);
   const selected = new Set(selectedKeys || []);
   const wrapStyle = maxHeight !== void 0 ? { ...rest.style, maxHeight, overflowY: "auto" } : rest.style;
-  return /* @__PURE__ */ jsx("div", { className: `twc-table-wrap ${className}`, ...rest, style: wrapStyle, children: /* @__PURE__ */ jsxs("table", { className: "twc-table", "data-hover": hover || void 0, "data-striped": striped || void 0, "data-size": size, "data-sticky": stickyHeader || void 0, children: [
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: cols.map((c) => {
-      const active = sort.field === c.field;
-      const canSort = sortable && c.sortable !== false;
-      return /* @__PURE__ */ jsx(
-        "th",
-        {
-          "data-align": c.align,
-          "data-sortable": canSort || void 0,
-          "data-active": active || void 0,
-          "data-dir": active ? sort.dir : void 0,
-          style: c.width ? { width: c.width } : void 0,
-          "aria-sort": active ? sort.dir === "asc" ? "ascending" : "descending" : canSort ? "none" : void 0,
-          children: canSort ? /* @__PURE__ */ jsxs("button", { type: "button", className: "twc-table__sort", onClick: () => toggleSort(c.field), children: [
-            c.header,
-            /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) })
-          ] }) : c.header
-        },
-        c.field
-      );
-    }) }) }),
-    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
-      const k = keyFn(row, i);
-      return /* @__PURE__ */ jsx("tr", { "data-selected": selected.has(k) || void 0, children: cols.map((c) => /* @__PURE__ */ jsx("td", { "data-align": c.align, children: c.render ? c.render(row[c.field], row, i) : row[c.field] }, c.field)) }, k);
-    }) })
-  ] }) });
+  return /* @__PURE__ */ jsxs("div", { className: `twc-table-wrap ${className}`, ...rest, style: wrapStyle, children: [
+    __twcStyles,
+    /* @__PURE__ */ jsxs("table", { className: "twc-table", "data-hover": hover || void 0, "data-striped": striped || void 0, "data-size": size, "data-sticky": stickyHeader || void 0, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: cols.map((c) => {
+        const active = sort.field === c.field;
+        const canSort = sortable && c.sortable !== false;
+        return /* @__PURE__ */ jsx(
+          "th",
+          {
+            "data-align": c.align,
+            "data-sortable": canSort || void 0,
+            "data-active": active || void 0,
+            "data-dir": active ? sort.dir : void 0,
+            style: c.width ? { width: c.width } : void 0,
+            "aria-sort": active ? sort.dir === "asc" ? "ascending" : "descending" : canSort ? "none" : void 0,
+            children: canSort ? /* @__PURE__ */ jsxs("button", { type: "button", className: "twc-table__sort", onClick: () => toggleSort(c.field), children: [
+              c.header,
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) })
+            ] }) : c.header
+          },
+          c.field
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
+        const k = keyFn(row, i);
+        return /* @__PURE__ */ jsx("tr", { "data-selected": selected.has(k) || void 0, children: cols.map((c) => /* @__PURE__ */ jsx("td", { "data-align": c.align, children: c.render ? c.render(row[c.field], row, i) : row[c.field] }, c.field)) }, k);
+      }) })
+    ] })
+  ] });
 }
 var TABS_CSS = `
 .twc-tabs { font-family: var(--font-sans); }
@@ -9674,31 +9455,25 @@ function Tabs({
   ...rest
 }) {
   const vertical = orientation === "vertical";
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-tabs-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-tabs-styles";
-    el.textContent = TABS_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [internal, setInternal] = React22.useState(defaultValue ?? items[0]?.value);
+  const __twcStyles = useScopedStyles("twc-tabs-styles", TABS_CSS);
+  const [internal, setInternal] = React23__default.useState(defaultValue ?? items[0]?.value);
   const active = value ?? internal;
-  const listRef = React22.useRef(null);
-  const [ind, setInd] = React22.useState({ left: 0, width: 0, top: 0, height: 0 });
-  const baseId = React22.useId();
+  const listRef = React23__default.useRef(null);
+  const [ind, setInd] = React23__default.useState({ left: 0, width: 0, top: 0, height: 0 });
+  const baseId = React23__default.useId();
   const tabIdAt = (i) => `${baseId}-tab-${i}`;
   const panelId = `${baseId}-panel`;
   const activeIndex = items.findIndex((it) => it.value === active);
-  const updateIndicator = React22.useCallback(() => {
+  const updateIndicator = React23__default.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const el = list.querySelector('[data-active="true"]');
     if (el) setInd({ left: el.offsetLeft, width: el.offsetWidth, top: el.offsetTop, height: el.offsetHeight });
   }, []);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     updateIndicator();
   }, [active, updateIndicator, items, orientation]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     const r = () => updateIndicator();
     window.addEventListener("resize", r);
     if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {
@@ -9735,6 +9510,7 @@ function Tabs({
     if (btns && btns[i]) btns[i].focus();
   }
   return /* @__PURE__ */ jsxs("div", { className: `twc-tabs ${className}`, "data-variant": variant, "data-tone": tone, "data-orientation": orientation, ...rest, children: [
+    __twcStyles,
     /* @__PURE__ */ jsxs("div", { className: "twc-tabs__list", ref: listRef, role: "tablist", "aria-orientation": orientation, onKeyDown: onListKeyDown, children: [
       items.map((it, i) => /* @__PURE__ */ jsxs(
         "button",
@@ -9813,14 +9589,9 @@ function Tag({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-tag-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-tag-styles";
-    el.textContent = TAG_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-tag-styles", TAG_CSS);
   return /* @__PURE__ */ jsxs("span", { className: `twc-tag ${className}`, "data-tone": tone, "data-variant": variant, "data-no-remove": !onRemove || void 0, ...rest, children: [
+    __twcStyles,
     leftIcon,
     children,
     onRemove ? /* @__PURE__ */ jsx("button", { className: "twc-tag__remove", onClick: (e) => {
@@ -9842,11 +9613,7 @@ function Textarea({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-textarea-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-textarea-styles";
-    el.textContent = `
+  const __twcStyles = useScopedStyles("twc-textarea-styles", `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
 .twc-field__req { color: var(--color-danger); }
@@ -9875,14 +9642,13 @@ function Textarea({
 .twc-textarea__el:focus { border-color: var(--_accent); box-shadow: var(--_ring); }
 .twc-textarea__el[aria-invalid="true"] { border-color: var(--color-danger); }
 .twc-textarea__el:disabled { background: var(--color-surface-sunken); opacity: 0.7; cursor: not-allowed; }
-`;
-    document.head.appendChild(el);
-  }, []);
-  const autoId = React22.useId();
+`);
+  const autoId = React23__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
   return /* @__PURE__ */ jsxs("div", { className: `twc-field ${className}`, children: [
+    __twcStyles,
     label ? /* @__PURE__ */ jsxs("label", { className: "twc-field__label", htmlFor: fieldId, children: [
       label,
       required ? /* @__PURE__ */ jsx("span", { className: "twc-field__req", children: "*" }) : null
@@ -9930,26 +9696,23 @@ var TIMELINE_CSS = `
 .twc-timeline__desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; line-height: var(--leading-snug); }
 `;
 function Timeline({ items, className = "", ...rest }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-timeline-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-timeline-styles";
-    el.textContent = TIMELINE_CSS;
-    document.head.appendChild(el);
-  }, []);
-  return /* @__PURE__ */ jsx("ul", { className: `twc-timeline ${className}`, ...rest, children: items.map((it, i) => /* @__PURE__ */ jsxs("li", { className: "twc-timeline__item", "data-tone": it.tone || void 0, children: [
-    /* @__PURE__ */ jsxs("div", { className: "twc-timeline__rail", children: [
-      /* @__PURE__ */ jsx("span", { className: "twc-timeline__dot", "aria-hidden": "true", children: it.icon || null }),
-      /* @__PURE__ */ jsx("span", { className: "twc-timeline__line" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "twc-timeline__body", children: [
-      /* @__PURE__ */ jsxs("div", { className: "twc-timeline__head", children: [
-        /* @__PURE__ */ jsx("span", { className: "twc-timeline__title", children: it.title }),
-        it.time ? /* @__PURE__ */ jsx("span", { className: "twc-timeline__time", children: it.time }) : null
+  const __twcStyles = useScopedStyles("twc-timeline-styles", TIMELINE_CSS);
+  return /* @__PURE__ */ jsxs("ul", { className: `twc-timeline ${className}`, ...rest, children: [
+    __twcStyles,
+    items.map((it, i) => /* @__PURE__ */ jsxs("li", { className: "twc-timeline__item", "data-tone": it.tone || void 0, children: [
+      /* @__PURE__ */ jsxs("div", { className: "twc-timeline__rail", children: [
+        /* @__PURE__ */ jsx("span", { className: "twc-timeline__dot", "aria-hidden": "true", children: it.icon || null }),
+        /* @__PURE__ */ jsx("span", { className: "twc-timeline__line" })
       ] }),
-      it.description ? /* @__PURE__ */ jsx("div", { className: "twc-timeline__desc", children: it.description }) : null
-    ] })
-  ] }, i)) });
+      /* @__PURE__ */ jsxs("div", { className: "twc-timeline__body", children: [
+        /* @__PURE__ */ jsxs("div", { className: "twc-timeline__head", children: [
+          /* @__PURE__ */ jsx("span", { className: "twc-timeline__title", children: it.title }),
+          it.time ? /* @__PURE__ */ jsx("span", { className: "twc-timeline__time", children: it.time }) : null
+        ] }),
+        it.description ? /* @__PURE__ */ jsx("div", { className: "twc-timeline__desc", children: it.description }) : null
+      ] })
+    ] }, i))
+  ] });
 }
 var TOAST_CSS = `
 .twc-toast {
@@ -10017,26 +9780,20 @@ function Toast({
   ...rest
 }) {
   const resolvedTone = tone === "neutral" ? "default" : tone;
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-toast-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-toast-styles";
-    el.textContent = TOAST_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const onCloseRef = React22.useRef(onClose);
-  React22.useEffect(() => {
+  const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
+  const onCloseRef = React23__default.useRef(onClose);
+  React23__default.useEffect(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const timer = React22.useRef();
-  const stop = React22.useCallback(() => clearTimeout(timer.current), []);
-  const start = React22.useCallback(() => {
+  const timer = React23__default.useRef();
+  const stop = React23__default.useCallback(() => clearTimeout(timer.current), []);
+  const start = React23__default.useCallback(() => {
     stop();
     if (duration && duration !== Infinity && onCloseRef.current) {
       timer.current = setTimeout(() => onCloseRef.current && onCloseRef.current(), duration);
     }
   }, [duration, stop]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     start();
     return stop;
   }, [start, stop]);
@@ -10064,6 +9821,7 @@ function Toast({
         start();
       },
       children: [
+        __twcStyles,
         /* @__PURE__ */ jsx("span", { className: "twc-toast__icon", "aria-hidden": "true", children: icon || /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
           /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
           /* @__PURE__ */ jsx("path", { d: TOAST_ICONS[resolvedTone] || TOAST_ICONS.default })
@@ -10078,34 +9836,31 @@ function Toast({
   );
 }
 function ToastViewport({ children, limit, className = "", ...rest }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-toast-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-toast-styles";
-    el.textContent = TOAST_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const shown = limit && limit > 0 ? React22.Children.toArray(children).slice(-limit) : children;
-  return /* @__PURE__ */ jsx("div", { className: `twc-toast-viewport ${className}`, ...rest, children: shown });
+  const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
+  const shown = limit && limit > 0 ? React23__default.Children.toArray(children).slice(-limit) : children;
+  return /* @__PURE__ */ jsxs("div", { className: `twc-toast-viewport ${className}`, ...rest, children: [
+    __twcStyles,
+    shown
+  ] });
 }
-var ToastContext = React22.createContext(null);
+var ToastContext = React23__default.createContext(null);
 function useToast() {
-  const ctx = React22.useContext(ToastContext);
+  const ctx = React23__default.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within a <ToastProvider>.");
   return ctx;
 }
 function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps }) {
-  const [toasts, setToasts] = React22.useState([]);
-  const idRef = React22.useRef(0);
-  const limitRef = React22.useRef(limit);
-  React22.useEffect(() => {
+  const [toasts, setToasts] = React23__default.useState([]);
+  const idRef = React23__default.useRef(0);
+  const limitRef = React23__default.useRef(limit);
+  React23__default.useEffect(() => {
     limitRef.current = limit;
   }, [limit]);
-  const dismiss = React22.useCallback((id) => {
+  const dismiss = React23__default.useCallback((id) => {
     setToasts((s) => s.filter((t) => t.id !== id));
   }, []);
-  const clear = React22.useCallback(() => setToasts([]), []);
-  const api = React22.useMemo(() => {
+  const clear = React23__default.useCallback(() => setToasts([]), []);
+  const api = React23__default.useMemo(() => {
     const push = (opts) => {
       const id = idRef.current += 1;
       const next = typeof opts === "string" ? { title: opts } : opts && typeof opts === "object" ? opts : {};
@@ -10126,7 +9881,7 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
     toast.show = withTone("default");
     return { toast, dismiss, clear };
   }, [dismiss, clear]);
-  const value = React22.useMemo(() => ({ ...api, toasts }), [api, toasts]);
+  const value = React23__default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
     children,
     /* @__PURE__ */ jsx(ToastViewport, { limit, ...viewportProps, children: toasts.map((t) => /* @__PURE__ */ jsx(
@@ -10174,19 +9929,13 @@ function Tooltip({
   className = "",
   ...rest
 }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-tooltip-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-tooltip-styles";
-    el.textContent = TOOLTIP_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const id = React22.useId();
-  const [show, setShow] = React22.useState(false);
-  const [coords, setCoords] = React22.useState(null);
-  const timer = React22.useRef(null);
-  const wrapRef = React22.useRef(null);
-  const tipRef = React22.useRef(null);
+  const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
+  const id = React23__default.useId();
+  const [show, setShow] = React23__default.useState(false);
+  const [coords, setCoords] = React23__default.useState(null);
+  const timer = React23__default.useRef(null);
+  const wrapRef = React23__default.useRef(null);
+  const tipRef = React23__default.useRef(null);
   const open = () => {
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setShow(true), delay);
@@ -10195,8 +9944,8 @@ function Tooltip({
     clearTimeout(timer.current);
     setShow(false);
   };
-  React22.useEffect(() => () => clearTimeout(timer.current), []);
-  const place = React22.useCallback(() => {
+  React23__default.useEffect(() => () => clearTimeout(timer.current), []);
+  const place = React23__default.useCallback(() => {
     const el = wrapRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -10212,10 +9961,10 @@ function Tooltip({
     else if (placement === "right") setCoords({ ...base, top: clampY(cy), left: Math.round(r.right + gap) });
     else setCoords({ ...base, left: clampX(cx), bottom: Math.round(vh - r.top + gap) });
   }, [placement]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     place();
   }, [place]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!show) return void 0;
     place();
     const onMove = () => place();
@@ -10226,7 +9975,7 @@ function Tooltip({
       window.removeEventListener("resize", onMove);
     };
   }, [show, place]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!show) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -10238,7 +9987,7 @@ function Tooltip({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [show]);
   const describedBy = show ? id : void 0;
-  const trigger = React22.isValidElement(children) && children.type !== React22.Fragment ? React22.cloneElement(children, {
+  const trigger = React23__default.isValidElement(children) && children.type !== React23__default.Fragment ? React23__default.cloneElement(children, {
     "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
   }) : /* @__PURE__ */ jsx("span", { "aria-describedby": describedBy, children });
   return /* @__PURE__ */ jsxs(
@@ -10252,6 +10001,7 @@ function Tooltip({
       onBlur: close,
       ...rest,
       children: [
+        __twcStyles,
         trigger,
         coords ? createPortal(
           /* @__PURE__ */ jsxs(
@@ -10363,19 +10113,13 @@ function TreeView({
   ...rest
 }) {
   const nodes = items;
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-tree-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-tree-styles";
-    el.textContent = TREE_CSS;
-    document.head.appendChild(el);
-  }, []);
-  const [expInternal, setExpInternal] = React22.useState(() => new Set(defaultExpanded));
+  const __twcStyles = useScopedStyles("twc-tree-styles", TREE_CSS);
+  const [expInternal, setExpInternal] = React23__default.useState(() => new Set(defaultExpanded));
   const expanded = expandedProp !== void 0 ? new Set(expandedProp) : expInternal;
-  const [selInternal, setSelInternal] = React22.useState(defaultSelectedId);
+  const [selInternal, setSelInternal] = React23__default.useState(defaultSelectedId);
   const selectedId = selectedProp !== void 0 ? selectedProp : selInternal;
-  const [focusId, setFocusId] = React22.useState(null);
-  const rowRefs = React22.useRef(/* @__PURE__ */ new Map());
+  const [focusId, setFocusId] = React23__default.useState(null);
+  const rowRefs = React23__default.useRef(/* @__PURE__ */ new Map());
   const toggle = (id) => {
     const n = new Set(expanded);
     n.has(id) ? n.delete(id) : n.add(id);
@@ -10434,21 +10178,24 @@ function TreeView({
     e.preventDefault();
     if (next != null) focusRow(next);
   };
-  return /* @__PURE__ */ jsx("div", { className: `twc-tree ${className}`, role: "tree", onKeyDown, ...rest, children: /* @__PURE__ */ jsx("ul", { className: "twc-tree__group", role: "none", children: nodes.map((n) => /* @__PURE__ */ jsx(
-    Node,
-    {
-      node: n,
-      depth: 0,
-      expanded,
-      selectedId,
-      tabbableId,
-      rowRefs,
-      onToggle: toggle,
-      onSelect: select,
-      onRowFocus: setFocusId
-    },
-    n.id
-  )) }) });
+  return /* @__PURE__ */ jsxs("div", { className: `twc-tree ${className}`, role: "tree", onKeyDown, ...rest, children: [
+    __twcStyles,
+    /* @__PURE__ */ jsx("ul", { className: "twc-tree__group", role: "none", children: nodes.map((n) => /* @__PURE__ */ jsx(
+      Node,
+      {
+        node: n,
+        depth: 0,
+        expanded,
+        selectedId,
+        tabbableId,
+        rowRefs,
+        onToggle: toggle,
+        onSelect: select,
+        onRowFocus: setFocusId
+      },
+      n.id
+    )) })
+  ] });
 }
 function sp(v) {
   if (v == null) return void 0;
@@ -10648,15 +10395,12 @@ function safeHref8(url) {
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
 function Code({ as: Tag2 = "code", className = "", children, ...rest }) {
-  React22.useInsertionEffect(() => {
-    if (document.getElementById("twc-code-styles")) return;
-    const el = document.createElement("style");
-    el.id = "twc-code-styles";
-    el.textContent = CODE_CSS;
-    document.head.appendChild(el);
-  }, []);
+  const __twcStyles = useScopedStyles("twc-code-styles", CODE_CSS);
   if (Tag2 === "a" && rest.href != null) rest.href = safeHref8(rest.href);
-  return /* @__PURE__ */ jsx(Tag2, { className: `twc-code ${className}`.trim(), ...rest, children });
+  return /* @__PURE__ */ jsxs(Tag2, { className: `twc-code ${className}`.trim(), ...rest, children: [
+    __twcStyles,
+    children
+  ] });
 }
 var LEVEL_SIZE = { 1: "4xl", 2: "2xl", 3: "xl", 4: "lg", 5: "base", 6: "sm" };
 function safeHref9(url) {
@@ -10747,44 +10491,44 @@ function Text({
   );
 }
 var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicLayoutEffect = canUseDOM ? React22.useLayoutEffect : React22.useEffect;
+var useIsomorphicLayoutEffect = canUseDOM ? React23__default.useLayoutEffect : React23__default.useEffect;
 function useMounted() {
-  const [mounted, setMounted] = React22.useState(false);
-  React22.useEffect(() => {
+  const [mounted, setMounted] = React23__default.useState(false);
+  React23__default.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 function usePrevious(value) {
-  const ref = React22.useRef(void 0);
-  React22.useEffect(() => {
+  const ref = React23__default.useRef(void 0);
+  React23__default.useEffect(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 }
 function useToggle(initial = false) {
-  const [on, setOn] = React22.useState(initial);
-  const toggle = React22.useCallback((next) => {
+  const [on, setOn] = React23__default.useState(initial);
+  const toggle = React23__default.useCallback((next) => {
     setOn((prev) => typeof next === "boolean" ? next : !prev);
   }, []);
   return [on, toggle, setOn];
 }
 function useDisclosure(initial = false) {
-  const [open, setOpen] = React22.useState(initial);
-  const onOpen = React22.useCallback(() => setOpen(true), []);
-  const onClose = React22.useCallback(() => setOpen(false), []);
-  const onToggle = React22.useCallback(() => setOpen((p) => !p), []);
+  const [open, setOpen] = React23__default.useState(initial);
+  const onOpen = React23__default.useCallback(() => setOpen(true), []);
+  const onClose = React23__default.useCallback(() => setOpen(false), []);
+  const onToggle = React23__default.useCallback(() => setOpen((p) => !p), []);
   return { open, onOpen, onClose, onToggle, setOpen };
 }
 function useControllableState({ value, defaultValue, onChange } = {}) {
   const isControlled = value !== void 0;
-  const [uncontrolled, setUncontrolled] = React22.useState(defaultValue);
+  const [uncontrolled, setUncontrolled] = React23__default.useState(defaultValue);
   const current = isControlled ? value : uncontrolled;
-  const ref = React22.useRef({ current, isControlled, onChange });
+  const ref = React23__default.useRef({ current, isControlled, onChange });
   useIsomorphicLayoutEffect(() => {
     ref.current = { current, isControlled, onChange };
   });
-  const setValue = React22.useCallback((next) => {
+  const setValue = React23__default.useCallback((next) => {
     const { current: cur, isControlled: ctrl, onChange: cb } = ref.current;
     const resolved = typeof next === "function" ? next(cur) : next;
     if (resolved === cur) return;
@@ -10795,8 +10539,8 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
 }
 function useMediaQuery(query) {
   const get = () => canUseDOM ? window.matchMedia(query).matches : false;
-  const [matches3, setMatches] = React22.useState(get);
-  React22.useEffect(() => {
+  const [matches3, setMatches] = React23__default.useState(get);
+  React23__default.useEffect(() => {
     if (!canUseDOM) return void 0;
     const mql = window.matchMedia(query);
     const onChange = () => setMatches(mql.matches);
@@ -10811,7 +10555,7 @@ function usePrefersReducedMotion() {
 }
 function useColorScheme({ storageKey = "twico-theme", attribute = "class", element, disableTransitionsOnChange = true } = {}) {
   const getTarget = () => element || (canUseDOM ? document.documentElement : null);
-  const firstApply = React22.useRef(true);
+  const firstApply = React23__default.useRef(true);
   const read = () => {
     if (!canUseDOM) return "light";
     try {
@@ -10821,8 +10565,8 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     }
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   };
-  const [theme, setThemeState] = React22.useState(read);
-  const apply = React22.useCallback(
+  const [theme, setThemeState] = React23__default.useState(read);
+  const apply = React23__default.useCallback(
     (t) => {
       const target = getTarget();
       if (!target) return;
@@ -10848,11 +10592,11 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   useIsomorphicLayoutEffect(() => {
     apply(theme);
   }, [theme, apply]);
-  const themeRef = React22.useRef(theme);
+  const themeRef = React23__default.useRef(theme);
   useIsomorphicLayoutEffect(() => {
     themeRef.current = theme;
   }, [theme]);
-  const setTheme = React22.useCallback(
+  const setTheme = React23__default.useCallback(
     (t) => {
       setThemeState(t);
       try {
@@ -10863,10 +10607,10 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     },
     [storageKey]
   );
-  const toggle = React22.useCallback(() => {
+  const toggle = React23__default.useCallback(() => {
     setTheme(themeRef.current === "dark" ? "light" : "dark");
   }, [setTheme]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!canUseDOM) return void 0;
     const sync = () => setThemeState(read());
     const onStorage = (e) => {
@@ -10882,14 +10626,14 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   return { theme, setTheme, toggle, isDark: theme === "dark" };
 }
 function useEventListener(eventName, handler, element, options) {
-  const saved = React22.useRef(handler);
+  const saved = React23__default.useRef(handler);
   useIsomorphicLayoutEffect(() => {
     saved.current = handler;
   }, [handler]);
   const capture = typeof options === "boolean" ? options : options && options.capture;
   const passive = typeof options === "object" && options ? options.passive : void 0;
   const once = typeof options === "object" && options ? options.once : void 0;
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     const target = element && element.current || element || (canUseDOM ? window : null);
     if (!target || !target.addEventListener) return void 0;
     const opts = typeof options === "boolean" ? options : { capture, passive, once };
@@ -10899,11 +10643,11 @@ function useEventListener(eventName, handler, element, options) {
   }, [eventName, element, capture, passive, once]);
 }
 function useClickOutside(ref, handler, events = ["mousedown", "touchstart"]) {
-  const saved = React22.useRef(handler);
+  const saved = React23__default.useRef(handler);
   useIsomorphicLayoutEffect(() => {
     saved.current = handler;
   }, [handler]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!canUseDOM) return void 0;
     const listener = (e) => {
       const el = ref && ref.current;
@@ -10938,8 +10682,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   };
-  const [stored, setStored] = React22.useState(read);
-  const setValue = React22.useCallback(
+  const [stored, setStored] = React23__default.useState(read);
+  const setValue = React23__default.useCallback(
     (value) => {
       setStored((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -10955,8 +10699,8 @@ function useLocalStorage(key, initialValue) {
   return [stored, setValue];
 }
 function useCopyToClipboard(timeout = 1500) {
-  const [copied, setCopied] = React22.useState(false);
-  const copy = React22.useCallback(async (text) => {
+  const [copied, setCopied] = React23__default.useState(false);
+  const copy = React23__default.useCallback(async (text) => {
     if (!canUseDOM || !navigator.clipboard) {
       setCopied(false);
       return false;
@@ -10970,7 +10714,7 @@ function useCopyToClipboard(timeout = 1500) {
       return false;
     }
   }, []);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!copied) return void 0;
     const t = setTimeout(() => setCopied(false), timeout);
     return () => clearTimeout(t);
@@ -10978,23 +10722,23 @@ function useCopyToClipboard(timeout = 1500) {
   return { copied, copy };
 }
 function useDebouncedValue(value, delay = 200) {
-  const [debounced, setDebounced] = React22.useState(value);
-  React22.useEffect(() => {
+  const [debounced, setDebounced] = React23__default.useState(value);
+  React23__default.useEffect(() => {
     const t = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(t);
   }, [value, delay]);
   return debounced;
 }
 function useDebouncedCallback(callback, delay = 200) {
-  const saved = React22.useRef(callback);
-  const timer = React22.useRef(null);
+  const saved = React23__default.useRef(callback);
+  const timer = React23__default.useRef(null);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React22.useEffect(() => () => {
+  React23__default.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
-  return React22.useCallback(
+  return React23__default.useCallback(
     (...args) => {
       if (timer.current) clearTimeout(timer.current);
       timer.current = setTimeout(() => saved.current(...args), delay);
@@ -11003,33 +10747,33 @@ function useDebouncedCallback(callback, delay = 200) {
   );
 }
 function useInterval(callback, delay) {
-  const saved = React22.useRef(callback);
+  const saved = React23__default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (delay == null) return void 0;
     const id = setInterval(() => saved.current(), delay);
     return () => clearInterval(id);
   }, [delay]);
 }
 function useTimeout(callback, delay) {
-  const saved = React22.useRef(callback);
+  const saved = React23__default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (delay == null) return void 0;
     const id = setTimeout(() => saved.current(), delay);
     return () => clearTimeout(id);
   }, [delay]);
 }
 function useWindowSize() {
-  const [size, setSize] = React22.useState(() => ({
+  const [size, setSize] = React23__default.useState(() => ({
     width: canUseDOM ? window.innerWidth : 0,
     height: canUseDOM ? window.innerHeight : 0
   }));
-  React22.useEffect(() => {
+  React23__default.useEffect(() => {
     if (!canUseDOM) return void 0;
     const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
     onResize();
@@ -11039,8 +10783,8 @@ function useWindowSize() {
   return size;
 }
 function useHover(ref) {
-  const [hovered, setHovered] = React22.useState(false);
-  React22.useEffect(() => {
+  const [hovered, setHovered] = React23__default.useState(false);
+  React23__default.useEffect(() => {
     const el = ref && ref.current;
     if (!el) return void 0;
     const on = () => setHovered(true);
@@ -11056,8 +10800,8 @@ function useHover(ref) {
 }
 function useIntersectionObserver(ref, options = {}) {
   const { root = null, rootMargin = "0px", threshold = 0 } = options;
-  const [entry, setEntry] = React22.useState(null);
-  React22.useEffect(() => {
+  const [entry, setEntry] = React23__default.useState(null);
+  React23__default.useEffect(() => {
     const el = ref && ref.current;
     if (!canUseDOM || !el || typeof IntersectionObserver === "undefined") return void 0;
     const obs = new IntersectionObserver(([e]) => setEntry(e), { root, rootMargin, threshold });
@@ -11085,7 +10829,7 @@ function useScrollLock(locked = true) {
   }, [locked]);
 }
 function useId(prefix = "twc") {
-  const raw = React22.useId();
+  const raw = React23__default.useId();
   return prefix ? `${prefix}-${raw.replace(/:/g, "")}` : raw;
 }