entangle-ui 0.3.0 → 0.4.0

package/dist/esm/components/editor/ViewportGizmo/useGizmoRenderer.js

@@ -0,0 +1,191 @@
+"use client";
+import { useCallback } from 'react';
+import { resolveCanvasTheme } from '../../primitives/canvas/canvasTheme.js';
+import { useCanvasRenderer } from '../../primitives/canvas/useCanvasRenderer.js';
+import '../../primitives/canvas/CanvasContainer.js';
+import { projectAxes } from './gizmoMath.js';
+
+const SIZE_PRESETS = {
+    sm: {
+        labelFontSize: 9,
+        fontWeight: 600,
+        armWidthPositive: 1.5,
+        armWidthNegative: 0.75,
+        tipRadius: 4,
+        tipHoverRadius: 5,
+        originRadius: 4,
+    },
+    md: {
+        labelFontSize: 11,
+        fontWeight: 600,
+        armWidthPositive: 2.5,
+        armWidthNegative: 1,
+        tipRadius: 5,
+        tipHoverRadius: 7,
+        originRadius: 5,
+    },
+    lg: {
+        labelFontSize: 13,
+        fontWeight: 600,
+        armWidthPositive: 3,
+        armWidthNegative: 1.5,
+        tipRadius: 6,
+        tipHoverRadius: 8,
+        originRadius: 6,
+    },
+};
+// ─── Default Axis Colors ───
+const AXIS_COLORS = {
+    x: '#E63946',
+    y: '#6AA84F',
+    z: '#4A86C8',
+};
+function useGizmoRenderer(options) {
+    const { canvasRef, orientation, diameter, upAxis, size, axisColors, axisLabels, axisVisible, showLabels, showNegativeAxes, showOrbitRing, showOriginHandle, background, disabled, isDragging, hoveredRegion, } = options;
+    const draw = useCallback(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+        const rect = canvas.getBoundingClientRect();
+        const w = rect.width;
+        const h = rect.height;
+        if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+            canvas.width = w * dpr;
+            canvas.height = h * dpr;
+            ctx.scale(dpr, dpr);
+        }
+        else {
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        }
+        const theme = resolveCanvasTheme(canvas);
+        const preset = SIZE_PRESETS[size];
+        const opacity = disabled ? 0.4 : 1;
+        const center = { x: w / 2, y: h / 2 };
+        const armLength = (diameter / 2) * 0.65;
+        // 1. Clear / background
+        ctx.clearRect(0, 0, w, h);
+        if (background === 'subtle') {
+            ctx.globalAlpha = opacity * 0.15;
+            ctx.fillStyle = theme.backgroundSecondary;
+            ctx.beginPath();
+            ctx.arc(center.x, center.y, diameter / 2, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        else if (background === 'solid') {
+            ctx.globalAlpha = opacity;
+            ctx.fillStyle = theme.backgroundSecondary;
+            ctx.fillRect(0, 0, w, h);
+        }
+        ctx.globalAlpha = opacity;
+        // 2. Orbit ring
+        if (showOrbitRing) {
+            ctx.strokeStyle = theme.borderDefault;
+            ctx.lineWidth = 1;
+            ctx.globalAlpha = opacity * 0.3;
+            ctx.beginPath();
+            ctx.arc(center.x, center.y, armLength * 1.1, 0, Math.PI * 2);
+            ctx.stroke();
+            ctx.globalAlpha = opacity;
+        }
+        // 3. Draw arms — depth sorted (furthest first = painter's algorithm)
+        const arms = projectAxes(orientation, center, armLength, upAxis);
+        for (const arm of arms) {
+            if (!axisVisible[arm.axis])
+                continue;
+            if (!arm.positive && !showNegativeAxes)
+                continue;
+            const color = axisColors[arm.axis] ?? AXIS_COLORS[arm.axis] ?? '#888';
+            const isHovered = hoveredRegion.axis === arm.axis &&
+                ((arm.positive && hoveredRegion.type === 'axis-positive') ||
+                    (!arm.positive && hoveredRegion.type === 'axis-negative'));
+            const alpha = arm.positive ? 1.0 : 0.35;
+            const lineWidth = arm.positive
+                ? preset.armWidthPositive
+                : preset.armWidthNegative;
+            // Draw arm line
+            ctx.globalAlpha = opacity * alpha;
+            ctx.strokeStyle = color;
+            ctx.lineWidth = lineWidth;
+            ctx.lineCap = 'round';
+            ctx.beginPath();
+            ctx.moveTo(center.x, center.y);
+            ctx.lineTo(arm.screenX, arm.screenY);
+            ctx.stroke();
+            // Draw tip handle (positive arms only)
+            if (arm.positive) {
+                const tipR = isHovered ? preset.tipHoverRadius : preset.tipRadius;
+                ctx.globalAlpha = opacity;
+                ctx.fillStyle = color;
+                ctx.beginPath();
+                ctx.arc(arm.screenX, arm.screenY, tipR, 0, Math.PI * 2);
+                ctx.fill();
+                // Draw label
+                if (showLabels) {
+                    const label = axisLabels[arm.axis] ?? arm.axis.toUpperCase();
+                    const labelOffset = tipR + preset.labelFontSize * 0.6;
+                    // Position label outward from center
+                    const dx = arm.screenX - center.x;
+                    const dy = arm.screenY - center.y;
+                    const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+                    const nx = dx / dist;
+                    const ny = dy / dist;
+                    const lx = arm.screenX + nx * labelOffset;
+                    const ly = arm.screenY + ny * labelOffset;
+                    ctx.globalAlpha = opacity;
+                    ctx.fillStyle = color;
+                    ctx.font = `${preset.fontWeight} ${preset.labelFontSize}px sans-serif`;
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
+                    ctx.fillText(label, lx, ly);
+                }
+            }
+        }
+        // 4. Origin handle
+        if (showOriginHandle) {
+            const isOriginHovered = hoveredRegion.type === 'origin';
+            const originR = isOriginHovered
+                ? preset.originRadius + 1.5
+                : preset.originRadius;
+            ctx.globalAlpha = opacity * 0.6;
+            ctx.fillStyle = theme.textSecondary;
+            ctx.beginPath();
+            ctx.arc(center.x, center.y, originR, 0, Math.PI * 2);
+            ctx.fill();
+            // Border ring
+            ctx.globalAlpha = opacity * 0.3;
+            ctx.strokeStyle = theme.textMuted;
+            ctx.lineWidth = 1;
+            ctx.stroke();
+        }
+        ctx.globalAlpha = 1;
+    }, [
+        canvasRef,
+        orientation,
+        diameter,
+        upAxis,
+        size,
+        axisColors,
+        axisLabels,
+        axisVisible,
+        showLabels,
+        showNegativeAxes,
+        showOrbitRing,
+        showOriginHandle,
+        background,
+        disabled,
+        isDragging,
+        hoveredRegion,
+    ]);
+    useCanvasRenderer({
+        draw,
+        deps: [draw],
+        paused: false,
+    });
+}
+
+export { AXIS_COLORS, useGizmoRenderer };
+//# sourceMappingURL=useGizmoRenderer.js.map

