@common-origin/design-system 2.19.0 → 2.20.0

package/dist/components/molecules/InlineAlert/InlineAlert.mjs

@@ -0,0 +1,140 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+
+var semantic = tokens.semantic;
+var color = semantic.color,
+  typography = semantic.typography,
+  size = semantic.size;
+var variantIcons = {
+  error: 'crossCircle',
+  warning: 'bell',
+  info: 'info',
+  success: 'checkRing'
+};
+var variantTextColors = {
+  error: color.text.danger,
+  warning: color.text.warning,
+  info: color.text.accent,
+  success: color.text.success
+};
+var sizeConfig = {
+  small: {
+    font: typography.caption,
+    gap: semantic.space[100],
+    icon: 'xs'
+  },
+  medium: {
+    font: typography.small,
+    gap: semantic.space[200],
+    icon: 'sm'
+  }
+};
+var StyledInlineAlert = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "InlineAlert__StyledInlineAlert",
+  componentId: "sc-eervmb-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n"
+// One line of the message's font tall, so the icon centres on the first line at any size:
+// the zero-width space gives the box the font's line height without a fixed value
+])), function (_a) {
+  var $size = _a.$size,
+    $empty = _a.$empty;
+  return $empty ? '0' : size.label[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig[$size].gap;
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig[$size].font;
+}, function (_a) {
+  var $variant = _a.$variant;
+  return variantTextColors[$variant];
+});
+// One line of the message's font tall, so the icon centres on the first line at any size:
+// the zero-width space gives the box the font's line height without a fixed value
+var StyledIconLine = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InlineAlert__StyledIconLine",
+  componentId: "sc-eervmb-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  &::after {\n    content: '\\200B';\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  &::after {\n    content: '\\\\200B';\n  }\n"])));
+var StyledMessage = /*#__PURE__*/styled.span.withConfig({
+  displayName: "InlineAlert__StyledMessage",
+  componentId: "sc-eervmb-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-width: 0;\n"], ["\n  min-width: 0;\n"
+/**
+ * InlineAlert is a short, local message that sits next to what it's about: between paragraphs,
+ * below a field or in a table cell (decision 0019). A severity icon and text in the severity
+ * colour, with no background or border. For a title, an action or a dismiss button, use Alert.
+ *
+ * @example
+ * ```tsx
+ * <InlineAlert variant="success">Saved</InlineAlert>
+ *
+ * // Field feedback: the control references the message with aria-describedby
+ * <input id="email" aria-describedby="email-error" aria-invalid="true" />
+ * <InlineAlert id="email-error" variant="error" size="small">Enter a valid email address</InlineAlert>
+ * ```
+ */])));
+/**
+ * InlineAlert is a short, local message that sits next to what it's about: between paragraphs,
+ * below a field or in a table cell (decision 0019). A severity icon and text in the severity
+ * colour, with no background or border. For a title, an action or a dismiss button, use Alert.
+ *
+ * @example
+ * ```tsx
+ * <InlineAlert variant="success">Saved</InlineAlert>
+ *
+ * // Field feedback: the control references the message with aria-describedby
+ * <input id="email" aria-describedby="email-error" aria-invalid="true" />
+ * <InlineAlert id="email-error" variant="error" size="small">Enter a valid email address</InlineAlert>
+ * ```
+ */
+var InlineAlert = function InlineAlert(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'info' : _b,
+    _c = _a.size,
+    alertSize = _c === void 0 ? 'medium' : _c,
+    children = _a.children,
+    _d = _a.ariaLive,
+    ariaLive = _d === void 0 ? 'polite' : _d,
+    id = _a.id,
+    dataTestId = _a["data-testid"];
+  // A live region is announced reliably only when it exists before its content changes, so with
+  // no message it stays mounted as an empty region, with no icon and no minimum height
+  var hasMessage = children !== undefined && children !== null && children !== false && children !== '';
+  return jsx(StyledInlineAlert
+  // Same roles as Alert; ariaLive sets how urgently changes are announced
+  , {
+    // Same roles as Alert; ariaLive sets how urgently changes are announced
+    role: variant === 'error' ? 'alert' : 'status',
+    "aria-live": ariaLive,
+    id: id,
+    "data-testid": dataTestId,
+    "$variant": variant,
+    "$size": alertSize,
+    "$empty": !hasMessage,
+    children: hasMessage && jsxs(Fragment, {
+      children: [jsx(StyledIconLine, {
+        "aria-hidden": "true",
+        children: jsx(Icon, {
+          name: variantIcons[variant],
+          size: sizeConfig[alertSize].icon,
+          iconColor: "inherit"
+        })
+      }), jsx(StyledMessage, {
+        children: children
+      })]
+    })
+  });
+};
+InlineAlert.displayName = 'InlineAlert';
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { InlineAlert };
+//# sourceMappingURL=InlineAlert.mjs.map

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

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

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

