@common-origin/design-system 2.21.0 → 2.23.0

package/dist/components/atoms/MoneyDisplay/MoneyDisplay.mjs

@@ -1,10 +1,9 @@
 'use client';
 import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import styled$module from 'styled-components';
 const styled = styled$module.default || styled$module;
 import { Typography } from '../Typography/Typography.mjs';
-import { Icon } from '../Icon/Icon.mjs';
 import tokens from '../../../lib/cssTokens.mjs';
 
 var StyledWrapper = /*#__PURE__*/styled.span.withConfig({
@@ -13,7 +12,7 @@ var StyledWrapper = /*#__PURE__*/styled.span.withConfig({
   },
   displayName: "MoneyDisplay__StyledWrapper",
   componentId: "sc-1mddej3-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  text-align: ", ";\n  font-weight: ", ";\n"
 // Map size to Typography variant
 ])), function (_a) {
   var $align = _a.$align;
@@ -29,35 +28,8 @@ var sizeToTypographyVariant = {
   large: 'h3',
   xlarge: 'h2'
 };
-// Map size to Icon size for consistent visual alignment
-var sizeToIconSize = {
-  small: 'xs',
-  medium: 'sm',
-  large: 'md',
-  xlarge: 'lg'
-};
-/**
- * Generates aria-label with spelled out amount
- */
-var generateAriaLabel = function generateAriaLabel(amount, currency, locale) {
-  var _a, _b;
-  var formatter = new Intl.NumberFormat(locale, {
-    style: 'currency',
-    currency: currency,
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  });
-  // Get parts to spell out the amount
-  var parts = formatter.formatToParts(Math.abs(amount));
-  var integerPart = ((_a = parts.find(function (p) {
-    return p.type === 'integer';
-  })) === null || _a === void 0 ? void 0 : _a.value) || '0';
-  var fractionPart = ((_b = parts.find(function (p) {
-    return p.type === 'fraction';
-  })) === null || _b === void 0 ? void 0 : _b.value) || '00';
-  var sign = amount < 0 ? 'negative ' : '';
-  return "".concat(sign).concat(integerPart, " dollars and ").concat(fractionPart, " cents");
-};
+// The minus sign, not a hyphen, so it reads and copies as minus (decision 0045)
+var MINUS = "\u2212";
 var MoneyDisplay = function MoneyDisplay(_a) {
   var amount = _a.amount,
     _b = _a.currency,
@@ -83,41 +55,23 @@ var MoneyDisplay = function MoneyDisplay(_a) {
     maximumFractionDigits: 2
   });
   var formattedAmount = formatter.format(Math.abs(amount));
-  // Determine if we need to show a sign icon
-  var showPositiveIcon = showSign && amount > 0 || variant === 'positive';
-  var showNegativeIcon = amount < 0 || variant === 'negative';
-  // Generate accessibility label
-  var ariaLabel = generateAriaLabel(amount, currency, locale);
-  // Get typography variant and icon size
+  // A signed amount carries its sign as text, so the sign survives copying and is read aloud, and the
+  // role colour repeats it (decision 0045). Negative amounts always show their sign.
+  var isNegative = amount < 0 || variant === 'negative';
+  var isPositive = !isNegative && (showSign && amount > 0 || variant === 'positive');
+  var sign = isNegative ? MINUS : isPositive ? '+' : '';
   var typographyVariant = sizeToTypographyVariant[size];
-  var iconSize = sizeToIconSize[size];
-  // Determine icon color based on variant
-  var iconColor = variant === 'positive' || showPositiveIcon ? 'success' : variant === 'negative' || showNegativeIcon ? 'error' : variant === 'neutral' ? 'subdued' : 'default';
-  // Amount always uses default color (except neutral which stays subdued)
-  var amountColor = variant === 'neutral' ? 'subdued' : 'default';
-  return jsxs(StyledWrapper, {
+  var amountColor = isNegative ? 'error' : isPositive ? 'success' : variant === 'neutral' ? 'subdued' : 'default';
+  return jsx(StyledWrapper, {
     "$align": align,
     "$weight": weight,
-    "aria-label": ariaLabel,
     "data-testid": dataTestId,
-    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,
-      "aria-label": "Plus"
-    }), showNegativeIcon && jsx(Icon, {
-      name: "remove",
-      size: iconSize,
-      iconColor: iconColor,
-      "aria-label": "Minus"
-    }), jsx(Typography, {
+    children: jsxs(Typography, {
       variant: typographyVariant,
       color: amountColor,
       as: "span",
-      children: formattedAmount
-    })]
+      children: [sign, formattedAmount]
+    })
   });
 };
 var templateObject_1;