package/dist/esm/components/editor/ViewportGizmo/useGizmoRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGizmoRenderer.js","sources":["../../../../../../src/components/editor/ViewportGizmo/useGizmoRenderer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AA6BA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;AAGH;AAEA;AACE;AACA;AACA;;AAwBI;AACJ;AAmBA;AACE;AACA;;;AAGA;;AAEA;AAEA;AACA;AACA;AAEA;AACE;AACA;AACA;;;AAEA;;AAGF;AACA;;AAEA;;;;AAMA;AACE;AACA;;;;;AAIK;AACL;AACA;;;AAIF;;;AAIE;AACA;AACA;;;;AAIA;;;AAIF;AAEA;AACE;;AACA;;AAEA;;;AAII;AAEJ;AACA;;AAEE;;AAGF;AACA;AACA;AACA;;;;;;AAOA;AACE;AACA;AACA;;;;;;AAOE;;;;;AAMA;AACA;AACA;;;AAIA;AACA;AACA;AACA;AACA;;;;;;;AAQJ;;AAEE;AACA;AAEF;AACA;;;;;AAMA;AACA;AACA;;;AAIF;AACF;;;;;;;;;;;;;;;;;AAiBC;AAED;;;AAGE;AACD;AACH;;"}

package/dist/esm/components/feedback/Dialog/Dialog.css.js

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/feedback/Dialog/Dialog.css.ts.vanilla-BrXTOHwS.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var DIALOG_ANIMATION_MS = 200;
+var dialogBodyStyle = 'Dialog_dialogBodyStyle__ickl0cl';
+var dialogCloseButtonStyle = 'Dialog_dialogCloseButtonStyle__ickl0ck';
+var dialogDescriptionStyle = 'Dialog_dialogDescriptionStyle__ickl0cj';
+var dialogFooterRecipe = createRuntimeFn({defaultClassName:'Dialog_dialogFooterRecipe__ickl0cm',variantClassNames:{align:{left:'Dialog_dialogFooterRecipe_align_left__ickl0cn',center:'Dialog_dialogFooterRecipe_align_center__ickl0co',right:'Dialog_dialogFooterRecipe_align_right__ickl0cp','space-between':'Dialog_dialogFooterRecipe_align_space-between__ickl0cq'}},defaultVariants:{align:'right'},compoundVariants:[]});
+var dialogHeaderContentStyle = 'Dialog_dialogHeaderContentStyle__ickl0ch';
+var dialogHeaderStyle = 'Dialog_dialogHeaderStyle__ickl0cg';
+var dialogPanelRecipe = createRuntimeFn({defaultClassName:'Dialog_dialogPanelBase__ickl0c7',variantClassNames:{size:{sm:'Dialog_dialogPanelRecipe_size_sm__ickl0c9',md:'Dialog_dialogPanelRecipe_size_md__ickl0ca',lg:'Dialog_dialogPanelRecipe_size_lg__ickl0cb',xl:'Dialog_dialogPanelRecipe_size_xl__ickl0cc',fullscreen:'Dialog_dialogPanelRecipe_size_fullscreen__ickl0cd'},closing:{true:'Dialog_dialogPanelRecipe_closing_true__ickl0ce',false:'Dialog_dialogPanelRecipe_closing_false__ickl0cf'}},defaultVariants:{size:'md',closing:false},compoundVariants:[]});
+var dialogTitleStyle = 'Dialog_dialogTitleStyle__ickl0ci';
+var overlayRecipe = createRuntimeFn({defaultClassName:'Dialog_overlayRecipe__ickl0c4',variantClassNames:{closing:{true:'Dialog_overlayRecipe_closing_true__ickl0c5',false:'Dialog_overlayRecipe_closing_false__ickl0c6'}},defaultVariants:{closing:false},compoundVariants:[]});
+
+export { DIALOG_ANIMATION_MS, dialogBodyStyle, dialogCloseButtonStyle, dialogDescriptionStyle, dialogFooterRecipe, dialogHeaderContentStyle, dialogHeaderStyle, dialogPanelRecipe, dialogTitleStyle, overlayRecipe };
+//# sourceMappingURL=Dialog.css.js.map

