@common-origin/design-system 2.19.0 → 2.21.0

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.emphasis, 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

@@ -0,0 +1,5 @@
+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';

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>;

package/dist/components/atoms/DateFormatter/DateFormatter.mjs

@@ -0,0 +1,64 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { parseISO, format, isToday, isYesterday, isThisWeek } from 'date-fns';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+
+var _a = tokens.semantic,
+  typography = _a.typography,
+  color = _a.color;
+var TimeStyled = /*#__PURE__*/styled.time.withConfig({
+  displayName: "DateFormatter__TimeStyled",
+  componentId: "sc-5464cc-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+/**
+ * Formats a date with smart relative/absolute logic
+ */])), typography.label, color.text.muted);
+/**
+ * Formats a date with smart relative/absolute logic
+ */
+var formatDateSmart = function formatDateSmart(date, customFormat) {
+  // Relative labels for recent dates
+  if (isToday(date)) return 'Today';
+  if (isYesterday(date)) return 'Yesterday';
+  // Show day name for dates within this week
+  if (isThisWeek(date, {
+    weekStartsOn: 1
+  })) {
+    return format(date, 'EEEE'); // "Monday", "Tuesday", etc.
+  }
+  // Fall back to custom format or default full date format
+  return format(date, customFormat || 'MMMM dd, yyyy');
+};
+var DateFormatter = function DateFormatter(_a) {
+  var dateString = _a.dateString,
+    formatString = _a.formatString,
+    _b = _a.mode,
+    mode = _b === void 0 ? 'absolute' : _b,
+    dataTestId = _a["data-testid"];
+  var date = parseISO(dateString);
+  var displayText;
+  switch (mode) {
+    case 'relative': // Deprecated alias for 'smart', removed in 3.0 (#82)
+    case 'smart':
+      // Today, Yesterday or the day name for recent dates; formatted for older ones
+      displayText = formatDateSmart(date, formatString);
+      break;
+    case 'absolute':
+    default:
+      // Always use the format string (default 'yyyy')
+      displayText = format(date, formatString || 'yyyy');
+      break;
+  }
+  return jsx(TimeStyled, {
+    dateTime: dateString,
+    "data-testid": dataTestId,
+    children: displayText
+  });
+};
+var templateObject_1;
+
+export { DateFormatter };
+//# sourceMappingURL=DateFormatter.mjs.map

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

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

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

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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+export interface DividerProps {
+    /** Variant style of the divider */
+    variant?: 'default' | 'strong' | 'minimal';
+    /** Size variation affecting spacing */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Orientation of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * Divider is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
+ * ```
+ */
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/atoms/Divider/Divider.mjs

@@ -0,0 +1,134 @@
+'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';
+
+// Destructure tokens for cleaner access
+var separatorTokens = tokens.component.separator;
+// Margins come from the semantic separator spacing: no component spacing tokens (decision 0022)
+var space = tokens.semantic.space;
+var StyledDivider = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-1l0c8ja-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
+/**
+ * Divider is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
+ * ```
+ */])), function (_a) {
+  var _b = _a.$orientation,
+    $orientation = _b === void 0 ? 'horizontal' : _b;
+  if ($orientation === 'vertical') {
+    return "\n        display: inline-block;\n        height: auto;\n        align-self: stretch;\n        border-left: ".concat(tokens.semantic.border.width.thin, " solid;\n        border-top: none;\n      ");
+  }
+  return "border-top: ".concat(tokens.semantic.border.width.thin, " solid;");
+}, function (_a) {
+  var _b = _a.$variant,
+    $variant = _b === void 0 ? 'default' : _b,
+    _c = _a.$orientation,
+    $orientation = _c === void 0 ? 'horizontal' : _c;
+  var borderProperty = $orientation === 'vertical' ? 'border-left' : 'border-top';
+  switch ($variant) {
+    case 'strong':
+      return "".concat(borderProperty, ": ").concat(separatorTokens.variants.strong.border, ";");
+    case 'minimal':
+      return "".concat(borderProperty, ": ").concat(separatorTokens.variants.minimal.border, ";");
+    case 'default':
+    default:
+      return "".concat(borderProperty, ": ").concat(separatorTokens.variants["default"].border, ";");
+  }
+}, function (_a) {
+  var _b = _a.$size,
+    $size = _b === void 0 ? 'large' : _b,
+    _c = _a.$variant,
+    $variant = _c === void 0 ? 'default' : _c,
+    _d = _a.$orientation,
+    $orientation = _d === void 0 ? 'horizontal' : _d;
+  if ($variant === 'minimal' && $orientation === 'horizontal') {
+    // Minimal variant always uses its predefined spacing for horizontal
+    return "margin: ".concat(space[600], " 0;");
+  }
+  if ($orientation === 'vertical') {
+    // Vertical orientation uses horizontal margins (left/right)
+    switch ($size) {
+      case 'small':
+        return "margin: 0 ".concat(space[400], ";");
+      case 'medium':
+        return "margin: 0 ".concat(space[600], ";");
+      case 'xlarge':
+        return "margin: 0 ".concat(space[1200], ";");
+      case 'large':
+      default:
+        return "margin: 0 ".concat(space[800], ";");
+    }
+  }
+  // Horizontal orientation uses vertical margins (top/bottom)
+  switch ($size) {
+    case 'small':
+      return "margin: ".concat(space[400], " 0;");
+    case 'medium':
+      return "margin: ".concat(space[600], " 0;");
+    case 'xlarge':
+      return "margin: ".concat(space[1200], " 0;");
+    case 'large':
+    default:
+      return "margin: ".concat(space[800], " 0;");
+  }
+});
+/**
+ * Divider is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
+ * ```
+ */
+var Divider = function Divider(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'default' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'large' : _c,
+    _d = _a.orientation,
+    orientation = _d === void 0 ? 'horizontal' : _d,
+    dataTestId = _a["data-testid"];
+  return jsx(StyledDivider, {
+    "$variant": variant,
+    "$size": size,
+    "$orientation": orientation,
+    "data-testid": dataTestId,
+    role: "separator",
+    "aria-orientation": orientation
+  });
+};
+var templateObject_1;
+
+export { Divider };
+//# sourceMappingURL=Divider.mjs.map

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

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