@@ -0,0 +1,2 @@
+export { InlineAlert } from './InlineAlert.mjs';
+export type { InlineAlertProps, InlineAlertVariant, InlineAlertSize } from './InlineAlert.mjs';

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type ListSpacing } from './ListContext.mjs';
+export interface ListProps {
+    /**
+     * ListItem components
+     */
+    children: React.ReactNode;
+    /**
+     * Show dividers between items
+     * @default true
+     */
+    dividers?: boolean;
+    /**
+     * Density of the list's items: their padding. A ListItem's own `spacing` overrides it (#77).
+     * @default 'comfortable'
+     */
+    spacing?: ListSpacing;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+export declare const List: {
+    ({ children, dividers, spacing, className, "data-testid": dataTestId, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/molecules/List/List.mjs

@@ -0,0 +1,45 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { ListSpacingContext } from './ListContext.mjs';
+
+var semantic = tokens.semantic;
+var StyledList = /*#__PURE__*/styled.ul.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "List__StyledList",
+  componentId: "sc-1irksg5-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  \n  /* Divider styles */\n  ", "\n"])), function (_a) {
+  var $dividers = _a.$dividers;
+  return $dividers && "\n    > li:not(:last-child) {\n      border-bottom: ".concat(semantic.border.width.thin, " solid ").concat(semantic.color.border["default"], ";\n    }\n  ");
+});
+var List = function List(_a) {
+  var children = _a.children,
+    _b = _a.dividers,
+    dividers = _b === void 0 ? true : _b,
+    _c = _a.spacing,
+    spacing = _c === void 0 ? 'comfortable' : _c,
+    className = _a.className,
+    dataTestId = _a["data-testid"],
+    props = __rest(_a, ["children", "dividers", "spacing", "className", 'data-testid']);
+  return jsx(ListSpacingContext.Provider, {
+    value: spacing,
+    children: jsx(StyledList, __assign({
+      "$dividers": dividers,
+      className: className,
+      "data-testid": dataTestId,
+      role: "list"
+    }, props, {
+      children: children
+    }))
+  });
+};
+List.displayName = 'List';
+var templateObject_1;
+
+export { List };
+//# sourceMappingURL=List.mjs.map

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

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

package/dist/components/molecules/List/ListContext.d.mts

@@ -0,0 +1,6 @@
+export type ListSpacing = 'compact' | 'comfortable';
+/**
+ * The spacing a List gives its items (#77). A ListItem without its own `spacing` uses it; outside
+ * a List it's `comfortable`. Internal: not exported from the package.
+ */
+export declare const ListSpacingContext: import("react").Context<ListSpacing>;

package/dist/components/molecules/List/ListContext.mjs

@@ -0,0 +1,11 @@
+'use client';
+import { createContext } from 'react';
+
+/**
+ * The spacing a List gives its items (#77). A ListItem without its own `spacing` uses it; outside
+ * a List it's `comfortable`. Internal: not exported from the package.
+ */
+var ListSpacingContext = /*#__PURE__*/createContext('comfortable');
+
+export { ListSpacingContext };
+//# sourceMappingURL=ListContext.mjs.map

package/dist/components/molecules/List/ListContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContext.mjs","sources":["../../../../src/components/molecules/List/ListContext.ts"],"sourcesContent":["import { createContext } from 'react'\n\nexport type ListSpacing = 'compact' | 'comfortable'\n\n/**\n * The spacing a List gives its items (#77). A ListItem without its own `spacing` uses it; outside\n * a List it's `comfortable`. Internal: not exported from the package.\n */\nexport const ListSpacingContext = createContext<ListSpacing>('comfortable')\n"],"names":["ListSpacingContext","createContext"],"mappings":";;;AAIA;;;AAGG;IACUA,kBAAkB,gBAAGC,aAAa,CAAc,aAAa;;;;"}

package/dist/components/molecules/List/ListItem.d.mts

