@common-origin/design-system 2.19.0 → 2.20.0

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { BaseChipProps, ChipVariant, LegacyVariant } from './shared/types.mjs';
+export interface ChipProps extends BaseChipProps {
+    /**
+     * Visual style. Only `default` stays in 3.0. `emphasis`, `subtle`, `interactive`, `light`
+     * and `dark` are deprecated and will be removed (decision 0016).
+     * @default 'default'
+     */
+    variant?: ChipVariant | LegacyVariant;
+    /**
+     * Click handler.
+     * @deprecated Removed in 3.0: the static Chip is not interactive. For a clickable action use a
+     * Button; for a toggle use `BooleanChip` (`FilterChip` in 3.0).
+     */
+    onClick?: () => void;
+    /** Custom ARIA role override */
+    role?: string;
+    /** Legacy title prop for backward compatibility */
+    title?: string;
+}
+/**
+ * Chip - a static, non-interactive label for tags, categories and metadata.
+ *
+ * Chips are classified by job (decision 0016):
+ * - Chip: a static label (`default` variant only)
+ * - InputChip: a removable value, such as an applied filter (formerly `FilterChip`)
+ * - BooleanChip: toggles a filter on and off (becomes `FilterChip` in 3.0)
+ *
+ * The `emphasis`, `subtle`, `interactive`, `light` and `dark` variants and `onClick` are
+ * deprecated and will be removed in 3.0.
+ */
+export declare const Chip: React.FC<ChipProps>;
+export interface LegacyChipProps {
+    title: string;
+    variant?: LegacyVariant;
+}
+export declare const LegacyChip: React.FC<LegacyChipProps>;

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

