entangle-ui 0.8.2 → 0.9.0

package/dist/esm/components/feedback/Drawer/useDrawerAnimation.js

@@ -0,0 +1,74 @@
+"use client";
+import { useState, useRef, useEffect } from 'react';
+import { FOCUSABLE_SELECTOR } from '../../../hooks/useFocusTrap/useFocusTrap.js';
+import { DRAWER_ANIMATION_MS } from './Drawer.css.js';
+
+/**
+ * Mount/unmount animation lifecycle plus focus management for Drawer.
+ * Mirrors the Dialog hook so behavior stays consistent: mount on open,
+ * delay unmount on close to play the slide-out, return focus to the
+ * previously focused element. `prefers-reduced-motion: reduce` collapses
+ * the animation delay to zero.
+ */
+function useDrawerAnimation({ open, panelRef, initialFocusRef, shouldFocus, }) {
+    const [mounted, setMounted] = useState(false);
+    const [closing, setClosing] = useState(false);
+    const previousFocusRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        if (open) {
+            previousFocusRef.current = document.activeElement;
+            setClosing(false);
+            setMounted(true);
+            wasOpenRef.current = true;
+            return undefined;
+        }
+        if (wasOpenRef.current) {
+            wasOpenRef.current = false;
+            setClosing(true);
+            const prefersReducedMotion = typeof window !== 'undefined' &&
+                typeof window.matchMedia === 'function' &&
+                window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+            const delay = prefersReducedMotion ? 0 : DRAWER_ANIMATION_MS;
+            const timer = setTimeout(() => {
+                setMounted(false);
+                setClosing(false);
+                if (previousFocusRef.current) {
+                    previousFocusRef.current.focus();
+                    previousFocusRef.current = null;
+                }
+            }, delay);
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+        return undefined;
+    }, [open]);
+    useEffect(() => {
+        if (!open || !mounted || !shouldFocus)
+            return undefined;
+        const timer = setTimeout(() => {
+            if (initialFocusRef?.current) {
+                initialFocusRef.current.focus();
+                return;
+            }
+            const panel = panelRef.current;
+            if (!panel)
+                return;
+            const firstFocusable = panel.querySelector(FOCUSABLE_SELECTOR);
+            if (firstFocusable) {
+                firstFocusable.focus();
+            }
+            else {
+                panel.focus();
+            }
+        }, 0);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [open, mounted, initialFocusRef, panelRef, shouldFocus]);
+    return { mounted, closing };
+}
+
+export { useDrawerAnimation };
+//# sourceMappingURL=useDrawerAnimation.js.map

package/dist/esm/components/feedback/Drawer/useDrawerAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerAnimation.js","sources":["../../../../../../src/components/feedback/Drawer/useDrawerAnimation.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAkBA;;;;;;AAMG;AACG;;;AAQJ;AACA;;;AAII;;;AAGA;AACA;;AAEF;AACE;;AAEA;AAEE;AACA;;AAEF;;;AAGE;AACE;AACA;;;AAGJ;;AAEA;;AAEF;AACF;;AAGE;AAAuC;AACvC;AACE;AACE;;;AAGF;AACA;;;;;;;;;;AASF;;AAEA;AACF;AAEA;AACF;;"}

package/dist/esm/components/feedback/Skeleton/SkeletonLayout.css.js

@@ -0,0 +1,18 @@
+import './../../../assets/src/components/feedback/Skeleton/SkeletonLayout.css.ts.vanilla-Db7bpqiI.css';
+
+var cardBodyStyle = 'SkeletonLayout_cardBodyStyle__1kvkgdl2';
+var cardLayoutStyle = 'SkeletonLayout_cardLayoutStyle__1kvkgdl1';
+var chatBubbleStyle = 'SkeletonLayout_chatBubbleStyle__1kvkgdlc';
+var chatLayoutStyle = 'SkeletonLayout_chatLayoutStyle__1kvkgdl9';
+var chatRowEndStyle = 'SkeletonLayout_chatRowEndStyle__1kvkgdlb';
+var chatRowStyle = 'SkeletonLayout_chatRowStyle__1kvkgdla';
+var gridLayoutStyle = 'SkeletonLayout_gridLayoutStyle__1kvkgdl8';
+var layoutColumnsVar = 'var(--layoutColumnsVar__1kvkgdl0)';
+var listLayoutStyle = 'SkeletonLayout_listLayoutStyle__1kvkgdl3';
+var listRowBodyStyle = 'SkeletonLayout_listRowBodyStyle__1kvkgdl5';
+var listRowStyle = 'SkeletonLayout_listRowStyle__1kvkgdl4';
+var tableHeaderCellStyle = 'SkeletonLayout_tableHeaderCellStyle__1kvkgdl7';
+var tableLayoutStyle = 'SkeletonLayout_tableLayoutStyle__1kvkgdl6';
+
+export { cardBodyStyle, cardLayoutStyle, chatBubbleStyle, chatLayoutStyle, chatRowEndStyle, chatRowStyle, gridLayoutStyle, layoutColumnsVar, listLayoutStyle, listRowBodyStyle, listRowStyle, tableHeaderCellStyle, tableLayoutStyle };
+//# sourceMappingURL=SkeletonLayout.css.js.map

package/dist/esm/components/feedback/Skeleton/SkeletonLayout.css.js.map

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

