@common-origin/design-system 2.16.0 → 2.17.0

package/dist/client.esm.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect, useRef, useId, useCallback, useMemo, forwardRef } from 'react';
+import React, { useState, createContext, useContext, useEffect, useRef, useId, useCallback, useMemo, forwardRef } from 'react';
 import styled, { keyframes, css } from 'styled-components';
 import { t as tokensJson, i as iconsJson } from './data.esm.js';
 import { parseISO, format, isToday, isYesterday, isThisWeek } from 'date-fns';
@@ -735,7 +735,11 @@ var Icon = function Icon(_a) {
     size = _b === void 0 ? 'lg' : _b,
     _c = _a.iconColor,
     iconColor = _c === void 0 ? 'default' : _c,
+    ariaLabel = _a["aria-label"],
+    title = _a.title,
     dataTestId = _a["data-testid"];
+  // Decorative unless it's given a name. A blank name is no name, so the icon stays hidden
+  var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) || (title === null || title === void 0 ? void 0 : title.trim()) || undefined;
   // Get the icon data from the JSON file
   var iconData = iconsJson[name];
   if (!iconData) {
@@ -750,16 +754,23 @@ var Icon = function Icon(_a) {
     "$size": size,
     "$iconColor": iconColor,
     "data-testid": dataTestId,
-    children: jsx("svg", {
+    children: jsxs("svg", __assign({
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      role: "img",
-      "aria-label": iconData.name,
-      children: jsx("path", {
+      xmlns: "http://www.w3.org/2000/svg"
+    }, label ? {
+      role: 'img',
+      'aria-label': label
+    } : {
+      'aria-hidden': true,
+      focusable: false
+    }, {
+      children: [(title === null || title === void 0 ? void 0 : title.trim()) && jsx("title", {
+        children: title
+      }), jsx("path", {
         d: iconData.path
-      })
-    })
+      })]
+    }))
   });
 };
 var templateObject_1$H;