package/dist/esm/components/feedback/Dialog/Dialog.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/esm/components/feedback/Dialog/Dialog.js

@@ -1,9 +1,11 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId, useRef, useCallback, createContext, useContext } from 'react';
 import { createPortal } from 'react-dom';
-import { StyledOverlay, StyledDialogPanel } from './Dialog.styled.js';
+import { overlayRecipe, dialogPanelRecipe } from './Dialog.css.js';
 import { useDialogAnimation } from './useDialogAnimation.js';
 import { useFocusTrap } from './useFocusTrap.js';
+import { cx } from '../../../utils/cx.js';
 
 // --- Context ---
 const DialogContext = /*#__PURE__*/ createContext(null);
@@ -34,7 +36,7 @@ function useDialogContext() {
  * </Dialog>
  * ```
  */
-const Dialog = ({ open, onClose, size = 'md', title, description, closeOnOverlayClick = true, closeOnEscape = true, showOverlay = true, trapFocus = true, initialFocusRef, portal = true, children, className, style, css, testId, id, ref, ...rest }) => {
+const Dialog = ({ open, onClose, size = 'md', title, description, closeOnOverlayClick = true, closeOnEscape = true, showOverlay = true, trapFocus = true, initialFocusRef, portal = true, children, className, style, testId, id, ref, ...rest }) => {
     const autoId = useId();
     const titleId = `dialog-title-${autoId}`;
     const descriptionId = `dialog-desc-${autoId}`;
@@ -70,7 +72,7 @@ const Dialog = ({ open, onClose, size = 'md', title, description, closeOnOverlay
         titleId,
         descriptionId,
     };
-    const dialogContent = (jsxs(DialogContext.Provider, { value: contextValue, children: [showOverlay && (jsx(StyledOverlay, { "$closing": closing, onClick: handleOverlayClick, "data-testid": testId ? `${testId}-overlay` : undefined })), jsxs(StyledDialogPanel, { ref: (node) => {
+    const dialogContent = (jsxs(DialogContext.Provider, { value: contextValue, children: [showOverlay && (jsx("div", { className: overlayRecipe({ closing }), onClick: handleOverlayClick, "data-testid": testId ? `${testId}-overlay` : undefined })), jsxs("div", { ref: (node) => {
                     panelRef.current =
                         node;
                     if (typeof ref === 'function') {
@@ -80,7 +82,7 @@ const Dialog = ({ open, onClose, size = 'md', title, description, closeOnOverlay
                         ref.current =
                             node;
                     }
-                }, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, "$size": size, "$closing": closing, "$css": css, className: className, style: style, id: id, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [title && (jsx("span", { id: titleId, style: { display: 'none' }, children: title })), description && (jsx("span", { id: descriptionId, style: { display: 'none' }, children: description })), children] })] }));
+                }, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined, tabIndex: -1, className: cx(dialogPanelRecipe({ size, closing }), className), style: style, id: id, "data-testid": testId, onKeyDown: handleKeyDown, ...rest, children: [title && (jsx("span", { id: titleId, style: { display: 'none' }, children: title })), description && (jsx("span", { id: descriptionId, style: { display: 'none' }, children: description })), children] })] }));
     if (portal) {
         return createPortal(dialogContent, document.body);
     }

package/dist/esm/components/feedback/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../../../src/components/feedback/Dialog/Dialog.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../../../src/components/feedback/Dialog/Dialog.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAgBA;AAEA;;AAKE;;AAEE;;AAIF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAoBL;AACA;AACA;AACA;AAEA;;;;AAIC;;AAGC;AACA;AACD;AAED;;;;AAKM;;;;;;AASN;;AAGM;;AAEJ;AAIF;AAAc;AAEd;;;;;;AAiBS;AACC;AACF;;;;AAGG;AACC;;;;;;AAmCZ;AACF;AAEA;;"}

package/dist/esm/components/feedback/Dialog/DialogBody.js

@@ -1,18 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import styled from '@emotion/styled';
-import { processCss } from '../../../utils/styledUtils.js';
+import { cx } from '../../../utils/cx.js';
+import { dialogBodyStyle } from './Dialog.css.js';
 
-// --- Styled components ---
-const StyledBody = styled.div `
-  padding: ${props => props.theme.spacing.lg}px;
-  overflow-y: auto;
-  flex: 1;
-  color: ${props => props.theme.colors.text.primary};
-  font-size: ${props => props.theme.typography.fontSize.md}px;
-  line-height: ${props => props.theme.typography.lineHeight.normal};
-
-  ${props => processCss(props.$css, props.theme)}
-`;
 // --- Component ---
 /**
  * DialogBody renders the scrollable content area of a Dialog.
@@ -24,8 +14,8 @@ const StyledBody = styled.div `
  * </DialogBody>
  * ```
  */
-const DialogBody = ({ children, className, style, css, testId, ref, ...rest }) => {
-    return (jsx(StyledBody, { ref: ref, className: className, style: style, "$css": css, "data-testid": testId, ...rest, children: children }));
+const DialogBody = ({ children, className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(dialogBodyStyle, className), style: style, "data-testid": testId, ...rest, children: children }));
 };
 DialogBody.displayName = 'DialogBody';
 

package/dist/esm/components/feedback/Dialog/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBody.js","sources":["../../../../../../src/components/feedback/Dialog/DialogBody.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKA;AAEA,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAE3B;aACW,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;WAGjC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAA;eACpC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAA;iBACzC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM,CAAA;;AAE9D,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED;AAEA;;;;;;;;;AASG;MACU,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,QACEA,GAAC,CAAA,UAAU,EACT,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACN,MAAA,EAAA,GAAG,EACI,aAAA,EAAA,MAAM,EACf,GAAA,IAAI,EAEP,QAAA,EAAA,QAAQ,EACE,CAAA;AAEjB;AAEA,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"DialogBody.js","sources":["../../../../../../src/components/feedback/Dialog/DialogBody.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;AAEA;;;;;;;;;AASG;;;AAoBH;AAEA;;"}

package/dist/esm/components/feedback/Dialog/DialogClose.js

@@ -1,3 +1,4 @@
+"use client";
 import React from 'react';
 import { useDialogContext } from './Dialog.js';
 

package/dist/esm/components/feedback/Dialog/DialogClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogClose.js","sources":["../../../../../../src/components/feedback/Dialog/DialogClose.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAQA;;;;;;;;;AASG;MACU,WAAW,GAA+B,CAAC,EAAE,QAAQ,EAAE,KAAI;AACtE,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE;AAEtC,IAAA,OAAO,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE;AAClC,QAAA,OAAO,EAAE,CAAC,CAAmB,KAAI;YAC/B,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC;AAC3B,YAAA,OAAO,EAAE;SACV;AACF,KAAA,CAAC;AACJ;AAEA,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"DialogClose.js","sources":["../../../../../../src/components/feedback/Dialog/DialogClose.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAUA;;;;;;;;;AASG;;AAED;AAEA;AACE;;AAEE;;AAEH;AACH;AAEA;;"}

package/dist/esm/components/feedback/Dialog/DialogFooter.js

@@ -1,27 +1,8 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import styled from '@emotion/styled';
-import { processCss } from '../../../utils/styledUtils.js';
+import { cx } from '../../../utils/cx.js';
+import { dialogFooterRecipe } from './Dialog.css.js';
 
-// --- Alignment map ---
-const ALIGN_MAP = {
-    left: 'flex-start',
-    center: 'center',
-    right: 'flex-end',
-    'space-between': 'space-between',
-};
-// --- Styled components ---
-const StyledFooter = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: ${props => ALIGN_MAP[props.$align]};
-  gap: ${props => props.theme.spacing.md}px;
-  padding: ${props => props.theme.spacing.md}px
-    ${props => props.theme.spacing.lg}px;
-  border-top: 1px solid ${props => props.theme.colors.border.default};
-  flex-shrink: 0;
-
-  ${props => processCss(props.$css, props.theme)}
-`;
 // --- Component ---
 /**
  * DialogFooter renders the action area at the bottom of a Dialog.
@@ -34,8 +15,8 @@ const StyledFooter = styled.div `
  * </DialogFooter>
  * ```
  */
-const DialogFooter = ({ children, align = 'right', className, style, css, testId, ref, ...rest }) => {
-    return (jsx(StyledFooter, { ref: ref, "$align": align, className: className, style: style, "$css": css, "data-testid": testId, ...rest, children: children }));
+const DialogFooter = ({ children, align = 'right', className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(dialogFooterRecipe({ align }), className), style: style, "data-testid": testId, ...rest, children: children }));
 };
 DialogFooter.displayName = 'DialogFooter';
 

