entangle-ui 0.3.0 → 0.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/layout/Accordion/AccordionItem.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAQA;AAEA,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGrC;AAED;AAEa,MAAA,aAAa,GAAiC,CAAC,EAC1D,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,mBAAmB,EAAE;IAC/C,MAAM,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEhD,IAAA,MAAM,WAAW,GAA8B;QAC7C,KAAK;QACL,UAAU;AACV,QAAA,UAAU,EAAE,QAAQ;KACrB;AAED,IAAA,QACEA,GAAA,CAAC,oBAAoB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,WAAW,EAC/C,QAAA,EAAAA,GAAA,CAAC,mBAAmB,EAAA,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,aAAA,EACC,MAAM,EAAA,GACf,IAAI,EAEP,QAAA,EAAA,QAAQ,EACW,CAAA,EAAA,CACQ;AAEpC;AAEA,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
+{"version":3,"file":"AccordionItem.js","sources":["../../../../../../src/components/layout/Accordion/AccordionItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAWA;AAEO;AAUL;;AAGA;;;AAGE;;AAGF;AAaF;AAEA;;"}

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

@@ -1,109 +1,22 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
-import styled from '@emotion/styled';
 import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
+import { cx } from '../../../utils/cx.js';
+import { chevronExpanded, chevronCollapsed, chevronStyle, iconArea, actionsArea, triggerButton } from './Accordion.css.js';
 
-const TRIGGER_SIZE_MAP = {
-    sm: { height: 28, paddingKey: 'md', fontKey: 'xs', chevronSize: 10 },
-    md: { height: 32, paddingKey: 'lg', fontKey: 'sm', chevronSize: 12 },
-    lg: { height: 38, paddingKey: 'xl', fontKey: 'md', chevronSize: 14 },
+const CHEVRON_SIZE_MAP = {
+    sm: { chevronSize: 10 },
+    md: { chevronSize: 12 },
+    lg: { chevronSize: 14 },
 };
-const StyledTriggerButton = styled.button `
-  /* Reset */
-  margin: 0;
-  border: none;
-  font-family: inherit;
-  outline: none;
-  cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
-  user-select: none;
-  width: 100%;
-  text-align: left;
-
-  /* Layout */
-  display: flex;
-  align-items: center;
-  gap: ${props => props.theme.spacing.sm}px;
-
-  /* Sizing */
-  height: ${props => TRIGGER_SIZE_MAP[props.$size].height}px;
-  padding: 0
-    ${props => props.theme.spacing[TRIGGER_SIZE_MAP[props.$size].paddingKey]}px;
-  font-size: ${props => props.theme.typography.fontSize[TRIGGER_SIZE_MAP[props.$size].fontKey]}px;
-  font-weight: ${props => props.theme.typography.fontWeight.medium};
-  color: ${props => props.theme.colors.text.primary};
-  transition: background ${props => props.theme.transitions.fast};
-
-  /* Disabled */
-  opacity: ${props => (props.$disabled ? 0.5 : 1)};
-
-  /* Variant styles */
-  ${props => {
-    const { colors } = props.theme;
-    switch (props.$variant) {
-        case 'ghost':
-            return `
-          background: transparent;
-          border-bottom: 1px solid ${colors.border.default};
-          &:hover:not(:disabled) {
-            background: ${colors.surface.hover};
-          }
-        `;
-        case 'filled':
-            return `
-          background: ${colors.background.tertiary};
-          &:hover:not(:disabled) {
-            background: ${colors.surface.hover};
-          }
-        `;
-        default:
-            return `
-          background: ${colors.surface.default};
-          border-bottom: 1px solid ${colors.border.default};
-          &:hover:not(:disabled) {
-            background: ${colors.surface.hover};
-          }
-        `;
-    }
-}}
-
-  /* Focus visible */
-  &:focus-visible {
-    box-shadow: ${props => props.theme.shadows.focus};
-    z-index: 1;
-  }
-`;
-const StyledChevron = styled.span `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: transform ${props => props.theme.transitions.fast};
-  transform: rotate(${props => (props.$expanded ? '90deg' : '0deg')});
-  color: ${props => props.theme.colors.text.muted};
-
-  svg {
-    width: ${props => props.$size}px;
-    height: ${props => props.$size}px;
-  }
-`;
-const StyledActionsArea = styled.span `
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  gap: ${props => props.theme.spacing.xs}px;
-`;
-const StyledIconArea = styled.span `
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-`;
 // --- 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();
     const { value, isExpanded, isDisabled } = useAccordionItemContext();
-    const sizeConfig = TRIGGER_SIZE_MAP[size];
+    const sizeConfig = CHEVRON_SIZE_MAP[size];
     const triggerId = `accordion-${accordionId}-trigger-${value}`;
     const contentId = `accordion-${accordionId}-content-${value}`;
     const handleClick = useCallback(() => {
@@ -115,7 +28,10 @@ const AccordionTrigger = ({ children, icon, actions, indicator, className, style
         e.stopPropagation();
     }, []);
     const showIndicator = indicator !== null;
-    return (jsxs(StyledTriggerButton, { ref: ref, type: "button", id: triggerId, "aria-expanded": isExpanded, "aria-controls": contentId, "aria-disabled": isDisabled || undefined, disabled: isDisabled, onClick: handleClick, "$variant": variant, "$size": size, "$expanded": isExpanded, "$disabled": isDisabled, className: className, style: style, "data-testid": testId, ...rest, children: [showIndicator && (jsx(StyledChevron, { "$expanded": isExpanded, "$size": sizeConfig.chevronSize, children: indicator ?? jsx(ChevronRightIcon, { size: sizeConfig.chevronSize }) })), icon && jsx(StyledIconArea, { children: icon }), jsx("span", { children: children }), actions && (jsx(StyledActionsArea, { onClick: handleActionsClick, children: actions }))] }));
+    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 }))] }));
 };
 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":["_jsx","_jsxs"],"mappings":"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"}
