@common-origin/design-system 2.19.0 → 2.20.0

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

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

package/dist/components/molecules/AgentInput/agentInputSpeech.d.mts

@@ -0,0 +1,43 @@
+export type AgentInputSubmitSource = 'text' | 'voice-final';
+export type AgentInputVoiceErrorCode = 'not-supported' | 'not-allowed' | 'no-speech' | 'audio-capture' | 'aborted' | 'unknown';
+export interface AgentInputVoiceError {
+    code: AgentInputVoiceErrorCode;
+    message: string;
+}
+export interface SpeechRecognitionAlternativeLike {
+    transcript: string;
+    confidence: number;
+}
+export interface SpeechRecognitionResultLike {
+    isFinal: boolean;
+    length: number;
+    [index: number]: SpeechRecognitionAlternativeLike;
+}
+export interface SpeechRecognitionResultListLike {
+    length: number;
+    [index: number]: SpeechRecognitionResultLike;
+}
+export interface SpeechRecognitionEventLike {
+    resultIndex: number;
+    results: SpeechRecognitionResultListLike;
+}
+export interface SpeechRecognitionErrorEventLike {
+    error?: string;
+    message?: string;
+}
+export interface SpeechRecognitionLike {
+    lang: string;
+    interimResults: boolean;
+    continuous: boolean;
+    onresult: ((event: SpeechRecognitionEventLike) => void) | null;
+    onerror: ((event: SpeechRecognitionErrorEventLike) => void) | null;
+    onend: (() => void) | null;
+    start: () => void;
+    stop: () => void;
+    abort: () => void;
+}
+export type SpeechRecognitionConstructorLike = new () => SpeechRecognitionLike;
+export declare function detectSpeechRecognitionConstructor(targetWindow?: Window): SpeechRecognitionConstructorLike | null;
+export declare function normalizeTranscript(input: string): string;
+export declare function mapSpeechErrorCode(error?: string): AgentInputVoiceErrorCode;
+export declare function defaultVoiceErrorMessage(code: AgentInputVoiceErrorCode): string;

package/dist/components/molecules/AgentInput/agentInputSpeech.mjs

@@ -0,0 +1,49 @@
+'use client';
+function detectSpeechRecognitionConstructor(targetWindow) {
+  if (!targetWindow) return null;
+  var candidateWindow = targetWindow;
+  if (candidateWindow.SpeechRecognition) {
+    return candidateWindow.SpeechRecognition;
+  }
+  if (candidateWindow.webkitSpeechRecognition) {
+    return candidateWindow.webkitSpeechRecognition;
+  }
+  return null;
+}
+function normalizeTranscript(input) {
+  return input.replace(/\s+/g, ' ').trim();
+}
+function mapSpeechErrorCode(error) {
+  switch (error) {
+    case 'not-allowed':
+    case 'service-not-allowed':
+      return 'not-allowed';
+    case 'no-speech':
+      return 'no-speech';
+    case 'audio-capture':
+      return 'audio-capture';
+    case 'aborted':
+      return 'aborted';
+    default:
+      return 'unknown';
+  }
+}
+function defaultVoiceErrorMessage(code) {
+  switch (code) {
+    case 'not-supported':
+      return 'Voice input is not supported in this browser. Use Chrome or Edge.';
+    case 'not-allowed':
+      return 'Microphone permission denied. Allow access and try again.';
+    case 'no-speech':
+      return 'No speech detected. Try again.';
+    case 'audio-capture':
+      return 'No microphone device detected. Check your microphone and try again.';
+    case 'aborted':
+      return 'Voice input was stopped.';
+    default:
+      return 'Voice input failed. Try again.';
+  }
+}
+
+export { defaultVoiceErrorMessage, detectSpeechRecognitionConstructor, mapSpeechErrorCode, normalizeTranscript };
+//# sourceMappingURL=agentInputSpeech.mjs.map