package/dist/esm/components/feedback/Dialog/DialogFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogFooter.js","sources":["../../../../../../src/components/feedback/Dialog/DialogFooter.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKA;AAEA,MAAM,SAAS,GAA4D;AACzE,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,UAAU;AACjB,IAAA,eAAe,EAAE,eAAe;CACjC;AAED;AAEA,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAG7B;;;qBAGmB,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;SAC5C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;aAC3B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;MACtC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;0BACX,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;;;AAGhE,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED;AAEA;;;;;;;;;;AAUG;AACU,MAAA,YAAY,GAAgC,CAAC,EACxD,QAAQ,EACR,KAAK,GAAG,OAAO,EACf,SAAS,EACT,KAAK,EACL,GAAG,EACH,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,QACEA,GAAC,CAAA,YAAY,EACX,EAAA,GAAG,EAAE,GAAG,EACA,QAAA,EAAA,KAAK,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACN,MAAA,EAAA,GAAG,EACI,aAAA,EAAA,MAAM,EACf,GAAA,IAAI,EAEP,QAAA,EAAA,QAAQ,EACI,CAAA;AAEnB;AAEA,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
+{"version":3,"file":"DialogFooter.js","sources":["../../../../../../src/components/feedback/Dialog/DialogFooter.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;AAEA;;;;;;;;;;AAUG;AACI;AASL;AAWF;AAEA;;"}

package/dist/esm/components/feedback/Dialog/DialogHeader.js

@@ -1,67 +1,9 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from '@emotion/styled';
-import { processCss } from '../../../utils/styledUtils.js';
 import { useDialogContext } from './Dialog.js';
+import { cx } from '../../../utils/cx.js';
+import { dialogHeaderContentStyle, dialogTitleStyle, dialogDescriptionStyle, dialogCloseButtonStyle, dialogHeaderStyle } from './Dialog.css.js';
 
-// --- Styled components ---
-const StyledHeader = styled.div `
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: ${props => props.theme.spacing.md}px
-    ${props => props.theme.spacing.lg}px;
-  border-bottom: 1px solid ${props => props.theme.colors.border.default};
-  flex-shrink: 0;
-
-  ${props => processCss(props.$css, props.theme)}
-`;
-const StyledHeaderContent = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: ${props => props.theme.spacing.xs}px;
-  min-width: 0;
-  flex: 1;
-`;
-const StyledTitle = styled.div `
-  font-size: ${props => props.theme.typography.fontSize.lg}px;
-  font-weight: ${props => props.theme.typography.fontWeight.semibold};
-  color: ${props => props.theme.colors.text.primary};
-  line-height: ${props => props.theme.typography.lineHeight.tight};
-`;
-const StyledDescription = styled.div `
-  font-size: ${props => props.theme.typography.fontSize.sm}px;
-  color: ${props => props.theme.colors.text.secondary};
-  line-height: ${props => props.theme.typography.lineHeight.normal};
-`;
-const StyledCloseButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  margin: 0;
-  margin-left: ${props => props.theme.spacing.md}px;
-  border: none;
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-  background: transparent;
-  color: ${props => props.theme.colors.text.secondary};
-  cursor: pointer;
-  flex-shrink: 0;
-  transition:
-    background ${props => props.theme.transitions.fast},
-    color ${props => props.theme.transitions.fast};
-
-  &:hover {
-    background: ${props => props.theme.colors.surface.hover};
-    color: ${props => props.theme.colors.text.primary};
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: ${props => props.theme.shadows.focus};
-  }
-`;
 // --- Component ---
 /**
  * DialogHeader renders the title, optional description, and close button
@@ -74,9 +16,9 @@ const StyledCloseButton = styled.button `
  * </DialogHeader>
  * ```
  */
-const DialogHeader = ({ children, showClose = true, description, className, style, css, testId, ref, ...rest }) => {
+const DialogHeader = ({ children, showClose = true, description, className, style, testId, ref, ...rest }) => {
     const { onClose, titleId, descriptionId } = useDialogContext();
-    return (jsxs(StyledHeader, { ref: ref, className: className, style: style, "$css": css, "data-testid": testId, ...rest, children: [jsxs(StyledHeaderContent, { children: [jsx(StyledTitle, { id: titleId, children: children }), description && (jsx(StyledDescription, { id: descriptionId, children: description }))] }), showClose && (jsx(StyledCloseButton, { type: "button", onClick: onClose, "aria-label": "Close dialog", "data-testid": testId ? `${testId}-close` : undefined, children: jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1 1L11 11M11 1L1 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }))] }));
+    return (jsxs("div", { ref: ref, className: cx(dialogHeaderStyle, className), style: style, "data-testid": testId, ...rest, children: [jsxs("div", { className: dialogHeaderContentStyle, children: [jsx("div", { id: titleId, className: dialogTitleStyle, children: children }), description && (jsx("div", { id: descriptionId, className: dialogDescriptionStyle, children: description }))] }), showClose && (jsx("button", { type: "button", onClick: onClose, "aria-label": "Close dialog", className: dialogCloseButtonStyle, "data-testid": testId ? `${testId}-close` : undefined, children: jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1 1L11 11M11 1L1 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }))] }));
 };
 DialogHeader.displayName = 'DialogHeader';
 

package/dist/esm/components/feedback/Dialog/DialogHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../../../../../../src/components/feedback/Dialog/DialogHeader.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"DialogHeader.js","sources":["../../../../../../src/components/feedback/Dialog/DialogHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEA;;;;;;;;;;AAUG;AACI;;AAYL;AA4CF;AAEA;;"}

package/dist/esm/components/feedback/Dialog/useDialogAnimation.js

@@ -1,6 +1,7 @@
+"use client";
 import { useState, useRef, useEffect } from 'react';
 import { FOCUSABLE_SELECTOR } from './useFocusTrap.js';
-import { DIALOG_ANIMATION_MS } from './Dialog.styled.js';
+import { DIALOG_ANIMATION_MS } from './Dialog.css.js';
 
 /**
  * Manages Dialog mount/unmount animation lifecycle and focus management.

package/dist/esm/components/feedback/Dialog/useDialogAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDialogAnimation.js","sources":["../../../../../../src/components/feedback/Dialog/useDialogAnimation.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAeA;;;;;;;AAOG;AACG,SAAU,kBAAkB,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,eAAe,GACW,EAAA;IAC1B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC7C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAC7C,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAqB,IAAI,CAAC;AACzD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;IAEhC,SAAS,CAAC,MAAK;QACb,IAAI,IAAI,EAAE;;AAER,YAAA,gBAAgB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAA4B;YAChE,UAAU,CAAC,KAAK,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC;AAChB,YAAA,UAAU,CAAC,OAAO,GAAG,IAAI;;AACpB,aAAA,IAAI,UAAU,CAAC,OAAO,EAAE;;AAE7B,YAAA,UAAU,CAAC,OAAO,GAAG,KAAK;YAC1B,UAAU,CAAC,IAAI,CAAC;AAChB,YAAA,MAAM,KAAK,GAAG,UAAU,CAAC,MAAK;gBAC5B,UAAU,CAAC,KAAK,CAAC;gBACjB,UAAU,CAAC,KAAK,CAAC;;AAGjB,gBAAA,IAAI,gBAAgB,CAAC,OAAO,EAAE;AAC5B,oBAAA,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE;AAChC,oBAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI;;aAElC,EAAE,mBAAmB,CAAC;AACvB,YAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC;;AAElC,QAAA,OAAO,SAAS;AAClB,KAAC,EAAE,CAAC,IAAI,CAAC,CAAC;;IAGV,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO;YAAE;AAEvB,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,MAAK;AAC5B,YAAA,IAAI,eAAe,EAAE,OAAO,EAAE;AAC5B,gBAAA,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE;;iBAC1B;AACL,gBAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;gBAC9B,IAAI,KAAK,EAAE;oBACT,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CACxC,kBAAkB,CACJ;oBAChB,IAAI,cAAc,EAAE;wBAClB,cAAc,CAAC,KAAK,EAAE;;yBACjB;wBACL,KAAK,CAAC,KAAK,EAAE;;;;SAIpB,EAAE,CAAC,CAAC;AACL,QAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC;KACjC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,CAAC,CAAC;AAE9C,IAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AAC7B;;;;"}
+{"version":3,"file":"useDialogAnimation.js","sources":["../../../../../../src/components/feedback/Dialog/useDialogAnimation.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAiBA;;;;;;;AAOG;AACG;;;AAOJ;AACA;;;;AAKI;;;AAGA;;AACK;;AAEL;;AAEA;;;;AAKE;AACE;AACA;;;AAGJ;;AAEF;AACF;;;AAIE;;AAEA;AACE;AACE;;;AAEA;;;;;;;;;;;;AAaJ;;AAGF;AACF;;"}

package/dist/esm/components/feedback/Dialog/useFocusTrap.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback } from 'react';
 
 const FOCUSABLE_SELECTOR = [

package/dist/esm/components/feedback/Dialog/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../../../../../src/components/feedback/Dialog/useFocusTrap.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA,MAAM,kBAAkB,GAAG;IACzB,SAAS;IACT,wBAAwB;IACxB,uBAAuB;IACvB,0BAA0B;IAC1B,wBAAwB;IACxB,iCAAiC;AAClC,CAAA,CAAC,IAAI,CAAC,IAAI;AAOX;;;;;;;;;;;;;AAaG;AACG,SAAU,YAAY,CAAC,EAC3B,YAAY,EACZ,OAAO,GAAG,IAAI,GACM,EAAA;AACpB,IAAA,OAAO,WAAW,CAChB,CAAC,CAAgB,KAAI;AACnB,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK;YAAE;AAEjC,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AACtC,QAAA,IAAI,CAAC,SAAS;YAAE;AAEhB,QAAA,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAClC,SAAS,CAAC,gBAAgB,CAAc,kBAAkB,CAAC,CAC5D;AAED,QAAA,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE;YAClC,CAAC,CAAC,cAAc,EAAE;YAClB;;AAGF,QAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,CAAgB;QACxD,MAAM,WAAW,GAAG,iBAAiB,CACnC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CACd;AAEhB,QAAA,IAAI,CAAC,CAAC,QAAQ,EAAE;AACd,YAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,YAAY,EAAE;gBAC3C,CAAC,CAAC,cAAc,EAAE;gBAClB,WAAW,CAAC,KAAK,EAAE;;;aAEhB;AACL,YAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,WAAW,EAAE;gBAC1C,CAAC,CAAC,cAAc,EAAE;gBAClB,YAAY,CAAC,KAAK,EAAE;;;AAG1B,KAAC,EACD,CAAC,OAAO,EAAE,YAAY,CAAC,CACxB;AACH;;;;"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../../../../../src/components/feedback/Dialog/useFocusTrap.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;;;;AAOC;AAOD;;;;;;;;;;;;;AAaG;AACG;AAIJ;AAEI;;AAEA;AACA;;AAEA;AAIA;;;;AAKA;;AAKA;AACE;;;;;;AAKA;;;;;AAKJ;AAGJ;;"}

package/dist/esm/components/feedback/Toast/ToastContainer.css.js

@@ -0,0 +1,10 @@
+import './../../../assets/src/components/feedback/Toast/ToastContainer.css.ts.vanilla-tBLsZ_70.css';
+
+var container = 'ToastContainer_container__155m4yq2';
+var containerNormal = 'ToastContainer_containerNormal__155m4yq4';
+var containerReverse = 'ToastContainer_containerReverse__155m4yq3';
+var gapVar = 'var(--gapVar__155m4yq0)';
+var zIndexVar = 'var(--zIndexVar__155m4yq1)';
+
+export { container, containerNormal, containerReverse, gapVar, zIndexVar };
+//# sourceMappingURL=ToastContainer.css.js.map

package/dist/esm/components/feedback/Toast/ToastContainer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/esm/components/feedback/Toast/ToastContainer.js

@@ -1,6 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import styled from '@emotion/styled';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
 import { ToastItem } from './ToastItem.js';
+import { zIndexVar, gapVar, containerReverse, containerNormal, container } from './ToastContainer.css.js';
 
 // --- Position style map ---
 const POSITION_STYLES = {
@@ -11,14 +14,6 @@ const POSITION_STYLES = {
     'bottom-left': { bottom: 16, left: 16 },
     'bottom-center': { bottom: 16, left: '50%', transform: 'translateX(-50%)' },
 };
-const StyledContainer = styled.div `
-  position: fixed;
-  display: flex;
-  flex-direction: ${props => (props.$isBottom ? 'column-reverse' : 'column')};
-  gap: ${props => props.$gap}px;
-  z-index: ${props => props.$zIndex};
-  pointer-events: none;
-`;
 /**
  * ToastContainer positions toast items at the specified screen edge.
  * Bottom positions use column-reverse so the newest toast appears at the bottom.
@@ -26,7 +21,14 @@ const StyledContainer = styled.div `
 const ToastContainer = ({ toasts, position, gap, zIndex, onDismiss, }) => {
     const isBottom = position.startsWith('bottom');
     const positionStyle = POSITION_STYLES[position];
-    return (jsx(StyledContainer, { "$gap": gap, "$zIndex": zIndex, "$isBottom": isBottom, style: positionStyle, "aria-label": "Notifications", role: "region", children: toasts.map(toast => (jsx(ToastItem, { toast: toast, onDismiss: onDismiss }, toast.id))) }));
+    const inlineVars = assignInlineVars({
+        [gapVar]: `${gap}px`,
+        [zIndexVar]: String(zIndex),
+    });
+    return (jsx("div", { className: cx(container, isBottom ? containerReverse : containerNormal), style: {
+            ...positionStyle,
+            ...inlineVars,
+        }, "aria-label": "Notifications", role: "region", children: toasts.map(toast => (jsx(ToastItem, { toast: toast, onDismiss: onDismiss }, toast.id))) }));
 };
 ToastContainer.displayName = 'ToastContainer';
 

package/dist/esm/components/feedback/Toast/ToastContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContainer.js","sources":["../../../../../../src/components/feedback/Toast/ToastContainer.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKA;AAEA,MAAM,eAAe,GAA+C;IAClE,WAAW,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IACnC,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;AACjC,IAAA,YAAY,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE;IACrE,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IACzC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;AACvC,IAAA,eAAe,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE;CAC5E;AAUD,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAsB;;;AAGpC,kBAAA,EAAA,KAAK,KAAK,KAAK,CAAC,SAAS,GAAG,gBAAgB,GAAG,QAAQ,CAAC,CAAA;AACnE,OAAA,EAAA,KAAK,IAAI,KAAK,CAAC,IAAI,CAAA;AACf,WAAA,EAAA,KAAK,IAAI,KAAK,CAAC,OAAO,CAAA;;CAElC;AAYD;;;AAGG;AACU,MAAA,cAAc,GAAkC,CAAC,EAC5D,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,GACV,KAAI;IACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC;AAC9C,IAAA,MAAM,aAAa,GAAG,eAAe,CAAC,QAAQ,CAAC;IAE/C,QACEA,IAAC,eAAe,EAAA,EAAA,MAAA,EACR,GAAG,EACA,SAAA,EAAA,MAAM,EACJ,WAAA,EAAA,QAAQ,EACnB,KAAK,EAAE,aAAa,EAAA,YAAA,EACT,eAAe,EAC1B,IAAI,EAAC,QAAQ,EAAA,QAAA,EAEZ,MAAM,CAAC,GAAG,CAAC,KAAK,KACfA,GAAA,CAAC,SAAS,EAAgB,EAAA,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAA,EAA5C,KAAK,CAAC,EAAE,CAAwC,CACjE,CAAC,EACc,CAAA;AAEtB;AAEA,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"ToastContainer.js","sources":["../../../../../../src/components/feedback/Toast/ToastContainer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAeA;AAEA;;;AAGE;;;AAGA;;AAaF;;;AAGG;AACI;;AAQL;;AAGE;AACA;AACD;;AAMK;AACA;AACD;AASP;AAEA;;"}

package/dist/esm/components/feedback/Toast/ToastItem.css.js

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/feedback/Toast/ToastItem.css.ts.vanilla-D6UuPKAj.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var actionButton = createRuntimeFn({defaultClassName:'ToastItem_actionButton__xlinlde',variantClassNames:{severity:{info:'ToastItem_actionButton_severity_info__xlinldf',success:'ToastItem_actionButton_severity_success__xlinldg',warning:'ToastItem_actionButton_severity_warning__xlinldh',error:'ToastItem_actionButton_severity_error__xlinldi'}},defaultVariants:{severity:'info'},compoundVariants:[]});
+var closeButton = 'ToastItem_closeButton__xlinldd';
+var content = 'ToastItem_content__xlinld8';
+var iconWrapper = 'ToastItem_iconWrapper__xlinld9';
+var message = 'ToastItem_message__xlinldc';
+var progressBar = createRuntimeFn({defaultClassName:'ToastItem_progressBar__xlinldj',variantClassNames:{severity:{info:'ToastItem_progressBar_severity_info__xlinldk',success:'ToastItem_progressBar_severity_success__xlinldl',warning:'ToastItem_progressBar_severity_warning__xlinldm',error:'ToastItem_progressBar_severity_error__xlinldn'},paused:{true:'ToastItem_progressBar_paused_true__xlinldo',false:'ToastItem_progressBar_paused_false__xlinldp'}},defaultVariants:{severity:'info',paused:false},compoundVariants:[]});
+var progressDurationVar = 'var(--progressDurationVar__xlinld0)';
+var textContent = 'ToastItem_textContent__xlinlda';
+var titleStyle = 'ToastItem_titleStyle__xlinldb';
+var toast = createRuntimeFn({defaultClassName:'ToastItem_toast__xlinld3',variantClassNames:{severity:{info:'ToastItem_toast_severity_info__xlinld4',success:'ToastItem_toast_severity_success__xlinld5',warning:'ToastItem_toast_severity_warning__xlinld6',error:'ToastItem_toast_severity_error__xlinld7'}},defaultVariants:{severity:'info'},compoundVariants:[]});
+
+export { actionButton, closeButton, content, iconWrapper, message, progressBar, progressDurationVar, textContent, titleStyle, toast };
+//# sourceMappingURL=ToastItem.css.js.map

package/dist/esm/components/feedback/Toast/ToastItem.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}