@common-origin/design-system 2.18.0 → 2.20.0

package/dist/components/layout/GridSystem/GridSystem.mjs

@@ -0,0 +1,221 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module, { css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+
+// Exception to decision 0014: the gap props are typed as base spacing keys (public API),
+// so they are looked up in base.spacing until they accept semantic keys.
+// eslint-disable-next-line no-restricted-syntax
+var gapSpacing = tokens.base.spacing;
+// Breakpoints using base tokens
+var breakpoints = {
+  xs: tokens.semantic.breakpoint.xs,
+  sm: tokens.semantic.breakpoint.sm,
+  md: tokens.semantic.breakpoint.md,
+  lg: tokens.semantic.breakpoint.lg,
+  xl: tokens.semantic.breakpoint.xl,
+  '2xl': tokens.semantic.breakpoint['2xl']
+};
+// Media query helpers
+var media = {
+  xs: "@media (min-width: ".concat(breakpoints.xs, ")"),
+  sm: "@media (min-width: ".concat(breakpoints.sm, ")"),
+  md: "@media (min-width: ".concat(breakpoints.md, ")"),
+  lg: "@media (min-width: ".concat(breakpoints.lg, ")"),
+  xl: "@media (min-width: ".concat(breakpoints.xl, ")"),
+  '2xl': "@media (min-width: ".concat(breakpoints['2xl'], ")")
+};
+var GridContainer = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "GridSystem__GridContainer",
+  componentId: "sc-1lhwjqo-0"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n"])), function (props) {
+  return props.$cols;
+}, function (props) {
+  return props.$gap && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), props.$gap);
+}, function (props) {
+  return props.$gapX && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["column-gap: ", ";"], ["column-gap: ", ";"])), props.$gapX);
+}, function (props) {
+  return props.$gapY && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["row-gap: ", ";"], ["row-gap: ", ";"])), props.$gapY);
+});
+var Grid = function Grid(_a) {
+  var _b = _a.cols,
+    cols = _b === void 0 ? 12 : _b,
+    gap = _a.gap,
+    gapX = _a.gapX,
+    gapY = _a.gapY,
+    className = _a.className,
+    dataTestId = _a["data-testid"],
+    children = _a.children;
+  return jsx(GridContainer, {
+    "$cols": cols,
+    "$gap": gap ? gapSpacing[gap] : undefined,
+    "$gapX": gapX ? gapSpacing[gapX] : undefined,
+    "$gapY": gapY ? gapSpacing[gapY] : undefined,
+    className: className,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+var GridColContainer = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "GridSystem__GridColContainer",
+  componentId: "sc-1lhwjqo-1"
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"], ["\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"])), function (props) {
+  return props.$span && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["grid-column: span ", " / span ", ";"], ["grid-column: span ", " / span ", ";"])), props.$span, props.$span);
+}, function (props) {
+  return props.$order !== undefined && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
+}, function (props) {
+  return props.$spanSm && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.sm, props.$spanSm, props.$spanSm);
+}, function (props) {
+  return props.$spanMd && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.md, props.$spanMd, props.$spanMd);
+}, function (props) {
+  return props.$spanLg && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.lg, props.$spanLg, props.$spanLg);
+}, function (props) {
+  return props.$spanXl && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "], ["\n    ", " {\n      grid-column: span ", " / span ", ";\n    }\n  "])), media.xl, props.$spanXl, props.$spanXl);
+}, function (props) {
+  return props.$orderSm !== undefined && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.sm, props.$orderSm);
+}, function (props) {
+  return props.$orderMd !== undefined && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.md, props.$orderMd);
+}, function (props) {
+  return props.$orderLg !== undefined && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.lg, props.$orderLg);
+}, function (props) {
+  return props.$orderXl !== undefined && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    ", " {\n      order: ", ";\n    }\n  "], ["\n    ", " {\n      order: ", ";\n    }\n  "])), media.xl, props.$orderXl);
+});
+var GridCol = function GridCol(_a) {
+  var span = _a.span,
+    spanSm = _a.spanSm,
+    spanMd = _a.spanMd,
+    spanLg = _a.spanLg,
+    spanXl = _a.spanXl,
+    order = _a.order,
+    orderSm = _a.orderSm,
+    orderMd = _a.orderMd,
+    orderLg = _a.orderLg,
+    orderXl = _a.orderXl,
+    className = _a.className,
+    dataTestId = _a["data-testid"],
+    children = _a.children;
+  return jsx(GridColContainer, {
+    "$span": span,
+    "$spanSm": spanSm,
+    "$spanMd": spanMd,
+    "$spanLg": spanLg,
+    "$spanXl": spanXl,
+    "$order": order,
+    "$orderSm": orderSm,
+    "$orderMd": orderMd,
+    "$orderLg": orderLg,
+    "$orderXl": orderXl,
+    className: className,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+var ResponsiveGridContainer = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "GridSystem__ResponsiveGridContainer",
+  componentId: "sc-1lhwjqo-2"
+})(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive column gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive row gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"], ["\n  display: grid;\n  grid-template-columns: repeat(", ", minmax(0, 1fr));\n  \n  ", "\n  ", "\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive column gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n  \n  // Responsive row gap support\n  ", "\n  \n  ", "\n  \n  ", "\n  \n  ", "\n"])), function (props) {
+  return props.$cols;
+}, function (props) {
+  return props.$gap && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), props.$gap);
+}, function (props) {
+  return props.$gapX && css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["column-gap: ", ";"], ["column-gap: ", ";"])), props.$gapX);
+}, function (props) {
+  return props.$gapY && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["row-gap: ", ";"], ["row-gap: ", ";"])), props.$gapY);
+}, function (props) {
+  return props.$colsSm && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.sm, props.$colsSm);
+}, function (props) {
+  return props.$colsMd && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.md, props.$colsMd);
+}, function (props) {
+  return props.$colsLg && css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.lg, props.$colsLg);
+}, function (props) {
+  return props.$colsXl && css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "], ["\n    ", " {\n      grid-template-columns: repeat(", ", minmax(0, 1fr));\n    }\n  "])), media.xl, props.$colsXl);
+}, function (props) {
+  return props.$gapSm && css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.sm, props.$gapSm);
+}, function (props) {
+  return props.$gapMd && css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.md, props.$gapMd);
+}, function (props) {
+  return props.$gapLg && css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.lg, props.$gapLg);
+}, function (props) {
+  return props.$gapXl && css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n    ", " {\n      gap: ", ";\n    }\n  "], ["\n    ", " {\n      gap: ", ";\n    }\n  "])), media.xl, props.$gapXl);
+}, function (props) {
+  return props.$gapXSm && css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.sm, props.$gapXSm);
+}, function (props) {
+  return props.$gapXMd && css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.md, props.$gapXMd);
+}, function (props) {
+  return props.$gapXLg && css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.lg, props.$gapXLg);
+}, function (props) {
+  return props.$gapXXl && css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n    ", " {\n      column-gap: ", ";\n    }\n  "], ["\n    ", " {\n      column-gap: ", ";\n    }\n  "])), media.xl, props.$gapXXl);
+}, function (props) {
+  return props.$gapYSm && css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.sm, props.$gapYSm);
+}, function (props) {
+  return props.$gapYMd && css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.md, props.$gapYMd);
+}, function (props) {
+  return props.$gapYLg && css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.lg, props.$gapYLg);
+}, function (props) {
+  return props.$gapYXl && css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n    ", " {\n      row-gap: ", ";\n    }\n  "], ["\n    ", " {\n      row-gap: ", ";\n    }\n  "])), media.xl, props.$gapYXl);
+});
+var ResponsiveGrid = function ResponsiveGrid(_a) {
+  var cols = _a.cols,
+    colsSm = _a.colsSm,
+    colsMd = _a.colsMd,
+    colsLg = _a.colsLg,
+    colsXl = _a.colsXl,
+    gap = _a.gap,
+    gapSm = _a.gapSm,
+    gapMd = _a.gapMd,
+    gapLg = _a.gapLg,
+    gapXl = _a.gapXl,
+    gapX = _a.gapX,
+    gapXSm = _a.gapXSm,
+    gapXMd = _a.gapXMd,
+    gapXLg = _a.gapXLg,
+    gapXXl = _a.gapXXl,
+    gapY = _a.gapY,
+    gapYSm = _a.gapYSm,
+    gapYMd = _a.gapYMd,
+    gapYLg = _a.gapYLg,
+    gapYXl = _a.gapYXl,
+    className = _a.className,
+    dataTestId = _a["data-testid"],
+    children = _a.children;
+  return jsx(ResponsiveGridContainer, {
+    "$cols": cols,
+    "$colsSm": colsSm,
+    "$colsMd": colsMd,
+    "$colsLg": colsLg,
+    "$colsXl": colsXl,
+    "$gap": gap ? gapSpacing[gap] : undefined,
+    "$gapSm": gapSm ? gapSpacing[gapSm] : undefined,
+    "$gapMd": gapMd ? gapSpacing[gapMd] : undefined,
+    "$gapLg": gapLg ? gapSpacing[gapLg] : undefined,
+    "$gapXl": gapXl ? gapSpacing[gapXl] : undefined,
+    "$gapX": gapX ? gapSpacing[gapX] : undefined,
+    "$gapXSm": gapXSm ? gapSpacing[gapXSm] : undefined,
+    "$gapXMd": gapXMd ? gapSpacing[gapXMd] : undefined,
+    "$gapXLg": gapXLg ? gapSpacing[gapXLg] : undefined,
+    "$gapXXl": gapXXl ? gapSpacing[gapXXl] : undefined,
+    "$gapY": gapY ? gapSpacing[gapY] : undefined,
+    "$gapYSm": gapYSm ? gapSpacing[gapYSm] : undefined,
+    "$gapYMd": gapYMd ? gapSpacing[gapYMd] : undefined,
+    "$gapYLg": gapYLg ? gapSpacing[gapYLg] : undefined,
+    "$gapYXl": gapYXl ? gapSpacing[gapYXl] : undefined,
+    className: className,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
+
+export { Grid, GridCol, ResponsiveGrid };
+//# sourceMappingURL=GridSystem.mjs.map

package/dist/components/layout/GridSystem/GridSystem.mjs.map

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

package/dist/components/layout/GridSystem/index.d.mts

@@ -0,0 +1 @@
+export { ResponsiveGrid, GridCol, Grid } from './GridSystem.mjs';

package/dist/components/layout/index.d.mts

@@ -0,0 +1 @@
+export * from './GridSystem/index.mjs';

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;