package/dist/components/molecules/AgentInput/agentInputSpeech.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agentInputSpeech.mjs","sources":["../../../../src/components/molecules/AgentInput/agentInputSpeech.ts"],"sourcesContent":["export type AgentInputSubmitSource = 'text' | 'voice-final'\n\nexport type AgentInputVoiceErrorCode =\n  | 'not-supported'\n  | 'not-allowed'\n  | 'no-speech'\n  | 'audio-capture'\n  | 'aborted'\n  | 'unknown'\n\nexport interface AgentInputVoiceError {\n  code: AgentInputVoiceErrorCode\n  message: string\n}\n\nexport interface SpeechRecognitionAlternativeLike {\n  transcript: string\n  confidence: number\n}\n\nexport interface SpeechRecognitionResultLike {\n  isFinal: boolean\n  length: number\n  [index: number]: SpeechRecognitionAlternativeLike\n}\n\nexport interface SpeechRecognitionResultListLike {\n  length: number\n  [index: number]: SpeechRecognitionResultLike\n}\n\nexport interface SpeechRecognitionEventLike {\n  resultIndex: number\n  results: SpeechRecognitionResultListLike\n}\n\nexport interface SpeechRecognitionErrorEventLike {\n  error?: string\n  message?: string\n}\n\nexport interface SpeechRecognitionLike {\n  lang: string\n  interimResults: boolean\n  continuous: boolean\n  onresult: ((event: SpeechRecognitionEventLike) => void) | null\n  onerror: ((event: SpeechRecognitionErrorEventLike) => void) | null\n  onend: (() => void) | null\n  start: () => void\n  stop: () => void\n  abort: () => void\n}\n\nexport type SpeechRecognitionConstructorLike = new () => SpeechRecognitionLike\n\ntype BrowserWindowWithSpeech = Window & {\n  SpeechRecognition?: SpeechRecognitionConstructorLike\n  webkitSpeechRecognition?: SpeechRecognitionConstructorLike\n}\n\nexport function detectSpeechRecognitionConstructor(\n  targetWindow?: Window\n): SpeechRecognitionConstructorLike | null {\n  if (!targetWindow) return null\n\n  const candidateWindow = targetWindow as BrowserWindowWithSpeech\n  if (candidateWindow.SpeechRecognition) {\n    return candidateWindow.SpeechRecognition\n  }\n\n  if (candidateWindow.webkitSpeechRecognition) {\n    return candidateWindow.webkitSpeechRecognition\n  }\n\n  return null\n}\n\nexport function normalizeTranscript(input: string): string {\n  return input.replace(/\\s+/g, ' ').trim()\n}\n\nexport function mapSpeechErrorCode(error?: string): AgentInputVoiceErrorCode {\n  switch (error) {\n    case 'not-allowed':\n    case 'service-not-allowed':\n      return 'not-allowed'\n    case 'no-speech':\n      return 'no-speech'\n    case 'audio-capture':\n      return 'audio-capture'\n    case 'aborted':\n      return 'aborted'\n    default:\n      return 'unknown'\n  }\n}\n\nexport function defaultVoiceErrorMessage(code: AgentInputVoiceErrorCode): string {\n  switch (code) {\n    case 'not-supported':\n      return 'Voice input is not supported in this browser. Use Chrome or Edge.'\n    case 'not-allowed':\n      return 'Microphone permission denied. Allow access and try again.'\n    case 'no-speech':\n      return 'No speech detected. Try again.'\n    case 'audio-capture':\n      return 'No microphone device detected. Check your microphone and try again.'\n    case 'aborted':\n      return 'Voice input was stopped.'\n    default:\n      return 'Voice input failed. Try again.'\n  }\n}\n"],"names":["detectSpeechRecognitionConstructor","targetWindow","candidateWindow","SpeechRecognition","webkitSpeechRecognition","normalizeTranscript","input","replace","trim","mapSpeechErrorCode","error","defaultVoiceErrorMessage","code"],"mappings":";AA4DM,SAAUA,kCAAkCA,CAChDC,YAAqB,EAAA;AAErB,EAAA,IAAI,CAACA,YAAY,EAAE,OAAO,IAAI,CAAA;EAE9B,IAAMC,eAAe,GAAGD,YAAuC,CAAA;EAC/D,IAAIC,eAAe,CAACC,iBAAiB,EAAE;IACrC,OAAOD,eAAe,CAACC,iBAAiB,CAAA;AAC1C,GAAA;EAEA,IAAID,eAAe,CAACE,uBAAuB,EAAE;IAC3C,OAAOF,eAAe,CAACE,uBAAuB,CAAA;AAChD,GAAA;AAEA,EAAA,OAAO,IAAI,CAAA;AACb,CAAA;AAEM,SAAUC,mBAAmBA,CAACC,KAAa,EAAA;EAC/C,OAAOA,KAAK,CAACC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAACC,IAAI,EAAE,CAAA;AAC1C,CAAA;AAEM,SAAUC,kBAAkBA,CAACC,KAAc,EAAA;AAC/C,EAAA,QAAQA,KAAK;AACX,IAAA,KAAK,aAAa,CAAA;AAClB,IAAA,KAAK,qBAAqB;AACxB,MAAA,OAAO,aAAa,CAAA;AACtB,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,WAAW,CAAA;AACpB,IAAA,KAAK,eAAe;AAClB,MAAA,OAAO,eAAe,CAAA;AACxB,IAAA,KAAK,SAAS;AACZ,MAAA,OAAO,SAAS,CAAA;AAClB,IAAA;AACE,MAAA,OAAO,SAAS,CAAA;AACpB,GAAA;AACF,CAAA;AAEM,SAAUC,wBAAwBA,CAACC,IAA8B,EAAA;AACrE,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,eAAe;AAClB,MAAA,OAAO,mEAAmE,CAAA;AAC5E,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,2DAA2D,CAAA;AACpE,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,gCAAgC,CAAA;AACzC,IAAA,KAAK,eAAe;AAClB,MAAA,OAAO,qEAAqE,CAAA;AAC9E,IAAA,KAAK,SAAS;AACZ,MAAA,OAAO,0BAA0B,CAAA;AACnC,IAAA;AACE,MAAA,OAAO,gCAAgC,CAAA;AAC3C,GAAA;AACF;;;;"}

