@common-origin/design-system 2.19.0 → 2.20.0

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

@@ -0,0 +1,208 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs, Fragment } 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';
+import { forcedColorsEdge } from '../../../lib/styleUtils.mjs';
+
+var button = tokens.component.button,
+  semantic = tokens.semantic;
+// Height comes from size.control as a minimum and the content is centred, so there is no
+// vertical padding (decision 0034). Horizontal padding comes from the semantic spacing scale:
+// no component spacing tokens (decision 0022)
+var inset = semantic.space.inset;
+var control = semantic.size.control;
+// Base styles shared between button and link
+var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokens.semantic.space[100], ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic.motion.transition.feedback, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button.focus.outline, ";\n    outline-offset: ").concat(semantic.border.focusOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ").concat(forcedColorsEdge, "\n");
+// Dynamic variant styles using component tokens
+var getVariantStyles = function getVariantStyles(_a) {
+  var $variant = _a.$variant;
+  var variantConfig = {
+    primary: {
+      bg: button.primary.backgroundColor,
+      text: button.primary.textColor,
+      hoverBg: button.hover.backgroundColor,
+      activeBg: button.active.backgroundColor,
+      disabledBg: button.disabled.backgroundColor,
+      disabledText: button.disabled.textColor
+    },
+    secondary: {
+      bg: button.variants.secondary.backgroundColor,
+      text: button.variants.secondary.textColor,
+      hoverBg: button.variants.secondary.hover.backgroundColor,
+      activeBg: button.variants.secondary.active.backgroundColor,
+      disabledBg: button.variants.secondary.disabled.backgroundColor,
+      disabledText: button.variants.secondary.disabled.textColor
+    },
+    naked: {
+      bg: button.variants.naked.backgroundColor,
+      text: button.variants.naked.textColor,
+      hoverBg: button.variants.naked.hover.backgroundColor,
+      activeBg: button.variants.naked.active.backgroundColor,
+      disabledBg: button.variants.naked.disabled.backgroundColor,
+      disabledText: button.variants.naked.disabled.textColor
+    },
+    accent: {
+      bg: button.variants.accent.backgroundColor,
+      text: button.variants.accent.textColor,
+      hoverBg: button.variants.accent.hover.backgroundColor,
+      activeBg: button.variants.accent.active.backgroundColor,
+      disabledBg: button.variants.accent.disabled.backgroundColor,
+      disabledText: button.variants.accent.disabled.textColor
+    },
+    // Deprecated alias for accent; removed in 3.0
+    emphasis: {
+      bg: button.variants.emphasis.backgroundColor,
+      text: button.variants.emphasis.textColor,
+      hoverBg: button.variants.emphasis.hover.backgroundColor,
+      activeBg: button.variants.emphasis.active.backgroundColor,
+      disabledBg: button.variants.emphasis.disabled.backgroundColor,
+      disabledText: button.variants.emphasis.disabled.textColor
+    },
+    danger: {
+      bg: button.variants.danger.backgroundColor,
+      text: button.variants.danger.textColor,
+      hoverBg: button.variants.danger.hover.backgroundColor,
+      activeBg: button.variants.danger.active.backgroundColor,
+      disabledBg: button.variants.danger.disabled.backgroundColor,
+      disabledText: button.variants.danger.disabled.textColor
+    }
+  };
+  var config = variantConfig[$variant];
+  return "\n    background-color: ".concat(config.bg, ";\n    color: ").concat(config.text, ";\n    \n    &:hover:not(:disabled) {\n      background-color: ").concat(config.hoverBg, ";\n    }\n\n    &:active:not(:disabled) {\n      background-color: ").concat(config.activeBg, ";\n    }\n\n    &:disabled {\n      background-color: ").concat(config.disabledBg, ";\n      color: ").concat(config.disabledText, ";\n    }\n  ");
+};
+// Dynamic size styles: font from component tokens, height from size.control (decision 0034)
+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      ");
+    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':
+    default:
+      return "\n        font: ".concat(button.sizes.large.font, ";\n        min-height: ").concat(control.lg, ";\n        padding: 0 ").concat(inset.lg, ";\n      ");
+  }
+};
+var StyledButton = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Button__StyledButton",
+  componentId: "sc-1eiuum9-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
+var StyledLink = /*#__PURE__*/styled.a.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Button__StyledLink",
+  componentId: "sc-1eiuum9-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
+// Helper function to get icon size based on button size
+])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
+// Helper function to get icon size based on button size
+var getIconSize = function getIconSize(buttonSize) {
+  switch (buttonSize) {
+    case 'small':
+      return 'xs';
+    case 'medium':
+      return 'sm';
+    case 'large':
+      return 'md';
+    default:
+      return 'md';
+  }
+};
+// Helper function to render button content with optional icon
+var renderButtonContent = function renderButtonContent(children, iconName, size) {
+  if (!iconName) return children;
+  var iconSize = getIconSize(size);
+  return jsxs(Fragment, {
+    children: [jsx(Icon, {
+      name: iconName,
+      size: iconSize,
+      iconColor: "inherit"
+    }), children]
+  });
+};
+var Button = function Button(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    _c = _a.size,
+    size = _c === void 0 ? "large" : _c,
+    url = _a.url,
+    _d = _a.purpose,
+    purpose = _d === void 0 ? 'button' : _d,
+    children = _a.children,
+    target = _a.target,
+    iconName = _a.iconName,
+    LinkComponent = _a.linkComponent,
+    dataTestId = _a["data-testid"],
+    rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", "linkComponent", 'data-testid']);
+  // For links with custom link component (e.g., Next.js Link, React Router Link)
+  if (purpose === 'link' && url && LinkComponent) {
+    // The link component renders the <a>, so anchor attributes (id, aria-*, rel, handlers) go to it
+    var linkProps = rest;
+    return jsx(LinkComponent, __assign({}, linkProps, {
+      href: url,
+      target: target,
+      children: jsx(StyledLink, {
+        as: "span",
+        "$variant": variant,
+        "$size": size,
+        "data-testid": dataTestId,
+        children: renderButtonContent(children, iconName, size)
+      })
+    }));
+  }
+  // For standard links (external or without custom component)
+  if (purpose === 'link' && url) {
+    var linkProps = rest;
+    return jsx(StyledLink, __assign({}, linkProps, {
+      href: url,
+      target: target,
+      "$variant": variant,
+      "$size": size,
+      "data-testid": dataTestId,
+      children: renderButtonContent(children, iconName, size)
+    }));
+  }
+  // For button with URL (legacy support)
+  if (purpose === 'button' && url) {
+    var buttonProps_1 = rest;
+    var handleClick = function handleClick(e) {
+      // Call any existing onClick handler first
+      if (buttonProps_1.onClick) {
+        buttonProps_1.onClick(e);
+      }
+      // Handle navigation
+      if (url.startsWith('http') || target) {
+        window.open(url, target || '_self');
+      } else {
+        window.location.href = url;
+      }
+    };
+    return jsx(StyledButton, __assign({}, buttonProps_1, {
+      "$variant": variant,
+      "$size": size,
+      "data-testid": dataTestId,
+      onClick: handleClick,
+      children: renderButtonContent(children, iconName, size)
+    }));
+  }
+  // Regular button
+  var buttonProps = rest;
+  return jsx(StyledButton, __assign({
+    "$variant": variant,
+    "$size": size,
+    "data-testid": dataTestId
+  }, buttonProps, {
+    children: renderButtonContent(children, iconName, size)
+  }));
+};
+var templateObject_1, templateObject_2;
+
+export { Button };
+//# sourceMappingURL=Button.mjs.map

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

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

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

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

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { type CategoryLabelProps } from '../CategoryLabel/CategoryLabel.mjs';
+export type { CategoryColor, CategoryVariant } from '../CategoryLabel/CategoryLabel.mjs';
+/**
+ * Size options for CategoryBadge
+ * @deprecated Use `CategoryLabelSize`: CategoryBadge `small` is CategoryLabel `medium`, and
+ * `medium` is `large` (decision 0018).
+ */
+export type CategorySize = 'small' | 'medium';
+/**
+ * Props for the CategoryBadge component
+ * @deprecated Use `CategoryLabelProps`. CategoryBadge is renamed CategoryLabel and is removed in
+ * 3.0 (decision 0018).
+ */
+export interface CategoryBadgeProps extends Omit<CategoryLabelProps, 'size'> {
+    /**
+     * Size of the badge
+     * @default 'medium'
+     */
+    size?: CategorySize;
+}
+/**
+ * CategoryBadge displays a category label.
+ *
+ * @deprecated Renamed to `CategoryLabel` (same `color` and `variant`). Map `size="small"` to
+ * `"medium"`, and `size="medium"` (or no size) to `"large"`, CategoryLabel's default.
+ * CategoryBadge is removed in 3.0 (decision 0018).
+ */
+export declare const CategoryBadge: React.FC<CategoryBadgeProps>;

