@common-origin/design-system 2.19.0 → 2.21.0

package/dist/components/molecules/AccountCard/AccountCard.d.mts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { type IconName } from '../../atoms/Icon/index.mjs';
+export type AccountType = 'checking' | 'savings' | 'credit' | 'investment' | 'loan';
+export type TrendDirection = 'up' | 'down' | 'neutral';
+export interface AccountCardAction {
+    label: string;
+    onClick: () => void;
+    icon?: IconName;
+    variant?: 'primary' | 'secondary' | 'naked';
+}
+export interface AccountCardProps {
+    /** Type of account */
+    accountType: AccountType;
+    /** Display name of the account */
+    accountName: string;
+    /** Account balance */
+    balance: number;
+    /** Optional account number (last 4 digits) */
+    accountNumber?: string;
+    /** Trend direction for balance change */
+    trend?: TrendDirection;
+    /** Trend value (e.g., percentage or amount) */
+    trendValue?: string;
+    /** Primary action button */
+    action?: AccountCardAction;
+    /** Secondary action button */
+    secondaryAction?: AccountCardAction;
+    /** Currency code */
+    currency?: string;
+    /** Whether the card should be interactive (clickable) */
+    onClick?: () => void;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * AccountCard component
+ *
+ * Displays account information in a card format with account type icon,
+ * name, balance, optional trend indicator, and action buttons. Minimum
+ * 300x200px with elevation and hover effects.
+ *
+ * Composes: Stack, Box, Avatar, Typography, MoneyDisplay, Button
+ */
+export declare const AccountCard: React.FC<AccountCardProps>;

package/dist/components/molecules/AccountCard/AccountCard.mjs

@@ -0,0 +1,191 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Stack } from '../../atoms/Stack/Stack.mjs';
+import { Box } from '../../atoms/Box/Box.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { MoneyDisplay } from '../../atoms/MoneyDisplay/MoneyDisplay.mjs';
+import { Button } from '../../atoms/Button/Button.mjs';
+import { CategoryLabel } from '../../atoms/CategoryLabel/CategoryLabel.mjs';
+import { Avatar } from '../../atoms/Avatar/Avatar.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+// Destructure tokens for cleaner access
+var semantic = tokens.semantic;
+var space = semantic.space;
+var StyledBalanceSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AccountCard__StyledBalanceSection",
+  componentId: "sc-1erp7zn-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), space[400]);
+var StyledTrendSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AccountCard__StyledTrendSection",
+  componentId: "sc-1erp7zn-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), space[100]);
+/*#__PURE__*/styled.div.withConfig({
+  displayName: "AccountCard__StyledActions",
+  componentId: "sc-1erp7zn-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"], ["\n  display: flex;\n  gap: ", ";\n  margin-top: auto;\n"])), space[200]);
+var StyledStackWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AccountCard__StyledStackWrapper",
+  componentId: "sc-1erp7zn-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var StyledHeaderWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "AccountCard__StyledHeaderWrapper",
+  componentId: "sc-1erp7zn-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: calc(-1 * ", ");\n  }\n"], ["\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: ", ";\n\n  & > span {\n    margin-top: calc(-1 * ", ");\n  }\n"
+// Map trend direction to icon and color
+])), tokens.component.accountCard.header.minHeight, space[0], space[100]);
+// Map trend direction to icon and color
+var trendToIcon = {
+  up: 'arrowUp',
+  down: 'arrowDown',
+  neutral: 'arrowRight'
+};
+var trendToColor = {
+  up: 'green',
+  down: 'red',
+  neutral: 'blue'
+};
+/**
+ * AccountCard component
+ *
+ * Displays account information in a card format with account type icon,
+ * name, balance, optional trend indicator, and action buttons. Minimum
+ * 300x200px with elevation and hover effects.
+ *
+ * Composes: Stack, Box, Avatar, Typography, MoneyDisplay, Button
+ */
+var AccountCard = function AccountCard(_a) {
+  var accountName = _a.accountName,
+    balance = _a.balance,
+    accountNumber = _a.accountNumber,
+    trend = _a.trend,
+    trendValue = _a.trendValue,
+    action = _a.action,
+    secondaryAction = _a.secondaryAction,
+    _b = _a.currency,
+    currency = _b === void 0 ? 'AUD' : _b,
+    onClick = _a.onClick,
+    dataTestId = _a["data-testid"];
+  var isClickable = !!onClick;
+  // Get trend icon and color
+  var trendIcon = trend ? trendToIcon[trend] : undefined;
+  var trendColor = trend ? trendToColor[trend] : undefined;
+  var handleClick = function handleClick() {
+    if (isClickable && onClick) {
+      onClick();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+  };
+  return jsx(Box, {
+    minWidth: tokens.component.accountCard.minWidth,
+    p: "lg",
+    bg: "subtle",
+    border: "default",
+    borderRadius: "xl",
+    transition: "box-shadow ".concat(semantic.motion.duration.moderate, " ").concat(semantic.motion.easing.decelerate),
+    cursor: isClickable ? 'pointer' : 'default',
+    hoverShadow: isClickable ? 'floating' : undefined,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: isClickable ? 0 : undefined,
+    role: isClickable ? 'button' : 'article',
+    "aria-label": isClickable ? "".concat(accountName, " account, balance ").concat(balance) : undefined,
+    "data-testid": dataTestId,
+    children: jsx(StyledStackWrapper, {
+      children: jsxs(Stack, {
+        direction: "row",
+        justifyContent: "space-between",
+        children: [jsxs(Stack, {
+          direction: "row",
+          gap: "md",
+          children: [jsx(Avatar, {
+            name: accountName,
+            size: "lg",
+            "data-testid": dataTestId ? "".concat(dataTestId, "-avatar") : undefined
+          }), jsxs(Stack, {
+            direction: "column",
+            justifyContent: "space-between",
+            alignItems: "stretch",
+            gap: "md",
+            children: [jsx(Stack, {
+              direction: "row",
+              gap: "md",
+              alignItems: "center",
+              children: jsxs(StyledHeaderWrapper, {
+                children: [jsx(Typography, {
+                  variant: "h4",
+                  children: accountName
+                }), accountNumber && jsxs(Typography, {
+                  variant: "small",
+                  color: "subdued",
+                  children: ["\u2022\u2022\u2022\u2022 ", accountNumber]
+                })]
+              })
+            }), jsx(StyledBalanceSection, {
+              children: jsxs(Stack, {
+                direction: "row",
+                gap: "sm",
+                children: [jsx(MoneyDisplay, {
+                  amount: balance,
+                  currency: currency,
+                  size: "medium",
+                  "data-testid": dataTestId ? "".concat(dataTestId, "-balance") : undefined
+                }), jsx(Typography, {
+                  color: "subdued",
+                  children: "Available"
+                }), trend && trendValue && jsx(StyledTrendSection, {
+                  "aria-label": "Trend ".concat(trend),
+                  role: "img",
+                  children: jsx(CategoryLabel, {
+                    size: "medium",
+                    icon: trendIcon,
+                    color: trendColor,
+                    variant: "minimal",
+                    children: trendValue
+                  })
+                })]
+              })
+            })]
+          })]
+        }), (action || secondaryAction) && jsxs(Stack, {
+          direction: "row",
+          gap: "sm",
+          justifyContent: "flex-end",
+          children: [secondaryAction && jsx(Button, {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              secondaryAction.onClick();
+            },
+            variant: secondaryAction.variant || 'secondary',
+            iconName: secondaryAction.icon,
+            "data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined,
+            size: "small",
+            children: secondaryAction.label
+          }), action && jsx(Button, {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              action.onClick();
+            },
+            variant: action.variant || 'primary',
+            iconName: action.icon,
+            "data-testid": dataTestId ? "".concat(dataTestId, "-action") : undefined,
+            size: "small",
+            children: action.label
+          })]
+        })]
+      })
+    })
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { AccountCard };
+//# sourceMappingURL=AccountCard.mjs.map

package/dist/components/molecules/AccountCard/AccountCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountCard.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/AccountCard/index.d.mts

@@ -0,0 +1,2 @@
+export { AccountCard } from './AccountCard.mjs';
+export type { AccountCardProps, AccountType, TrendDirection, AccountCardAction } from './AccountCard.mjs';

package/dist/components/molecules/ActionSheet/ActionSheet.d.mts

@@ -0,0 +1,111 @@
+import React from 'react';
+import { type IconName } from '../../../types/icons.mjs';
+/**
+ * Action item for the action sheet
+ */
+export interface Action {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Optional icon
+     */
+    icon?: IconName;
+    /**
+     * Whether this is a destructive action (shown in red)
+     * @default false
+     */
+    destructive?: boolean;
+    /**
+     * Whether this action is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when action is selected
+     */
+    onSelect: () => void;
+}
+/**
+ * Props for the ActionSheet component
+ */
+export interface ActionSheetProps {
+    /**
+     * Whether the action sheet is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback when the action sheet should close
+     */
+    onClose: () => void;
+    /**
+     * Title of the action sheet
+     */
+    title?: string;
+    /**
+     * Optional description
+     */
+    description?: string;
+    /**
+     * Array of actions
+     */
+    actions: Action[];
+    /**
+     * Whether to close on overlay click
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Whether to close on Escape key
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Show close button in header
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Test identifier
+     */
+    'data-testid'?: string;
+}
+/**
+ * ActionSheet component for bottom sheet modals
+ *
+ * Displays a modal action sheet that slides up from the bottom,
+ * providing a list of actions for the user to choose from.
+ * Includes focus trapping, keyboard navigation, and accessibility features.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * <ActionSheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Choose an action"
+ *   actions={[
+ *     {
+ *       id: 'edit',
+ *       label: 'Edit',
+ *       icon: 'edit',
+ *       onSelect: () => console.log('Edit')
+ *     },
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: 'trash',
+ *       destructive: true,
+ *       onSelect: () => console.log('Delete')
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ActionSheet: ({ isOpen, onClose, title, description, actions, closeOnOverlayClick, closeOnEscape, showCloseButton, "data-testid": dataTestId }: ActionSheetProps) => React.ReactPortal | null;

package/dist/components/molecules/ActionSheet/ActionSheet.mjs

@@ -0,0 +1,283 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import styled$module, { keyframes } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Divider } from '../../atoms/Divider/Divider.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { Stack } from '../../atoms/Stack/Stack.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { ListItem } from '../List/ListItem.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+import { exitAnimation, reducedMotion } from '../../../lib/styleUtils.mjs';
+import { usePresence, useInert } from '../../../lib/usePresence.mjs';
+
+var _a = tokens.semantic,
+  color = _a.color,
+  border = _a.border,
+  space = _a.space,
+  motion = _a.motion,
+  elevation = _a.elevation;
+var slideUp = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
+var fadeIn = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var StyledOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ActionSheet__StyledOverlay",
+  componentId: "sc-regbol-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"])), tokens.semantic.surface.scrim, tokens.semantic.layer.modal, fadeIn, motion.duration.moderate, motion.easing.decelerate, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+});
+var StyledActionSheet = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ActionSheet__StyledActionSheet",
+  componentId: "sc-regbol-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), tokens.semantic.surface.raised, tokens.semantic.radius.lg, tokens.semantic.radius.lg, elevation.overlay, tokens.semantic.layer.modal, slideUp, motion.duration.slow, motion.easing.decelerate, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}, reducedMotion, fadeIn, motion.duration.slow, motion.easing.decelerate, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+});
+var StyledHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ActionSheet__StyledHeader",
+  componentId: "sc-regbol-2"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), space[400], space[400], space[300], border["default"]);
+var StyledHeaderContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ActionSheet__StyledHeaderContent",
+  componentId: "sc-regbol-3"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var StyledCloseButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ActionSheet__StyledCloseButton",
+  componentId: "sc-regbol-4"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), space[200], color.icon.muted, tokens.semantic.radius.sm, motion.transition.feedback, space[200], color.icon["default"], color.fill.muted, border.focus, border.focusOffset);
+var StyledActionsList = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "ActionSheet__StyledActionsList",
+  componentId: "sc-regbol-5"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"], ["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"
+/**
+ * ActionSheet component for bottom sheet modals
+ *
+ * Displays a modal action sheet that slides up from the bottom,
+ * providing a list of actions for the user to choose from.
+ * Includes focus trapping, keyboard navigation, and accessibility features.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * <ActionSheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Choose an action"
+ *   actions={[
+ *     {
+ *       id: 'edit',
+ *       label: 'Edit',
+ *       icon: 'edit',
+ *       onSelect: () => console.log('Edit')
+ *     },
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: 'trash',
+ *       destructive: true,
+ *       onSelect: () => console.log('Delete')
+ *     }
+ *   ]}
+ * />
+ * ```
+ */])), space[200], space[300]);
+/**
+ * ActionSheet component for bottom sheet modals
+ *
+ * Displays a modal action sheet that slides up from the bottom,
+ * providing a list of actions for the user to choose from.
+ * Includes focus trapping, keyboard navigation, and accessibility features.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * <ActionSheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Choose an action"
+ *   actions={[
+ *     {
+ *       id: 'edit',
+ *       label: 'Edit',
+ *       icon: 'edit',
+ *       onSelect: () => console.log('Edit')
+ *     },
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: 'trash',
+ *       destructive: true,
+ *       onSelect: () => console.log('Delete')
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+var ActionSheet = function ActionSheet(_a) {
+  var isOpen = _a.isOpen,
+    onClose = _a.onClose,
+    title = _a.title,
+    description = _a.description,
+    actions = _a.actions,
+    _b = _a.closeOnOverlayClick,
+    closeOnOverlayClick = _b === void 0 ? true : _b,
+    _c = _a.closeOnEscape,
+    closeOnEscape = _c === void 0 ? true : _c,
+    _d = _a.showCloseButton,
+    showCloseButton = _d === void 0 ? true : _d,
+    dataTestId = _a["data-testid"];
+  var sheetRef = useRef(null);
+  var previousActiveElement = useRef(null);
+  var _e = usePresence(isOpen),
+    isPresent = _e.isPresent,
+    isExiting = _e.isExiting;
+  useInert(sheetRef, isExiting);
+  // Store the element that had focus when sheet opened
+  useEffect(function () {
+    if (isOpen) {
+      previousActiveElement.current = document.activeElement;
+    }
+  }, [isOpen]);
+  // Focus management and escape key handling
+  useEffect(function () {
+    if (!isOpen) return;
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Escape' && closeOnEscape) {
+        e.preventDefault();
+        onClose();
+      }
+      // Focus trap
+      if (e.key === 'Tab' && sheetRef.current) {
+        var focusableElements = sheetRef.current.querySelectorAll('button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])');
+        var firstElement = focusableElements[0];
+        var lastElement = focusableElements[focusableElements.length - 1];
+        if (e.shiftKey && document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
+        } else if (!e.shiftKey && document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    // Focus first focusable element (button or element with role="button")
+    var frame = requestAnimationFrame(function () {
+      var _a;
+      var firstFocusable = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled), [role="button"][tabindex]:not([aria-disabled="true"])');
+      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+    });
+    // Prevent body scroll
+    var originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return function () {
+      // A quick close cancels the pending focus, so it can't pull focus back into the exiting sheet
+      cancelAnimationFrame(frame);
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = originalOverflow;
+      // Return focus to previous element
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isOpen, onClose, closeOnEscape]);
+  var handleOverlayClick = function handleOverlayClick(e) {
+    // While exiting, the backdrop still catches clicks but doesn't close again
+    if (!isExiting && closeOnOverlayClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  var handleActionClick = function handleActionClick(action) {
+    if (!action.disabled) {
+      action.onSelect();
+      onClose();
+    }
+  };
+  // Stays mounted while the exit fade runs, hidden from assistive technology
+  if (!isPresent) return null;
+  // Find if there are any destructive actions to add divider
+  var destructiveIndex = actions.findIndex(function (a) {
+    return a.destructive;
+  });
+  var hasDestructive = destructiveIndex >= 0;
+  return /*#__PURE__*/createPortal(jsxs(Fragment, {
+    children: [jsx(StyledOverlay, {
+      onClick: handleOverlayClick,
+      "$isExiting": isExiting
+    }), jsxs(StyledActionSheet, {
+      ref: sheetRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-hidden": isExiting || undefined,
+      "$isExiting": isExiting,
+      "aria-labelledby": title ? 'action-sheet-title' : undefined,
+      "aria-describedby": description ? 'action-sheet-description' : undefined,
+      "data-testid": dataTestId,
+      children: [(title || description || showCloseButton) && jsxs(StyledHeader, {
+        children: [jsx(StyledHeaderContent, {
+          children: jsxs(Stack, {
+            direction: "column",
+            gap: description && title ? 'xs' : 'none',
+            children: [title && jsx("div", {
+              id: "action-sheet-title",
+              children: jsx(Typography, {
+                variant: "h3",
+                children: title
+              })
+            }), description && jsx("div", {
+              id: "action-sheet-description",
+              children: jsx(Typography, {
+                variant: "body",
+                color: "subdued",
+                children: description
+              })
+            })]
+          })
+        }), showCloseButton && jsx(StyledCloseButton, {
+          type: "button",
+          onClick: onClose,
+          "aria-label": "Close",
+          children: jsx(Icon, {
+            name: "close",
+            size: "sm",
+            iconColor: "subdued"
+          })
+        })]
+      }), jsx(StyledActionsList, {
+        children: actions.map(function (action, index) {
+          return jsxs(React.Fragment, {
+            children: [hasDestructive && index === destructiveIndex && index > 0 && jsx(Divider, {
+              size: "small"
+            }), jsx(ListItem, {
+              primary: action.label,
+              icon: action.icon && jsx(Icon, {
+                name: action.icon,
+                size: "md",
+                iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
+              }),
+              interactive: true,
+              onClick: function onClick() {
+                return handleActionClick(action);
+              },
+              disabled: action.disabled,
+              destructive: action.destructive,
+              spacing: "compact"
+            })]
+          }, action.id);
+        })
+      })]
+    })]
+  }), document.body);
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+
+export { ActionSheet };
+//# sourceMappingURL=ActionSheet.mjs.map

package/dist/components/molecules/ActionSheet/ActionSheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionSheet.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/ActionSheet/index.d.mts

@@ -0,0 +1,2 @@
+export { ActionSheet } from './ActionSheet.mjs';
+export type { ActionSheetProps, Action } from './ActionSheet.mjs';