@civitai/blocks-react 0.34.0 → 0.35.1

package/README.md

@@ -594,7 +594,7 @@ export function App() {
 | `Loader` | CSS-keyframe spinner; `size`, `color`; `role="status"`. |
 | `Badge` | `variant`, `size`, `color`. |
 | `Modal` | `opened` + `onClose`, `title`, `size`; `role="dialog"` + `aria-modal`, Escape- and overlay-click-to-close, focuses the panel on open and restores focus on close. |
-| `Slider` | controlled range (`value: number`, `onChange`, `min`/`max`/`step`, `showValue`). Native `input[type=range]` — keyboard-operable, implicit `role="slider"`; accent tracks `--ci-color-primary`. Same `label`/`description`/`error`/`required` wiring as `TextInput`. |
+| `Slider` | controlled range (`value: number`, `onChange`, `min`/`max`/`step`, `showValue`). Native `input[type=range]` — keyboard-operable, implicit `role="slider"`; accent tracks `--civitai-color-primary`. Same `label`/`description`/`error`/`required` wiring as `TextInput`. |
 | `NumberInput` | controlled numeric (`value: number \| null`, `onChange`, `min`/`max`/`step`). Rejects non-numeric (never emits `NaN`), clamps to `[min,max]` on blur, empty → `null`. Same label/description/error wiring. |
 | `Select` | controlled dropdown (`value: string`, `onChange`, `options: {value,label,disabled}[]` **or** `<option>` children, `placeholder`). Native `<select>`, `role="combobox"`. Same label/description/error wiring. |
 | `Collapse` | controlled disclosure (`open` + `onOpenChange`, `title`, `disabled`) for the "advanced params reveal". `aria-expanded` + `aria-controls`; content region `role="region"`, `hidden` when closed. |

package/dist/ui/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/ui/Badge.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC5D,2CAA2C;IAC3C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC9E;AAUD;;GAEG;AACH,eAAO,MAAM,KAAK,wGAyBhB,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/ui/Badge.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC5D,2CAA2C;IAC3C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CAC9E;AAyBD;;GAEG;AACH,eAAO,MAAM,KAAK,wGAyBhB,CAAC"}

package/dist/ui/Badge.js

@@ -2,11 +2,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useBlocksStyles } from './styles.js';
 const SEMANTIC_COLORS = new Set(['error', 'success', 'warning', 'info']);
+/**
+ * Design-system reconciliation (0.35.0):
+ *
+ * `@civitai/components` 0.1.2 added a `data-color` intent contract to its Badge
+ * (info / success / warning / error), mirroring Alert. We deliberately DO NOT
+ * emit `data-color` here and keep the pre-existing inline-CSS-var override
+ * instead (now `--civitai-color-primary`, renamed from `--ci-color-primary`).
+ * Rationale: this Badge's public `color` prop also accepts ANY CSS color string
+ * (e.g. `#ff00ff`, `hsl(...)`), which `data-color` cannot express — it only
+ * covers the 4 named intents. Overriding `--civitai-color-primary` inline keeps
+ * the FULL public API working unchanged (the component's variant rules read that
+ * token), so this is the least-breaking choice. Named intents resolve to the
+ * design-system's `--civitai-color-<intent>` token, so they still track the
+ * theme correctly.
+ */
 function resolveAccent(color) {
     if (!color || color === 'primary')
         return undefined;
     if (SEMANTIC_COLORS.has(color))
-        return `var(--ci-color-${color})`;
+        return `var(--civitai-color-${color})`;
     return color;
 }
 /**
@@ -17,7 +32,7 @@ export const Badge = forwardRef(function Badge({ variant = 'light', size = 'md',
     const accent = resolveAccent(color);
     return (_jsx("span", { ref: ref, ...rest, "data-civitai-ui": "badge", "data-variant": variant, "data-size": size, style: accent
             ? {
-                ['--ci-color-primary']: accent,
+                ['--civitai-color-primary']: accent,
                 ...style,
             }
             : style, children: children }));

package/dist/ui/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/ui/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAkB9C,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAEzE,SAAS,aAAa,CAAC,KAA0B;IAC/C,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IACpD,IAAI,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC;QAAE,OAAO,kBAAkB,KAAK,GAAG,CAAC;IAClE,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA8B,SAAS,KAAK,CACzE,EAAE,OAAO,GAAG,OAAO,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAC/E,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,OAAO,CACL,eACE,GAAG,EAAE,GAAG,KACJ,IAAI,qBACQ,OAAO,kBACT,OAAO,eACV,IAAI,EACf,KAAK,EACH,MAAM;YACJ,CAAC,CAAE;gBACC,CAAC,oBAA8B,CAAC,EAAE,MAAM;gBACxC,GAAG,KAAK;aACe;YAC3B,CAAC,CAAC,KAAK,YAGV,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/ui/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAkB9C,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAEzE;;;;;;;;;;;;;;GAcG;AACH,SAAS,aAAa,CAAC,KAA0B;IAC/C,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IACpD,IAAI,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC;QAAE,OAAO,uBAAuB,KAAK,GAAG,CAAC;IACvE,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA8B,SAAS,KAAK,CACzE,EAAE,OAAO,GAAG,OAAO,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAC/E,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,OAAO,CACL,eACE,GAAG,EAAE,GAAG,KACJ,IAAI,qBACQ,OAAO,kBACT,OAAO,eACV,IAAI,EACf,KAAK,EACH,MAAM;YACJ,CAAC,CAAE;gBACC,CAAC,yBAAmC,CAAC,EAAE,MAAM;gBAC7C,GAAG,KAAK;aACe;YAC3B,CAAC,CAAC,KAAK,YAGV,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/ui/BlockGate.js

@@ -56,21 +56,21 @@ const wrapperStyle = {
     justifyContent: 'center',
     padding: 24,
     boxSizing: 'border-box',
-    background: 'var(--ci-color-surface-2)',
-    color: 'var(--ci-color-text)',
+    background: 'var(--civitai-color-surface-2)',
+    color: 'var(--civitai-color-text)',
 };
 const brandStyle = {
     fontSize: 12,
     fontWeight: 700,
     letterSpacing: '0.08em',
     textTransform: 'uppercase',
-    color: 'var(--ci-color-primary)',
+    color: 'var(--civitai-color-primary)',
 };
 const titleStyle = { fontSize: 18, fontWeight: 700 };
 const bodyStyle = {
     fontSize: 14,
     lineHeight: 1.5,
-    color: 'var(--ci-color-text-dimmed)',
+    color: 'var(--civitai-color-text-dimmed)',
 };
 /**
  * The branded "Open on Civitai" landing shown when a block is loaded DIRECTLY

package/dist/ui/BlockGate.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockGate.js","sourceRoot":"","sources":["../../src/ui/BlockGate.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BlockGate.js","sourceRoot":"","sources":["../../src/ui/BlockGate.tsx"],"names":[],"mappings":"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"}

package/dist/ui/Button.d.ts

@@ -8,7 +8,7 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     /**
      * Accent color. `'primary'` (default) or a semantic token name
      * (`'error' | 'success' | 'warning' | 'info'`), or any CSS color string —
-     * it overrides the `--ci-color-primary` the variant styling reads.
+     * it overrides the `--civitai-color-primary` the variant styling reads.
      */
     color?: 'primary' | 'error' | 'success' | 'warning' | 'info' | (string & {});
     /**

package/dist/ui/Button.js

@@ -7,7 +7,7 @@ function resolveAccent(color) {
     if (!color || color === 'primary')
         return undefined;
     if (SEMANTIC_COLORS.has(color))
-        return `var(--ci-color-${color})`;
+        return `var(--civitai-color-${color})`;
     return color;
 }
 /**
@@ -40,8 +40,8 @@ export const Button = forwardRef(function Button({ variant = 'filled', size = 'm
             onClick?.(e);
         }, style: accent
             ? {
-                ['--ci-color-primary']: accent,
-                ['--ci-color-primary-hover']: accent,
+                ['--civitai-color-primary']: accent,
+                ['--civitai-color-primary-hover']: accent,
                 ...style,
             }
             : style, children: [loading ? _jsx(Loader, { size: "sm", "aria-hidden": "true" }) : null, leftSection != null ? (_jsx("span", { "data-civitai-ui-section": "left", children: leftSection })) : null, children, rightSection != null ? (_jsx("span", { "data-civitai-ui-section": "right", children: rightSection })) : null] }));

package/dist/ui/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/ui/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA+B9C,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAEzE,SAAS,aAAa,CAAC,KAA2B;IAChD,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IACpD,IAAI,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC;QAAE,OAAO,kBAAkB,KAAK,GAAG,CAAC;IAClE,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EACE,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,GAAG,IAAI,EACR,EACD,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO,CAAC;IACvC,OAAO,CACL,kBACE,GAAG,EAAE,GAAG;QACR,uEAAuE;QACvE,kEAAkE;QAClE,4BAA4B;QAC5B,IAAI,EAAE,IAAI,IAAI,QAAQ,KAIlB,IAAI,qBACQ,QAAQ,kBACV,OAAO,eACV,IAAI,qBACE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,QAAQ,EAAE,UAAU,eACT,OAAO,IAAI,SAAS,EAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,qEAAqE;YACrE,yDAAyD;YACzD,IAAI,UAAU,EAAE,CAAC;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;YACD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACf,CAAC,EACD,KAAK,EACH,MAAM;YACJ,CAAC,CAAE;gBACC,CAAC,oBAA8B,CAAC,EAAE,MAAM;gBACxC,CAAC,0BAAoC,CAAC,EAAE,MAAM;gBAC9C,GAAG,KAAK;aACe;YAC3B,CAAC,CAAC,KAAK,aAGV,OAAO,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,iBAAa,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EACxD,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACrB,0CAA8B,MAAM,YAAE,WAAW,GAAQ,CAC1D,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,EACR,YAAY,IAAI,IAAI,CAAC,CAAC,CAAC,CACtB,0CAA8B,OAAO,YAAE,YAAY,GAAQ,CAC5D,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/ui/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA+B9C,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;AAEzE,SAAS,aAAa,CAAC,KAA2B;IAChD,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IACpD,IAAI,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC;QAAE,OAAO,uBAAuB,KAAK,GAAG,CAAC;IACvE,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EACE,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,GAAG,IAAI,EACR,EACD,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO,CAAC;IACvC,OAAO,CACL,kBACE,GAAG,EAAE,GAAG;QACR,uEAAuE;QACvE,kEAAkE;QAClE,4BAA4B;QAC5B,IAAI,EAAE,IAAI,IAAI,QAAQ,KAIlB,IAAI,qBACQ,QAAQ,kBACV,OAAO,eACV,IAAI,qBACE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,QAAQ,EAAE,UAAU,eACT,OAAO,IAAI,SAAS,EAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,qEAAqE;YACrE,yDAAyD;YACzD,IAAI,UAAU,EAAE,CAAC;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,OAAO;YACT,CAAC;YACD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACf,CAAC,EACD,KAAK,EACH,MAAM;YACJ,CAAC,CAAE;gBACC,CAAC,yBAAmC,CAAC,EAAE,MAAM;gBAC7C,CAAC,+BAAyC,CAAC,EAAE,MAAM;gBACnD,GAAG,KAAK;aACe;YAC3B,CAAC,CAAC,KAAK,aAGV,OAAO,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,iBAAa,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EACxD,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACrB,0CAA8B,MAAM,YAAE,WAAW,GAAQ,CAC1D,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,EACR,YAAY,IAAI,IAAI,CAAC,CAAC,CAAC,CACtB,0CAA8B,OAAO,YAAE,YAAY,GAAQ,CAC5D,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/ui/Slider.d.ts

@@ -31,7 +31,7 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
  * implicit `role="slider"` with `aria-valuemin`/`max`/`now` for free. The label,
  * description and error are wired via `htmlFor` / `id` / `aria-describedby` /
  * `aria-invalid`. Auto-themed via `useBlocksStyles()`; the accent tracks
- * `--ci-color-primary`.
+ * `--civitai-color-primary`.
  */
 export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Slider.d.ts.map

