@common-origin/design-system 2.19.0 → 2.21.0

package/dist/components/molecules/Breadcrumbs/Breadcrumbs.mjs

@@ -0,0 +1,74 @@
+'use client';
+import { __makeTemplateObject, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Container } from '../../atoms/Container/Container.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+var BreadcrumbNavStyled = /*#__PURE__*/styled.nav.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbNavStyled",
+  componentId: "sc-7ouzg5-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), tokens.semantic.border["default"]);
+var BreadcrumbStyled = /*#__PURE__*/styled.li.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbStyled",
+  componentId: "sc-7ouzg5-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: ", ";\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: ", ";\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), tokens.semantic.space[200], tokens.semantic.space[200], tokens.semantic.color.text.muted, tokens.component.breadcrumbs.item.maxWidth, tokens.semantic.color.text["default"]);
+var BreadcrumbSeparator = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbSeparator",
+  componentId: "sc-7ouzg5-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"])));
+var isInternalUrl = function isInternalUrl(url) {
+  return url.startsWith('/') && !url.startsWith('http');
+};
+var Breadcrumbs = function Breadcrumbs(_a) {
+  var breadcrumbs = _a.breadcrumbs,
+    LinkComponent = _a.linkComponent;
+  return jsx(Container, {
+    children: jsx(BreadcrumbNavStyled, {
+      "aria-label": "breadcrumb",
+      children: jsx("ol", {
+        children: breadcrumbs.map(function (breadcrumb, index) {
+          return jsxs(React.Fragment, {
+            children: [jsx(BreadcrumbStyled, {
+              children: index === breadcrumbs.length - 1 ? jsx(Typography, {
+                variant: "caption",
+                children: breadcrumb.label
+              }) : LinkComponent && isInternalUrl(breadcrumb.url) ? jsx(LinkComponent, {
+                href: breadcrumb.url,
+                children: jsx(Typography, {
+                  variant: "caption",
+                  children: breadcrumb.label
+                })
+              }) : jsx("a", __assign({
+                href: breadcrumb.url
+              }, !isInternalUrl(breadcrumb.url) && {
+                target: "_blank",
+                rel: "noopener noreferrer"
+              }, {
+                children: jsx(Typography, {
+                  variant: "caption",
+                  children: breadcrumb.label
+                })
+              }))
+            }), index < breadcrumbs.length - 1 && jsx(BreadcrumbSeparator, {
+              "aria-hidden": "true",
+              children: jsx(Icon, {
+                name: "arrowRight",
+                size: "xs",
+                iconColor: "subdued"
+              })
+            })]
+          }, index);
+        })
+      })
+    })
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs.mjs.map

package/dist/components/molecules/Breadcrumbs/Breadcrumbs.mjs.map

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

package/dist/components/molecules/Breadcrumbs/index.d.mts

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

package/dist/components/molecules/CardLarge/CardLarge.d.mts

@@ -0,0 +1,12 @@
+export type CardLargeProps = {
+    title: string;
+    excerpt: string;
+    subtitle?: string;
+    labels?: string[];
+    picture: string;
+    onImageClick?: () => void;
+    imageHref?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+};
+export declare const CardLarge: ({ title, excerpt, subtitle, labels, picture, onImageClick, imageHref, "data-testid": dataTestId, }: CardLargeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/CardLarge/CardLarge.mjs

@@ -0,0 +1,76 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Chip } from '../../atoms/Chip/Chip.mjs';
+import '../../atoms/Icon/Icon.mjs';
+import '../../atoms/Chip/shared/ChipBase.mjs';
+import '../../atoms/Chip/SuggestionChip.mjs';
+import { Picture } from '../../atoms/Picture/Picture.mjs';
+import { Stack } from '../../atoms/Stack/Stack.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+var CardLargeStyled = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CardLarge__CardLargeStyled",
+  componentId: "sc-1rfgdzl-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"], ["\n  max-width: ", ";\n\n  a {\n    text-decoration: none;\n  }\n\n  /* The image answers hover and press through Picture, and only when it's clickable (issue 185) */\n  img {\n    border-radius: ", ";\n    width: 100%;\n  }\n"])), tokens.component.cardLarge.maxWidth, tokens.semantic.radius['2xl']);
+var CardLarge = function CardLarge(_a) {
+  var title = _a.title,
+    excerpt = _a.excerpt,
+    subtitle = _a.subtitle,
+    _b = _a.labels,
+    labels = _b === void 0 ? [] : _b,
+    picture = _a.picture,
+    onImageClick = _a.onImageClick,
+    imageHref = _a.imageHref,
+    dataTestId = _a["data-testid"];
+  return jsx(CardLargeStyled, {
+    "data-testid": dataTestId,
+    children: jsxs(Stack, {
+      direction: "column",
+      gap: "md",
+      children: [jsx(Picture, {
+        title: title,
+        src: picture,
+        onClick: onImageClick,
+        href: imageHref
+      }), jsxs(Stack, {
+        direction: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: "xs",
+        children: [jsxs(Stack, {
+          direction: "column",
+          gap: "xs",
+          children: [jsx(Typography, {
+            variant: "h5",
+            children: title
+          }), subtitle && jsx(Typography, {
+            variant: "small",
+            color: "subdued",
+            children: subtitle
+          }), excerpt && jsx(Typography, {
+            variant: "body",
+            children: excerpt
+          })]
+        }), jsx(Stack, {
+          direction: "row",
+          alignItems: "center",
+          gap: "xs",
+          children: Array.isArray(labels) && labels.map(function (label, index) {
+            return jsx(Chip, {
+              title: label,
+              variant: "default"
+            }, index);
+          })
+        })]
+      })]
+    })
+  });
+};
+var templateObject_1;
+
+export { CardLarge };
+//# sourceMappingURL=CardLarge.mjs.map