package/dist/esm/components/feedback/Skeleton/SkeletonLayout.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
+import { Skeleton } from './Skeleton.js';
+import { chatLayoutStyle, chatBubbleStyle, chatRowEndStyle, chatRowStyle, gridLayoutStyle, layoutColumnsVar, tableLayoutStyle, tableHeaderCellStyle, listLayoutStyle, listRowStyle, listRowBodyStyle, cardLayoutStyle, cardBodyStyle } from './SkeletonLayout.css.js';
+
+const DEFAULT_COUNT = {
+    card: 1,
+    list: 5,
+    table: 5,
+    grid: 12,
+    chat: 4,
+};
+const DEFAULT_ANIMATION = {
+    card: 'pulse',
+    list: 'pulse',
+    table: 'pulse',
+    grid: 'none',
+    chat: 'pulse',
+};
+const DEFAULT_COLUMNS = 4;
+function renderCard(animation) {
+    return (jsxs("div", { className: cardLayoutStyle, children: [jsx(Skeleton, { shape: "circle", width: 40, animation: animation }), jsxs("div", { className: cardBodyStyle, children: [jsx(Skeleton, { shape: "line", width: "70%", animation: animation }), jsx(Skeleton, { shape: "line", width: "100%", animation: animation }), jsx(Skeleton, { shape: "line", width: "50%", animation: animation }), jsx(Skeleton, { width: "100%", height: 80, animation: animation })] })] }));
+}
+function renderList(count, animation) {
+    return (jsx("div", { className: listLayoutStyle, children: Array.from({ length: count }, (_, i) => (jsxs("div", { className: listRowStyle, children: [jsx(Skeleton, { shape: "circle", width: 32, animation: animation }), jsxs("div", { className: listRowBodyStyle, children: [jsx(Skeleton, { shape: "line", width: "60%", animation: animation }), jsx(Skeleton, { shape: "line", width: "90%", animation: animation })] })] }, i))) }));
+}
+function renderTable(rows, columns, animation) {
+    const totalCells = (rows + 1) * columns;
+    return (jsx("div", { className: tableLayoutStyle, style: assignInlineVars({ [layoutColumnsVar]: String(columns) }), children: Array.from({ length: totalCells }, (_, i) => {
+            const isHeader = i < columns;
+            return (jsx("div", { className: isHeader ? tableHeaderCellStyle : undefined, children: jsx(Skeleton, { shape: "line", width: isHeader ? '50%' : '80%', animation: animation }) }, i));
+        }) }));
+}
+function renderGrid(count, columns, animation) {
+    return (jsx("div", { className: gridLayoutStyle, style: assignInlineVars({ [layoutColumnsVar]: String(columns) }), children: Array.from({ length: count }, (_, i) => (jsx(Skeleton, { width: "100%", height: 80, animation: animation }, i))) }));
+}
+const CHAT_BUBBLE_WIDTHS = ['85%', '60%', '95%', '70%', '50%', '80%'];
+function renderChat(count, animation) {
+    return (jsx("div", { className: chatLayoutStyle, children: Array.from({ length: count }, (_, i) => {
+            const isOutgoing = i % 2 === 1;
+            const bubbleWidth = CHAT_BUBBLE_WIDTHS[i % CHAT_BUBBLE_WIDTHS.length];
+            return (jsxs("div", { className: cx(chatRowStyle, isOutgoing && chatRowEndStyle), children: [jsx(Skeleton, { shape: "circle", width: 28, animation: animation }), jsxs("div", { className: chatBubbleStyle, children: [jsx(Skeleton, { shape: "line", width: bubbleWidth, animation: animation }), i % 3 === 0 ? (jsx(Skeleton, { shape: "line", width: "40%", animation: animation })) : null] })] }, i));
+        }) }));
+}
+/**
+ * Pre-built skeleton layouts for common loading patterns — card, list, table,
+ * grid, and chat. Drop one in when the surrounding UI shape is known and you
+ * want the placeholder structure to mirror it without composing every block
+ * by hand.
+ *
+ * Each variant uses the base `Skeleton` primitive underneath, so animation
+ * and reduced-motion behavior match the rest of the library. Use `count` to
+ * scale the number of rows/cells, `columns` for `grid` and `table`, and
+ * `animation` to opt out of motion for dense surfaces.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonLayout variant="card" />
+ * <SkeletonLayout variant="list" count={8} />
+ * <SkeletonLayout variant="table" columns={5} count={6} />
+ * <SkeletonLayout variant="grid" columns={3} count={9} />
+ * <SkeletonLayout variant="chat" count={6} />
+ * ```
+ */
+const SkeletonLayout = /*#__PURE__*/ React.memo(({ variant, count, columns = DEFAULT_COLUMNS, animation, width = '100%', className, style, testId, ref, ...rest }) => {
+    const resolvedCount = count ?? DEFAULT_COUNT[variant];
+    const resolvedAnimation = animation ?? DEFAULT_ANIMATION[variant];
+    const resolvedWidth = typeof width === 'number' ? `${width}px` : width;
+    let content;
+    switch (variant) {
+        case 'card':
+            content = renderCard(resolvedAnimation);
+            break;
+        case 'list':
+            content = renderList(resolvedCount, resolvedAnimation);
+            break;
+        case 'table':
+            content = renderTable(resolvedCount, columns, resolvedAnimation);
+            break;
+        case 'grid':
+            content = renderGrid(resolvedCount, columns, resolvedAnimation);
+            break;
+        case 'chat':
+            content = renderChat(resolvedCount, resolvedAnimation);
+            break;
+    }
+    return (jsx("div", { ref: ref, "aria-hidden": "true", "aria-busy": "true", className: cx(className), style: { width: resolvedWidth, ...style }, "data-testid": testId, "data-variant": variant, ...rest, children: content }));
+});
+SkeletonLayout.displayName = 'SkeletonLayout';
+
+export { SkeletonLayout };
+//# sourceMappingURL=SkeletonLayout.js.map