+{"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;;"}

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

@@ -0,0 +1,11 @@
+import './../../../assets/src/components/layout/Flex/Flex.css.ts.vanilla-D7wY2gY6.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var basisVar = 'var(--basisVar__tsbw353)';
+var flexRecipe = createRuntimeFn({defaultClassName:'Flex_flexRecipe__tsbw354',variantClassNames:{direction:{row:'Flex_flexRecipe_direction_row__tsbw355','row-reverse':'Flex_flexRecipe_direction_row-reverse__tsbw356',column:'Flex_flexRecipe_direction_column__tsbw357','column-reverse':'Flex_flexRecipe_direction_column-reverse__tsbw358'},wrap:{nowrap:'Flex_flexRecipe_wrap_nowrap__tsbw359',wrap:'Flex_flexRecipe_wrap_wrap__tsbw35a','wrap-reverse':'Flex_flexRecipe_wrap_wrap-reverse__tsbw35b'},justify:{'flex-start':'Flex_flexRecipe_justify_flex-start__tsbw35c','flex-end':'Flex_flexRecipe_justify_flex-end__tsbw35d',center:'Flex_flexRecipe_justify_center__tsbw35e','space-between':'Flex_flexRecipe_justify_space-between__tsbw35f','space-around':'Flex_flexRecipe_justify_space-around__tsbw35g','space-evenly':'Flex_flexRecipe_justify_space-evenly__tsbw35h'},align:{'flex-start':'Flex_flexRecipe_align_flex-start__tsbw35i','flex-end':'Flex_flexRecipe_align_flex-end__tsbw35j',center:'Flex_flexRecipe_align_center__tsbw35k',stretch:'Flex_flexRecipe_align_stretch__tsbw35l',baseline:'Flex_flexRecipe_align_baseline__tsbw35m'},alignContent:{'flex-start':'Flex_flexRecipe_alignContent_flex-start__tsbw35n','flex-end':'Flex_flexRecipe_alignContent_flex-end__tsbw35o',center:'Flex_flexRecipe_alignContent_center__tsbw35p',stretch:'Flex_flexRecipe_alignContent_stretch__tsbw35q','space-between':'Flex_flexRecipe_alignContent_space-between__tsbw35r','space-around':'Flex_flexRecipe_alignContent_space-around__tsbw35s'},fullWidth:{true:'Flex_flexRecipe_fullWidth_true__tsbw35t'},fullHeight:{true:'Flex_flexRecipe_fullHeight_true__tsbw35u'}},defaultVariants:{direction:'row',wrap:'nowrap',justify:'flex-start',align:'stretch',alignContent:'stretch'},compoundVariants:[]});
+var gapVar = 'var(--gapVar__tsbw350)';
+var growVar = 'var(--growVar__tsbw351)';
+var shrinkVar = 'var(--shrinkVar__tsbw352)';
+
+export { basisVar, flexRecipe, gapVar, growVar, shrinkVar };
+//# sourceMappingURL=Flex.css.js.map

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

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

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