@@ -1091,8 +1102,7 @@ var CategoryLabel = function CategoryLabel(_a) {
       children: [icon && jsx(Icon, {
         name: icon,
         size: iconSize,
-        iconColor: variant === 'filled' ? 'inverse' : 'inherit',
-        "aria-hidden": "true"
+        iconColor: variant === 'filled' ? 'inverse' : 'inherit'
       }), children]
     }), accessibleLabel && jsx(HiddenLabel, {
       children: accessibleLabel
@@ -1537,12 +1547,9 @@ var DateFormatter = function DateFormatter(_a) {
   var date = parseISO(dateString);
   var displayText;
   switch (mode) {
-    case 'relative':
-      // Always use relative labels (Today/Yesterday) or fall back to day name
-      displayText = formatDateSmart(date, formatString);
-      break;
+    case 'relative': // Deprecated alias for 'smart', removed in 3.0 (#82)
     case 'smart':
-      // Smart mode: relative for recent, absolute for older
+      // Today, Yesterday or the day name for recent dates; formatted for older ones
       displayText = formatDateSmart(date, formatString);
       break;
     case 'absolute':
@@ -1784,14 +1791,18 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     "$weight": weight,
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
-    children: [showPositiveIcon && !showNegativeIcon && jsx(Icon, {
+    children: [showPositiveIcon && !showNegativeIcon &&
+    // The amount is shown without a sign, so the icon is the sign and needs a name (#85)
+    jsx(Icon, {
       name: "addRing",
       size: iconSize,
-      iconColor: iconColor
+      iconColor: iconColor,
+      "aria-label": "Plus"
     }), showNegativeIcon && jsx(Icon, {
       name: "remove",
       size: iconSize,
-      iconColor: iconColor
+      iconColor: iconColor,
+      "aria-label": "Minus"
     }), jsx(Typography, {
       variant: typographyVariant,
       color: amountColor,
@@ -2193,8 +2204,7 @@ var StatusLabelBase = function StatusLabelBase(_a) {
       children: [showIcon && jsx(Icon, {
         name: statusConfig.icon,
         size: sizeStyles.iconSize,
-        iconColor: "inherit",
-        "aria-hidden": "true"
+        iconColor: "inherit"
       }), displayLabel, jsxs(ScreenReaderOnly, {
         children: [status, " status"]
       })]
@@ -2521,6 +2531,12 @@ var AccountCard = function AccountCard(_a) {
 };
 var templateObject_1$t, templateObject_2$o, templateObject_3$m, templateObject_4$i, templateObject_5$f;
 
+/**
+ * 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');
+
 var semantic$b = tokensJson.semantic;
 var _a$5 = semantic$b.motion,
   duration$2 = _a$5.duration,
@@ -2627,8 +2643,7 @@ var ListItem = function ListItem(_a) {
     selected = _f === void 0 ? false : _f,
     _g = _a.destructive,
     destructive = _g === void 0 ? false : _g,
-    _h = _a.spacing,
-    spacing = _h === void 0 ? 'comfortable' : _h,
+    spacingProp = _a.spacing,
     children = _a.children,
     className = _a.className,
     dataTestId = _a["data-testid"],
@@ -2638,6 +2653,8 @@ var ListItem = function ListItem(_a) {
     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;
@@ -2662,61 +2679,69 @@ var ListItem = function ListItem(_a) {
       handleClick();
     }
   };
-  return 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$1, {
-        "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, {
+  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$1, {
+            "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": "true",
-          children: jsx(Icon, {
-            name: "caretDown",
-            size: "sm"
-          })
+          "aria-hidden": !expanded,
+          children: children
         })]
-      })]
-    }), expandable && children && jsx(StyledExpandedContent, {
-      "$spacing": spacing,
-      "$expanded": expanded,
-      "aria-hidden": !expanded,
-      children: children
-    })]
-  }));
+      }))
+    })
+  );
 };
 ListItem.displayName = 'ListItem';
 var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$9;
@@ -4463,12 +4488,12 @@ var StyledCheckbox = styled.span.withConfig({
   return props.$checked || props.$indeterminate ? tokensJson.semantic.color.background.inverse : tokensJson.component.input["default"].backgroundColor;
 }, function (props) {
   if (props.$state === 'error') return tokensJson.component.input.error.borderColor;
-  if (props.$checked || props.$indeterminate) return tokensJson.semantic.border.strong;
+  if (props.$checked || props.$indeterminate) return tokensJson.semantic.color.border.strong;
   return tokensJson.component.input["default"].borderColor;
 }, function (props) {
   return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
 }, tokensJson.semantic.motion.duration.fast, tokensJson.semantic.motion.easing.easeOut, HiddenCheckboxInput, function (props) {
-  return props.$state === 'error' ? tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensJson.semantic.border.strong : tokensJson.component.input.hover.borderColor;
+  return props.$state === 'error' ? tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensJson.semantic.color.border.strong : tokensJson.component.input.hover.borderColor;
 }, HiddenCheckboxInput, tokensJson.component.input.focus.outline, tokensJson.semantic.border.focusOffset, function (props) {
   return props.$state === 'error' ? tokensJson.component.input.error.focus.borderColor : tokensJson.component.input.focus.borderColor;
 }, function (props) {
@@ -5459,15 +5484,17 @@ var List = function List(_a) {
     className = _a.className,
     dataTestId = _a["data-testid"],
     props = __rest(_a, ["children", "dividers", "spacing", "className", 'data-testid']);
-  return jsx(StyledList, __assign({
-    "$dividers": dividers,
-    "$spacing": spacing,
-    className: className,
-    "data-testid": dataTestId,
-    role: "list"
-  }, props, {
-    children: children
-  }));
+  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$c;
@@ -6456,8 +6483,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
       children: [jsx(Icon, {
         name: "search",
         size: "sm",
-        iconColor: "subdued",
-        "aria-hidden": "true"
+        iconColor: "subdued"
       }), jsx(StyledInput, __assign({
         ref: inputRef,
         type: "text",
@@ -6523,8 +6549,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
           secondary: description,
           icon: item.type === 'recent' ? jsx(Icon, {
             name: "refresh",
-            size: "xs",
-            "aria-hidden": "true"
+            size: "xs"
           }) : undefined,
           interactive: true,
           selected: index === highlightedIndex,
@@ -7187,7 +7212,7 @@ var StyledTab = styled.button.withConfig({
   },
   displayName: "TabBar__StyledTab",
   componentId: "sc-1g9ib0y-1"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Pressed nudge */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n  \n  /* Pressed nudge */\n  &:active:not(:disabled) {\n    transform: translateY(1px);\n  }\n"])), semantic.spacing.layout.sm, semantic.spacing.layout.md, semantic.spacing.layout.lg, semantic.typography.button2, function (props) {
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"])), semantic.spacing.layout.sm, semantic.spacing.layout.md, semantic.spacing.layout.lg, semantic.typography.button2, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
 }, semantic.motion.hover, semantic.border.radius.sm, semantic.border.radius.sm, function (props) {
   return props.$isActive ? semantic.color.background['interactive-subtle'] : 'transparent';
@@ -7671,20 +7696,14 @@ var TransactionListItem = function TransactionListItem(_a) {
             })
           })]
         }), (hasReceipt || hasNote) && jsxs(StyledIconIndicator, {
-          children: [hasReceipt && jsx("span", {
-            "aria-label": "Has receipt",
-            role: "img",
-            children: jsx(Icon, {
-              name: "fileDocSearch",
-              size: "xs"
-            })
-          }), hasNote && jsx("span", {
-            "aria-label": "Has note",
-            role: "img",
-            children: jsx(Icon, {
-              name: "paper",
-              size: "xs"
-            })
+          children: [hasReceipt && jsx(Icon, {
+            name: "fileDocSearch",
+            size: "xs",
+            "aria-label": "Has receipt"
+          }), hasNote && jsx(Icon, {
+            name: "paper",
+            size: "xs",
+            "aria-label": "Has note"
           })]
         })]
       })]