@aurora-ds/components 0.15.4 → 0.16.0

package/dist/esm/index.js

@@ -1,6 +1,7 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import React, { Children, isValidElement, cloneElement, createElement, Fragment, useMemo, memo, useCallback, forwardRef, useState, useRef, useEffect, useLayoutEffect } from 'react';
-import { createStyles, useTheme, colors } from '@aurora-ds/theme';
+import { createStyles, useTheme, keyframes, colors } from '@aurora-ds/theme';
+import { createPortal } from 'react-dom';
 
 const ICON_STYLES = createStyles((theme) => ({
     root: (size, color, backgroundColor, padding, borderRadius) => ({
@@ -533,6 +534,31 @@ const AvatarGroup = ({ children, limit, size = 'medium' }) => {
 };
 AvatarGroup.displayName = 'AvatarGroup';
 
+const shimmerAnimation = keyframes({
+    '0%': {
+        backgroundPosition: '-200% 0',
+    },
+    '100%': {
+        backgroundPosition: '200% 0',
+    },
+});
+
+const SKELETON_STYLES = createStyles((theme) => ({
+    root: (width, height, borderRadius) => ({
+        width,
+        height,
+        borderRadius: borderRadius ? theme.radius[borderRadius] : theme.radius.md,
+        background: `linear-gradient(90deg, ${theme.colors.surfaceActive} 25%, ${theme.colors.surfaceHover} 50%, ${theme.colors.surfaceActive} 75%)`,
+        backgroundSize: '200% 100%',
+        animation: `${shimmerAnimation} 1.2s ease-in-out infinite`,
+    }),
+}));
+
+const Skeleton = ({ width, height, borderRadius }) => {
+    return (jsx("div", { className: SKELETON_STYLES.root(width, height, borderRadius) }));
+};
+Skeleton.displayName = 'Skeleton';
+
 const getButtonSizeStyles = () => ({
     small: {
         height: BUTTON_SIZE - 8,
@@ -764,15 +790,15 @@ const FORM_STYLES = createStyles(() => ({
 /**
  * Form component - A transparent wrapper for form elements with automatic preventDefault handling
  */
-const Form = ({ children, onSubmit, ariaLabel, }) => {
+const Form$1 = ({ 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);
+Form$1.displayName = 'Form';
+var Form = memo(Form$1);
 
 /**
  * Input styles using createStyles from @aurora-ds/theme
@@ -897,6 +923,8 @@ 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 CloseIcon = () => (jsx("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: jsx("path", { d: 'M12 4L4 12M4 4l8 8', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
+
 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' })] }));
 };
@@ -1002,6 +1030,302 @@ const TextArea = forwardRef(({ value, onChange, label, mandatory = false, placeh
 TextArea.displayName = 'TextArea';
 var TextArea_default = memo(TextArea);
 
+/**
+ * Select styles using createStyles from @aurora-ds/theme
+ */
+const SELECT_STYLES = createStyles((theme) => ({
+    root: ({ disabled = false, width }) => ({
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        boxSizing: 'border-box',
+        width: 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,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        transition: `border-color ${theme.transition.fast}`,
+        outline: 'none',
+        minHeight: BUTTON_SIZE,
+        maxHeight: BUTTON_SIZE,
+        gap: theme.spacing.md,
+        lineHeight: theme.lineHeight.none,
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        ...(disabled && {
+            color: theme.colors.disabled,
+            cursor: 'not-allowed',
+            opacity: theme.opacity.high
+        }),
+        ...(!disabled && {
+            ':hover': {
+                borderColor: theme.colors.primaryHover,
+            },
+        }),
+    }),
+    trigger: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        flex: 1
+    },
+    value: {
+        flex: 1,
+        fontSize: theme.fontSize.md,
+        color: theme.colors.text
+    },
+    placeholder: {
+        flex: 1,
+        fontSize: theme.fontSize.md,
+        color: theme.colors.textSecondary
+    }
+}));
+
+/**
+ * SelectItem styles using createStyles from @aurora-ds/theme
+ */
+const SELECT_ITEM_STYLES = createStyles((theme) => ({
+    root: ({ isSelected = false, disabled = false }) => ({
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        padding: theme.spacing.sm,
+        borderRadius: theme.radius.sm,
+        backgroundColor: isSelected ? theme.colors.primary : theme.colors.surface,
+        outline: 'none',
+        border: 'none',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        minHeight: MENU_ITEM_SIZE,
+        maxHeight: MENU_ITEM_SIZE,
+        flexShrink: 0,
+        transition: 'background-color 150ms ease-in-out',
+        color: disabled ? theme.colors.disabled : (isSelected ? theme.colors.surface : theme.colors.text),
+        opacity: disabled ? 0.5 : 1,
+        ':hover': {
+            backgroundColor: disabled ? theme.colors.surface : (isSelected ? theme.colors.primary : theme.colors.surfaceHover),
+        },
+    })
+}));
+
+/**
+ * SelectItem component for use inside Select dropdown
+ */
+const SelectItem = ({ option, isSelected = false, onSelect }) => {
+    const handleClick = () => {
+        if (!option.disabled && onSelect) {
+            onSelect(option.value);
+        }
+    };
+    return (jsx("button", { className: SELECT_ITEM_STYLES.root({ isSelected, disabled: option.disabled }), onClick: handleClick, role: 'option', "aria-selected": isSelected, children: jsx(Text, { variant: 'label', maxLines: 1, children: option.label }) }));
+};
+SelectItem.displayName = 'SelectItem';
+
+const MENU_STYLES = createStyles((theme) => ({
+    root: (isFadingIn, anchorOrigin, position, width) => ({
+        position: 'absolute',
+        zIndex: theme.zIndex.dropdown,
+        marginTop: theme.spacing.xs,
+        backgroundColor: theme.colors.surface,
+        borderRadius: theme.radius.md,
+        border: `1px solid ${theme.colors.border}`,
+        boxShadow: theme.shadows.md,
+        minWidth: 150,
+        maxHeight: MENU_ITEM_SIZE * 8,
+        overflowY: 'auto',
+        width,
+        opacity: isFadingIn ? 1 : 0,
+        transform: isFadingIn ? 'scale(1)' : 'scale(0.95)',
+        transformOrigin: anchorOrigin === 'right' ? 'top right' : 'top left',
+        transition: `opacity ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out, transform ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out`,
+        top: position?.top ?? 0,
+        left: position?.left ?? 0,
+        visibility: position ? 'visible' : 'hidden',
+    }),
+}));
+
+/**
+ * Hook pour calculer la position d'un élément par rapport à son ancre
+ * @param anchor - Élément HTML servant d'ancre
+ * @param menuRef - Référence vers l'élément à positionner
+ * @param anchorOrigin - Origine de l'ancrage ('left' ou 'right')
+ * @param isVisible - Si l'élément est visible (pour recalculer la position)
+ */
+const useAnchorPosition = ({ anchor, menuRef, anchorOrigin = 'right', isVisible }) => {
+    const [position, setPosition] = useState(null);
+    useLayoutEffect(() => {
+        if (anchor && isVisible) {
+            const anchorRect = anchor.getBoundingClientRect();
+            const menuWidth = menuRef.current?.offsetWidth || 150;
+            const left = anchorOrigin === 'right'
+                ? anchorRect.right - menuWidth + window.scrollX
+                : anchorRect.left + window.scrollX;
+            setPosition({
+                top: anchorRect.bottom + window.scrollY,
+                left
+            });
+        }
+        else {
+            setPosition(null);
+        }
+    }, [anchor, anchorOrigin, isVisible, menuRef]);
+    return position;
+};
+
+/**
+ * Gestion d'un click en dehors d'un ou plusieurs éléments
+ * @param refs Tableau de références à écouter
+ * @param onClickOutside Callback si clic à l'extérieur
+ * @param shouldTrigger Activation du comportement
+ */
+const useClickOutside = (refs, onClickOutside, shouldTrigger = true) => {
+    useEffect(() => {
+        if (!shouldTrigger) {
+            return;
+        }
+        const handleClick = (event) => {
+            const isInside = refs.some(ref => ref.current?.contains(event.target));
+            if (!isInside) {
+                onClickOutside();
+            }
+        };
+        document.addEventListener('mousedown', handleClick);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, [refs, onClickOutside, shouldTrigger]);
+};
+
+/**
+ * Hook pour gérer les animations de transition lors des renders
+ * @param isOpen - État d'ouverture
+ * @param duration - Durée de la transition en ms
+ */
+const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isFadingIn, setIsFadingIn] = useState(false);
+    useEffect(() => {
+        if (isOpen) {
+            setIsVisible(true);
+            const timeout = setTimeout(() => {
+                setIsFadingIn(true);
+            }, 10);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+        else {
+            setIsFadingIn(false);
+            const timeout = setTimeout(() => {
+                setIsVisible(false);
+            }, duration);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }
+    }, [isOpen, duration]);
+    return {
+        isVisible,
+        isFadingIn
+    };
+};
+
+const Menu = ({ anchor, onClose, children, anchorOrigin = 'right', width }) => {
+    // refs
+    const menuRef = useRef(null);
+    const anchorRef = useRef(null);
+    // variables
+    const isOpen = Boolean(anchor);
+    const refs = useMemo(() => [menuRef, anchorRef], []);
+    // hooks
+    const { isVisible, isFadingIn } = useTransitionRender(isOpen);
+    const position = useAnchorPosition({ anchor: anchorRef.current, menuRef, anchorOrigin, isVisible });
+    // useEffects
+    useEffect(() => {
+        if (anchor) {
+            anchorRef.current = anchor;
+        }
+    }, [anchor]);
+    useEffect(() => {
+        if (!isVisible) {
+            anchorRef.current = null;
+        }
+    }, [isVisible]);
+    useClickOutside(refs, onClose, isVisible);
+    if (!isVisible) {
+        return null;
+    }
+    return (jsx("div", { ref: menuRef, className: MENU_STYLES.root(isFadingIn, anchorOrigin, position, width), children: children }));
+};
+Menu.displayName = 'Menu';
+
+const MENU_GROUP_STYLES = createStyles((theme) => ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: theme.spacing.xs,
+    },
+}));
+
+const MenuGroup = ({ children }) => {
+    return (jsx("div", { className: MENU_GROUP_STYLES.root, children: children }));
+};
+MenuGroup.displayName = 'MenuGroup';
+
+const MENU_ITEM_STYLES = createStyles((theme) => ({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing.sm,
+        padding: theme.spacing.sm,
+        borderRadius: theme.radius.sm,
+        backgroundColor: theme.colors.surface,
+        outline: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        minHeight: MENU_ITEM_SIZE,
+        maxHeight: MENU_ITEM_SIZE,
+        flexShrink: 0,
+        transition: 'background-color 150ms ease-in-out',
+        ':hover': {
+            backgroundColor: theme.colors.surfaceHover,
+        },
+    },
+}));
+
+const MenuItem = ({ label, icon, onClick, textColor, iconColor }) => {
+    return (jsxs("button", { className: MENU_ITEM_STYLES.root, onClick: onClick, children: [icon && (jsx(Icon, { color: iconColor ?? 'text', size: 'sm', children: icon })), jsx(Text, { variant: 'label', color: textColor ?? 'text', maxLines: 1, fontSize: 'sm', children: label })] }));
+};
+MenuItem.displayName = 'MenuItem';
+
+/**
+ * Select component that uses Menu for dropdown
+ */
+const Select = ({ options, value, onChange, placeholder = 'Select an option', disabled = false, width }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const selectedOption = options.find(option => option.value === value);
+    const handleTriggerClick = () => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    const handleSelect = (selectedValue) => {
+        onChange?.(selectedValue);
+        setIsOpen(false);
+    };
+    return (jsxs(Fragment$1, { children: [jsxs("div", { ref: triggerRef, className: SELECT_STYLES.root({ disabled, width }), onClick: handleTriggerClick, role: 'button', tabIndex: disabled ? -1 : 0, "aria-expanded": isOpen, "aria-haspopup": 'listbox', children: [jsx("div", { className: SELECT_STYLES.trigger, children: jsx(Text, { variant: 'p', maxLines: 1, color: selectedOption ? 'text' : 'textSecondary', children: selectedOption ? selectedOption.label : placeholder }) }), jsx(Icon, { children: jsx(ChevronDownIcon, {}) })] }), jsx(Menu, { anchor: isOpen ? triggerRef.current : null, onClose: handleClose, width: width, children: jsx(MenuGroup, { children: options.map(option => (jsx(SelectItem, { option: option, isSelected: option.value === value, onSelect: handleSelect }, option.value))) }) })] }));
+};
+Select.displayName = 'Select';
+
 /**
  * Card styles using createStyles from @aurora-ds/theme
  */
@@ -1033,7 +1357,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, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Card = ({ children, direction = 'column', padding = 'md', width, height, gap, radius = 'md', shadow = 'none', align, justify, backgroundColor = 'surface', borderColor = 'border', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     return (jsx("div", { className: CARD_STYLES.root({
             direction,
             padding,
@@ -1263,182 +1587,66 @@ const Accordion = ({ title, children, expanded, defaultExpanded = false, onChang
 };
 Accordion.displayName = 'Accordion';
 
-const MENU_STYLES = createStyles((theme) => ({
-    root: (isFadingIn, anchorOrigin, position, width) => ({
-        position: 'absolute',
-        zIndex: theme.zIndex.dropdown,
-        marginTop: theme.spacing.xs,
-        backgroundColor: theme.colors.surface,
-        borderRadius: theme.radius.md,
-        border: `1px solid ${theme.colors.border}`,
-        boxShadow: theme.shadows.md,
-        minWidth: 150,
-        maxHeight: MENU_ITEM_SIZE * 8,
-        overflowY: 'auto',
-        width,
+const MODAL_STYLES = createStyles((theme) => ({
+    background: (isFadingIn) => ({
+        background: 'rgba(0, 0, 0, 0.6)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        zIndex: 999999,
+        transition: 'opacity 150ms ease-in-out',
+        width: '100vw',
+        height: '100vh',
         opacity: isFadingIn ? 1 : 0,
-        transform: isFadingIn ? 'scale(1)' : 'scale(0.95)',
-        transformOrigin: anchorOrigin === 'right' ? 'top right' : 'top left',
-        transition: `opacity ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out, transform ${DEFAULT_TRANSITION_DURATION_MS}ms ease-out`,
-        top: position?.top ?? 0,
-        left: position?.left ?? 0,
-        visibility: position ? 'visible' : 'hidden',
+    }),
+    content: (isFadingIn) => ({
+        width: '100%',
+        maxWidth: 500,
+        borderRadius: 8,
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        transform: isFadingIn ? 'translate(-50%, -50%) scale(1)' : 'translate(-50%, -50%) scale(0.95)',
+        transformOrigin: 'center center',
+        transition: 'transform 150ms ease-in-out',
+        backgroundColor: theme.colors.background,
+        padding: theme.spacing.md,
+        display: 'flex',
+        flexDirection: 'column',
+        height: 'fit-content',
+        alignItems: 'flex-start',
+        gap: theme.spacing.md,
     }),
 }));
 
-/**
- * Hook pour calculer la position d'un élément par rapport à son ancre
- * @param anchor - Élément HTML servant d'ancre
- * @param menuRef - Référence vers l'élément à positionner
- * @param anchorOrigin - Origine de l'ancrage ('left' ou 'right')
- * @param isVisible - Si l'élément est visible (pour recalculer la position)
- */
-const useAnchorPosition = ({ anchor, menuRef, anchorOrigin = 'right', isVisible }) => {
-    const [position, setPosition] = useState(null);
-    useLayoutEffect(() => {
-        if (anchor && isVisible) {
-            const anchorRect = anchor.getBoundingClientRect();
-            const menuWidth = menuRef.current?.offsetWidth || 150;
-            const left = anchorOrigin === 'right'
-                ? anchorRect.right - menuWidth + window.scrollX
-                : anchorRect.left + window.scrollX;
-            setPosition({
-                top: anchorRect.bottom + window.scrollY,
-                left
-            });
-        }
-        else {
-            setPosition(null);
-        }
-    }, [anchor, anchorOrigin, isVisible, menuRef]);
-    return position;
-};
-
-/**
- * Gestion d'un click en dehors d'un ou plusieurs éléments
- * @param refs Tableau de références à écouter
- * @param onClickOutside Callback si clic à l'extérieur
- * @param shouldTrigger Activation du comportement
- */
-const useClickOutside = (refs, onClickOutside, shouldTrigger = true) => {
-    useEffect(() => {
-        if (!shouldTrigger) {
-            return;
-        }
-        const handleClick = (event) => {
-            const isInside = refs.some(ref => ref.current?.contains(event.target));
-            if (!isInside) {
-                onClickOutside();
-            }
-        };
-        document.addEventListener('mousedown', handleClick);
-        return () => {
-            document.removeEventListener('mousedown', handleClick);
-        };
-    }, [refs, onClickOutside, shouldTrigger]);
-};
-
-/**
- * Hook pour gérer les animations de transition lors des renders
- * @param isOpen - État d'ouverture
- * @param duration - Durée de la transition en ms
- */
-const useTransitionRender = (isOpen, duration = DEFAULT_TRANSITION_DURATION_MS) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const [isFadingIn, setIsFadingIn] = useState(false);
-    useEffect(() => {
-        if (isOpen) {
-            setIsVisible(true);
-            const timeout = setTimeout(() => {
-                setIsFadingIn(true);
-            }, 10);
-            return () => {
-                clearTimeout(timeout);
-            };
-        }
-        else {
-            setIsFadingIn(false);
-            const timeout = setTimeout(() => {
-                setIsVisible(false);
-            }, duration);
-            return () => {
-                clearTimeout(timeout);
-            };
-        }
-    }, [isOpen, duration]);
-    return {
-        isVisible,
-        isFadingIn
-    };
-};
-
-const Menu = ({ anchor, onClose, children, anchorOrigin = 'right', width }) => {
+const Modal = ({ isOpen, onClose, label, children, isForm, action }) => {
     // refs
-    const menuRef = useRef(null);
-    const anchorRef = useRef(null);
-    // variables
-    const isOpen = Boolean(anchor);
-    const refs = useMemo(() => [menuRef, anchorRef], []);
+    const modalRef = useRef(null);
     // hooks
     const { isVisible, isFadingIn } = useTransitionRender(isOpen);
-    const position = useAnchorPosition({ anchor: anchorRef.current, menuRef, anchorOrigin, isVisible });
-    // useEffects
     useEffect(() => {
-        if (anchor) {
-            anchorRef.current = anchor;
-        }
-    }, [anchor]);
-    useEffect(() => {
-        if (!isVisible) {
-            anchorRef.current = null;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape' && isOpen) {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose]);
+    // components
+    const Wrapper = isForm ? Form : Fragment;
+    const wrapperProps = isForm ? {
+        onSubmit: (e) => {
+            e.preventDefault();
+            action?.onClick();
         }
-    }, [isVisible]);
-    useClickOutside(refs, onClose, isVisible);
-    if (!isVisible) {
-        return null;
-    }
-    return (jsx("div", { ref: menuRef, className: MENU_STYLES.root(isFadingIn, anchorOrigin, position, width), children: children }));
-};
-Menu.displayName = 'Menu';
-
-const MENU_GROUP_STYLES = createStyles((theme) => ({
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: theme.spacing.xs,
-    },
-}));
-
-const MenuGroup = ({ children }) => {
-    return (jsx("div", { className: MENU_GROUP_STYLES.root, children: children }));
+    } : {};
+    return createPortal(jsx(Fragment, { children: isVisible ? (jsx("div", { className: MODAL_STYLES.background(isFadingIn), ref: modalRef, children: jsx("div", { className: MODAL_STYLES.content(isFadingIn), children: jsxs(Wrapper, { ...wrapperProps, children: [jsxs(Stack, { justify: 'space-between', height: BUTTON_SIZE, width: '100%', children: [jsx(Text, { variant: 'h3', children: label }), !action && (jsx(IconButton, { icon: jsx(CloseIcon, {}), onClick: onClose, size: 'small', variant: 'text', textColor: 'text' }))] }), children, action && (jsxs(Stack, { justify: 'flex-end', children: [jsx(Button, { label: 'Cancel', onClick: onClose, variant: 'outlined' }), jsx(Button, { label: action.label, onClick: !isForm ? action.onClick : undefined, type: isForm ? 'submit' : 'button', disabled: action.disabled })] }))] }) }) })) : null }), document.body);
 };
-MenuGroup.displayName = 'MenuGroup';
-
-const MENU_ITEM_STYLES = createStyles((theme) => ({
-    root: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: theme.spacing.sm,
-        padding: theme.spacing.sm,
-        borderRadius: theme.radius.sm,
-        backgroundColor: theme.colors.surface,
-        outline: 'none',
-        border: 'none',
-        cursor: 'pointer',
-        minHeight: MENU_ITEM_SIZE,
-        maxHeight: MENU_ITEM_SIZE,
-        flexShrink: 0,
-        transition: 'background-color 150ms ease-in-out',
-        ':hover': {
-            backgroundColor: theme.colors.surfaceHover,
-        },
-    },
-}));
-
-const MenuItem = ({ label, icon, onClick, textColor, iconColor }) => {
-    return (jsxs("button", { className: MENU_ITEM_STYLES.root, onClick: onClick, children: [icon && (jsx(Icon, { color: iconColor ?? 'text', size: 'sm', children: icon })), jsx(Text, { variant: 'label', color: textColor ?? 'text', maxLines: 1, fontSize: 'sm', children: label })] }));
-};
-MenuItem.displayName = 'MenuItem';
+Modal.displayName = 'Modal';
 
 /**
  * DrawerItem styles using createStyles from @aurora-ds/theme
@@ -1751,5 +1959,5 @@ const TabItem = ({ label, isActive = false, onClick, }) => {
 };
 TabItem.displayName = 'TabItem';
 
-export { Accordion, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, DrawerItem, Form_default as Form, Grid, Icon, IconButton, Input_default as Input, Menu, MenuGroup, MenuItem, Page, PageSection, Separator, Stack, TabItem, Tabs, Text, TextArea_default as TextArea, useAnchorPosition, useClickOutside, useTransitionRender };
+export { Accordion, Avatar, AvatarGroup, Breadcrumb, BreadcrumbEllipsis, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, Button, Card, Chip, DrawerItem, Form, Grid, Icon, IconButton, Input_default as Input, Menu, MenuGroup, MenuItem, Modal, Page, PageSection, Select, Separator, Skeleton, Stack, TabItem, Tabs, Text, TextArea_default as TextArea, useAnchorPosition, useClickOutside, useTransitionRender };
 //# sourceMappingURL=index.js.map