@@ -1,82 +1,20 @@
+"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 { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { basisVar, shrinkVar, growVar, gapVar, flexRecipe } from './Flex.css.js';
 
+/** Base spacing unit in px */
+const SPACING_UNIT = 4;
 /**
- * Calculate gap value based on spacing multiplier and theme
+ * Calculate gap value based on spacing multiplier
  */
-const getGapValue = (gap, theme, customGap) => {
+const getGapValue = (gap, customGap) => {
     if (customGap !== undefined) {
         return typeof customGap === 'number' ? `${customGap}px` : customGap;
     }
-    return `${gap * theme.spacing.sm}px`;
+    return `${gap * SPACING_UNIT}px`;
 };
-const StyledFlex = styled.div `
-  /* Base flex container */
-  display: flex;
-  box-sizing: border-box;
-
-  /* Flex properties */
-  flex-direction: ${props => props.$direction};
-  flex-wrap: ${props => props.$wrap};
-  justify-content: ${props => props.$justify};
-  align-items: ${props => props.$align};
-  align-content: ${props => props.$alignContent};
-
-  /* Gap between items */
-  gap: ${props => getGapValue(props.$gap, props.theme, props.$customGap)};
-
-  /* Flex item properties (when this Flex is inside another flex container) */
-  flex-grow: ${props => props.$grow};
-  flex-shrink: ${props => props.$shrink};
-  flex-basis: ${props => typeof props.$basis === 'number' ? `${props.$basis}px` : props.$basis};
-
-  /* Size control */
-  ${props => props.$fullWidth && 'width: 100%;'}
-  ${props => props.$fullHeight && 'height: 100%;'}
-  
-  ${props => props.$minHeight &&
-    `min-height: ${typeof props.$minHeight === 'number'
-        ? `${props.$minHeight}px`
-        : props.$minHeight};`}
-  
-  ${props => props.$maxWidth &&
-    `max-width: ${typeof props.$maxWidth === 'number'
-        ? `${props.$maxWidth}px`
-        : props.$maxWidth};`}
-  
-  /* Responsive direction changes */
-  ${props => props.$sm &&
-    `
-    @media (min-width: 576px) {
-      flex-direction: ${props.$sm};
-    }
-  `}
-  
-  ${props => props.$md &&
-    `
-    @media (min-width: 768px) {
-      flex-direction: ${props.$md};
-    }
-  `}
-  
-  ${props => props.$lg &&
-    `
-    @media (min-width: 992px) {
-      flex-direction: ${props.$lg};
-    }
-  `}
-  
-  ${props => props.$xl &&
-    `
-    @media (min-width: 1200px) {
-      flex-direction: ${props.$xl};
-    }
-  `}
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
 /**
  * A comprehensive flexbox component providing full control over flex properties.
  *
@@ -140,8 +78,44 @@ const StyledFlex = styled.div `
  * </Flex>
  * ```
  */
-const Flex = ({ children, direction = 'row', sm, md, lg, xl, wrap = 'nowrap', justify = 'flex-start', align = 'stretch', alignContent = 'stretch', gap = 0, customGap, grow = 0, shrink = 1, basis = 'auto', fullWidth = false, fullHeight = false, minHeight, maxWidth, className, testId, css, style, ref, ...htmlProps }) => {
-    return (jsx(StyledFlex, { ref: ref, className: className, "$direction": direction, "$sm": sm, "$md": md, "$lg": lg, "$xl": xl, "$wrap": wrap, "$justify": justify, "$align": align, "$alignContent": alignContent, "$gap": gap, "$customGap": customGap, "$grow": grow, "$shrink": shrink, "$basis": basis, "$fullWidth": fullWidth, "$fullHeight": fullHeight, "$minHeight": minHeight, "$maxWidth": maxWidth, "$css": css, "data-testid": testId, style: style, ...htmlProps, children: children }));
+const Flex = ({ children, direction = 'row', sm, md, lg, xl, wrap = 'nowrap', justify = 'flex-start', align = 'stretch', alignContent = 'stretch', gap = 0, customGap, grow = 0, shrink = 1, basis = 'auto', fullWidth = false, fullHeight = false, minHeight, maxWidth, className, testId, style, ref, ...htmlProps }) => {
+    const basisValue = typeof basis === 'number' ? `${basis}px` : basis;
+    const dynamicStyle = {
+        ...assignInlineVars({
+            [gapVar]: getGapValue(gap, customGap),
+            [growVar]: String(grow),
+            [shrinkVar]: String(shrink),
+            [basisVar]: basisValue,
+        }),
+        ...(minHeight !== undefined
+            ? {
+                minHeight: typeof minHeight === 'number' ? `${minHeight}px` : minHeight,
+            }
+            : undefined),
+        ...(maxWidth !== undefined
+            ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth }
+            : undefined),
+        ...style,
+    };
+    // Build data attributes for responsive direction overrides
+    const dataAttrs = {};
+    if (sm)
+        dataAttrs['data-sm-dir'] = sm;
+    if (md)
+        dataAttrs['data-md-dir'] = md;
+    if (lg)
+        dataAttrs['data-lg-dir'] = lg;
+    if (xl)
+        dataAttrs['data-xl-dir'] = xl;
+    return (jsx("div", { ref: ref, className: cx(flexRecipe({
+            direction,
+            wrap,
+            justify,
+            align,
+            alignContent,
+            fullWidth: fullWidth || undefined,
+            fullHeight: fullHeight || undefined,
+        }), className), "data-testid": testId, style: dynamicStyle, ...dataAttrs, ...htmlProps, children: children }));
 };
 Flex.displayName = 'Flex';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../../../../src/components/layout/Flex/Flex.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Flex.js","sources":["../../../../../../src/components/layout/Flex/Flex.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkMA;AACA;AAEA;;AAEG;AACH;AACE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACI;AA0BL;AAEA;AACE;;AAEE;AACA;;;;AAIA;AACI;AAED;;;AAGH;;AAEF;;;;AAKF;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAQ;;;;;;;;;AAcD;AAWT;AAEA;;"}

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

@@ -0,0 +1,9 @@
+import './../../../assets/src/components/layout/Grid/Grid.css.ts.vanilla-gqfqUi29.css';
+
+var columnsVar = 'var(--columnsVar__wzrx2t1)';
+var gapVar = 'var(--gapVar__wzrx2t0)';
+var gridContainer = 'Grid_gridContainer__wzrx2t2';
+var gridItem = 'Grid_gridItem__wzrx2t3';
+
+export { columnsVar, gapVar, gridContainer, gridItem };
+//# sourceMappingURL=Grid.css.js.map

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

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

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

@@ -1,73 +1,20 @@
+"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 { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { columnsVar, gapVar, gridContainer, gridItem } from './Grid.css.js';
 
+/** Base spacing unit in px */
+const SPACING_UNIT = 4;
 /**
- * Calculate gap value based on spacing multiplier and theme
+ * Calculate gap value based on spacing multiplier
  */
-const getGapValue = (spacing, theme, customGap) => {
+const getGapValue = (spacing, customGap) => {
     if (customGap !== undefined) {
         return typeof customGap === 'number' ? `${customGap}px` : customGap;
     }
-    return `${spacing * theme.spacing.sm}px`;
+    return `${spacing * SPACING_UNIT}px`;
 };
-const StyledGrid = styled.div `
-  /* Container styles - creates CSS Grid layout */
-  ${props => props.$container &&
-    `
-    display: grid;
-    grid-template-columns: repeat(${props.$columns}, 1fr);
-    width: 100%;
-    box-sizing: border-box;
-    gap: ${getGapValue(props.$spacing ?? 2, props.theme, props.$gap)};
-  `}
-
-  /* Item styles - defines how this grid item behaves */
-  ${props => !props.$container &&
-    props.$size &&
-    `
-    grid-column: span ${props.$size === 'auto' ? 'auto' : props.$size};
-  `}
-  
-  /* Responsive grid item sizes */
-  ${props => !props.$container &&
-    `
-    /* Base size */
-    ${props.$size && `grid-column: span ${props.$size === 'auto' ? 'auto' : props.$size};`}
-    
-    /* Extra small screens and up */
-    ${props.$xs &&
-        `
-      grid-column: span ${props.$xs === 'auto' ? 'auto' : props.$xs};
-    `}
-    
-    /* Small screens and up (576px) */
-    @media (min-width: 576px) {
-      ${props.$sm && `grid-column: span ${props.$sm === 'auto' ? 'auto' : props.$sm};`}
-    }
-    
-    /* Medium screens and up (768px) */
-    @media (min-width: 768px) {
-      ${props.$md && `grid-column: span ${props.$md === 'auto' ? 'auto' : props.$md};`}
-    }
-    
-    /* Large screens and up (992px) */
-    @media (min-width: 992px) {
-      ${props.$lg && `grid-column: span ${props.$lg === 'auto' ? 'auto' : props.$lg};`}
-    }
-    
-    /* Extra large screens and up (1200px) */
-    @media (min-width: 1200px) {
-      ${props.$xl && `grid-column: span ${props.$xl === 'auto' ? 'auto' : props.$xl};`}
-    }
-  `}
-  
-  /* Ensure proper box sizing for all grid items */
-  box-sizing: border-box;
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
 /**
  * A flexible 12-column grid system component for creating responsive layouts.
  *
@@ -109,8 +56,36 @@ const StyledGrid = styled.div `
  * </Grid>
  * ```
  */
-const Grid = ({ children, container = false, size, xs, sm, md, lg, xl, spacing = 2, columns = 12, gap, className, testId, css, style, ref, ...htmlProps }) => {
-    return (jsx(StyledGrid, { ref: ref, className: className, "$container": container, "$size": size, "$xs": xs, "$sm": sm, "$md": md, "$lg": lg, "$xl": xl, "$spacing": spacing, "$columns": columns, "$gap": gap, "$css": css, "data-testid": testId, style: style, ...htmlProps, children: children }));
+const Grid = ({ children, container = false, size, xs, sm, md, lg, xl, spacing = 2, columns = 12, gap, className, testId, style, ref, ...htmlProps }) => {
+    if (container) {
+        const containerStyle = {
+            ...assignInlineVars({
+                [gapVar]: getGapValue(spacing, gap),
+                [columnsVar]: String(columns),
+            }),
+            ...style,
+        };
+        return (jsx("div", { ref: ref, className: cx(gridContainer, className), "data-testid": testId, style: containerStyle, ...htmlProps, children: children }));
+    }
+    // Item mode — use data attributes for responsive grid-column spans
+    const dataAttrs = {};
+    if (xs !== undefined)
+        dataAttrs['data-xs'] = String(xs);
+    if (sm !== undefined)
+        dataAttrs['data-sm'] = String(sm);
+    if (md !== undefined)
+        dataAttrs['data-md'] = String(md);
+    if (lg !== undefined)
+        dataAttrs['data-lg'] = String(lg);
+    if (xl !== undefined)
+        dataAttrs['data-xl'] = String(xl);
+    const itemStyle = {
+        ...(size !== undefined
+            ? { gridColumn: `span ${size === 'auto' ? 'auto' : size}` }
+            : undefined),
+        ...style,
+    };
+    return (jsx("div", { ref: ref, className: cx(gridItem, className), "data-testid": testId, style: itemStyle, ...dataAttrs, ...htmlProps, children: children }));
 };
 Grid.displayName = 'Grid';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../../../../src/components/layout/Grid/Grid.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Grid.js","sources":["../../../../../../src/components/layout/Grid/Grid.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAoGA;AACA;AAEA;;AAEG;AACH;AAIE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCG;;;AAoBC;AACE;;AAEE;;AAEF;;;;;;;;;;;;;;;;AA2BJ;;AAEI;;AAEF;;AAGF;AAYF;AAEA;;"}

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

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/layout/PanelSurface/PanelSurface.css.ts.vanilla-HZvObe0l.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var backgroundVar = 'var(--backgroundVar__1h989w10)';
+var bodyHidden = 'PanelSurface_bodyHidden__1h989w1b';
+var bodyScrollable = 'PanelSurface_bodyScrollable__1h989w1a';
+var bodyStyle = 'PanelSurface_bodyStyle__1h989w19';
+var footerRecipe = createRuntimeFn({defaultClassName:'PanelSurface_footerRecipe__1h989w1c',variantClassNames:{size:{sm:'PanelSurface_footerRecipe_size_sm__1h989w1d',md:'PanelSurface_footerRecipe_size_md__1h989w1e',lg:'PanelSurface_footerRecipe_size_lg__1h989w1f'}},defaultVariants:{},compoundVariants:[]});
+var headerActions = 'PanelSurface_headerActions__1h989w18';
+var headerRecipe = createRuntimeFn({defaultClassName:'PanelSurface_headerRecipe__1h989w14',variantClassNames:{size:{sm:'PanelSurface_headerRecipe_size_sm__1h989w15',md:'PanelSurface_headerRecipe_size_md__1h989w16',lg:'PanelSurface_headerRecipe_size_lg__1h989w17'}},defaultVariants:{},compoundVariants:[]});
+var rootBordered = 'PanelSurface_rootBordered__1h989w12';
+var rootNoBorder = 'PanelSurface_rootNoBorder__1h989w13';
+var rootStyle = 'PanelSurface_rootStyle__1h989w11';
+
+export { backgroundVar, bodyHidden, bodyScrollable, bodyStyle, footerRecipe, headerActions, headerRecipe, rootBordered, rootNoBorder, rootStyle };
+//# sourceMappingURL=PanelSurface.css.js.map

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

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

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

@@ -1,99 +1,44 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, createContext, useContext } from 'react';
-import styled from '@emotion/styled';
-import { processCss } from '../../../utils/styledUtils.js';
+import { cx } from '../../../utils/cx.js';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { backgroundVar, rootBordered, rootNoBorder, rootStyle, footerRecipe, bodyScrollable, bodyHidden, bodyStyle, headerActions, headerRecipe } from './PanelSurface.css.js';
+import { vars } from '../../../theme/contract.css.js';
 
 const PanelSurfaceContext = 
 /*#__PURE__*/ createContext({
     size: 'md',
 });
 const usePanelSurface = () => useContext(PanelSurfaceContext);
-const HEADER_SIZE_MAP = {
-    sm: { minHeight: 24, paddingKey: 'sm', fontKey: 'xs' },
-    md: { minHeight: 28, paddingKey: 'md', fontKey: 'sm' },
-    lg: { minHeight: 32, paddingKey: 'lg', fontKey: 'md' },
-};
-const StyledRoot = styled.div `
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  box-sizing: border-box;
-  overflow: hidden;
-  background: ${({ $background, theme }) => $background ?? theme.colors.background.secondary};
-  color: ${({ theme }) => theme.colors.text.primary};
-  border: ${({ $bordered, theme }) => $bordered ? `1px solid ${theme.colors.border.default}` : 'none'};
-  border-radius: ${({ theme }) => theme.borderRadius.md}px;
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledHeader = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: ${({ $size }) => HEADER_SIZE_MAP[$size].minHeight}px;
-  padding: 0
-    ${({ $size, theme }) => theme.spacing[HEADER_SIZE_MAP[$size].paddingKey]}px;
-  background: ${({ theme }) => theme.colors.background.secondary};
-  color: ${({ theme }) => theme.colors.text.secondary};
-  font-size: ${({ $size, theme }) => theme.typography.fontSize[HEADER_SIZE_MAP[$size].fontKey]}px;
-  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
-  border-bottom: 1px solid ${({ theme }) => theme.colors.border.default};
-  flex-shrink: 0;
-  user-select: none;
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledHeaderActions = styled.div `
-  display: inline-flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.spacing.xs}px;
-  margin-left: ${({ theme }) => theme.spacing.md}px;
-`;
-const StyledBody = styled.div `
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  box-sizing: border-box;
-  overflow: ${({ $scroll }) => ($scroll ? 'auto' : 'hidden')};
-  padding: ${({ $padding }) => $padding};
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledFooter = styled.div `
-  display: flex;
-  align-items: center;
-  min-height: ${({ $size }) => HEADER_SIZE_MAP[$size].minHeight}px;
-  padding: 0
-    ${({ $size, theme }) => theme.spacing[HEADER_SIZE_MAP[$size].paddingKey]}px;
-  border-top: 1px solid ${({ theme }) => theme.colors.border.default};
-  background: ${({ theme }) => theme.colors.background.secondary};
-  color: ${({ theme }) => theme.colors.text.secondary};
-  font-size: ${({ $size, theme }) => theme.typography.fontSize[HEADER_SIZE_MAP[$size].fontKey]}px;
-  flex-shrink: 0;
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const PanelSurfaceHeader = ({ children, actions, className, style, testId, css, ref, ...rest }) => {
+const PanelSurfaceHeader = ({ children, actions, className, style, testId, ref, ...rest }) => {
     const { size } = usePanelSurface();
-    return (jsxs(StyledHeader, { ref: ref, className: className, style: style, "data-testid": testId, "$size": size, "$css": css, ...rest, children: [jsx("span", { children: children }), actions ? jsx(StyledHeaderActions, { children: actions }) : null] }));
+    return (jsxs("div", { ref: ref, className: cx(headerRecipe({ size }), className), style: style, "data-testid": testId, ...rest, children: [jsx("span", { children: children }), actions ? jsx("div", { className: headerActions, children: actions }) : null] }));
 };
 PanelSurfaceHeader.displayName = 'PanelSurface.Header';
-const PanelSurfaceBody = ({ children, scroll = false, padding = 0, className, style, testId, css, ref, ...rest }) => {
+const PanelSurfaceBody = ({ children, scroll = false, padding = 0, className, style, testId, ref, ...rest }) => {
     const resolvedPadding = typeof padding === 'number' ? `${padding}px` : String(padding);
-    return (jsx(StyledBody, { ref: ref, className: className, style: style, "data-testid": testId, "$scroll": scroll, "$padding": resolvedPadding, "$css": css, ...rest, children: children }));
+    const mergedStyle = {
+        padding: resolvedPadding,
+        ...style,
+    };
+    return (jsx("div", { ref: ref, className: cx(bodyStyle, scroll ? bodyScrollable : bodyHidden, className), style: mergedStyle, "data-testid": testId, ...rest, children: children }));
 };
 PanelSurfaceBody.displayName = 'PanelSurface.Body';
-const PanelSurfaceFooter = ({ children, className, style, testId, css, ref, ...rest }) => {
+const PanelSurfaceFooter = ({ children, className, style, testId, ref, ...rest }) => {
     const { size } = usePanelSurface();
-    return (jsx(StyledFooter, { ref: ref, className: className, style: style, "data-testid": testId, "$size": size, "$css": css, ...rest, children: children }));
+    return (jsx("div", { ref: ref, className: cx(footerRecipe({ size }), className), style: style, "data-testid": testId, ...rest, children: children }));
 };
 PanelSurfaceFooter.displayName = 'PanelSurface.Footer';
-const PanelSurfaceRoot = ({ children, size = 'md', bordered = true, background, className, style, testId, css, ref, ...rest }) => {
+const PanelSurfaceRoot = ({ children, size = 'md', bordered = true, background, className, style, testId, ref, ...rest }) => {
     const contextValue = useMemo(() => ({ size }), [size]);
-    return (jsx(PanelSurfaceContext.Provider, { value: contextValue, children: jsx(StyledRoot, { ref: ref, className: className, style: style, "data-testid": testId, "$bordered": bordered, "$background": background, "$css": css, ...rest, children: children }) }));
+    const mergedStyle = {
+        ...assignInlineVars({
+            [backgroundVar]: background ?? vars.colors.background.secondary,
+        }),
+        ...style,
+    };
+    return (jsx(PanelSurfaceContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cx(rootStyle, bordered ? rootBordered : rootNoBorder, className), style: mergedStyle, "data-testid": testId, ...rest, children: children }) }));
 };
 PanelSurfaceRoot.displayName = 'PanelSurface';
 const PanelSurface = /*#__PURE__*/ Object.assign(PanelSurfaceRoot, {

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

@@ -1 +1 @@
-{"version":3,"file":"PanelSurface.js","sources":["../../../../../../src/components/layout/PanelSurface/PanelSurface.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"PanelSurface.js","sources":["../../../../../../src/components/layout/PanelSurface/PanelSurface.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA0BA;AACE;AACE;AACD;AAEH;AAEA;AASE;;AAcF;AAEA;AAEA;AAUE;AAGA;AACE;AACA;;AAGF;AAWF;AAEA;AAEA;AAQE;AAEA;AAWF;AAEA;AAEA;AAWE;AAEA;AACE;;;AAGA;;;AAoBJ;AAEA;AAEO;AACL;AACA;AACA;AACD;;"}