@common-origin/design-system 2.20.0 → 2.22.0

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

@@ -0,0 +1,30 @@
+import React from 'react';
+export type AILabelKind = 'suggested' | 'removal';
+export type AILabelSize = 'small' | 'medium';
+export interface AILabelProps {
+    /**
+     * What the agent proposes for the item: a change or addition ("Suggested"), or its removal
+     * ("Will be removed"). The wording is fixed so it reads the same in every product (decision 0046).
+     * @default 'suggested'
+     */
+    kind?: AILabelKind;
+    /**
+     * Size on the label scale (decision 0018): small (20px) for dense lists, medium (24px) elsewhere.
+     * @default 'medium'
+     */
+    size?: AILabelSize;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */
+export declare const AILabel: React.FC<AILabelProps>;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+export type AILabelKind = 'suggested' | 'removal';
+export type AILabelSize = 'small' | 'medium';
+export interface AILabelProps {
+    /**
+     * What the agent proposes for the item: a change or addition ("Suggested"), or its removal
+     * ("Will be removed"). The wording is fixed so it reads the same in every product (decision 0046).
+     * @default 'suggested'
+     */
+    kind?: AILabelKind;
+    /**
+     * Size on the label scale (decision 0018): small (20px) for dense lists, medium (24px) elsewhere.
+     * @default 'medium'
+     */
+    size?: AILabelSize;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */
+export declare const AILabel: React.FC<AILabelProps>;

package/dist/components/atoms/AILabel/AILabel.mjs

@@ -0,0 +1,94 @@
+'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 tokens from '../../../lib/cssTokens.mjs';
+import { Icon } from '../Icon/Icon.mjs';
+
+var semantic = tokens.semantic;
+var color = semantic.color,
+  typography = semantic.typography,
+  size = semantic.size;
+var labels = {
+  suggested: 'Suggested',
+  removal: 'Will be removed'
+};
+var sizeConfig = {
+  small: {
+    font: typography.caption,
+    gap: semantic.space[100],
+    icon: 'xs'
+  },
+  medium: {
+    font: typography.small,
+    gap: semantic.space[200],
+    icon: 'sm'
+  }
+};
+var StyledAILabel = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "AILabel__StyledAILabel",
+  componentId: "sc-qknkn-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"], ["\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  min-height: ", ";\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  white-space: nowrap;\n"])), function (_a) {
+  var $size = _a.$size;
+  return size.label[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig[$size].gap;
+}, function (_a) {
+  var $size = _a.$size;
+  return sizeConfig[$size].font;
+}, color.text.ai);
+var StyledIcon = /*#__PURE__*/styled.span.withConfig({
+  displayName: "AILabel__StyledIcon",
+  componentId: "sc-qknkn-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  color: ", ";\n"], ["\n  display: inline-flex;\n  color: ", ";\n"
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */])), color.icon.ai);
+/**
+ * AILabel marks content an agent has proposed but the user hasn't accepted (decision 0046): the AI
+ * icon and a fixed label in the AI colour, never colour alone (decision 0043). It isn't a status
+ * (use StatusLabel) or a category (use CategoryLabel), and it doesn't label AI features in general.
+ *
+ * @example
+ * ```tsx
+ * <AILabel />                  // "Suggested"
+ * <AILabel kind="removal" />   // "Will be removed"
+ * ```
+ */
+var AILabel = function AILabel(_a) {
+  var _b = _a.kind,
+    kind = _b === void 0 ? 'suggested' : _b,
+    _c = _a.size,
+    labelSize = _c === void 0 ? 'medium' : _c,
+    dataTestId = _a["data-testid"];
+  return jsxs(StyledAILabel, {
+    "$size": labelSize,
+    "data-testid": dataTestId,
+    children: [jsx(StyledIcon, {
+      "aria-hidden": "true",
+      children: jsx(Icon, {
+        name: "ai",
+        size: sizeConfig[labelSize].icon,
+        iconColor: "inherit"
+      })
+    }), labels[kind]]
+  });
+};
+AILabel.displayName = 'AILabel';
+var templateObject_1, templateObject_2;
+
+export { AILabel };
+//# sourceMappingURL=AILabel.mjs.map

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

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

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