package/dist/components/molecules/AgentInput/agentInputStateMachine.d.mts

@@ -0,0 +1,29 @@
+export type AgentInputMachineState = 'idle' | 'typing' | 'listening' | 'processingFinalTranscript' | 'submitting' | 'error' | 'disabled';
+export type AgentInputMachineEvent = {
+    type: 'INPUT_CHANGE';
+    hasText: boolean;
+} | {
+    type: 'MIC_START';
+} | {
+    type: 'MIC_STOP';
+    hasText: boolean;
+} | {
+    type: 'VOICE_INTERIM';
+} | {
+    type: 'VOICE_FINAL';
+} | {
+    type: 'VOICE_ERROR';
+} | {
+    type: 'TIMEOUT_NO_SPEECH';
+} | {
+    type: 'SUBMIT';
+} | {
+    type: 'SUBMIT_SUCCESS';
+    hasText?: boolean;
+} | {
+    type: 'SUBMIT_ERROR';
+} | {
+    type: 'RESET_ERROR';
+    hasText: boolean;
+};
+export declare function agentInputStateTransition(currentState: AgentInputMachineState, event: AgentInputMachineEvent): AgentInputMachineState;

package/dist/components/molecules/AgentInput/agentInputStateMachine.mjs

@@ -0,0 +1,55 @@
+'use client';
+var textDrivenState = function textDrivenState(hasText) {
+  return hasText ? 'typing' : 'idle';
+};
+function agentInputStateTransition(currentState, event) {
+  if (currentState === 'disabled') {
+    return 'disabled';
+  }
+  switch (event.type) {
+    case 'INPUT_CHANGE':
+      if (currentState === 'listening' || currentState === 'processingFinalTranscript' || currentState === 'submitting') {
+        return currentState;
+      }
+      return textDrivenState(event.hasText);
+    case 'MIC_START':
+      if (currentState === 'idle' || currentState === 'typing') {
+        return 'listening';
+      }
+      return currentState;
+    case 'VOICE_INTERIM':
+      if (currentState === 'listening') {
+        return 'listening';
+      }
+      return currentState;
+    case 'VOICE_FINAL':
+      if (currentState === 'listening') {
+        return 'processingFinalTranscript';
+      }
+      return currentState;
+    case 'MIC_STOP':
+      if (currentState === 'listening' || currentState === 'processingFinalTranscript') {
+        return textDrivenState(event.hasText);
+      }
+      return currentState;
+    case 'SUBMIT':
+      return 'submitting';
+    case 'SUBMIT_SUCCESS':
+      return 'idle';
+    case 'SUBMIT_ERROR':
+      return 'error';
+    case 'VOICE_ERROR':
+    case 'TIMEOUT_NO_SPEECH':
+      return 'error';
+    case 'RESET_ERROR':
+      if (currentState === 'error') {
+        return textDrivenState(event.hasText);
+      }
+      return currentState;
+    default:
+      return currentState;
+  }
+}
+
+export { agentInputStateTransition };
+//# sourceMappingURL=agentInputStateMachine.mjs.map

