@aurora-ds/components 0.6.7 → 0.10.0

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Children, isValidElement, cloneElement, createElement, Fragment, useMemo, useState } from 'react';
+import { Children, isValidElement, cloneElement, createElement, Fragment, useMemo, memo, useCallback, forwardRef, useState, useRef, useEffect } from 'react';
 import { createStyles, useTheme, colors } from '@aurora-ds/theme';
 
 const ICON_STYLES = createStyles((theme) => ({
@@ -54,7 +54,7 @@ const ICON_STYLES = createStyles((theme) => ({
  * </Icon>
  * ```
  */
-const Icon = ({ children, size, color, backgroundColor, padding, borderRadius, }) => {
+const Icon = ({ children, size, color, backgroundColor, padding, borderRadius, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     // Clone child element to apply width and height
     const child = Children.only(children);
     const styledChild = isValidElement(child)
@@ -63,158 +63,10 @@ const Icon = ({ children, size, color, backgroundColor, padding, borderRadius, }
             height: '100%',
         })
         : child;
-    return (jsx("div", { className: ICON_STYLES.root(size, color, backgroundColor, padding, borderRadius), children: styledChild }));
+    return (jsx("div", { className: ICON_STYLES.root(size, color, backgroundColor, padding, borderRadius), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: styledChild }));
 };
 Icon.displayName = 'Icon';
 
-const getChipColorStyles = (theme, color, variant, disabled) => {
-    if (disabled) {
-        return {
-            filled: {
-                backgroundColor: theme.colors.disabled,
-                color: theme.colors.disabledText,
-                borderColor: 'transparent',
-            },
-            outlined: {
-                backgroundColor: 'transparent',
-                color: theme.colors.disabledText,
-                borderColor: theme.colors.disabled,
-            },
-        }[variant];
-    }
-    const colorMap = {
-        default: {
-            filled: {
-                backgroundColor: theme.colors.surfaceHover,
-                color: theme.colors.text,
-                borderColor: 'transparent',
-            },
-            outlined: {
-                backgroundColor: 'transparent',
-                color: theme.colors.text,
-                borderColor: theme.colors.border,
-            },
-        },
-        primary: {
-            filled: {
-                backgroundColor: theme.colors.primary,
-                color: theme.colors.onPrimary,
-                borderColor: 'transparent',
-            },
-            outlined: {
-                backgroundColor: 'transparent',
-                color: theme.colors.primary,
-                borderColor: theme.colors.primary,
-            },
-        },
-        success: {
-            filled: {
-                backgroundColor: theme.colors.successSubtle,
-                color: theme.colors.success,
-                borderColor: 'transparent',
-            },
-            outlined: {
-                backgroundColor: theme.colors.successSubtle,
-                color: theme.colors.success,
-                borderColor: theme.colors.success,
-            },
-        },
-        warning: {
-            filled: {
-                backgroundColor: theme.colors.warningSubtle,
-                color: theme.colors.warning,
-                borderColor: 'transparent',
-            },
-            outlined: {
-                backgroundColor: theme.colors.warningSubtle,
-                color: theme.colors.warning,
-                borderColor: theme.colors.warning,
-            },
-        },
-        error: {
-            filled: {
-                backgroundColor: theme.colors.errorSubtle,
-                color: theme.colors.error,
-                borderColor: 'transparent',
-            },
-            outlined: {
-                backgroundColor: theme.colors.errorSubtle,
-                color: theme.colors.error,
-                borderColor: theme.colors.error,
-            },
-        },
-        info: {
-            filled: {
-                backgroundColor: theme.colors.infoSubtle,
-                color: theme.colors.info,
-                borderColor: 'transparent',
-            },
-            outlined: {
-                backgroundColor: theme.colors.infoSubtle,
-                color: theme.colors.info,
-                borderColor: theme.colors.info,
-            },
-        },
-    };
-    return colorMap[color][variant];
-};
-
-/**
- * Get chip size styles based on the theme, size and icon-only state
- * @param theme - Theme object
- * @param size - Chip size
- * @param isIconOnly - Whether the chip has only an icon (no label)
- */
-const getChipSizeStyles = (theme, size, isIconOnly) => {
-    const sizeMap = {
-        '2xs': {
-            iconOnly: { padding: theme.spacing.xs, fontSize: theme.fontSize['2xs'] },
-            withLabel: { padding: `${theme.spacing.xs} ${theme.spacing.sm}`, fontSize: theme.fontSize['2xs'] },
-        },
-        xs: {
-            iconOnly: { padding: theme.spacing.xs, fontSize: theme.fontSize.xs },
-            withLabel: { padding: `${theme.spacing.xs} ${theme.spacing.sm}`, fontSize: theme.fontSize.xs },
-        },
-        sm: {
-            iconOnly: { padding: theme.spacing.xs, fontSize: theme.fontSize.sm },
-            withLabel: { padding: `${theme.spacing.xs} ${theme.spacing.sm}`, fontSize: theme.fontSize.sm },
-        },
-        md: {
-            iconOnly: { padding: theme.spacing.sm, fontSize: theme.fontSize.md },
-            withLabel: { padding: `${theme.spacing.sm} ${theme.spacing.md}`, fontSize: theme.fontSize.sm },
-        },
-        lg: {
-            iconOnly: { padding: theme.spacing.md, fontSize: theme.fontSize.lg },
-            withLabel: { padding: `${theme.spacing.sm} ${theme.spacing.lg}`, fontSize: theme.fontSize.md },
-        },
-    };
-    return isIconOnly ? sizeMap[size].iconOnly : sizeMap[size].withLabel;
-};
-
-const CHIP_STYLES = createStyles((theme) => ({
-    root: ({ variant, color, size, isIconOnly, disabled, gap, radius }) => {
-        const colorStyles = getChipColorStyles(theme, color, variant, disabled);
-        const sizeStyles = getChipSizeStyles(theme, size, isIconOnly);
-        return {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: gap ? theme.spacing[gap] : theme.spacing.sm,
-            borderRadius: radius ? theme.radius[radius] : theme.radius.md,
-            border: variant === 'outlined' ? '1px solid' : 'none',
-            aspectRatio: isIconOnly ? 1 : undefined,
-            height: 'fit-content',
-            width: 'fit-content',
-            fontFamily: 'inherit',
-            fontWeight: theme.fontWeight.medium,
-            whiteSpace: 'nowrap',
-            boxSizing: 'border-box',
-            ...sizeStyles,
-            ...colorStyles,
-        };
-    },
-}));
-
 /**
  * Get text variant styles based on the theme
  * @param theme
@@ -258,7 +110,7 @@ const getTextVariantStyles = (theme) => ({
     },
     p: {
         tag: 'p',
-        fontSize: theme.fontSize.sm,
+        fontSize: theme.fontSize.md,
         fontWeight: theme.fontWeight.regular,
         lineHeight: theme.lineHeight.relaxed,
     },
@@ -270,7 +122,7 @@ const getTextVariantStyles = (theme) => ({
     },
     label: {
         tag: 'label',
-        fontSize: theme.fontSize.sm,
+        fontSize: theme.fontSize.md,
         fontWeight: theme.fontWeight.medium,
         lineHeight: theme.lineHeight.normal,
     },
@@ -294,14 +146,15 @@ const getTruncateTextStyles = (maxLines) => (maxLines === 1
 const TEXT_STYLES = createStyles((theme) => {
     const variantStyles = getTextVariantStyles(theme);
     return {
-        root: ({ variant = 'span', color, fontSize, fontFamily, maxLines, underline }) => ({
+        root: ({ variant = 'span', color, fontSize, fontFamily, maxLines, underline, preserveWhitespace, }) => ({
             margin: 0,
             fontSize: fontSize ? theme.fontSize[fontSize] : variantStyles[variant].fontSize,
             fontWeight: variantStyles[variant].fontWeight,
             lineHeight: variantStyles[variant].lineHeight,
             color: color ? theme.colors[color] : 'inherit',
             cursor: 'inherit',
-            ...(fontFamily && { fontFamily }),
+            fontFamily,
+            ...(preserveWhitespace && { whiteSpace: 'pre-wrap' }),
             ...(underline && {
                 textDecoration: 'underline',
                 textUnderlineOffset: '3px',
@@ -354,16 +207,172 @@ const parseTextWithBold = (children) => {
  * - Theme-aware colors
  * - Text truncation with `maxLines`
  * - Underline support
+ * - Preserve whitespace with `preserveWhitespace` prop
  * - Bold text with **double asterisks** syntax
  */
-const Text = ({ children, variant = 'span', color, fontSize, fontFamily, maxLines, underline, }) => {
+const Text = ({ children, variant = 'span', color, fontSize, fontFamily, maxLines, underline, preserveWhitespace, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const theme = useTheme();
     const variantStyles = useMemo(() => getTextVariantStyles(theme), [theme]);
     const tag = variantStyles[variant].tag;
     const parsedChildren = useMemo(() => parseTextWithBold(children), [children]);
-    return createElement(tag, { className: TEXT_STYLES.root({ variant, color, fontSize, fontFamily, maxLines, underline }) }, parsedChildren);
+    return createElement(tag, {
+        className: TEXT_STYLES.root({ variant, color, fontSize, fontFamily, maxLines, underline, preserveWhitespace }),
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-describedby': ariaDescribedBy,
+        role,
+        tabIndex,
+    }, parsedChildren);
+};
+Text.displayName = 'Text';
+
+const getChipColorStyles = (theme, color, variant, disabled) => {
+    if (disabled) {
+        return {
+            filled: {
+                backgroundColor: theme.colors.disabled,
+                color: theme.colors.disabledText,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: 'transparent',
+                color: theme.colors.disabledText,
+                borderColor: theme.colors.disabled,
+            },
+        }[variant];
+    }
+    const colorMap = {
+        default: {
+            filled: {
+                backgroundColor: theme.colors.surfaceHover,
+                color: theme.colors.text,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: 'transparent',
+                color: theme.colors.text,
+                borderColor: theme.colors.border,
+            },
+        },
+        primary: {
+            filled: {
+                backgroundColor: theme.colors.primary,
+                color: theme.colors.onPrimary,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: 'transparent',
+                color: theme.colors.primary,
+                borderColor: theme.colors.primary,
+            },
+        },
+        success: {
+            filled: {
+                backgroundColor: theme.colors.successSubtle,
+                color: theme.colors.success,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.successSubtle,
+                color: theme.colors.success,
+                borderColor: theme.colors.success,
+            },
+        },
+        warning: {
+            filled: {
+                backgroundColor: theme.colors.warningSubtle,
+                color: theme.colors.warning,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.warningSubtle,
+                color: theme.colors.warning,
+                borderColor: theme.colors.warning,
+            },
+        },
+        error: {
+            filled: {
+                backgroundColor: theme.colors.errorSubtle,
+                color: theme.colors.error,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.errorSubtle,
+                color: theme.colors.error,
+                borderColor: theme.colors.error,
+            },
+        },
+        info: {
+            filled: {
+                backgroundColor: theme.colors.infoSubtle,
+                color: theme.colors.info,
+                borderColor: 'transparent',
+            },
+            outlined: {
+                backgroundColor: theme.colors.infoSubtle,
+                color: theme.colors.info,
+                borderColor: theme.colors.info,
+            },
+        },
+    };
+    return colorMap[color][variant];
+};
+
+/**
+ * Get chip size styles based on the theme, size and icon-only state
+ * @param theme - Theme object
+ * @param size - Chip size
+ * @param isIconOnly - Whether the chip has only an icon (no label)
+ */
+const getChipSizeStyles = (theme, size, isIconOnly) => {
+    const sizeMap = {
+        '2xs': {
+            iconOnly: { padding: theme.spacing.xs, fontSize: theme.fontSize['2xs'] },
+            withLabel: { padding: `${theme.spacing.xs} ${theme.spacing.sm}`, fontSize: theme.fontSize['2xs'] },
+        },
+        xs: {
+            iconOnly: { padding: theme.spacing.xs, fontSize: theme.fontSize.xs },
+            withLabel: { padding: `${theme.spacing.xs} ${theme.spacing.sm}`, fontSize: theme.fontSize.xs },
+        },
+        sm: {
+            iconOnly: { padding: theme.spacing.xs, fontSize: theme.fontSize.sm },
+            withLabel: { padding: `${theme.spacing.xs} ${theme.spacing.sm}`, fontSize: theme.fontSize.sm },
+        },
+        md: {
+            iconOnly: { padding: theme.spacing.sm, fontSize: theme.fontSize.md },
+            withLabel: { padding: `${theme.spacing.sm} ${theme.spacing.md}`, fontSize: theme.fontSize.sm },
+        },
+        lg: {
+            iconOnly: { padding: theme.spacing.md, fontSize: theme.fontSize.lg },
+            withLabel: { padding: `${theme.spacing.sm} ${theme.spacing.lg}`, fontSize: theme.fontSize.md },
+        },
+    };
+    return isIconOnly ? sizeMap[size].iconOnly : sizeMap[size].withLabel;
 };
-Text.displayName = 'Text';
+
+const CHIP_STYLES = createStyles((theme) => ({
+    root: ({ variant, color, size, isIconOnly, disabled, gap, radius }) => {
+        const colorStyles = getChipColorStyles(theme, color, variant, disabled);
+        const sizeStyles = getChipSizeStyles(theme, size, isIconOnly);
+        return {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: gap ? theme.spacing[gap] : theme.spacing.sm,
+            borderRadius: radius ? theme.radius[radius] : theme.radius.md,
+            border: variant === 'outlined' ? '1px solid' : 'none',
+            aspectRatio: isIconOnly ? 1 : undefined,
+            height: 'fit-content',
+            width: 'fit-content',
+            fontFamily: 'inherit',
+            fontWeight: theme.fontWeight.medium,
+            whiteSpace: 'nowrap',
+            boxSizing: 'border-box',
+            ...sizeStyles,
+            ...colorStyles,
+        };
+    },
+}));
 
 /**
  * Get chip content size based on the chip size
@@ -393,7 +402,7 @@ const getChipContentSize = (size) => {
  * **Colors:**
  * - `default`, `primary`, `success`, `warning`, `error`, `info`
  */
-const Chip = ({ label, icon, variant = 'filled', color = 'default', size = 'md', gap, radius, disabled = false, }) => {
+const Chip = ({ label, icon, variant = 'filled', color = 'default', size = 'md', gap, radius, disabled = false, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const isIconOnly = Boolean(icon) && !label;
     return (jsxs("span", { className: CHIP_STYLES.root({
             variant,
@@ -403,13 +412,40 @@ const Chip = ({ label, icon, variant = 'filled', color = 'default', size = 'md',
             disabled,
             gap,
             radius,
-        }), children: [icon && (jsx(Icon, { size: getChipContentSize(size), children: icon })), label && (jsx(Text, { variant: 'label', fontSize: getChipContentSize(size), children: label }))] }));
+        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [icon && (jsx(Icon, { size: getChipContentSize(size), children: icon })), label && (jsx(Text, { variant: 'label', fontSize: getChipContentSize(size), children: label }))] }));
 };
 Chip.displayName = 'Chip';
 
 const BUTTON_SIZE = 36;
 const DRAWER_ITEM_HEIGHT = 32;
 
+const getButtonSizeStyles = () => ({
+    small: {
+        height: BUTTON_SIZE - 8,
+        padding: {
+            vertical: 'xs',
+            horizontal: 'sm'
+        },
+        fontSize: 'sm'
+    },
+    medium: {
+        height: BUTTON_SIZE,
+        padding: {
+            vertical: 'sm',
+            horizontal: 'md'
+        },
+        fontSize: 'md'
+    },
+    large: {
+        height: BUTTON_SIZE + 8,
+        padding: {
+            vertical: 'sm',
+            horizontal: 'lg'
+        },
+        fontSize: 'lg'
+    }
+});
+
 /**
  * Get button variant styles based on the theme
  * @param theme
@@ -427,6 +463,7 @@ const getButtonVariantStyles = (theme) => {
     const baseDisabled = {
         color: theme.colors.disabledText,
         cursor: 'not-allowed',
+        opacity: theme.opacity.high
     };
     return {
         contained: {
@@ -455,6 +492,24 @@ const getButtonVariantStyles = (theme) => {
             disabled: { ...baseDisabled, backgroundColor: 'transparent' },
             textColor: 'primary',
         },
+        destructive: {
+            default: {
+                backgroundColor: theme.colors.error,
+                color: theme.colors.onError,
+                border: 'none',
+            },
+            hover: { backgroundColor: theme.colors.errorHover },
+            pressed: { backgroundColor: theme.colors.error },
+            disabled: { ...baseDisabled, backgroundColor: theme.colors.disabled },
+            textColor: 'onError',
+        },
+        link: {
+            default: { ...transparentBase, border: 'none', textDecoration: 'underline', textDecorationColor: 'transparent', textUnderlineOffset: '3px' },
+            hover: { backgroundColor: 'transparent', textDecorationColor: 'currentColor' },
+            pressed: { backgroundColor: 'transparent', textDecorationColor: 'currentColor', color: theme.colors.linkActive },
+            disabled: { ...baseDisabled, backgroundColor: 'transparent', textDecoration: 'none' },
+            textColor: 'link',
+        },
     };
 };
 
@@ -474,26 +529,35 @@ const getButtonVariantStyles = (theme) => {
  */
 const BUTTON_STYLES = createStyles((theme) => {
     const variantStyles = getButtonVariantStyles(theme);
+    const sizeStyles = getButtonSizeStyles();
     return {
-        root: ({ variant = 'contained', active = false }) => ({
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            boxSizing: 'border-box',
-            gap: theme.spacing.sm,
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
-            borderRadius: theme.radius.md,
-            cursor: 'pointer',
-            transition: `background-color ${theme.transition.fast}, color ${theme.transition.fast}`,
-            minHeight: BUTTON_SIZE,
-            maxHeight: BUTTON_SIZE,
-            fontFamily: 'inherit',
-            ...variantStyles[variant].default,
-            ...(active && variantStyles[variant].pressed),
-            ':hover': variantStyles[variant].hover,
-            ':active': variantStyles[variant].pressed,
-            ':disabled': variantStyles[variant].disabled,
-        }),
+        root: ({ variant = 'contained', active = false, textColor, size = 'medium' }) => {
+            const sizeConfig = sizeStyles[size];
+            const overrides = textColor ? {
+                ...(variant !== 'contained' && { color: theme.colors[textColor] }),
+                ...(variant === 'outlined' && { border: `1px solid ${theme.colors[textColor]}` }),
+            } : {};
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxSizing: 'border-box',
+                gap: theme.spacing.sm,
+                padding: `${theme.spacing[sizeConfig.padding.vertical]} ${theme.spacing[sizeConfig.padding.horizontal]}`,
+                borderRadius: theme.radius.md,
+                cursor: 'pointer',
+                transition: `background-color ${theme.transition.fast}, color ${theme.transition.fast}, text-decoration-color ${theme.transition.fast}`,
+                minHeight: sizeConfig.height,
+                maxHeight: sizeConfig.height,
+                fontFamily: 'inherit',
+                ...variantStyles[variant].default,
+                ...(active && variantStyles[variant].pressed),
+                ':hover': variantStyles[variant].hover,
+                ':active': variantStyles[variant].pressed,
+                ':disabled': variantStyles[variant].disabled,
+                ...overrides,
+            };
+        },
     };
 });
 
@@ -505,11 +569,12 @@ const BUTTON_STYLES = createStyles((theme) => {
  * - `outlined`: Border only button
  * - `text`: Text only button without background
  */
-const Button = ({ label, startIcon, endIcon, variant = 'contained', active = false, onClick, disabled, type = 'button', textColor: customTextColor, }) => {
+const Button = ({ label, startIcon, endIcon, variant = 'contained', active = false, onClick, disabled, type = 'button', textColor: customTextColor, size = 'medium', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const theme = useTheme();
     const variantStyles = getButtonVariantStyles(theme);
+    const sizeStyles = getButtonSizeStyles();
     const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
-    return (jsxs("button", { onClick: onClick, disabled: disabled, type: type, className: BUTTON_STYLES.root({ variant, active }), children: [startIcon && (jsx(Icon, { color: textColor, children: startIcon })), jsx(Text, { variant: 'label', color: textColor, children: label }), endIcon && (jsx(Icon, { color: textColor, children: endIcon }))] }));
+    return (jsxs("button", { onClick: onClick, disabled: disabled, type: type, className: BUTTON_STYLES.root({ variant, active, textColor: customTextColor, size }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [startIcon && (jsx(Icon, { color: textColor, children: startIcon })), jsx(Text, { variant: 'label', color: textColor, fontSize: sizeStyles[size].fontSize, children: label }), endIcon && (jsx(Icon, { color: textColor, children: endIcon }))] }));
 };
 Button.displayName = 'Button';
 
@@ -535,8 +600,12 @@ const ICON_BUTTON_STYLES = createStyles((theme) => {
     const variantStyles = getButtonVariantStyles(theme);
     const sizeStyles = getIconButtonSizeStyles();
     return {
-        root: ({ variant = 'contained', active = false, size = 'medium' }) => {
+        root: ({ variant = 'contained', active = false, size = 'medium', textColor }) => {
             const sizeConfig = sizeStyles[size];
+            const overrides = textColor ? {
+                ...(variant !== 'contained' && { color: theme.colors[textColor] }),
+                ...(variant === 'outlined' && { border: `1px solid ${theme.colors[textColor]}` }),
+            } : {};
             return {
                 display: 'inline-flex',
                 alignItems: 'center',
@@ -557,20 +626,115 @@ const ICON_BUTTON_STYLES = createStyles((theme) => {
                 ':hover': variantStyles[variant].hover,
                 ':active': variantStyles[variant].pressed,
                 ':disabled': variantStyles[variant].disabled,
+                ...overrides,
             };
         },
     };
 });
 
-const IconButton = ({ icon, variant = 'contained', active = false, type = 'button', onClick, disabled, textColor: customTextColor, size = 'medium' }) => {
+const IconButton = ({ icon, variant = 'contained', active = false, type = 'button', onClick, disabled, textColor: customTextColor, size = 'medium', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const theme = useTheme();
     const variantStyles = getButtonVariantStyles(theme);
     const textColor = disabled ? 'disabledText' : (customTextColor ?? variantStyles[variant].textColor);
     const iconSize = getIconButtonSizeStyles()[size].iconSize;
-    return (jsx("button", { onClick: onClick, disabled: disabled, type: type, className: ICON_BUTTON_STYLES.root({ variant, active, size }), children: jsx(Icon, { color: textColor, size: iconSize, children: icon }) }));
+    return (jsx("button", { onClick: onClick, disabled: disabled, type: type, className: ICON_BUTTON_STYLES.root({ variant, active, size, textColor: customTextColor }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: jsx(Icon, { color: textColor, size: iconSize, children: icon }) }));
 };
 IconButton.displayName = 'IconButton';
 
+const FORM_STYLES = createStyles(() => ({
+    root: {
+        display: 'contents',
+    },
+}));
+
+/**
+ * Form component - A transparent wrapper for form elements with automatic preventDefault handling
+ */
+const Form = ({ children, onSubmit, ariaLabel, }) => {
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        onSubmit?.(e);
+    }, [onSubmit]);
+    return (jsx("form", { onSubmit: handleSubmit, className: FORM_STYLES.root, "aria-label": ariaLabel, children: children }));
+};
+Form.displayName = 'Form';
+var Form_default = memo(Form);
+
+/**
+ * Input styles using createStyles from @aurora-ds/theme
+ */
+const INPUT_STYLES = createStyles((theme) => ({
+    container: ({ width }) => ({
+        position: 'relative',
+        display: 'block',
+        width: width ?? '100%',
+        '&:hover:not(.disabled) input': {
+            borderColor: theme.colors.primaryHover,
+        },
+    }),
+    startIcon: {
+        position: 'absolute',
+        left: theme.spacing.md,
+        top: '50%',
+        transform: 'translateY(-50%)',
+        pointerEvents: 'none',
+    },
+    endIcon: {
+        position: 'absolute',
+        right: theme.spacing.md,
+        top: '50%',
+        transform: 'translateY(-50%)',
+        zIndex: 1,
+    },
+    endIconShifted: {
+        position: 'absolute',
+        right: `calc(${theme.spacing.md} + 1.5rem)`,
+        top: '50%',
+        transform: 'translateY(-50%)',
+        zIndex: 1,
+    },
+    passwordToggle: {
+        position: 'absolute',
+        right: theme.spacing.sm,
+        top: '50%',
+        transform: 'translateY(-50%)',
+        zIndex: 2,
+    },
+    root: ({ disabled = false, hasStartIcon = false, hasEndIcon = false, hasPasswordToggle = false }) => ({
+        boxSizing: 'border-box',
+        width: '100%',
+        padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+        paddingLeft: hasStartIcon ? `calc(${theme.spacing.md} + 1.5rem)` : theme.spacing.md,
+        paddingRight: `calc(${theme.spacing.md} + ${hasEndIcon ? '1.5rem' : '0px'} + ${hasPasswordToggle ? '1.5rem' : '0px'})`,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.radius.md,
+        fontSize: theme.fontSize.md,
+        fontFamily: 'inherit',
+        backgroundColor: theme.colors.surface,
+        color: theme.colors.text,
+        transition: `border-color ${theme.transition.fast}`,
+        outline: 'none',
+        minHeight: BUTTON_SIZE,
+        maxHeight: BUTTON_SIZE,
+        lineHeight: theme.lineHeight.none,
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        ':focus': {
+            borderColor: theme.colors.primary,
+        },
+        '::placeholder': {
+            color: theme.colors.textTertiary,
+            fontSize: theme.fontSize.md,
+        },
+        ...(disabled && {
+            color: theme.colors.disabledText,
+            cursor: 'not-allowed',
+            opacity: theme.opacity.high
+        }),
+    }),
+}));
+
 /**
  * Stack styles using createStyles from @aurora-ds/theme
  */
@@ -597,7 +761,7 @@ const STACK_STYLES = createStyles((theme) => ({
  * - `row`: Horizontal layout (default)
  * - `column`: Vertical layout
  */
-const Stack = ({ children, direction = 'row', gap = 'sm', width, height, align = 'center', justify, wrap, padding, }) => {
+const Stack = ({ children, direction = 'row', gap = 'sm', width, height, align = 'center', justify, wrap, padding, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     return (jsx("div", { className: STACK_STYLES.root({
             direction,
             gap,
@@ -607,10 +771,123 @@ const Stack = ({ children, direction = 'row', gap = 'sm', width, height, align =
             justify,
             wrap,
             padding,
-        }), children: children }));
+        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: children }));
 };
 Stack.displayName = 'Stack';
 
+const ChevronDownIcon = () => {
+    return (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '100%', height: '100%', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-chevron-down-icon lucide-chevron-down', children: jsx("path", { d: 'm6 9 6 6 6-6' }) }));
+};
+
+const ChevronRightIcon = () => {
+    return (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-chevron-right-icon lucide-chevron-right', children: jsx("path", { d: 'm9 18 6-6-6-6' }) }));
+};
+
+const EyeIcon = () => {
+    return (jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-eye-icon lucide-eye', children: [jsx("path", { d: 'M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0' }), jsx("circle", { cx: '12', cy: '12', r: '3' })] }));
+};
+
+const EyeOffIcon = () => {
+    return (jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-eye-off-icon lucide-eye-off', children: [jsx("path", { d: 'M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49' }), jsx("path", { d: 'M14.084 14.158a3 3 0 0 1-4.242-4.242' }), jsx("path", { d: 'M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143' }), jsx("path", { d: 'm2 2 20 20' })] }));
+};
+
+const MoreHorizontalIcon = () => {
+    return (jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '24', height: '24', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-ellipsis-icon lucide-ellipsis', children: [jsx("circle", { cx: '12', cy: '12', r: '1' }), jsx("circle", { cx: '19', cy: '12', r: '1' }), jsx("circle", { cx: '5', cy: '12', r: '1' })] }));
+};
+
+/**
+ * Input component
+ */
+const Input = forwardRef(({ value, onChange, label, mandatory = false, placeholder, disabled = false, type = 'text', ariaLabel, startIcon, endIcon, width, }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const handleChange = (event) => {
+        onChange(event.target.value);
+    };
+    const inputType = type === 'password' ? (showPassword ? 'text' : 'password') : type;
+    const hasPasswordToggle = type === 'password';
+    return (jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsxs("div", { className: `${INPUT_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: [jsx("input", { ref: ref, type: inputType, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, className: INPUT_STYLES.root({ disabled, hasStartIcon: !!startIcon, hasEndIcon: !!endIcon, hasPasswordToggle }), "aria-label": ariaLabel || label }), startIcon && (jsx("div", { className: INPUT_STYLES.startIcon, children: jsx(Icon, { color: 'textTertiary', children: startIcon }) })), endIcon && (jsx("div", { className: hasPasswordToggle ? INPUT_STYLES.endIconShifted : INPUT_STYLES.endIcon, children: jsx(Icon, { color: 'textTertiary', children: endIcon }) })), hasPasswordToggle && (jsx("div", { className: INPUT_STYLES.passwordToggle, children: jsx(IconButton, { icon: showPassword ? jsx(EyeOffIcon, {}) : jsx(EyeIcon, {}), onClick: () => setShowPassword(!showPassword), disabled: disabled, ariaLabel: ariaLabel || label, variant: 'text', size: 'small', textColor: 'textSecondary' }) }))] })] }));
+});
+Input.displayName = 'Input';
+var Input_default = memo(Input);
+
+/**
+ * TextArea styles using createStyles from @aurora-ds/theme
+ */
+const TEXTAREA_STYLES = createStyles((theme) => ({
+    container: ({ width }) => ({
+        position: 'relative',
+        display: 'inline-block',
+        width: width ?? '100%',
+        '&:hover:not(.disabled) textarea': {
+            borderColor: theme.colors.primaryHover,
+        },
+    }),
+    root: ({ disabled = false }) => ({
+        boxSizing: 'border-box',
+        width: '100%',
+        padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.radius.md,
+        fontSize: theme.fontSize.md,
+        fontFamily: 'inherit',
+        backgroundColor: theme.colors.surface,
+        color: theme.colors.text,
+        transition: `border-color ${theme.transition.fast}`,
+        outline: 'none',
+        lineHeight: theme.lineHeight.normal,
+        resize: 'none',
+        overflow: 'hidden',
+        ':focus': {
+            borderColor: theme.colors.primary,
+        },
+        '::placeholder': {
+            color: theme.colors.textTertiary,
+            fontSize: theme.fontSize.md,
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+        },
+        ...(disabled && {
+            color: theme.colors.disabledText,
+            cursor: 'not-allowed',
+            opacity: theme.opacity.high
+        }),
+    }),
+}));
+
+/**
+ * TextArea component with auto-expanding height based on content
+ */
+const TextArea = forwardRef(({ value, onChange, label, mandatory = false, placeholder, disabled = false, ariaLabel, width, minRows = 3, maxRows, }, ref) => {
+    const internalRef = useRef(null);
+    const textareaRef = ref || internalRef;
+    const adjustHeight = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            // Reset height to calculate the correct scrollHeight
+            textarea.style.height = 'auto';
+            // Set minHeight based on minRows
+            const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20;
+            const minHeight = lineHeight * minRows;
+            const maxHeight = maxRows ? lineHeight * maxRows : Infinity;
+            // Set the height to the greater of minHeight or scrollHeight, but capped at maxHeight
+            const newHeight = Math.min(Math.max(minHeight, textarea.scrollHeight), maxHeight);
+            textarea.style.height = `${newHeight}px`;
+            // Enable scrolling if content exceeds maxHeight
+            textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
+        }
+    }, [minRows, maxRows, textareaRef]);
+    useEffect(() => {
+        adjustHeight();
+    }, [value, adjustHeight]);
+    const handleChange = (event) => {
+        onChange(event.target.value);
+    };
+    return (jsxs(Stack, { direction: 'column', gap: 'xs', align: 'stretch', width: width ?? '100%', children: [label && (jsxs(Stack, { direction: 'row', gap: 'xs', align: 'center', children: [jsx(Text, { variant: 'label', fontSize: 'sm', children: label }), mandatory && (jsx(Text, { variant: 'label', fontSize: 'sm', color: 'error', children: "*" }))] })), jsx("div", { className: `${TEXTAREA_STYLES.container({ width })} ${disabled ? 'disabled' : ''}`, children: jsx("textarea", { ref: textareaRef, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, className: TEXTAREA_STYLES.root({ disabled }), "aria-label": ariaLabel || label, rows: minRows }) })] }));
+});
+TextArea.displayName = 'TextArea';
+var TextArea_default = memo(TextArea);
+
 /**
  * Card styles using createStyles from @aurora-ds/theme
  */