@@ -0,0 +1,76 @@
+'use client';
+import { __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { StyledChip } from './shared/ChipBase.mjs';
+
+/**
+ * Chip - a static, non-interactive label for tags, categories and metadata.
+ *
+ * Chips are classified by job (decision 0016):
+ * - Chip: a static label (`default` variant only)
+ * - InputChip: a removable value, such as an applied filter (formerly `FilterChip`)
+ * - BooleanChip: toggles a filter on and off (becomes `FilterChip` in 3.0)
+ *
+ * The `emphasis`, `subtle`, `interactive`, `light` and `dark` variants and `onClick` are
+ * deprecated and will be removed in 3.0.
+ */
+var Chip = function Chip(_a) {
+  var children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'default' : _b;
+    // Deprecated and ignored: chips have one size (decision 0035)
+    _a.size;
+    var onClick = _a.onClick,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"],
+    role = _a.role,
+    title = _a.title,
+    props = __rest(_a, ["children", "variant", "size", "onClick", "disabled", 'data-testid', 'aria-label', 'aria-describedby', "role", "title"]);
+  var isClickable = Boolean(onClick && !disabled);
+  // Map legacy variants to new variants
+  var normalizedVariant = variant === 'light' ? 'default' : variant === 'dark' ? 'emphasis' : variant;
+  // Support legacy title prop
+  var content = children !== undefined ? children : title;
+  var handleClick = function handleClick() {
+    if (onClick && !disabled) {
+      onClick();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      handleClick();
+    }
+  };
+  return jsx(StyledChip, __assign({
+    "$variant": normalizedVariant,
+    "$disabled": disabled || undefined,
+    "$clickable": isClickable || undefined,
+    onClick: isClickable ? handleClick : undefined,
+    onKeyDown: handleKeyDown,
+    tabIndex: isClickable ? 0 : undefined,
+    role: role || (isClickable ? 'button' : undefined),
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-disabled": disabled ? 'true' : undefined,
+    "data-testid": dataTestId
+  }, props, {
+    children: content
+  }));
+};
+var LegacyChip = function LegacyChip(_a) {
+  var title = _a.title,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'light' : _b;
+  var newVariant = variant === 'dark' ? 'emphasis' : 'default';
+  return jsx(Chip, {
+    variant: newVariant,
+    children: title
+  });
+};
+
+export { Chip, LegacyChip };
+//# sourceMappingURL=Chip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.mjs","sources":["../../../../src/components/atoms/Chip/Chip.tsx"],"sourcesContent":["import React from 'react'\nimport { BaseChipProps, ChipVariant, LegacyVariant } from './shared/types'\nimport { StyledChip } from './shared/ChipBase'\n\nexport interface ChipProps extends BaseChipProps {\n  /**\n   * Visual style. Only `default` stays in 3.0. `emphasis`, `subtle`, `interactive`, `light`\n   * and `dark` are deprecated and will be removed (decision 0016).\n   * @default 'default'\n   */\n  variant?: ChipVariant | LegacyVariant\n  /**\n   * Click handler.\n   * @deprecated Removed in 3.0: the static Chip is not interactive. For a clickable action use a\n   * Button; for a toggle use `BooleanChip` (`FilterChip` in 3.0).\n   */\n  onClick?: () => void\n  /** Custom ARIA role override */\n  role?: string\n  /** Legacy title prop for backward compatibility */\n  title?: string\n}\n\n/**\n * Chip - a static, non-interactive label for tags, categories and metadata.\n *\n * Chips are classified by job (decision 0016):\n * - Chip: a static label (`default` variant only)\n * - InputChip: a removable value, such as an applied filter (formerly `FilterChip`)\n * - BooleanChip: toggles a filter on and off (becomes `FilterChip` in 3.0)\n *\n * The `emphasis`, `subtle`, `interactive`, `light` and `dark` variants and `onClick` are\n * deprecated and will be removed in 3.0.\n */\nexport const Chip: React.FC<ChipProps> = ({\n  children,\n  variant = 'default',\n  // Deprecated and ignored: chips have one size (decision 0035)\n  size: _size,\n  onClick,\n  disabled = false,\n  'data-testid': dataTestId,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  role,\n  title,\n  ...props\n}) => {\n  const isClickable = Boolean(onClick && !disabled)\n  \n  // Map legacy variants to new variants\n  const normalizedVariant: ChipVariant = \n    variant === 'light' ? 'default' :\n    variant === 'dark' ? 'emphasis' :\n    variant as ChipVariant\n  \n  // Support legacy title prop\n  const content = children !== undefined ? children : title\n  \n  const handleClick = () => {\n    if (onClick && !disabled) {\n      onClick()\n    }\n  }\n  \n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (isClickable && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault()\n      handleClick()\n    }\n  }\n  \n  return (\n    <StyledChip\n      $variant={normalizedVariant}\n      $disabled={disabled || undefined}\n      $clickable={isClickable || undefined}\n      onClick={isClickable ? handleClick : undefined}\n      onKeyDown={handleKeyDown}\n      tabIndex={isClickable ? 0 : undefined}\n      role={role || (isClickable ? 'button' : undefined)}\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescribedBy}\n      aria-disabled={disabled ? 'true' : undefined}\n      data-testid={dataTestId}\n      {...props}\n    >\n      {content}\n    </StyledChip>\n  )\n}\n\n// Legacy component for backward compatibility\nexport interface LegacyChipProps {\n  title: string\n  variant?: LegacyVariant\n}\n\nexport const LegacyChip: React.FC<LegacyChipProps> = ({ title, variant = 'light' }) => {\n  const newVariant = variant === 'dark' ? 'emphasis' : 'default'\n  return <Chip variant={newVariant}>{title}</Chip>\n}\n"],"names":["Chip","_a","children","_b","variant","size","onClick","_c","disabled","dataTestId","ariaLabel","ariaDescribedBy","role","title","props","__rest","isClickable","Boolean","normalizedVariant","content","undefined","handleClick","handleKeyDown","event","key","preventDefault","_jsx","StyledChip","__assign","onKeyDown","tabIndex","LegacyChip","newVariant"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import { type InputChipProps } from './InputChip.mjs';
+/**
+ * @deprecated Renamed to `InputChipProps`. In 3.0 `FilterChipProps` becomes the props of the toggle chip.
+ */
+export type FilterChipProps = InputChipProps;
+/**
+ * FilterChip - a removable chip with an optional selected state.
+ *
+ * @deprecated Renamed to `InputChip`; in 3.0 `FilterChip` becomes the toggle chip (today's
+ * `BooleanChip`). Replace `FilterChip` with `InputChip` first, then `BooleanChip` with
+ * `FilterChip` when you upgrade to 3.0 (decision 0016).
+ */
+export declare const FilterChip: import("react").FC<InputChipProps>;

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

@@ -0,0 +1,14 @@
+'use client';
+import { InputChip } from './InputChip.mjs';
+
+/**
+ * FilterChip - a removable chip with an optional selected state.
+ *
+ * @deprecated Renamed to `InputChip`; in 3.0 `FilterChip` becomes the toggle chip (today's
+ * `BooleanChip`). Replace `FilterChip` with `InputChip` first, then `BooleanChip` with
+ * `FilterChip` when you upgrade to 3.0 (decision 0016).
+ */
+var FilterChip = InputChip;
+
+export { FilterChip };
+//# sourceMappingURL=FilterChip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChip.mjs","sources":["../../../../src/components/atoms/Chip/FilterChip.tsx"],"sourcesContent":["import { InputChip, type InputChipProps } from './InputChip'\n\n/**\n * @deprecated Renamed to `InputChipProps`. In 3.0 `FilterChipProps` becomes the props of the toggle chip.\n */\nexport type FilterChipProps = InputChipProps\n\n/**\n * FilterChip - a removable chip with an optional selected state.\n *\n * @deprecated Renamed to `InputChip`; in 3.0 `FilterChip` becomes the toggle chip (today's\n * `BooleanChip`). Replace `FilterChip` with `InputChip` first, then `BooleanChip` with\n * `FilterChip` when you upgrade to 3.0 (decision 0016).\n */\nexport const FilterChip = InputChip\n"],"names":["FilterChip","InputChip"],"mappings":";;;AAOA;;;;;;AAMG;AACI,IAAMA,UAAU,GAAGC;;;;"}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BaseChipProps } from './shared/types.mjs';
+export interface InputChipProps extends BaseChipProps {
+    /** Whether the filter is in selected/applied state */
+    selected?: boolean;
+    /** Callback function when the chip is dismissed via close button or keyboard */
+    onDismiss?: () => void;
+    /** Custom ARIA role override */
+    role?: string;
+}
+/**
+ * InputChip - A removable value, such as an applied filter, with an optional selected state
+ *
+ * Use this component to show values the user has entered or applied, such as filters.
+ * When selected, displays a checkmark on the light-blue selected treatment (decision 0016).
+ * A selected disabled chip uses the disabled colours and keeps its checkmark.
+ * Optionally dismissible when onDismiss is provided.
+ *
+ * Features:
+ * - Shows checkmark icon when selected
+ * - Light-blue fill and blue text when selected and enabled; disabled colours when disabled
+ * - Optional close (×) button when onDismiss is provided
+ * - Keyboard dismissal with Delete or Backspace keys (when dismissible)
+ * - Non-clickable body (only close button is interactive when present)
+ * - Announces as "status" to screen readers
+ */
+export declare const InputChip: React.FC<InputChipProps>;

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

@@ -0,0 +1,97 @@
+'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, CloseButton } from './shared/ChipBase.mjs';
+
+/**
+ * InputChip - A removable value, such as an applied filter, with an optional selected state
+ *
+ * Use this component to show values the user has entered or applied, such as filters.
+ * When selected, displays a checkmark on the light-blue selected treatment (decision 0016).
+ * A selected disabled chip uses the disabled colours and keeps its checkmark.
+ * Optionally dismissible when onDismiss is provided.
+ *
+ * Features:
+ * - Shows checkmark icon when selected
+ * - Light-blue fill and blue text when selected and enabled; disabled colours when disabled
+ * - Optional close (×) button when onDismiss is provided
+ * - Keyboard dismissal with Delete or Backspace keys (when dismissible)
+ * - Non-clickable body (only close button is interactive when present)
+ * - Announces as "status" to screen readers
+ */
+var InputChip = function InputChip(_a) {
+  var children = _a.children,
+    _b = _a.selected,
+    selected = _b === void 0 ? false : _b,
+    onDismiss = _a.onDismiss;
+    // Deprecated and ignored: chips have one size (decision 0035)
+    _a.size;
+    var _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"],
+    role = _a.role,
+    props = __rest(_a, ["children", "selected", "onDismiss", "size", "disabled", 'data-testid', 'aria-label', 'aria-describedby', "role"]);
+  var isDismissible = Boolean(onDismiss);
+  var handleDismiss = function handleDismiss(event) {
+    event.stopPropagation(); // Prevent event bubbling
+    if (!disabled && onDismiss) {
+      onDismiss();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    // Handle dismiss with Delete or Backspace (only when dismissible)
+    if (!disabled && isDismissible && onDismiss && (event.key === 'Delete' || event.key === 'Backspace')) {
+      event.preventDefault();
+      onDismiss();
+    }
+  };
+  var handleCloseKeyDown = function handleCloseKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (!disabled && onDismiss) onDismiss();
+    }
+  };
+  // Generate accessible label for close button
+  var closeButtonLabel = typeof children === 'string' ? "Remove ".concat(children) : 'Remove filter';
+  return jsxs(StyledChip, __assign({
+    "$variant": "subtle",
+    "$disabled": disabled || undefined,
+    "$clickable": false,
+    "$selected": selected,
+    onKeyDown: handleKeyDown,
+    role: role || 'status',
+    "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, isDismissible && jsx(CloseButton, {
+      type: "button",
+      onClick: handleDismiss,
+      onKeyDown: handleCloseKeyDown,
+      disabled: disabled,
+      "$disabled": disabled,
+      "aria-label": closeButtonLabel,
+      tabIndex: 0,
+      "data-testid": dataTestId ? "".concat(dataTestId, "-close") : undefined,
+      children: jsx(Icon, {
+        name: "close",
+        size: "sm",
+        iconColor: "inherit"
+      })
+    })]
+  }));
+};
+
+export { InputChip };
+//# sourceMappingURL=InputChip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputChip.mjs","sources":["../../../../src/components/atoms/Chip/InputChip.tsx"],"sourcesContent":["import React from 'react'\nimport { Icon } from '../Icon'\nimport { BaseChipProps } from './shared/types'\nimport { StyledChip, IconContainer, CloseButton } from './shared/ChipBase'\n\nexport interface InputChipProps extends BaseChipProps {\n  /** Whether the filter is in selected/applied state */\n  selected?: boolean\n  /** Callback function when the chip is dismissed via close button or keyboard */\n  onDismiss?: () => void\n  /** Custom ARIA role override */\n  role?: string\n}\n\n/**\n * InputChip - A removable value, such as an applied filter, with an optional selected state\n * \n * Use this component to show values the user has entered or applied, such as filters.\n * When selected, displays a checkmark on the light-blue selected treatment (decision 0016).\n * A selected disabled chip uses the disabled colours and keeps its checkmark.\n * Optionally dismissible when onDismiss is provided.\n * \n * Features:\n * - Shows checkmark icon when selected\n * - Light-blue fill and blue text when selected and enabled; disabled colours when disabled\n * - Optional close (×) button when onDismiss is provided\n * - Keyboard dismissal with Delete or Backspace keys (when dismissible)\n * - Non-clickable body (only close button is interactive when present)\n * - Announces as \"status\" to screen readers\n */\nexport const InputChip: React.FC<InputChipProps> = ({\n  children,\n  selected = false,\n  onDismiss,\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  role,\n  ...props\n}) => {\n  const isDismissible = Boolean(onDismiss)\n  \n  const handleDismiss = (event: React.MouseEvent) => {\n    event.stopPropagation() // Prevent event bubbling\n    if (!disabled && onDismiss) {\n      onDismiss()\n    }\n  }\n  \n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    // Handle dismiss with Delete or Backspace (only when dismissible)\n    if (!disabled && isDismissible && onDismiss && (event.key === 'Delete' || event.key === 'Backspace')) {\n      event.preventDefault()\n      onDismiss()\n    }\n  }\n  \n  const handleCloseKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      if (!disabled && onDismiss) onDismiss()\n    }\n  }\n  \n  // Generate accessible label for close button\n  const closeButtonLabel = typeof children === 'string' ? `Remove ${children}` : 'Remove filter'\n  \n  return (\n    <StyledChip\n      $variant=\"subtle\"\n      $disabled={disabled || undefined}\n      $clickable={false}\n      $selected={selected}\n      onKeyDown={handleKeyDown}\n      role={role || 'status'}\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      \n      {/* Show close button only when dismissible */}\n      {isDismissible && (\n        <CloseButton\n          type=\"button\"\n          onClick={handleDismiss}\n          onKeyDown={handleCloseKeyDown}\n          disabled={disabled}\n          $disabled={disabled}\n          aria-label={closeButtonLabel}\n          tabIndex={0}\n          data-testid={dataTestId ? `${dataTestId}-close` : undefined}\n        >\n          <Icon name=\"close\" size=\"sm\" iconColor=\"inherit\" />\n        </CloseButton>\n      )}\n    </StyledChip>\n  )\n}\n"],"names":["InputChip","_a","children","_b","selected","onDismiss","size","_c","disabled","dataTestId","ariaLabel","ariaDescribedBy","role","props","__rest","isDismissible","Boolean","handleDismiss","event","stopPropagation","handleKeyDown","key","preventDefault","handleCloseKeyDown","closeButtonLabel","concat","_jsxs","StyledChip","__assign","undefined","onKeyDown","_jsx","IconContainer","Icon","name","iconColor","CloseButton","type","onClick","tabIndex"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+export * from './Chip.mjs';
+export * from './InputChip.mjs';
+export * from './FilterChip.mjs';
+export * from './BooleanChip.mjs';