package/dist/esm/components/feedback/Skeleton/SkeletonLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLayout.js","sources":["../../../../../../src/components/feedback/Skeleton/SkeletonLayout.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA2BA;AACE;AACA;AACA;AACA;AACA;;AAGF;AACE;AACA;AACA;AACA;AACA;;AAGF;AAEA;;AAYA;AAEA;AAIE;AAaF;AAEA;;AAME;AAMM;AACA;;AAYR;AAEA;AAKE;AAUF;AAEA;AAEA;;AAOQ;;AAEA;;AAqBR;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;;;AAeH;AAEA;;AAEE;AACE;;AAEF;AACE;;AAEF;;;AAGA;;;AAGA;AACE;;;AAIJ;AAcF;AAGF;;"}

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

@@ -0,0 +1,15 @@
+import './../../../assets/src/components/feedback/Stat/Stat.css.ts.vanilla-GBk3JAMB.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var statContentStyle = 'Stat_statContentStyle__cv0db96';
+var statDeltaColorVar = 'var(--statDeltaColorVar__cv0db90)';
+var statDeltaIconStyle = 'Stat_statDeltaIconStyle__cv0db9d';
+var statDeltaStyle = 'Stat_statDeltaStyle__cv0db9c';
+var statHelperStyle = 'Stat_statHelperStyle__cv0db9e';
+var statIconStyle = 'Stat_statIconStyle__cv0db95';
+var statLabelStyle = 'Stat_statLabelStyle__cv0db97';
+var statRoot = createRuntimeFn({defaultClassName:'Stat_statRoot__cv0db91',variantClassNames:{size:{sm:'Stat_statRoot_size_sm__cv0db92',md:'Stat_statRoot_size_md__cv0db93',lg:'Stat_statRoot_size_lg__cv0db94'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var statValueRecipe = createRuntimeFn({defaultClassName:'Stat_statValueRecipe__cv0db98',variantClassNames:{size:{sm:'Stat_statValueRecipe_size_sm__cv0db99',md:'Stat_statValueRecipe_size_md__cv0db9a',lg:'Stat_statValueRecipe_size_lg__cv0db9b'}},defaultVariants:{size:'md'},compoundVariants:[]});
+
+export { statContentStyle, statDeltaColorVar, statDeltaIconStyle, statDeltaStyle, statHelperStyle, statIconStyle, statLabelStyle, statRoot, statValueRecipe };
+//# sourceMappingURL=Stat.css.js.map

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

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

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

@@ -0,0 +1,55 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
+import { statIconStyle, statContentStyle, statLabelStyle, statValueRecipe, statHelperStyle, statRoot, statDeltaStyle, statDeltaColorVar, statDeltaIconStyle } from './Stat.css.js';
+
+const ARROW_PATHS = {
+    up: 'M6 2 L10 7 L7 7 L7 10 L5 10 L5 7 L2 7 Z',
+    down: 'M6 10 L2 5 L5 5 L5 2 L7 2 L7 5 L10 5 Z',
+    neutral: 'M2 6 L10 6 L10 7 L2 7 Z',
+};
+function deltaColor(direction, semantics) {
+    if (semantics === 'neutral' || direction === 'neutral') {
+        return vars.colors.text.muted;
+    }
+    const isUpGood = semantics === 'positive';
+    const upColor = isUpGood
+        ? vars.colors.accent.success
+        : vars.colors.accent.error;
+    const downColor = isUpGood
+        ? vars.colors.accent.error
+        : vars.colors.accent.success;
+    return direction === 'up' ? upColor : downColor;
+}
+function DeltaIcon({ direction }) {
+    return (jsx("svg", { className: statDeltaIconStyle, viewBox: "0 0 12 12", "aria-hidden": "true", focusable: "false", children: jsx("path", { d: ARROW_PATHS[direction], fill: "currentColor" }) }));
+}
+function DeltaDisplay({ delta }) {
+    const semantics = delta.semantics ?? 'positive';
+    const color = deltaColor(delta.direction, semantics);
+    return (jsxs("span", { className: statDeltaStyle, style: assignInlineVars({ [statDeltaColorVar]: color }), children: [jsx(DeltaIcon, { direction: delta.direction }), delta.value] }));
+}
+/**
+ * KPI / metric display: label + value + optional trend delta.
+ *
+ * Use `delta.semantics` to indicate whether "up" is good. Errors and
+ * latency, for example, want `semantics: "negative"` so an upward
+ * direction shows red.
+ *
+ * @example
+ * ```tsx
+ * <Stat
+ *   label="MRR"
+ *   value="$12,400"
+ *   delta={{ value: '+8.2%', direction: 'up' }}
+ *   helper="vs. last month"
+ * />
+ * ```
+ */
+const Stat = ({ label, value, delta, helper, icon, size = 'md', className, style, testId, ref, ...rest }) => (jsxs("div", { ref: ref, className: cx(statRoot({ size }), className), style: style, "data-testid": testId, ...rest, children: [icon && jsx("div", { className: statIconStyle, children: icon }), jsxs("div", { className: statContentStyle, children: [jsx("p", { className: statLabelStyle, children: label }), jsx("p", { className: statValueRecipe({ size }), children: value }), delta && jsx(DeltaDisplay, { delta: delta }), helper && jsx("p", { className: statHelperStyle, children: helper })] })] }));
+Stat.displayName = 'Stat';
+
+export { Stat };
+//# sourceMappingURL=Stat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.js","sources":["../../../../../../src/components/feedback/Stat/Stat.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAwBA;AACE;AACA;AACA;;AAGF;;AAKI;;AAEF;;AAEE;;;AAGA;;;AAGJ;AAEA;AACE;AAUF;AAEA;AACE;;AAEA;AASF;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AA8BP;;"}

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

@@ -2,27 +2,24 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { ErrorIcon } from '../../Icons/ErrorIcon.js';
+import { InfoIcon } from '../../Icons/InfoIcon.js';
+import { SuccessIcon } from '../../Icons/SuccessIcon.js';
+import { WarningIcon } from '../../Icons/WarningIcon.js';
 import { content, iconWrapper, textContent, titleStyle, message, actionButton, closeButton, progressDurationVar, progressBar, toast } from './ToastItem.css.js';
 
-// --- Severity icons (inline SVGs) ---
-const SeverityIcon = ({ severity, color, }) => {
-    const size = 16;
-    const commonProps = {
-        width: size,
-        height: size,
-        viewBox: '0 0 16 16',
-        fill: 'none',
-        'aria-hidden': true,
-    };
+// --- Severity icons ---
+const SeverityIcon = ({ severity }) => {
     switch (severity) {
         case 'info':
-            return (jsxs("svg", { ...commonProps, children: [jsx("circle", { cx: "8", cy: "8", r: "7", stroke: color, strokeWidth: "1.5" }), jsx("line", { x1: "8", y1: "7", x2: "8", y2: "11", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }), jsx("circle", { cx: "8", cy: "5", r: "0.75", fill: color })] }));
+            return jsx(InfoIcon, { size: "md", color: "currentColor", decorative: true });
         case 'success':
-            return (jsxs("svg", { ...commonProps, children: [jsx("circle", { cx: "8", cy: "8", r: "7", stroke: color, strokeWidth: "1.5" }), jsx("path", { d: "M5 8L7 10L11 6", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+            return jsx(SuccessIcon, { size: "md", color: "currentColor", decorative: true });
         case 'warning':
-            return (jsxs("svg", { ...commonProps, children: [jsx("path", { d: "M8 2L14.5 13H1.5L8 2Z", stroke: color, strokeWidth: "1.5", strokeLinejoin: "round" }), jsx("line", { x1: "8", y1: "6", x2: "8", y2: "9", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }), jsx("circle", { cx: "8", cy: "11", r: "0.75", fill: color })] }));
+            return jsx(WarningIcon, { size: "md", color: "currentColor", decorative: true });
         case 'error':
-            return (jsxs("svg", { ...commonProps, children: [jsx("circle", { cx: "8", cy: "8", r: "7", stroke: color, strokeWidth: "1.5" }), jsx("line", { x1: "5.5", y1: "5.5", x2: "10.5", y2: "10.5", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" }), jsx("line", { x1: "10.5", y1: "5.5", x2: "5.5", y2: "10.5", stroke: color, strokeWidth: "1.5", strokeLinecap: "round" })] }));
+            return jsx(ErrorIcon, { size: "md", color: "currentColor", decorative: true });
     }
 };
 /**
@@ -74,7 +71,7 @@ const ToastItem = ({ toast: toastData, onDismiss, }) => {
         startTimer();
         return clearTimer;
     }, [startTimer, clearTimer]);
-    return (jsxs("div", { className: toast({ severity }), role: role, "aria-live": ariaLive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-testid": `toast-${id}`, children: [jsxs("div", { className: content, children: [jsx("div", { className: iconWrapper, children: icon ?? jsx(SeverityIcon, { severity: severity, color: "currentColor" }) }), jsxs("div", { className: textContent, children: [title && jsx("div", { className: titleStyle, children: title }), jsx("div", { className: message, children: msg }), action && (jsx("button", { className: actionButton({ severity }), onClick: action.onClick, type: "button", children: action.label }))] }), closable && (jsx("button", { className: closeButton, onClick: () => onDismiss(id), "aria-label": "Dismiss notification", type: "button", children: jsxs("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: [jsx("line", { x1: "2", y1: "2", x2: "10", y2: "10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), jsx("line", { x1: "10", y1: "2", x2: "2", y2: "10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }) }))] }), showProgress && duration > 0 && (jsx("div", { className: progressBar({ severity, paused }), style: assignInlineVars({
+    return (jsxs("div", { className: toast({ severity }), role: role, "aria-live": ariaLive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-testid": `toast-${id}`, children: [jsxs("div", { className: content, children: [jsx("div", { className: iconWrapper, children: icon ?? jsx(SeverityIcon, { severity: severity }) }), jsxs("div", { className: textContent, children: [title && jsx("div", { className: titleStyle, children: title }), jsx("div", { className: message, children: msg }), action && (jsx("button", { className: actionButton({ severity }), onClick: action.onClick, type: "button", children: action.label }))] }), closable && (jsx("button", { className: closeButton, onClick: () => onDismiss(id), "aria-label": "Dismiss notification", type: "button", children: jsx(CloseIcon, { size: "sm", decorative: true }) }))] }), showProgress && duration > 0 && (jsx("div", { className: progressBar({ severity, paused }), style: assignInlineVars({
                     [progressDurationVar]: `${duration}ms`,
                 }), "data-testid": `toast-progress-${id}` }))] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ToastItem.js","sources":["../../../../../../src/components/feedback/Toast/ToastItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkBA;AAEA;;AAKE;AACE;AACA;AACA;AACA;AACA;;;AAIA;AACE;AAeF;;AAaA;AACE;AAoBF;AACE;;AAwBN;AASA;;;;;;;AAOG;AACI;;;AAiBL;AACA;;;;;AAOA;AACE;AACE;AACA;;;AAIJ;;;AAEE;AACA;AACA;;AAEA;;AAGF;;;;AAGE;;AAEF;AAEA;;;;AAGE;AACF;;AAGE;AACA;AACF;;AAoEU;;AAOZ;AAEA;;"}
+{"version":3,"file":"ToastItem.js","sources":["../../../../../../src/components/feedback/Toast/ToastItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAuBA;AAEA;;AAEI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;;AAEN;AASA;;;;;;;AAOG;AACI;;;AAiBL;AACA;;;;;AAOA;AACE;AACE;AACA;;;AAIJ;;;AAEE;AACA;AACA;;AAEA;;AAGF;;;;AAGE;;AAEF;AAEA;;;;AAGE;AACF;;AAGE;AACA;AACF;AAEA;AAyCU;;AAOZ;AAEA;;"}

package/dist/esm/components/layout/Accordion/Accordion.js

@@ -50,7 +50,7 @@ function normalizeValue(value) {
  * </Accordion>
  * ```
  */
-const Accordion = ({ value: valueProp, defaultValue, multiple = false, collapsible = false, variant = 'default', size = 'md', gap = 0, children, onChange, className, style, testId, ref, ...rest }) => {
+const Accordion = ({ value: valueProp, defaultValue, multiple = false, collapsible = false, variant = 'default', size = 'md', gap = 0, width = '100%', children, onChange, className, style, testId, ref, ...rest }) => {
     const autoId = useId();
     const [internalValue, setInternalValue] = useState(normalizeValue(defaultValue));
     const isControlled = valueProp !== undefined;
@@ -94,6 +94,7 @@ const Accordion = ({ value: valueProp, defaultValue, multiple = false, collapsib
         ...assignInlineVars({
             [accordionGapVar]: `${gap}px`,
         }),
+        width: typeof width === 'number' ? `${width}px` : width,
         ...style,
     };
     return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cx(accordionRoot, className), style: mergedStyle, "data-testid": testId, ...rest, children: children }) }));

package/dist/esm/components/layout/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/layout/Accordion/Accordion.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAkBA;AAEA;AACE;AACF;AACE;;AAGA;;AAEE;;AAIF;AACF;;AAGE;;AAEE;;AAIF;AACF;AAIA;AAEA;;AAC2B;AACzB;AAA0B;;AAE5B;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;;AAiBD;AAEA;AAGA;;AAEE;;AAGF;;AAII;;AAGE;AACE;AACA;;;;;;;AAKA;;;;;;;AASF;;;;;AAIJ;AAIF;;;;;AAKE;;AAGF;AACE;AACE;;AAEF;;AAGF;AAaF;AAEA;;"}
+{"version":3,"file":"Accordion.js","sources":["../../../../../../src/components/layout/Accordion/Accordion.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAkBA;AAEA;AACE;AACF;AACE;;AAGA;;AAEE;;AAIF;AACF;;AAGE;;AAEE;;AAIF;AACF;AAIA;AAEA;;AAC2B;AACzB;AAA0B;;AAE5B;AAEA;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AAiBL;AAEA;AAGA;;AAEE;;AAGF;;AAII;;AAGE;AACE;AACA;;;;;;;AAKA;;;;;;;AASF;;;;;AAIJ;AAIF;;;;;AAKE;;AAGF;AACE;AACE;;AAEF;AACA;;AAGF;AAaF;AAEA;;"}

package/dist/esm/components/layout/Accordion/AccordionTrigger.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
+import { ChevronRightIcon } from '../../Icons/ChevronRightIcon.js';
 import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
 import { cx } from '../../../utils/cx.js';
 import { chevronExpanded, chevronCollapsed, chevronStyle, iconArea, actionsArea, triggerButton } from './Accordion.css.js';
@@ -10,8 +11,6 @@ const CHEVRON_SIZE_MAP = {
     md: { chevronSize: 12 },
     lg: { chevronSize: 14 },
 };
-// --- Chevron icon ---
-const ChevronRightIcon = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M4.5 3L7.5 6L4.5 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 // --- Component ---
 const AccordionTrigger = ({ children, icon, actions, indicator, className, style, testId, ref, ...rest }) => {
     const { toggleItem, variant, size, accordionId } = useAccordionContext();
@@ -31,7 +30,7 @@ const AccordionTrigger = ({ children, icon, actions, indicator, className, style
     return (jsxs("button", { ref: ref, type: "button", id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, "aria-disabled": isDisabled || undefined, disabled: isDisabled, onClick: handleClick, className: cx(triggerButton({ variant, size, disabled: isDisabled }), className), style: style, "data-testid": testId, ...rest, children: [showIndicator && (jsx("span", { className: cx(chevronStyle, isExpanded ? chevronExpanded : chevronCollapsed), style: {
                     width: `${sizeConfig.chevronSize}px`,
                     height: `${sizeConfig.chevronSize}px`,
-                }, children: indicator ?? jsx(ChevronRightIcon, { size: sizeConfig.chevronSize }) })), icon && jsx("span", { className: iconArea, children: icon }), jsx("span", { children: children }), actions && (jsx("span", { className: actionsArea, onClick: handleActionsClick, children: actions }))] }));
+                }, children: indicator ?? (jsx(ChevronRightIcon, { size: sizeConfig.chevronSize, decorative: true })) })), icon && jsx("span", { className: iconArea, children: icon }), jsx("span", { children: children }), actions && (jsx("span", { className: actionsArea, onClick: handleActionsClick, children: actions }))] }));
 };
 AccordionTrigger.displayName = 'AccordionTrigger';
 

package/dist/esm/components/layout/Accordion/AccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.js","sources":["../../../../../../src/components/layout/Accordion/AccordionTrigger.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAqBA;AACE;AACA;AACA;;AAGF;AAEA;AAkBA;AAEO;AAWL;;AAEA;AAEA;AACA;AAEA;;;;;AAMA;;;AAIA;AAEA;AAyBU;AACA;;AAeZ;AAEA;;"}
+{"version":3,"file":"AccordionTrigger.js","sources":["../../../../../../src/components/layout/Accordion/AccordionTrigger.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAsBA;AACE;AACA;AACA;;AAGF;AAEO;AAWL;;AAEA;AAEA;AACA;AAEA;;;;;AAMA;;;AAIA;AAEA;AAyBU;AACA;;AAiBZ;AAEA;;"}

package/dist/esm/components/layout/Card/Card.css.js

@@ -0,0 +1,18 @@
+import './../../../assets/src/components/layout/Card/Card.css.ts.vanilla-Ducn1gUX.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var cardBodyStyle = 'Card_cardBodyStyle__50gmukh';
+var cardFooterStyle = createRuntimeFn({defaultClassName:'Card_cardFooterStyle__50gmuki',variantClassNames:{align:{left:'Card_cardFooterStyle_align_left__50gmukj',center:'Card_cardFooterStyle_align_center__50gmukk',right:'Card_cardFooterStyle_align_right__50gmukl','space-between':'Card_cardFooterStyle_align_space-between__50gmukm'}},defaultVariants:{align:'right'},compoundVariants:[]});
+var cardHeaderLeadingStyle = 'Card_cardHeaderLeadingStyle__50gmuka';
+var cardHeaderStyle = 'Card_cardHeaderStyle__50gmuk9';
+var cardHeaderSubtitleStyle = 'Card_cardHeaderSubtitleStyle__50gmukd';
+var cardHeaderTextStyle = 'Card_cardHeaderTextStyle__50gmukb';
+var cardHeaderTitleStyle = 'Card_cardHeaderTitleStyle__50gmukc';
+var cardHeaderTrailingStyle = 'Card_cardHeaderTrailingStyle__50gmuke';
+var cardMediaAspectVar = 'var(--cardMediaAspectVar__50gmuk0)';
+var cardMediaImageStyle = 'Card_cardMediaImageStyle__50gmukg';
+var cardMediaStyle = 'Card_cardMediaStyle__50gmukf';
+var cardRecipe = createRuntimeFn({defaultClassName:'Card_cardRecipe__50gmuk1',variantClassNames:{variant:{outlined:'Card_cardRecipe_variant_outlined__50gmuk2',filled:'Card_cardRecipe_variant_filled__50gmuk3',elevated:'Card_cardRecipe_variant_elevated__50gmuk4'},interactive:{true:'Card_cardRecipe_interactive_true__50gmuk5'},selected:{true:'Card_cardRecipe_selected_true__50gmuk6'},disabled:{true:'Card_cardRecipe_disabled_true__50gmuk7'}},defaultVariants:{variant:'outlined'},compoundVariants:[[{variant:'elevated',interactive:true},'Card_cardRecipe_compound_0__50gmuk8']]});
+
+export { cardBodyStyle, cardFooterStyle, cardHeaderLeadingStyle, cardHeaderStyle, cardHeaderSubtitleStyle, cardHeaderTextStyle, cardHeaderTitleStyle, cardHeaderTrailingStyle, cardMediaAspectVar, cardMediaImageStyle, cardMediaStyle, cardRecipe };
+//# sourceMappingURL=Card.css.js.map

package/dist/esm/components/layout/Card/Card.css.js.map

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

package/dist/esm/components/layout/Card/Card.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
+import { cardRecipe, cardHeaderLeadingStyle, cardHeaderTextStyle, cardHeaderTitleStyle, cardHeaderSubtitleStyle, cardHeaderTrailingStyle, cardHeaderStyle, cardMediaImageStyle, cardMediaAspectVar, cardMediaStyle, cardBodyStyle, cardFooterStyle } from './Card.css.js';
+
+/**
+ * A bounded surface representing a single semantic unit (item, summary,
+ * preview). Distinct from `Paper` (a generic surface): a Card has a
+ * header / media / body / footer convention and can be made interactive.
+ *
+ * @example
+ * ```tsx
+ * <Card variant="elevated" onClick={open}>
+ *   <Card.Header
+ *     title="Asset"
+ *     subtitle="Updated 2h ago"
+ *     trailing={<IconButton icon={<MoreIcon />} />}
+ *   />
+ *   <Card.Media src="/preview.png" alt="Preview" />
+ *   <Card.Body>Description...</Card.Body>
+ *   <Card.Footer>
+ *     <Button>Open</Button>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ */
+const CardRoot = ({ variant = 'outlined', onClick, selected = false, disabled = false, className, style, testId, children, ref, ...rest }) => {
+    const interactive = onClick !== undefined && !disabled;
+    const handleKeyDown = useCallback((event) => {
+        if (!interactive || !onClick)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onClick(event);
+        }
+    }, [interactive, onClick]);
+    return (jsx("div", { ref: ref, className: cx(cardRecipe({
+            variant,
+            interactive: interactive || undefined,
+            selected: selected || undefined,
+            disabled: disabled || undefined,
+        }), className), style: style, "data-testid": testId, onClick: interactive ? onClick : undefined, onKeyDown: interactive ? handleKeyDown : undefined, role: interactive ? 'button' : undefined, tabIndex: interactive ? 0 : undefined, "aria-disabled": disabled || undefined, "aria-pressed": interactive && selected ? true : undefined, ...rest, children: children }));
+};
+CardRoot.displayName = 'Card';
+const CardHeader = ({ title, subtitle, leading, trailing, children, className, style, testId, ref, ...rest }) => (jsxs("div", { ref: ref, className: cx(cardHeaderStyle, className), style: style, "data-testid": testId, ...rest, children: [leading && jsx("div", { className: cardHeaderLeadingStyle, children: leading }), jsx("div", { className: cardHeaderTextStyle, children: children ?? (jsxs(Fragment, { children: [title && jsx("h3", { className: cardHeaderTitleStyle, children: title }), subtitle && jsx("p", { className: cardHeaderSubtitleStyle, children: subtitle })] })) }), trailing && jsx("div", { className: cardHeaderTrailingStyle, children: trailing })] }));
+CardHeader.displayName = 'Card.Header';
+const CardMedia = ({ src, alt, aspectRatio = 16 / 9, className, style, testId, children, ref, ...rest }) => (jsx("div", { ref: ref, className: cx(cardMediaStyle, className), style: {
+        ...assignInlineVars({ [cardMediaAspectVar]: String(aspectRatio) }),
+        ...style,
+    }, "data-testid": testId, ...rest, children: src ? (jsx("img", { className: cardMediaImageStyle, src: src, alt: alt ?? '' })) : (children) }));
+CardMedia.displayName = 'Card.Media';
+const CardBody = ({ className, style, testId, children, ref, ...rest }) => (jsx("div", { ref: ref, className: cx(cardBodyStyle, className), style: style, "data-testid": testId, ...rest, children: children }));
+CardBody.displayName = 'Card.Body';
+const CardFooter = ({ align = 'right', className, style, testId, children, ref, ...rest }) => (jsx("div", { ref: ref, className: cx(cardFooterStyle({ align }), className), style: style, "data-testid": testId, ...rest, children: children }));
+CardFooter.displayName = 'Card.Footer';
+const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Media: CardMedia,
+    Body: CardBody,
+    Footer: CardFooter,
+});
+
+export { Card };
+//# sourceMappingURL=Card.js.map

package/dist/esm/components/layout/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../../../src/components/layout/Card/Card.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAkCA;;;;;;;;;;;;;;;;;;;;AAoBG;AACH;;AAcE;AAEI;;AACA;;;;AAIF;;;;;;AAaK;AAgBT;AAEA;AAEA;AAgCA;AAEA;AAeM;AACA;AACD;AAYL;AAEA;AAmBA;AAEA;AAoBA;;AAGE;AACA;AACA;AACA;AACD;;"}

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbEllipsis.js

@@ -9,6 +9,7 @@ import '../../primitives/Checkbox/Checkbox.js';
 import '../../primitives/Checkbox/CheckboxGroup.js';
 import '../../primitives/Code/Code.js';
 import '../../primitives/Collapsible/Collapsible.js';
+import '../../primitives/HoverCard/HoverCard.js';
 import '../../primitives/Icon/Icon.js';
 import '../../primitives/IconButton/IconButton.js';
 import '../../primitives/Input/Input.js';

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbEllipsis.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbEllipsis.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbEllipsis.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;;;;;;;AAOG;;AAED;AAEI;;AA8BF;AAGJ;;"}
+{"version":3,"file":"BreadcrumbEllipsis.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbEllipsis.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;;;;;;;AAOG;;AAED;AAEI;;AA8BF;AAGJ;;"}

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbItem.js

@@ -9,6 +9,7 @@ import '../../primitives/Checkbox/Checkbox.js';
 import '../../primitives/Checkbox/CheckboxGroup.js';
 import '../../primitives/Code/Code.js';
 import '../../primitives/Collapsible/Collapsible.js';
+import '../../primitives/HoverCard/HoverCard.js';
 import '../../primitives/Icon/Icon.js';
 import '../../primitives/IconButton/IconButton.js';
 import '../../primitives/Input/Input.js';

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAcH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAsBJ;AAGF;;"}
+{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAcH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAsBJ;AAGF;;"}

package/dist/esm/components/navigation/Breadcrumbs/Breadcrumbs.js

@@ -14,15 +14,18 @@ import '../../Icons/ChevronDownIcon.js';
 import '../../Icons/ChevronUpIcon.js';
 import '../../Icons/ClockIcon.js';
 import '../../Icons/CloseIcon.js';
+import '../../Icons/CloudUploadIcon.js';
 import '../../Icons/CodeIcon.js';
 import '../../Icons/CopyIcon.js';
 import '../../Icons/CutIcon.js';
 import '../../Icons/DownloadIcon.js';
 import '../../Icons/EditIcon.js';
 import '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
 import '../../Icons/EyeDropperIcon.js';
 import '../../Icons/EyeIcon.js';
 import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
 import '../../Icons/FolderIcon.js';
 import '../../Icons/FullscreenIcon.js';
 import '../../Icons/GridIcon.js';
@@ -30,6 +33,7 @@ import '../../Icons/HeartIcon.js';
 import '../../Icons/HelpIcon.js';
 import '../../Icons/HomeIcon.js';
 import '../../Icons/InfoIcon.js';
+import '../../Icons/LastIcon.js';
 import '../../Icons/LinkIcon.js';
 import '../../Icons/ListIcon.js';
 import '../../Icons/LockIcon.js';
@@ -50,6 +54,7 @@ import '../../Icons/SuccessIcon.js';
 import '../../Icons/TagIcon.js';
 import '../../Icons/TrashIcon.js';
 import '../../Icons/UndoIcon.js';
+import '../../Icons/UnlinkIcon.js';
 import '../../Icons/UnlockIcon.js';
 import '../../Icons/UploadIcon.js';
 import '../../Icons/UserIcon.js';

package/dist/esm/components/navigation/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;AAIE;AACF;AAEA;AACE;;AAIE;;AAGF;AACF;AAEA;AAIE;;AAGI;AACI;;AAID;AAET;AAEA;;;;;;;;;;;;;;;AAeG;AACI;;AAiBH;;AAEE;;AAQE;AACE;AACA;;AAGJ;AAOA;AACE;AACE;AACA;;;;;AAMJ;AAEA;;;;;AAUA;AACE;;AAMA;;AAGF;AACF;;;;;;;;AAQC;;AAcH;AAGF;;"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;AAIE;AACF;AAEA;AACE;;AAIE;;AAGF;AACF;AAEA;AAIE;;AAGI;AACI;;AAID;AAET;AAEA;;;;;;;;;;;;;;;AAeG;AACI;;AAiBH;;AAEE;;AAQE;AACE;AACA;;AAGJ;AAOA;AACE;AACE;AACA;;;;;AAMJ;AAEA;;;;;AAUA;AACE;;AAMA;;AAGF;AACF;;;;;;;;AAQC;;AAcH;AAGF;;"}

package/dist/esm/components/navigation/Pagination/Pagination.css.js

@@ -0,0 +1,12 @@
+import './../../../assets/src/components/navigation/Pagination/Pagination.css.ts.vanilla-CmlFyyjh.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var paginationButtonRecipe = createRuntimeFn({defaultClassName:'Pagination_paginationButtonRecipe__17bx4kb6',variantClassNames:{size:{sm:'Pagination_paginationButtonRecipe_size_sm__17bx4kb7',md:'Pagination_paginationButtonRecipe_size_md__17bx4kb8',lg:'Pagination_paginationButtonRecipe_size_lg__17bx4kb9'},selected:{true:'Pagination_paginationButtonRecipe_selected_true__17bx4kba'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var paginationEllipsisRecipe = createRuntimeFn({defaultClassName:'Pagination_paginationEllipsisRecipe__17bx4kbb',variantClassNames:{size:{sm:'Pagination_paginationEllipsisRecipe_size_sm__17bx4kbc',md:'Pagination_paginationEllipsisRecipe_size_md__17bx4kbd',lg:'Pagination_paginationEllipsisRecipe_size_lg__17bx4kbe'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var paginationIconStyle = 'Pagination_paginationIconStyle__17bx4kbf';
+var paginationItemStyle = 'Pagination_paginationItemStyle__17bx4kb5';
+var paginationListRecipe = createRuntimeFn({defaultClassName:'Pagination_paginationListRecipe__17bx4kb1',variantClassNames:{size:{sm:'Pagination_paginationListRecipe_size_sm__17bx4kb2',md:'Pagination_paginationListRecipe_size_md__17bx4kb3',lg:'Pagination_paginationListRecipe_size_lg__17bx4kb4'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var paginationRootStyle = 'Pagination_paginationRootStyle__17bx4kb0';
+
+export { paginationButtonRecipe, paginationEllipsisRecipe, paginationIconStyle, paginationItemStyle, paginationListRecipe, paginationRootStyle };
+//# sourceMappingURL=Pagination.css.js.map

package/dist/esm/components/navigation/Pagination/Pagination.css.js.map

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