entangle-ui 0.3.0 → 0.4.0

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

@@ -1,15 +1,9 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useEffect } from 'react';
-import styled from '@emotion/styled';
-import { keyframes } from '@emotion/react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { content, iconWrapper, textContent, titleStyle, message, actionButton, closeButton, progressDurationVar, progressBar, toast } from './ToastItem.css.js';
 
-// --- Severity color map ---
-const SEVERITY_COLOR_MAP = {
-    info: 'primary',
-    success: 'success',
-    warning: 'warning',
-    error: 'error',
-};
 // --- Severity icons (inline SVGs) ---
 const SeverityIcon = ({ severity, color, }) => {
     const size = 16;
@@ -31,132 +25,6 @@ const SeverityIcon = ({ severity, color, }) => {
             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" })] }));
     }
 };
-// --- Animations ---
-const slideIn = keyframes `
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-`;
-const progressShrink = keyframes `
-  from {
-    width: 100%;
-  }
-  to {
-    width: 0%;
-  }
-`;
-const StyledToast = styled.div `
-  width: 360px;
-  background: ${props => props.theme.colors.background.elevated};
-  border: 1px solid ${props => props.theme.colors.border.default};
-  border-left: 3px solid
-    ${props => props.theme.colors.accent[SEVERITY_COLOR_MAP[props.$severity]]};
-  border-radius: ${props => props.theme.borderRadius.lg}px;
-  box-shadow: ${props => props.theme.shadows.md};
-  padding: ${props => props.theme.spacing.md}px;
-  pointer-events: auto;
-  position: relative;
-  overflow: hidden;
-  animation: ${slideIn} ${props => props.theme.transitions.normal} forwards;
-`;
-const StyledContent = styled.div `
-  display: flex;
-  align-items: flex-start;
-  gap: ${props => props.theme.spacing.md}px;
-`;
-const StyledIconWrapper = styled.div `
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  padding-top: 1px;
-`;
-const StyledTextContent = styled.div `
-  flex: 1;
-  min-width: 0;
-`;
-const StyledTitle = styled.div `
-  font-weight: ${props => props.theme.typography.fontWeight.semibold};
-  color: ${props => props.theme.colors.text.primary};
-  font-size: ${props => props.theme.typography.fontSize.sm}px;
-  line-height: ${props => props.theme.typography.lineHeight.normal};
-`;
-const StyledMessage = styled.div `
-  color: ${props => props.theme.colors.text.secondary};
-  font-size: ${props => props.theme.typography.fontSize.xs}px;
-  line-height: ${props => props.theme.typography.lineHeight.normal};
-  margin-top: ${props => props.theme.spacing.xs}px;
-`;
-const StyledCloseButton = styled.button `
-  /* Reset */
-  padding: 0;
-  margin: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  outline: none;
-
-  /* Layout */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-  color: ${props => props.theme.colors.text.muted};
-  transition:
-    color ${props => props.theme.transitions.fast},
-    background ${props => props.theme.transitions.fast};
-
-  &:hover {
-    color: ${props => props.theme.colors.text.primary};
-    background: ${props => props.theme.colors.surface.hover};
-  }
-
-  &:focus-visible {
-    box-shadow: ${props => props.theme.shadows.focus};
-  }
-`;
-const StyledActionButton = styled.button `
-  /* Reset */
-  padding: ${props => props.theme.spacing.xs}px
-    ${props => props.theme.spacing.sm}px;
-  margin: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  outline: none;
-
-  /* Styling */
-  color: ${props => props.theme.colors.accent[SEVERITY_COLOR_MAP[props.$severity]]};
-  font-size: ${props => props.theme.typography.fontSize.xs}px;
-  font-weight: ${props => props.theme.typography.fontWeight.medium};
-  border-radius: ${props => props.theme.borderRadius.sm}px;
-  transition: background ${props => props.theme.transitions.fast};
-  margin-top: ${props => props.theme.spacing.sm}px;
-
-  &:hover {
-    background: ${props => props.theme.colors.surface.hover};
-  }
-
-  &:focus-visible {
-    box-shadow: ${props => props.theme.shadows.focus};
-  }
-`;
-const StyledProgressBar = styled.div `
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 2px;
-  background: ${props => props.theme.colors.accent[SEVERITY_COLOR_MAP[props.$severity]]};
-  animation: ${progressShrink} ${props => props.$duration}ms linear forwards;
-  animation-play-state: ${props => (props.$paused ? 'paused' : 'running')};
-`;
 /**
  * Individual toast notification with severity indicator, auto-dismiss,
  * optional progress bar, and action button support.
@@ -165,8 +33,8 @@ const StyledProgressBar = styled.div `
  * - warning/error: role="alert", aria-live="assertive"
  * - Auto-dismiss pauses on hover
  */