package/dist/components/atoms/Chip/shared/ChipBase.d.mts

@@ -0,0 +1,12 @@
+import { InternalStyledProps } from './types.mjs';
+export declare const StyledChip: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types.js").CSSPropertiesWithVars | undefined;
+}, InternalStyledProps>> & string;
+export declare const IconContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types.js").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const CloseButton: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Merged<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types.js").CSSPropertiesWithVars | undefined;
+}, {
+    $disabled?: boolean;
+}>> & string;

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

@@ -0,0 +1,45 @@
+'use client';
+import { __makeTemplateObject } from '../../../../vendor/tslib/tslib.es6.mjs';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../../lib/cssTokens.mjs';
+import { getVariantStyles, sizeStyles } from './utils.mjs';
+import { forcedColorsEdge, forcedColors } from '../../../../lib/styleUtils.mjs';
+
+var chip = tokens.component.chip,
+  semantic = tokens.semantic;
+// Base styled component using direct prop interpolation like Button
+var StyledChip = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "ChipBase__StyledChip",
+  componentId: "sc-moa6zc-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\n  cursor: ", ";\n  \n  /* Forced colours: an edge, and GrayText when disabled, since a span gets no system disabled\n     colour (decision 0038). Before the variant styles, so a selected chip's Highlight border wins. */\n  ", "\n  ", "\n\n  ", "\n  ", "\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n"
+// Icon container for selected indicator or leading icons
+])), chip["default"].borderRadius, semantic.motion.transition.feedback, function (props) {
+  return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
+}, forcedColorsEdge, function (props) {
+  return props.$disabled ? "".concat(forcedColors, " { color: GrayText; }") : '';
+}, getVariantStyles, sizeStyles, chip.focus.outline, semantic.border.focusOffset);
+// Icon container for selected indicator or leading icons
+var IconContainer = /*#__PURE__*/styled.span.withConfig({
+  displayName: "ChipBase__IconContainer",
+  componentId: "sc-moa6zc-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"
+// Close button for dismissible chips
+])), tokens.semantic.space[100]);
+// Close button for dismissible chips
+var CloseButton = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "ChipBase__CloseButton",
+  componentId: "sc-moa6zc-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  position: relative;\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n\n  /* The pointer target is at least 24 \xD7 24px (WCAG 2.5.8, decision 0039): an invisible hit area\n     as tall as the chip, centred on the 20px button. It stays inside the chip and its padding, so\n     it can't overlap another target. */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: ", ";\n    height: ", ";\n    transform: translate(-50%, -50%);\n  }\n  border-radius: ", ";\n  cursor: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n  \n  &:disabled {\n    color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    border-radius: ", ";\n  }\n"])), tokens.semantic.space[200], chip.closeButton.size, chip.closeButton.size, tokens.semantic.space[0], semantic.size.label.medium, semantic.size.label.medium, tokens.semantic.radius.xs, function (props) {
+  return props.$disabled ? 'not-allowed' : 'pointer';
+}, semantic.motion.transition.feedback, tokens.semantic.color.fill['none-hover'], tokens.semantic.color.fill['none-pressed'], tokens.semantic.color.text.disabled, chip.focus.outline, semantic.border.focusOffset, chip["default"].borderRadius);
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { CloseButton, IconContainer, StyledChip };
+//# sourceMappingURL=ChipBase.mjs.map

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

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

