@aurora-ds/components 1.1.5 → 1.1.7

package/dist/cjs/index.js

@@ -181,24 +181,32 @@ const skeletonShimmerAnimation = theme.keyframes({
     '100%': { backgroundPosition: '0% 50%' },
 });
 
-const APPEARANCES = ['contained', 'outlined', 'text'];
-const buildActionButtonVariantBase = (theme) => ({
-    position: 'relative',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    boxSizing: 'border-box',
-    border: '1px solid transparent',
-    borderRadius: theme.radius.md,
-    fontFamily: 'inherit',
-    userSelect: 'none',
-    cursor: 'pointer',
-    outline: 'none',
-    transition: `background-color ${theme.transition.fast}, border-color ${theme.transition.fast}, color ${theme.transition.fast}, box-shadow ${theme.transition.fast}`,
-    ':focus-visible': { boxShadow: theme.shadows.focus },
-    ':disabled': { cursor: 'not-allowed', opacity: theme.opacity.high, boxShadow: 'none' },
-});
-const buildActionButtonCompoundVariants = (theme) => {
+/** Default duration in milliseconds for mount/unmount transition animations. */
+const DEFAULT_TRANSITION_DURATION_MS = 250;
+const DEFAULT_BUTTON_HEIGHT = 40;
+const DEFAULT_DRAWER_ITEM_SIZE = 40;
+/** Drawer widths (px) — single source of truth for both the Drawer and its items. */
+const EXPANDED_DRAWER_WIDTH = 240;
+const COLLAPSED_DRAWER_WIDTH = 58;
+/**
+ * Horizontal padding (px) applied by `Drawer.Body` on EACH side of its items
+ * (Box `px="sm"` → theme.spacing.sm = 0.5rem = 8px).
+ */
+const DRAWER_BODY_HORIZONTAL_PADDING = 8;
+/**
+ * DrawerItem widths (px), always derived from the drawer width minus the body
+ * horizontal padding. Using explicit widths (instead of `width: 100%`) lets the
+ * item animate its own width in sync with the drawer for a smooth transition.
+ */
+const EXPANDED_DRAWER_ITEM_WIDTH = EXPANDED_DRAWER_WIDTH - DRAWER_BODY_HORIZONTAL_PADDING * 2; // 264
+const COLLAPSED_DRAWER_ITEM_WIDTH = COLLAPSED_DRAWER_WIDTH - DRAWER_BODY_HORIZONTAL_PADDING * 2; // 44
+
+/**
+ * Returns the complete root styles for an action button (base + color/variant),
+ * all in one object so CSS transitions work correctly.
+ * Size-specific styles (height, padding, fontSize) are added by the caller.
+ */
+const buildActionButtonRootStyle = (theme, variant, color) => {
     const c = theme.colors;
     const intents = {
         primary: {
@@ -237,57 +245,60 @@ const buildActionButtonCompoundVariants = (theme) => {
             fg: c.errorMain, fgHover: c.errorHover, border: c.errorMain,
         },
     };
-    const appearanceStyles = (intent, appearance) => {
-        if (appearance === 'contained') {
-            return {
-                backgroundColor: intent.main,
-                borderColor: intent.main,
-                color: intent.on,
-                boxShadow: theme.shadows.xs,
-                ':hover:not(:disabled)': { backgroundColor: intent.hover, borderColor: intent.hover, boxShadow: theme.shadows.sm },
-                ':active:not(:disabled)': { backgroundColor: intent.active, borderColor: intent.active, boxShadow: theme.shadows.none },
-            };
+    const intent = intents[color];
+    const colorVariantStyles = variant === 'contained'
+        ? {
+            backgroundColor: intent.main,
+            borderColor: intent.main,
+            color: intent.on,
+            boxShadow: theme.shadows.xs,
+            ':hover:not(:disabled)': { backgroundColor: intent.hover, borderColor: intent.hover, boxShadow: theme.shadows.sm },
+            ':active:not(:disabled)': { backgroundColor: intent.active, borderColor: intent.active, boxShadow: theme.shadows.none },
         }
-        if (appearance === 'outlined') {
-            return {
+        : variant === 'outlined'
+            ? {
                 backgroundColor: 'transparent',
                 borderColor: intent.border,
                 color: intent.fg,
                 ':hover:not(:disabled)': { backgroundColor: intent.subtleHover, color: intent.fgHover },
                 ':active:not(:disabled)': { backgroundColor: intent.subtleActive, borderColor: intent.active, color: intent.active },
+            }
+            : {
+                backgroundColor: 'transparent',
+                borderColor: 'transparent',
+                color: intent.fg,
+                ':hover:not(:disabled)': { backgroundColor: intent.subtleHover, color: intent.fgHover },
+                ':active:not(:disabled)': { backgroundColor: intent.subtleActive, color: intent.active },
             };
-        }
-        return {
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
-            color: intent.fg,
-            ':hover:not(:disabled)': { backgroundColor: intent.subtleHover, color: intent.fgHover },
-            ':active:not(:disabled)': { backgroundColor: intent.subtleActive, color: intent.active },
-        };
+    return {
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+        border: '1px solid transparent',
+        borderRadius: theme.radius.md,
+        fontFamily: 'inherit',
+        userSelect: 'none',
+        height: DEFAULT_BUTTON_HEIGHT,
+        cursor: 'pointer',
+        outline: 'none',
+        transition: `background-color ${theme.transition.normal}, border-color ${theme.transition.normal}, color ${theme.transition.normal}, box-shadow ${theme.transition.normal}`,
+        ...colorVariantStyles,
+        ':focus-visible': { boxShadow: theme.shadows.focus },
+        ':disabled': { cursor: 'not-allowed', opacity: theme.opacity.high, boxShadow: 'none' },
     };
-    return Object.keys(intents).flatMap((color) => APPEARANCES.map((appearance) => ({
-        color,
-        variant: appearance,
-        styles: appearanceStyles(intents[color], appearance),
-    })));
 };
 
-const BUTTON_VARIANTS = theme.createVariants((theme) => ({
-    base: buildActionButtonVariantBase(theme),
-    variants: {
-        size: {
-            sm: { height: '2rem', padding: `0 ${theme.spacing.sm}`, fontSize: theme.fontSize.xs },
-            md: { height: '2.5rem', padding: `0 ${theme.spacing.md}`, fontSize: theme.fontSize.sm },
-            lg: { height: '3rem', padding: `0 ${theme.spacing.lg}`, fontSize: theme.fontSize.md },
-        },
-        // Appearance/color styling is provided entirely by compoundVariants.
-        variant: { contained: {}, outlined: {}, text: {} },
-        color: { primary: {}, secondary: {}, neutral: {}, info: {}, success: {}, warning: {}, error: {} },
-    },
-    defaultVariants: { size: 'md', variant: 'contained', color: 'primary' },
-    compoundVariants: buildActionButtonCompoundVariants(theme),
-}), { id: 'button' });
-const BUTTON_STYLES = theme.createStyles({
+const BUTTON_STYLES = theme.createStyles((theme) => ({
+    root: ({ variant, color, size }) => ({
+        ...buildActionButtonRootStyle(theme, variant, color),
+        ...(size === 'sm'
+            ? { height: '2rem', padding: `0 ${theme.spacing.sm}`, fontSize: theme.fontSize.xs }
+            : size === 'lg'
+                ? { height: '3rem', padding: `0 ${theme.spacing.lg}`, fontSize: theme.fontSize.md }
+                : { height: '2.5rem', padding: `0 ${theme.spacing.md}`, fontSize: theme.fontSize.sm }),
+    }),
     /** Inner wrapper holding icons + label, centered by the button. */
     content: {
         display: 'inline-flex',
@@ -310,7 +321,14 @@ const BUTTON_STYLES = theme.createStyles({
         animation: `${spinAnimation} 0.75s linear infinite`,
         '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
     },
-}, { id: 'button-extra' });
+}), { id: 'button' });
+// Pre-generate CSS for all variant/color/size combinations at module load.
+// This ensures the CSS is already in the stylesheet before the first user interaction,
+// preventing the "first click is instant" issue caused by lazy CSS injection.
+const BUTTON_VARIANT_VALUES = ['contained', 'outlined', 'text'];
+const BUTTON_COLOR_VALUES = ['primary', 'secondary', 'neutral', 'info', 'success', 'warning', 'error'];
+const BUTTON_SIZE_VALUES = ['sm', 'md', 'lg'];
+BUTTON_VARIANT_VALUES.forEach(variant => BUTTON_COLOR_VALUES.forEach(color => BUTTON_SIZE_VALUES.forEach(size => BUTTON_STYLES.root({ variant, color, size }))));
 
 const ICON_STYLES = theme.createStyles((theme) => ({
     root: ({ size, strokeColor, fill, backgroundColor, padding, borderRadius }) => ({
@@ -579,7 +597,7 @@ const ICON_SIZE$2 = {
 const Button = ({ ref, variant = 'contained', color = 'primary', size = 'md', width, flexGrow, flexShrink, isLoading = false, startIcon: StartIcon, endIcon: EndIcon, label, className, type = 'button', disabled, style, ...rest }) => {
     const isDisabled = disabled || isLoading;
     const iconSize = ICON_SIZE$2[size];
-    const rootClassName = BUTTON_VARIANTS({ variant, color, size }, className);
+    const rootClassName = theme.cx(BUTTON_STYLES.root({ variant, color, size }), className);
     const mergedStyle = {
         ...style,
         ...(width !== undefined ? { width } : {}),
@@ -590,21 +608,15 @@ const Button = ({ ref, variant = 'contained', color = 'primary', size = 'md', wi
 };
 Button.displayName = 'Button';
 
-const ICON_BUTTON_VARIANTS = theme.createVariants((theme) => ({
-    base: buildActionButtonVariantBase(theme),
-    variants: {
-        size: {
-            sm: { width: '2rem', height: '2rem', padding: '0' },
-            md: { width: '2.5rem', height: '2.5rem', padding: '0' },
-            lg: { width: '3rem', height: '3rem', padding: '0' },
-        },
-        variant: { contained: {}, outlined: {}, text: {} },
-        color: { primary: {}, secondary: {}, neutral: {}, info: {}, success: {}, warning: {}, error: {} },
-    },
-    defaultVariants: { size: 'md', variant: 'contained', color: 'primary' },
-    compoundVariants: buildActionButtonCompoundVariants(theme),
-}), { id: 'icon-button' });
-const ICON_BUTTON_STYLES = theme.createStyles({
+const ICON_BUTTON_STYLES = theme.createStyles((theme) => ({
+    root: ({ variant, color, size }) => ({
+        ...buildActionButtonRootStyle(theme, variant, color),
+        ...(size === 'sm'
+            ? { width: '2rem', height: '2rem', padding: '0' }
+            : size === 'lg'
+                ? { width: '3rem', height: '3rem', padding: '0' }
+                : { width: '2.5rem', height: '2.5rem', padding: '0' }),
+    }),
     /** Spinning animation applied to the SpinnerIcon. */
     spinnerIcon: {
         animation: `${spinAnimation} 0.75s linear infinite`,
@@ -620,7 +632,11 @@ const ICON_BUTTON_STYLES = theme.createStyles({
         alignItems: 'center',
         justifyContent: 'center',
     },
-}, { id: 'icon-button-extra' });
+}), { id: 'icon-button' });
+const ICON_BUTTON_VARIANT_VALUES = ['contained', 'outlined', 'text'];
+const ICON_BUTTON_COLOR_VALUES = ['primary', 'secondary', 'neutral', 'info', 'success', 'warning', 'error'];
+const ICON_BUTTON_SIZE_VALUES = ['sm', 'md', 'lg'];
+ICON_BUTTON_VARIANT_VALUES.forEach(variant => ICON_BUTTON_COLOR_VALUES.forEach(color => ICON_BUTTON_SIZE_VALUES.forEach(size => ICON_BUTTON_STYLES.root({ variant, color, size }))));
 
 /** Maps the icon-button size to an Icon size token. */
 const ICON_SIZE$1 = {
@@ -639,7 +655,7 @@ const ICON_SIZE$1 = {
 const IconButton = ({ ref, icon: IconComponent, ariaLabel, variant = 'contained', color = 'primary', size = 'md', isLoading = false, className, type = 'button', disabled, ...rest }) => {
     const isDisabled = disabled || isLoading;
     const iconSize = ICON_SIZE$1[size];
-    const rootClassName = ICON_BUTTON_VARIANTS({ variant, color, size }, className);
+    const rootClassName = theme.cx(ICON_BUTTON_STYLES.root({ variant, color, size }), className);
     return (jsxRuntime.jsxs("button", { ref: ref, type: type, className: rootClassName, disabled: isDisabled, "aria-label": ariaLabel, "aria-busy": isLoading || undefined, ...rest, children: [isLoading && (jsxRuntime.jsx("span", { className: ICON_BUTTON_STYLES.spinnerWrap, children: jsxRuntime.jsx(Icon, { icon: SpinnerIcon, size: iconSize, className: ICON_BUTTON_STYLES.spinnerIcon }) })), jsxRuntime.jsx(Icon, { icon: IconComponent, size: iconSize, className: theme.cx(isLoading && ICON_BUTTON_STYLES.iconHidden) })] }));
 };
 IconButton.displayName = 'IconButton';
@@ -855,7 +871,7 @@ const BADGE_VARIANTS = theme.createVariants((theme) => ({
         size: {
             sm: {
                 height: '1.25rem',
-                padding: `0.125rem ${theme.spacing['xs+']}`,
+                padding: `0.125rem ${theme.spacing.xsPlus}`,
                 fontSize: theme.fontSize['2xs'],
             },
             md: {
@@ -1256,6 +1272,12 @@ const SKELETON_VARIANTS = theme.createVariants((theme) => ({
 const Skeleton = ({ ref, variant = 'rectangular', animation = 'shimmer', width, height, className, style, ...rest }) => (jsxRuntime.jsx("span", { ref: ref, className: SKELETON_VARIANTS({ variant, animation: animation === false ? 'none' : animation }, className), style: { width, height, ...style }, "aria-hidden": true, ...rest }));
 Skeleton.displayName = 'Skeleton';
 
+const FORM_STYLES = theme.createStyles(() => ({
+    root: {
+        display: 'contents',
+    },
+}));
+
 /**
  * Thin wrapper around `<form>`. Prevents the default browser submit and
  * delegates to the `onSubmit` callback.
@@ -1271,7 +1293,7 @@ const Form = ({ children, onSubmit, 'aria-label': ariaLabel, 'aria-labelledby':
         event.preventDefault();
         onSubmit(event);
     };
-    return (jsxRuntime.jsx("form", { onSubmit: handleSubmit, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, noValidate: true, children: children }));
+    return (jsxRuntime.jsx("form", { onSubmit: handleSubmit, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: FORM_STYLES.root, noValidate: true, children: children }));
 };
 Form.displayName = 'Form';
 
@@ -1579,6 +1601,18 @@ Box.displayName = 'Box';
 const Stack = ({ flexDirection = 'row', display = 'flex', gap = 'sm', ...rest }) => (jsxRuntime.jsx(Box, { display: display, flexDirection: flexDirection, gap: gap, ...rest }));
 Stack.displayName = 'Stack';
 
+const HELPER_COLOR_MAP = {
+    default: 'textSecondary',
+    error: 'errorHover',
+    success: 'successHover',
+    warning: 'warningHover',
+};
+const FormHelperText = ({ id, status = 'default', ariaLive, className, children, }) => {
+    const resolvedAriaLive = ariaLive ?? (status === 'error' ? 'assertive' : 'polite');
+    return (jsxRuntime.jsx(Text, { id: id, variant: 'span', fontSize: 'xs', color: HELPER_COLOR_MAP[status], "aria-live": resolvedAriaLive, className: className, children: children }));
+};
+FormHelperText.displayName = 'FormHelperText';
+
 const TEXTFIELD_WRAPPER_VARIANTS = theme.createVariants((theme) => {
     const c = theme.colors;
     return {
@@ -1701,18 +1735,11 @@ const ICON_BUTTON_SIZE_MAP = {
     md: 'sm',
     lg: 'md',
 };
-/** Maps status to a theme color token used for the helper text. */
-const HELPER_COLOR_MAP$1 = {
-    default: 'textSecondary',
-    error: 'errorHover',
-    success: 'successHover',
-    warning: 'warningHover',
-};
 /**
  * Business logic for the TextField component: id resolution, ref merging,
  * password visibility toggling and size/status derived tokens.
  */
-const useTextField = ({ id, ref, type, size, status, endAction, }) => {
+const useTextField = ({ id, ref, type, size, endAction, }) => {
     const generatedId = React.useId();
     const fieldId = id ?? generatedId;
     const helperId = `${fieldId}-helper`;
@@ -1734,7 +1761,6 @@ const useTextField = ({ id, ref, type, size, status, endAction, }) => {
         resolvedType,
         iconSize: ICON_SIZE_MAP$1[size],
         iconButtonSize: ICON_BUTTON_SIZE_MAP[size],
-        helperColor: HELPER_COLOR_MAP$1[status],
         hasEndSection: endAction !== undefined || isPassword,
         focusInput,
     };
@@ -1752,8 +1778,8 @@ const useTextField = ({ id, ref, type, size, status, endAction, }) => {
  * @example <TextField label="Search" startIcon={SearchIcon} endAction={<ClearButton />} />
  */
 const TextField = ({ ref, label, helperText, size = 'md', status = 'default', startIcon: StartIcon, endAction, type, id, disabled, required, ...rest }) => {
-    const { fieldId, helperId, mergedRef, isPassword, showPassword, togglePassword, resolvedType, iconSize, iconButtonSize, helperColor, hasEndSection, focusInput, } = useTextField({ id, ref, type, size, status, endAction });
-    return (jsxRuntime.jsxs(Stack, { flexDirection: 'column', gap: 'xs', children: [label !== undefined && (jsxRuntime.jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', htmlFor: fieldId, children: [label, required && (jsxRuntime.jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxRuntime.jsxs("div", { className: TEXTFIELD_WRAPPER_VARIANTS({ size, status }), "data-disabled": disabled || undefined, children: [StartIcon && (jsxRuntime.jsx("span", { className: TEXTFIELD_STYLES.startIconWrap, onClick: focusInput, children: jsxRuntime.jsx(Icon, { icon: StartIcon, size: iconSize, strokeColor: 'textSecondary' }) })), jsxRuntime.jsx("input", { ref: mergedRef, id: fieldId, type: resolvedType, disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, className: TEXTFIELD_STYLES.input, ...rest }), hasEndSection && (jsxRuntime.jsxs("span", { className: TEXTFIELD_STYLES.endActionWrap, children: [endAction, isPassword && (jsxRuntime.jsx(IconButton, { icon: showPassword ? EyeSlashIcon : EyeIcon, ariaLabel: showPassword ? 'Hide password' : 'Show password', variant: 'text', color: 'neutral', size: iconButtonSize, type: 'button', tabIndex: -1, onClick: togglePassword }))] }))] }), helperText !== undefined && (jsxRuntime.jsx(Text, { id: helperId, variant: 'span', fontSize: 'xs', color: helperColor, children: helperText }))] }));
+    const { fieldId, helperId, mergedRef, isPassword, showPassword, togglePassword, resolvedType, iconSize, iconButtonSize, hasEndSection, focusInput, } = useTextField({ id, ref, type, size, endAction });
+    return (jsxRuntime.jsxs(Stack, { flexDirection: 'column', gap: 'xs', children: [label !== undefined && (jsxRuntime.jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', htmlFor: fieldId, children: [label, required && (jsxRuntime.jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxRuntime.jsxs("div", { className: TEXTFIELD_WRAPPER_VARIANTS({ size, status }), "data-disabled": disabled || undefined, children: [StartIcon && (jsxRuntime.jsx("span", { className: TEXTFIELD_STYLES.startIconWrap, onClick: focusInput, children: jsxRuntime.jsx(Icon, { icon: StartIcon, size: iconSize, strokeColor: 'textSecondary' }) })), jsxRuntime.jsx("input", { ref: mergedRef, id: fieldId, type: resolvedType, disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, className: TEXTFIELD_STYLES.input, ...rest }), hasEndSection && (jsxRuntime.jsxs("span", { className: TEXTFIELD_STYLES.endActionWrap, children: [endAction, isPassword && (jsxRuntime.jsx(IconButton, { icon: showPassword ? EyeSlashIcon : EyeIcon, ariaLabel: showPassword ? 'Hide password' : 'Show password', variant: 'text', color: 'neutral', size: iconButtonSize, type: 'button', tabIndex: -1, onClick: togglePassword }))] }))] }), helperText !== undefined && (jsxRuntime.jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
 };
 TextField.displayName = 'TextField';
 
@@ -2189,21 +2215,15 @@ const SelectTrigger = ({ ref, size = 'md', status = 'default', open, hasValue, s
 };
 SelectTrigger.displayName = 'SelectTrigger';
 
-/** Maps status to a theme color token used for the helper text. */
-const HELPER_COLOR_MAP = {
-    default: 'textSecondary',
-    error: 'errorHover',
-    success: 'successHover',
-    warning: 'warningHover',
-};
 /**
  * Business logic for the Select component: id resolution, ref merging,
  * controlled/uncontrolled value handling, open state, option grouping and
  * focus restoration to the trigger when the menu closes.
  */
-const useSelect = ({ id, ref, value, defaultValue, onChange, options, status, disabled, }) => {
+const useSelect = ({ id, ref, value, defaultValue, onChange, options, disabled, }) => {
     const generatedId = React.useId();
     const fieldId = id ?? generatedId;
+    const helperId = `${fieldId}-helper`;
     const menuId = `${fieldId}-menu`;
     const triggerRef = React.useRef(null);
     const mergedRef = useMergedRefs(ref, triggerRef);
@@ -2248,6 +2268,7 @@ const useSelect = ({ id, ref, value, defaultValue, onChange, options, status, di
     const close = React.useCallback(() => setOpen(false), []);
     return {
         fieldId,
+        helperId,
         menuId,
         triggerRef,
         mergedRef,
@@ -2258,19 +2279,187 @@ const useSelect = ({ id, ref, value, defaultValue, onChange, options, status, di
         selectedOption,
         groupedOptions,
         handleSelect,
-        helperColor: HELPER_COLOR_MAP[status],
     };
 };
 
 const Select = ({ ref, value, defaultValue, onChange, options, label, helperText, placeholder, size = 'md', status = 'default', disabled, required, width, id, }) => {
-    const { fieldId, menuId, triggerRef, mergedRef, open, toggle, close, currentValue, selectedOption, groupedOptions, handleSelect, helperColor, } = useSelect({ id, ref, value, defaultValue, onChange, options, status, disabled });
-    return (jsxRuntime.jsxs(Stack, { flexDirection: 'column', gap: 'xs', style: { width: width ?? '100%' }, children: [label !== undefined && (jsxRuntime.jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', htmlFor: fieldId, children: [label, required && (jsxRuntime.jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxRuntime.jsx(SelectTrigger, { ref: mergedRef, id: fieldId, size: size, status: status, open: open, hasValue: selectedOption !== undefined, disabled: disabled, required: required, "aria-haspopup": 'listbox', "aria-expanded": open, "aria-controls": menuId, "aria-invalid": status === 'error' || undefined, onClick: toggle, children: selectedOption !== undefined ? selectedOption.label : placeholder }), jsxRuntime.jsx(Menu, { open: open, onClose: close, anchorEl: triggerRef.current, id: menuId, children: Array.from(groupedOptions.entries()).map(([groupKey, groupOpts], groupIndex) => {
+    const { fieldId, helperId, menuId, triggerRef, mergedRef, open, toggle, close, currentValue, selectedOption, groupedOptions, handleSelect, } = useSelect({ id, ref, value, defaultValue, onChange, options, disabled });
+    return (jsxRuntime.jsxs(Stack, { flexDirection: 'column', gap: 'xs', style: { width: width ?? '100%' }, children: [label !== undefined && (jsxRuntime.jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', htmlFor: fieldId, children: [label, required && (jsxRuntime.jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsxRuntime.jsx(SelectTrigger, { ref: mergedRef, id: fieldId, size: size, status: status, open: open, hasValue: selectedOption !== undefined, disabled: disabled, required: required, "aria-haspopup": 'listbox', "aria-expanded": open, "aria-controls": menuId, "aria-invalid": status === 'error' || undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, onClick: toggle, children: selectedOption !== undefined ? selectedOption.label : placeholder }), jsxRuntime.jsx(Menu, { open: open, onClose: close, anchorEl: triggerRef.current, id: menuId, children: Array.from(groupedOptions.entries()).map(([groupKey, groupOpts], groupIndex) => {
                     const items = groupOpts.map((opt) => (jsxRuntime.jsx(Menu.Item, { label: opt.label, icon: opt.icon, selected: opt.value === currentValue, disabled: opt.disabled, onClick: () => handleSelect(opt.value) }, opt.value)));
                     return groupKey !== undefined ? (jsxRuntime.jsx(Menu.Group, { label: groupKey, divider: groupIndex > 0, children: items }, groupKey)) : (jsxRuntime.jsx(Menu.Group, { divider: groupIndex > 0, children: items }, '__ungrouped'));
-                }) }), helperText !== undefined && (jsxRuntime.jsx(Text, { variant: 'span', fontSize: 'xs', color: helperColor, children: helperText }))] }));
+                }) }), helperText !== undefined && (jsxRuntime.jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
 };
 Select.displayName = 'Select';
 
+const CHECKBOX_ROOT_VARIANTS = theme.createVariants((theme) => ({
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        cursor: 'pointer',
+        userSelect: 'none',
+    },
+    variants: {
+        disabled: {
+            true: {
+                cursor: 'not-allowed',
+                opacity: theme.opacity.high,
+            },
+            false: {},
+        },
+    },
+    defaultVariants: {
+        disabled: 'false',
+    },
+}), { id: 'checkbox-root' });
+const CHECKBOX_INPUT_VARIANTS = theme.createVariants((theme) => {
+    const c = theme.colors;
+    return {
+        base: {
+            appearance: 'none',
+            position: 'relative',
+            margin: 0,
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderColor: c.borderStrong,
+            borderRadius: theme.radius.sm,
+            backgroundColor: c.surfacePaper,
+            transition: `border-color ${theme.transition.fast}, background-color ${theme.transition.fast}`,
+            cursor: 'pointer',
+            '&:focus-visible': {
+                outline: '2px solid transparent',
+                boxShadow: `0 0 0 2px ${c.primarySubtleActive}`,
+            },
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translate(-50%, -56%) rotate(45deg)',
+                width: '0.25rem',
+                height: '0.5rem',
+                borderRight: `2px solid ${c.textInverse}`,
+                borderBottom: `2px solid ${c.textInverse}`,
+                opacity: 0,
+            },
+            '&:checked::after': {
+                opacity: 1,
+            },
+            '&:indeterminate::after': {
+                width: '0.5rem',
+                height: '0',
+                borderRight: '0',
+                borderBottom: `2px solid ${c.textInverse}`,
+                transform: 'translate(-50%, -50%)',
+                opacity: 1,
+            },
+        },
+        variants: {
+            size: {
+                sm: {
+                    width: '1rem',
+                    height: '1rem',
+                },
+                md: {
+                    width: '1.125rem',
+                    height: '1.125rem',
+                },
+                lg: {
+                    width: '1.25rem',
+                    height: '1.25rem',
+                },
+            },
+            status: {
+                default: {
+                    '&:checked, &:indeterminate': {
+                        borderColor: c.primaryMain,
+                        backgroundColor: c.primaryMain,
+                    },
+                },
+                error: {
+                    borderColor: c.errorMain,
+                    '&:checked, &:indeterminate': {
+                        borderColor: c.errorMain,
+                        backgroundColor: c.errorMain,
+                    },
+                },
+                success: {
+                    borderColor: c.successMain,
+                    '&:checked, &:indeterminate': {
+                        borderColor: c.successMain,
+                        backgroundColor: c.successMain,
+                    },
+                },
+                warning: {
+                    borderColor: c.warningMain,
+                    '&:checked, &:indeterminate': {
+                        borderColor: c.warningMain,
+                        backgroundColor: c.warningMain,
+                    },
+                },
+            },
+            disabled: {
+                true: {
+                    cursor: 'not-allowed',
+                    backgroundColor: c.disabledMain,
+                    borderColor: c.disabledMain,
+                    '&:checked, &:indeterminate': {
+                        backgroundColor: c.disabledText,
+                        borderColor: c.disabledText,
+                    },
+                },
+                false: {},
+            },
+        },
+        defaultVariants: {
+            size: 'md',
+            status: 'default',
+            disabled: 'false',
+        },
+    };
+}, { id: 'checkbox-input' });
+const CHECKBOX_STYLES = theme.createStyles((theme) => ({
+    wrapper: {
+        display: 'inline-flex',
+        flexDirection: 'column',
+        gap: theme.spacing.xs,
+    },
+    helper: {
+        marginLeft: `calc(1.125rem + ${theme.spacing.sm})`,
+    },
+}), { id: 'checkbox-extra' });
+
+/** Handles id generation, ref merging and native indeterminate state sync. */
+const useCheckbox = ({ id, ref, indeterminate = false }) => {
+    const generatedId = React.useId();
+    const checkboxId = id ?? generatedId;
+    const helperId = `${checkboxId}-helper`;
+    const inputRef = React.useRef(null);
+    const mergedRef = useMergedRefs(ref, inputRef);
+    React.useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    return {
+        checkboxId,
+        helperId,
+        mergedRef,
+        inputRef,
+    };
+};
+
+const Checkbox = ({ ref, label, helperText, size = 'md', status = 'default', indeterminate = false, error, id, disabled, required, ...rest }) => {
+    const resolvedStatus = error ? 'error' : status;
+    const { checkboxId, helperId, mergedRef } = useCheckbox({ id, ref, indeterminate });
+    return (jsxRuntime.jsxs("div", { className: CHECKBOX_STYLES.wrapper, children: [jsxRuntime.jsxs("label", { htmlFor: checkboxId, className: CHECKBOX_ROOT_VARIANTS({ disabled: disabled ? 'true' : 'false' }), children: [jsxRuntime.jsx("input", { ref: mergedRef, id: checkboxId, type: 'checkbox', disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": resolvedStatus === 'error' || undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, className: CHECKBOX_INPUT_VARIANTS({
+                            size,
+                            status: resolvedStatus,
+                            disabled: disabled ? 'true' : 'false',
+                        }), ...rest }), label !== undefined && (jsxRuntime.jsx(Text, { variant: 'span', fontSize: size === 'lg' ? 'md' : 'sm', color: disabled ? 'textDisabled' : 'textSecondary', children: label }))] }), helperText !== undefined && (jsxRuntime.jsx(FormHelperText, { id: helperId, status: resolvedStatus, className: CHECKBOX_STYLES.helper, children: helperText }))] }));
+};
+Checkbox.displayName = 'Checkbox';
+
 const CARD_VARIANTS = theme.createVariants((theme) => ({
     base: {
         boxSizing: 'border-box',
@@ -2354,6 +2543,361 @@ const Grid = ({ display = 'grid', columns, rows, autoFlow, autoColumns, autoRows
 };
 Grid.displayName = 'Grid';
 
+const DrawerContext = React.createContext({
+    isExpanded: true,
+});
+const useDrawerContext = () => React.useContext(DrawerContext);
+
+const TRANSITION$2 = `${DEFAULT_TRANSITION_DURATION_MS}ms ease`;
+const DRAWER_STYLES = theme.createStyles((theme) => ({
+    root: ({ isExpanded }) => ({
+        display: 'flex',
+        flexDirection: 'column',
+        width: isExpanded ? EXPANDED_DRAWER_WIDTH : COLLAPSED_DRAWER_WIDTH,
+        transition: `width ${theme.transition.slow}`,
+        overflow: 'hidden',
+        backgroundColor: theme.colors.surfacePaper,
+        borderRight: `1px solid ${theme.colors.borderMain}`,
+        boxSizing: 'border-box',
+        flexShrink: 0,
+    }),
+    /** Temporary variant: slides in from the left as a fixed portal overlay. */
+    temporaryPanel: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        width: EXPANDED_DRAWER_WIDTH,
+        zIndex: theme.zIndex.modal,
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: theme.colors.surfacePaper,
+        borderRight: `1px solid ${theme.colors.borderMain}`,
+        boxSizing: 'border-box',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        willChange: 'transform',
+        transform: 'translateX(-100%)',
+        transition: `transform ${TRANSITION$2}`,
+        boxShadow: theme.shadows.xl,
+    },
+    temporaryPanelVisible: {
+        transform: 'translateX(0)',
+    },
+}));
+
+/**
+ * Responsive breakpoints (min-width, mobile-first).
+ * Keep in sync with themeBreakpoints.
+ */
+const BREAKPOINTS = {
+    sm: 640};
+/** Max-width media query strings (max = breakpoint - 1px). */
+const MEDIA_MAX = {
+    sm: `max-width: ${BREAKPOINTS.sm - 1}px`};
+
+const MOBILE_MQ = `(max-width: ${BREAKPOINTS.sm - 1}px)`;
+/**
+ * Resolves the effective drawer variant based on the explicit `variant` prop
+ * and the current viewport width.
+ *
+ * - If `variant` is explicitly provided (`'permanent'` or `'temporary'`), returns it as-is.
+ * - Otherwise, auto-detects: `'temporary'` on mobile (< sm breakpoint), `'permanent'` on desktop.
+ *
+ * Reacts to viewport changes (window resize) so switching between mobile and desktop
+ * automatically updates the variant without requiring a page reload.
+ */
+const useDrawerVariant = (variant) => {
+    const [isMobile, setIsMobile] = React.useState(() => {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        return window.matchMedia(MOBILE_MQ).matches;
+    });
+    React.useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const mq = window.matchMedia(MOBILE_MQ);
+        const handler = (e) => setIsMobile(e.matches);
+        mq.addEventListener('change', handler);
+        return () => mq.removeEventListener('change', handler);
+    }, []);
+    if (variant !== undefined) {
+        return variant;
+    }
+    return isMobile ? 'temporary' : 'permanent';
+};
+
+const TRANSITION$1 = `${DEFAULT_TRANSITION_DURATION_MS}ms ease`;
+const BACKDROP_STYLES = theme.createStyles((theme) => ({
+    root: {
+        position: 'fixed',
+        inset: 0,
+        zIndex: theme.zIndex.modal - 1,
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        transition: `background-color ${TRANSITION$1}`,
+    },
+    visible: {
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+}), { id: 'backdrop' });
+
+/**
+ * Semi-transparent full-screen overlay used to visually block page content
+ * while a modal element (dialog, temporary drawer…) is open.
+ *
+ * The `visible` prop drives the opacity transition: `false` = transparent,
+ * `true` = `rgba(0,0,0,0.5)`. Mount/unmount is managed by the parent.
+ *
+ * @example
+ * <Backdrop visible={isFadingIn} onClick={onClose} />
+ */
+const Backdrop = ({ visible, onClick }) => (jsxRuntime.jsx("div", { className: theme.cx(BACKDROP_STYLES.root, visible && BACKDROP_STYLES.visible), onClick: onClick, "aria-hidden": true }));
+Backdrop.displayName = 'Backdrop';
+
+/**
+ * Manages mount/unmount transitions with a two-phase approach (visible → fading-in).
+ *
+ * Opening sequence:
+ *   1. `useLayoutEffect` sets `isVisible=true` synchronously before the browser paints
+ *      → element is in the DOM at its initial hidden state on the very first frame.
+ *   2. Double `requestAnimationFrame` in `useEffect` waits for two rendered frames
+ *      before setting `isFadingIn=true`, guaranteeing the CSS transition always starts
+ *      from the painted hidden state (prevents flickering).
+ *
+ * Closing sequence:
+ *   `isFadingIn=false` → CSS transition plays → after `duration` ms → `isVisible=false`.
+ *
+ * @param isOpen - Whether the element should be shown.
+ * @param duration - Transition duration in milliseconds (defaults to `DEFAULT_TRANSITION_DURATION_MS`).
+ */
+const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS) => {
+    const [isVisible, setIsVisible] = React.useState(isOpen);
+    const [isFadingIn, setIsFadingIn] = React.useState(isOpen);
+    // Mount synchronously before paint so the element is in the DOM at opacity:0
+    // on the very first frame — no extra render cycle between null and the initial state.
+    React.useLayoutEffect(() => {
+        if (isOpen) {
+            setIsVisible(true);
+        }
+    }, [isOpen]);
+    React.useEffect(() => {
+        if (isOpen) {
+            // Double RAF: frame 1 → element rendered; frame 2 → element painted at hidden
+            // state → THEN trigger the CSS transition.
+            let raf2;
+            const raf1 = requestAnimationFrame(() => {
+                raf2 = requestAnimationFrame(() => setIsFadingIn(true));
+            });
+            return () => {
+                cancelAnimationFrame(raf1);
+                cancelAnimationFrame(raf2);
+            };
+        }
+        else {
+            setIsFadingIn(false);
+            const timeout = setTimeout(() => setIsVisible(false), duration);
+            return () => clearTimeout(timeout);
+        }
+    }, [isOpen, duration]);
+    return { isVisible, isFadingIn };
+};
+
+/**
+ * Locks scrolling on `document.body` while `active` is true.
+ *
+ * Preserves the current scroll position and keeps the scrollbar gutter
+ * (`overflow-y: scroll`) to avoid horizontal layout shift when the scrollbar
+ * disappears. The original styles and scroll position are restored on cleanup.
+ *
+ * @example useBodyScrollLock(isDialogOpen)
+ */
+const useBodyScrollLock = (active) => {
+    React.useEffect(() => {
+        if (!active) {
+            return;
+        }
+        const scrollY = window.scrollY;
+        const body = document.body;
+        body.style.position = 'fixed';
+        body.style.top = `-${scrollY}px`;
+        body.style.overflowY = 'scroll';
+        body.style.width = '100%';
+        return () => {
+            body.style.position = '';
+            body.style.top = '';
+            body.style.overflowY = '';
+            body.style.width = '';
+            window.scrollTo(0, scrollY);
+        };
+    }, [active]);
+};
+
+const DrawerHeader = ({ children, role, ariaLabel, ariaLabelledBy, ariaDescribedBy, ...rest }) => {
+    return (jsxRuntime.jsx(Box, { px: 'sm', py: 'xs', role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest, children: children }));
+};
+
+const DrawerBody = ({ children, role, ariaLabel, ariaLabelledBy, ariaDescribedBy, ...rest }) => {
+    return (jsxRuntime.jsx(Stack, { px: 'sm', py: 'xs', height: '100%', flexDirection: 'column', gap: 'none', role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, overflow: 'auto', ...rest, children: children }));
+};
+
+const DrawerFooter = ({ children, role, ariaLabel, ariaLabelledBy, ariaDescribedBy, ...rest }) => {
+    return (jsxRuntime.jsx(Box, { px: 'sm', py: 'xs', role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest, children: children }));
+};
+
+const DRAWER_ITEM_STYLES = theme.createStyles((theme) => ({
+    root: ({ selected, isExpanded }) => ({
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        width: isExpanded ? EXPANDED_DRAWER_ITEM_WIDTH : COLLAPSED_DRAWER_ITEM_WIDTH,
+        gap: theme.spacing.sm,
+        padding: `0 ${theme.spacing.smPlus}`,
+        border: '1px solid transparent',
+        borderRadius: theme.radius.md,
+        fontFamily: 'inherit',
+        fontSize: theme.fontSize.sm,
+        userSelect: 'none',
+        cursor: 'pointer',
+        outline: 'none',
+        textDecoration: 'none',
+        boxSizing: 'border-box',
+        transition: `width ${theme.transition.slow}, background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        height: DEFAULT_DRAWER_ITEM_SIZE,
+        ...(selected
+            ? {
+                backgroundColor: theme.colors.primarySubtle,
+                color: theme.colors.primaryMain,
+                ':hover': { backgroundColor: theme.colors.primarySubtleHover, color: theme.colors.primaryHover },
+                ':active': { backgroundColor: theme.colors.primarySubtleActive, color: theme.colors.primaryActive },
+            }
+            : {
+                backgroundColor: 'transparent',
+                color: theme.colors.defaultMain,
+                ':hover:not(:disabled)': { backgroundColor: theme.colors.defaultSubtleHover, color: theme.colors.defaultHover },
+                ':active:not(:disabled)': { backgroundColor: theme.colors.defaultSubtleActive, color: theme.colors.defaultActive },
+            }),
+        ':focus-visible': { boxShadow: theme.shadows.focus },
+        ':disabled': { cursor: 'not-allowed', opacity: theme.opacity.high },
+    }),
+    iconWrap: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+    },
+    labelWrapper: ({ isFadingIn }) => ({
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: theme.spacing.sm,
+        width: '100%',
+        justifyContent: 'space-between',
+        flex: 1,
+        overflow: 'hidden',
+        minWidth: 0,
+        opacity: isFadingIn ? 1 : 0,
+        transition: `opacity ${DEFAULT_TRANSITION_DURATION_MS}ms ease`,
+    }),
+    label: {
+        flex: 1,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontWeight: theme.fontWeight.medium,
+    },
+    endContent: {
+        display: 'flex',
+        alignItems: 'center',
+        flexShrink: 0,
+        marginLeft: 'auto',
+    },
+}));
+
+/**
+ * Navigation/action item for use inside Drawer.Body or Drawer.Footer.
+ *
+ * - In **expanded** mode: shows icon + label (fade-in) + optional end content.
+ * - In **collapsed** mode: shows only the icon; the label fades out before unmounting
+ *   and appears as a right-side tooltip on hover.
+ * - Renders as `<a>` when `href` is provided, otherwise as `<button>`.
+ * - The `selected` prop applies a primary-color highlight.
+ */
+const DrawerItem = ({ startIcon, label, selected = false, endContent, href, onClick, disabled = false, ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaControls, ariaExpanded, ariaHasPopup, ariaCurrent, }) => {
+    const { isExpanded } = useDrawerContext();
+    const { isVisible: isLabelVisible, isFadingIn: isLabelFadingIn } = useTransitionRender(isExpanded);
+    const rootClassName = DRAWER_ITEM_STYLES.root({ selected, isExpanded });
+    const computedAriaLabel = ariaLabel ?? (!isExpanded ? label : undefined);
+    const computedAriaCurrent = ariaCurrent ?? (selected ? 'page' : undefined);
+    const handleClick = (e) => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.();
+    };
+    const innerContent = (jsxRuntime.jsxs(Stack, { width: '100%', justifyContent: 'start', children: [jsxRuntime.jsx("span", { className: DRAWER_ITEM_STYLES.iconWrap, children: jsxRuntime.jsx(Icon, { icon: startIcon, size: 'md' }) }), isLabelVisible && (jsxRuntime.jsxs("span", { className: DRAWER_ITEM_STYLES.labelWrapper({ isFadingIn: isLabelFadingIn }), children: [jsxRuntime.jsx(Text, { variant: 'span', fontSize: 'sm', fontWeight: 'medium', className: DRAWER_ITEM_STYLES.label, textAlign: 'start', children: label }), endContent && (jsxRuntime.jsx("span", { className: DRAWER_ITEM_STYLES.endContent, children: endContent }))] }))] }));
+    const item = href ? (jsxRuntime.jsx("a", { href: href, className: rootClassName, "aria-disabled": disabled || undefined, "aria-current": computedAriaCurrent, "aria-label": computedAriaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, tabIndex: disabled ? -1 : undefined, onClick: handleClick, children: innerContent })) : (jsxRuntime.jsx("button", { type: 'button', className: rootClassName, disabled: disabled, "aria-current": computedAriaCurrent, "aria-label": computedAriaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, onClick: handleClick, children: innerContent }));
+    return (jsxRuntime.jsx(Tooltip, { label: label, placement: 'right', inline: true, withArrow: true, disabled: isExpanded || disabled, children: item }));
+};
+DrawerItem.displayName = 'DrawerItem';
+
+/**
+ * Internal component: renders the temporary drawer as a fixed portal overlay
+ * that slides in from the left with a backdrop, animated via `useTransitionRender`.
+ */
+const DrawerTemporaryPanel = ({ isExpanded, onClose, children, role, ariaLabel, ariaLabelledBy, ariaDescribedBy, }) => {
+    const { isVisible, isFadingIn } = useTransitionRender(isExpanded);
+    useBodyScrollLock(isExpanded);
+    useKeyPress({ Escape: onClose }, { enabled: isExpanded });
+    if (!isVisible) {
+        return null;
+    }
+    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Backdrop, { visible: isFadingIn, onClick: onClose }), jsxRuntime.jsx(DrawerContext.Provider, { value: { isExpanded: true }, children: jsxRuntime.jsx("nav", { className: theme.cx(DRAWER_STYLES.temporaryPanel, isFadingIn && DRAWER_STYLES.temporaryPanelVisible), role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, children: children }) })] }), document.body);
+};
+DrawerTemporaryPanel.displayName = 'DrawerTemporaryPanel';
+// ─── Main Drawer ─────────────────────────────────────────────────────────────
+/**
+ * Collapsible side navigation drawer with controlled expanded/collapsed state.
+ *
+ * **Variants**
+ * - `'permanent'` (default on desktop): inline drawer that pushes page content.
+ *   Toggles between `expanded` and `collapsed` states with animated width.
+ * - `'temporary'` (default on mobile): portal overlay with a backdrop that slides
+ *   in from the left. `isExpanded` controls open/closed; `onClose` is called on
+ *   backdrop click or Escape.
+ * - Omit `variant` to auto-detect based on viewport width.
+ *
+ * @example Permanent
+ * <Drawer isExpanded={open} onExpandedChange={setOpen} height="100dvh">
+ *   <Drawer.Header>…</Drawer.Header>
+ *   <Drawer.Body>
+ *     <Drawer.Item startIcon={HomeIcon} label="Home" selected />
+ *   </Drawer.Body>
+ * </Drawer>
+ *
+ * @example Temporary
+ * <Drawer variant="temporary" isExpanded={open} onClose={() => setOpen(false)}>
+ *   …
+ * </Drawer>
+ */
+const DrawerBase = ({ height = '100dvh', isExpanded, onExpandedChange, onClose, variant, children, role = 'navigation', ariaLabel = 'Navigation', ariaLabelledBy, ariaDescribedBy, }) => {
+    const resolvedVariant = useDrawerVariant(variant);
+    const handleClose = onClose ?? (() => onExpandedChange?.(false));
+    if (resolvedVariant === 'temporary') {
+        return (jsxRuntime.jsx(DrawerTemporaryPanel, { isExpanded: isExpanded, onClose: handleClose, height: height, role: role, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, children: children }));
+    }
+    return (jsxRuntime.jsx(DrawerContext.Provider, { value: { isExpanded }, children: jsxRuntime.jsx("nav", { className: DRAWER_STYLES.root({ isExpanded }), style: { height }, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, children: children }) }));
+};
+DrawerBase.displayName = 'Drawer';
+const Drawer = DrawerBase;
+Drawer.Header = DrawerHeader;
+Drawer.Body = DrawerBody;
+Drawer.Footer = DrawerFooter;
+Drawer.Item = DrawerItem;
+
 const AlertContext = React.createContext({
     variant: 'default',
     accentColor: 'defaultActive',
@@ -2425,31 +2969,8 @@ const Alert = AlertBase;
 Alert.Title = AlertTitle;
 Alert.Body = AlertBody;
 
-/**
- * Responsive breakpoints (min-width, mobile-first).
- * Keep in sync with themeBreakpoints.
- */
-const BREAKPOINTS = {
-    sm: 640};
-/** Max-width media query strings (max = breakpoint - 1px). */
-const MEDIA_MAX = {
-    sm: `max-width: ${BREAKPOINTS.sm - 1}px`};
-
-/** Default duration in milliseconds for mount/unmount transition animations. */
-const DEFAULT_TRANSITION_DURATION_MS = 250;
-
 const TRANSITION = `${DEFAULT_TRANSITION_DURATION_MS}ms ease`;
 const DIALOG_STYLES = theme.createStyles((theme) => ({
-    backdrop: {
-        position: 'fixed',
-        inset: 0,
-        zIndex: theme.zIndex.modal - 1,
-        backgroundColor: 'rgba(0, 0, 0, 0)',
-        transition: `background-color ${TRANSITION}`,
-    },
-    backdropVisible: {
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    },
     panel: {
         position: 'fixed',
         inset: 0,
@@ -2507,84 +3028,6 @@ const DialogContext = React.createContext({
     CloseIconComponent: null,
 });
 
-/**
- * Manages mount/unmount transitions with a two-phase approach (visible → fading-in).
- *
- * Opening sequence:
- *   1. `useLayoutEffect` sets `isVisible=true` synchronously before the browser paints
- *      → element is in the DOM at its initial hidden state on the very first frame.
- *   2. Double `requestAnimationFrame` in `useEffect` waits for two rendered frames
- *      before setting `isFadingIn=true`, guaranteeing the CSS transition always starts
- *      from the painted hidden state (prevents flickering).
- *
- * Closing sequence:
- *   `isFadingIn=false` → CSS transition plays → after `duration` ms → `isVisible=false`.
- *
- * @param isOpen - Whether the element should be shown.
- * @param duration - Transition duration in milliseconds (defaults to `DEFAULT_TRANSITION_DURATION_MS`).
- */
-const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS) => {
-    const [isVisible, setIsVisible] = React.useState(isOpen);
-    const [isFadingIn, setIsFadingIn] = React.useState(isOpen);
-    // Mount synchronously before paint so the element is in the DOM at opacity:0
-    // on the very first frame — no extra render cycle between null and the initial state.
-    React.useLayoutEffect(() => {
-        if (isOpen) {
-            setIsVisible(true);
-        }
-    }, [isOpen]);
-    React.useEffect(() => {
-        if (isOpen) {
-            // Double RAF: frame 1 → element rendered; frame 2 → element painted at hidden
-            // state → THEN trigger the CSS transition.
-            let raf2;
-            const raf1 = requestAnimationFrame(() => {
-                raf2 = requestAnimationFrame(() => setIsFadingIn(true));
-            });
-            return () => {
-                cancelAnimationFrame(raf1);
-                cancelAnimationFrame(raf2);
-            };
-        }
-        else {
-            setIsFadingIn(false);
-            const timeout = setTimeout(() => setIsVisible(false), duration);
-            return () => clearTimeout(timeout);
-        }
-    }, [isOpen, duration]);
-    return { isVisible, isFadingIn };
-};
-
-/**
- * Locks scrolling on `document.body` while `active` is true.
- *
- * Preserves the current scroll position and keeps the scrollbar gutter
- * (`overflow-y: scroll`) to avoid horizontal layout shift when the scrollbar
- * disappears. The original styles and scroll position are restored on cleanup.
- *
- * @example useBodyScrollLock(isDialogOpen)
- */
-const useBodyScrollLock = (active) => {
-    React.useEffect(() => {
-        if (!active) {
-            return;
-        }
-        const scrollY = window.scrollY;
-        const body = document.body;
-        body.style.position = 'fixed';
-        body.style.top = `-${scrollY}px`;
-        body.style.overflowY = 'scroll';
-        body.style.width = '100%';
-        return () => {
-            body.style.position = '';
-            body.style.top = '';
-            body.style.overflowY = '';
-            body.style.width = '';
-            window.scrollTo(0, scrollY);
-        };
-    }, [active]);
-};
-
 const FOCUSABLE_SELECTOR = [
     'a[href]',
     'button:not([disabled])',
@@ -2720,7 +3163,7 @@ const DialogBase = ({ open, onClose, children, closeOnBackdropClick = false, ful
     if (!isVisible) {
         return null;
     }
-    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: theme.cx(DIALOG_STYLES.backdrop, isFadingIn && DIALOG_STYLES.backdropVisible), onClick: handleBackdropClick, "aria-hidden": true }), jsxRuntime.jsx("div", { ref: panelRef, role: 'dialog', "aria-modal": true, "aria-labelledby": labelledBy, "aria-label": ariaLabel, tabIndex: -1, className: theme.cx(DIALOG_STYLES.panel, isFadingIn && DIALOG_STYLES.panelVisible, fullscreen && DIALOG_STYLES.panelFullscreen), style: cssVars, children: jsxRuntime.jsx(DialogContext.Provider, { value: { titleId, CloseIconComponent: CloseIcon }, children: children }) })] }), document.body);
+    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Backdrop, { visible: isFadingIn, onClick: handleBackdropClick }), jsxRuntime.jsx("div", { ref: panelRef, role: 'dialog', "aria-modal": true, "aria-labelledby": labelledBy, "aria-label": ariaLabel, tabIndex: -1, className: theme.cx(DIALOG_STYLES.panel, isFadingIn && DIALOG_STYLES.panelVisible, fullscreen && DIALOG_STYLES.panelFullscreen), style: cssVars, children: jsxRuntime.jsx(DialogContext.Provider, { value: { titleId, CloseIconComponent: CloseIcon }, children: children }) })] }), document.body);
 };
 DialogBase.displayName = 'Dialog';
 const Dialog = DialogBase;
@@ -2931,13 +3374,19 @@ const themeShadows = {
 
 /**
  * Default spacing tokens
+ *
+ * ⚠️ Token keys MUST stay CSS-custom-property safe (letters, digits, hyphens only).
+ * They are turned into CSS variables (e.g. `smPlus` → `--theme-spacing-sm-plus`) by
+ * the theme proxy, so characters like `+` would produce invalid variable names and
+ * silently break any style that uses them.
  */
 const themeSpacing = {
     none: '0',
     '2xs': '0.125rem', // 2px
     xs: '0.25rem', // 4px
-    'xs+': '0.375rem', // 6px
+    xsPlus: '0.375rem', // 6px
     sm: '0.5rem', // 8px
+    smPlus: '0.75rem', // 12px
     md: '1rem', // 16px
     lg: '1.5rem', // 24px
     xl: '2rem', // 32px
@@ -2951,9 +3400,9 @@ const themeSpacing = {
  * Default transition tokens
  */
 const themeTransition = {
-    fast: '150ms ease-out',
-    normal: '250ms ease-out',
-    slow: '350ms ease-out',
+    fast: '150ms ease-in-out',
+    normal: '250ms ease-in-out',
+    slow: '350ms ease-in-out',
 };
 
 /**
@@ -3109,11 +3558,14 @@ const darkTheme = theme.createTheme({
 });
 
 exports.Alert = Alert;
+exports.Backdrop = Backdrop;
 exports.Badge = Badge;
 exports.Box = Box;
 exports.Button = Button;
 exports.Card = Card;
+exports.Checkbox = Checkbox;
 exports.Dialog = Dialog;
+exports.Drawer = Drawer;
 exports.Form = Form;
 exports.Grid = Grid;
 exports.Icon = Icon;
@@ -3130,4 +3582,5 @@ exports.TextField = TextField;
 exports.Tooltip = Tooltip;
 exports.darkTheme = darkTheme;
 exports.lightTheme = lightTheme;
+exports.useDrawerContext = useDrawerContext;
 //# sourceMappingURL=index.js.map