@@ -0,0 +1,101 @@
+import React from 'react';
+import { type ListSpacing } from './ListContext.mjs';
+export interface ListItemProps {
+    /**
+     * Main text/content
+     */
+    primary: React.ReactNode;
+    /**
+     * Secondary text (smaller, subdued color)
+     */
+    secondary?: React.ReactNode;
+    /**
+     * Badge/chip component on the right
+     */
+    badge?: React.ReactNode;
+    /**
+     * Left icon or avatar component
+     */
+    icon?: React.ReactNode;
+    /**
+     * Can be expanded to show children content
+     * @default false
+     */
+    expandable?: boolean;
+    /**
+     * Expansion state (controlled)
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Called when expansion is toggled
+     */
+    onToggle?: () => void;
+    /**
+     * Enable hover/click interactive states
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Click handler for interactive items
+     */
+    onClick?: () => void;
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Selected/active state
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Destructive/danger state (e.g., delete actions)
+     * Displays text and icon in error color
+     * @default false
+     */
+    destructive?: boolean;
+    /**
+     * Density of this item. Defaults to the parent List's `spacing`, or `comfortable` outside a
+     * List; set it to override the List for this item (#77).
+     */
+    spacing?: ListSpacing;
+    /**
+     * Expanded content (shown when expanded=true)
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Custom ARIA role (e.g., 'option' for combobox)
+     * @default 'listitem'
+     */
+    role?: string;
+    /**
+     * ARIA selected state (for role="option")
+     */
+    'aria-selected'?: boolean;
+    /**
+     * Custom ID for ARIA references
+     */
+    id?: string;
+    /**
+     * Custom tabIndex for focus management
+     */
+    tabIndex?: number;
+    /**
+     * Keyboard event handler
+     */
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+export declare const ListItem: {
+    ({ primary, secondary, badge, icon, expandable, expanded, onToggle, interactive, onClick, disabled, selected, destructive, spacing: spacingProp, children, className, "data-testid": dataTestId, role: customRole, "aria-selected": ariaSelected, id, tabIndex: customTabIndex, onKeyDown: customOnKeyDown, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/molecules/List/ListItem.mjs

@@ -0,0 +1,224 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { interactiveRow, reducedMotion } from '../../../lib/styleUtils.mjs';
+import { ListSpacingContext } from './ListContext.mjs';
+
+var semantic = tokens.semantic;
+var _a = semantic.motion,
+  duration = _a.duration,
+  easing = _a.easing;
+var StyledListItem = /*#__PURE__*/styled.li.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "ListItem__StyledListItem",
+  componentId: "sc-1wzzt21-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  position: relative;\n  \n  /* Disable user selection for interactive items */\n  ", "\n  \n  /* Disabled state */\n  ", "\n  \n  /* Destructive state - apply error color to text */\n  ", "\n"])), semantic.size.touchTarget, function (_a) {
+  var $interactive = _a.$interactive;
+  return $interactive && 'user-select: none;';
+}, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled && "\n    opacity: ".concat(semantic.opacity.disabled, ";\n    cursor: not-allowed;\n    pointer-events: none;\n  ");
+}, function (_a) {
+  var $destructive = _a.$destructive,
+    $disabled = _a.$disabled;
+  return $destructive && !$disabled && "\n    color: ".concat(semantic.color.text.danger, ";\n  ");
+});
+var StyledItemContent = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "ListItem__StyledItemContent",
+  componentId: "sc-1wzzt21-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  transition: background-color ", " ", ", color ", " ", ";\n  cursor: ", ";\n  \n  /* The shared row states (decision 0030). Only interactive, enabled rows respond to hover and\n     press; the primary text is Typography, so the row colours it through a selector */\n  ", "\n  \n  /* Focus visible */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), semantic.space[300], function (_a) {
+  var $spacing = _a.$spacing;
+  return $spacing === 'compact' ? "".concat(semantic.space[200], " ").concat(semantic.space[300]) : "".concat(semantic.space[300], " ").concat(semantic.space[400]);
+}, semantic.radius.sm, duration.fast, easing.decelerate, duration.fast, easing.decelerate, function (_a) {
+  var $interactive = _a.$interactive,
+    $disabled = _a.$disabled;
+  if ($disabled) return 'not-allowed';
+  if ($interactive) return 'pointer';
+  return 'default';
+}, function (_a) {
+  var $interactive = _a.$interactive,
+    $disabled = _a.$disabled,
+    $selected = _a.$selected;
+  return interactiveRow({
+    selected: $selected,
+    disabled: $disabled || !$interactive,
+    textSelector: "".concat(StyledTextContent, " > :first-child")
+  });
+}, semantic.border.focus, semantic.border.focusOffset);
+var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ListItem__StyledIconContainer",
+  componentId: "sc-1wzzt21-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: ", ";\n  height: ", ";\n"])), semantic.size.icon.lg, semantic.size.icon.lg);
+var StyledTextContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ListItem__StyledTextContent",
+  componentId: "sc-1wzzt21-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text truncation */\n"])), semantic.space[100]);
+var StyledRightContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ListItem__StyledRightContent",
+  componentId: "sc-1wzzt21-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex-shrink: 0;\n  margin-left: auto;\n"])), semantic.space[200]);
+var StyledChevronIcon = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "ListItem__StyledChevronIcon",
+  componentId: "sc-1wzzt21-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  transition: transform ", " ", ";\n  transform: rotate(", ");\n  pointer-events: none;\n\n  ", " {\n    transition: none;\n  }\n"])), semantic.size.icon.lg, semantic.size.icon.lg, semantic.color.icon.muted, duration.fast, easing.decelerate, function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? '180deg' : '0deg';
+}, reducedMotion);
+var StyledExpandedContent = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "ListItem__StyledExpandedContent",
+  componentId: "sc-1wzzt21-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"], ["\n  overflow: hidden;\n  /* Padding collapses with the height, and visibility hides the content from\n     keyboard and screen readers once the collapse finishes. */\n  transition: max-height ", " ", ",\n              padding ", " ", ",\n              opacity ", " ", ",\n              visibility ", " ", ";\n  max-height: ", ";\n  opacity: ", ";\n  visibility: ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n                visibility ", " ", ";\n  }\n  \n  ", "\n"])), duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? '1000px' : '0';
+}, function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? '1' : '0';
+}, function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? 'visible' : 'hidden';
+}, reducedMotion, duration.moderate, easing.decelerate, duration.moderate, easing.decelerate, function (_a) {
+  var $expanded = _a.$expanded,
+    $spacing = _a.$spacing;
+  return $expanded && "\n    padding: ".concat($spacing === 'compact' ? "".concat(semantic.space[200], " ").concat(semantic.space[300], " ").concat(semantic.space[200], " ").concat(tokens.component.listItem.expandedIndent.compact) : "".concat(semantic.space[200], " ").concat(semantic.space[400], " ").concat(semantic.space[300], " ").concat(tokens.component.listItem.expandedIndent.comfortable), ";\n    background-color: ").concat(semantic.surface.raised, ";\n    border-radius: ").concat(semantic.radius.sm, ";\n    margin: 0 ").concat($spacing === 'compact' ? semantic.space[300] : semantic.space[400], " ").concat($spacing === 'compact' ? semantic.space[200] : semantic.space[300], ";\n  ");
+});
+var ListItem = function ListItem(_a) {
+  var primary = _a.primary,
+    secondary = _a.secondary,
+    badge = _a.badge,
+    icon = _a.icon,
+    _b = _a.expandable,
+    expandable = _b === void 0 ? false : _b,
+    _c = _a.expanded,
+    expanded = _c === void 0 ? false : _c,
+    onToggle = _a.onToggle,
+    _d = _a.interactive,
+    interactive = _d === void 0 ? false : _d,
+    onClick = _a.onClick,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    _f = _a.selected,
+    selected = _f === void 0 ? false : _f,
+    _g = _a.destructive,
+    destructive = _g === void 0 ? false : _g,
+    spacingProp = _a.spacing,
+    children = _a.children,
+    className = _a.className,
+    dataTestId = _a["data-testid"],
+    customRole = _a.role,
+    ariaSelected = _a["aria-selected"],
+    id = _a.id,
+    customTabIndex = _a.tabIndex,
+    customOnKeyDown = _a.onKeyDown,
+    props = __rest(_a, ["primary", "secondary", "badge", "icon", "expandable", "expanded", "onToggle", "interactive", "onClick", "disabled", "selected", "destructive", "spacing", "children", "className", 'data-testid', "role", 'aria-selected', "id", "tabIndex", "onKeyDown"]);
+  var listSpacing = useContext(ListSpacingContext);
+  var spacing = spacingProp !== null && spacingProp !== void 0 ? spacingProp : listSpacing;
+  var isInteractive = interactive || expandable || customRole === 'option';
+  var contentRole = customRole === 'option' ? undefined : isInteractive ? 'button' : undefined;
+  var ariaExpanded = expandable ? expanded : undefined;
+  var ariaDisabled = disabled ? true : undefined;
+  var ariaCurrent = selected ? 'true' : undefined;
+  var handleClick = function handleClick() {
+    if (disabled) return;
+    if (expandable && onToggle) {
+      onToggle();
+    } else if (onClick) {
+      onClick();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (customOnKeyDown) {
+      customOnKeyDown(event);
+      return;
+    }
+    if (disabled) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick();
+    }
+  };
+  return (
+    // The List's spacing is for its own items: reset it for this item's content, so components
+    // built on ListItem (ActionSheet, even through its portal) and expanded content keep their own
+    // density. A nested List provides its own spacing (#77)
+    jsx(ListSpacingContext.Provider, {
+      value: "comfortable",
+      children: jsxs(StyledListItem, __assign({
+        "$interactive": isInteractive,
+        "$disabled": disabled,
+        "$selected": selected,
+        "$destructive": destructive,
+        "$spacing": spacing,
+        className: className,
+        "data-testid": dataTestId,
+        role: customRole || 'listitem',
+        id: id,
+        "aria-selected": ariaSelected
+      }, props, {
+        children: [jsxs(StyledItemContent, {
+          "$interactive": isInteractive,
+          "$disabled": disabled,
+          "$selected": selected,
+          "$destructive": destructive,
+          "$spacing": spacing,
+          role: contentRole,
+          "aria-expanded": ariaExpanded,
+          "aria-disabled": ariaDisabled,
+          "aria-current": ariaCurrent,
+          tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          children: [icon && jsx(StyledIconContainer, {
+            "aria-hidden": "true",
+            children: icon
+          }), jsxs(StyledTextContent, {
+            children: [jsx(Typography, {
+              variant: "body",
+              color: destructive ? 'error' : 'default',
+              children: primary
+            }), secondary && jsx(Typography, {
+              variant: "small",
+              color: "subdued",
+              children: secondary
+            })]
+          }), jsxs(StyledRightContent, {
+            children: [badge, expandable && jsx(StyledChevronIcon, {
+              "$expanded": expanded,
+              "aria-hidden": "true",
+              children: jsx(Icon, {
+                name: "caretDown",
+                size: "sm"
+              })
+            })]
+          })]
+        }), expandable && children && jsx(StyledExpandedContent, {
+          "$spacing": spacing,
+          "$expanded": expanded,
+          "aria-hidden": !expanded,
+          children: children
+        })]
+      }))
+    })
+  );
+};
+ListItem.displayName = 'ListItem';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { ListItem };
+//# sourceMappingURL=ListItem.mjs.map