package/dist/components/atoms/Chip/shared/types.d.mts

@@ -0,0 +1,34 @@
+import React from 'react';
+export interface BaseChipProps {
+    children?: React.ReactNode;
+    /**
+     * @deprecated Ignored, and removed in 3.0. Chips have one size, 24px (decision 0035).
+     */
+    size?: 'small' | 'medium';
+    disabled?: boolean;
+    'data-testid'?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+/**
+ * Visual variants for the static Chip. Only `default` stays in 3.0 (decision 0016):
+ * chips are classified by job, not emphasis.
+ */
+export type ChipVariant = 'default'
+/** @deprecated Removed in 3.0. Chips have no emphasis levels; use `default`. */
+ | 'emphasis'
+/** @deprecated Removed in 3.0. Use `default`. */
+ | 'subtle'
+/** @deprecated Removed in 3.0. For a clickable action use a Button; for a toggle use `BooleanChip` (`FilterChip` in 3.0). */
+ | 'interactive';
+export interface InternalStyledProps {
+    $variant: ChipVariant;
+    $disabled?: boolean;
+    $clickable?: boolean;
+    $selected?: boolean;
+}
+/**
+ * Legacy Chip variants.
+ * @deprecated Removed in 3.0. `light` is the same as `default`; `dark` maps to the deprecated `emphasis`. Use `default`.
+ */
+export type LegacyVariant = 'light' | 'dark';

package/dist/components/atoms/Chip/shared/utils.d.mts

@@ -0,0 +1,10 @@
+import { ChipVariant } from './types.mjs';
+interface StyledChipProps {
+    $variant: ChipVariant;
+    $disabled?: boolean;
+    $clickable?: boolean;
+    $selected?: boolean;
+}
+export declare const getVariantStyles: ({ $variant, $selected, $clickable, $disabled }: StyledChipProps) => string;
+export declare const sizeStyles: string;
+export {};

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

@@ -0,0 +1,46 @@
+'use client';
+import tokens from '../../../../lib/cssTokens.mjs';
+import { forcedColors } from '../../../../lib/styleUtils.mjs';
+
+var chip = tokens.component.chip,
+  semantic = tokens.semantic;
+// Helper function to get variant styles matching Button's approach
+var getVariantStyles = function getVariantStyles(_a) {
+  var $variant = _a.$variant,
+    $selected = _a.$selected,
+    $clickable = _a.$clickable,
+    $disabled = _a.$disabled;
+  // Selected filter and input chips use the light-blue selected treatment (decision 0016).
+  // The text darkens with the fill so every state stays at least 4.5:1.
+  if ($selected) {
+    // A selected disabled chip looks like any disabled chip; the checkmark keeps the
+    // selected state visible (#110)
+    if ($disabled) {
+      var disabled = chip.variants.subtle.disabled;
+      return "\n        background-color: ".concat(disabled.backgroundColor, ";\n        color: ").concat(disabled.textColor, ";\n      ");
+    }
+    var _b = tokens.semantic.color,
+      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    ");
+  }
+  switch ($variant) {
+    case 'emphasis':
+      return "\n        background-color: ".concat(chip.variants.emphasis.backgroundColor, ";\n        color: ").concat(chip.variants.emphasis.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.variants.emphasis.disabled.backgroundColor : $clickable ? chip.variants.emphasis.hover.backgroundColor : chip.variants.emphasis.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.variants.emphasis.disabled.backgroundColor : $clickable ? chip.variants.emphasis.active.backgroundColor : chip.variants.emphasis.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.variants.emphasis.disabled.backgroundColor, ";\n          color: ").concat(chip.variants.emphasis.disabled.textColor, ";\n        ") : '', "\n      ");
+    case 'subtle':
+      return "\n        background-color: ".concat(chip.variants.subtle.backgroundColor, ";\n        color: ").concat(chip.variants.subtle.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.variants.subtle.disabled.backgroundColor : $clickable ? chip.variants.subtle.hover.backgroundColor : chip.variants.subtle.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.variants.subtle.disabled.backgroundColor : $clickable ? chip.variants.subtle.active.backgroundColor : chip.variants.subtle.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.variants.subtle.disabled.backgroundColor, ";\n          color: ").concat(chip.variants.subtle.disabled.textColor, ";\n        ") : '', "\n      ");
+    case 'interactive':
+      return "\n        background-color: ".concat(chip.variants.interactive.backgroundColor, ";\n        color: ").concat(chip.variants.interactive.textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.variants.interactive.disabled.backgroundColor : $clickable ? chip.variants.interactive.hover.backgroundColor : chip.variants.interactive.backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.variants.interactive.disabled.backgroundColor : $clickable ? chip.variants.interactive.active.backgroundColor : chip.variants.interactive.backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.variants.interactive.disabled.backgroundColor, ";\n          color: ").concat(chip.variants.interactive.disabled.textColor, ";\n        ") : '', "\n      ");
+    case 'default':
+    default:
+      return "\n        background-color: ".concat(chip["default"].backgroundColor, ";\n        color: ").concat(chip["default"].textColor, ";\n        \n        &:hover {\n          background-color: ").concat($disabled ? chip.disabled.backgroundColor : $clickable ? chip.hover.backgroundColor : chip["default"].backgroundColor, ";\n        }\n        \n        &:active {\n          background-color: ").concat($disabled ? chip.disabled.backgroundColor : $clickable ? chip.active.backgroundColor : chip["default"].backgroundColor, ";\n        }\n        \n        ").concat($disabled ? "\n          background-color: ".concat(chip.disabled.backgroundColor, ";\n          color: ").concat(chip.disabled.textColor, ";\n        ") : '', "\n      ");
+  }
+};
+// Chips have one size: 24px from the label scale as a minimum, with the content centred
+// and no vertical padding (decisions 0034 and 0035). Horizontal padding comes from the
+// semantic spacing scale (decision 0022).
+var sizeStyles = "\n  font: ".concat(chip.sizes.medium.font, ";\n  min-height: ").concat(semantic.size.label.medium, ";\n  padding: 0 ").concat(semantic.space.inset.sm, ";\n");
+
+export { getVariantStyles, sizeStyles };
+//# sourceMappingURL=utils.mjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export type ContainerProps = {
+    children?: React.ReactNode;
+    'data-testid'?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const Container: ({ children, ...props }: ContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Container/Container.mjs

@@ -0,0 +1,24 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } 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 { media, breakpoints } from '../../../lib/styleUtils.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+var space = tokens.semantic.space;
+var StyledContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Container__StyledContainer",
+  componentId: "sc-17dbj6n-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n  \n  ", " {\n    max-width: ", ";\n  }\n"])), space[600], space[600], media.sm, breakpoints.sm, media.md, breakpoints.md, media.lg, breakpoints.lg, media.xl, breakpoints.xl, media['2xl'], breakpoints['2xl']);
+var Container = function Container(_a) {
+  var children = _a.children,
+    props = __rest(_a, ["children"]);
+  return jsx(StyledContainer, __assign({}, props, {
+    children: children
+  }));
+};
+var templateObject_1;
+
+export { Container };
+//# sourceMappingURL=Container.mjs.map

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

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

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * How DateFormatter shows a date. `'relative'` is deprecated: it has always behaved exactly like
+ * `'smart'`, so use `'smart'`. It keeps working until it is removed in 3.0 (#82).
+ */
+export type DateFormatMode = 'absolute' | 'relative' | 'smart';
+export interface DateFormatterProps {
+    /** ISO date string to format */
+    dateString: string;
+    /** Format pattern (defaults to 'yyyy') */
+    formatString?: string;
+    /**
+     * `'absolute'` always uses `formatString`. `'smart'` shows "Today", "Yesterday" or the day name
+     * for dates this week, and formats older dates with `formatString`.
+     * `'relative'` is deprecated: it behaves exactly like `'smart'`, so use `'smart'`. It keeps
+     * working until it is removed in 3.0 (#82).
+     * @default 'absolute'
+     */
+    mode?: DateFormatMode;
+    /** Optional data-testid for testing */
+    'data-testid'?: string;
+}
+export declare const DateFormatter: React.FC<DateFormatterProps>;