@@ -0,0 +1 @@
+export * from './AILabel.mjs';

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

@@ -0,0 +1 @@
+export * from './AILabel';

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/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.d.mts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface SuggestionChipProps {
+    /** The suggestion. It's also the button's accessible name, so keep it short and self-explanatory. */
+    children: React.ReactNode;
+    /** Called when the suggestion is picked. Put its text in the input; never send it (decision 0046). */
+    onClick: () => void;
+    /** Disables the chip */
+    disabled?: boolean;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * SuggestionChip - Offers text to put in the agent input
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - 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
+ */
+export declare const SuggestionChip: React.FC<SuggestionChipProps>;

package/dist/components/atoms/Chip/SuggestionChip.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface SuggestionChipProps {
+    /** The suggestion. It's also the button's accessible name, so keep it short and self-explanatory. */
+    children: React.ReactNode;
+    /** Called when the suggestion is picked. Put its text in the input; never send it (decision 0046). */
+    onClick: () => void;
+    /** Disables the chip */
+    disabled?: boolean;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+}
+/**
+ * SuggestionChip - Offers text to put in the agent input
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - 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
+ */
+export declare const SuggestionChip: React.FC<SuggestionChipProps>;

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

@@ -0,0 +1,61 @@
+'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 { forcedColors } from '../../../lib/styleUtils.mjs';
+import { sizeStyles } from './shared/utils.mjs';
+
+var chip = tokens.component.chip,
+  semantic = tokens.semantic;
+var color = semantic.color;
+// Outlined, with the naked fill ladder on hover and press (decisions 0030, 0046): the edge keeps it
+// visible on white, the page and AgentInput's docked band
+var StyledSuggestionChip = /*#__PURE__*/styled.button.withConfig({
+  displayName: "SuggestionChip__StyledSuggestionChip",
+  componentId: "sc-1k0njm-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n  margin: 0;\n  box-sizing: border-box;\n  border: ", " solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-align: start;\n  /* A long suggestion wraps inside the chip rather than being cut off (issue 279) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n  transition: ", ";\n  ", "\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    border-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* Forced colours: a native button gets ButtonBorder and GrayText; keep the edge (decision 0038) */\n  ", " {\n    border-color: ButtonBorder;\n\n    &:disabled {\n      border-color: GrayText;\n    }\n  }\n"
+/**
+ * SuggestionChip - Offers text to put in the agent input
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - 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["default"], color.text.disabled, forcedColors);
+/**
+ * SuggestionChip - Offers text to put in the agent input
+ *
+ * The Suggestion chip type from decision 0046 (amending 0016): the one chip that acts on click.
+ * Picking it fills the input so the user can edit before sending; it never sends or runs a command,
+ * which is why it's a chip and not a Button. AgentInput renders these from its `suggestions` prop.
+ *
+ * Features:
+ * - 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
+ */
+var SuggestionChip = function SuggestionChip(_a) {
+  var children = _a.children,
+    onClick = _a.onClick,
+    _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    dataTestId = _a["data-testid"];
+  return jsx(StyledSuggestionChip, {
+    type: "button",
+    onClick: onClick,
+    disabled: disabled,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+SuggestionChip.displayName = 'SuggestionChip';
+var templateObject_1;
+
+export { SuggestionChip };
+//# sourceMappingURL=SuggestionChip.mjs.map

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

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

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

@@ -2,3 +2,4 @@ export * from './Chip.mjs';
 export * from './InputChip.mjs';
 export * from './FilterChip.mjs';
 export * from './BooleanChip.mjs';
+export * from './SuggestionChip.mjs';

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

@@ -2,3 +2,4 @@ export * from './Chip';
 export * from './InputChip';
 export * from './FilterChip';
 export * from './BooleanChip';
+export * from './SuggestionChip';