@common-origin/design-system 2.21.0 → 2.23.0

package/dist/components/molecules/TabBar/TabBar.mjs

@@ -11,7 +11,7 @@ var semantic = tokens.semantic;
 var StyledTabList = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabBar__StyledTabList",
   componentId: "sc-1g9ib0y-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), semantic.border.width.thin, semantic.color.border.emphasis, tokens.component.tabBar.scrollbar.height, semantic.surface.raised, semantic.color.border["default"], semantic.radius.sm);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  border-bottom: ", " solid ", ";\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  \n  &::-webkit-scrollbar {\n    height: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n"])), semantic.border.width.thin, semantic.color.border["default"], tokens.component.tabBar.scrollbar.height, semantic.surface.raised, semantic.color.border["default"], semantic.radius.sm);
 var StyledTab = /*#__PURE__*/styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -31,11 +31,11 @@ var StyledTab = /*#__PURE__*/styled.button.withConfig({
 }, function (props) {
   return props.$isActive ? semantic.color.fill['accent-muted-hover'] : 'transparent';
 }, function (props) {
-  return props.$isActive ? semantic.color.text['accent-hover'] : semantic.color.text["default"];
+  return props.$isActive ? semantic.color.text.accent : semantic.color.text["default"];
 }, function (props) {
   return props.$isActive ? semantic.color.fill['accent-muted-pressed'] : 'transparent';
 }, function (props) {
-  return props.$isActive ? semantic.color.text['accent-pressed'] : semantic.color.text["default"];
+  return props.$isActive ? semantic.color.text.accent : semantic.color.text["default"];
 }, function (props) {
   return props.$disabled ? '0.5' : '1';
 }, semantic.border.focus, semantic.border.focusOffset);

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

@@ -34,6 +34,6 @@ export interface TransactionListItemProps {
  * status, and optional metadata (category, receipt, notes). Minimum height 72px
  * with interactive states for clickable items.
  *
- * Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
+ * Composes: Avatar, CategoryLabel, StatusLabel, MoneyDisplay, Icon, DateFormatter, Typography, Stack
  */
 export declare const TransactionListItem: React.FC<TransactionListItemProps>;

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

@@ -34,6 +34,6 @@ export interface TransactionListItemProps {
  * status, and optional metadata (category, receipt, notes). Minimum height 72px
  * with interactive states for clickable items.
  *
- * Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
+ * Composes: Avatar, CategoryLabel, StatusLabel, MoneyDisplay, Icon, DateFormatter, Typography, Stack
  */
 export declare const TransactionListItem: React.FC<TransactionListItemProps>;

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

@@ -4,7 +4,7 @@ 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 { StatusLabel } from '../../atoms/StatusLabel/StatusLabel.mjs';
 import { CategoryLabel } from '../../atoms/CategoryLabel/CategoryLabel.mjs';
 import { MoneyDisplay } from '../../atoms/MoneyDisplay/MoneyDisplay.mjs';
 import { Icon } from '../../atoms/Icon/Icon.mjs';
@@ -56,28 +56,30 @@ var StyledTruncatedText = /*#__PURE__*/styled.span.withConfig({
 ])));
 // Map categories to CategoryLabel configurations
 var categoryConfig = {
+  // Display colours carry no meaning (decision 0043); five coloured categories share four colours,
+  // so the icon and label tell dining and bills apart
   shopping: {
-    color: 'purple',
+    color: 'magenta',
     icon: 'paper',
     label: 'Shopping'
   },
   dining: {
-    color: 'orange',
+    color: 'rose',
     icon: 'paper',
     label: 'Dining'
   },
   transport: {
-    color: 'blue',
+    color: 'periwinkle',
     icon: 'paper',
     label: 'Transport'
   },
   entertainment: {
-    color: 'pink',
+    color: 'olive',
     icon: 'star',
     label: 'Entertainment'
   },
   bills: {
-    color: 'red',
+    color: 'rose',
     icon: 'paper',
     label: 'Bills'
   },
@@ -87,12 +89,6 @@ var categoryConfig = {
     label: 'Other'
   }
 };
-// Map status to badge variant
-var statusToBadgeVariant = {
-  completed: 'success',
-  pending: 'warning',
-  failed: 'error'
-};
 /**
  * TransactionListItem component
  *
@@ -100,7 +96,7 @@ var statusToBadgeVariant = {
  * status, and optional metadata (category, receipt, notes). Minimum height 72px
  * with interactive states for clickable items.
  *
- * Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
+ * Composes: Avatar, CategoryLabel, StatusLabel, MoneyDisplay, Icon, DateFormatter, Typography, Stack
  */
 var TransactionListItem = function TransactionListItem(_a) {
   var merchant = _a.merchant,
@@ -124,8 +120,6 @@ var TransactionListItem = function TransactionListItem(_a) {
   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();
@@ -143,19 +137,10 @@ var TransactionListItem = function TransactionListItem(_a) {
     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,
+    "aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)).concat(status === 'completed' ? '' : ", ".concat(status)) : 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, {
+      children: jsx(Avatar, {
         name: merchant,
         picture: merchantLogo,
         size: "md"
@@ -175,11 +160,10 @@ var TransactionListItem = function TransactionListItem(_a) {
             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", {})
+          }), status !== 'completed' && jsx(StatusLabel, {
+            status: status,
+            size: "small",
+            liveRegion: false
           })]
         }), jsx(MoneyDisplay, {
           amount: amount,