-const ToastItem = ({ toast, onDismiss }) => {
-    const { id, title, message, severity, duration, closable, showProgress, icon, action, } = toast;
+const ToastItem = ({ toast: toastData, onDismiss, }) => {
+    const { id, title, message: msg, severity, duration, closable, showProgress, icon, action, } = toastData;
     const [paused, setPaused] = useState(false);
     const timerRef = useRef(null);
     const remainingRef = useRef(duration);
@@ -206,7 +74,9 @@ const ToastItem = ({ toast, onDismiss }) => {
         startTimer();
         return clearTimer;
     }, [startTimer, clearTimer]);
-    return (jsxs(StyledToast, { "$severity": severity, role: role, "aria-live": ariaLive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-testid": `toast-${id}`, children: [jsxs(StyledContent, { children: [jsx(StyledIconWrapper, { children: icon ?? jsx(SeverityIcon, { severity: severity, color: "currentColor" }) }), jsxs(StyledTextContent, { children: [title && jsx(StyledTitle, { children: title }), jsx(StyledMessage, { children: message }), action && (jsx(StyledActionButton, { "$severity": severity, onClick: action.onClick, type: "button", children: action.label }))] }), closable && (jsx(StyledCloseButton, { 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(StyledProgressBar, { "$severity": severity, "$duration": duration, "$paused": paused, "data-testid": `toast-progress-${id}` }))] }));
+    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({
+                    [progressDurationVar]: `${duration}ms`,
+                }), "data-testid": `toast-progress-${id}` }))] }));
 };
 ToastItem.displayName = 'ToastItem';
 

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":["_jsxs","_jsx"],"mappings":"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"}
+{"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;;"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useReducer, useMemo, createContext } from 'react';
 import { createPortal } from 'react-dom';

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

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","sources":["../../../../../../src/components/feedback/Toast/ToastProvider.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;MAmBa,YAAY;AACvB,cAAc,aAAa,CAA2B,IAAI;AAE5D;AAEA,SAAS,YAAY,CACnB,KAA0B,EAC1B,MAAmB,EAAA;AAEnB,IAAA,QAAQ,MAAM,CAAC,IAAI;AACjB,QAAA,KAAK,WAAW;YACd,OAAO,CAAC,GAAG,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;AACjC,QAAA,KAAK,eAAe;AAClB,YAAA,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC;AAC9C,QAAA,KAAK,aAAa;AAChB,YAAA,OAAO,EAAE;AACX,QAAA;AACE,YAAA,OAAO,KAAK;;AAElB;AAEA;;;;;;;;;;;;AAYG;AACI,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,QAAQ,GAAG,cAAc,EACzB,UAAU,GAAG,CAAC,EACd,eAAe,GAAG,IAAI,EACtB,GAAG,GAAG,CAAC,EACP,MAAM,GAAG,IAAI,GACd,KAAI;AACH,IAAA,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,YAAY,EAAE,EAAE,CAAC;IAEvD,MAAM,YAAY,GAAG,OAAO,CAC1B,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,EACrC,CAAC,QAAQ,EAAE,eAAe,CAAC,CAC5B;IAED,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;AAE/C,IAAA,MAAM,aAAa,GAAG,CAAC,EAAU,KAAI;QACnC,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;AACzC,KAAC;AAED,IAAA,QACEA,IAAA,CAAC,YAAY,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,aACvC,QAAQ,EACR,OAAO,QAAQ,KAAK,WAAW;AAC9B,gBAAA,YAAY,CACVC,GAAA,CAAC,cAAc,EAAA,EACb,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,EAAA,CACxB,EACF,QAAQ,CAAC,IAAI,CACd,CAAA,EAAA,CACmB;AAE5B;AAEA,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
+{"version":3,"file":"ToastProvider.js","sources":["../../../../../../src/components/feedback/Toast/ToastProvider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAsBE;AAEF;AAEA;AAIE;AACE;;AAEA;AACE;AACF;AACE;AACF;AACE;;AAEN;AAEA;;;;;;;;;;;;AAYG;AACI;AAQL;;;AASA;;AAEA;AAEA;AAIM;AAYR;AAEA;;"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { useContext, useRef, useCallback } from 'react';
 import { ToastContext } from './ToastProvider.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"useToast.js","sources":["../../../../../../src/components/feedback/Toast/useToast.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQA;;;;;;;;;;;;;;;;AAgBG;SACa,QAAQ,GAAA;AACtB,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC;IACxC,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC;;AAGjE,IAAA,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,OAAO;AAC7C,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC;AAE5B,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAClC,QAAA,UAAU,CAAC,OAAO,IAAI,CAAC;QACvB,OAAO,CAAA,MAAA,EAAS,IAAI,CAAC,GAAG,EAAE,IAAI,UAAU,CAAC,OAAO,CAAA,CAAE;KACnD,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,IAAe,KAAY;QAC1B,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,UAAU,EAAE;AAClC,QAAA,MAAM,YAAY,GAAsB;AACtC,YAAA,GAAG,IAAI;YACP,EAAE;AACF,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,MAAM;AACjC,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,eAAe;AAC1C,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI;AAC/B,YAAA,YAAY,EAAE,IAAI,CAAC,YAAY,IAAI,KAAK;AACxC,YAAA,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;SACtB;QACD,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;AACpD,QAAA,OAAO,EAAE;KACV,EACD,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CACxC;AAED,IAAA,MAAM,IAAI,GAAG,WAAW,CACtB,CAAC,OAAe,EAAE,OAA4B,KAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,CAAC,EAClD,CAAC,KAAK,CAAC,CACR;AAED,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,OAAe,EAAE,OAA4B,KAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC,EACrD,CAAC,KAAK,CAAC,CACR;AAED,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,OAAe,EAAE,OAA4B,KAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC,EACrD,CAAC,KAAK,CAAC,CACR;AAED,IAAA,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,OAAe,EAAE,OAA4B,KAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,CAAC,EACnD,CAAC,KAAK,CAAC,CACR;AAED,IAAA,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,EAAU,KAAI;QACb,QAAQ,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC;AACzC,KAAC,EACD,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAClC,QAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;AACnC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE;AACtE;;;;"}
+{"version":3,"file":"useToast.js","sources":["../../../../../../src/components/feedback/Toast/useToast.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAUA;;;;;;;;;;;;;;;;AAgBG;;AAED;;AAEE;;AAGF;AACA;AAEA;AACE;;;AAIF;;AAGI;AACE;;AAEA;AACA;AACA;AACA;AACA;;;AAGF;;AAKJ;AAMA;AAMA;AAMA;AAMA;;AAGE;AAIF;AACE;AACF;AAEA;AACF;;"}

package/dist/esm/components/form/FormHelperText.css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/components/form/FormHelperText.css.ts.vanilla-CXKd9jtx.css';
+import { c as createRuntimeFn } from '../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var formHelperTextRecipe = createRuntimeFn({defaultClassName:'FormHelperText_formHelperTextRecipe__cuqj3k0',variantClassNames:{error:{true:'FormHelperText_formHelperTextRecipe_error_true__cuqj3k1',false:'FormHelperText_formHelperTextRecipe_error_false__cuqj3k2'}},defaultVariants:{error:false},compoundVariants:[]});
+
+export { formHelperTextRecipe };
+//# sourceMappingURL=FormHelperText.css.js.map

package/dist/esm/components/form/FormHelperText.css.js.map

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

package/dist/esm/components/form/FormHelperText.js

@@ -1,19 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
-import styled from '@emotion/styled';
-import { processCss } from '../../utils/styledUtils.js';
+import { cx } from '../../utils/cx.js';
+import { formHelperTextRecipe } from './FormHelperText.css.js';
 
-const StyledHelperText = styled.div `
-  font-size: ${props => props.theme.typography.fontSize.xs}px;
-  line-height: ${props => props.theme.typography.lineHeight.tight};
-  color: ${props => props.$error
-    ? props.theme.colors.accent.error
-    : props.theme.colors.text.muted};
-  margin-top: ${props => props.theme.spacing.xs}px;
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
 /**
  * A standardized helper text component for use with form controls.
  *
@@ -29,8 +19,8 @@ const StyledHelperText = styled.div `
  * <FormHelperText error>{usernameError}</FormHelperText>
  * ```
  */
-const FormHelperText = /*#__PURE__*/ React.memo(({ children, error = false, className, style, css, ref, ...rest }) => {
-    return (jsx(StyledHelperText, { ref: ref, "$error": error, "$css": css, className: className, style: style, ...rest, children: children }));
+const FormHelperText = /*#__PURE__*/ React.memo(({ children, error = false, className, style, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(formHelperTextRecipe({ error }), className), style: style, ...rest, children: children }));
 });
 FormHelperText.displayName = 'FormHelperText';
 

package/dist/esm/components/form/FormHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.js","sources":["../../../../../src/components/form/FormHelperText.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAqBA,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAGjC;eACa,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAA;iBACzC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAA;AACtD,SAAA,EAAA,KAAK,IACZ,KAAK,CAAC;MACF,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;MAC1B,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAA;gBACrB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;AAG3C,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED;;;;;;;;;;;;;;AAcG;AACI,MAAM,cAAc,iBAAiB,KAAK,CAAC,IAAI,CACpD,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,KAAI;IACnE,QACEA,GAAC,CAAA,gBAAgB,EACf,EAAA,GAAG,EAAE,GAAG,EAAA,QAAA,EACA,KAAK,EAAA,MAAA,EACP,GAAG,EACT,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACR,GAAA,IAAI,EAEP,QAAA,EAAA,QAAQ,EACQ,CAAA;AAEvB,CAAC;AAGH,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"FormHelperText.js","sources":["../../../../../src/components/form/FormHelperText.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAuBA;;;;;;;;;;;;;;AAcG;AACI;AAEH;AAUF;AAGF;;"}

package/dist/esm/components/form/FormLabel.css.js

@@ -0,0 +1,8 @@
+import './../../assets/src/components/form/FormLabel.css.ts.vanilla-DHn6CB2v.css';
+import { c as createRuntimeFn } from '../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var formLabelRecipe = createRuntimeFn({defaultClassName:'FormLabel_formLabelRecipe__1xpmfd40',variantClassNames:{disabled:{true:'FormLabel_formLabelRecipe_disabled_true__1xpmfd41',false:'FormLabel_formLabelRecipe_disabled_false__1xpmfd42'}},defaultVariants:{disabled:false},compoundVariants:[]});
+var requiredIndicatorStyle = 'FormLabel_requiredIndicatorStyle__1xpmfd43';
+
+export { formLabelRecipe, requiredIndicatorStyle };
+//# sourceMappingURL=FormLabel.css.js.map

package/dist/esm/components/form/FormLabel.css.js.map

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

package/dist/esm/components/form/FormLabel.js

@@ -1,25 +1,9 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
-import styled from '@emotion/styled';
-import { processCss } from '../../utils/styledUtils.js';
+import { cx } from '../../utils/cx.js';
+import { requiredIndicatorStyle, formLabelRecipe } from './FormLabel.css.js';
 
-const StyledLabel = styled.label `
-  font-size: ${props => props.theme.typography.fontSize.sm}px;
-  font-weight: ${props => props.theme.typography.fontWeight.medium};
-  color: ${props => props.$disabled
-    ? props.theme.colors.text.disabled
-    : props.theme.colors.text.secondary};
-  line-height: ${props => props.theme.typography.lineHeight.tight};
-  margin-bottom: ${props => props.theme.spacing.xs}px;
-  display: inline-block;
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
-const RequiredIndicator = styled.span `
-  color: ${props => props.theme.colors.accent.error};
-  margin-left: 2px;
-`;
 /**
  * A standardized form label component for use with form controls.
  *
@@ -34,8 +18,8 @@ const RequiredIndicator = styled.span `
  * <Input id="name-input" />
  * ```
  */
-const FormLabel = /*#__PURE__*/ React.memo(({ children, htmlFor, disabled = false, required = false, className, style, css, ref, ...rest }) => {
-    return (jsxs(StyledLabel, { ref: ref, htmlFor: htmlFor, "$disabled": disabled, "$css": css, className: className, style: style, ...rest, children: [children, required && jsx(RequiredIndicator, { children: " *" })] }));
+const FormLabel = /*#__PURE__*/ React.memo(({ children, htmlFor, disabled = false, required = false, className, style, ref, ...rest }) => {
+    return (jsxs("label", { ref: ref, htmlFor: htmlFor, className: cx(formLabelRecipe({ disabled }), className), style: style, ...rest, children: [children, required && jsx("span", { className: requiredIndicatorStyle, children: " *" })] }));
 });
 FormLabel.displayName = 'FormLabel';
 

package/dist/esm/components/form/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/form/FormLabel.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAgCA,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAG9B;eACa,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;AACvD,SAAA,EAAA,KAAK,IACZ,KAAK,CAAC;MACF,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;MACxB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAA;iBACxB,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAA;mBAC9C,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;;AAI9C,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAA;WAC1B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAA;;CAElD;AAED;;;;;;;;;;;;;AAaG;AACU,MAAA,SAAS,iBAAiB,KAAK,CAAC,IAAI,CAC/C,CAAC,EACC,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,EACH,GAAG,IAAI,EACR,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EACV,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAAA,WAAA,EACL,QAAQ,EAAA,MAAA,EACb,GAAG,EACT,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,GACR,IAAI,EAEP,QAAA,EAAA,CAAA,QAAQ,EACR,QAAQ,IAAIC,GAAC,CAAA,iBAAiB,EAAuB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,CAC1C;AAElB,CAAC;AAGH,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}
+{"version":3,"file":"FormLabel.js","sources":["../../../../../src/components/form/FormLabel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkCA;;;;;;;;;;;;;AAaG;AACI;AAWH;AAYF;AAGF;;"}

package/dist/esm/components/form/InputWrapper.css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/components/form/InputWrapper.css.ts.vanilla-Bl7u62PI.css';
+import { c as createRuntimeFn } from '../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var inputWrapperRecipe = createRuntimeFn({defaultClassName:'InputWrapper_inputWrapperRecipe__1h1gl4m0',variantClassNames:{size:{sm:'InputWrapper_inputWrapperRecipe_size_sm__1h1gl4m1',md:'InputWrapper_inputWrapperRecipe_size_md__1h1gl4m2',lg:'InputWrapper_inputWrapperRecipe_size_lg__1h1gl4m3'},error:{true:'InputWrapper_inputWrapperRecipe_error_true__1h1gl4m4',false:'InputWrapper_inputWrapperRecipe_error_false__1h1gl4m5'},disabled:{true:'InputWrapper_inputWrapperRecipe_disabled_true__1h1gl4m6',false:'InputWrapper_inputWrapperRecipe_disabled_false__1h1gl4m7'},focused:{true:'InputWrapper_inputWrapperRecipe_focused_true__1h1gl4m8',false:'InputWrapper_inputWrapperRecipe_focused_false__1h1gl4m9'}},defaultVariants:{size:'md',error:false,disabled:false,focused:false},compoundVariants:[[{focused:true,error:false},'InputWrapper_inputWrapperRecipe_compound_0__1h1gl4ma'],[{focused:false,error:false,disabled:false},'InputWrapper_inputWrapperRecipe_compound_1__1h1gl4mb'],[{focused:false,error:false,disabled:true},'InputWrapper_inputWrapperRecipe_compound_2__1h1gl4mc']]});
+
+export { inputWrapperRecipe };
+//# sourceMappingURL=InputWrapper.css.js.map

package/dist/esm/components/form/InputWrapper.css.js.map

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

package/dist/esm/components/form/InputWrapper.js

@@ -1,77 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
-import styled from '@emotion/styled';
-import { processCss } from '../../utils/styledUtils.js';
+import { cx } from '../../utils/cx.js';
+import { inputWrapperRecipe } from './InputWrapper.css.js';
 
-const StyledInputWrapper = styled.div `
-  position: relative;
-  display: flex;
-  align-items: center;
-  border: 1px solid;
-  border-radius: ${props => props.theme.borderRadius.md}px;
-  transition: all ${props => props.theme.transitions.normal};
-  background: ${props => props.$disabled
-    ? props.theme.colors.surface.disabled
-    : props.theme.colors.surface.default};
-
-  /* Size variants */
-  ${props => {
-    const sizes = {
-        sm: {
-            height: '20px',
-            padding: `0 ${props.theme.spacing.sm}px`,
-        },
-        md: {
-            height: '24px',
-            padding: `0 ${props.theme.spacing.md}px`,
-        },
-        lg: {
-            height: '32px',
-            padding: `0 ${props.theme.spacing.lg}px`,
-        },
-    };
-    const size = sizes[props.$size];
-    return `
-      height: ${size.height};
-      padding: ${size.padding};
-    `;
-}}
-
-  /* Border color states */
-  border-color: ${props => {
-    if (props.$error)
-        return props.theme.colors.border.error;
-    if (props.$focused)
-        return props.theme.colors.border.focus;
-    return props.theme.colors.border.default;
-}};
-
-  /* Focus ring */
-  ${props => props.$focused &&
-    !props.$error &&
-    `
-    box-shadow: 0 0 0 2px ${props.theme.colors.accent.primary}20;
-  `}
-
-  /* Disabled state */
-  ${props => props.$disabled &&
-    `
-    opacity: 0.5;
-    cursor: not-allowed;
-  `}
-  
-  /* Hover state */
-  &:hover:not(:focus-within) {
-    border-color: ${props => {
-    if (props.$disabled || props.$error)
-        return 'inherit';
-    return props.theme.colors.border.focus;
-}};
-  }
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
 /**
  * A standardized wrapper component for form inputs.
  *
@@ -91,10 +23,10 @@ const StyledInputWrapper = styled.div `
  * </InputWrapper>
  * ```
  */
-const InputWrapper = /*#__PURE__*/ React.memo(({ children, size = 'md', error = false, disabled = false, focused = false, className, style, css, ref, ...rest }) => {
-    return (jsx(StyledInputWrapper, { ref: ref, "$size": size, "$error": error, "$disabled": disabled, "$focused": focused, "$css": css, className: className, style: style, ...rest, children: children }));
+const InputWrapper = /*#__PURE__*/ React.memo(({ children, size = 'md', error = false, disabled = false, focused = false, className, style, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(inputWrapperRecipe({ size, error, disabled, focused }), className), style: style, ...rest, children: children }));
 });
 InputWrapper.displayName = 'InputWrapper';
 
-export { InputWrapper, StyledInputWrapper };
+export { InputWrapper };
 //# sourceMappingURL=InputWrapper.js.map

package/dist/esm/components/form/InputWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.js","sources":["../../../../../src/components/form/InputWrapper.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"InputWrapper.js","sources":["../../../../../src/components/form/InputWrapper.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA4CA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAYH;AAaF;AAGF;;"}

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

@@ -0,0 +1,20 @@
+import './../../../assets/src/components/layout/Accordion/Accordion.css.ts.vanilla-Ck5Yew0e.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var accordionGapVar = 'var(--accordionGapVar__1j9ah930)';
+var accordionItem = 'Accordion_accordionItem__1j9ah932';
+var accordionRoot = 'Accordion_accordionRoot__1j9ah931';
+var actionsArea = 'Accordion_actionsArea__1j9ah93f';
+var chevronCollapsed = 'Accordion_chevronCollapsed__1j9ah93e';
+var chevronExpanded = 'Accordion_chevronExpanded__1j9ah93d';
+var chevronStyle = 'Accordion_chevronStyle__1j9ah93c';
+var contentBody = createRuntimeFn({defaultClassName:'Accordion_contentBody__1j9ah93l',variantClassNames:{size:{sm:'Accordion_contentBody_size_sm__1j9ah93m',md:'Accordion_contentBody_size_md__1j9ah93n',lg:'Accordion_contentBody_size_lg__1j9ah93o'}},defaultVariants:{},compoundVariants:[]});
+var contentInner = 'Accordion_contentInner__1j9ah93k';
+var contentWrapper = 'Accordion_contentWrapper__1j9ah93h';
+var contentWrapperCollapsed = 'Accordion_contentWrapperCollapsed__1j9ah93j';
+var contentWrapperExpanded = 'Accordion_contentWrapperExpanded__1j9ah93i';
+var iconArea = 'Accordion_iconArea__1j9ah93g';
+var triggerButton = createRuntimeFn({defaultClassName:'Accordion_triggerButton__1j9ah933',variantClassNames:{variant:{'default':'Accordion_triggerButton_variant_default__1j9ah934',ghost:'Accordion_triggerButton_variant_ghost__1j9ah935',filled:'Accordion_triggerButton_variant_filled__1j9ah936'},size:{sm:'Accordion_triggerButton_size_sm__1j9ah937',md:'Accordion_triggerButton_size_md__1j9ah938',lg:'Accordion_triggerButton_size_lg__1j9ah939'},disabled:{true:'Accordion_triggerButton_disabled_true__1j9ah93a',false:'Accordion_triggerButton_disabled_false__1j9ah93b'}},defaultVariants:{variant:'default',size:'md',disabled:false},compoundVariants:[]});
+
+export { accordionGapVar, accordionItem, accordionRoot, actionsArea, chevronCollapsed, chevronExpanded, chevronStyle, contentBody, contentInner, contentWrapper, contentWrapperCollapsed, contentWrapperExpanded, iconArea, triggerButton };
+//# sourceMappingURL=Accordion.css.js.map

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

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

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

@@ -1,7 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useId, useState, useCallback, 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 { accordionGapVar, accordionRoot } from './Accordion.css.js';
 
 // --- Contexts ---
 const AccordionContext = 
@@ -30,13 +32,6 @@ function normalizeValue(value) {
         return value;
     return [value];
 }
-const StyledAccordionRoot = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: ${props => props.$gap}px;
-
-  ${props => processCss(props.$css, props.theme)}
-`;
 // --- Component ---
 /**
  * Accordion component for collapsible sections in property inspectors
@@ -55,7 +50,7 @@ const StyledAccordionRoot = styled.div `
  * </Accordion>
  * ```
  */
-const Accordion = ({ value: valueProp, defaultValue, multiple = false, collapsible = false, variant = 'default', size = 'md', gap = 0, children, onChange, className, style, css, testId, ref, ...rest }) => {
+const Accordion = ({ value: valueProp, defaultValue, multiple = false, collapsible = false, variant = 'default', size = 'md', gap = 0, children, onChange, className, style, testId, ref, ...rest }) => {
     const autoId = useId();
     const [internalValue, setInternalValue] = useState(normalizeValue(defaultValue));
     const isControlled = valueProp !== undefined;
@@ -95,7 +90,13 @@ const Accordion = ({ value: valueProp, defaultValue, multiple = false, collapsib
         size,
         accordionId: autoId,
     };
-    return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx(StyledAccordionRoot, { ref: ref, "$gap": gap, "$css": css, className: className, style: style, "data-testid": testId, ...rest, children: children }) }));
+    const mergedStyle = {
+        ...assignInlineVars({
+            [accordionGapVar]: `${gap}px`,
+        }),
+        ...style,
+    };
+    return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cx(accordionRoot, className), style: mergedStyle, "data-testid": testId, ...rest, children: children }) }));
 };
 Accordion.displayName = 'Accordion';
 

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":["_jsx"],"mappings":"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"}
+{"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;;"}

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

