entangle-ui 0.3.0 → 0.5.0

package/dist/esm/components/primitives/Icon/Icon.css.js

@@ -0,0 +1,7 @@
+import './../../../assets/src/components/primitives/Icon/Icon.css.ts.vanilla-DIZ6dped.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var iconRecipe = createRuntimeFn({defaultClassName:'Icon_iconRecipe__1yo6gez0',variantClassNames:{size:{sm:'Icon_iconRecipe_size_sm__1yo6gez1',md:'Icon_iconRecipe_size_md__1yo6gez2',lg:'Icon_iconRecipe_size_lg__1yo6gez3'},color:{primary:'Icon_iconRecipe_color_primary__1yo6gez4',secondary:'Icon_iconRecipe_color_secondary__1yo6gez5',muted:'Icon_iconRecipe_color_muted__1yo6gez6',accent:'Icon_iconRecipe_color_accent__1yo6gez7',success:'Icon_iconRecipe_color_success__1yo6gez8',warning:'Icon_iconRecipe_color_warning__1yo6gez9',error:'Icon_iconRecipe_color_error__1yo6geza'}},defaultVariants:{size:'md',color:'primary'},compoundVariants:[]});
+
+export { iconRecipe };
+//# sourceMappingURL=Icon.css.js.map

package/dist/esm/components/primitives/Icon/Icon.css.js.map

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

package/dist/esm/components/primitives/Icon/Icon.js

@@ -1,61 +1,29 @@
+"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 { iconRecipe } from './Icon.css.js';
 