@@ -642,7 +919,7 @@ const CARD_STYLES = createStyles((theme) => ({
  * - `column`: Vertical layout (default)
  * - `row`: Horizontal layout
  */
-const Card = ({ children, direction = 'column', padding = 'md', width, height, gap, radius = 'md', shadow = 'sm', align, justify, backgroundColor = 'surface', borderColor }) => {
+const Card = ({ children, direction = 'column', padding = 'md', width, height, gap, radius = 'md', shadow = 'sm', align, justify, backgroundColor = 'surface', borderColor, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     return (jsx("div", { className: CARD_STYLES.root({
             direction,
             padding,
@@ -655,7 +932,7 @@ const Card = ({ children, direction = 'column', padding = 'md', width, height, g
             justify,
             backgroundColor,
             borderColor
-        }), children: children }));
+        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: children }));
 };
 Card.displayName = 'Card';
 
@@ -711,7 +988,7 @@ const GRID_STYLES = createStyles((theme) => ({
  * - Use `rows` to define the number of rows or a custom grid-template-rows value
  * - Use `minChildWidth` for responsive auto-fill grids
  */
-const Grid = ({ children, columns = 1, rows, gap = 'sm', columnGap, rowGap, width, height, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, }) => {
+const Grid = ({ children, columns = 1, rows, gap = 'sm', columnGap, rowGap, width, height, alignItems, justifyItems, alignContent, justifyContent, padding, minChildWidth, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     return (jsx("div", { className: GRID_STYLES.root({
             columns,
             rows,
@@ -726,10 +1003,66 @@ const Grid = ({ children, columns = 1, rows, gap = 'sm', columnGap, rowGap, widt
             justifyContent,
             padding,
             minChildWidth,
-        }), children: children }));
+        }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: children }));
 };
 Grid.displayName = 'Grid';
 
+const PAGE_SECTION_STYLES = createStyles((theme) => ({
+    root: ({ gap, paddingHorizontal, paddingVertical, alignItems = 'center', maxWidth, minHeight }) => ({
+        display: 'flex',
+        flexDirection: 'column',
+        gap: gap || theme.spacing.xl,
+        padding: `${paddingVertical ? theme.spacing[paddingVertical] : theme.spacing['3xl']} ${paddingHorizontal ? theme.spacing[paddingHorizontal] : theme.spacing.xl}`,
+        alignItems,
+        maxWidth,
+        minHeight,
+        width: '100%',
+        margin: '0 auto'
+    })
+}));
+
+/**
+ * PageSection component
+ *
+ * A layout component that provides consistent spacing and alignment for page sections.
+ * Supports customization of gap, padding, alignment, min height and max width.
+ */
+const PageSection = ({ children, gap, paddingHorizontal, paddingVertical, alignItems, maxWidth, minHeight, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+    return (jsx("section", { className: PAGE_SECTION_STYLES.root({ gap, paddingHorizontal, paddingVertical, alignItems, maxWidth, minHeight }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: children }));
+};
+PageSection.displayName = 'PageSection';
+
+const PAGE_STYLES = createStyles(() => ({
+    root: ({ backgroundColor, padding }) => ({
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        backgroundColor,
+        padding,
+    }),
+    children: ({ maxWidth = '100%' }) => ({
+        maxWidth,
+        height: '100%',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        width: '100%',
+        flex: 1,
+    })
+}));
+
+/**
+ * Page component
+ *
+ * A layout component that provides consistent page structure with optional footer.
+ * Supports customization of dimensions, background, and content constraints.
+ */
+const Page = ({ children, footer, maxWidth, backgroundColor, padding, className, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+    return (jsxs("div", { className: `${PAGE_STYLES.root({ backgroundColor, padding })} ${className || ''}`, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [jsx("div", { className: PAGE_STYLES.children({ maxWidth }), children: children }), footer && (jsx("div", { children: footer }))] }));
+};
+Page.displayName = 'Page';
+
 const ACCORDION_STYLES = createStyles((theme) => {
     return {
         root: ({ disabled, width }) => ({
@@ -738,11 +1071,11 @@ const ACCORDION_STYLES = createStyles((theme) => {
             opacity: disabled ? 0.8 : 1,
             borderRadius: theme.radius.md,
         }),
-        header: ({ disabled, backgroundColor }) => ({
+        header: ({ disabled, backgroundColor, headerPadding }) => ({
             display: 'flex',
             alignItems: 'center',
             width: '100%',
-            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            padding: headerPadding ?? `${theme.spacing.sm} ${theme.spacing.md}`,
             border: 'none',
             backgroundColor: backgroundColor ? theme.colors[backgroundColor] : 'transparent',
             cursor: disabled ? 'not-allowed' : 'pointer',
@@ -757,24 +1090,20 @@ const ACCORDION_STYLES = createStyles((theme) => {
             transition: `transform ${theme.transition.fast}`,
             transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
         }),
-        content: ({ expanded }) => ({
+        content: ({ expanded, contentPadding }) => ({
             display: expanded ? 'block' : 'none',
-            padding: `0 ${theme.spacing.md} ${theme.spacing.md}`,
+            padding: contentPadding ?? `0 ${theme.spacing.sm} ${theme.spacing.md}`,
         }),
     };
 });
 
-const ChevronDownIcon = () => {
-    return (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '100%', height: '100%', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', "stroke-width": '2', "stroke-linecap": 'round', "stroke-linejoin": 'round', className: 'lucide lucide-chevron-down-icon lucide-chevron-down', children: jsx("path", { d: 'm6 9 6 6 6-6' }) }));
-};
-
 /**
  * Accordion component
  *
  * A collapsible container that can show/hide content.
  * Supports controlled and uncontrolled modes.
  */
-const Accordion = ({ title, children, expanded, defaultExpanded = false, onChange, disabled = false, icon, backgroundColor, width }) => {
+const Accordion = ({ title, children, expanded, defaultExpanded = false, onChange, disabled = false, icon, backgroundColor, width, headerPadding, contentPadding, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
     // Use controlled value if provided, otherwise use internal state
     const isExpanded = expanded !== undefined ? expanded : internalExpanded;
@@ -783,14 +1112,12 @@ const Accordion = ({ title, children, expanded, defaultExpanded = false, onChang
             return;
         }
         const newExpanded = !isExpanded;
-        // Update internal state for uncontrolled mode
         if (expanded === undefined) {
             setInternalExpanded(newExpanded);
         }
-        // Call onChange callback
         onChange?.(newExpanded);
     };
-    return (jsxs("div", { className: ACCORDION_STYLES.root({ disabled, width }), children: [jsxs("button", { type: 'button', className: ACCORDION_STYLES.header({ disabled, backgroundColor }), onClick: handleToggle, disabled: disabled, "aria-expanded": isExpanded, children: [jsxs(Stack, { direction: 'row', align: 'center', gap: 'sm', width: '100%', children: [icon && (jsx(Icon, { color: disabled ? 'disabledText' : 'text', children: icon })), jsx(Text, { variant: 'label', color: disabled ? 'disabledText' : 'text', children: title })] }), jsx("div", { className: ACCORDION_STYLES.expandIcon({ expanded: isExpanded }), children: jsx(Icon, { color: disabled ? 'disabledText' : 'text', children: jsx(ChevronDownIcon, {}) }) })] }), jsx("div", { className: ACCORDION_STYLES.content({ expanded: isExpanded }), role: 'region', "aria-hidden": !isExpanded, children: children })] }));
+    return (jsxs("div", { className: ACCORDION_STYLES.root({ disabled, width }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [jsxs("button", { type: 'button', className: ACCORDION_STYLES.header({ disabled, backgroundColor, headerPadding }), onClick: handleToggle, disabled: disabled, "aria-expanded": isExpanded, children: [jsxs(Stack, { direction: 'row', align: 'center', gap: 'sm', width: '100%', children: [icon && (jsx(Icon, { color: disabled ? 'disabledText' : 'text', children: icon })), jsx(Text, { variant: 'label', color: disabled ? 'disabledText' : 'text', children: title })] }), jsx("div", { className: ACCORDION_STYLES.expandIcon({ expanded: isExpanded }), children: jsx(Icon, { color: disabled ? 'disabledText' : 'text', children: jsx(ChevronDownIcon, {}) }) })] }), jsx("div", { className: ACCORDION_STYLES.content({ expanded: isExpanded, contentPadding }), role: 'region', "aria-hidden": !isExpanded, children: children })] }));
 };
 Accordion.displayName = 'Accordion';
 
@@ -836,10 +1163,211 @@ const DRAWER_ITEM_STYLES = createStyles((theme) => ({
  * A navigation item for use in drawers/sidebars.
  * Similar to a text button with selected state support.
  */
-const DrawerItem = ({ label, startIcon, endIcon, selected = false, onClick, disabled, chip }) => {
-    return (jsxs("button", { onClick: onClick, disabled: disabled, type: 'button', className: DRAWER_ITEM_STYLES.root({ selected }), children: [jsxs(Stack, { children: [startIcon && (jsx(Icon, { children: startIcon })), jsx(Text, { variant: 'label', maxLines: 1, children: label }), endIcon && (jsx(Icon, { children: endIcon }))] }), chip && !selected && (jsx(Chip, { ...chip, size: '2xs', color: chip.color ?? 'info', disabled: disabled }))] }));
+const DrawerItem = ({ label, startIcon, endIcon, selected = false, onClick, disabled, chip, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+    return (jsxs("button", { onClick: onClick, disabled: disabled, type: 'button', className: DRAWER_ITEM_STYLES.root({ selected }), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: [jsxs(Stack, { children: [startIcon && (jsx(Icon, { children: startIcon })), jsx(Text, { variant: 'label', maxLines: 1, children: label }), endIcon && (jsx(Icon, { children: endIcon }))] }), chip && !selected && (jsx(Chip, { ...chip, size: '2xs', color: chip.color ?? 'info', disabled: disabled }))] }));
 };
 DrawerItem.displayName = 'DrawerItem';
 
-export { Accordion, Button, Card, Chip, DrawerItem, Grid, Icon, IconButton, Stack, Text };
+/**
+ * Breadcrumb styles using createStyles from @aurora-ds/theme
+ */
+const BREADCRUMB_STYLES = createStyles((theme) => ({
+    list: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        wordBreak: 'break-word',
+        fontSize: theme.fontSize.sm,
+        color: theme.colors.disabledText,
+        listStyle: 'none',
+        margin: 0,
+        padding: 0,
+    },
+}));
+
+/**
+ * BreadcrumbEllipsis styles using createStyles from @aurora-ds/theme
+ */
+const BREADCRUMB_ELLIPSIS_STYLES = createStyles((theme) => ({
+    item: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+    },
+    ellipsis: {
+        display: 'flex',
+        height: 36,
+        width: 36,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+}));
+
+/**
+ * BreadcrumbEllipsis component
+ * Renders an ellipsis item in the breadcrumb (includes the li wrapper)
+ */
+const BreadcrumbEllipsis = () => (jsx("li", { className: BREADCRUMB_ELLIPSIS_STYLES.item, children: jsx("span", { role: 'presentation', "aria-hidden": 'true', className: BREADCRUMB_ELLIPSIS_STYLES.ellipsis, children: jsx(Icon, { size: 'md', color: 'disabledText', children: jsx(MoreHorizontalIcon, {}) }) }) }));
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
+
+/**
+ * BreadcrumbSeparator component
+ */
+const BreadcrumbSeparator = () => (jsx("li", { role: 'presentation', "aria-hidden": 'true', children: jsx(Icon, { color: 'disabledText', size: 'sm', children: jsx(ChevronRightIcon, {}) }) }));
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+/**
+ * Inserts separators between breadcrumb items automatically
+ */
+const insertSeparators = (items, SeparatorComponent) => {
+    const result = [];
+    items.forEach((item, index) => {
+        // Add the item with a key
+        const itemWithKey = isValidElement(item)
+            ? cloneElement(item, { key: `item-${index}` })
+            : item;
+        result.push(itemWithKey);
+        // Add separator after each item except the last one
+        if (index < items.length - 1) {
+            result.push(jsx(SeparatorComponent, {}, `sep-${index}`));
+        }
+    });
+    return result;
+};
+
+/**
+ * Builds the breadcrumb children with ellipsis logic
+ */
+const buildBreadcrumbChildren = (items, maxItems, EllipsisComponent, SeparatorComponent) => {
+    if (!maxItems || items.length <= maxItems) {
+        return insertSeparators(items, SeparatorComponent);
+    }
+    // First item
+    const firstItem = items[0];
+    // Last (maxItems - 1) items
+    const lastItemsCount = maxItems - 1;
+    const lastItems = items.slice(-lastItemsCount);
+    // Build the result: first + separator + ellipsis + separator + last items with separators between them
+    const result = [];
+    // Add first item with key
+    const firstWithKey = isValidElement(firstItem)
+        ? cloneElement(firstItem, { key: 'first' })
+        : firstItem;
+    result.push(firstWithKey);
+    // Add separator + ellipsis + separator
+    result.push(jsx(SeparatorComponent, {}, 'sep-ellipsis-before'));
+    result.push(jsx(EllipsisComponent, {}, 'ellipsis'));
+    result.push(jsx(SeparatorComponent, {}, 'sep-ellipsis-after'));
+    // Add last items with separators between them
+    lastItems.forEach((item, index) => {
+        const itemWithKey = isValidElement(item)
+            ? cloneElement(item, { key: `last-${index}` })
+            : item;
+        result.push(itemWithKey);
+        // Add separator between items (but not after the last one)
+        if (index < lastItems.length - 1) {
+            result.push(jsx(SeparatorComponent, {}, `sep-last-${index}`));
+        }
+    });
+    return result;
+};
+
+/**
+ * Flattens children, extracting children from Fragments
+ */
+const flattenChildren = (children) => {
+    const result = [];
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === Fragment) {
+            result.push(...flattenChildren(child.props.children));
+        }
+        else {
+            result.push(child);
+        }
+    });
+    return result;
+};
+
+/**
+ * Checks if a React element is a BreadcrumbSeparator
+ */
+const isSeparator = (child) => {
+    return isValidElement(child) && child.type?.displayName === 'BreadcrumbSeparator';
+};
+
+/**
+ * Breadcrumb component
+ * Navigation component for hierarchical page structures
+ *
+ * @param maxItems - Maximum number of items to display (minimum 2).
+ *                   If exceeded, shows: first item + ellipsis + last (maxItems - 1) items
+ * @param children
+ * @param props
+ */
+const Breadcrumb = memo(({ maxItems, children, ...props }) => {
+    const allChildren = flattenChildren(children);
+    // Filter out any manually added separators (in case user added them)
+    const items = allChildren.filter(child => !isSeparator(child));
+    const renderedChildren = useMemo(() => buildBreadcrumbChildren(items, maxItems, BreadcrumbEllipsis, BreadcrumbSeparator), [items, maxItems]);
+    return (jsx("nav", { "aria-label": 'breadcrumb', ...props, children: jsx("ol", { className: BREADCRUMB_STYLES.list, children: renderedChildren }) }));
+});
+Breadcrumb.displayName = 'Breadcrumb';
+
+/**
+ * BreadcrumbLink styles using createStyles from @aurora-ds/theme
+ */
+const BREADCRUMB_LINK_STYLES = createStyles((theme) => ({
+    item: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        cursor: 'pointer'
+    },
+    link: {
+        transition: `color ${theme.transition.fast}, text-decoration-color ${theme.transition.fast}`,
+        color: theme.colors.disabledText,
+        textDecoration: 'underline',
+        textDecorationColor: 'transparent',
+        textUnderlineOffset: '3px',
+        ':hover': {
+            color: theme.colors.primary,
+            textDecorationColor: 'currentColor',
+        },
+    },
+}));
+
+/**
+ * BreadcrumbLink component
+ * Renders a clickable breadcrumb item with a link
+ */
+const BreadcrumbLink = memo((props) => {
+    const { children, onClick } = props;
+    return (jsx("li", { className: BREADCRUMB_LINK_STYLES.item, children: jsx("a", { className: BREADCRUMB_LINK_STYLES.link, onClick: onClick, children: jsx(Text, { variant: 'span', fontSize: 'sm', children: children }) }) }));
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+/**
+ * BreadcrumbPage styles using createStyles from @aurora-ds/theme
+ */
+const BREADCRUMB_PAGE_STYLES = createStyles((theme) => ({
+    item: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+    },
+    page: {
+        fontWeight: theme.fontWeight.medium,
+        color: theme.colors.primary,
+    },
+}));
+
+/**
+ * BreadcrumbPage component
+ * Renders the current page (non-clickable) in the breadcrumb
+ */
+const BreadcrumbPage = memo(({ children }) => (jsx("li", { className: BREADCRUMB_PAGE_STYLES.item, children: jsx("span", { className: BREADCRUMB_PAGE_STYLES.page, children: jsx(Text, { variant: 'span', fontSize: 'sm', color: 'primary', children: children }) }) })));
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+export { Accordion, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, DrawerItem, Form_default as Form, Grid, Icon, IconButton, Input_default as Input, Page, PageSection, Stack, Text, TextArea_default as TextArea };
 //# sourceMappingURL=index.js.map