package/dist/components/molecules/CardLarge/CardLarge.mjs.map

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

package/dist/components/molecules/CardLarge/index.d.mts

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

package/dist/components/molecules/CardSmall/CardSmall.d.mts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type CardSmallProps = {
+    title: string;
+    picture?: string;
+    subtitle?: string;
+    meta?: string;
+    href?: string;
+    /**
+     * Custom link component (e.g., Next.js Link)
+     * @example linkComponent={NextLink}
+     */
+    linkComponent?: React.ComponentType<any>;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+};
+export declare const CardSmall: React.FC<CardSmallProps>;

package/dist/components/molecules/CardSmall/CardSmall.mjs

@@ -0,0 +1,73 @@
+'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 { Stack } from '../../atoms/Stack/Stack.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { Picture } from '../../atoms/Picture/Picture.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+// The whole card is one link (#185): hovering anywhere fades its image, pressing fades it one step
+// further, and keyboard focus draws the system focus ring around the card (decision 0029)
+var CardSmallStyled = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CardSmall__CardSmallStyled",
+  componentId: "sc-jpcqvd-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  a {\n    display: block;\n    text-decoration: none;\n    border-radius: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ", ";\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  a:hover img {\n    opacity: ", ";\n  }\n\n  a:active img {\n    opacity: ", ";\n  }\n\n  a:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.radius.sm, tokens.semantic.radius.sm, tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
+var CardSmall = function CardSmall(_a) {
+  var title = _a.title,
+    picture = _a.picture,
+    subtitle = _a.subtitle,
+    meta = _a.meta,
+    href = _a.href,
+    LinkComponent = _a.linkComponent,
+    dataTestId = _a["data-testid"];
+  if (!picture || !meta) {
+    return null;
+  }
+  var content = jsxs(Stack, {
+    direction: "column",
+    gap: 'sm',
+    children: [jsx(Picture, {
+      title: title,
+      src: picture,
+      width: 300,
+      height: 300
+    }), jsxs(Stack, {
+      direction: "column",
+      gap: 'xs',
+      children: [jsx(Typography, {
+        variant: "small",
+        children: title
+      }), jsxs(Stack, {
+        direction: "column",
+        gap: 'none',
+        children: [subtitle && jsx(Typography, {
+          variant: "label",
+          color: "subdued",
+          children: subtitle
+        }), meta && jsx(Typography, {
+          variant: "label",
+          color: "subdued",
+          children: meta
+        })]
+      })]
+    })]
+  });
+  return jsx(CardSmallStyled, {
+    "data-testid": dataTestId,
+    children: LinkComponent && href ? jsx(LinkComponent, {
+      href: href,
+      "aria-label": title,
+      children: content
+    }) : jsx("a", {
+      href: href || '#',
+      "aria-label": title,
+      children: content
+    })
+  });
+};
+var templateObject_1;
+
+export { CardSmall };
+//# sourceMappingURL=CardSmall.mjs.map

package/dist/components/molecules/CardSmall/CardSmall.mjs.map

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

package/dist/components/molecules/CardSmall/index.d.mts

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