-const StyledSVG = styled.svg `
-  /* Reset and base styles */
-  display: inline-block;
-  vertical-align: middle;
-  flex-shrink: 0;
-  user-select: none;
-
-  /* Size variants optimized for editor interfaces */
-  ${props => {
-    const sizes = {
-        sm: '12px',
-        md: '16px',
-        lg: '20px',
-    };
-    return `
-      width: ${sizes[props.$size]};
-      height: ${sizes[props.$size]};
-    `;
-}}
-
-  /* Color variants using theme tokens */
-  ${props => {
-    const { theme } = props;
-    // Standard color mappings to theme
-    const colorMap = {
-        primary: theme.colors.text.primary,
-        secondary: theme.colors.text.secondary,
-        muted: theme.colors.text.muted,
-        accent: theme.colors.accent.primary,
-        success: theme.colors.accent.success,
-        warning: theme.colors.accent.warning,
-        error: theme.colors.accent.error,
-    };
-    // Use theme color if available, otherwise treat as custom color
-    const color = colorMap[props.$color] || props.$color;
-    return `
-      color: ${color};
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    `;
-}}
-  
-  /* Ensure crisp rendering */
-  shape-rendering: geometricPrecision;
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
-const Icon = /*#__PURE__*/ React.memo(({ children, size = 'md', color = 'primary', className, title, decorative = false, css, testId, ref, ...props }) => {
-    return (jsxs(StyledSVG, { ref: ref, className: className, "$size": size, "$color": color, "$css": css, viewBox: "0 0 24 24", fill: "none", "aria-hidden": decorative, role: decorative ? 'presentation' : 'img', "data-testid": testId, ...props, children: [title && !decorative && jsx("title", { children: title }), children] }));
+/**
+ * Standard color keys that map to recipe variants
+ */
+const STANDARD_COLORS = new Set([
+    'primary',
+    'secondary',
+    'muted',
+    'accent',
+    'success',
+    'warning',
+    'error',
+]);
+const Icon = /*#__PURE__*/ React.memo(({ children, size = 'md', color = 'primary', className, title, decorative = false, testId, ref, ...props }) => {
+    const isStandardColor = STANDARD_COLORS.has(color);
+    return (jsxs("svg", { ref: ref, className: cx(iconRecipe({
+            size,
+            color: isStandardColor
+                ? color
+                : undefined,
+        }), className), style: !isStandardColor ? { color } : undefined, viewBox: "0 0 24 24", fill: "none", "aria-hidden": decorative, role: decorative ? 'presentation' : 'img', "data-testid": testId, ...props, children: [title && !decorative && jsx("title", { children: title }), children] }));
 });
 Icon.displayName = 'Icon';
 

package/dist/esm/components/primitives/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../../../../src/components/primitives/Icon/Icon.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AA8CA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgB;;;;;;;;AAQxC,EAAA,EAAA,KAAK,IAAG;AACR,IAAA,MAAM,KAAK,GAAG;AACZ,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;AACV,QAAA,EAAE,EAAE,MAAM;KACX;IACD,OAAO;AACI,aAAA,EAAA,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;AACjB,cAAA,EAAA,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;KAC7B;AACH,CAAC;;;AAGC,EAAA,EAAA,KAAK,IAAG;AACR,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK;;AAGvB,IAAA,MAAM,QAAQ,GAAG;AACf,QAAA,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;AAClC,QAAA,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;AACtC,QAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;AAC9B,QAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;AACnC,QAAA,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;AACpC,QAAA,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO;AACpC,QAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;KACjC;;AAGD,IAAA,MAAM,KAAK,GACT,QAAQ,CAAC,KAAK,CAAC,MAA+B,CAAC,IAAI,KAAK,CAAC,MAAM;IAEjE,OAAO;eACI,KAAK,CAAA;;;;;;KAMf;AACH,CAAC;;;;;;AAMC,EAAA,EAAA,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC;CAC/C;AAEY,MAAA,IAAI,iBAAiB,KAAK,CAAC,IAAI,CAC1C,CAAC,EACC,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,SAAS,EACT,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,GAAG,EACH,MAAM,EACN,GAAG,EACH,GAAG,KAAK,EACT,KAAI;IACH,QACEA,IAAC,CAAA,SAAS,EACR,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACb,OAAA,EAAA,IAAI,YACH,KAAK,EAAA,MAAA,EACP,GAAG,EACT,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EAAA,aAAA,EACE,UAAU,EACvB,IAAI,EAAE,UAAU,GAAG,cAAc,GAAG,KAAK,EAC5B,aAAA,EAAA,MAAM,EACf,GAAA,KAAK,aAER,KAAK,IAAI,CAAC,UAAU,IAAIC,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EAAQ,KAAK,EAAA,CAAS,EAC9C,QAAQ,CACC,EAAA,CAAA;AAEhB,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../../../../../src/components/primitives/Icon/Icon.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAgCA;;AAEG;AACH;;;;;;;;AAQC;AAEM;;;;AAoBK;AACE;AAQA;;AAgBZ;AAGF;;"}

package/dist/esm/components/primitives/IconButton/IconButton.css.js

@@ -0,0 +1,8 @@
+import './../../../assets/src/components/primitives/IconButton/IconButton.css.ts.vanilla-C-xAQoR3.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var iconButtonRecipe = createRuntimeFn({defaultClassName:'IconButton_iconButtonBase__rqqp000',variantClassNames:{size:{sm:'IconButton_iconButtonRecipe_size_sm__rqqp002',md:'IconButton_iconButtonRecipe_size_md__rqqp003',lg:'IconButton_iconButtonRecipe_size_lg__rqqp004'},variant:{'default':'IconButton_iconButtonRecipe_variant_default__rqqp005',ghost:'IconButton_iconButtonRecipe_variant_ghost__rqqp006',filled:'IconButton_iconButtonRecipe_variant_filled__rqqp007'},radius:{none:'IconButton_iconButtonRecipe_radius_none__rqqp008',sm:'IconButton_iconButtonRecipe_radius_sm__rqqp009',md:'IconButton_iconButtonRecipe_radius_md__rqqp00a',lg:'IconButton_iconButtonRecipe_radius_lg__rqqp00b',full:'IconButton_iconButtonRecipe_radius_full__rqqp00c'},pressed:{true:'IconButton_iconButtonRecipe_pressed_true__rqqp00d',false:'IconButton_iconButtonRecipe_pressed_false__rqqp00e'}},defaultVariants:{size:'md',variant:'ghost',radius:'md',pressed:false},compoundVariants:[]});
+var loadingSpinnerRecipe = createRuntimeFn({defaultClassName:'IconButton_loadingSpinnerRecipe__rqqp00g',variantClassNames:{size:{sm:'IconButton_loadingSpinnerRecipe_size_sm__rqqp00h',md:'IconButton_loadingSpinnerRecipe_size_md__rqqp00i',lg:'IconButton_loadingSpinnerRecipe_size_lg__rqqp00j'}},defaultVariants:{size:'md'},compoundVariants:[]});
+
+export { iconButtonRecipe, loadingSpinnerRecipe };
+//# sourceMappingURL=IconButton.css.js.map

package/dist/esm/components/primitives/IconButton/IconButton.css.js.map

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

package/dist/esm/components/primitives/IconButton/IconButton.js

@@ -1,174 +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 { loadingSpinnerRecipe, iconButtonRecipe } from './IconButton.css.js';
 
-const StyledIconButton = styled.button `
-  /* Reset */
-  margin: 0;
-  padding: 0;
-  font-family: inherit;
-  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
-  user-select: none;
-
-  /* Layout */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: all ${props => props.theme.transitions.normal};
-  outline: none;
-  position: relative;
-
-  /* Size variants - square buttons scaled to icon size */
-  ${props => {
-    const sizes = {
-        sm: {
-            width: '20px', // Compact for 12px icons
-            height: '20px',
-            padding: '4px',
-        },
-        md: {
-            width: '24px', // Standard for 16px icons
-            height: '24px',
-            padding: '4px',
-        },
-        lg: {
-            width: '32px', // Larger for 20px icons
-            height: '32px',
-            padding: '6px',
-        },
-    };
-    const size = sizes[props.$size];
-    return `
-      width: ${size.width};
-      height: ${size.height};
-      padding: ${size.padding};
-    `;
-}}
-
-  /* Border radius variants */
-  ${props => {
-    const radiusMap = {
-        none: '0px',
-        sm: `${props.theme.borderRadius.sm}px`,
-        md: `${props.theme.borderRadius.md}px`,
-        lg: `${props.theme.borderRadius.lg}px`,
-        full: '50%',
-    };
-    return `border-radius: ${radiusMap[props.$radius]};`;
-}}
-  
-  /* Variant styles */
-  ${props => {
-    const { colors } = props.theme;
-    switch (props.$variant) {
-        case 'default':
-            return `
-          background: transparent;
-          border: 1px solid ${colors.border.default};
-          color: ${colors.text.primary};
-          
-          &:hover:not(:disabled) {
-            background: ${colors.surface.hover};
-            border-color: ${colors.border.focus};
-          }
-          
-          &:active:not(:disabled) {
-            background: ${colors.surface.active};
-          }
-        `;
-        case 'ghost':
-            return `
-          background: transparent;
-          border: 1px solid transparent;
-          color: ${colors.text.secondary};
-          
-          &:hover:not(:disabled) {
-            background: ${colors.surface.hover};
-            color: ${colors.text.primary};
-          }
-          
-          &:active:not(:disabled) {
-            background: ${colors.surface.active};
-          }
-        `;
-        case 'filled':
-            return `
-          background: ${colors.accent.primary};
-          border: 1px solid ${colors.accent.primary};
-          color: white;
-          
-          &:hover:not(:disabled) {
-            background: ${colors.accent.secondary};
-            border-color: ${colors.accent.secondary};
-          }
-          
-          &:active:not(:disabled) {
-            background: ${colors.accent.secondary};
-          }
-        `;
-        default:
-            return '';
-    }
-}}
-  
-  /* Pressed state */
-  ${props => props.$pressed &&
-    `
-    background: ${props.theme.colors.surface.active} !important;
-    border-color: ${props.theme.colors.border.focus} !important;
-  `}
-  
-  /* Disabled state */
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* Focus visible */
-  &:focus-visible {
-    box-shadow: ${props => props.theme.shadows.focus};
-  }
-
-  /* Active press effect */
-  &:active:not(:disabled) {
-    transform: translateY(0.5px);
-  }
-
-  /* Icon container - centers icon properly */
-  & > * {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
-const LoadingSpinner = styled.div `
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-
-  ${props => {
-    const sizes = {
-        sm: '12px',
-        md: '16px',
-        lg: '20px',
-    };
-    return `
-      width: ${sizes[props.$size]};
-      height: ${sizes[props.$size]};
-    `;
-}}
-
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`;
 /**
  * A specialized square button component for displaying icons in editor interfaces.
  *
@@ -213,8 +48,13 @@ const LoadingSpinner = styled.div `
  * </IconButton>
  * ```
  */
-const IconButton = /*#__PURE__*/ React.memo(({ children, className, size = 'md', variant = 'ghost', radius = 'md', disabled = false, loading = false, pressed = false, onClick, 'aria-label': ariaLabel, testId, css, style, ref, ...props }) => {
-    return (jsx(StyledIconButton, { ref: ref, className: className, "$size": size, "$variant": variant, "$radius": radius, "$loading": loading, "$pressed": pressed, "$css": css, disabled: disabled || loading, onClick: onClick, "aria-label": ariaLabel, "aria-pressed": pressed, "data-testid": testId, style: style, ...props, children: loading ? jsx(LoadingSpinner, { "$size": size }) : children }));
+const IconButton = /*#__PURE__*/ React.memo(({ children, className, size = 'md', variant = 'ghost', radius = 'md', disabled = false, loading = false, pressed = false, onClick, 'aria-label': ariaLabel, testId, style, ref, ...props }) => {
+    return (jsx("button", { ref: ref, className: cx(iconButtonRecipe({
+            size,
+            variant,
+            radius,
+            pressed: pressed || undefined,
+        }), className), disabled: disabled || loading, onClick: onClick, "aria-label": ariaLabel, "aria-pressed": pressed, "data-testid": testId, style: style, ...props, children: loading ? (jsx("div", { className: loadingSpinnerRecipe({ size }) })) : (children) }));
 });
 IconButton.displayName = 'IconButton';
 

package/dist/esm/components/primitives/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../../../src/components/primitives/IconButton/IconButton.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"IconButton.js","sources":["../../../../../../src/components/primitives/IconButton/IconButton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAmHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CG;AACI;;;;;;;AA4CL;AAGF;;"}

package/dist/esm/components/primitives/Input/Input.css.js

@@ -0,0 +1,12 @@
+import './../../../assets/src/components/primitives/Input/Input.css.ts.vanilla-De5ditYa.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var helperTextRecipe = createRuntimeFn({defaultClassName:'Input_helperTextRecipe__k5jekyb',variantClassNames:{error:{true:'Input_helperTextRecipe_error_true__k5jekyc',false:'Input_helperTextRecipe_error_false__k5jekyd'}},defaultVariants:{error:false},compoundVariants:[]});
+var iconEndStyle = 'Input_iconEndStyle__k5jeky9';
+var iconStartStyle = 'Input_iconStartStyle__k5jeky8';
+var inputContainerStyle = 'Input_inputContainerStyle__k5jeky0';
+var inputRecipe = createRuntimeFn({defaultClassName:'Input_inputRecipe__k5jeky4',variantClassNames:{size:{sm:'Input_inputRecipe_size_sm__k5jeky5',md:'Input_inputRecipe_size_md__k5jeky6',lg:'Input_inputRecipe_size_lg__k5jeky7'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var labelRecipe = createRuntimeFn({defaultClassName:'Input_labelRecipe__k5jeky1',variantClassNames:{disabled:{true:'Input_labelRecipe_disabled_true__k5jeky2',false:'Input_labelRecipe_disabled_false__k5jeky3'}},defaultVariants:{disabled:false},compoundVariants:[]});
+
+export { helperTextRecipe, iconEndStyle, iconStartStyle, inputContainerStyle, inputRecipe, labelRecipe };
+//# sourceMappingURL=Input.css.js.map

package/dist/esm/components/primitives/Input/Input.css.js.map

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

package/dist/esm/components/primitives/Input/Input.js

@@ -1,83 +1,10 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '../../form/FormLabel.js';
-import '../../form/FormHelperText.js';
-import { StyledInputWrapper } from '../../form/InputWrapper.js';
-import { processCss } from '../../../utils/styledUtils.js';
-import styled from '@emotion/styled';
+import { inputWrapperRecipe } from '../../form/InputWrapper.css.js';
+import { cx } from '../../../utils/cx.js';
 import React from 'react';
+import { labelRecipe, iconStartStyle, inputRecipe, iconEndStyle, helperTextRecipe, inputContainerStyle } from './Input.css.js';
 
-const StyledInputContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: ${props => props.theme.spacing.xs}px;
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
-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};
-`;
-const StyledInput = styled.input `
-  flex: 1;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-family: inherit;
-  color: ${props => props.theme.colors.text.primary};
-
-  ${props => {
-    const fontSize = {
-        sm: props.theme.typography.fontSize.md,
-        md: props.theme.typography.fontSize.md,
-        lg: props.theme.typography.fontSize.lg,
-    };
-    return `font-size: ${fontSize[props.$size]}px;`;
-}}
-
-  &::placeholder {
-    color: ${props => props.theme.colors.text.muted};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  /* Remove number input arrows */
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  &[type='number'] {
-    -moz-appearance: textfield;
-  }
-`;
-const StyledIcon = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${props => props.theme.colors.text.muted};
-
-  ${props => props.$position === 'start' ? 'margin-right: 6px;' : 'margin-left: 6px;'}
-
-  & > * {
-    width: 14px;
-    height: 14px;
-  }
-`;
-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};
-`;
 /**
  * A versatile input component for text entry in editor interfaces.
  *
@@ -114,7 +41,7 @@ const StyledHelperText = styled.div `
  * />
  * ```
  */
-const Input = ({ value, defaultValue, placeholder, type = 'text', size = 'md', disabled = false, error = false, required = false, readOnly = false, label, helperText, errorMessage, startIcon, endIcon, className, style, css, onChange, onFocus, onBlur, onKeyDown, testId, ref, ...props }) => {
+const Input = ({ value, defaultValue, placeholder, type = 'text', size = 'md', disabled = false, error = false, required = false, readOnly = false, label, helperText, errorMessage, startIcon, endIcon, className, style, onChange, onFocus, onBlur, onKeyDown, testId, ref, ...props }) => {
     const [focused, setFocused] = React.useState(false);
     const inputId = React.useId();
     const handleFocus = (event) => {
@@ -125,7 +52,12 @@ const Input = ({ value, defaultValue, placeholder, type = 'text', size = 'md', d
         setFocused(false);
         onBlur?.(event);
     };
-    return (jsxs(StyledInputContainer, { className: className, style: style, "$size": size, "$error": error, "$disabled": disabled, "$focused": focused, "$css": css, children: [label && (jsxs(StyledLabel, { htmlFor: inputId, "$disabled": disabled, children: [label, required && jsx("span", { style: { color: 'var(--accent-error)' }, children: " *" })] })), jsxs(StyledInputWrapper, { "$size": size, "$error": error, "$disabled": disabled, "$focused": focused, children: [startIcon && jsx(StyledIcon, { "$position": "start", children: startIcon }), jsx(StyledInput, { ref: ref, id: inputId, type: type, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, required: required, readOnly: readOnly, "$size": size, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: onKeyDown, "data-testid": testId, ...props }), endIcon && jsx(StyledIcon, { "$position": "end", children: endIcon })] }), (helperText ?? (error && errorMessage)) && (jsx(StyledHelperText, { "$error": error, children: error && errorMessage ? errorMessage : helperText }))] }));
+    return (jsxs("div", { className: cx(inputContainerStyle, className), style: style, children: [label && (jsxs("label", { htmlFor: inputId, className: labelRecipe({ disabled: disabled || undefined }), children: [label, required && jsx("span", { style: { color: 'var(--accent-error)' }, children: " *" })] })), jsxs("div", { className: inputWrapperRecipe({
+                    size,
+                    error,
+                    disabled,
+                    focused,
+                }), children: [startIcon && jsx("div", { className: iconStartStyle, children: startIcon }), jsx("input", { ref: ref, id: inputId, type: type, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, required: required, readOnly: readOnly, className: inputRecipe({ size }), onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: onKeyDown, "data-testid": testId, ...props }), endIcon && jsx("div", { className: iconEndStyle, children: endIcon })] }), (helperText ?? (error && errorMessage)) && (jsx("div", { className: helperTextRecipe({ error: error || undefined }), children: error && errorMessage ? errorMessage : helperText }))] }));
 };
 Input.displayName = 'Input';
 

package/dist/esm/components/primitives/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../../../src/components/primitives/Input/Input.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../../../src/components/primitives/Input/Input.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAiJA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCG;AACI;AAyBL;AACA;AAEA;;AAEE;AACF;AAEA;;AAEE;AACF;;;;;;AAoBO;AAiCT;AAEA;;"}

package/dist/esm/components/primitives/Paper/Paper.css.js

@@ -0,0 +1,7 @@
+import './../../../assets/src/components/primitives/Paper/Paper.css.ts.vanilla-B_tPWU80.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var paperRecipe = createRuntimeFn({defaultClassName:'Paper_paperRecipe__3dkz7t0',variantClassNames:{elevation:{'0':'Paper_paperRecipe_elevation_0__3dkz7t1','1':'Paper_paperRecipe_elevation_1__3dkz7t2','2':'Paper_paperRecipe_elevation_2__3dkz7t3','3':'Paper_paperRecipe_elevation_3__3dkz7t4'},bordered:{true:'Paper_paperRecipe_bordered_true__3dkz7t5',false:'Paper_paperRecipe_bordered_false__3dkz7t6'},padding:{xs:'Paper_paperRecipe_padding_xs__3dkz7t7',sm:'Paper_paperRecipe_padding_sm__3dkz7t8',md:'Paper_paperRecipe_padding_md__3dkz7t9',lg:'Paper_paperRecipe_padding_lg__3dkz7ta',xl:'Paper_paperRecipe_padding_xl__3dkz7tb',xxl:'Paper_paperRecipe_padding_xxl__3dkz7tc',xxxl:'Paper_paperRecipe_padding_xxxl__3dkz7td'},nestLevel:{'0':'Paper_paperRecipe_nestLevel_0__3dkz7te','1':'Paper_paperRecipe_nestLevel_1__3dkz7tf','2':'Paper_paperRecipe_nestLevel_2__3dkz7tg','3':'Paper_paperRecipe_nestLevel_3__3dkz7th'},expand:{true:'Paper_paperRecipe_expand_true__3dkz7ti',false:'Paper_paperRecipe_expand_false__3dkz7tj'}},defaultVariants:{elevation:1,bordered:false,padding:'md',nestLevel:0,expand:false},compoundVariants:[]});
+
+export { paperRecipe };
+//# sourceMappingURL=Paper.css.js.map

package/dist/esm/components/primitives/Paper/Paper.css.js.map

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

package/dist/esm/components/primitives/Paper/Paper.js

@@ -1,94 +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 { paperRecipe } from './Paper.css.js';
 
-/**
- * Get background color based on nesting level
- */
-const getBackgroundColor = (nestLevel, theme) => {
-    const backgroundLevels = [
-        theme.colors.background.primary, // Level 0 - darkest
-        theme.colors.background.secondary, // Level 1
-        theme.colors.background.tertiary, // Level 2
-        theme.colors.background.elevated, // Level 3 - lightest
-    ];
-    return backgroundLevels[nestLevel] ?? backgroundLevels[0];
-};
-/**
- * Get box shadow based on elevation level
- */
-const getElevationShadow = (elevation, theme) => {
-    const shadowLevels = [
-        'none', // Level 0 - no shadow
-        theme.shadows.sm, // Level 1 - small shadow
-        theme.shadows.md, // Level 2 - medium shadow
-        theme.shadows.lg, // Level 3 - large shadow
-    ];
-    return shadowLevels[elevation] ?? 'none';
-};
-/**
- * Get padding value from theme spacing tokens
- */
-const getPaddingValue = (spacing, theme) => {
-    return `${theme.spacing[spacing]}px`;
-};
-const StyledPaper = styled.div `
-  /* Base styles */
-  box-sizing: border-box;
-  position: relative;
-
-  /* Background based on nesting level */
-  background-color: ${props => getBackgroundColor(props.$nestLevel, props.theme)};
-
-  /* Border radius */
-  border-radius: ${props => {
-    if (props.$customRadius !== undefined) {
-        return typeof props.$customRadius === 'number'
-            ? `${props.$customRadius}px`
-            : props.$customRadius;
-    }
-    return `${props.theme.borderRadius.md}px`;
-}};
-
-  /* Border */
-  ${props => props.$bordered &&
-    `
-    border: 1px solid ${props.theme.colors.border.default};
-  `}
-
-  /* Elevation shadow */
-  box-shadow: ${props => getElevationShadow(props.$elevation, props.theme)};
-
-  /* Padding */
-  padding: ${props => getPaddingValue(props.$padding, props.theme)};
-
-  /* Expansion */
-  ${props => props.$expand &&
-    `
-    width: 100%;
-    height: 100%;
-  `}
-
-  /* Smooth transitions for interactive states */
-  transition: box-shadow ${props => props.theme.transitions.normal},
-              background-color ${props => props.theme.transitions.normal};
-
-  /* Hover enhancement for elevated papers */
-  ${props => props.$elevation > 0 &&
-    `
-    &:hover {
-      box-shadow: ${props.$elevation === 1
-        ? props.theme.shadows.md
-        : props.$elevation === 2
-            ? props.theme.shadows.lg
-            : props.theme.shadows.xl};
-    }
-  `}
-
-  /* Custom CSS */
-  ${props => processCss(props.$css, props.theme)}
-`;
 /**
  * A versatile paper component providing surface elevation and visual hierarchy.
  *
@@ -137,8 +52,21 @@ const StyledPaper = styled.div `
  * </Paper>
  * ```
  */
-const Paper = /*#__PURE__*/ React.memo(({ children, elevation = 1, bordered = false, padding = 'md', nestLevel = 0, expand = false, customRadius, className, testId, css, style, ref, ...htmlProps }) => {
-    return (jsx(StyledPaper, { ref: ref, className: className, "$elevation": elevation, "$bordered": bordered, "$padding": padding, "$nestLevel": nestLevel, "$expand": expand, "$customRadius": customRadius, "$css": css, "data-testid": testId, style: style, ...htmlProps, children: children }));
+const Paper = /*#__PURE__*/ React.memo(({ children, elevation = 1, bordered = false, padding = 'md', nestLevel = 0, expand = false, customRadius, className, testId, style, ref, ...htmlProps }) => {
+    const customRadiusStyle = customRadius !== undefined
+        ? {
+            borderRadius: typeof customRadius === 'number'
+                ? `${customRadius}px`
+                : customRadius,
+        }
+        : undefined;
+    return (jsx("div", { ref: ref, className: cx(paperRecipe({
+            elevation,
+            bordered: bordered || undefined,
+            padding,
+            nestLevel,
+            expand: expand || undefined,
+        }), className), "data-testid": testId, style: { ...customRadiusStyle, ...style }, ...htmlProps, children: children }));
 });
 Paper.displayName = 'Paper';
 

package/dist/esm/components/primitives/Paper/Paper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paper.js","sources":["../../../../../../src/components/primitives/Paper/Paper.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Paper.js","sources":["../../../../../../src/components/primitives/Paper/Paper.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAqGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CG;;AAgBC;AAEI;AACI;;AAGI;AACL;;;;;;;;;AAuBT;AAGF;;"}

package/dist/esm/components/primitives/Popover/Popover.css.js

@@ -0,0 +1,8 @@
+import './../../../assets/src/components/primitives/Popover/Popover.css.ts.vanilla-DW6aAr57.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var closeButtonStyle = 'Popover_closeButtonStyle__j7aln17';
+var contentPanelRecipe = createRuntimeFn({defaultClassName:'Popover_contentPanelRecipe__j7aln10',variantClassNames:{padding:{none:'Popover_contentPanelRecipe_padding_none__j7aln11',sm:'Popover_contentPanelRecipe_padding_sm__j7aln12',md:'Popover_contentPanelRecipe_padding_md__j7aln13',lg:'Popover_contentPanelRecipe_padding_lg__j7aln14'},visible:{true:'Popover_contentPanelRecipe_visible_true__j7aln15',false:'Popover_contentPanelRecipe_visible_false__j7aln16'}},defaultVariants:{padding:'md',visible:false},compoundVariants:[]});
+
+export { closeButtonStyle, contentPanelRecipe };
+//# sourceMappingURL=Popover.css.js.map

package/dist/esm/components/primitives/Popover/Popover.css.js.map

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

package/dist/esm/components/primitives/Popover/Popover.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useId, useRef, useState, useCallback, useMemo, createContext, useContext } from 'react';
 import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useInteractions } from '@floating-ui/react';

package/dist/esm/components/primitives/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../../../../src/components/primitives/Popover/Popover.tsx"],"sourcesContent":[null],"names":["offset","offsetMiddleware","_jsx"],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../../../../../src/components/primitives/Popover/Popover.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAwBA;AAEA;;AAKE;;AAEE;;AAIF;AACF;AAEA;AAEA;;;;;;;;;;;;;;;;;;AAkBG;;AAcD;AACA;AACA;;AAGA;;AAGA;;;;AAKI;AACF;AAIF;;AAEA;AAEA;;;AAGI;;AAEJ;AAEA;;AAEI;;;AAEA;;;;;AAMF;AACA;AACA;AACA;AACA;AACD;;AAGD;AACA;AACE;AACA;AACD;AAED;;;AAGC;AAED;;AAGI;AACA;;;;;;;;AAQA;;AAEA;;AAEA;;;AAGD;;;;;;;;;;;;;;;AAgBA;AAGH;AAKF;AAEA;;"}