@@ -1,25 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import styled from '@emotion/styled';
 import { useAccordionContext, useAccordionItemContext } from './Accordion.js';
+import { cx } from '../../../utils/cx.js';
+import { contentInner, contentBody, contentWrapperExpanded, contentWrapperCollapsed, contentWrapper } from './Accordion.css.js';
 
-const CONTENT_SIZE_MAP = {
-    sm: { paddingVKey: 'sm', paddingHKey: 'md' },
-    md: { paddingVKey: 'md', paddingHKey: 'lg' },
-    lg: { paddingVKey: 'lg', paddingHKey: 'xl' },
-};
-const StyledContentWrapper = styled.div `
-  display: grid;
-  grid-template-rows: ${props => (props.$expanded ? '1fr' : '0fr')};
-  transition: grid-template-rows ${props => props.theme.transitions.normal};
-`;
-const StyledContentInner = styled.div `
-  overflow: hidden;
-  min-height: 0;
-`;
-const StyledContentBody = styled.div `
-  padding: ${props => props.theme.spacing[CONTENT_SIZE_MAP[props.$size].paddingVKey]}px
-    ${props => props.theme.spacing[CONTENT_SIZE_MAP[props.$size].paddingHKey]}px;
-`;
 // --- Component ---
 const AccordionContent = ({ children, keepMounted = false, className, style, testId, ref, ...rest }) => {
     const { size, accordionId } = useAccordionContext();
@@ -29,7 +13,7 @@ const AccordionContent = ({ children, keepMounted = false, className, style, tes
     if (!isExpanded && !keepMounted) {
         return null;
     }
-    return (jsx(StyledContentWrapper, { "$expanded": isExpanded, role: "region", id: contentId, "aria-labelledby": triggerId, hidden: !isExpanded || undefined, children: jsx(StyledContentInner, { children: jsx(StyledContentBody, { ref: ref, "$size": size, className: className, style: style, "data-testid": testId, ...rest, children: children }) }) }));
+    return (jsx("div", { className: cx(contentWrapper, isExpanded ? contentWrapperExpanded : contentWrapperCollapsed), role: "region", id: contentId, "aria-labelledby": triggerId, hidden: !isExpanded || undefined, children: jsx("div", { className: contentInner, children: jsx("div", { ref: ref, className: cx(contentBody({ size }), className), style: style, "data-testid": testId, ...rest, children: children }) }) }));
 };
 AccordionContent.displayName = 'AccordionContent';
 

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","sources":["../../../../../../src/components/layout/Accordion/AccordionContent.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAaA,MAAM,gBAAgB,GAA6C;IACjE,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE;IAC5C,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE;IAC5C,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE;CAC7C;AAQD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAA2B;;AAE1C,sBAAA,EAAA,KAAK,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC,CAAA;mCAC/B,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAA;CACzE;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGpC;AAMD,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAwB;AAC/C,WAAA,EAAA,KAAK,IACZ,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAA;AAC9D,IAAA,EAAA,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAA;CAC5E;AAED;AAEa,MAAA,gBAAgB,GAAoC,CAAC,EAChE,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,mBAAmB,EAAE;IACnD,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,uBAAuB,EAAE;AAEvD,IAAA,MAAM,SAAS,GAAG,CAAA,UAAA,EAAa,WAAW,CAAY,SAAA,EAAA,KAAK,EAAE;AAC7D,IAAA,MAAM,SAAS,GAAG,CAAA,UAAA,EAAa,WAAW,CAAY,SAAA,EAAA,KAAK,EAAE;AAE7D,IAAA,IAAI,CAAC,UAAU,IAAI,CAAC,WAAW,EAAE;AAC/B,QAAA,OAAO,IAAI;;IAGb,QACEA,GAAC,CAAA,oBAAoB,EACR,EAAA,WAAA,EAAA,UAAU,EACrB,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,SAAS,EACI,iBAAA,EAAA,SAAS,EAC1B,MAAM,EAAE,CAAC,UAAU,IAAI,SAAS,EAEhC,QAAA,EAAAA,GAAA,CAAC,kBAAkB,EAAA,EAAA,QAAA,EACjBA,IAAC,iBAAiB,EAAA,EAChB,GAAG,EAAE,GAAG,EAAA,OAAA,EACD,IAAI,EACX,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,aAAA,EACC,MAAM,EAAA,GACf,IAAI,EAAA,QAAA,EAEP,QAAQ,EACS,CAAA,EAAA,CACD,EACA,CAAA;AAE3B;AAEA,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}
+{"version":3,"file":"AccordionContent.js","sources":["../../../../../../src/components/layout/Accordion/AccordionContent.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AAEO;;;AAYL;AACA;AAEA;AACE;;AAGF;AAwBF;AAEA;;"}

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

@@ -1,12 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import styled from '@emotion/styled';
 import { useAccordionContext, AccordionItemContext } from './Accordion.js';
+import { cx } from '../../../utils/cx.js';
+import { accordionItem } from './Accordion.css.js';
 
-// --- Styled ---
-const StyledAccordionItem = styled.div `
-  display: flex;
-  flex-direction: column;
-`;
 // --- Component ---
 const AccordionItem = ({ value, disabled = false, children, className, style, testId, ref, ...rest }) => {
     const { expandedItems } = useAccordionContext();
@@ -16,7 +13,7 @@ const AccordionItem = ({ value, disabled = false, children, className, style, te
         isExpanded,
         isDisabled: disabled,
     };
-    return (jsx(AccordionItemContext.Provider, { value: itemContext, children: jsx(StyledAccordionItem, { ref: ref, className: className, style: style, "data-testid": testId, ...rest, children: children }) }));
+    return (jsx(AccordionItemContext.Provider, { value: itemContext, children: jsx("div", { ref: ref, className: cx(accordionItem, className), style: style, "data-testid": testId, ...rest, children: children }) }));
 };
 AccordionItem.displayName = 'AccordionItem';