package/dist/components/molecules/Checkbox/Checkbox.d.mts

@@ -0,0 +1,64 @@
+import React, { InputHTMLAttributes } from 'react';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * The label text for the checkbox
+     */
+    label: string;
+    /**
+     * Whether the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state
+     * Useful for "select all" scenarios where some but not all items are selected
+     */
+    indeterminate?: boolean;
+    /**
+     * Position of the label relative to the checkbox
+     * @default 'right'
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Helper text displayed below the checkbox
+     */
+    helperText?: string;
+    /**
+     * Error message to display. When provided, checkbox enters error state
+     */
+    error?: string;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback fired when the checkbox state changes
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Additional ARIA description for accessibility
+     */
+    'aria-describedby'?: string;
+}
+/**
+ * Checkbox component for binary selection with WCAG 2.2 AA compliance
+ *
+ * Features:
+ * - Custom styled checkbox with clear visual states
+ * - Integrated label with configurable positioning
+ * - Helper text and error messaging
+ * - Indeterminate state support
+ * - Full keyboard navigation (Space to toggle)
+ * - ARIA attributes for screen readers
+ * - 8px grid aligned (48px touch target)
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Accept terms and conditions"
+ *   checked={accepted}
+ *   onChange={(e) => setAccepted(e.target.checked)}
+ *   required
+ * />
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/molecules/Checkbox/Checkbox.mjs

@@ -0,0 +1,139 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { forwardRef, useId } from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { StyledCheckboxContainer, HiddenCheckboxInput, StyledCheckbox, StyledCheckboxLabel } from './SelectableInputBase.mjs';
+
+var StyledFieldContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Checkbox__StyledFieldContainer",
+  componentId: "sc-vquz3v-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokens.semantic.space[100]);
+var StyledHelperText = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Checkbox__StyledHelperText",
+  componentId: "sc-vquz3v-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"
+/**
+ * Checkbox component for binary selection with WCAG 2.2 AA compliance
+ *
+ * Features:
+ * - Custom styled checkbox with clear visual states
+ * - Integrated label with configurable positioning
+ * - Helper text and error messaging
+ * - Indeterminate state support
+ * - Full keyboard navigation (Space to toggle)
+ * - ARIA attributes for screen readers
+ * - 8px grid aligned (48px touch target)
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Accept terms and conditions"
+ *   checked={accepted}
+ *   onChange={(e) => setAccepted(e.target.checked)}
+ *   required
+ * />
+ * ```
+ */])), tokens.component.field.helperText.typography, function (props) {
+  return props.$error ? tokens.component.field.helperText.colorError : tokens.component.field.helperText.color;
+}, tokens.semantic.space[900]);
+/**
+ * Checkbox component for binary selection with WCAG 2.2 AA compliance
+ *
+ * Features:
+ * - Custom styled checkbox with clear visual states
+ * - Integrated label with configurable positioning
+ * - Helper text and error messaging
+ * - Indeterminate state support
+ * - Full keyboard navigation (Space to toggle)
+ * - ARIA attributes for screen readers
+ * - 8px grid aligned (48px touch target)
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Accept terms and conditions"
+ *   checked={accepted}
+ *   onChange={(e) => setAccepted(e.target.checked)}
+ *   required
+ * />
+ * ```
+ */
+var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var label = _a.label,
+    _b = _a.checked,
+    checked = _b === void 0 ? false : _b,
+    _c = _a.indeterminate,
+    indeterminate = _c === void 0 ? false : _c,
+    _d = _a.labelPosition,
+    labelPosition = _d === void 0 ? 'right' : _d,
+    helperText = _a.helperText,
+    error = _a.error,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    onChange = _a.onChange,
+    providedId = _a.id,
+    ariaDescribedby = _a["aria-describedby"],
+    rest = __rest(_a, ["label", "checked", "indeterminate", "labelPosition", "helperText", "error", "disabled", "onChange", "id", 'aria-describedby']);
+  var generatedId = useId();
+  var id = providedId || generatedId;
+  var helperTextId = "".concat(id, "-helper-text");
+  var errorId = "".concat(id, "-error");
+  // Determine the state for styling
+  var state = disabled ? 'disabled' : error ? 'error' : 'default';
+  // Set up ARIA describedby
+  var describedBy = [ariaDescribedby, helperText ? helperTextId : undefined, error ? errorId : undefined].filter(Boolean).join(' ');
+  // Update indeterminate property on the input element
+  var inputRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return inputRef.current;
+  });
+  React.useEffect(function () {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  return jsxs(StyledFieldContainer, {
+    children: [jsxs(StyledCheckboxContainer, {
+      "$disabled": disabled,
+      "$labelPosition": labelPosition,
+      children: [jsx(HiddenCheckboxInput, __assign({
+        ref: inputRef,
+        type: "checkbox",
+        id: id,
+        checked: checked,
+        disabled: disabled,
+        onChange: onChange,
+        "aria-describedby": describedBy || undefined,
+        "aria-invalid": error ? true : undefined,
+        "$state": state,
+        "$checked": checked,
+        "$indeterminate": indeterminate
+      }, rest)), jsx(StyledCheckbox, {
+        "$state": state,
+        "$checked": checked,
+        "$indeterminate": indeterminate,
+        "aria-hidden": "true"
+      }), jsx(StyledCheckboxLabel, {
+        "$disabled": disabled,
+        children: label
+      })]
+    }), helperText && !error && jsx(StyledHelperText, {
+      id: helperTextId,
+      children: helperText
+    }), error && jsx(StyledHelperText, {
+      id: errorId,
+      "$error": true,
+      role: "alert",
+      "aria-live": "polite",
+      children: error
+    })]
+  });
+});
+Checkbox.displayName = 'Checkbox';
+var templateObject_1, templateObject_2;
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/components/molecules/Checkbox/Checkbox.mjs.map

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