package/dist/components/atoms/StatusBadge/StatusBadge.d.mts

@@ -10,7 +10,8 @@ export interface StatusBadgeProps extends StatusLabelProps {
     /**
      * Whether to show the icon
      * @default true
-     * @deprecated StatusLabel always shows the icon, so status is never conveyed by colour alone.
+     * @deprecated StatusLabel always shows its status icon or shape with the text, so status is
+     * never conveyed by colour alone (decision 0045).
      */
     showIcon?: boolean;
 }
@@ -18,6 +19,6 @@ export interface StatusBadgeProps extends StatusLabelProps {
  * StatusBadge displays a transaction or task status.
  *
  * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
- * shows the icon. StatusBadge is removed in 3.0 (decision 0018).
+ * shows its status icon or shape. StatusBadge is removed in 3.0 (decision 0018).
  */
 export declare const StatusBadge: React.FC<StatusBadgeProps>;

package/dist/components/atoms/StatusBadge/StatusBadge.d.ts

@@ -10,7 +10,8 @@ export interface StatusBadgeProps extends StatusLabelProps {
     /**
      * Whether to show the icon
      * @default true
-     * @deprecated StatusLabel always shows the icon, so status is never conveyed by colour alone.
+     * @deprecated StatusLabel always shows its status icon or shape with the text, so status is
+     * never conveyed by colour alone (decision 0045).
      */
     showIcon?: boolean;
 }
@@ -18,6 +19,6 @@ export interface StatusBadgeProps extends StatusLabelProps {
  * StatusBadge displays a transaction or task status.
  *
  * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
- * shows the icon. StatusBadge is removed in 3.0 (decision 0018).
+ * shows its status icon or shape. StatusBadge is removed in 3.0 (decision 0018).
  */
 export declare const StatusBadge: React.FC<StatusBadgeProps>;

package/dist/components/atoms/StatusBadge/StatusBadge.mjs

@@ -7,7 +7,7 @@ import { StatusLabelBase } from '../StatusLabel/StatusLabelBase.mjs';
  * StatusBadge displays a transaction or task status.
  *
  * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
- * shows the icon. StatusBadge is removed in 3.0 (decision 0018).
+ * shows its status icon or shape. StatusBadge is removed in 3.0 (decision 0018).
  */
 var StatusBadge = function StatusBadge(props) {
   return jsx(StatusLabelBase, __assign({}, props));

package/dist/components/atoms/StatusBadge/StatusBadge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.mjs","sources":["../../../../src/components/atoms/StatusBadge/StatusBadge.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from '../StatusLabel/StatusLabelBase'\n\nexport type { StatusType, StatusSize } from '../StatusLabel/StatusLabelBase'\n\n/**\n * Props for the StatusBadge component\n * @deprecated Use `StatusLabelProps`. StatusBadge is renamed StatusLabel and is removed in 3.0\n * (decision 0018).\n */\nexport interface StatusBadgeProps extends StatusLabelProps {\n  /**\n   * Whether to show the icon\n   * @default true\n   * @deprecated StatusLabel always shows the icon, so status is never conveyed by colour alone.\n   */\n  showIcon?: boolean\n}\n\n/**\n * StatusBadge displays a transaction or task status.\n *\n * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always\n * shows the icon. StatusBadge is removed in 3.0 (decision 0018).\n */\nexport const StatusBadge: React.FC<StatusBadgeProps> = (props) => <StatusLabelBase {...props} />\n\nStatusBadge.displayName = 'StatusBadge'\n"],"names":["StatusBadge","props","_jsx","StatusLabelBase","__assign","displayName"],"mappings":";;;;;AAmBA;;;;;AAKG;IACUA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAA;EAAK,OAAAC,GAAA,CAACC,eAAe,EAAKC,QAAA,CAAA,EAAA,EAAAH,KAAK,CAAI,CAAA,CAAA;AAA9B,EAA8B;AAEhGD,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"StatusBadge.mjs","sources":["../../../../src/components/atoms/StatusBadge/StatusBadge.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from '../StatusLabel/StatusLabelBase'\n\nexport type { StatusType, StatusSize } from '../StatusLabel/StatusLabelBase'\n\n/**\n * Props for the StatusBadge component\n * @deprecated Use `StatusLabelProps`. StatusBadge is renamed StatusLabel and is removed in 3.0\n * (decision 0018).\n */\nexport interface StatusBadgeProps extends StatusLabelProps {\n  /**\n   * Whether to show the icon\n   * @default true\n   * @deprecated StatusLabel always shows its status icon or shape with the text, so status is\n   * never conveyed by colour alone (decision 0045).\n   */\n  showIcon?: boolean\n}\n\n/**\n * StatusBadge displays a transaction or task status.\n *\n * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always\n * shows its status icon or shape. StatusBadge is removed in 3.0 (decision 0018).\n */\nexport const StatusBadge: React.FC<StatusBadgeProps> = (props) => <StatusLabelBase {...props} />\n\nStatusBadge.displayName = 'StatusBadge'\n"],"names":["StatusBadge","props","_jsx","StatusLabelBase","__assign","displayName"],"mappings":";;;;;AAoBA;;;;;AAKG;IACUA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAA;EAAK,OAAAC,GAAA,CAACC,eAAe,EAAKC,QAAA,CAAA,EAAA,EAAAH,KAAK,CAAI,CAAA,CAAA;AAA9B,EAA8B;AAEhGD,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}

package/dist/components/atoms/StatusLabel/StatusLabel.d.mts

@@ -4,8 +4,11 @@ export type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase
 /**
  * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).
  *
- * Uses only the status colour tokens and always shows an icon with its text, so status is never
- * conveyed by colour alone. Not interactive. Announces changes politely to screen readers.
+ * Uses only the status colour tokens and always shows its text, so status is never conveyed by
+ * colour alone (decision 0045). Medium shows the status icon. Small shows the status shape for
+ * completed, failed and processing, and text only for the neutral pending, scheduled and
+ * cancelled, so keep the label visible. Not interactive. Announces changes politely to screen
+ * readers.
  *
  * @example
  * ```tsx

package/dist/components/atoms/StatusLabel/StatusLabel.d.ts

@@ -4,8 +4,11 @@ export type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase
 /**
  * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).
  *
- * Uses only the status colour tokens and always shows an icon with its text, so status is never
- * conveyed by colour alone. Not interactive. Announces changes politely to screen readers.
+ * Uses only the status colour tokens and always shows its text, so status is never conveyed by
+ * colour alone (decision 0045). Medium shows the status icon. Small shows the status shape for
+ * completed, failed and processing, and text only for the neutral pending, scheduled and
+ * cancelled, so keep the label visible. Not interactive. Announces changes politely to screen
+ * readers.
  *
  * @example
  * ```tsx

package/dist/components/atoms/StatusLabel/StatusLabel.mjs

@@ -6,8 +6,11 @@ import { StatusLabelBase } from './StatusLabelBase.mjs';
 /**
  * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).
  *
- * Uses only the status colour tokens and always shows an icon with its text, so status is never
- * conveyed by colour alone. Not interactive. Announces changes politely to screen readers.
+ * Uses only the status colour tokens and always shows its text, so status is never conveyed by
+ * colour alone (decision 0045). Medium shows the status icon. Small shows the status shape for
+ * completed, failed and processing, and text only for the neutral pending, scheduled and
+ * cancelled, so keep the label visible. Not interactive. Announces changes politely to screen
+ * readers.
  *
  * @example
  * ```tsx

package/dist/components/atoms/StatusLabel/StatusLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusLabel.mjs","sources":["../../../../src/components/atoms/StatusLabel/StatusLabel.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from './StatusLabelBase'\n\nexport type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase'\n\n/**\n * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).\n *\n * Uses only the status colour tokens and always shows an icon with its text, so status is never\n * conveyed by colour alone. Not interactive. Announces changes politely to screen readers.\n *\n * @example\n * ```tsx\n * <StatusLabel status=\"completed\" />\n *\n * <StatusLabel status=\"pending\" label=\"Awaiting approval\" size=\"small\" />\n * ```\n */\n// showIcon comes last so no caller (for example plain JavaScript) can hide the icon\nexport const StatusLabel: React.FC<StatusLabelProps> = (props) => <StatusLabelBase {...props} showIcon />\n\nStatusLabel.displayName = 'StatusLabel'\n"],"names":["StatusLabel","props","_jsx","StatusLabelBase","showIcon","displayName"],"mappings":";;;;;AAKA;;;;;;;;;;;;AAYG;AACH;IACaA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAK;EAAA,OAAAC,GAAC,CAAAC,eAAe,eAAKF,KAAK,EAAA;AAAEG,IAAAA,QAAQ,EAAG,IAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAvC,EAAuC;AAEzGJ,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"StatusLabel.mjs","sources":["../../../../src/components/atoms/StatusLabel/StatusLabel.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from './StatusLabelBase'\n\nexport type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase'\n\n/**\n * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).\n *\n * Uses only the status colour tokens and always shows its text, so status is never conveyed by\n * colour alone (decision 0045). Medium shows the status icon. Small shows the status shape for\n * completed, failed and processing, and text only for the neutral pending, scheduled and\n * cancelled, so keep the label visible. Not interactive. Announces changes politely to screen\n * readers.\n *\n * @example\n * ```tsx\n * <StatusLabel status=\"completed\" />\n *\n * <StatusLabel status=\"pending\" label=\"Awaiting approval\" size=\"small\" />\n * ```\n */\n// showIcon comes last so no caller (for example plain JavaScript) can hide the icon\nexport const StatusLabel: React.FC<StatusLabelProps> = (props) => <StatusLabelBase {...props} showIcon />\n\nStatusLabel.displayName = 'StatusLabel'\n"],"names":["StatusLabel","props","_jsx","StatusLabelBase","showIcon","displayName"],"mappings":";;;;;AAKA;;;;;;;;;;;;;;;AAeG;AACH;IACaA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAK;EAAA,OAAAC,GAAC,CAAAC,eAAe,eAAKF,KAAK,EAAA;AAAEG,IAAAA,QAAQ,EAAG,IAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAvC,EAAuC;AAEzGJ,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}

package/dist/components/atoms/StatusLabel/StatusLabelBase.d.mts

@@ -41,8 +41,8 @@ export interface StatusLabelProps {
 }
 /**
  * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
- * (decision 0018).
+ * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
+ * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
  */
 export declare const StatusLabelBase: React.FC<StatusLabelProps & {
     showIcon?: boolean;

package/dist/components/atoms/StatusLabel/StatusLabelBase.d.ts

@@ -41,8 +41,8 @@ export interface StatusLabelProps {
 }
 /**
  * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
- * (decision 0018).
+ * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
+ * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
  */
 export declare const StatusLabelBase: React.FC<StatusLabelProps & {
     showIcon?: boolean;

package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs

@@ -4,6 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import styled$module, { keyframes } from 'styled-components';
 const styled = styled$module.default || styled$module;
 import { Icon } from '../Icon/Icon.mjs';
+import { StatusShape } from './StatusShape.mjs';
 import { reducedMotion, forcedColorsEdge, visuallyHidden } from '../../../lib/styleUtils.mjs';
 import tokens from '../../../lib/cssTokens.mjs';
 
@@ -20,43 +21,46 @@ var labelHeight = tokens.semantic.size.label;
 var label = tokens.component.badge.label;
 var scaleIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
 var getStatusConfig = function getStatusConfig(status) {
+  // Each status's icon and, for the coloured statuses, its shape indicator (decision 0045). The
+  // neutral statuses have no shape: at the small size they're plain text.
   var configs = {
     pending: {
       color: statusColors.pending.text,
       bgColor: statusColors.pending.background,
-      icon: 'refresh',
-      // Fallback until 'clock' icon is added
+      icon: 'statusPending',
       label: 'Pending'
     },
     completed: {
       color: statusColors.completed.text,
       bgColor: statusColors.completed.background,
-      icon: 'check',
+      icon: 'statusSuccess',
+      shape: 'success',
       label: 'Completed'
     },
     failed: {
       color: statusColors.failed.text,
       bgColor: statusColors.failed.background,
-      icon: 'close',
+      icon: 'statusError',
+      shape: 'error',
       label: 'Failed'
     },
     cancelled: {
       color: statusColors.cancelled.text,
       bgColor: statusColors.cancelled.background,
-      icon: 'cancel',
+      icon: 'statusCancelled',
       label: 'Cancelled'
     },
     processing: {
       color: statusColors.processing.text,
       bgColor: statusColors.processing.background,
-      icon: 'refresh',
+      icon: 'statusInProgress',
+      shape: 'inProgress',
       label: 'Processing'
     },
     scheduled: {
       color: statusColors.scheduled.text,
       bgColor: statusColors.scheduled.background,
-      icon: 'bell',
-      // Fallback until 'calendar' icon is added
+      icon: 'statusScheduled',
       label: 'Scheduled'
     }
   };
@@ -109,13 +113,13 @@ var VisibleContent = /*#__PURE__*/styled.span.withConfig({
 })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
 /**
  * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
- * (decision 0018).
+ * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
+ * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
  */])));
 /**
  * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
- * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
- * (decision 0018).
+ * from the package. `showIcon` exists only for StatusBadge. StatusLabel always shows the status icon
+ * at the medium size, and at the small size the shape for coloured statuses (decisions 0018, 0045).
  */
 var StatusLabelBase = function StatusLabelBase(_a) {
   var status = _a.status,
@@ -143,10 +147,12 @@ var StatusLabelBase = function StatusLabelBase(_a) {
     "data-testid": dataTestId,
     children: [jsxs(VisibleContent, {
       "aria-hidden": accessibleLabel ? 'true' : undefined,
-      children: [showIcon && jsx(Icon, {
+      children: [showIcon && size === 'medium' && jsx(Icon, {
         name: statusConfig.icon,
         size: sizeStyles.iconSize,
         iconColor: "inherit"
+      }), showIcon && size === 'small' && statusConfig.shape && jsx(StatusShape, {
+        shape: statusConfig.shape
       }), displayLabel, jsxs(ScreenReaderOnly, {
         children: [status, " status"]
       })]

package/dist/components/atoms/StatusLabel/StatusShape.d.mts

@@ -0,0 +1,4 @@
+import { type StatusShape as StatusShapeName } from '../../../lib/statusShapes.mjs';
+export declare const StatusShape: ({ shape }: {
+    shape: StatusShapeName;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/StatusLabel/StatusShape.d.ts

@@ -0,0 +1,4 @@
+import { type StatusShape as StatusShapeName } from '../../../lib/statusShapes';
+export declare const StatusShape: ({ shape }: {
+    shape: StatusShapeName;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/StatusLabel/StatusShape.mjs

@@ -0,0 +1,31 @@
+'use client';
+import { __makeTemplateObject } 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 { statusShapes } from '../../../lib/statusShapes.mjs';
+
+// The shape indicator: at least 12px (decision 0045), filled with the current text colour, which is
+// the label's role colour at 5.3:1 or more on its tint, so it needs no edge. Decorative: the text
+// beside it names the status. Internal to the status family (#264): not exported from the package.
+var Mark = /*#__PURE__*/styled.svg.withConfig({
+  displayName: "StatusShape__Mark",
+  componentId: "sc-1yzi9jt-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"], ["\n  flex: none;\n  width: ", ";\n  height: ", ";\n  fill: currentColor;\n"])), tokens.semantic.size.icon.xs, tokens.semantic.size.icon.xs);
+var StatusShape = function StatusShape(_a) {
+  var shape = _a.shape;
+  return jsx(Mark, {
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false",
+    "data-shape": shape,
+    children: jsx("path", {
+      d: statusShapes[shape]
+    })
+  });
+};
+var templateObject_1;
+
+export { StatusShape };
+//# sourceMappingURL=StatusShape.mjs.map

package/dist/components/atoms/StatusLabel/StatusShape.mjs.map

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

package/dist/components/atoms/Typography/Typography.mjs

@@ -25,7 +25,7 @@ var getTypographyStyles = function getTypographyStyles(variant) {
     caption: "font: ".concat(typography.caption, "; text-transform: uppercase;"),
     button1: "font: ".concat(tokens.component.button.sizes.large.font, ";"),
     button2: "font: ".concat(tokens.component.button.sizes.medium.font, ";"),
-    button3: "font: ".concat(tokens.component.button.sizes.small.font, ";"),
+    button3: "font: ".concat(tokens.component.button.sizes.small.font, "; font-weight: ").concat(tokens.component.button.sizes.small.fontWeight, ";"),
     label: "font: ".concat(typography.label, ";")
   };
   return styles[variant] || styles.body;
@@ -33,7 +33,7 @@ var getTypographyStyles = function getTypographyStyles(variant) {
 var getTextColor = function getTextColor(colorVariant) {
   var colorMap = {
     "default": color.text["default"],
-    emphasis: color.text.emphasis,
+    emphasis: color.text["default"],
     subdued: color.text.muted,
     inverse: color.text.inverse,
     disabled: color.text.disabled,

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

@@ -5,10 +5,10 @@ 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 { Icon } from '../../atoms/Icon/Icon.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';
 
@@ -22,7 +22,10 @@ var StyledBalanceSection = /*#__PURE__*/styled.div.withConfig({
 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]);
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n  font: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n  font: ", ";\n"])), space[100], function (_a) {
+  var $color = _a.$color;
+  return $color;
+}, semantic.typography.small);
 /*#__PURE__*/styled.div.withConfig({
   displayName: "AccountCard__StyledActions",
   componentId: "sc-1erp7zn-2"
@@ -43,10 +46,12 @@ var trendToIcon = {
   down: 'arrowDown',
   neutral: 'arrowRight'
 };
+// A trend is a differential indicator (decision 0045): the arrow and the signed value carry the
+// direction, and the role colour repeats it. Category colours carry no meaning, so they aren't used.
 var trendToColor = {
-  up: 'green',
-  down: 'red',
-  neutral: 'blue'
+  up: semantic.color.text.success,
+  down: semantic.color.text.danger,
+  neutral: semantic.color.text.muted
 };
 /**
  * AccountCard component
@@ -87,7 +92,7 @@ var AccountCard = function AccountCard(_a) {
   return jsx(Box, {
     minWidth: tokens.component.accountCard.minWidth,
     p: "lg",
-    bg: "subtle",
+    bg: "surface.raised",
     border: "default",
     borderRadius: "xl",
     transition: "box-shadow ".concat(semantic.motion.duration.moderate, " ").concat(semantic.motion.easing.decelerate),
@@ -141,16 +146,19 @@ var AccountCard = function AccountCard(_a) {
                 }), jsx(Typography, {
                   color: "subdued",
                   children: "Available"
-                }), trend && trendValue && jsx(StyledTrendSection, {
+                }), trend && trendValue &&
+                // A group rather than an image, so screen readers read the value as well as the direction
+                jsxs(StyledTrendSection, {
+                  role: "group",
                   "aria-label": "Trend ".concat(trend),
-                  role: "img",
-                  children: jsx(CategoryLabel, {
-                    size: "medium",
-                    icon: trendIcon,
-                    color: trendColor,
-                    variant: "minimal",
+                  "$color": trendColor,
+                  children: [jsx(Icon, {
+                    name: trendIcon,
+                    size: "sm",
+                    iconColor: "inherit"
+                  }), jsx("span", {
                     children: trendValue
-                  })
+                  })]
                 })]
               })
             })]

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

@@ -2,10 +2,10 @@ import React from 'react';
 export interface AlertProps {
     /**
      * Visual style variant affecting background, border, and icon colors
-     * - error: Critical issues, validation errors (crossCircle icon)
-     * - warning: Cautions, potential issues (bell icon)
-     * - info: Tips, helper text, neutral information (info icon)
-     * - success: Confirmations, successful operations (checkRing icon)
+     * - error: Critical issues, validation errors (cross in a hexagon)
+     * - warning: Cautions, potential issues (`!` in a triangle)
+     * - info: Tips, helper text, neutral information (`i` in a square)
+     * - success: Confirmations, successful operations (tick in a circle)
      * @default 'info'
      */
     variant?: 'error' | 'warning' | 'info' | 'success';

package/dist/components/molecules/Alert/Alert.d.ts

@@ -2,10 +2,10 @@ import React from 'react';
 export interface AlertProps {
     /**
      * Visual style variant affecting background, border, and icon colors
-     * - error: Critical issues, validation errors (crossCircle icon)
-     * - warning: Cautions, potential issues (bell icon)
-     * - info: Tips, helper text, neutral information (info icon)
-     * - success: Confirmations, successful operations (checkRing icon)
+     * - error: Critical issues, validation errors (cross in a hexagon)
+     * - warning: Cautions, potential issues (`!` in a triangle)
+     * - info: Tips, helper text, neutral information (`i` in a square)
+     * - success: Confirmations, successful operations (tick in a circle)
      * @default 'info'
      */
     variant?: 'error' | 'warning' | 'info' | 'success';

package/dist/components/molecules/Alert/Alert.mjs

@@ -35,11 +35,12 @@ var fadeOut = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateOb
 // The generated names of the two exits (full, and reduced motion)
 var EXIT_ANIMATION_NAMES = [fadeThenCollapse.getName(), fadeOut.getName()];
 // Default icons by variant
+// Each severity's status icon (decision 0045): decorative, because the title and message say it
 var variantIcons = {
-  error: 'crossCircle',
-  warning: 'bell',
-  info: 'info',
-  success: 'checkRing'
+  error: 'statusError',
+  warning: 'statusWarning',
+  info: 'statusInfo',
+  success: 'statusSuccess'
 };
 // Icon colors by variant (using semantic icon color tokens)
 var variantIconColors = {

package/dist/components/molecules/CodeBlock/CodeBlock.mjs

@@ -15,7 +15,7 @@ var _a = tokens.semantic,
 var StyledCodeBlock = /*#__PURE__*/styled.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.surface.raised, border.emphasis, tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color.text["default"], function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  overflow-y: ", ";\n  margin: ", " 0;\n  position: relative;\n  transition: max-height ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n  \n  ", "\n\n  /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n     (decision 0029) */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.surface.raised, border["default"], tokens.semantic.radius.sm, tokens.semantic.space[300], tokens.component.codeBlock.fontFamily, tokens.component.codeBlock.fontSize, tokens.component.codeBlock.lineHeight, color.text["default"], function (_a) {
   var $isExpanded = _a.$isExpanded,
     $needsExpansion = _a.$needsExpansion;
   return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';

package/dist/components/molecules/Dropdown/Dropdown.mjs

@@ -66,7 +66,7 @@ var DropdownMenu = /*#__PURE__*/styled.div.withConfig({
   },
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-kz07c4-3"
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), tokens.semantic.layer.dropdown, input["default"].backgroundColor, border.emphasis, input["default"].borderRadius, elevation.floating, space[100], function (_a) {
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), tokens.semantic.layer.dropdown, input["default"].backgroundColor, border["default"], input["default"].borderRadius, elevation.floating, space[100], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen ? 1 : 0;
 }, function (_a) {
@@ -89,7 +89,7 @@ var DropdownOption = /*#__PURE__*/styled.button.withConfig({
     selected: $isSelected,
     focused: $isFocused
   });
-}, border.emphasis);
+}, border["default"]);
 var StyledHelperText = /*#__PURE__*/styled.div.withConfig({
   displayName: "Dropdown__StyledHelperText",
   componentId: "sc-kz07c4-5"

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

@@ -5,16 +5,18 @@ 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 { StatusShape } from '../../atoms/StatusLabel/StatusShape.mjs';
 
 var semantic = tokens.semantic;
 var color = semantic.color,
   typography = semantic.typography,
   size = semantic.size;
+// Each severity's status icon and, at the small size, its shape (decision 0045)
 var variantIcons = {
-  error: 'crossCircle',
-  warning: 'bell',
-  info: 'info',
-  success: 'checkRing'
+  error: 'statusError',
+  warning: 'statusWarning',
+  info: 'statusInfo',
+  success: 'statusSuccess'
 };
 var variantTextColors = {
   error: color.text.danger,
@@ -22,6 +24,12 @@ var variantTextColors = {
   info: color.text.accent,
   success: color.text.success
 };
+var variantShapes = {
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+  success: 'success'
+};
 var sizeConfig = {
   small: {
     font: typography.caption,
@@ -122,7 +130,9 @@ var InlineAlert = function InlineAlert(_a) {
     children: hasMessage && jsxs(Fragment, {
       children: [jsx(StyledIconLine, {
         "aria-hidden": "true",
-        children: jsx(Icon, {
+        children: alertSize === 'small' ? jsx(StatusShape, {
+          shape: variantShapes[variant]
+        }) : jsx(Icon, {
           name: variantIcons[variant],
           size: sizeConfig[alertSize].icon,
           iconColor: "inherit"