package/dist/components/molecules/AgentInput/agentInputStateMachine.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agentInputStateMachine.mjs","sources":["../../../../src/components/molecules/AgentInput/agentInputStateMachine.ts"],"sourcesContent":["export type AgentInputMachineState =\n  | 'idle'\n  | 'typing'\n  | 'listening'\n  | 'processingFinalTranscript'\n  | 'submitting'\n  | 'error'\n  | 'disabled'\n\nexport type AgentInputMachineEvent =\n  | { type: 'INPUT_CHANGE'; hasText: boolean }\n  | { type: 'MIC_START' }\n  | { type: 'MIC_STOP'; hasText: boolean }\n  | { type: 'VOICE_INTERIM' }\n  | { type: 'VOICE_FINAL' }\n  | { type: 'VOICE_ERROR' }\n  | { type: 'TIMEOUT_NO_SPEECH' }\n  | { type: 'SUBMIT' }\n  | { type: 'SUBMIT_SUCCESS'; hasText?: boolean }\n  | { type: 'SUBMIT_ERROR' }\n  | { type: 'RESET_ERROR'; hasText: boolean }\n\nconst textDrivenState = (hasText: boolean): AgentInputMachineState => (hasText ? 'typing' : 'idle')\n\nexport function agentInputStateTransition(\n  currentState: AgentInputMachineState,\n  event: AgentInputMachineEvent\n): AgentInputMachineState {\n  if (currentState === 'disabled') {\n    return 'disabled'\n  }\n\n  switch (event.type) {\n    case 'INPUT_CHANGE':\n      if (currentState === 'listening' || currentState === 'processingFinalTranscript' || currentState === 'submitting') {\n        return currentState\n      }\n      return textDrivenState(event.hasText)\n\n    case 'MIC_START':\n      if (currentState === 'idle' || currentState === 'typing') {\n        return 'listening'\n      }\n      return currentState\n\n    case 'VOICE_INTERIM':\n      if (currentState === 'listening') {\n        return 'listening'\n      }\n      return currentState\n\n    case 'VOICE_FINAL':\n      if (currentState === 'listening') {\n        return 'processingFinalTranscript'\n      }\n      return currentState\n\n    case 'MIC_STOP':\n      if (currentState === 'listening' || currentState === 'processingFinalTranscript') {\n        return textDrivenState(event.hasText)\n      }\n      return currentState\n\n    case 'SUBMIT':\n      return 'submitting'\n\n    case 'SUBMIT_SUCCESS':\n      return 'idle'\n\n    case 'SUBMIT_ERROR':\n      return 'error'\n\n    case 'VOICE_ERROR':\n    case 'TIMEOUT_NO_SPEECH':\n      return 'error'\n\n    case 'RESET_ERROR':\n      if (currentState === 'error') {\n        return textDrivenState(event.hasText)\n      }\n      return currentState\n\n    default:\n      return currentState\n  }\n}\n"],"names":["textDrivenState","hasText","agentInputStateTransition","currentState","event","type"],"mappings":";AAsBA,IAAMA,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,OAAgB,EAA6B;AAAA,EAAA,OAACA,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAA5B,CAA6B,CAAA;AAEnF,SAAAC,yBAAyBA,CACvCC,YAAoC,EACpCC,KAA6B,EAAA;EAE7B,IAAID,YAAY,KAAK,UAAU,EAAE;AAC/B,IAAA,OAAO,UAAU,CAAA;AACnB,GAAA;EAEA,QAAQC,KAAK,CAACC,IAAI;AAChB,IAAA,KAAK,cAAc;MACjB,IAAIF,YAAY,KAAK,WAAW,IAAIA,YAAY,KAAK,2BAA2B,IAAIA,YAAY,KAAK,YAAY,EAAE;AACjH,QAAA,OAAOA,YAAY,CAAA;AACrB,OAAA;AACA,MAAA,OAAOH,eAAe,CAACI,KAAK,CAACH,OAAO,CAAC,CAAA;AAEvC,IAAA,KAAK,WAAW;AACd,MAAA,IAAIE,YAAY,KAAK,MAAM,IAAIA,YAAY,KAAK,QAAQ,EAAE;AACxD,QAAA,OAAO,WAAW,CAAA;AACpB,OAAA;AACA,MAAA,OAAOA,YAAY,CAAA;AAErB,IAAA,KAAK,eAAe;MAClB,IAAIA,YAAY,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,WAAW,CAAA;AACpB,OAAA;AACA,MAAA,OAAOA,YAAY,CAAA;AAErB,IAAA,KAAK,aAAa;MAChB,IAAIA,YAAY,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,2BAA2B,CAAA;AACpC,OAAA;AACA,MAAA,OAAOA,YAAY,CAAA;AAErB,IAAA,KAAK,UAAU;AACb,MAAA,IAAIA,YAAY,KAAK,WAAW,IAAIA,YAAY,KAAK,2BAA2B,EAAE;AAChF,QAAA,OAAOH,eAAe,CAACI,KAAK,CAACH,OAAO,CAAC,CAAA;AACvC,OAAA;AACA,MAAA,OAAOE,YAAY,CAAA;AAErB,IAAA,KAAK,QAAQ;AACX,MAAA,OAAO,YAAY,CAAA;AAErB,IAAA,KAAK,gBAAgB;AACnB,MAAA,OAAO,MAAM,CAAA;AAEf,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,OAAO,CAAA;AAEhB,IAAA,KAAK,aAAa,CAAA;AAClB,IAAA,KAAK,mBAAmB;AACtB,MAAA,OAAO,OAAO,CAAA;AAEhB,IAAA,KAAK,aAAa;MAChB,IAAIA,YAAY,KAAK,OAAO,EAAE;AAC5B,QAAA,OAAOH,eAAe,CAACI,KAAK,CAACH,OAAO,CAAC,CAAA;AACvC,OAAA;AACA,MAAA,OAAOE,YAAY,CAAA;AAErB,IAAA;AACE,MAAA,OAAOA,YAAY,CAAA;AACvB,GAAA;AACF;;;;"}

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