package/dist/ui/Slider.js

@@ -8,7 +8,7 @@ import { useBlocksStyles } from './styles.js';
  * implicit `role="slider"` with `aria-valuemin`/`max`/`now` for free. The label,
  * description and error are wired via `htmlFor` / `id` / `aria-describedby` /
  * `aria-invalid`. Auto-themed via `useBlocksStyles()`; the accent tracks
- * `--ci-color-primary`.
+ * `--civitai-color-primary`.
  */
 export const Slider = forwardRef(function Slider({ value, onChange, min = 0, max = 100, step = 1, label, description, error, required, showValue = false, className, inputClassName, id, style, ...rest }, ref) {
     useBlocksStyles();

package/dist/ui/styles.d.ts

@@ -1,9 +1,24 @@
-/** The full stylesheet shipped by the pack. Exported for SSR/manual use. */
-export declare const BLOCKS_UI_STYLES = "\n:root {\n  --ci-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ci-radius: 8px;\n  --ci-color-text: #1a1a1a;\n  --ci-color-text-dimmed: #6b7280;\n  --ci-color-surface: #ffffff;\n  --ci-color-surface-2: #f4f4f5;\n  --ci-color-border: #e0e0e3;\n  --ci-color-primary: #228be6;\n  --ci-color-primary-hover: #1c7ed6;\n  --ci-color-primary-fg: #ffffff;\n  --ci-color-error: #e03131;\n  --ci-color-success: #2f9e44;\n  --ci-color-warning: #f08c00;\n  --ci-color-info: #1971c2;\n}\n\n[data-theme='light'] {\n  --ci-color-text: #1a1a1a;\n  --ci-color-text-dimmed: #6b7280;\n  --ci-color-surface: #ffffff;\n  --ci-color-surface-2: #f4f4f5;\n  --ci-color-border: #e0e0e3;\n}\n\n[data-theme='dark'] {\n  --ci-color-text: #e6e6e6;\n  --ci-color-text-dimmed: #909296;\n  --ci-color-surface: #1a1b1e;\n  --ci-color-surface-2: #25262b;\n  --ci-color-border: #2c2e33;\n  --ci-color-primary: #228be6;\n  --ci-color-primary-hover: #339af0;\n  --ci-color-primary-fg: #ffffff;\n  --ci-color-error: #ff6b6b;\n  --ci-color-success: #51cf66;\n  --ci-color-warning: #ffa94d;\n  --ci-color-info: #4dabf7;\n}\n\n\n[data-civitai-ui] {\n  box-sizing: border-box;\n  font-family: var(--ci-font);\n}\n[data-civitai-ui] *,\n[data-civitai-ui] *::before,\n[data-civitai-ui] *::after {\n  box-sizing: border-box;\n}\n\n/* ----- Button ----- */\n[data-civitai-ui='button'] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  border: 1px solid transparent;\n  border-radius: var(--ci-radius);\n  font-family: var(--ci-font);\n  font-weight: 600;\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n}\n[data-civitai-ui='button'][data-size='sm'] { height: 30px; padding: 0 14px; font-size: 13px; }\n[data-civitai-ui='button'][data-size='md'] { height: 36px; padding: 0 18px; font-size: 14px; }\n[data-civitai-ui='button'][data-size='lg'] { height: 44px; padding: 0 22px; font-size: 16px; }\n[data-civitai-ui='button'][data-full-width='true'] { width: 100%; }\n[data-civitai-ui='button'][data-variant='filled'] {\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='button'][data-variant='filled']:hover:not(:disabled) {\n  background: var(--ci-color-primary-hover);\n  border-color: var(--ci-color-primary-hover);\n}\n[data-civitai-ui='button'][data-variant='light'] {\n  background: color-mix(in srgb, var(--ci-color-primary) 12%, transparent);\n  color: var(--ci-color-primary);\n  border-color: transparent;\n}\n[data-civitai-ui='button'][data-variant='light']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 22%, transparent);\n}\n[data-civitai-ui='button'][data-variant='outline'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='button'][data-variant='outline']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);\n}\n[data-civitai-ui='button'][data-variant='subtle'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: transparent;\n}\n[data-civitai-ui='button'][data-variant='subtle']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);\n}\n[data-civitai-ui='button']:disabled,\n[data-civitai-ui='button'][aria-busy='true'] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui='button'] [data-civitai-ui-section] {\n  display: inline-flex;\n  align-items: center;\n}\n\n/* ----- TextInput / Textarea / NumberInput / Select / Slider ----- */\n[data-civitai-ui='text-input'],\n[data-civitai-ui='textarea'],\n[data-civitai-ui='number-input'],\n[data-civitai-ui='select'],\n[data-civitai-ui='slider'] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n[data-civitai-ui-label] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ci-color-text);\n}\n[data-civitai-ui-required] {\n  color: var(--ci-color-error);\n  margin-left: 2px;\n}\n[data-civitai-ui-description] {\n  font-size: 12px;\n  color: var(--ci-color-text-dimmed);\n}\n[data-civitai-ui-error] {\n  font-size: 12px;\n  color: var(--ci-color-error);\n}\n[data-civitai-ui-control] {\n  width: 100%;\n  font-family: var(--ci-font);\n  font-size: 14px;\n  color: var(--ci-color-text);\n  background: var(--ci-color-surface);\n  border: 1px solid var(--ci-color-border);\n  border-radius: var(--ci-radius);\n  padding: 8px 12px;\n  transition: border-color 120ms ease;\n}\n[data-civitai-ui-control]:focus {\n  outline: none;\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui-control][aria-invalid='true'] {\n  border-color: var(--ci-color-error);\n}\n[data-civitai-ui-control]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\ntextarea[data-civitai-ui-control] {\n  resize: vertical;\n  line-height: 1.5;\n}\n\n/* ----- Card ----- */\n[data-civitai-ui='card'] {\n  background: var(--ci-color-surface);\n  border-radius: var(--ci-radius);\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='card'][data-with-border='true'] {\n  border: 1px solid var(--ci-color-border);\n}\n[data-civitai-ui='card'][data-padding='sm'] { padding: 10px; }\n[data-civitai-ui='card'][data-padding='md'] { padding: 16px; }\n[data-civitai-ui='card'][data-padding='lg'] { padding: 24px; }\n\n/* ----- Stack / Group ----- */\n[data-civitai-ui='stack'] {\n  display: flex;\n  flex-direction: column;\n}\n[data-civitai-ui='group'] {\n  display: flex;\n  flex-direction: row;\n}\n\n/* ----- Alert ----- */\n[data-civitai-ui='alert'] {\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n  padding: 12px 14px;\n  border-radius: var(--ci-radius);\n  border: 1px solid transparent;\n  font-size: 14px;\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='alert'][data-color='info'] {\n  background: color-mix(in srgb, var(--ci-color-info) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-info) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='success'] {\n  background: color-mix(in srgb, var(--ci-color-success) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-success) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='warning'] {\n  background: color-mix(in srgb, var(--ci-color-warning) 14%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-warning) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='error'] {\n  background: color-mix(in srgb, var(--ci-color-error) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-error) 35%, transparent);\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-body] {\n  flex: 1;\n  min-width: 0;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-title] {\n  font-weight: 600;\n  margin-bottom: 2px;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-close] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  font-size: 16px;\n  line-height: 1;\n  padding: 0;\n  opacity: 0.7;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-close]:hover {\n  opacity: 1;\n}\n\n/* ----- Loader ----- */\n[data-civitai-ui='loader'] {\n  display: inline-block;\n  border-radius: 50%;\n  border-style: solid;\n  border-color: color-mix(in srgb, currentColor 25%, transparent);\n  border-top-color: currentColor;\n  color: var(--ci-color-primary);\n  animation: civitai-ui-spin 0.7s linear infinite;\n}\n[data-civitai-ui='loader'][data-size='sm'] { width: 16px; height: 16px; border-width: 2px; }\n[data-civitai-ui='loader'][data-size='md'] { width: 22px; height: 22px; border-width: 3px; }\n[data-civitai-ui='loader'][data-size='lg'] { width: 32px; height: 32px; border-width: 4px; }\n@keyframes civitai-ui-spin {\n  to { transform: rotate(360deg); }\n}\n[data-civitai-ui='button'] [data-civitai-ui='loader'] {\n  color: currentColor;\n}\n\n/* ----- Badge ----- */\n[data-civitai-ui='badge'] {\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 999px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n[data-civitai-ui='badge'][data-size='sm'] { height: 18px; padding: 0 8px; font-size: 10px; }\n[data-civitai-ui='badge'][data-size='md'] { height: 22px; padding: 0 10px; font-size: 11px; }\n[data-civitai-ui='badge'][data-size='lg'] { height: 26px; padding: 0 12px; font-size: 13px; }\n[data-civitai-ui='badge'][data-variant='filled'] {\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='badge'][data-variant='light'] {\n  background: color-mix(in srgb, var(--ci-color-primary) 14%, transparent);\n  color: var(--ci-color-primary);\n}\n[data-civitai-ui='badge'][data-variant='outline'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: var(--ci-color-primary);\n}\n\n/* ----- Modal ----- */\n[data-civitai-ui='modal-overlay'] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 32px 16px;\n  overflow-y: auto;\n  z-index: 1000;\n}\n[data-civitai-ui='modal'] {\n  background: var(--ci-color-surface);\n  color: var(--ci-color-text);\n  border: 1px solid var(--ci-color-border);\n  border-radius: var(--ci-radius);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);\n  width: 100%;\n  max-width: 440px;\n  outline: none;\n}\n[data-civitai-ui='modal'][data-size='sm'] { max-width: 340px; }\n[data-civitai-ui='modal'][data-size='md'] { max-width: 440px; }\n[data-civitai-ui='modal'][data-size='lg'] { max-width: 620px; }\n[data-civitai-ui='modal'] [data-civitai-ui-modal-header] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 18px;\n  border-bottom: 1px solid var(--ci-color-border);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-title] {\n  font-size: 16px;\n  font-weight: 700;\n  margin: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--ci-color-text-dimmed);\n  font-size: 20px;\n  line-height: 1;\n  padding: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close]:hover {\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-body] {\n  padding: 18px;\n}\n\n/* ----- Slider ----- */\n[data-civitai-ui='slider'] [data-civitai-ui-label] {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 8px;\n}\n[data-civitai-ui-slider-value] {\n  font-weight: 500;\n  color: var(--ci-color-text-dimmed);\n  font-variant-numeric: tabular-nums;\n}\n[data-civitai-ui-range] {\n  width: 100%;\n  margin: 0;\n  accent-color: var(--ci-color-primary);\n  cursor: pointer;\n}\n[data-civitai-ui-range]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui-range]:focus-visible {\n  outline: 2px solid var(--ci-color-primary);\n  outline-offset: 2px;\n}\n\n/* ----- Collapse ----- */\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 6px 0;\n  background: transparent;\n  border: none;\n  font-family: var(--ci-font);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ci-color-text);\n  text-align: left;\n  cursor: pointer;\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-chevron] {\n  display: inline-block;\n  width: 1em;\n  color: var(--ci-color-text-dimmed);\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-region] {\n  padding-top: 4px;\n}\n\n/* ----- SegmentedControl ----- */\n[data-civitai-ui='segmented-control'] {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 2px;\n  padding: 3px;\n  background: var(--ci-color-surface-2);\n  border: 1px solid var(--ci-color-border);\n  border-radius: var(--ci-radius);\n  vertical-align: middle;\n}\n[data-civitai-ui='segmented-control'][data-full-width='true'] {\n  display: flex;\n  width: 100%;\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: calc(var(--ci-radius) - 3px);\n  background: transparent;\n  color: var(--ci-color-text-dimmed);\n  font-family: var(--ci-font);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n[data-civitai-ui='segmented-control'][data-full-width='true'] [data-civitai-ui-segment] {\n  flex: 1 1 0;\n}\n[data-civitai-ui='segmented-control'][data-size='sm'] [data-civitai-ui-segment] { height: 24px; padding: 0 12px; font-size: 13px; }\n[data-civitai-ui='segmented-control'][data-size='md'] [data-civitai-ui-segment] { height: 30px; padding: 0 16px; font-size: 14px; }\n[data-civitai-ui='segmented-control'][data-size='lg'] [data-civitai-ui-segment] { height: 38px; padding: 0 20px; font-size: 16px; }\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:hover:not(:disabled):not([data-active]) {\n  color: var(--ci-color-text);\n  background: color-mix(in srgb, var(--ci-color-text) 6%, transparent);\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment][data-active] {\n  background: var(--ci-color-surface);\n  color: var(--ci-color-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:focus-visible {\n  outline: 2px solid var(--ci-color-primary);\n  outline-offset: 1px;\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n[data-civitai-ui='segmented-control'][data-disabled='true'] {\n  opacity: 0.7;\n}\n";
 /**
- * Inject the pack's stylesheet into a document's `<head>` exactly once.
- * Idempotent: subsequent calls (including from other components) detect the
- * marker `<style>` and no-op. Safe to call from any component's effect.
+ * The full stylesheet shipped by the pack, composed as a single string for
+ * SSR / manual (non-JS-inject) consumers: the `--civitai-*` tokens, the
+ * `@civitai/components` presentational CSS, then this package's interactive-5
+ * CSS. (At RUNTIME, `injectBlocksStyles()` injects these as three separately
+ * marked `<style>` elements instead — see below.)
+ */
+export declare const BLOCKS_UI_STYLES = "/* AUTOGENERATED by @civitai/theme (scripts/build-tokens.ts). DO NOT EDIT.\n   Regenerate: pnpm --filter @civitai/theme build. Guarded by generation-parity test. */\n@property --civitai-color-text {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #222;\n}\n@property --civitai-color-text-dimmed {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #868e96;\n}\n@property --civitai-color-body {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-surface {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-surface-2 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-border {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #ced4da;\n}\n@property --civitai-color-primary {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #228BE6;\n}\n@property --civitai-color-primary-hover {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #1C7ED6;\n}\n@property --civitai-color-primary-fg {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fefefe;\n}\n@property --civitai-color-primary-light {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: rgba(34, 139, 230, 0.1);\n}\n@property --civitai-color-error {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fa5252;\n}\n@property --civitai-color-success {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #299C7A;\n}\n@property --civitai-color-warning {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #fd7e14;\n}\n@property --civitai-color-info {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #228BE6;\n}\n@property --civitai-color-gray-0 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #f8f9fa;\n}\n@property --civitai-color-gray-1 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #f1f3f5;\n}\n@property --civitai-color-gray-2 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #e9ecef;\n}\n@property --civitai-color-gray-3 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #dee2e6;\n}\n@property --civitai-color-gray-4 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #ced4da;\n}\n@property --civitai-color-gray-5 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #adb5bd;\n}\n@property --civitai-color-gray-6 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #868e96;\n}\n@property --civitai-color-gray-7 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #495057;\n}\n@property --civitai-color-gray-8 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #343a40;\n}\n@property --civitai-color-gray-9 {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #212529;\n}\n\n:root {\n  --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n  --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  --civitai-radius: 0.25rem;\n  --civitai-color-text: #222;\n  --civitai-color-text-dimmed: #868e96;\n  --civitai-color-body: #fefefe;\n  --civitai-color-surface: #fefefe;\n  --civitai-color-surface-2: #fefefe;\n  --civitai-color-border: #ced4da;\n  --civitai-color-primary: #228BE6;\n  --civitai-color-primary-hover: #1C7ED6;\n  --civitai-color-primary-fg: #fefefe;\n  --civitai-color-primary-light: rgba(34, 139, 230, 0.1);\n  --civitai-color-error: #fa5252;\n  --civitai-color-success: #299C7A;\n  --civitai-color-warning: #fd7e14;\n  --civitai-color-info: #228BE6;\n  --civitai-color-gray-0: #f8f9fa;\n  --civitai-color-gray-1: #f1f3f5;\n  --civitai-color-gray-2: #e9ecef;\n  --civitai-color-gray-3: #dee2e6;\n  --civitai-color-gray-4: #ced4da;\n  --civitai-color-gray-5: #adb5bd;\n  --civitai-color-gray-6: #868e96;\n  --civitai-color-gray-7: #495057;\n  --civitai-color-gray-8: #343a40;\n  --civitai-color-gray-9: #212529;\n}\n\n[data-theme='light'] {\n  --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n  --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  --civitai-radius: 0.25rem;\n  --civitai-color-text: #222;\n  --civitai-color-text-dimmed: #868e96;\n  --civitai-color-body: #fefefe;\n  --civitai-color-surface: #fefefe;\n  --civitai-color-surface-2: #fefefe;\n  --civitai-color-border: #ced4da;\n  --civitai-color-primary: #228BE6;\n  --civitai-color-primary-hover: #1C7ED6;\n  --civitai-color-primary-fg: #fefefe;\n  --civitai-color-primary-light: rgba(34, 139, 230, 0.1);\n  --civitai-color-error: #fa5252;\n  --civitai-color-success: #299C7A;\n  --civitai-color-warning: #fd7e14;\n  --civitai-color-info: #228BE6;\n  --civitai-color-gray-0: #f8f9fa;\n  --civitai-color-gray-1: #f1f3f5;\n  --civitai-color-gray-2: #e9ecef;\n  --civitai-color-gray-3: #dee2e6;\n  --civitai-color-gray-4: #ced4da;\n  --civitai-color-gray-5: #adb5bd;\n  --civitai-color-gray-6: #868e96;\n  --civitai-color-gray-7: #495057;\n  --civitai-color-gray-8: #343a40;\n  --civitai-color-gray-9: #212529;\n}\n\n[data-theme='dark'] {\n  --civitai-color-text: #C1C2C5;\n  --civitai-color-text-dimmed: #8c8fa3;\n  --civitai-color-body: #1A1B1E;\n  --civitai-color-surface: #1A1B1E;\n  --civitai-color-surface-2: #25262B;\n  --civitai-color-border: #373A40;\n  --civitai-color-primary: #1971C2;\n  --civitai-color-primary-hover: #1864AB;\n  --civitai-color-primary-fg: #fefefe;\n  --civitai-color-primary-light: rgba(34, 139, 230, 0.15);\n  --civitai-color-error: #e03131;\n  --civitai-color-success: #326D5C;\n  --civitai-color-warning: #e8590c;\n  --civitai-color-info: #1971C2;\n}\n\n/*\n * @civitai/components \u2014 attribute-driven, framework-agnostic component CSS.\n *\n * Contract: style is selected by `data-civitai-ui=\"<name>\"` + `data-variant` +\n * `data-size` (+ a few component-specific `data-*`). Theme via an ancestor\n * `[data-theme='light'|'dark']`. Tokens come from @civitai/theme's `--civitai-*`\n * custom properties (link `@civitai/theme/styles.css` alongside this file, or\n * call `injectStyles()` which injects both).\n *\n * ALL rules live in `@layer civitai.components` so a consumer's own unlayered\n * CSS always wins the cascade WITHOUT specificity fights. State colors are\n * derived with `color-mix()` from base tokens (no shade enumeration), and\n * structure uses native CSS nesting (no preprocessor).\n *\n * See MARKUP.md for the full per-component markup + ARIA contract.\n */\n@layer civitai.components {\n  [data-civitai-ui] {\n    box-sizing: border-box;\n    font-family: var(--civitai-font);\n\n    & *,\n    & *::before,\n    & *::after {\n      box-sizing: border-box;\n    }\n  }\n\n  /* ----- Button ----- */\n  [data-civitai-ui='button'] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    border: 1px solid transparent;\n    border-radius: var(--civitai-radius);\n    font-family: var(--civitai-font);\n    font-weight: 600;\n    line-height: 1;\n    cursor: pointer;\n    user-select: none;\n    text-decoration: none;\n    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;\n    background: var(--civitai-color-primary);\n    color: var(--civitai-color-primary-fg);\n\n    &[data-size='sm'] { height: 30px; padding: 0 14px; font-size: 13px; }\n    &[data-size='md'] { height: 36px; padding: 0 18px; font-size: 14px; }\n    &[data-size='lg'] { height: 44px; padding: 0 22px; font-size: 16px; }\n    &[data-full-width='true'] { width: 100%; }\n\n    &[data-variant='filled'] {\n      background: var(--civitai-color-primary);\n      color: var(--civitai-color-primary-fg);\n      border-color: var(--civitai-color-primary);\n\n      &:hover:not(:disabled) {\n        background: var(--civitai-color-primary-hover);\n        border-color: var(--civitai-color-primary-hover);\n      }\n    }\n    &[data-variant='light'] {\n      background: color-mix(in srgb, var(--civitai-color-primary) 12%, transparent);\n      color: var(--civitai-color-primary);\n      border-color: transparent;\n\n      &:hover:not(:disabled) {\n        background: color-mix(in srgb, var(--civitai-color-primary) 22%, transparent);\n      }\n    }\n    &[data-variant='outline'] {\n      background: transparent;\n      color: var(--civitai-color-primary);\n      border-color: var(--civitai-color-primary);\n\n      &:hover:not(:disabled) {\n        background: color-mix(in srgb, var(--civitai-color-primary) 10%, transparent);\n      }\n    }\n    &[data-variant='subtle'] {\n      background: transparent;\n      color: var(--civitai-color-primary);\n      border-color: transparent;\n\n      &:hover:not(:disabled) {\n        background: color-mix(in srgb, var(--civitai-color-primary) 10%, transparent);\n      }\n    }\n    &:disabled,\n    &[aria-busy='true'] {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n    & [data-civitai-ui-section] {\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  /* ----- TextInput / Textarea / NumberInput / Select ----- */\n  [data-civitai-ui='text-input'],\n  [data-civitai-ui='textarea'],\n  [data-civitai-ui='number-input'],\n  [data-civitai-ui='select'] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n  [data-civitai-ui-label] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--civitai-color-text);\n  }\n  [data-civitai-ui-required] {\n    color: var(--civitai-color-error);\n    margin-left: 2px;\n  }\n  [data-civitai-ui-description] {\n    font-size: 12px;\n    color: var(--civitai-color-text-dimmed);\n  }\n  [data-civitai-ui-error] {\n    font-size: 12px;\n    color: var(--civitai-color-error);\n  }\n  [data-civitai-ui-control] {\n    width: 100%;\n    font-family: var(--civitai-font);\n    font-size: 14px;\n    color: var(--civitai-color-text);\n    background: var(--civitai-color-surface);\n    border: 1px solid var(--civitai-color-border);\n    border-radius: var(--civitai-radius);\n    padding: 8px 12px;\n    transition: border-color 120ms ease;\n\n    &:focus {\n      outline: none;\n      border-color: var(--civitai-color-primary);\n    }\n    &[aria-invalid='true'] {\n      border-color: var(--civitai-color-error);\n    }\n    &:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n  }\n  textarea[data-civitai-ui-control] {\n    resize: vertical;\n    line-height: 1.5;\n  }\n  /*\n   * Select (issue #181 F6): a native <select> reusing the shared\n   * `-control` field chrome (border/background/radius/focus/invalid, above).\n   * Keep the native disclosure caret (most robust + accessible); just make the\n   * control feel interactive and reserve room on the right so the caret never\n   * overlaps a long option label.\n   */\n  select[data-civitai-ui-control] {\n    cursor: pointer;\n    padding-right: 28px;\n    line-height: 1.4;\n  }\n  select[data-civitai-ui-control]:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ----- Checkbox / Radio (issue #181 F6) ----- */\n  /*\n   * Themed native <input type=\"checkbox\">/<input type=\"radio\">: `accent-color`\n   * carries the primary tint (native control, so keyboard/indeterminate/tab all\n   * work for free), plus custom sizing, a token focus ring, and disabled state.\n   * The box + its inline label sit in a `-choice` row; description + error live\n   * below, reusing the shared field markers. The inputs deliberately do NOT\n   * carry `data-civitai-ui-control` (that is the full-width field-input chrome).\n   */\n  [data-civitai-ui='checkbox'],\n  [data-civitai-ui='radio'] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n  [data-civitai-ui-choice] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  [data-civitai-ui='checkbox'] [data-civitai-ui-label],\n  [data-civitai-ui='radio'] [data-civitai-ui-label] {\n    font-weight: 500;\n    cursor: pointer;\n    user-select: none;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox'],\n  [data-civitai-ui='radio'] input[type='radio'] {\n    accent-color: var(--civitai-color-primary);\n    width: 16px;\n    height: 16px;\n    margin: 0;\n    flex: none;\n    cursor: pointer;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox']:focus-visible,\n  [data-civitai-ui='radio'] input[type='radio']:focus-visible {\n    outline: 2px solid var(--civitai-color-primary);\n    outline-offset: 2px;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox']:disabled,\n  [data-civitai-ui='radio'] input[type='radio']:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  [data-civitai-ui='checkbox'] input[type='checkbox']:disabled ~ [data-civitai-ui-label],\n  [data-civitai-ui='radio'] input[type='radio']:disabled ~ [data-civitai-ui-label] {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  /* ----- RadioGroup (issue #181 F6) \u2014 role=radiogroup layout ----- */\n  [data-civitai-ui='radio-group'] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  [data-civitai-ui-radio-options] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n\n    &[data-orientation='horizontal'] {\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n  }\n  /*\n   * RadioGroup group-level error (0.2.0): mirrors the field `-error` treatment.\n   * The message reuses the shared `[data-civitai-ui-error]` styling (12px, error\n   * token); the invalid state (`data-invalid` on the group, set alongside\n   * `aria-invalid`) tints the child radios' `accent-color` to the error token so\n   * the invalid cue reads on the group, not just the message text \u2014 the group\n   * analogue of a field control's error-colored border.\n   */\n  [data-civitai-ui='radio-group'] [data-civitai-ui-error] {\n    font-size: 12px;\n    color: var(--civitai-color-error);\n  }\n  [data-civitai-ui='radio-group'][data-invalid] input[type='radio'] {\n    accent-color: var(--civitai-color-error);\n  }\n\n  /* ----- Card ----- */\n  /*\n   * F5 (issue #181): in LIGHT mode --civitai-color-surface == --civitai-color-body\n   * (both #fefefe), so a borderless card is invisible against the page. Give\n   * every card a subtle DEFAULT hairline (a low-alpha mix of the border token)\n   * so a card WITHOUT `data-with-border` is still visible. `data-with-border`\n   * stays the stronger, explicit, fully-opaque border. Dark mode already\n   * differentiates surface from body, so the default hairline is removed there\n   * (see the [data-theme='dark'] rule below) \u2014 no over-adding. The default\n   * (no [data-theme]) light palette keeps the hairline, matching light mode.\n   */\n  [data-civitai-ui='card'] {\n    background: var(--civitai-color-surface);\n    border-radius: var(--civitai-radius);\n    color: var(--civitai-color-text);\n    border: 1px solid color-mix(in srgb, var(--civitai-color-border) 55%, transparent);\n\n    &[data-with-border='true'] {\n      border: 1px solid var(--civitai-color-border);\n    }\n    &[data-padding='sm'] { padding: 10px; }\n    &[data-padding='md'] { padding: 16px; }\n    &[data-padding='lg'] { padding: 24px; }\n  }\n  /*\n   * Dark already differentiates surface (#1A1B1E) from body \u2014 drop the default\n   * hairline on a borderless card so dark is visually unchanged. An explicit\n   * `data-with-border` still renders its full border.\n   */\n  [data-theme='dark'] [data-civitai-ui='card']:not([data-with-border='true']) {\n    border: 0;\n  }\n\n  /* ----- Stack / Group ----- */\n  [data-civitai-ui='stack'] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n\n    &[data-gap='sm'] { gap: 8px; }\n    &[data-gap='md'] { gap: 16px; }\n    &[data-gap='lg'] { gap: 24px; }\n  }\n  [data-civitai-ui='group'] {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n\n    &[data-gap='sm'] { gap: 6px; }\n    &[data-gap='md'] { gap: 16px; }\n    &[data-gap='lg'] { gap: 24px; }\n  }\n\n  /* ----- Alert ----- */\n  [data-civitai-ui='alert'] {\n    display: flex;\n    gap: 10px;\n    align-items: flex-start;\n    padding: 12px 14px;\n    border-radius: var(--civitai-radius);\n    border: 1px solid transparent;\n    font-size: 14px;\n    color: var(--civitai-color-text);\n\n    &[data-color='info'] {\n      background: color-mix(in srgb, var(--civitai-color-info) 12%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-info) 35%, transparent);\n    }\n    &[data-color='success'] {\n      background: color-mix(in srgb, var(--civitai-color-success) 12%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-success) 35%, transparent);\n    }\n    &[data-color='warning'] {\n      background: color-mix(in srgb, var(--civitai-color-warning) 14%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-warning) 35%, transparent);\n    }\n    &[data-color='error'] {\n      background: color-mix(in srgb, var(--civitai-color-error) 12%, transparent);\n      border-color: color-mix(in srgb, var(--civitai-color-error) 35%, transparent);\n    }\n    & [data-civitai-ui-alert-body] {\n      flex: 1;\n      min-width: 0;\n    }\n    & [data-civitai-ui-alert-title] {\n      font-weight: 600;\n      margin-bottom: 2px;\n    }\n    & [data-civitai-ui-alert-close] {\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      color: inherit;\n      font-size: 16px;\n      line-height: 1;\n      padding: 0;\n      opacity: 0.7;\n\n      &:hover { opacity: 1; }\n    }\n  }\n\n  /* ----- Loader ----- */\n  [data-civitai-ui='loader'] {\n    display: inline-block;\n    border-radius: 50%;\n    border-style: solid;\n    border-color: color-mix(in srgb, currentColor 25%, transparent);\n    border-top-color: currentColor;\n    color: var(--civitai-color-primary);\n    animation: civitai-ui-spin 0.7s linear infinite;\n\n    &[data-size='sm'] { width: 16px; height: 16px; border-width: 2px; }\n    &[data-size='md'] { width: 22px; height: 22px; border-width: 3px; }\n    &[data-size='lg'] { width: 32px; height: 32px; border-width: 4px; }\n  }\n  [data-civitai-ui='button'] [data-civitai-ui='loader'] {\n    color: currentColor;\n  }\n  @keyframes civitai-ui-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  /* ----- Badge ----- */\n  [data-civitai-ui='badge'] {\n    display: inline-flex;\n    align-items: center;\n    border: 1px solid transparent;\n    border-radius: 999px;\n    font-weight: 600;\n    line-height: 1;\n    white-space: nowrap;\n    text-transform: uppercase;\n    letter-spacing: 0.02em;\n\n    &[data-size='sm'] { height: 18px; padding: 0 8px; font-size: 10px; }\n    &[data-size='md'] { height: 22px; padding: 0 10px; font-size: 11px; }\n    &[data-size='lg'] { height: 26px; padding: 0 12px; font-size: 13px; }\n    &[data-variant='filled'] {\n      background: var(--civitai-color-primary);\n      color: var(--civitai-color-primary-fg);\n      border-color: var(--civitai-color-primary);\n    }\n    &[data-variant='light'] {\n      background: color-mix(in srgb, var(--civitai-color-primary) 14%, transparent);\n      color: var(--civitai-color-primary);\n    }\n    &[data-variant='outline'] {\n      background: transparent;\n      color: var(--civitai-color-primary);\n      border-color: var(--civitai-color-primary);\n    }\n\n    /*\n     * Intent color via `data-color`, mirroring Alert's `data-color` contract\n     * (info / success / warning / error). Absent `data-color` => the default\n     * primary above (non-breaking). Each intent recolors the `filled`, `light`\n     * and `outline` variants with the same `color-mix()` token approach Alert\n     * uses; `filled` keeps the white `--civitai-color-primary-fg` text. These\n     * `[data-color][data-variant]` rules out-specify the plain-variant rules\n     * above, so order-independence holds.\n     */\n    &[data-color='info'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-info);\n        border-color: var(--civitai-color-info);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-info) 14%, transparent);\n        color: var(--civitai-color-info);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-info);\n        border-color: var(--civitai-color-info);\n      }\n    }\n    &[data-color='success'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-success);\n        border-color: var(--civitai-color-success);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-success) 14%, transparent);\n        color: var(--civitai-color-success);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-success);\n        border-color: var(--civitai-color-success);\n      }\n    }\n    &[data-color='warning'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-warning);\n        border-color: var(--civitai-color-warning);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-warning) 14%, transparent);\n        color: var(--civitai-color-warning);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-warning);\n        border-color: var(--civitai-color-warning);\n      }\n    }\n    &[data-color='error'] {\n      &[data-variant='filled'] {\n        background: var(--civitai-color-error);\n        border-color: var(--civitai-color-error);\n      }\n      &[data-variant='light'] {\n        background: color-mix(in srgb, var(--civitai-color-error) 14%, transparent);\n        color: var(--civitai-color-error);\n      }\n      &[data-variant='outline'] {\n        color: var(--civitai-color-error);\n        border-color: var(--civitai-color-error);\n      }\n    }\n  }\n}\n\n\n/* ----- Select / Slider field wrappers -----\n   The shared -control/-label/-required/-description/-error primitives come from\n   @civitai/components (layered). Only the select/slider WRAPPERS live here \u2014 the\n   design-system package scopes its field-wrapper rule to the presentational\n   inputs (text-input/textarea/number-input). */\n[data-civitai-ui='select'],\n[data-civitai-ui='slider'] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* ----- Modal ----- */\n[data-civitai-ui='modal-overlay'] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 32px 16px;\n  overflow-y: auto;\n  z-index: 1000;\n}\n[data-civitai-ui='modal'] {\n  background: var(--civitai-color-surface);\n  color: var(--civitai-color-text);\n  border: 1px solid var(--civitai-color-border);\n  border-radius: var(--civitai-radius);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);\n  width: 100%;\n  max-width: 440px;\n  outline: none;\n}\n[data-civitai-ui='modal'][data-size='sm'] { max-width: 340px; }\n[data-civitai-ui='modal'][data-size='md'] { max-width: 440px; }\n[data-civitai-ui='modal'][data-size='lg'] { max-width: 620px; }\n[data-civitai-ui='modal'] [data-civitai-ui-modal-header] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 18px;\n  border-bottom: 1px solid var(--civitai-color-border);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-title] {\n  font-size: 16px;\n  font-weight: 700;\n  margin: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--civitai-color-text-dimmed);\n  font-size: 20px;\n  line-height: 1;\n  padding: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close]:hover {\n  color: var(--civitai-color-text);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-body] {\n  padding: 18px;\n}\n\n/* ----- Slider ----- */\n[data-civitai-ui='slider'] [data-civitai-ui-label] {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 8px;\n}\n[data-civitai-ui-slider-value] {\n  font-weight: 500;\n  color: var(--civitai-color-text-dimmed);\n  font-variant-numeric: tabular-nums;\n}\n[data-civitai-ui-range] {\n  width: 100%;\n  margin: 0;\n  accent-color: var(--civitai-color-primary);\n  cursor: pointer;\n}\n[data-civitai-ui-range]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui-range]:focus-visible {\n  outline: 2px solid var(--civitai-color-primary);\n  outline-offset: 2px;\n}\n\n/* ----- Collapse ----- */\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 6px 0;\n  background: transparent;\n  border: none;\n  font-family: var(--civitai-font);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--civitai-color-text);\n  text-align: left;\n  cursor: pointer;\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-trigger]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-chevron] {\n  display: inline-block;\n  width: 1em;\n  color: var(--civitai-color-text-dimmed);\n}\n[data-civitai-ui='collapse'] [data-civitai-ui-collapse-region] {\n  padding-top: 4px;\n}\n\n/* ----- SegmentedControl ----- */\n[data-civitai-ui='segmented-control'] {\n  display: inline-flex;\n  flex-direction: row;\n  gap: 2px;\n  padding: 3px;\n  background: var(--civitai-color-surface-2);\n  border: 1px solid var(--civitai-color-border);\n  border-radius: var(--civitai-radius);\n  vertical-align: middle;\n}\n[data-civitai-ui='segmented-control'][data-full-width='true'] {\n  display: flex;\n  width: 100%;\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment] {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: calc(var(--civitai-radius) - 3px);\n  background: transparent;\n  color: var(--civitai-color-text-dimmed);\n  font-family: var(--civitai-font);\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;\n}\n[data-civitai-ui='segmented-control'][data-full-width='true'] [data-civitai-ui-segment] {\n  flex: 1 1 0;\n}\n[data-civitai-ui='segmented-control'][data-size='sm'] [data-civitai-ui-segment] { height: 24px; padding: 0 12px; font-size: 13px; }\n[data-civitai-ui='segmented-control'][data-size='md'] [data-civitai-ui-segment] { height: 30px; padding: 0 16px; font-size: 14px; }\n[data-civitai-ui='segmented-control'][data-size='lg'] [data-civitai-ui-segment] { height: 38px; padding: 0 20px; font-size: 16px; }\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:hover:not(:disabled):not([data-active]) {\n  color: var(--civitai-color-text);\n  background: color-mix(in srgb, var(--civitai-color-text) 6%, transparent);\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment][data-active] {\n  background: var(--civitai-color-surface);\n  color: var(--civitai-color-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:focus-visible {\n  outline: 2px solid var(--civitai-color-primary);\n  outline-offset: 1px;\n}\n[data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:disabled {\n  opacity: 0.55;\n  cursor: not-allowed;\n}\n[data-civitai-ui='segmented-control'][data-disabled='true'] {\n  opacity: 0.7;\n}\n";
+/**
+ * Inject the pack's stylesheets into a document's `<head>`, idempotently.
+ *
+ * Injects THREE separately-marked `<style>` elements so they coexist cleanly in
+ * the block's sandbox iframe (and with any other consumer of the design-system
+ * packages in the same document):
+ *   1. `@civitai/theme` tokens      (`data-civitai-theme`)
+ *   2. `@civitai/components` CSS     (`data-civitai-components`)
+ *   3. this package's interactive-5  (`data-civitai-blocks-ui`)
+ * (1) and (2) are handled by `@civitai/components`'s `injectStyles()` (which
+ * injects the tokens first so the component rules always resolve their vars).
+ * Each has its own marker, so subsequent calls (including from other components,
+ * or from a block that also imports `@civitai/components` directly) no-op.
  *
  * @param doc Target document. Defaults to the ambient `document`. No-op when
  *   no document is available (e.g. SSR) — callers in the browser get styling,

package/dist/ui/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAkfA,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,47bAAgC,CAAC;AAE9D;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAgBvD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAItC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAqPA;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,i/1BAA0D,CAAC;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAmBvD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAItC"}

package/dist/ui/styles.js

@@ -1,4 +1,6 @@
 import { useEffect } from 'react';
+import { componentsCss, injectStyles as injectComponentsStyles } from '@civitai/components';
+import { tokensCss } from '@civitai/theme';
 /**
  * W6 component pack — runtime style injection.
  *
@@ -10,317 +12,62 @@ import { useEffect } from 'react';
  * `injectBlocksStyles()`), so simply rendering any `/ui` component is enough
  * to get the styling — no CSS import, no setup step.
  *
+ * Design-system delegation (0.35.0):
+ *   The pack no longer bundles its own tokens or presentational-component CSS.
+ *   It delegates to the PUBLISHED design-system packages:
+ *     - `@civitai/theme`      — the `--civitai-*` design tokens.
+ *     - `@civitai/components` — the attribute-driven CSS for the 10
+ *       presentational components (Button, TextInput, Textarea, NumberInput,
+ *       Card, Stack, Group, Alert, Loader, Badge), wrapped in
+ *       `@layer civitai.components`.
+ *   Only the 5 INTERACTIVE components that live entirely in this package
+ *   (Modal, Select, Slider, Collapse, SegmentedControl) keep their CSS here,
+ *   repointed onto the `--civitai-*` tokens. This is a VISIBLE repaint — the
+ *   design-system tokens differ from the pack's retired `--ci-*` palette
+ *   (radius 8px→4px, teal success, dark primary `#1971C2`, etc.).
+ *
+ * `injectBlocksStyles()` injects THREE `<style>` elements, each with its own
+ * idempotency marker so they compose cleanly in the sandbox iframe:
+ *   1. `data-civitai-theme`      — the `--civitai-*` tokens (from @civitai/theme)
+ *   2. `data-civitai-components` — the presentational-10 CSS (from @civitai/components)
+ *   3. `data-civitai-blocks-ui`  — the interactive-5-only CSS (below)
+ * (1) and (2) are injected by `@civitai/components`'s `injectStyles()`.
+ *
  * Theming (gotcha #60): a block sets `data-theme={theme}` on its OWN root
  * (from `BLOCK_INIT.theme`); the host can't reach across the iframe boundary.
- * These rules theme via an ancestor `[data-theme='dark']` selector. The
- * default (no `data-theme`, i.e. light) matches the palette in
- * `starters/examples/hello-world/src/index.css`.
+ * The `--civitai-*` tokens theme via an ancestor `[data-theme='dark']`
+ * selector; the default (no `data-theme`, i.e. light) matches @civitai/theme's
+ * `:root` palette.
  */
-/** Marker attribute on the injected `<style>` so injection is idempotent. */
+/** Marker attribute on the injected interactive-5 `<style>` so injection is idempotent. */
 const STYLE_MARKER = 'data-civitai-blocks-ui';
 /**
- * Design tokens. CSS custom properties under `:root` (light defaults),
- * overridden under `[data-theme='dark']`. Palette mirrors Civitai's Mantine
- * design language (8px radius, blue primary `#228be6`, the dark/light
- * surfaces already used by the hello-world example).
- */
-const TOKENS = `
-:root {
-  --ci-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --ci-radius: 8px;
-  --ci-color-text: #1a1a1a;
-  --ci-color-text-dimmed: #6b7280;
-  --ci-color-surface: #ffffff;
-  --ci-color-surface-2: #f4f4f5;
-  --ci-color-border: #e0e0e3;
-  --ci-color-primary: #228be6;
-  --ci-color-primary-hover: #1c7ed6;
-  --ci-color-primary-fg: #ffffff;
-  --ci-color-error: #e03131;
-  --ci-color-success: #2f9e44;
-  --ci-color-warning: #f08c00;
-  --ci-color-info: #1971c2;
-}
-
-[data-theme='light'] {
-  --ci-color-text: #1a1a1a;
-  --ci-color-text-dimmed: #6b7280;
-  --ci-color-surface: #ffffff;
-  --ci-color-surface-2: #f4f4f5;
-  --ci-color-border: #e0e0e3;
-}
-
-[data-theme='dark'] {
-  --ci-color-text: #e6e6e6;
-  --ci-color-text-dimmed: #909296;
-  --ci-color-surface: #1a1b1e;
-  --ci-color-surface-2: #25262b;
-  --ci-color-border: #2c2e33;
-  --ci-color-primary: #228be6;
-  --ci-color-primary-hover: #339af0;
-  --ci-color-primary-fg: #ffffff;
-  --ci-color-error: #ff6b6b;
-  --ci-color-success: #51cf66;
-  --ci-color-warning: #ffa94d;
-  --ci-color-info: #4dabf7;
-}
-`;
-/**
- * Component CSS. All selectors hang off the `data-civitai-ui="<name>"`
- * attribute each component renders, so the pack never leaks styles onto the
- * author's own markup.
+ * Interactive-5 component CSS — the styles that live ONLY in this package
+ * (Modal / Select / Slider / Collapse / SegmentedControl). Repointed onto the
+ * `--civitai-*` tokens supplied by `@civitai/theme`.
+ *
+ * These rules are intentionally UNLAYERED (unlike @civitai/components' rules,
+ * which live in `@layer civitai.components`). Their selectors are DISJOINT from
+ * the presentational-10 selectors, so the two never conflict. The one exception
+ * is the shared field primitives (`-control` / `-label` / `-required` /
+ * `-description` / `-error`): those are now owned by @civitai/components and are
+ * NOT redefined here — Select and Slider reuse them and only add their own
+ * field WRAPPER (@civitai/components scopes its wrapper rule to
+ * text-input/textarea/number-input) plus a couple of scoped overrides (the
+ * slider label row).
  */
-const COMPONENT_CSS = `
-[data-civitai-ui] {
-  box-sizing: border-box;
-  font-family: var(--ci-font);
-}
-[data-civitai-ui] *,
-[data-civitai-ui] *::before,
-[data-civitai-ui] *::after {
-  box-sizing: border-box;
-}
-
-/* ----- Button ----- */
-[data-civitai-ui='button'] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  border: 1px solid transparent;
-  border-radius: var(--ci-radius);
-  font-family: var(--ci-font);
-  font-weight: 600;
-  line-height: 1;
-  cursor: pointer;
-  user-select: none;
-  text-decoration: none;
-  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
-  background: var(--ci-color-primary);
-  color: var(--ci-color-primary-fg);
-}
-[data-civitai-ui='button'][data-size='sm'] { height: 30px; padding: 0 14px; font-size: 13px; }
-[data-civitai-ui='button'][data-size='md'] { height: 36px; padding: 0 18px; font-size: 14px; }
-[data-civitai-ui='button'][data-size='lg'] { height: 44px; padding: 0 22px; font-size: 16px; }
-[data-civitai-ui='button'][data-full-width='true'] { width: 100%; }
-[data-civitai-ui='button'][data-variant='filled'] {
-  background: var(--ci-color-primary);
-  color: var(--ci-color-primary-fg);
-  border-color: var(--ci-color-primary);
-}
-[data-civitai-ui='button'][data-variant='filled']:hover:not(:disabled) {
-  background: var(--ci-color-primary-hover);
-  border-color: var(--ci-color-primary-hover);
-}
-[data-civitai-ui='button'][data-variant='light'] {
-  background: color-mix(in srgb, var(--ci-color-primary) 12%, transparent);
-  color: var(--ci-color-primary);
-  border-color: transparent;
-}
-[data-civitai-ui='button'][data-variant='light']:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--ci-color-primary) 22%, transparent);
-}
-[data-civitai-ui='button'][data-variant='outline'] {
-  background: transparent;
-  color: var(--ci-color-primary);
-  border-color: var(--ci-color-primary);
-}
-[data-civitai-ui='button'][data-variant='outline']:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);
-}
-[data-civitai-ui='button'][data-variant='subtle'] {
-  background: transparent;
-  color: var(--ci-color-primary);
-  border-color: transparent;
-}
-[data-civitai-ui='button'][data-variant='subtle']:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);
-}
-[data-civitai-ui='button']:disabled,
-[data-civitai-ui='button'][aria-busy='true'] {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-[data-civitai-ui='button'] [data-civitai-ui-section] {
-  display: inline-flex;
-  align-items: center;
-}
-
-/* ----- TextInput / Textarea / NumberInput / Select / Slider ----- */
-[data-civitai-ui='text-input'],
-[data-civitai-ui='textarea'],
-[data-civitai-ui='number-input'],
+const INTERACTIVE_STYLES = `
+/* ----- Select / Slider field wrappers -----
+   The shared -control/-label/-required/-description/-error primitives come from
+   @civitai/components (layered). Only the select/slider WRAPPERS live here — the
+   design-system package scopes its field-wrapper rule to the presentational
+   inputs (text-input/textarea/number-input). */
 [data-civitai-ui='select'],
 [data-civitai-ui='slider'] {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-[data-civitai-ui-label] {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--ci-color-text);
-}
-[data-civitai-ui-required] {
-  color: var(--ci-color-error);
-  margin-left: 2px;
-}
-[data-civitai-ui-description] {
-  font-size: 12px;
-  color: var(--ci-color-text-dimmed);
-}
-[data-civitai-ui-error] {
-  font-size: 12px;
-  color: var(--ci-color-error);
-}
-[data-civitai-ui-control] {
-  width: 100%;
-  font-family: var(--ci-font);
-  font-size: 14px;
-  color: var(--ci-color-text);
-  background: var(--ci-color-surface);
-  border: 1px solid var(--ci-color-border);
-  border-radius: var(--ci-radius);
-  padding: 8px 12px;
-  transition: border-color 120ms ease;
-}
-[data-civitai-ui-control]:focus {
-  outline: none;
-  border-color: var(--ci-color-primary);
-}
-[data-civitai-ui-control][aria-invalid='true'] {
-  border-color: var(--ci-color-error);
-}
-[data-civitai-ui-control]:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-textarea[data-civitai-ui-control] {
-  resize: vertical;
-  line-height: 1.5;
-}
-
-/* ----- Card ----- */
-[data-civitai-ui='card'] {
-  background: var(--ci-color-surface);
-  border-radius: var(--ci-radius);
-  color: var(--ci-color-text);
-}
-[data-civitai-ui='card'][data-with-border='true'] {
-  border: 1px solid var(--ci-color-border);
-}
-[data-civitai-ui='card'][data-padding='sm'] { padding: 10px; }
-[data-civitai-ui='card'][data-padding='md'] { padding: 16px; }
-[data-civitai-ui='card'][data-padding='lg'] { padding: 24px; }
-
-/* ----- Stack / Group ----- */
-[data-civitai-ui='stack'] {
-  display: flex;
-  flex-direction: column;
-}
-[data-civitai-ui='group'] {
-  display: flex;
-  flex-direction: row;
-}
-
-/* ----- Alert ----- */
-[data-civitai-ui='alert'] {
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-  padding: 12px 14px;
-  border-radius: var(--ci-radius);
-  border: 1px solid transparent;
-  font-size: 14px;
-  color: var(--ci-color-text);
-}
-[data-civitai-ui='alert'][data-color='info'] {
-  background: color-mix(in srgb, var(--ci-color-info) 12%, transparent);
-  border-color: color-mix(in srgb, var(--ci-color-info) 35%, transparent);
-}
-[data-civitai-ui='alert'][data-color='success'] {
-  background: color-mix(in srgb, var(--ci-color-success) 12%, transparent);
-  border-color: color-mix(in srgb, var(--ci-color-success) 35%, transparent);
-}
-[data-civitai-ui='alert'][data-color='warning'] {
-  background: color-mix(in srgb, var(--ci-color-warning) 14%, transparent);
-  border-color: color-mix(in srgb, var(--ci-color-warning) 35%, transparent);
-}
-[data-civitai-ui='alert'][data-color='error'] {
-  background: color-mix(in srgb, var(--ci-color-error) 12%, transparent);
-  border-color: color-mix(in srgb, var(--ci-color-error) 35%, transparent);
-}
-[data-civitai-ui='alert'] [data-civitai-ui-alert-body] {
-  flex: 1;
-  min-width: 0;
-}
-[data-civitai-ui='alert'] [data-civitai-ui-alert-title] {
-  font-weight: 600;
-  margin-bottom: 2px;
-}
-[data-civitai-ui='alert'] [data-civitai-ui-alert-close] {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: inherit;
-  font-size: 16px;
-  line-height: 1;
-  padding: 0;
-  opacity: 0.7;
-}
-[data-civitai-ui='alert'] [data-civitai-ui-alert-close]:hover {
-  opacity: 1;
-}
-
-/* ----- Loader ----- */
-[data-civitai-ui='loader'] {
-  display: inline-block;
-  border-radius: 50%;
-  border-style: solid;
-  border-color: color-mix(in srgb, currentColor 25%, transparent);
-  border-top-color: currentColor;
-  color: var(--ci-color-primary);
-  animation: civitai-ui-spin 0.7s linear infinite;
-}
-[data-civitai-ui='loader'][data-size='sm'] { width: 16px; height: 16px; border-width: 2px; }
-[data-civitai-ui='loader'][data-size='md'] { width: 22px; height: 22px; border-width: 3px; }
-[data-civitai-ui='loader'][data-size='lg'] { width: 32px; height: 32px; border-width: 4px; }
-@keyframes civitai-ui-spin {
-  to { transform: rotate(360deg); }
-}
-[data-civitai-ui='button'] [data-civitai-ui='loader'] {
-  color: currentColor;
-}
-
-/* ----- Badge ----- */
-[data-civitai-ui='badge'] {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  font-weight: 600;
-  line-height: 1;
-  white-space: nowrap;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-}
-[data-civitai-ui='badge'][data-size='sm'] { height: 18px; padding: 0 8px; font-size: 10px; }
-[data-civitai-ui='badge'][data-size='md'] { height: 22px; padding: 0 10px; font-size: 11px; }
-[data-civitai-ui='badge'][data-size='lg'] { height: 26px; padding: 0 12px; font-size: 13px; }
-[data-civitai-ui='badge'][data-variant='filled'] {
-  background: var(--ci-color-primary);
-  color: var(--ci-color-primary-fg);
-  border-color: var(--ci-color-primary);
-}
-[data-civitai-ui='badge'][data-variant='light'] {
-  background: color-mix(in srgb, var(--ci-color-primary) 14%, transparent);
-  color: var(--ci-color-primary);
-}
-[data-civitai-ui='badge'][data-variant='outline'] {
-  background: transparent;
-  color: var(--ci-color-primary);
-  border-color: var(--ci-color-primary);
-}
 
 /* ----- Modal ----- */
 [data-civitai-ui='modal-overlay'] {
@@ -335,10 +82,10 @@ textarea[data-civitai-ui-control] {
   z-index: 1000;
 }
 [data-civitai-ui='modal'] {
-  background: var(--ci-color-surface);
-  color: var(--ci-color-text);
-  border: 1px solid var(--ci-color-border);
-  border-radius: var(--ci-radius);
+  background: var(--civitai-color-surface);
+  color: var(--civitai-color-text);
+  border: 1px solid var(--civitai-color-border);
+  border-radius: var(--civitai-radius);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
   width: 100%;
   max-width: 440px;
@@ -353,7 +100,7 @@ textarea[data-civitai-ui-control] {
   justify-content: space-between;
   gap: 12px;
   padding: 16px 18px;
-  border-bottom: 1px solid var(--ci-color-border);
+  border-bottom: 1px solid var(--civitai-color-border);
 }
 [data-civitai-ui='modal'] [data-civitai-ui-modal-title] {
   font-size: 16px;
@@ -364,13 +111,13 @@ textarea[data-civitai-ui-control] {
   background: transparent;
   border: none;
   cursor: pointer;
-  color: var(--ci-color-text-dimmed);
+  color: var(--civitai-color-text-dimmed);
   font-size: 20px;
   line-height: 1;
   padding: 0;
 }
 [data-civitai-ui='modal'] [data-civitai-ui-modal-close]:hover {
-  color: var(--ci-color-text);
+  color: var(--civitai-color-text);
 }
 [data-civitai-ui='modal'] [data-civitai-ui-modal-body] {
   padding: 18px;
@@ -385,13 +132,13 @@ textarea[data-civitai-ui-control] {
 }
 [data-civitai-ui-slider-value] {
   font-weight: 500;
-  color: var(--ci-color-text-dimmed);
+  color: var(--civitai-color-text-dimmed);
   font-variant-numeric: tabular-nums;
 }
 [data-civitai-ui-range] {
   width: 100%;
   margin: 0;
-  accent-color: var(--ci-color-primary);
+  accent-color: var(--civitai-color-primary);
   cursor: pointer;
 }
 [data-civitai-ui-range]:disabled {
@@ -399,7 +146,7 @@ textarea[data-civitai-ui-control] {
   cursor: not-allowed;
 }
 [data-civitai-ui-range]:focus-visible {
-  outline: 2px solid var(--ci-color-primary);
+  outline: 2px solid var(--civitai-color-primary);
   outline-offset: 2px;
 }
 
@@ -412,10 +159,10 @@ textarea[data-civitai-ui-control] {
   padding: 6px 0;
   background: transparent;
   border: none;
-  font-family: var(--ci-font);
+  font-family: var(--civitai-font);
   font-size: 14px;
   font-weight: 600;
-  color: var(--ci-color-text);
+  color: var(--civitai-color-text);
   text-align: left;
   cursor: pointer;
 }
@@ -426,7 +173,7 @@ textarea[data-civitai-ui-control] {
 [data-civitai-ui='collapse'] [data-civitai-ui-collapse-chevron] {
   display: inline-block;
   width: 1em;
-  color: var(--ci-color-text-dimmed);
+  color: var(--civitai-color-text-dimmed);
 }
 [data-civitai-ui='collapse'] [data-civitai-ui-collapse-region] {
   padding-top: 4px;
@@ -438,9 +185,9 @@ textarea[data-civitai-ui-control] {
   flex-direction: row;
   gap: 2px;
   padding: 3px;
-  background: var(--ci-color-surface-2);
-  border: 1px solid var(--ci-color-border);
-  border-radius: var(--ci-radius);
+  background: var(--civitai-color-surface-2);
+  border: 1px solid var(--civitai-color-border);
+  border-radius: var(--civitai-radius);
   vertical-align: middle;
 }
 [data-civitai-ui='segmented-control'][data-full-width='true'] {
@@ -453,10 +200,10 @@ textarea[data-civitai-ui-control] {
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: calc(var(--ci-radius) - 3px);
+  border-radius: calc(var(--civitai-radius) - 3px);
   background: transparent;
-  color: var(--ci-color-text-dimmed);
-  font-family: var(--ci-font);
+  color: var(--civitai-color-text-dimmed);
+  font-family: var(--civitai-font);
   font-weight: 600;
   line-height: 1;
   white-space: nowrap;
@@ -471,16 +218,16 @@ textarea[data-civitai-ui-control] {
 [data-civitai-ui='segmented-control'][data-size='md'] [data-civitai-ui-segment] { height: 30px; padding: 0 16px; font-size: 14px; }
 [data-civitai-ui='segmented-control'][data-size='lg'] [data-civitai-ui-segment] { height: 38px; padding: 0 20px; font-size: 16px; }
 [data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:hover:not(:disabled):not([data-active]) {
-  color: var(--ci-color-text);
-  background: color-mix(in srgb, var(--ci-color-text) 6%, transparent);
+  color: var(--civitai-color-text);
+  background: color-mix(in srgb, var(--civitai-color-text) 6%, transparent);
 }
 [data-civitai-ui='segmented-control'] [data-civitai-ui-segment][data-active] {
-  background: var(--ci-color-surface);
-  color: var(--ci-color-primary);
+  background: var(--civitai-color-surface);
+  color: var(--civitai-color-primary);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
 }
 [data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:focus-visible {
-  outline: 2px solid var(--ci-color-primary);
+  outline: 2px solid var(--civitai-color-primary);
   outline-offset: 1px;
 }
 [data-civitai-ui='segmented-control'] [data-civitai-ui-segment]:disabled {
@@ -491,12 +238,27 @@ textarea[data-civitai-ui-control] {
   opacity: 0.7;
 }
 `;
-/** The full stylesheet shipped by the pack. Exported for SSR/manual use. */
-export const BLOCKS_UI_STYLES = `${TOKENS}\n${COMPONENT_CSS}`;
 /**
- * Inject the pack's stylesheet into a document's `<head>` exactly once.
- * Idempotent: subsequent calls (including from other components) detect the
- * marker `<style>` and no-op. Safe to call from any component's effect.
+ * The full stylesheet shipped by the pack, composed as a single string for
+ * SSR / manual (non-JS-inject) consumers: the `--civitai-*` tokens, the
+ * `@civitai/components` presentational CSS, then this package's interactive-5
+ * CSS. (At RUNTIME, `injectBlocksStyles()` injects these as three separately
+ * marked `<style>` elements instead — see below.)
+ */
+export const BLOCKS_UI_STYLES = `${tokensCss}\n${componentsCss}\n${INTERACTIVE_STYLES}`;
+/**
+ * Inject the pack's stylesheets into a document's `<head>`, idempotently.
+ *
+ * Injects THREE separately-marked `<style>` elements so they coexist cleanly in
+ * the block's sandbox iframe (and with any other consumer of the design-system
+ * packages in the same document):
+ *   1. `@civitai/theme` tokens      (`data-civitai-theme`)
+ *   2. `@civitai/components` CSS     (`data-civitai-components`)
+ *   3. this package's interactive-5  (`data-civitai-blocks-ui`)
+ * (1) and (2) are handled by `@civitai/components`'s `injectStyles()` (which
+ * injects the tokens first so the component rules always resolve their vars).
+ * Each has its own marker, so subsequent calls (including from other components,
+ * or from a block that also imports `@civitai/components` directly) no-op.
  *
  * @param doc Target document. Defaults to the ambient `document`. No-op when
  *   no document is available (e.g. SSR) — callers in the browser get styling,
@@ -506,12 +268,15 @@ export function injectBlocksStyles(doc) {
     const target = doc ?? (typeof document !== 'undefined' ? document : undefined);
     if (!target)
         return;
-    // Already injected → no-op (idempotent).
+    // Tokens (@civitai/theme) + presentational-10 (@civitai/components). Idempotent
+    // via their own markers; injects tokens first so var() refs always resolve.
+    injectComponentsStyles(target);
+    // Interactive-5-only CSS. Already injected → no-op (idempotent).
     if (target.querySelector(`style[${STYLE_MARKER}]`))
         return;
     const style = target.createElement('style');
     style.setAttribute(STYLE_MARKER, 'true');
-    style.textContent = BLOCKS_UI_STYLES;
+    style.textContent = INTERACTIVE_STYLES;
     const head = target.head ?? target.getElementsByTagName('head')[0];
     if (head) {
         head.appendChild(style);

package/dist/ui/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;;;;;;;;;;;;;;GAgBG;AAEH,6EAA6E;AAC7E,MAAM,YAAY,GAAG,wBAAwB,CAAC;AAE9C;;;;;GAKG;AACH,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCd,CAAC;AAEF;;;;GAIG;AACH,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoarB,CAAC;AAEF,4EAA4E;AAC5E,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,MAAM,KAAK,aAAa,EAAE,CAAC;AAE9D;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAAC,GAAc;IAC/C,MAAM,MAAM,GACV,GAAG,IAAI,CAAC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAClE,IAAI,CAAC,MAAM;QAAE,OAAO;IACpB,yCAAyC;IACzC,IAAI,MAAM,CAAC,aAAa,CAAC,SAAS,YAAY,GAAG,CAAC;QAAE,OAAO;IAC3D,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC5C,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACzC,KAAK,CAAC,WAAW,GAAG,gBAAgB,CAAC;IACrC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;SAAM,CAAC;QACN,oEAAoE;QACpE,MAAM,CAAC,eAAe,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,EAAE,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,aAAa,EAAE,YAAY,IAAI,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,2FAA2F;AAC3F,MAAM,YAAY,GAAG,wBAAwB,CAAC;AAE9C;;;;;;;;;;;;;;GAcG;AACH,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqL1B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,SAAS,KAAK,aAAa,KAAK,kBAAkB,EAAE,CAAC;AAExF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,kBAAkB,CAAC,GAAc;IAC/C,MAAM,MAAM,GACV,GAAG,IAAI,CAAC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAClE,IAAI,CAAC,MAAM;QAAE,OAAO;IACpB,gFAAgF;IAChF,4EAA4E;IAC5E,sBAAsB,CAAC,MAAM,CAAC,CAAC;IAC/B,iEAAiE;IACjE,IAAI,MAAM,CAAC,aAAa,CAAC,SAAS,YAAY,GAAG,CAAC;QAAE,OAAO;IAC3D,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC5C,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACzC,KAAK,CAAC,WAAW,GAAG,kBAAkB,CAAC;IACvC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;SAAM,CAAC;QACN,oEAAoE;QACpE,MAAM,CAAC,eAAe,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,eAAe;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,EAAE,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civitai/blocks-react",
-  "version": "0.34.0",
+  "version": "0.35.1",
   "description": "React hooks and iframe transport for Civitai Apps. Pairs with @civitai/app-sdk/blocks.",
   "license": "MIT",
   "type": "module",
@@ -27,6 +27,10 @@
   "engines": {
     "node": ">=20"
   },
+  "dependencies": {
+    "@civitai/components": "0.2.0",
+    "@civitai/theme": "0.2.0"
+  },
   "peerDependencies": {
     "@civitai/app-sdk": "^0.26.0",
     "react": "^18.0.0 || ^19.0.0"