package/dist/components/molecules/Checkbox/SelectableInputBase.d.mts

@@ -0,0 +1,40 @@
+export type SelectableInputState = 'default' | 'error' | 'disabled';
+interface StyledCheckboxInputProps {
+    $state: SelectableInputState;
+    $checked: boolean;
+    $indeterminate?: boolean;
+}
+/**
+ * Hidden native checkbox input for accessibility
+ * Maintains keyboard navigation and screen reader support
+ */
+export declare const HiddenCheckboxInput: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types.js").CSSPropertiesWithVars | undefined;
+}, StyledCheckboxInputProps>> & string;
+/**
+ * Custom checkbox visual component
+ * 24px × 24px for 8px grid alignment
+ * Uses component.input.* tokens for consistency with TextField
+ */
+export declare const StyledCheckbox: 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;
+}, StyledCheckboxInputProps>> & string;
+/**
+ * Container for checkbox with proper spacing and alignment
+ * 48px min-height for touch target (8px grid aligned)
+ */
+export declare const StyledCheckboxContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Merged<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types.js").CSSPropertiesWithVars | undefined;
+}, {
+    $disabled: boolean;
+    $labelPosition: "left" | "right";
+}>> & string;
+/**
+ * Label text with proper typography
+ */
+export declare const StyledCheckboxLabel: 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;
+}, {
+    $disabled: boolean;
+}>> & string;
+export {};

package/dist/components/molecules/Checkbox/SelectableInputBase.mjs

