@common-origin/design-system 2.21.0 → 2.23.0

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

@@ -1,4 +1,13 @@
 import React from 'react';
+/**
+ * Badge variants: `default` and `accent`, plus deprecated aliases of `accent` kept until 3.0.
+ */
+export type BadgeVariant = 'default' | 'accent' | DeprecatedBadgeVariant;
+/**
+ * Deprecated Badge variants, each rendered as `accent` until 3.0 (decisions 0029, 0045).
+ * @deprecated Use `accent`. For a count of items with a status, use StatusLabel.
+ */
+export type DeprecatedBadgeVariant = 'primary' | 'error' | 'warning' | 'success';
 export interface BadgeProps {
     /** Content to wrap with the badge */
     children: React.ReactNode;
@@ -7,12 +16,15 @@ export interface BadgeProps {
     /** Maximum number to display before showing "99+" */
     max?: number;
     /**
-     * Visual variant of the badge. `accent` is the blue highlight. `primary` is a deprecated alias
-     * for `accent`, because Button's `primary` is near-black (decision 0029). It keeps working
-     * until it is removed in 3.0.
+     * Visual variant of the badge. A badge means new or unread items (decision 0045): `accent` is
+     * the blue highlight, and `default` the near-black count. `primary` is a deprecated alias for
+     * `accent`, because Button's `primary` is near-black (decision 0029). `error`, `warning` and
+     * `success` are deprecated aliases for `accent`: a badge's colour alone can't carry a status, so
+     * a count of items with a status uses the status pattern instead ("3 failed" with StatusLabel).
+     * All four keep working until they are removed in 3.0.
      * @default 'default'
      */
-    variant?: 'default' | 'accent' | 'primary' | 'error' | 'warning' | 'success';
+    variant?: BadgeVariant;
     /** Show only a dot indicator instead of count */
     dot?: boolean;
     /** Screen reader label for the badge */

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

@@ -1,4 +1,13 @@
 import React from 'react';
+/**
+ * Badge variants: `default` and `accent`, plus deprecated aliases of `accent` kept until 3.0.
+ */
+export type BadgeVariant = 'default' | 'accent' | DeprecatedBadgeVariant;
+/**
+ * Deprecated Badge variants, each rendered as `accent` until 3.0 (decisions 0029, 0045).
+ * @deprecated Use `accent`. For a count of items with a status, use StatusLabel.
+ */
+export type DeprecatedBadgeVariant = 'primary' | 'error' | 'warning' | 'success';
 export interface BadgeProps {
     /** Content to wrap with the badge */
     children: React.ReactNode;
@@ -7,12 +16,15 @@ export interface BadgeProps {
     /** Maximum number to display before showing "99+" */
     max?: number;
     /**
-     * Visual variant of the badge. `accent` is the blue highlight. `primary` is a deprecated alias
-     * for `accent`, because Button's `primary` is near-black (decision 0029). It keeps working
-     * until it is removed in 3.0.
+     * Visual variant of the badge. A badge means new or unread items (decision 0045): `accent` is
+     * the blue highlight, and `default` the near-black count. `primary` is a deprecated alias for
+     * `accent`, because Button's `primary` is near-black (decision 0029). `error`, `warning` and
+     * `success` are deprecated aliases for `accent`: a badge's colour alone can't carry a status, so
+     * a count of items with a status uses the status pattern instead ("3 failed" with StatusLabel).
+     * All four keep working until they are removed in 3.0.
      * @default 'default'
      */
-    variant?: 'default' | 'accent' | 'primary' | 'error' | 'warning' | 'success';
+    variant?: BadgeVariant;
     /** Show only a dot indicator instead of count */
     dot?: boolean;
     /** Screen reader label for the badge */

package/dist/components/atoms/Badge/Badge.mjs

@@ -37,16 +37,15 @@ var BadgeIndicator = /*#__PURE__*/styled.span.withConfig({
   return props.$isDot ? "".concat(forcedColors, " { forced-color-adjust: none; background-color: CanvasText; }") : "".concat(forcedColors, " { border: ").concat(semantic.border.width.thin, " solid currentColor; }");
 }, function (props) {
   switch (props.$variant) {
+    // 'primary', 'error', 'warning' and 'success' are deprecated aliases for 'accent', removed in
+    // 3.0: 'primary' (#169), and the status colours, because a badge's colour alone can't carry a
+    // status (decision 0045, #263)
     case 'accent':
     case 'primary':
-      // Deprecated alias for 'accent', removed in 3.0 (#169)
-      return "\n          background-color: ".concat(color.fill.accent, ";\n          color: ").concat(color.text.inverse, ";\n        ");
     case 'error':
-      return "\n          background-color: ".concat(color.fill.danger, ";\n          color: ").concat(color.text.inverse, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(color.fill.warning, ";\n          color: ").concat(color.text.inverse, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(color.fill.success, ";\n          color: ").concat(color.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color.fill.accent, ";\n          color: ").concat(color.text.inverse, ";\n        ");
     default:
       return "\n          background-color: ".concat(color.fill.emphasis, ";\n          color: ").concat(color.text.inverse, ";\n        ");
   }

package/dist/components/atoms/Badge/index.d.mts

@@ -1,2 +1,2 @@
 export { Badge } from './Badge.mjs';
-export type { BadgeProps } from './Badge.mjs';
+export type { BadgeProps, BadgeVariant, DeprecatedBadgeVariant } from './Badge.mjs';

package/dist/components/atoms/Badge/index.d.ts

@@ -1,2 +1,2 @@
 export { Badge } from './Badge';
-export type { BadgeProps } from './Badge';
+export type { BadgeProps, BadgeVariant, DeprecatedBadgeVariant } from './Badge';

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

@@ -1,5 +1,24 @@
 import React from 'react';
 import type { Tokens } from '../../../types/tokens.mjs';
+import type { BackgroundPath } from '../../../lib/tokenAliases.mjs';
+/**
+ * Box's background: a semantic token's path below `semantic` (decision 0031), such as
+ * `surface.base`, `surface.raised` or `color.fill.muted`.
+ */
+export type BoxBackground = BackgroundPath | DeprecatedBoxBackground;
+/**
+ * The old `semantic.color.background` keys, removed in 3.0 with those tokens (#99, #304).
+ * @deprecated Use the token path: `default` and `page` → `surface.base`; `subtle` → `surface.raised`;
+ * `overlay` → `surface.scrim`; `surface` → `color.fill.muted`; `transparent` → `color.fill.none`;
+ * `progressTrack` → `color.fill.default`; `hover-overlay`, `active-overlay` and `inverse-overlay` →
+ * `color.fill.none-hover`, `none-pressed` and `inverse-none-hover`. The rest become `color.fill.*`
+ * with `interactive` → `accent`, `error` → `danger`, `neutral` → `default`, `-subtle` → `-muted`
+ * and `-active` → `-pressed`: `interactive-subtle` → `color.fill.accent-muted`, `emphasis` →
+ * `color.fill.emphasis`. `emphasis-hover`
+ * and `emphasis-active` have no static replacement: a strong fill's states belong to the control
+ * that has them (decision 0048).
+ */
+export type DeprecatedBoxBackground = keyof Tokens['semantic']['color']['background'];
 export interface BoxProps {
     display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'none';
     flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
@@ -38,7 +57,12 @@ export interface BoxProps {
     borderRight?: keyof Tokens['semantic']['color']['border'];
     borderBottom?: keyof Tokens['semantic']['color']['border'];
     borderLeft?: keyof Tokens['semantic']['color']['border'];
-    bg?: keyof Tokens['semantic']['color']['background'];
+    /**
+     * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards,
+     * sheets), `surface.scrim`, or a `color.fill.*` fill such as `color.fill.muted`. The old
+     * background keys (`default`, `subtle`, `surface`…) are deprecated and removed in 3.0.
+     */
+    bg?: BoxBackground;
     color?: keyof Tokens['semantic']['color']['text'];
     shadow?: keyof Tokens['semantic']['elevation'];
     cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed';

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

@@ -1,5 +1,24 @@
 import React from 'react';
 import type { Tokens } from '../../../types/tokens';
+import type { BackgroundPath } from '../../../lib/tokenAliases';
+/**
+ * Box's background: a semantic token's path below `semantic` (decision 0031), such as
+ * `surface.base`, `surface.raised` or `color.fill.muted`.
+ */
+export type BoxBackground = BackgroundPath | DeprecatedBoxBackground;
+/**
+ * The old `semantic.color.background` keys, removed in 3.0 with those tokens (#99, #304).
+ * @deprecated Use the token path: `default` and `page` → `surface.base`; `subtle` → `surface.raised`;
+ * `overlay` → `surface.scrim`; `surface` → `color.fill.muted`; `transparent` → `color.fill.none`;
+ * `progressTrack` → `color.fill.default`; `hover-overlay`, `active-overlay` and `inverse-overlay` →
+ * `color.fill.none-hover`, `none-pressed` and `inverse-none-hover`. The rest become `color.fill.*`
+ * with `interactive` → `accent`, `error` → `danger`, `neutral` → `default`, `-subtle` → `-muted`
+ * and `-active` → `-pressed`: `interactive-subtle` → `color.fill.accent-muted`, `emphasis` →
+ * `color.fill.emphasis`. `emphasis-hover`
+ * and `emphasis-active` have no static replacement: a strong fill's states belong to the control
+ * that has them (decision 0048).
+ */
+export type DeprecatedBoxBackground = keyof Tokens['semantic']['color']['background'];
 export interface BoxProps {
     display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'none';
     flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
@@ -38,7 +57,12 @@ export interface BoxProps {
     borderRight?: keyof Tokens['semantic']['color']['border'];
     borderBottom?: keyof Tokens['semantic']['color']['border'];
     borderLeft?: keyof Tokens['semantic']['color']['border'];
-    bg?: keyof Tokens['semantic']['color']['background'];
+    /**
+     * Background colour, as a semantic token path: `surface.base` (page), `surface.raised` (cards,
+     * sheets), `surface.scrim`, or a `color.fill.*` fill such as `color.fill.muted`. The old
+     * background keys (`default`, `subtle`, `surface`…) are deprecated and removed in 3.0.
+     */
+    bg?: BoxBackground;
     color?: keyof Tokens['semantic']['color']['text'];
     shadow?: keyof Tokens['semantic']['elevation'];
     cursor?: 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'help' | 'not-allowed';

package/dist/components/atoms/Box/Box.mjs

@@ -4,9 +4,12 @@ import { jsx } from 'react/jsx-runtime';
 import styled$module, { css } from 'styled-components';
 const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
-import { spaceByLayoutKey, radiusByKey, borderColorByKey, backgroundByKey, textColorByKey } from '../../../lib/tokenAliases.mjs';
+import { spaceByLayoutKey, radiusByKey, borderColorByKey, textColorByKey, backgroundByPath, backgroundByKey } from '../../../lib/tokenAliases.mjs';
 import { reducedMotion } from '../../../lib/styleUtils.mjs';
 
+var backgroundColor = function backgroundColor(bg) {
+  return bg in backgroundByPath ? backgroundByPath[bg] : backgroundByKey[bg];
+};
 var StyledBox = /*#__PURE__*/styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -90,7 +93,7 @@ var StyledBox = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), tokens.semantic.border.width.thin, borderColorByKey[props.$borderLeft]);
 }, function (props) {
-  return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundByKey[props.$bg]);
+  return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor(props.$bg));
 }, function (props) {
   return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), textColorByKey[props.$color]);
 }, function (props) {

package/dist/components/atoms/Button/Button.mjs

@@ -78,7 +78,7 @@ var getSizeStyles = function getSizeStyles(_a) {
   var $size = _a.$size;
   switch ($size) {
     case 'small':
-      return "\n        font: ".concat(button.sizes.small.font, ";\n        min-height: ").concat(control.sm, ";\n        padding: 0 ").concat(inset.md, ";\n      ");
+      return "\n        font: ".concat(button.sizes.small.font, ";\n        font-weight: ").concat(button.sizes.small.fontWeight, ";\n        min-height: ").concat(control.sm, ";\n        padding: 0 ").concat(inset.md, ";\n      ");
     case 'medium':
       return "\n        font: ".concat(button.sizes.medium.font, ";\n        min-height: ").concat(control.md, ";\n        padding: 0 ").concat(inset.lg, ";\n      ");
     case 'large':

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

@@ -1,9 +1,22 @@
 import { ReactNode } from 'react';
 import type { IconName } from '../../../types/icons.mjs';
 /**
- * Category color options for CategoryLabel
+ * The category colours: four display colours with no meaning, and grey for "other" (decision 0043).
+ * They never mean status; for status use StatusLabel.
  */
-export type CategoryColor = 'blue' | 'purple' | 'pink' | 'yellow' | 'green' | 'red' | 'orange' | 'gray';
+export type CategoryDisplayColor = 'olive' | 'periwinkle' | 'rose' | 'magenta' | 'gray';
+/**
+ * Deprecated category colour names, each an alias of the nearest display colour until 3.0
+ * (decision 0043): blue is periwinkle; purple is magenta; pink, red and orange are rose; yellow and
+ * green are olive.
+ * @deprecated Use a CategoryDisplayColor: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray'.
+ */
+export type DeprecatedCategoryColor = 'blue' | 'purple' | 'pink' | 'yellow' | 'green' | 'red' | 'orange';
+/**
+ * Category color options for CategoryLabel. The old hue names still work, as aliases of the
+ * nearest display colour, until 3.0.
+ */
+export type CategoryColor = CategoryDisplayColor | DeprecatedCategoryColor;
 /**
  * Visual variant options for CategoryLabel
  */
@@ -21,8 +34,9 @@ export interface CategoryLabelProps {
      */
     children: ReactNode;
     /**
-     * Color scheme for the label
-     * @default 'blue'
+     * Category colour: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray'. The old hue names are
+     * deprecated aliases (decision 0043).
+     * @default 'periwinkle'
      */
     color?: CategoryColor;
     /**
@@ -52,16 +66,17 @@ export interface CategoryLabelProps {
 /**
  * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
- * A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
- * Category colours carry no status meaning; for status use StatusLabel.
+ * A static, chip-like label with 4 display colours plus grey, 3 visual variants and an optional
+ * icon. Category colours carry no meaning (decision 0043); for status use StatusLabel. Beyond five
+ * categories, the icon and text tell them apart.
  *
  * @example
  * ```tsx
- * <CategoryLabel color="orange" icon="creditCard">
+ * <CategoryLabel color="rose" icon="creditCard">
  *   Shopping
  * </CategoryLabel>
  *
- * <CategoryLabel color="blue" variant="outlined" size="medium">
+ * <CategoryLabel color="periwinkle" variant="outlined" size="medium">
  *   Travel
  * </CategoryLabel>
  * ```

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

@@ -1,9 +1,22 @@
 import { ReactNode } from 'react';
 import type { IconName } from '../../../types/icons';
 /**
- * Category color options for CategoryLabel
+ * The category colours: four display colours with no meaning, and grey for "other" (decision 0043).
+ * They never mean status; for status use StatusLabel.
  */
-export type CategoryColor = 'blue' | 'purple' | 'pink' | 'yellow' | 'green' | 'red' | 'orange' | 'gray';
+export type CategoryDisplayColor = 'olive' | 'periwinkle' | 'rose' | 'magenta' | 'gray';
+/**
+ * Deprecated category colour names, each an alias of the nearest display colour until 3.0
+ * (decision 0043): blue is periwinkle; purple is magenta; pink, red and orange are rose; yellow and
+ * green are olive.
+ * @deprecated Use a CategoryDisplayColor: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray'.
+ */
+export type DeprecatedCategoryColor = 'blue' | 'purple' | 'pink' | 'yellow' | 'green' | 'red' | 'orange';
+/**
+ * Category color options for CategoryLabel. The old hue names still work, as aliases of the
+ * nearest display colour, until 3.0.
+ */
+export type CategoryColor = CategoryDisplayColor | DeprecatedCategoryColor;
 /**
  * Visual variant options for CategoryLabel
  */
@@ -21,8 +34,9 @@ export interface CategoryLabelProps {
      */
     children: ReactNode;
     /**
-     * Color scheme for the label
-     * @default 'blue'
+     * Category colour: 'olive', 'periwinkle', 'rose', 'magenta' or 'gray'. The old hue names are
+     * deprecated aliases (decision 0043).
+     * @default 'periwinkle'
      */
     color?: CategoryColor;
     /**
@@ -52,16 +66,17 @@ export interface CategoryLabelProps {
 /**
  * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
- * A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
- * Category colours carry no status meaning; for status use StatusLabel.
+ * A static, chip-like label with 4 display colours plus grey, 3 visual variants and an optional
+ * icon. Category colours carry no meaning (decision 0043); for status use StatusLabel. Beyond five
+ * categories, the icon and text tell them apart.
  *
  * @example
  * ```tsx
- * <CategoryLabel color="orange" icon="creditCard">
+ * <CategoryLabel color="rose" icon="creditCard">
  *   Shopping
  * </CategoryLabel>
  *
- * <CategoryLabel color="blue" variant="outlined" size="medium">
+ * <CategoryLabel color="periwinkle" variant="outlined" size="medium">
  *   Travel
  * </CategoryLabel>
  * ```

package/dist/components/atoms/CategoryLabel/CategoryLabel.mjs

@@ -14,15 +14,26 @@ var category = color.category;
 var radius = semantic.radius;
 var space = semantic.space;
 var labelHeight = semantic.size.label;
-// Text on white or the -subtle fill (outlined and minimal), at least 4.5:1 (#115)
+var displayColor = {
+  olive: 'olive',
+  periwinkle: 'periwinkle',
+  rose: 'rose',
+  magenta: 'magenta',
+  gray: 'gray',
+  blue: 'periwinkle',
+  purple: 'magenta',
+  pink: 'rose',
+  yellow: 'olive',
+  green: 'olive',
+  red: 'rose',
+  orange: 'rose'
+};
+// Text on white or the -muted fill (outlined and minimal), at least 4.5:1 (#115)
 var categoryText = {
-  blue: category['blue-text'],
-  purple: category['purple-text'],
-  pink: category['pink-text'],
-  yellow: category['yellow-text'],
-  green: category['green-text'],
-  red: category['red-text'],
-  orange: category['orange-text'],
+  olive: category['olive-text'],
+  periwinkle: category['periwinkle-text'],
+  rose: category['rose-text'],
+  magenta: category['magenta-text'],
   gray: category['gray-text']
 };
 var StyledCategoryLabel = /*#__PURE__*/styled.span.withConfig({
@@ -82,16 +93,17 @@ var HiddenLabel = /*#__PURE__*/styled.span.withConfig({
 /**
  * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
- * A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
- * Category colours carry no status meaning; for status use StatusLabel.
+ * A static, chip-like label with 4 display colours plus grey, 3 visual variants and an optional
+ * icon. Category colours carry no meaning (decision 0043); for status use StatusLabel. Beyond five
+ * categories, the icon and text tell them apart.
  *
  * @example
  * ```tsx
- * <CategoryLabel color="orange" icon="creditCard">
+ * <CategoryLabel color="rose" icon="creditCard">
  *   Shopping
  * </CategoryLabel>
  *
- * <CategoryLabel color="blue" variant="outlined" size="medium">
+ * <CategoryLabel color="periwinkle" variant="outlined" size="medium">
  *   Travel
  * </CategoryLabel>
  * ```
@@ -99,16 +111,17 @@ var HiddenLabel = /*#__PURE__*/styled.span.withConfig({
 /**
  * CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
  *
- * A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
- * Category colours carry no status meaning; for status use StatusLabel.
+ * A static, chip-like label with 4 display colours plus grey, 3 visual variants and an optional
+ * icon. Category colours carry no meaning (decision 0043); for status use StatusLabel. Beyond five
+ * categories, the icon and text tell them apart.
  *
  * @example
  * ```tsx
- * <CategoryLabel color="orange" icon="creditCard">
+ * <CategoryLabel color="rose" icon="creditCard">
  *   Shopping
  * </CategoryLabel>
  *
- * <CategoryLabel color="blue" variant="outlined" size="medium">
+ * <CategoryLabel color="periwinkle" variant="outlined" size="medium">
  *   Travel
  * </CategoryLabel>
  * ```
@@ -116,7 +129,7 @@ var HiddenLabel = /*#__PURE__*/styled.span.withConfig({
 var CategoryLabel = function CategoryLabel(_a) {
   var children = _a.children,
     _b = _a.color,
-    color = _b === void 0 ? 'blue' : _b,
+    color = _b === void 0 ? 'periwinkle' : _b,
     _c = _a.variant,
     variant = _c === void 0 ? 'filled' : _c,
     _d = _a.size,
@@ -128,7 +141,7 @@ var CategoryLabel = function CategoryLabel(_a) {
   // A blank aria-label is no label at all, so it falls back like a missing one
   var accessibleLabel = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
   return jsxs(StyledCategoryLabel, {
-    "$color": color,
+    "$color": displayColor[color],
     "$variant": variant,
     "$size": size,
     "data-testid": dataTestId,

package/dist/components/atoms/CategoryLabel/index.d.mts

@@ -1,2 +1,2 @@
 export { CategoryLabel } from './CategoryLabel.mjs';
-export type { CategoryLabelProps, CategoryColor, CategoryVariant, CategoryLabelSize } from './CategoryLabel.mjs';
+export type { CategoryLabelProps, CategoryColor, CategoryDisplayColor, CategoryVariant, CategoryLabelSize } from './CategoryLabel.mjs';

package/dist/components/atoms/CategoryLabel/index.d.ts

@@ -1,2 +1,2 @@
 export { CategoryLabel } from './CategoryLabel';
-export type { CategoryLabelProps, CategoryColor, CategoryVariant, CategoryLabelSize } from './CategoryLabel';
+export type { CategoryLabelProps, CategoryColor, CategoryDisplayColor, CategoryVariant, CategoryLabelSize } from './CategoryLabel';

package/dist/components/atoms/Chip/SuggestionChip.mjs

@@ -27,7 +27,7 @@ var StyledSuggestionChip = /*#__PURE__*/styled.button.withConfig({
  * - A native button: Enter and Space pick it, and its text is its accessible name
  * - Outlined, with the naked hover and pressed fills; no selected state
  * - One chip height (24px minimum, decision 0035); long text wraps instead of being cut off
- */])), semantic.border.width.thin, color.border.input, chip["default"].borderRadius, color.fill.none, color.text["default"], semantic.motion.transition.feedback, sizeStyles, color.fill['none-hover'], color.fill['none-pressed'], chip.focus.outline, semantic.border.focusOffset, color.border.emphasis, color.text.disabled, forcedColors);
+ */])), semantic.border.width.thin, color.border.input, chip["default"].borderRadius, color.fill.none, color.text["default"], semantic.motion.transition.feedback, sizeStyles, color.fill['none-hover'], color.fill['none-pressed'], chip.focus.outline, semantic.border.focusOffset, color.border["default"], color.text.disabled, forcedColors);
 /**
  * SuggestionChip - Offers text to put in the agent input
  *

package/dist/components/atoms/Chip/shared/utils.mjs

@@ -23,7 +23,7 @@ var getVariantStyles = function getVariantStyles(_a) {
       fill = _b.fill,
       text = _b.text;
     var interactiveStates = $clickable;
-    return "\n      background-color: ".concat(fill['accent-muted'], ";\n      color: ").concat(text.accent, ";\n      \n      &:hover {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text['accent-hover'] : text.accent, ";\n      }\n      \n      &:active {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text['accent-pressed'] : text.accent, ";\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ").concat(forcedColors, " {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    ");
+    return "\n      background-color: ".concat(fill['accent-muted'], ";\n      color: ").concat(text.accent, ";\n      \n      &:hover {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text.accent : text.accent, ";\n      }\n      \n      &:active {\n        background-color: ").concat(interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted'], ";\n        color: ").concat(interactiveStates ? text.accent : text.accent, ";\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ").concat(forcedColors, " {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    ");
   }
   switch ($variant) {
     case 'emphasis':

package/dist/components/atoms/Chip/shared/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","sources":["../../../../../src/components/atoms/Chip/shared/utils.ts"],"sourcesContent":["import tokens from '../../../../lib/cssTokens'\nimport { forcedColors } from '../../../../lib/styleUtils'\nimport { ChipVariant } from './types'\n\nconst { component: { chip }, semantic } = tokens\n\ninterface StyledChipProps {\n  $variant: ChipVariant\n  $disabled?: boolean\n  $clickable?: boolean\n  $selected?: boolean\n}\n\n// Helper function to get variant styles matching Button's approach\nexport const getVariantStyles = ({ $variant, $selected, $clickable, $disabled }: StyledChipProps) => {\n  // Selected filter and input chips use the light-blue selected treatment (decision 0016).\n  // The text darkens with the fill so every state stays at least 4.5:1.\n  if ($selected) {\n    // A selected disabled chip looks like any disabled chip; the checkmark keeps the\n    // selected state visible (#110)\n    if ($disabled) {\n      const { disabled } = chip.variants.subtle\n      return `\n        background-color: ${disabled.backgroundColor};\n        color: ${disabled.textColor};\n      `\n    }\n\n    const { fill, text } = tokens.semantic.color\n    const interactiveStates = $clickable\n    return `\n      background-color: ${fill['accent-muted']};\n      color: ${text.accent};\n      \n      &:hover {\n        background-color: ${interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted']};\n        color: ${interactiveStates ? text['accent-hover'] : text.accent};\n      }\n      \n      &:active {\n        background-color: ${interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted']};\n        color: ${interactiveStates ? text['accent-pressed'] : text.accent};\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ${forcedColors} {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    `\n  }\n  \n  switch ($variant) {\n    case 'emphasis':\n      return `\n        background-color: ${chip.variants.emphasis.backgroundColor};\n        color: ${chip.variants.emphasis.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.emphasis.disabled.backgroundColor : ($clickable ? chip.variants.emphasis.hover.backgroundColor : chip.variants.emphasis.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.emphasis.disabled.backgroundColor : ($clickable ? chip.variants.emphasis.active.backgroundColor : chip.variants.emphasis.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.emphasis.disabled.backgroundColor};\n          color: ${chip.variants.emphasis.disabled.textColor};\n        ` : ''}\n      `\n    case 'subtle':\n      return `\n        background-color: ${chip.variants.subtle.backgroundColor};\n        color: ${chip.variants.subtle.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.subtle.disabled.backgroundColor : ($clickable ? chip.variants.subtle.hover.backgroundColor : chip.variants.subtle.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.subtle.disabled.backgroundColor : ($clickable ? chip.variants.subtle.active.backgroundColor : chip.variants.subtle.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.subtle.disabled.backgroundColor};\n          color: ${chip.variants.subtle.disabled.textColor};\n        ` : ''}\n      `\n    case 'interactive':\n      return `\n        background-color: ${chip.variants.interactive.backgroundColor};\n        color: ${chip.variants.interactive.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.interactive.disabled.backgroundColor : ($clickable ? chip.variants.interactive.hover.backgroundColor : chip.variants.interactive.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.interactive.disabled.backgroundColor : ($clickable ? chip.variants.interactive.active.backgroundColor : chip.variants.interactive.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.interactive.disabled.backgroundColor};\n          color: ${chip.variants.interactive.disabled.textColor};\n        ` : ''}\n      `\n    case 'default':\n    default:\n      return `\n        background-color: ${chip.default.backgroundColor};\n        color: ${chip.default.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.disabled.backgroundColor : ($clickable ? chip.hover.backgroundColor : chip.default.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.disabled.backgroundColor : ($clickable ? chip.active.backgroundColor : chip.default.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.disabled.backgroundColor};\n          color: ${chip.disabled.textColor};\n        ` : ''}\n      `\n  }\n}\n\n// Chips have one size: 24px from the label scale as a minimum, with the content centred\n// and no vertical padding (decisions 0034 and 0035). Horizontal padding comes from the\n// semantic spacing scale (decision 0022).\nexport const sizeStyles = `\n  font: ${chip.sizes.medium.font};\n  min-height: ${semantic.size.label.medium};\n  padding: 0 ${semantic.space.inset.sm};\n`\n\n"],"names":["chip","tokens","component","semantic","getVariantStyles","_a","$variant","$selected","$clickable","$disabled","disabled","variants","subtle","concat","backgroundColor","textColor","_b","color","fill","text","interactiveStates","accent","forcedColors","emphasis","hover","active","interactive","sizeStyles","sizes","medium","font","size","label","space","inset","sm"],"mappings":"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"}
+{"version":3,"file":"utils.mjs","sources":["../../../../../src/components/atoms/Chip/shared/utils.ts"],"sourcesContent":["import tokens from '../../../../lib/cssTokens'\nimport { forcedColors } from '../../../../lib/styleUtils'\nimport { ChipVariant } from './types'\n\nconst { component: { chip }, semantic } = tokens\n\ninterface StyledChipProps {\n  $variant: ChipVariant\n  $disabled?: boolean\n  $clickable?: boolean\n  $selected?: boolean\n}\n\n// Helper function to get variant styles matching Button's approach\nexport const getVariantStyles = ({ $variant, $selected, $clickable, $disabled }: StyledChipProps) => {\n  // Selected filter and input chips use the light-blue selected treatment (decision 0016).\n  // The text darkens with the fill so every state stays at least 4.5:1.\n  if ($selected) {\n    // A selected disabled chip looks like any disabled chip; the checkmark keeps the\n    // selected state visible (#110)\n    if ($disabled) {\n      const { disabled } = chip.variants.subtle\n      return `\n        background-color: ${disabled.backgroundColor};\n        color: ${disabled.textColor};\n      `\n    }\n\n    const { fill, text } = tokens.semantic.color\n    const interactiveStates = $clickable\n    return `\n      background-color: ${fill['accent-muted']};\n      color: ${text.accent};\n      \n      &:hover {\n        background-color: ${interactiveStates ? fill['accent-muted-hover'] : fill['accent-muted']};\n        color: ${interactiveStates ? text.accent : text.accent};\n      }\n      \n      &:active {\n        background-color: ${interactiveStates ? fill['accent-muted-pressed'] : fill['accent-muted']};\n        color: ${interactiveStates ? text.accent : text.accent};\n      }\n\n      /* Forced colours drop the fill, so a selected chip takes the system selection colours\n         (decision 0038); its checkmark follows the text colour */\n      ${forcedColors} {\n        forced-color-adjust: none;\n        background-color: Highlight;\n        border-color: Highlight;\n        color: HighlightText;\n      }\n    `\n  }\n  \n  switch ($variant) {\n    case 'emphasis':\n      return `\n        background-color: ${chip.variants.emphasis.backgroundColor};\n        color: ${chip.variants.emphasis.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.emphasis.disabled.backgroundColor : ($clickable ? chip.variants.emphasis.hover.backgroundColor : chip.variants.emphasis.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.emphasis.disabled.backgroundColor : ($clickable ? chip.variants.emphasis.active.backgroundColor : chip.variants.emphasis.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.emphasis.disabled.backgroundColor};\n          color: ${chip.variants.emphasis.disabled.textColor};\n        ` : ''}\n      `\n    case 'subtle':\n      return `\n        background-color: ${chip.variants.subtle.backgroundColor};\n        color: ${chip.variants.subtle.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.subtle.disabled.backgroundColor : ($clickable ? chip.variants.subtle.hover.backgroundColor : chip.variants.subtle.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.subtle.disabled.backgroundColor : ($clickable ? chip.variants.subtle.active.backgroundColor : chip.variants.subtle.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.subtle.disabled.backgroundColor};\n          color: ${chip.variants.subtle.disabled.textColor};\n        ` : ''}\n      `\n    case 'interactive':\n      return `\n        background-color: ${chip.variants.interactive.backgroundColor};\n        color: ${chip.variants.interactive.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.variants.interactive.disabled.backgroundColor : ($clickable ? chip.variants.interactive.hover.backgroundColor : chip.variants.interactive.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.variants.interactive.disabled.backgroundColor : ($clickable ? chip.variants.interactive.active.backgroundColor : chip.variants.interactive.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.variants.interactive.disabled.backgroundColor};\n          color: ${chip.variants.interactive.disabled.textColor};\n        ` : ''}\n      `\n    case 'default':\n    default:\n      return `\n        background-color: ${chip.default.backgroundColor};\n        color: ${chip.default.textColor};\n        \n        &:hover {\n          background-color: ${$disabled ? chip.disabled.backgroundColor : ($clickable ? chip.hover.backgroundColor : chip.default.backgroundColor)};\n        }\n        \n        &:active {\n          background-color: ${$disabled ? chip.disabled.backgroundColor : ($clickable ? chip.active.backgroundColor : chip.default.backgroundColor)};\n        }\n        \n        ${$disabled ? `\n          background-color: ${chip.disabled.backgroundColor};\n          color: ${chip.disabled.textColor};\n        ` : ''}\n      `\n  }\n}\n\n// Chips have one size: 24px from the label scale as a minimum, with the content centred\n// and no vertical padding (decisions 0034 and 0035). Horizontal padding comes from the\n// semantic spacing scale (decision 0022).\nexport const sizeStyles = `\n  font: ${chip.sizes.medium.font};\n  min-height: ${semantic.size.label.medium};\n  padding: 0 ${semantic.space.inset.sm};\n`\n\n"],"names":["chip","tokens","component","semantic","getVariantStyles","_a","$variant","$selected","$clickable","$disabled","disabled","variants","subtle","concat","backgroundColor","textColor","_b","color","fill","text","interactiveStates","accent","forcedColors","emphasis","hover","active","interactive","sizeStyles","sizes","medium","font","size","label","space","inset","sm"],"mappings":"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"}

package/dist/components/atoms/Icon/Icon.mjs

@@ -24,7 +24,7 @@ var IconStyled = /*#__PURE__*/styled.span.withConfig({
     case 'default':
       return tokens.semantic.color.icon["default"];
     case 'emphasis':
-      return tokens.semantic.color.icon.emphasis;
+      return tokens.semantic.color.icon["default"];
     case 'subdued':
       return tokens.semantic.color.icon.muted;
     case 'disabled':