package/dist/components/molecules/List/ListItem.mjs.map

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

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

@@ -0,0 +1,4 @@
+export { List } from './List.mjs';
+export type { ListProps } from './List.mjs';
+export { ListItem } from './ListItem.mjs';
+export type { ListItemProps } from './ListItem.mjs';

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

@@ -0,0 +1,69 @@
+import { type ReactNode } from 'react';
+import { type ButtonVariant } from '../../atoms/Button/index.mjs';
+import { type IconName } from '../../../types/icons.mjs';
+export type ModalSize = 'small' | 'medium' | 'large';
+export interface ModalAction {
+    /** Button label text */
+    label: string;
+    /** Callback when the action is clicked */
+    onClick: () => void;
+    /**
+     * Button variant. `accent` is the blue call to action (at most one per view).
+     * `emphasis` is a deprecated alias for `accent` and will be removed in 3.0.
+     */
+    variant?: ButtonVariant;
+    /** Optional leading icon */
+    icon?: IconName;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+}
+export interface ModalProps {
+    /** Whether the modal is visible */
+    isOpen: boolean;
+    /** Callback fired when the modal should close (close button, overlay, Escape) */
+    onClose: () => void;
+    /** Title displayed in the modal header */
+    title: string;
+    /** Body content of the modal */
+    children: ReactNode;
+    /**
+     * Width preset. All sizes auto-switch to fullscreen below the `md` breakpoint (768 px).
+     * - small  → 400 px
+     * - medium → 560 px
+     * - large  → 720 px
+     * @default 'medium'
+     */
+    size?: ModalSize;
+    /** Structured action buttons rendered in the footer */
+    actions?: ModalAction[];
+    /**
+     * Close when the backdrop overlay is clicked
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Close when the Escape key is pressed
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+    /** Accessible label – falls back to `title` */
+    'aria-label'?: string;
+    /** ID of an element that describes the modal */
+    'aria-describedby'?: string;
+}
+/**
+ * Modal component
+ *
+ * A centred dialog overlay with a title, close button (IconButton), scrollable
+ * body content, and an optional footer with structured action buttons.
+ *
+ * - Renders via `createPortal` to avoid z-index / overflow issues.
+ * - Auto-fullscreen on viewports narrower than 768 px.
+ * - Focus trap, Escape-to-close, overlay-click-to-close.
+ * - Locks body scroll while open.
+ *
+ * Composes: IconButton, Button, Typography, Stack, Divider
+ */
+export declare const Modal: React.FC<ModalProps>;