@@ -0,0 +1,3 @@
+export { AgentInput } from './AgentInput.mjs';
+export type { AgentInputProps } from './AgentInput.mjs';
+export type { AgentInputSubmitSource, AgentInputVoiceErrorCode } from './agentInputSpeech.mjs';

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

@@ -0,0 +1,68 @@
+import React from 'react';
+export interface AlertProps {
+    /**
+     * Visual style variant affecting background, border, and icon colors
+     * - error: Critical issues, validation errors (crossCircle icon)
+     * - warning: Cautions, potential issues (bell icon)
+     * - info: Tips, helper text, neutral information (info icon)
+     * - success: Confirmations, successful operations (checkRing icon)
+     * @default 'info'
+     */
+    variant?: 'error' | 'warning' | 'info' | 'success';
+    /**
+     * Whether the severity border is drawn (decision 0019)
+     * - outlined: severity tint and a 1px severity border. Only for alerts at the top: a
+     *   page-level alert at the top of the page, an alert at the top of the content area, and an
+     *   error summary
+     * - borderless: severity tint only. Every other alert, including alerts inside content and at
+     *   the bottom of a page; the icon and title colour carry the severity
+     * @default 'outlined'
+     */
+    appearance?: 'outlined' | 'borderless';
+    /**
+     * Alert message content
+     */
+    children: React.ReactNode;
+    /**
+     * Optional title/heading for the alert
+     */
+    title?: string;
+    /**
+     * Show close/dismiss button
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Callback function when alert is dismissed. Called once the dismiss animation has
+     * finished and the alert has been removed.
+     */
+    onDismiss?: () => void;
+    /**
+     * Optional action button or component, placed below the message and left-aligned with it
+     */
+    action?: React.ReactNode;
+    /**
+     * Compact inline variant with reduced padding
+     * @default false
+     * @deprecated Use `InlineAlert` for a short, local message (decision 0019). `inline` keeps
+     * working until it is removed in 3.0. An inline alert that needs a title, action or dismiss
+     * button stays an Alert.
+     */
+    inline?: boolean;
+    /**
+     * ARIA live region behavior
+     * - polite: Non-urgent announcements
+     * - assertive: Important, time-sensitive information
+     * - off: Not announced
+     * @default 'polite'
+     */
+    ariaLive?: 'polite' | 'assertive' | 'off';
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+export declare const Alert: {
+    ({ variant, appearance, children, title, dismissible, onDismiss, action, inline, ariaLive, "data-testid": dataTestId, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/molecules/Alert/Alert.mjs

@@ -0,0 +1,284 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import styled$module, { keyframes, css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import tokensJson from '../../../styles/tokens.json.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { IconButton } from '../../atoms/IconButton/IconButton.mjs';
+import { useInert } from '../../../lib/usePresence.mjs';
+
+var semantic = tokens.semantic;
+var alert = tokens.component.alert;
+var _a = semantic.motion,
+  duration = _a.duration,
+  easing = _a.easing;
+// Dismissing fades the alert out, then collapses the space it took (Ollie's call, #35).
+// Each half takes duration.fast, so the whole exit stays within the 300ms maximum (P6). The timer
+// needs the resolved value, not the CSS variable (decision 0041).
+var FADE_MS = parseInt(tokensJson.semantic.motion.duration.fast, 10);
+var EXIT_MS = FADE_MS * 2;
+// The --alert-exit-* properties are the alert's height and vertical padding, measured
+// when it's dismissed, so nothing moves until the fade has finished
+var fadeThenCollapse = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"], ["\n  0%, 50% {\n    max-height: var(--alert-exit-height);\n    padding-top: var(--alert-exit-padding-top);\n    padding-bottom: var(--alert-exit-padding-bottom);\n    border-width: ", ";\n  }\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    max-height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    border-width: 0;\n  }\n"])), semantic.border.width.thin);
+var fadeOut = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"], ["\n  from { opacity: 1; }\n  to   { opacity: 0; }\n"
+// The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
+// (chosen when dismissed). A timer of the same length removes it if no animation event
+// arrives, for example where animations are disabled or the tab is hidden.
+// The generated names of the two exits (full, and reduced motion)
+])));
+// The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
+// (chosen when dismissed). A timer of the same length removes it if no animation event
+// arrives, for example where animations are disabled or the tab is hidden.
+// The generated names of the two exits (full, and reduced motion)
+var EXIT_ANIMATION_NAMES = [fadeThenCollapse.getName(), fadeOut.getName()];
+// Default icons by variant
+var variantIcons = {
+  error: 'crossCircle',
+  warning: 'bell',
+  info: 'info',
+  success: 'checkRing'
+};
+// Icon colors by variant (using semantic icon color tokens)
+var variantIconColors = {
+  error: 'error',
+  warning: 'warning',
+  info: 'interactive',
+  success: 'success'
+};
+// Title colors by variant (using semantic text color tokens)
+var variantTitleColors = {
+  error: 'error',
+  warning: 'warning',
+  info: 'interactive',
+  success: 'success'
+};
+var StyledAlert = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Alert__StyledAlert",
+  componentId: "sc-18tq5d-0"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"], ["\n  display: flex;\n  /* Items start at the top, so the icon and dismiss button line up with the first line */\n  align-items: flex-start;\n  gap: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  border: ", " solid;\n  position: relative;\n  width: 100%;\n  \n  /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n     keeps a transparent border, so both appearances take the same space. */\n  background-color: ", ";\n  color: ", ";\n  border-color: ", ";\n  \n  /* Responsive adjustments */\n  @media (min-width: ", ") {\n    padding: ", ";\n  }\n\n  /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n     preference that changes mid-exit can't swap animations and flash the faded alert back.\n     Reduced motion: fade only; the space closes instantly afterwards. */\n  ", "\n"])), function (_a) {
+  var $inline = _a.$inline;
+  return $inline ? semantic.space[200] : semantic.space[300];
+}, function (_a) {
+  var $inline = _a.$inline;
+  return $inline ? semantic.space[200] : semantic.space[300];
+}, semantic.radius.sm, semantic.border.width.thin, function (_a) {
+  var _b = _a.$variant,
+    $variant = _b === void 0 ? 'info' : _b;
+  return alert.severity[$variant].background;
+}, function (_a) {
+  var _b = _a.$variant,
+    $variant = _b === void 0 ? 'info' : _b;
+  return alert.severity[$variant].text;
+}, function (_a) {
+  var _b = _a.$variant,
+    $variant = _b === void 0 ? 'info' : _b,
+    $appearance = _a.$appearance;
+  return alert.appearance[$appearance].borderColor[$variant];
+}, semantic.breakpoint.md, function (_a) {
+  var $inline = _a.$inline;
+  return $inline ? semantic.space[200] : semantic.space[400];
+}, function (_a) {
+  var $isExiting = _a.$isExiting,
+    $reducedExit = _a.$reducedExit;
+  return $isExiting && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "], ["\n    overflow: hidden;\n    pointer-events: none;\n    animation: ", ";\n  "])), $reducedExit ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration.fast, easing.accelerate) : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing.accelerate));
+});
+var StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Alert__StyledIconContainer",
+  componentId: "sc-18tq5d-1"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n"])));
+var StyledContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Alert__StyledContent",
+  componentId: "sc-18tq5d-2"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic.space[100]);
+var StyledTitle = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Alert__StyledTitle",
+  componentId: "sc-18tq5d-3"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin: 0;\n"], ["\n  font: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin: 0;\n"])), alert.title.typography, alert.title.fontWeight, alert.title.lineHeight);
+var StyledMessage = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Alert__StyledMessage",
+  componentId: "sc-18tq5d-4"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font: ", ";\n  line-height: ", ";\n"], ["\n  font: ", ";\n  line-height: ", ";\n"
+// The action follows the content, left-aligned with it, so it's read after the message
+// (#122). With the content's xs gap, the space above it is md: a separate step.
+])), alert.message.typography, alert.message.lineHeight);
+// The action follows the content, left-aligned with it, so it's read after the message
+// (#122). With the content's xs gap, the space above it is md: a separate step.
+var StyledActions = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Alert__StyledActions",
+  componentId: "sc-18tq5d-5"
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: ", ";\n  margin-top: calc(", " - ", ");\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: ", ";\n  margin-top: calc(", " - ", ");\n"
+// The dismiss button's centre lines up with the first line of content: the title, or the
+// message when there's no title (decision 0019). The slot is as tall as that line and the
+// button is centred in it, overflowing evenly into the padding, so it stays aligned at every
+// padding and line height. Being in the row, it also keeps text and actions from running under it.
+])), semantic.space[200], semantic.space[300], semantic.space[100]);
+// The dismiss button's centre lines up with the first line of content: the title, or the
+// message when there's no title (decision 0019). The slot is as tall as that line and the
+// button is centred in it, overflowing evenly into the padding, so it stays aligned at every
+// padding and line height. Being in the row, it also keeps text and actions from running under it.
+var StyledDismissSlot = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Alert__StyledDismissSlot",
+  componentId: "sc-18tq5d-6"
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: ", ";\n"
+// The glyph sits on the padding edge, mirroring the severity icon on the left. The inline
+// alert's padding is too small for that, so its button stays inside the padding.
+])), function (_a) {
+  var $lineHeight = _a.$lineHeight;
+  return $lineHeight;
+});
+// The glyph sits on the padding edge, mirroring the severity icon on the left. The inline
+// alert's padding is too small for that, so its button stays inside the padding.
+var StyledDismissButton = /*#__PURE__*/styled(IconButton).withConfig({
+  displayName: "Alert__StyledDismissButton",
+  componentId: "sc-18tq5d-7"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  margin-right: ", ";\n"], ["\n  margin-right: ", ";\n"])), function (_a) {
+  var $inline = _a.$inline;
+  return $inline ? 0 : "calc((".concat(semantic.size.control.sm, " - ").concat(semantic.size.icon.sm, ") / -2)");
+});
+var Alert = function Alert(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'info' : _b,
+    _c = _a.appearance,
+    appearance = _c === void 0 ? 'outlined' : _c,
+    children = _a.children,
+    title = _a.title,
+    _d = _a.dismissible,
+    dismissible = _d === void 0 ? false : _d,
+    onDismiss = _a.onDismiss,
+    action = _a.action,
+    _e = _a.inline,
+    inline = _e === void 0 ? false : _e,
+    _f = _a.ariaLive,
+    ariaLive = _f === void 0 ? 'polite' : _f,
+    dataTestId = _a["data-testid"],
+    props = __rest(_a, ["variant", "appearance", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
+  var _g = React.useState('visible'),
+    phase = _g[0],
+    setPhase = _g[1];
+  var _h = React.useState(false),
+    reducedExit = _h[0],
+    setReducedExit = _h[1];
+  var _j = React.useState(),
+    exitStyle = _j[0],
+    setExitStyle = _j[1];
+  var alertRef = React.useRef(null);
+  // While it exits, its controls leave the tab order and can't be activated
+  useInert(alertRef, phase === 'exiting');
+  var onDismissRef = React.useRef(onDismiss);
+  React.useEffect(function () {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+  var handleDismiss = function handleDismiss() {
+    var node = alertRef.current;
+    if (node) {
+      var style = window.getComputedStyle(node);
+      var paddingTop = style.paddingTop,
+        paddingBottom = style.paddingBottom;
+      // max-height applies to the content box unless the alert is border-box (it depends on
+      // the consumer's reset), so measure whichever box it uses; nothing moves at the click
+      var height = Math.max(0, style.boxSizing === 'border-box' ? node.offsetHeight : node.offsetHeight - parseFloat(paddingTop) - parseFloat(paddingBottom) - parseFloat(style.borderTopWidth) - parseFloat(style.borderBottomWidth));
+      setExitStyle({
+        '--alert-exit-height': "".concat(height, "px"),
+        '--alert-exit-padding-top': paddingTop,
+        '--alert-exit-padding-bottom': paddingBottom
+      });
+    }
+    setReducedExit(typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    setPhase('exiting');
+  };
+  React.useEffect(function () {
+    if (phase !== 'exiting') return;
+    var timer = setTimeout(function () {
+      return setPhase('dismissed');
+    }, reducedExit ? FADE_MS : EXIT_MS);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [phase, reducedExit]);
+  // onDismiss fires once the alert has been removed from the DOM, so a consumer that
+  // unmounts it in onDismiss still gets the animation, and can't observe it
+  React.useEffect(function () {
+    var _a;
+    if (phase === 'dismissed') (_a = onDismissRef.current) === null || _a === void 0 ? void 0 : _a.call(onDismissRef);
+  }, [phase]);
+  if (phase === 'dismissed') {
+    return null;
+  }
+  var isExiting = phase === 'exiting';
+  // Consumers can pass extra HTML attributes, including style, aria-hidden and onAnimationEnd
+  var forwarded = props;
+  var handleAnimationEnd = function handleAnimationEnd(event) {
+    var _a;
+    (_a = forwarded.onAnimationEnd) === null || _a === void 0 ? void 0 : _a.call(forwarded, event);
+    // Only the exit itself ends the dismissal: not animations bubbling up from children,
+    // on pseudo-elements, or other animations a consumer puts on the alert
+    if (isExiting && event.target === event.currentTarget && !event.pseudoElement && EXIT_ANIMATION_NAMES.includes(event.animationName)) {
+      setPhase('dismissed');
+    }
+  };
+  // Get the icon for the current variant
+  var iconName = variantIcons[variant];
+  var alertIconColor = variantIconColors[variant];
+  var alertTitleColor = variantTitleColors[variant];
+  // Determine ARIA role based on variant and aria-live
+  var role = variant === 'error' ? 'alert' : 'status';
+  return jsxs(StyledAlert, __assign({
+    role: role,
+    "aria-live": ariaLive,
+    "$variant": variant,
+    "$appearance": appearance,
+    "$inline": inline,
+    "$isExiting": isExiting,
+    "$reducedExit": reducedExit,
+    "data-testid": dataTestId
+  }, props, {
+    ref: alertRef,
+    "aria-hidden": isExiting ? true : forwarded['aria-hidden'],
+    style: isExiting ? __assign(__assign({}, forwarded.style), exitStyle) : forwarded.style,
+    onAnimationEnd: handleAnimationEnd,
+    children: [jsx(StyledIconContainer, {
+      "aria-hidden": "true",
+      children: jsx(Icon, {
+        name: iconName,
+        size: "md",
+        iconColor: alertIconColor
+      })
+    }), jsxs(StyledContent, {
+      children: [title && jsx(StyledTitle, {
+        role: "heading",
+        "aria-level": 6,
+        color: alertTitleColor,
+        children: title
+      }), jsx(StyledMessage, {
+        children: children
+      }), action && jsx(StyledActions, {
+        children: action
+      })]
+    }), dismissible && jsx(StyledDismissSlot, {
+      "$lineHeight": title ? alert.title.lineHeight : alert.message.lineHeight,
+      children: jsx(StyledDismissButton, {
+        iconName: "close",
+        size: "small",
+        variant: "naked",
+        "$inline": inline,
+        onClick: handleDismiss,
+        "aria-label": "Dismiss alert",
+        "data-testid": dataTestId ? "".concat(dataTestId, "-dismiss") : undefined
+      })
+    })]
+  }));
+};
+Alert.displayName = 'Alert';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+
+export { Alert };
+//# sourceMappingURL=Alert.mjs.map

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

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

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+interface Breadcrumb {
+    label: string;
+    url: string;
+}
+interface BreadcrumbsProps {
+    breadcrumbs: Breadcrumb[];
+    'data-testid'?: string;
+    /**
+     * Custom link component (e.g., Next.js Link)
+     * @example linkComponent={NextLink}
+     */
+    linkComponent?: React.ComponentType<any>;
+}
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export {};