@@ -0,0 +1,99 @@
+'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 { forcedColors } from '../../../lib/styleUtils.mjs';
+
+/**
+ * Hidden native checkbox input for accessibility
+ * Maintains keyboard navigation and screen reader support
+ */
+var HiddenCheckboxInput = /*#__PURE__*/styled.input.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SelectableInputBase__HiddenCheckboxInput",
+  componentId: "sc-1ddpctx-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"
+/**
+ * Custom checkbox visual component
+ * 24px × 24px for 8px grid alignment
+ * Uses component.input.* tokens for consistency with TextField
+ */])));
+/**
+ * Custom checkbox visual component
+ * 24px × 24px for 8px grid alignment
+ * Uses component.input.* tokens for consistency with TextField
+ */
+var StyledCheckbox = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SelectableInputBase__StyledCheckbox",
+  componentId: "sc-1ddpctx-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: background-color ", " ", ",\n              border-color ", " ", ",\n              ", ";\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  /* Forced colours drop fills (decision 0038): a checked or indeterminate box takes the system\n     selection colour, or GrayText when disabled, and its mark the matching text colour. The\n     indeterminate dash is a fill, so it needs the same treatment. */\n  ", "\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: background-color ", " ", ",\n              border-color ", " ", ",\n              ", ";\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  /* Forced colours drop fills (decision 0038): a checked or indeterminate box takes the system\n     selection colour, or GrayText when disabled, and its mark the matching text colour. The\n     indeterminate dash is a fill, so it needs the same treatment. */\n  ", "\n"
+/**
+ * Container for checkbox with proper spacing and alignment
+ * 48px min-height for touch target (8px grid aligned)
+ */])), tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.checkbox.box.size, tokens.component.input["default"].borderRadius, tokens.component.input["default"].borderWidth, function (props) {
+  return props.$checked || props.$indeterminate ? tokens.semantic.color.fill.inverse : tokens.component.input["default"].backgroundColor;
+}, function (props) {
+  if (props.$state === 'error') return tokens.component.input.error.borderColor;
+  // A checked box's border matches its fill, so the box reads as solid
+  if (props.$checked || props.$indeterminate) return tokens.semantic.color.fill.inverse;
+  return tokens.component.input["default"].borderColor;
+}, function (props) {
+  return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
+}, tokens.semantic.motion.duration.fast, tokens.semantic.motion.easing.decelerate, tokens.semantic.motion.duration.fast, tokens.semantic.motion.easing.decelerate, tokens.semantic.motion.transition.focus, HiddenCheckboxInput, function (props) {
+  return props.$state === 'error' ? tokens.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokens.semantic.color.fill.inverse : tokens.component.input.hover.borderColor;
+}, HiddenCheckboxInput, tokens.component.input.focus.outline, tokens.semantic.border.focusOffset, function (props) {
+  return props.$state === 'error' ? tokens.component.input.error.focus.borderColor : tokens.component.input.focus.borderColor;
+}, function (props) {
+  return props.$state === 'disabled' && "\n    background-color: ".concat(tokens.component.input.disabled.backgroundColor, ";\n    border-color: ").concat(tokens.component.input.disabled.borderColor, ";\n  ");
+}, function (props) {
+  return props.$checked ? 'block' : 'none';
+}, tokens.semantic.color.text.inverse, function (props) {
+  return props.$indeterminate ? 'block' : 'none';
+}, tokens.semantic.color.text.inverse, function (props) {
+  var on = props.$checked || props.$indeterminate;
+  var disabled = props.$state === 'disabled';
+  if (!on) return disabled ? "".concat(forcedColors, " { border-color: GrayText; }") : '';
+  var fill = disabled ? 'GrayText' : 'Highlight';
+  var mark = disabled ? 'Canvas' : 'HighlightText';
+  return "".concat(forcedColors, " {\n      forced-color-adjust: none;\n      background-color: ").concat(fill, ";\n      border-color: ").concat(fill, ";\n      &::after { border-color: ").concat(mark, "; }\n      &::before { background-color: ").concat(mark, "; }\n    }");
+});
+/**
+ * Container for checkbox with proper spacing and alignment
+ * 48px min-height for touch target (8px grid aligned)
+ */
+var StyledCheckboxContainer = /*#__PURE__*/styled.label.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SelectableInputBase__StyledCheckboxContainer",
+  componentId: "sc-1ddpctx-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: ", ";\n  flex-direction: ", ";\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: ", ";\n  flex-direction: ", ";\n  user-select: none;\n"
+/**
+ * Label text with proper typography
+ */])), tokens.semantic.space[300], function (props) {
+  return props.$disabled ? 'not-allowed' : 'pointer';
+}, tokens.component.checkbox.row.minHeight, function (props) {
+  return props.$labelPosition === 'left' ? 'row-reverse' : 'row';
+});
+/**
+ * Label text with proper typography
+ */
+var StyledCheckboxLabel = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SelectableInputBase__StyledCheckboxLabel",
+  componentId: "sc-1ddpctx-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokens.component.input["default"].font, function (props) {
+  return props.$disabled ? tokens.component.input.disabled.textColor : tokens.component.input["default"].textColor;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { HiddenCheckboxInput, StyledCheckbox, StyledCheckboxContainer, StyledCheckboxLabel };
+//# sourceMappingURL=SelectableInputBase.mjs.map

package/dist/components/molecules/Checkbox/SelectableInputBase.mjs.map

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

package/dist/components/molecules/Checkbox/index.d.mts

@@ -0,0 +1,3 @@
+export { Checkbox } from './Checkbox.mjs';
+export type { CheckboxProps } from './Checkbox.mjs';
+export { type SelectableInputState } from './SelectableInputBase.mjs';

package/dist/components/molecules/ChipGroup/ChipGroup.d.mts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ChipGroupProps = {
+    labels: string[];
+    variant?: 'default' | 'dark';
+    'data-testid'?: string;
+};
+export declare const ChipGroup: React.FC<ChipGroupProps>;