@common-origin/design-system 2.19.0 → 2.21.0

package/dist/components/molecules/TransactionListItem/TransactionListItem.mjs

@@ -0,0 +1,224 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Avatar } from '../../atoms/Avatar/Avatar.mjs';
+import { Badge } from '../../atoms/Badge/Badge.mjs';
+import { CategoryLabel } from '../../atoms/CategoryLabel/CategoryLabel.mjs';
+import { MoneyDisplay } from '../../atoms/MoneyDisplay/MoneyDisplay.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { DateFormatter } from '../../atoms/DateFormatter/DateFormatter.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+import { interactiveRow } from '../../../lib/styleUtils.mjs';
+
+var StyledContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledContainer",
+  componentId: "sc-7yunm0-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"])), tokens.component.transactionListItem.minHeight, tokens.semantic.space[300], tokens.semantic.space[300], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], tokens.semantic.space[300], tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.decelerate, function (_a) {
+  var $clickable = _a.$clickable;
+  return $clickable && "\n    cursor: pointer;\n    ".concat(interactiveRow(), "\n    \n    &:focus-visible {\n      outline: ").concat(tokens.semantic.border.focus, ";\n      outline-offset: calc(-1 * ").concat(tokens.semantic.border.focusOffset, ");\n    }\n  ");
+});
+var StyledAvatarSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledAvatarSection",
+  componentId: "sc-7yunm0-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-shrink: 0;\n"], ["\n  flex-shrink: 0;\n"])));
+var StyledMainContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledMainContent",
+  componentId: "sc-7yunm0-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: none;\n"], ["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: none;\n"])));
+var StyledTopRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledTopRow",
+  componentId: "sc-7yunm0-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
+var StyledMerchantSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledMerchantSection",
+  componentId: "sc-7yunm0-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-width: 0;\n  flex: 1;\n"])), tokens.semantic.space[200]);
+var StyledBottomRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledBottomRow",
+  componentId: "sc-7yunm0-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
+var StyledMetadata = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledMetadata",
+  componentId: "sc-7yunm0-6"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n"])), tokens.semantic.space[200]);
+var StyledIconIndicator = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TransactionListItem__StyledIconIndicator",
+  componentId: "sc-7yunm0-7"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  color: ", ";\n"])), tokens.semantic.space[100], tokens.semantic.color.icon.muted);
+var StyledTruncatedText = /*#__PURE__*/styled.span.withConfig({
+  displayName: "TransactionListItem__StyledTruncatedText",
+  componentId: "sc-7yunm0-8"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"
+// Map categories to CategoryLabel configurations
+])));
+// Map categories to CategoryLabel configurations
+var categoryConfig = {
+  shopping: {
+    color: 'purple',
+    icon: 'paper',
+    label: 'Shopping'
+  },
+  dining: {
+    color: 'orange',
+    icon: 'paper',
+    label: 'Dining'
+  },
+  transport: {
+    color: 'blue',
+    icon: 'paper',
+    label: 'Transport'
+  },
+  entertainment: {
+    color: 'pink',
+    icon: 'star',
+    label: 'Entertainment'
+  },
+  bills: {
+    color: 'red',
+    icon: 'paper',
+    label: 'Bills'
+  },
+  other: {
+    color: 'gray',
+    icon: 'paper',
+    label: 'Other'
+  }
+};
+// Map status to badge variant
+var statusToBadgeVariant = {
+  completed: 'success',
+  pending: 'warning',
+  failed: 'error'
+};
+/**
+ * TransactionListItem component
+ *
+ * Displays a single transaction in a list with merchant info, amount, date,
+ * status, and optional metadata (category, receipt, notes). Minimum height 72px
+ * with interactive states for clickable items.
+ *
+ * Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
+ */
+var TransactionListItem = function TransactionListItem(_a) {
+  var merchant = _a.merchant,
+    amount = _a.amount,
+    date = _a.date,
+    _b = _a.status,
+    status = _b === void 0 ? 'completed' : _b,
+    category = _a.category,
+    merchantLogo = _a.merchantLogo,
+    description = _a.description,
+    _c = _a.hasReceipt,
+    hasReceipt = _c === void 0 ? false : _c,
+    _d = _a.hasNote,
+    hasNote = _d === void 0 ? false : _d,
+    _e = _a.currency,
+    currency = _e === void 0 ? 'AUD' : _e,
+    onClick = _a.onClick,
+    dataTestId = _a["data-testid"];
+  var isClickable = !!onClick;
+  // Determine amount variant
+  var amountVariant = amount > 0 ? 'positive' : amount < 0 ? 'negative' : 'default';
+  // Get category configuration
+  var categoryData = category ? categoryConfig[category] : undefined;
+  // Get badge variant from status
+  var badgeVariant = statusToBadgeVariant[status];
+  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 jsxs(StyledContainer, {
+    "$clickable": isClickable,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: isClickable ? 0 : undefined,
+    role: isClickable ? 'button' : undefined,
+    "aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)) : undefined,
+    "data-testid": dataTestId,
+    children: [jsx(StyledAvatarSection, {
+      children: status === 'pending' ? jsx(Badge, {
+        variant: badgeVariant,
+        dot: true,
+        "aria-label": "Pending transaction",
+        children: jsx(Avatar, {
+          name: merchant,
+          picture: merchantLogo,
+          size: "md"
+        })
+      }) : jsx(Avatar, {
+        name: merchant,
+        picture: merchantLogo,
+        size: "md"
+      })
+    }), jsxs(StyledMainContent, {
+      children: [jsxs(StyledTopRow, {
+        children: [jsxs(StyledMerchantSection, {
+          children: [jsx(StyledTruncatedText, {
+            children: jsx(Typography, {
+              variant: "body",
+              children: merchant
+            })
+          }), categoryData && jsx(CategoryLabel, {
+            color: categoryData.color,
+            icon: categoryData.icon,
+            size: "medium",
+            variant: "minimal",
+            "aria-label": "Category: ".concat(categoryData.label),
+            children: categoryData.label
+          }), status === 'failed' && jsx(Badge, {
+            variant: "error",
+            dot: true,
+            "aria-label": "Failed transaction",
+            children: jsx("span", {})
+          })]
+        }), jsx(MoneyDisplay, {
+          amount: amount,
+          currency: currency,
+          variant: amountVariant,
+          size: "medium",
+          weight: "medium",
+          showSign: true,
+          "data-testid": dataTestId ? "".concat(dataTestId, "-amount") : undefined
+        })]
+      }), jsxs(StyledBottomRow, {
+        children: [jsxs(StyledMetadata, {
+          children: [jsx(DateFormatter, {
+            dateString: typeof date === 'string' ? date : date.toISOString(),
+            mode: "smart",
+            "data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
+          }), description && jsx(StyledTruncatedText, {
+            children: jsxs(Typography, {
+              variant: "small",
+              color: "subdued",
+              children: ["\u2022 ", description]
+            })
+          })]
+        }), (hasReceipt || hasNote) && jsxs(StyledIconIndicator, {
+          children: [hasReceipt && jsx(Icon, {
+            name: "fileDocSearch",
+            size: "xs",
+            "aria-label": "Has receipt"
+          }), hasNote && jsx(Icon, {
+            name: "paper",
+            size: "xs",
+            "aria-label": "Has note"
+          })]
+        })]
+      })]
+    })]
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+
+export { TransactionListItem };
+//# sourceMappingURL=TransactionListItem.mjs.map

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

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

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

@@ -0,0 +1,2 @@
+export { TransactionListItem } from './TransactionListItem.mjs';
+export type { TransactionListItemProps, TransactionStatus, TransactionCategory } from './TransactionListItem.mjs';

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

@@ -0,0 +1,26 @@
+export * from './AccountCard/index.mjs';
+export * from './ActionSheet/index.mjs';
+export * from './AgentInput/index.mjs';
+export * from './Alert/index.mjs';
+export * from './InlineAlert/index.mjs';
+export * from './Breadcrumbs/index.mjs';
+export * from './CardSmall/index.mjs';
+export * from './CardLarge/index.mjs';
+export * from './Checkbox/index.mjs';
+export * from './ChipGroup/index.mjs';
+export * from './CodeBlock/index.mjs';
+export * from './DateGroup/index.mjs';
+export * from './EmptyState/index.mjs';
+export * from './FeatureBlock/index.mjs';
+export * from './Dropdown/index.mjs';
+export * from './List/index.mjs';
+export * from './Modal/index.mjs';
+export * from './NumberInput/index.mjs';
+export * from './PageTitle/index.mjs';
+export * from './PasswordField/index.mjs';
+export * from './SearchField/index.mjs';
+export * from './Sheet/index.mjs';
+export * from './Slider/index.mjs';
+export * from './TabBar/index.mjs';
+export * from './TextField/index.mjs';
+export * from './TransactionListItem/index.mjs';

package/dist/data.js

@@ -173,6 +173,286 @@ var base = {
 			"1100": "rgba(34, 34, 34, 0.706)",
 			"1200": "rgba(34, 34, 34, 1)"
 		},
+		accent: {
+			"100": "#fbfcfd",
+			"200": "#f7f9fc",
+			"300": "#edf3fa",
+			"400": "#e3ecf8",
+			"500": "#d8e5f6",
+			"600": "#cbdef7",
+			"700": "#b9d3f5",
+			"800": "#3190fe",
+			"900": "#0082fc",
+			"1000": "#0278e7",
+			"1100": "#0162bf",
+			"1200": "#0f2339"
+		},
+		"accent-alpha": {
+			"100": "rgba(5, 68, 130, 0.016)",
+			"200": "rgba(5, 68, 161, 0.032)",
+			"300": "rgba(1, 86, 185, 0.071)",
+			"400": "rgba(0, 82, 191, 0.11)",
+			"500": "rgba(0, 85, 196, 0.153)",
+			"600": "rgba(0, 93, 216, 0.204)",
+			"700": "rgba(0, 95, 219, 0.275)",
+			"800": "rgba(0, 118, 254, 0.808)",
+			"900": "rgba(0, 130, 252, 1)",
+			"1000": "rgba(0, 119, 231, 0.993)",
+			"1100": "rgba(0, 98, 191, 0.997)",
+			"1200": "rgba(0, 21, 45, 0.942)"
+		},
+		success: {
+			"100": "#f9fdfa",
+			"200": "#f0fcf5",
+			"300": "#dbf9e8",
+			"400": "#c4f7da",
+			"500": "#aff3ce",
+			"600": "#98eec0",
+			"700": "#77e6af",
+			"800": "#02a56c",
+			"900": "#009762",
+			"1000": "#018b5a",
+			"1100": "#017249",
+			"1200": "#12261b"
+		},
+		"success-alpha": {
+			"100": "rgba(5, 172, 47, 0.024)",
+			"200": "rgba(1, 204, 86, 0.059)",
+			"300": "rgba(1, 213, 93, 0.142)",
+			"400": "rgba(1, 221, 96, 0.232)",
+			"500": "rgba(0, 217, 99, 0.314)",
+			"600": "rgba(0, 213, 99, 0.404)",
+			"700": "rgba(0, 208, 105, 0.534)",
+			"800": "rgba(0, 164, 107, 0.993)",
+			"900": "rgba(0, 151, 98, 1)",
+			"1000": "rgba(0, 139, 90, 0.997)",
+			"1100": "rgba(0, 114, 72, 0.997)",
+			"1200": "rgba(0, 22, 10, 0.93)"
+		},
+		warning: {
+			"100": "#fdfcfa",
+			"200": "#fcf9f4",
+			"300": "#faf1e3",
+			"400": "#f8e9d1",
+			"500": "#f7e1be",
+			"600": "#f7d8a5",
+			"700": "#f7cb80",
+			"800": "#bd8600",
+			"900": "#ad7b00",
+			"1000": "#9f7102",
+			"1100": "#835c00",
+			"1200": "#292111"
+		},
+		"warning-alpha": {
+			"100": "rgba(155, 105, 5, 0.02)",
+			"200": "rgba(187, 119, 5, 0.044)",
+			"300": "rgba(210, 128, 0, 0.11)",
+			"400": "rgba(216, 133, 1, 0.181)",
+			"500": "rgba(224, 137, 0, 0.255)",
+			"600": "rgba(232, 145, 0, 0.353)",
+			"700": "rgba(239, 151, 0, 0.499)",
+			"800": "rgba(189, 134, 0, 1)",
+			"900": "rgba(173, 123, 0, 1)",
+			"1000": "rgba(158, 112, 0, 0.993)",
+			"1100": "rgba(131, 92, 0, 1)",
+			"1200": "rgba(26, 17, 0, 0.934)"
+		},
+		serious: {
+			"100": "#fefcfb",
+			"200": "#fcf8f6",
+			"300": "#faf0eb",
+			"400": "#f8e8e0",
+			"500": "#f7dfd4",
+			"600": "#f6d5c5",
+			"700": "#f7c7b0",
+			"800": "#ed6800",
+			"900": "#da5f00",
+			"1000": "#c85701",
+			"1100": "#a54703",
+			"1200": "#341c10"
+		},
+		"serious-alpha": {
+			"100": "rgba(193, 68, 5, 0.016)",
+			"200": "rgba(172, 61, 5, 0.036)",
+			"300": "rgba(192, 65, 2, 0.079)",
+			"400": "rgba(198, 66, 1, 0.122)",
+			"500": "rgba(208, 66, 1, 0.169)",
+			"600": "rgba(216, 71, 1, 0.228)",
+			"700": "rgba(229, 74, 0, 0.31)",
+			"800": "rgba(237, 104, 0, 1)",
+			"900": "rgba(218, 95, 0, 1)",
+			"1000": "rgba(200, 86, 0, 0.997)",
+			"1100": "rgba(164, 69, 0, 0.989)",
+			"1200": "rgba(39, 13, 0, 0.938)"
+		},
+		danger: {
+			"100": "#fefcfc",
+			"200": "#fcf8f7",
+			"300": "#faf0ee",
+			"400": "#f8e7e4",
+			"500": "#f8dfdb",
+			"600": "#f7d4ce",
+			"700": "#f7c6be",
+			"800": "#ff5444",
+			"900": "#ff2b21",
+			"1000": "#f30004",
+			"1100": "#c90002",
+			"1200": "#3d1611"
+		},
+		"danger-alpha": {
+			"100": "rgba(172, 5, 5, 0.012)",
+			"200": "rgba(161, 36, 5, 0.032)",
+			"300": "rgba(180, 31, 1, 0.067)",
+			"400": "rgba(189, 29, 0, 0.106)",
+			"500": "rgba(206, 30, 1, 0.142)",
+			"600": "rgba(214, 32, 1, 0.193)",
+			"700": "rgba(224, 31, 0, 0.255)",
+			"800": "rgba(255, 22, 0, 0.734)",
+			"900": "rgba(255, 12, 0, 0.871)",
+			"1000": "rgba(243, 0, 4, 1)",
+			"1100": "rgba(201, 0, 2, 1)",
+			"1200": "rgba(47, 6, 0, 0.934)"
+		},
+		ai: {
+			"100": "#fdfcfe",
+			"200": "#faf8fc",
+			"300": "#f4f0fa",
+			"400": "#efe8f8",
+			"500": "#eae0f7",
+			"600": "#e4d6f6",
+			"700": "#ddc9f7",
+			"800": "#b76bff",
+			"900": "#b056ff",
+			"1000": "#aa3dff",
+			"1100": "#9602eb",
+			"1200": "#2e1743"
+		},
+		"ai-alpha": {
+			"100": "rgba(88, 5, 172, 0.012)",
+			"200": "rgba(76, 5, 148, 0.028)",
+			"300": "rgba(69, 1, 170, 0.059)",
+			"400": "rgba(79, 2, 178, 0.091)",
+			"500": "rgba(83, 1, 189, 0.122)",
+			"600": "rgba(87, 0, 199, 0.161)",
+			"700": "rgba(95, 0, 217, 0.212)",
+			"800": "rgba(131, 0, 255, 0.581)",
+			"900": "rgba(136, 0, 255, 0.663)",
+			"1000": "rgba(143, 0, 255, 0.761)",
+			"1100": "rgba(149, 0, 235, 0.993)",
+			"1200": "rgba(25, 0, 48, 0.91)"
+		},
+		olive: {
+			"100": "#fbfdf4",
+			"200": "#f7fbe8",
+			"300": "#eff6d4",
+			"400": "#e6f0bf",
+			"500": "#deebaa",
+			"600": "#d5e493",
+			"700": "#c9da73",
+			"800": "#889903",
+			"900": "#7d8c02",
+			"1000": "#738000",
+			"1100": "#5d6900",
+			"1200": "#202410"
+		},
+		"olive-alpha": {
+			"100": "rgba(164, 210, 5, 0.044)",
+			"200": "rgba(167, 211, 2, 0.091)",
+			"300": "rgba(160, 202, 1, 0.169)",
+			"400": "rgba(155, 195, 0, 0.251)",
+			"500": "rgba(156, 195, 1, 0.334)",
+			"600": "rgba(156, 191, 0, 0.424)",
+			"700": "rgba(157, 188, 0, 0.55)",
+			"800": "rgba(135, 152, 0, 0.989)",
+			"900": "rgba(124, 139, 0, 0.993)",
+			"1000": "rgba(115, 128, 0, 1)",
+			"1100": "rgba(93, 105, 0, 1)",
+			"1200": "rgba(17, 22, 0, 0.938)"
+		},
+		periwinkle: {
+			"100": "#fcfcfd",
+			"200": "#f8f9fc",
+			"300": "#f0f2fa",
+			"400": "#e8ebf9",
+			"500": "#dfe3f7",
+			"600": "#d6dbf7",
+			"700": "#c8cff6",
+			"800": "#7a84ff",
+			"900": "#6e74fe",
+			"1000": "#6464ff",
+			"1100": "#533eff",
+			"1200": "#1a1b51"
+		},
+		"periwinkle-alpha": {
+			"100": "rgba(5, 5, 88, 0.012)",
+			"200": "rgba(5, 41, 148, 0.028)",
+			"300": "rgba(1, 35, 170, 0.059)",
+			"400": "rgba(2, 35, 189, 0.091)",
+			"500": "rgba(1, 33, 192, 0.126)",
+			"600": "rgba(0, 31, 205, 0.161)",
+			"700": "rgba(0, 33, 213, 0.216)",
+			"800": "rgba(0, 19, 255, 0.522)",
+			"900": "rgba(0, 11, 253, 0.569)",
+			"1000": "rgba(0, 0, 255, 0.608)",
+			"1100": "rgba(28, 0, 255, 0.757)",
+			"1200": "rgba(0, 1, 61, 0.899)"
+		},
+		rose: {
+			"100": "#fefcfc",
+			"200": "#fcf8f9",
+			"300": "#faeff1",
+			"400": "#f8e7ea",
+			"500": "#f8dee3",
+			"600": "#f7d3da",
+			"700": "#f7c4cf",
+			"800": "#ff4989",
+			"900": "#ff0f7c",
+			"1000": "#ec0071",
+			"1100": "#c4005d",
+			"1200": "#3c1520"
+		},
+		"rose-alpha": {
+			"100": "rgba(172, 5, 5, 0.012)",
+			"200": "rgba(148, 5, 41, 0.028)",
+			"300": "rgba(176, 1, 33, 0.063)",
+			"400": "rgba(181, 2, 34, 0.095)",
+			"500": "rgba(201, 1, 40, 0.13)",
+			"600": "rgba(209, 1, 41, 0.173)",
+			"700": "rgba(221, 1, 48, 0.232)",
+			"800": "rgba(255, 0, 90, 0.714)",
+			"900": "rgba(255, 0, 116, 0.942)",
+			"1000": "rgba(236, 0, 113, 1)",
+			"1100": "rgba(196, 0, 93, 1)",
+			"1200": "rgba(43, 0, 12, 0.918)"
+		},
+		magenta: {
+			"100": "#fdfbfd",
+			"200": "#fdf8fc",
+			"300": "#faeff9",
+			"400": "#f9e6f7",
+			"500": "#f8dcf5",
+			"600": "#f7d0f3",
+			"700": "#f7bff2",
+			"800": "#fd00fa",
+			"900": "#e900e6",
+			"1000": "#d700d4",
+			"1100": "#b100af",
+			"1200": "#371535"
+		},
+		"magenta-alpha": {
+			"100": "rgba(130, 5, 130, 0.016)",
+			"200": "rgba(184, 5, 148, 0.028)",
+			"300": "rgba(176, 1, 160, 0.063)",
+			"400": "rgba(194, 2, 174, 0.099)",
+			"500": "rgba(204, 1, 183, 0.138)",
+			"600": "rgba(212, 1, 190, 0.185)",
+			"700": "rgba(223, 0, 203, 0.251)",
+			"800": "rgba(253, 0, 250, 1)",
+			"900": "rgba(233, 0, 230, 1)",
+			"1000": "rgba(215, 0, 212, 1)",
+			"1100": "rgba(177, 0, 175, 1)",
+			"1200": "rgba(37, 0, 35, 0.918)"
+		},
 		neutral: {
 			"100": "#f8f9fa",
 			"200": "#e9ecef",
@@ -1175,7 +1455,8 @@ var semantic = {
 			accent: "#0265DC",
 			"accent-hover": "#0054B6",
 			"accent-pressed": "#004491",
-			danger: "#D31510"
+			danger: "#D31510",
+			ai: "#9602eb"
 		},
 		background: {
 			"default": "#f8f9fa",
@@ -1244,7 +1525,8 @@ var semantic = {
 			accent: "#0265DC",
 			"accent-hover": "#0054B6",
 			"accent-pressed": "#004491",
-			danger: "#D31510"
+			danger: "#D31510",
+			ai: "#9602eb"
 		},
 		financial: {
 			credit: "#15A46E",
@@ -1452,6 +1734,22 @@ var tokensJson = {
 	semantic: semantic
 };
 
+var ai = {
+	path: "M10 6C10.6 11 13 13.4 18 14C13 14.6 10.6 17 10 22C9.4 17 7 14.6 2 14C7 13.4 9.4 11 10 6Z M18 2C18.3 4.5 19.5 5.7 22 6C19.5 6.3 18.3 7.5 18 10C17.7 7.5 16.5 6.3 14 6C16.5 5.7 17.7 4.5 18 2Z",
+	name: "ai",
+	description: "Two solid four-point sparkles, one large and one small",
+	category: "content",
+	aliases: [
+		"sparkle",
+		"sparkles",
+		"generated",
+		"agent",
+		"magic"
+	],
+	intent: "Use to mark AI-generated content and agent actions, always with a text label (decisions 0043 and 0046)",
+	decorativeDefault: false,
+	ariaLabelDefault: "AI"
+};
 var add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
 	name: "add",
@@ -1826,7 +2124,6 @@ var pause = {
 	description: "Two vertical bars",
 	category: "media",
 	aliases: [
-		"stop",
 		"halt",
 		"break"
 	],
@@ -1834,6 +2131,20 @@ var pause = {
 	decorativeDefault: false,
 	ariaLabelDefault: "Pause"
 };
+var stop = {
+	path: "M8 6H16C17.1046 6 18 6.89543 18 8V16C18 17.1046 17.1046 18 16 18H8C6.89543 18 6 17.1046 6 16V8C6 6.89543 6.89543 6 8 6Z",
+	name: "stop",
+	description: "Filled square with rounded corners",
+	category: "media",
+	aliases: [
+		"halt",
+		"end",
+		"cancel-generation"
+	],
+	intent: "Use to stop something in progress, such as an agent generating a response or media playback",
+	decorativeDefault: false,
+	ariaLabelDefault: "Stop"
+};
 var play = {
 	path: "M16.138 10.569 9.605 7.303A1.8 1.8 0 0 0 7 8.913v6.175a1.8 1.8 0 0 0 2.605 1.61l6.533-3.267c1.18-.59 1.18-2.272 0-2.862Z",
 	name: "play",
@@ -2179,6 +2490,7 @@ var move = {
 	ariaLabelDefault: "Move"
 };
 var iconsJson = {
+	ai: ai,
 	add: add,
 	addRing: addRing,
 	arrowDown: arrowDown,
@@ -2219,6 +2531,7 @@ var iconsJson = {
 	menu: menu,
 	paper: paper,
 	pause: pause,
+	stop: stop,
 	play: play,
 	playBack: playBack,
 	lineOut: lineOut,

package/dist/data.js.map

@@ -1 +1 @@
-{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\n\n// The published types come from the generated `src/styles/tokens.ts`, which carries each token's\n// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the\n// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can\n// only resolve with `resolveJsonModule`.\nexport const tokens: Tokens = tokensJson\n\nexport type { Tokens }\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'star'\n  | 'starFilled'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAWC;;ACP9B;AACA;AACA;AA2FA;AACO,IAAMC,SAAS,GAAGC;;;;;;;"}
+{"version":3,"file":"data.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\nimport type { Tokens } from '../styles/tokens'\n\n// The published types come from the generated `src/styles/tokens.ts`, which carries each token's\n// description as JSDoc and `@deprecated` on deprecated tokens (decision 0033, #199). Declaring the\n// constant with that type also keeps emitted .d.ts files free of JSON imports, which consumers can\n// only resolve with `resolveJsonModule`.\nexport const tokens: Tokens = tokensJson\n\nexport type { Tokens }\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n  | 'add'\n  | 'ai'\n  | 'addRing'\n  | 'arrowDown'\n  | 'arrowLeft'\n  | 'arrowRight'\n  | 'arrowUp'\n  | 'back'\n  | 'bell'\n  | 'cancel'\n  | 'caret'\n  | 'caretDown'\n  | 'caretUp'\n  | 'check'\n  | 'checkRing'\n  | 'close'\n  | 'copy'\n  | 'creditCard'\n  | 'crossCircle'\n  | 'directionRight'\n  | 'directionUp'\n  | 'edit'\n  | 'export'\n  | 'fileDocSearch'\n  | 'filter'\n  | 'info'\n  | 'kebab'\n  | 'lamp'\n  | 'lineOut'\n  | 'link'\n  | 'meatballs'\n  | 'menu'\n  | 'message'\n  | 'move'\n  | 'mic'\n  | 'order'\n  | 'paper'\n  | 'pause'\n  | 'play'\n  | 'playBack'\n  | 'refresh'\n  | 'remove'\n  | 'search'\n  | 'star'\n  | 'starFilled'\n  | 'stop'\n  | 'table'\n  | 'trash'\n  | 'userBox'\n  | 'view'\n  | 'viewHide'\n  | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n  | 'action'\n  | 'communication'\n  | 'content'\n  | 'feedback'\n  | 'media'\n  | 'navigation'\n  | 'object'\n  | 'status'\n  | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n  /** SVG path data */\n  path: string\n  /** Display name of the icon */\n  name: string\n  /** What the icon visually depicts */\n  description: string\n  /** Semantic category for grouping */\n  category: IconCategory\n  /** Alternative names and search terms */\n  aliases: string[]\n  /** When and why to use this icon */\n  intent: string\n  /** Whether the icon is typically decorative (true) or informative (false) */\n  decorativeDefault: boolean\n  /** Suggested accessible label when the icon conveys meaning */\n  ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAWC;;ACP9B;AACA;AACA;AA6FA;AACO,IAAMC,SAAS,GAAGC;;;;;;;"}

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+export * from './components/index.mjs';
+export { tokens, type Tokens, type TokensBase, type TokensSemantic, type TokensComponent, } from './types/tokens.mjs';
+export { iconsData, type IconName, type IconCategory, type IconMetadata, type IconRegistry, } from './types/icons.mjs';