package/dist/components/atoms/CategoryBadge/CategoryBadge.mjs

@@ -0,0 +1,29 @@
+'use client';
+import { __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { CategoryLabel } from '../CategoryLabel/CategoryLabel.mjs';
+
+// CategoryBadge sizes on the decision 0018 scale
+var toLabelSize = {
+  small: 'medium',
+  medium: 'large'
+};
+/**
+ * CategoryBadge displays a category label.
+ *
+ * @deprecated Renamed to `CategoryLabel` (same `color` and `variant`). Map `size="small"` to
+ * `"medium"`, and `size="medium"` (or no size) to `"large"`, CategoryLabel's default.
+ * CategoryBadge is removed in 3.0 (decision 0018).
+ */
+var CategoryBadge = function CategoryBadge(_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'medium' : _b,
+    props = __rest(_a, ["size"]);
+  return jsx(CategoryLabel, __assign({}, props, {
+    size: toLabelSize[size]
+  }));
+};
+CategoryBadge.displayName = 'CategoryBadge';
+
+export { CategoryBadge };
+//# sourceMappingURL=CategoryBadge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryBadge.mjs","sources":["../../../../src/components/atoms/CategoryBadge/CategoryBadge.tsx"],"sourcesContent":["import React from 'react'\nimport { CategoryLabel, type CategoryLabelProps } from '../CategoryLabel/CategoryLabel'\n\nexport type { CategoryColor, CategoryVariant } from '../CategoryLabel/CategoryLabel'\n\n/**\n * Size options for CategoryBadge\n * @deprecated Use `CategoryLabelSize`: CategoryBadge `small` is CategoryLabel `medium`, and\n * `medium` is `large` (decision 0018).\n */\nexport type CategorySize = 'small' | 'medium'\n\n/**\n * Props for the CategoryBadge component\n * @deprecated Use `CategoryLabelProps`. CategoryBadge is renamed CategoryLabel and is removed in\n * 3.0 (decision 0018).\n */\nexport interface CategoryBadgeProps extends Omit<CategoryLabelProps, 'size'> {\n  /**\n   * Size of the badge\n   * @default 'medium'\n   */\n  size?: CategorySize\n}\n\n// CategoryBadge sizes on the decision 0018 scale\nconst toLabelSize = { small: 'medium', medium: 'large' } as const\n\n/**\n * CategoryBadge displays a category label.\n *\n * @deprecated Renamed to `CategoryLabel` (same `color` and `variant`). Map `size=\"small\"` to\n * `\"medium\"`, and `size=\"medium\"` (or no size) to `\"large\"`, CategoryLabel's default.\n * CategoryBadge is removed in 3.0 (decision 0018).\n */\nexport const CategoryBadge: React.FC<CategoryBadgeProps> = ({ size = 'medium', ...props }) => (\n  <CategoryLabel {...props} size={toLabelSize[size]} />\n)\n\nCategoryBadge.displayName = 'CategoryBadge'\n"],"names":["toLabelSize","small","medium","CategoryBadge","_a","_b","size","props","__rest","_jsx","CategoryLabel","__assign","displayName"],"mappings":";;;;;AAyBA;AACA,IAAMA,WAAW,GAAG;AAAEC,EAAAA,KAAK,EAAE,QAAQ;AAAEC,EAAAA,MAAM,EAAE,OAAA;AAAO,CAAW,CAAA;AAEjE;;;;;;AAMG;IACUC,aAAa,GAAiC,SAA9CA,aAAaA,CAAkCC,EAA6B,EAAA;AAA3B,EAAA,IAAAC,EAAA,GAAAD,EAAA,CAAAE,IAAe;IAAfA,IAAI,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,QAAQ,KAAA;IAAKE,KAAK,GAA3BC,MAAA,CAAAJ,EAAA,EAAA,CAAA,MAAA,CAA6B,CAAF,CAAA;EAAO,OAC5FK,GAAA,CAACC,aAAa,EAAAC,QAAA,CAAA,EAAA,EAAKJ,KAAK,EAAE;IAAAD,IAAI,EAAEN,WAAW,CAACM,IAAI,CAAA;AAAC,GAAA,CAAA,CAAI,CAAA;EACtD;AAEDH,aAAa,CAACS,WAAW,GAAG,eAAe;;;;"}

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

@@ -0,0 +1,2 @@
+export { CategoryBadge } from './CategoryBadge.mjs';
+export type { CategoryBadgeProps, CategorySize } from './CategoryBadge.mjs';

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

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+import type { IconName } from '../../../types/icons.mjs';
+/**
+ * Category color options for CategoryLabel
+ */
+export type CategoryColor = 'blue' | 'purple' | 'pink' | 'yellow' | 'green' | 'red' | 'orange' | 'gray';
+/**
+ * Visual variant options for CategoryLabel
+ */
+export type CategoryVariant = 'filled' | 'outlined' | 'minimal';
+/**
+ * Size options for CategoryLabel: medium (24px) or large (32px), on the decision 0018 scale
+ */
+export type CategoryLabelSize = 'medium' | 'large';
+/**
+ * Props for the CategoryLabel component
+ */
+export interface CategoryLabelProps {
+    /**
+     * The category text to display
+     */
+    children: ReactNode;
+    /**
+     * Color scheme for the label
+     * @default 'blue'
+     */
+    color?: CategoryColor;
+    /**
+     * Visual variant of the label
+     * @default 'filled'
+     */
+    variant?: CategoryVariant;
+    /**
+     * Size: medium (24px) or large (32px)
+     * @default 'large'
+     */
+    size?: CategoryLabelSize;
+    /**
+     * Optional icon name to display
+     */
+    icon?: IconName;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Accessible label, announced instead of the visible text (for example "Category: Food & Dining").
+     * Rendered as visually hidden text, because a plain label has no role that can be named (#78).
+     */
+    'aria-label'?: string;
+}
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <CategoryLabel color="orange" icon="creditCard">
+ *   Shopping
+ * </CategoryLabel>
+ *
+ * <CategoryLabel color="blue" variant="outlined" size="medium">
+ *   Travel
+ * </CategoryLabel>
+ * ```
+ */
+export declare const CategoryLabel: React.FC<CategoryLabelProps>;

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

@@ -0,0 +1,151 @@
+'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 { Icon } from '../Icon/Icon.mjs';
+import { visuallyHidden } from '../../../lib/styleUtils.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+var semantic = tokens.semantic;
+var color = semantic.color;
+var label = tokens.component.badge.label;
+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 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'],
+  gray: category['gray-text']
+};
+var StyledCategoryLabel = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "CategoryLabel__StyledCategoryLabel",
+  componentId: "sc-1jx7bjo-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"], ["\n  box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  border-style: solid;\n  border-width: ", ";\n  \n  /* Size styles */\n  height: ", ";\n  padding: ", ";\n  font: ", ";\n  /* After the font shorthand, which would otherwise reset it */\n  font-weight: ", ";\n  gap: ", ";\n  \n  /* Variant + Color styles */\n  background-color: ", ";\n  \n  /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n  color: ", ";\n  \n  border-color: ", ";\n"
+// The visible content, hidden from assistive technology when an aria-label replaces it.
+// display: contents keeps the root's flex layout and gap.
+])), radius.full, semantic.border.width.thin, function (_a) {
+  var $size = _a.$size;
+  return labelHeight[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return $size === 'medium' ? "".concat(space[100], " ").concat(space[200]) : "".concat(space[200], " ").concat(space[300]);
+}, function (_a) {
+  var $size = _a.$size;
+  return $size === 'medium' ? label.typography.small : label.typography.medium;
+}, label.fontWeight, space[100], function (_a) {
+  var $color = _a.$color,
+    $variant = _a.$variant;
+  if ($variant === 'filled') {
+    return category["".concat($color, "-strong")];
+  }
+  if ($variant === 'outlined') {
+    return 'transparent';
+  }
+  // minimal
+  return category["".concat($color, "-muted")];
+}, function (_a) {
+  var $color = _a.$color,
+    $variant = _a.$variant;
+  if ($variant === 'filled') {
+    return color.text.inverse;
+  }
+  return categoryText[$color];
+}, function (_a) {
+  var $color = _a.$color,
+    $variant = _a.$variant;
+  if ($variant === 'outlined') {
+    return category[$color];
+  }
+  return 'transparent';
+});
+// The visible content, hidden from assistive technology when an aria-label replaces it.
+// display: contents keeps the root's flex layout and gap.
+var VisibleContent = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CategoryLabel__VisibleContent",
+  componentId: "sc-1jx7bjo-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"])));
+var HiddenLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CategoryLabel__HiddenLabel",
+  componentId: "sc-1jx7bjo-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <CategoryLabel color="orange" icon="creditCard">
+ *   Shopping
+ * </CategoryLabel>
+ *
+ * <CategoryLabel color="blue" variant="outlined" size="medium">
+ *   Travel
+ * </CategoryLabel>
+ * ```
+ */])), visuallyHidden);
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <CategoryLabel color="orange" icon="creditCard">
+ *   Shopping
+ * </CategoryLabel>
+ *
+ * <CategoryLabel color="blue" variant="outlined" size="medium">
+ *   Travel
+ * </CategoryLabel>
+ * ```
+ */
+var CategoryLabel = function CategoryLabel(_a) {
+  var children = _a.children,
+    _b = _a.color,
+    color = _b === void 0 ? 'blue' : _b,
+    _c = _a.variant,
+    variant = _c === void 0 ? 'filled' : _c,
+    _d = _a.size,
+    size = _d === void 0 ? 'large' : _d,
+    icon = _a.icon,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"];
+  var iconSize = size === 'medium' ? 'xs' : 'sm';
+  // 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,
+    "$variant": variant,
+    "$size": size,
+    "data-testid": dataTestId,
+    children: [jsxs(VisibleContent, {
+      "aria-hidden": accessibleLabel ? 'true' : undefined,
+      children: [icon && jsx(Icon, {
+        name: icon,
+        size: iconSize,
+        iconColor: variant === 'filled' ? 'inverse' : 'inherit'
+      }), children]
+    }), accessibleLabel && jsx(HiddenLabel, {
+      children: accessibleLabel
+    })]
+  });
+};
+CategoryLabel.displayName = 'CategoryLabel';
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { CategoryLabel };
+//# sourceMappingURL=CategoryLabel.mjs.map

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

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

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

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

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BaseChipProps } from './shared/types.mjs';
+/** @deprecated Becomes `FilterChipProps` in 3.0 (decision 0016). */
+export interface BooleanChipProps extends BaseChipProps {
+    /** Whether the chip is in selected state */
+    selected: boolean;
+    /** Callback function when the chip is clicked/toggled */
+    onClick: () => void;
+}
+/**
+ * BooleanChip - Toggleable chip for quick filter controls
+ *
+ * Use this component for multi-select filter controls where users can
+ * see which options are active. Common in table filtering patterns where
+ * users toggle filters on/off.
+ *
+ * Features:
+ * - Shows checkmark icon when selected
+ * - Entire chip is clickable to toggle
+ * - Keyboard activation with Space or Enter
+ * - Uses checkbox role with aria-checked
+ * - Light-blue fill and blue text when selected and enabled; disabled colours when disabled
+ *
+ * @deprecated Becomes `FilterChip` in 3.0, with the same props. Keep using `BooleanChip`
+ * until you upgrade; in 3.0, replace `FilterChip` with `InputChip` first, then
+ * `BooleanChip` with `FilterChip` (decision 0016).
+ */
+export declare const BooleanChip: React.FC<BooleanChipProps>;

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

@@ -0,0 +1,76 @@
+'use client';
+import { __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icon } from '../Icon/Icon.mjs';
+import { StyledChip, IconContainer } from './shared/ChipBase.mjs';
+
+/**
+ * BooleanChip - Toggleable chip for quick filter controls
+ *
+ * Use this component for multi-select filter controls where users can
+ * see which options are active. Common in table filtering patterns where
+ * users toggle filters on/off.
+ *
+ * Features:
+ * - Shows checkmark icon when selected
+ * - Entire chip is clickable to toggle
+ * - Keyboard activation with Space or Enter
+ * - Uses checkbox role with aria-checked
+ * - Light-blue fill and blue text when selected and enabled; disabled colours when disabled
+ *
+ * @deprecated Becomes `FilterChip` in 3.0, with the same props. Keep using `BooleanChip`
+ * until you upgrade; in 3.0, replace `FilterChip` with `InputChip` first, then
+ * `BooleanChip` with `FilterChip` (decision 0016).
+ */
+var BooleanChip = function BooleanChip(_a) {
+  var children = _a.children,
+    selected = _a.selected,
+    onClick = _a.onClick;
+    // Deprecated and ignored: chips have one size (decision 0035)
+    _a.size;
+    var _b = _a.disabled,
+    disabled = _b === void 0 ? false : _b,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"],
+    props = __rest(_a, ["children", "selected", "onClick", "size", "disabled", 'data-testid', 'aria-label', 'aria-describedby']);
+  var handleClick = function handleClick() {
+    if (!disabled) {
+      onClick();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    // Handle activation with Space or Enter
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick();
+    }
+  };
+  return jsxs(StyledChip, __assign({
+    "$variant": "subtle",
+    "$disabled": disabled || undefined,
+    "$clickable": !disabled,
+    "$selected": selected,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: disabled ? undefined : 0,
+    role: "checkbox",
+    "aria-checked": selected ? 'true' : 'false',
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-disabled": disabled ? 'true' : undefined,
+    "data-testid": dataTestId
+  }, props, {
+    children: [selected && jsx(IconContainer, {
+      "aria-hidden": "true",
+      children: jsx(Icon, {
+        name: "check",
+        size: "sm",
+        iconColor: "inherit"
+      })
+    }), children]
+  }));
+};
+
+export { BooleanChip };
+//# sourceMappingURL=BooleanChip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanChip.mjs","sources":["../../../../src/components/atoms/Chip/BooleanChip.tsx"],"sourcesContent":["import React from 'react'\nimport { Icon } from '../Icon'\nimport { BaseChipProps } from './shared/types'\nimport { StyledChip, IconContainer } from './shared/ChipBase'\n\n/** @deprecated Becomes `FilterChipProps` in 3.0 (decision 0016). */\nexport interface BooleanChipProps extends BaseChipProps {\n  /** Whether the chip is in selected state */\n  selected: boolean\n  /** Callback function when the chip is clicked/toggled */\n  onClick: () => void\n}\n\n/**\n * BooleanChip - Toggleable chip for quick filter controls\n * \n * Use this component for multi-select filter controls where users can\n * see which options are active. Common in table filtering patterns where\n * users toggle filters on/off.\n * \n * Features:\n * - Shows checkmark icon when selected\n * - Entire chip is clickable to toggle\n * - Keyboard activation with Space or Enter\n * - Uses checkbox role with aria-checked\n * - Light-blue fill and blue text when selected and enabled; disabled colours when disabled\n *\n * @deprecated Becomes `FilterChip` in 3.0, with the same props. Keep using `BooleanChip`\n * until you upgrade; in 3.0, replace `FilterChip` with `InputChip` first, then\n * `BooleanChip` with `FilterChip` (decision 0016).\n */\nexport const BooleanChip: React.FC<BooleanChipProps> = ({\n  children,\n  selected,\n  onClick,\n  // Deprecated and ignored: chips have one size (decision 0035)\n  size: _size,\n  disabled = false,\n  'data-testid': dataTestId,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}) => {\n  const handleClick = () => {\n    if (!disabled) {\n      onClick()\n    }\n  }\n  \n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    // Handle activation with Space or Enter\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      handleClick()\n    }\n  }\n  \n  return (\n    <StyledChip\n      $variant=\"subtle\"\n      $disabled={disabled || undefined}\n      $clickable={!disabled}\n      $selected={selected}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={disabled ? undefined : 0}\n      role=\"checkbox\"\n      aria-checked={selected ? 'true' : 'false'}\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescribedBy}\n      aria-disabled={disabled ? 'true' : undefined}\n      data-testid={dataTestId}\n      {...props}\n    >\n      {/* Show selected indicator when selected */}\n      {selected && (\n        <IconContainer aria-hidden=\"true\">\n          <Icon name=\"check\" size=\"sm\" iconColor=\"inherit\" />\n        </IconContainer>\n      )}\n      \n      {children}\n    </StyledChip>\n  )\n}\n"],"names":["BooleanChip","_a","children","selected","onClick","size","_b","disabled","dataTestId","ariaLabel","ariaDescribedBy","props","__rest","handleClick","handleKeyDown","event","key","preventDefault","_jsxs","StyledChip","__assign","undefined","onKeyDown","tabIndex","role","_jsx","IconContainer","Icon","name","iconColor"],"mappings":";;;;;;AAaA;;;;;;;;;;;;;;;;;AAiBG;IACUA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,EAWvD,EAAA;AAVC,EAAA,IAAAC,QAAQ,GAAAD,EAAA,CAAAC,QAAA,CAAA;IACRC,QAAQ,GAAAF,EAAA,CAAAE,QAAA,CAAA;IACRC,OAAO,GAAAH,EAAA,CAAAG,OAAA,CAAA;AACP,IAAA;IACWH,EAAA,CAAAI,IAAA,CAAA;QACXC,EAAgB,GAAAL,EAAA,CAAAM,QAAA,CAAA;IAAhBA,QAAQ,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,KAAA,CAAA;AACDE,IAAAA,UAAU,oBAAA,CAAA;AACXC,IAAAA,SAAS,mBAAA,CAAA;AACHC,IAAAA,eAAe,yBAAA,CAAA;IAChCC,KAAK,GAV8CC,MAAA,CAAAX,EAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAAA,SAAA,EAAA,MAAA,EAAA,UAAA,EAAA,aAAA,EAAA,YAAA,EAAA,kBAAA,CAWvD,EADS;AAER,EAAA,IAAMY,WAAW,GAAG,SAAdA,WAAWA,GAAG;IAClB,IAAI,CAACN,QAAQ,EAAE;AACbH,MAAAA,OAAO,EAAE,CAAA;AACX,KAAA;GACD,CAAA;AAED,EAAA,IAAMU,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAA0B,EAAA;AAC/C;IACA,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC9CD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtBJ,MAAAA,WAAW,EAAE,CAAA;AACf,KAAA;GACD,CAAA;AAED,EAAA,OACEK,KAACC,UAAU,EAAAC,QAAA,CAAA;AAAA,IAAA,UAAA,EACA,QAAQ;IACN,WAAA,EAAAb,QAAQ,IAAIc,SAAS;IAAA,YAAA,EACpB,CAACd,QAAQ;AAAA,IAAA,WAAA,EACVJ,QAAQ;AACnBC,IAAAA,OAAO,EAAES,WAAW;AACpBS,IAAAA,SAAS,EAAER,aAAa;AACxBS,IAAAA,QAAQ,EAAEhB,QAAQ,GAAGc,SAAS,GAAG,CAAC;AAClCG,IAAAA,IAAI,EAAC,UAAU;oBACDrB,QAAQ,GAAG,MAAM,GAAG,OAAO;kBAC7BM,SAAS;AAAA,IAAA,kBAAA,EACHC,eAAe;AAClB,IAAA,eAAA,EAAAH,QAAQ,GAAG,MAAM,GAAGc,SAAS;AAAA,IAAA,aAAA,EAC/Bb,UAAAA;GACT,EAAAG,KAAK;eAGRR,QAAQ,IACPsB,GAAA,CAACC,aAAa,EAAA;AAAA,MAAA,aAAA,EAAa,MAAM;AAC/BxB,MAAAA,QAAA,EAAAuB,GAAA,CAACE,IAAI,EAAC;AAAAC,QAAAA,IAAI,EAAC,OAAO;AAACvB,QAAAA,IAAI,EAAC,IAAI;AAACwB,QAAAA,SAAS,EAAC,SAAA;OAAY,CAAA;KAAA,CAEtD,EAEA3B,QAAQ,CAAA;AACE,GAAA,CAAA,CAAA,CAAA;AAEjB;;;;"}