@common-origin/design-system 2.19.0 → 2.21.0

package/dist/components/atoms/ProgressBar/ProgressBar.mjs

@@ -0,0 +1,91 @@
+'use client';
+import { __assign, __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module, { css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { forcedColorsEdge, reducedMotion, forcedColors } from '../../../lib/styleUtils.mjs';
+
+// Destructure tokens
+var semantic = tokens.semantic;
+var _a = __assign(__assign({}, semantic), {
+    component: tokens.component
+  }),
+  color = _a.color,
+  motion = _a.motion,
+  radius = _a.radius,
+  component = _a.component;
+var ProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "ProgressBar__ProgressBarContainer",
+  componentId: "sc-1nco33q-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  /* Forced colours drop the track's fill, so the track gets an edge (decision 0038) */\n  ", "\n\n  ", "\n\n  ", "\n"])), tokens.component.track.background, radius.xs, forcedColorsEdge, function (props) {
+  return props.$variant === 'horizontal' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? component.progressBar.sizes[props.$height].height : component.progressBar.sizes.md.height);
+}, function (props) {
+  return props.$variant === 'vertical' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? component.progressBar.sizes[props.$width].height : component.progressBar.sizes.md.height);
+});
+var ProgressBarFill = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "ProgressBar__ProgressBarFill",
+  componentId: "sc-1nco33q-1"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: 100%;\n  transition: width ", " ", ",\n              height ", " ", ",\n              background-color ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n\n  /* The fill is the value, so it keeps a fill in forced colours, in the system selection colour (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  transition: width ", " ", ",\n              height ", " ", ",\n              background-color ", " ", ";\n\n  ", " {\n    transition: none;\n  }\n\n  /* The fill is the value, so it keeps a fill in forced colours, in the system selection colour (decision 0038) */\n  ", " {\n    forced-color-adjust: none;\n    background-color: Highlight;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), motion.duration.moderate, motion.easing.standard, motion.duration.moderate, motion.easing.standard, motion.duration.moderate, motion.easing.standard, reducedMotion, forcedColors, function (props) {
+  var backgroundColor;
+  switch (props.$color) {
+    case 'success':
+      backgroundColor = color.fill.success;
+      break;
+    case 'error':
+      backgroundColor = color.fill.danger;
+      break;
+    case 'default':
+    default:
+      // Near-black, like Slider's fill (decision 0029)
+      backgroundColor = color.fill.emphasis;
+      break;
+  }
+  return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
+}, function (props) {
+  return props.$variant === 'horizontal' && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
+}, function (props) {
+  return props.$variant === 'vertical' && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: 100%;\n    height: ", "%;\n  "], ["\n    width: 100%;\n    height: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
+});
+var ProgressBar = function ProgressBar(_a) {
+  var value = _a.value,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'horizontal' : _b,
+    _c = _a.color,
+    color = _c === void 0 ? 'default' : _c,
+    height = _a.height,
+    width = _a.width,
+    ariaLabel = _a["aria-label"],
+    ariaLabelledBy = _a["aria-labelledby"],
+    dataTestId = _a["data-testid"];
+  // Blank values are no name at all, so they fall back like missing ones
+  var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
+  var labelledBy = (ariaLabelledBy === null || ariaLabelledBy === void 0 ? void 0 : ariaLabelledBy.trim()) ? ariaLabelledBy : undefined;
+  return jsx(ProgressBarContainer, {
+    "$variant": variant,
+    "$height": height,
+    "$width": width,
+    "data-testid": dataTestId,
+    role: "progressbar",
+    "aria-label": label !== null && label !== void 0 ? label : labelledBy ? undefined : 'Progress',
+    "aria-labelledby": labelledBy,
+    "aria-valuenow": Math.min(100, Math.max(0, value)),
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    children: jsx(ProgressBarFill, {
+      "$value": value,
+      "$variant": variant,
+      "$color": color
+    })
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { ProgressBar, ProgressBar as default };
+//# sourceMappingURL=ProgressBar.mjs.map

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

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

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

@@ -0,0 +1,2 @@
+export { ProgressBar } from './ProgressBar.mjs';
+export type { ProgressBarProps } from './ProgressBar.mjs';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export type StackDirection = 'column' | 'row';
+export type StackAlign = 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline';
+export type StackJustify = 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+export type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export interface StackProps {
+    children: React.ReactNode;
+    direction?: StackDirection;
+    alignItems?: StackAlign;
+    justifyContent?: StackJustify;
+    gap?: StackGap;
+    wrap?: boolean;
+    'data-testid'?: string;
+}
+export declare const Stack: React.FC<StackProps>;
+export default Stack;

package/dist/components/atoms/Stack/Stack.mjs

@@ -0,0 +1,71 @@
+'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';
+
+var StyledStack = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Stack__StyledStack",
+  componentId: "sc-1ehkxgy-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
+// Each gap name maps to the space step that replaced its old spacing.layout token (decision 0031),
+// so every gap keeps its value
+])));
+// Each gap name maps to the space step that replaced its old spacing.layout token (decision 0031),
+// so every gap keeps its value
+var GAP_SPACE = {
+  none: '0',
+  xs: '100',
+  sm: '200',
+  md: '300',
+  lg: '400',
+  xl: '500',
+  '2xl': '600',
+  '3xl': '700',
+  '4xl': '800',
+  '5xl': '900',
+  '6xl': '1000'
+};
+// Helper function to convert gap prop to CSS value
+var getGapValue = function getGapValue(gap) {
+  var step = GAP_SPACE[gap];
+  if (step) {
+    return tokens.semantic.space[step];
+  }
+  // Fallback to medium spacing for an unknown gap (from untyped JavaScript)
+  return tokens.semantic.space[300];
+};
+var Stack = function Stack(_a) {
+  var children = _a.children,
+    _b = _a.direction,
+    direction = _b === void 0 ? 'row' : _b,
+    _c = _a.gap,
+    gap = _c === void 0 ? 'md' : _c,
+    alignItems = _a.alignItems,
+    justifyContent = _a.justifyContent,
+    _d = _a.wrap,
+    wrap = _d === void 0 ? false : _d,
+    dataTestId = _a["data-testid"];
+  var gapValue = getGapValue(gap);
+  // Create CSS custom properties object with proper typing
+  var cssProps = {
+    '--stack-direction': direction,
+    '--stack-align-items': alignItems || 'initial',
+    '--stack-justify-content': justifyContent || 'initial',
+    '--stack-gap': gapValue,
+    '--stack-wrap': wrap ? 'wrap' : 'nowrap'
+  };
+  return jsx(StyledStack, {
+    style: cssProps,
+    "data-testid": dataTestId,
+    children: children
+  });
+};
+var templateObject_1;
+
+export { Stack, Stack as default };
+//# sourceMappingURL=Stack.mjs.map

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

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

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

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

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type StatusLabelProps } from '../StatusLabel/StatusLabelBase.mjs';
+export type { StatusType, StatusSize } from '../StatusLabel/StatusLabelBase.mjs';
+/**
+ * Props for the StatusBadge component
+ * @deprecated Use `StatusLabelProps`. StatusBadge is renamed StatusLabel and is removed in 3.0
+ * (decision 0018).
+ */
+export interface StatusBadgeProps extends StatusLabelProps {
+    /**
+     * Whether to show the icon
+     * @default true
+     * @deprecated StatusLabel always shows the icon, so status is never conveyed by colour alone.
+     */
+    showIcon?: boolean;
+}
+/**
+ * StatusBadge displays a transaction or task status.
+ *
+ * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
+ * shows the icon. StatusBadge is removed in 3.0 (decision 0018).
+ */
+export declare const StatusBadge: React.FC<StatusBadgeProps>;

package/dist/components/atoms/StatusBadge/StatusBadge.mjs

@@ -0,0 +1,18 @@
+'use client';
+import { __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { StatusLabelBase } from '../StatusLabel/StatusLabelBase.mjs';
+
+/**
+ * StatusBadge displays a transaction or task status.
+ *
+ * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
+ * shows the icon. StatusBadge is removed in 3.0 (decision 0018).
+ */
+var StatusBadge = function StatusBadge(props) {
+  return jsx(StatusLabelBase, __assign({}, props));
+};
+StatusBadge.displayName = 'StatusBadge';
+
+export { StatusBadge };
+//# sourceMappingURL=StatusBadge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.mjs","sources":["../../../../src/components/atoms/StatusBadge/StatusBadge.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from '../StatusLabel/StatusLabelBase'\n\nexport type { StatusType, StatusSize } from '../StatusLabel/StatusLabelBase'\n\n/**\n * Props for the StatusBadge component\n * @deprecated Use `StatusLabelProps`. StatusBadge is renamed StatusLabel and is removed in 3.0\n * (decision 0018).\n */\nexport interface StatusBadgeProps extends StatusLabelProps {\n  /**\n   * Whether to show the icon\n   * @default true\n   * @deprecated StatusLabel always shows the icon, so status is never conveyed by colour alone.\n   */\n  showIcon?: boolean\n}\n\n/**\n * StatusBadge displays a transaction or task status.\n *\n * @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always\n * shows the icon. StatusBadge is removed in 3.0 (decision 0018).\n */\nexport const StatusBadge: React.FC<StatusBadgeProps> = (props) => <StatusLabelBase {...props} />\n\nStatusBadge.displayName = 'StatusBadge'\n"],"names":["StatusBadge","props","_jsx","StatusLabelBase","__assign","displayName"],"mappings":";;;;;AAmBA;;;;;AAKG;IACUA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAA;EAAK,OAAAC,GAAA,CAACC,eAAe,EAAKC,QAAA,CAAA,EAAA,EAAAH,KAAK,CAAI,CAAA,CAAA;AAA9B,EAA8B;AAEhGD,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}

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

@@ -0,0 +1,2 @@
+export { StatusBadge } from './StatusBadge.mjs';
+export type { StatusBadgeProps } from './StatusBadge.mjs';

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type StatusLabelProps } from './StatusLabelBase.mjs';
+export type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase.mjs';
+/**
+ * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).
+ *
+ * Uses only the status colour tokens and always shows an icon with its text, so status is never
+ * conveyed by colour alone. Not interactive. Announces changes politely to screen readers.
+ *
+ * @example
+ * ```tsx
+ * <StatusLabel status="completed" />
+ *
+ * <StatusLabel status="pending" label="Awaiting approval" size="small" />
+ * ```
+ */
+export declare const StatusLabel: React.FC<StatusLabelProps>;

package/dist/components/atoms/StatusLabel/StatusLabel.mjs

@@ -0,0 +1,28 @@
+'use client';
+import { __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { StatusLabelBase } from './StatusLabelBase.mjs';
+
+/**
+ * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).
+ *
+ * Uses only the status colour tokens and always shows an icon with its text, so status is never
+ * conveyed by colour alone. Not interactive. Announces changes politely to screen readers.
+ *
+ * @example
+ * ```tsx
+ * <StatusLabel status="completed" />
+ *
+ * <StatusLabel status="pending" label="Awaiting approval" size="small" />
+ * ```
+ */
+// showIcon comes last so no caller (for example plain JavaScript) can hide the icon
+var StatusLabel = function StatusLabel(props) {
+  return jsx(StatusLabelBase, __assign({}, props, {
+    showIcon: true
+  }));
+};
+StatusLabel.displayName = 'StatusLabel';
+
+export { StatusLabel };
+//# sourceMappingURL=StatusLabel.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusLabel.mjs","sources":["../../../../src/components/atoms/StatusLabel/StatusLabel.tsx"],"sourcesContent":["import React from 'react'\nimport { StatusLabelBase, type StatusLabelProps } from './StatusLabelBase'\n\nexport type { StatusLabelProps, StatusType, StatusSize } from './StatusLabelBase'\n\n/**\n * StatusLabel conveys the status of something, such as a transaction or task (decision 0018).\n *\n * Uses only the status colour tokens and always shows an icon with its text, so status is never\n * conveyed by colour alone. Not interactive. Announces changes politely to screen readers.\n *\n * @example\n * ```tsx\n * <StatusLabel status=\"completed\" />\n *\n * <StatusLabel status=\"pending\" label=\"Awaiting approval\" size=\"small\" />\n * ```\n */\n// showIcon comes last so no caller (for example plain JavaScript) can hide the icon\nexport const StatusLabel: React.FC<StatusLabelProps> = (props) => <StatusLabelBase {...props} showIcon />\n\nStatusLabel.displayName = 'StatusLabel'\n"],"names":["StatusLabel","props","_jsx","StatusLabelBase","showIcon","displayName"],"mappings":";;;;;AAKA;;;;;;;;;;;;AAYG;AACH;IACaA,WAAW,GAA+B,SAA1CA,WAAWA,CAAgCC,KAAK,EAAK;EAAA,OAAAC,GAAC,CAAAC,eAAe,eAAKF,KAAK,EAAA;AAAEG,IAAAA,QAAQ,EAAG,IAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAvC,EAAuC;AAEzGJ,WAAW,CAACK,WAAW,GAAG,aAAa;;;;"}

package/dist/components/atoms/StatusLabel/StatusLabelBase.d.mts

@@ -0,0 +1,49 @@
+import React from 'react';
+/**
+ * Status type options for StatusLabel
+ */
+export type StatusType = 'pending' | 'completed' | 'failed' | 'cancelled' | 'processing' | 'scheduled';
+/**
+ * Size options for StatusLabel
+ */
+export type StatusSize = 'small' | 'medium';
+/**
+ * Props shared by StatusLabel and the deprecated StatusBadge
+ */
+export interface StatusLabelProps {
+    /**
+     * The status type to display
+     */
+    status: StatusType;
+    /**
+     * Optional custom label (defaults to status name)
+     */
+    label?: string;
+    /**
+     * Size: small (20px) or medium (24px)
+     * @default 'medium'
+     */
+    size?: StatusSize;
+    /**
+     * Whether status changes should be announced to screen readers
+     * @default true
+     */
+    liveRegion?: boolean;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Accessible label override. Used as the status's name and announced instead of the visible
+     * text and icon (#78).
+     */
+    'aria-label'?: string;
+}
+/**
+ * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
+ * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
+ * (decision 0018).
+ */
+export declare const StatusLabelBase: React.FC<StatusLabelProps & {
+    showIcon?: boolean;
+}>;

package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs

@@ -0,0 +1,161 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled$module, { keyframes } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Icon } from '../Icon/Icon.mjs';
+import { reducedMotion, forcedColorsEdge, visuallyHidden } from '../../../lib/styleUtils.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+// Destructure tokens for cleaner access
+var statusColors = tokens.component.status;
+var _a = tokens.semantic,
+  space = _a.space,
+  radius = _a.radius;
+var _b = tokens.semantic.motion,
+  transition = _b.transition,
+  duration = _b.duration,
+  easing = _b.easing;
+var labelHeight = tokens.semantic.size.label;
+var label = tokens.component.badge.label;
+var scaleIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
+var getStatusConfig = function getStatusConfig(status) {
+  var configs = {
+    pending: {
+      color: statusColors.pending.text,
+      bgColor: statusColors.pending.background,
+      icon: 'refresh',
+      // Fallback until 'clock' icon is added
+      label: 'Pending'
+    },
+    completed: {
+      color: statusColors.completed.text,
+      bgColor: statusColors.completed.background,
+      icon: 'check',
+      label: 'Completed'
+    },
+    failed: {
+      color: statusColors.failed.text,
+      bgColor: statusColors.failed.background,
+      icon: 'close',
+      label: 'Failed'
+    },
+    cancelled: {
+      color: statusColors.cancelled.text,
+      bgColor: statusColors.cancelled.background,
+      icon: 'cancel',
+      label: 'Cancelled'
+    },
+    processing: {
+      color: statusColors.processing.text,
+      bgColor: statusColors.processing.background,
+      icon: 'refresh',
+      label: 'Processing'
+    },
+    scheduled: {
+      color: statusColors.scheduled.text,
+      bgColor: statusColors.scheduled.background,
+      icon: 'bell',
+      // Fallback until 'calendar' icon is added
+      label: 'Scheduled'
+    }
+  };
+  return configs[status];
+};
+// Size configuration
+var sizeConfig = {
+  small: {
+    height: labelHeight.small,
+    padding: "".concat(space[100], " ").concat(space[200]),
+    font: label.typography.small,
+    gap: space[100],
+    iconSize: 'xs'
+  },
+  medium: {
+    height: labelHeight.medium,
+    padding: "".concat(space[100], " ").concat(space[200]),
+    font: label.typography.medium,
+    gap: space[100],
+    iconSize: 'sm'
+  }
+};
+var StyledStatusLabel = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "StatusLabelBase__StyledStatusLabel",
+  componentId: "sc-1ye9xz5-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"], ["\n  box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  white-space: nowrap;\n  user-select: none;\n  animation: ", " ", " ", ";\n  transition: ", ";\n\n  /* Under reduced motion the label appears without scaling in, and colours change at once */\n  ", " {\n    animation: none;\n    transition: none;\n  }\n\n  /* Forced colours drop the fill, so the label keeps its shape with an edge (decision 0038) */\n  ", "\n  \n  /* Size styles */\n  ", "\n  \n  /* Status color styles */\n  ", "\n"])), radius.full, scaleIn, duration.moderate, easing.decelerate, transition.feedback, reducedMotion, forcedColorsEdge, function (_a) {
+  var $size = _a.$size;
+  var size = sizeConfig[$size];
+  return "\n      height: ".concat(size.height, ";\n      padding: ").concat(size.padding, ";\n      font: ").concat(size.font, ";\n      font-weight: ").concat(label.fontWeight, ";\n      gap: ").concat(size.gap, ";\n    ");
+}, function (_a) {
+  var $status = _a.$status;
+  var config = getStatusConfig($status);
+  return "\n      background-color: ".concat(config.bgColor, ";\n      color: ").concat(config.color, ";\n    ");
+});
+var ScreenReaderOnly = /*#__PURE__*/styled.span.withConfig({
+  displayName: "StatusLabelBase__ScreenReaderOnly",
+  componentId: "sc-1ye9xz5-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"
+// The visible content, hidden from assistive technology when an aria-label replaces it.
+// display: contents keeps the root's flex layout and gap.
+])), visuallyHidden);
+// The visible content, hidden from assistive technology when an aria-label replaces it.
+// display: contents keeps the root's flex layout and gap.
+var VisibleContent = /*#__PURE__*/styled.span.withConfig({
+  displayName: "StatusLabelBase__VisibleContent",
+  componentId: "sc-1ye9xz5-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: contents;\n"], ["\n  display: contents;\n"
+/**
+ * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
+ * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
+ * (decision 0018).
+ */])));
+/**
+ * Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
+ * from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
+ * (decision 0018).
+ */
+var StatusLabelBase = function StatusLabelBase(_a) {
+  var status = _a.status,
+    label = _a.label,
+    _b = _a.size,
+    size = _b === void 0 ? 'medium' : _b,
+    _c = _a.showIcon,
+    showIcon = _c === void 0 ? true : _c,
+    _d = _a.liveRegion,
+    liveRegion = _d === void 0 ? true : _d,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"];
+  var statusConfig = getStatusConfig(status);
+  var sizeStyles = sizeConfig[size];
+  var displayLabel = label || statusConfig.label;
+  // A blank aria-label is no label at all, so it falls back like a missing one
+  var accessibleLabel = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
+  return jsxs(StyledStatusLabel, {
+    "$status": status,
+    "$size": size,
+    role: "status",
+    "aria-label": accessibleLabel || "Status: ".concat(displayLabel),
+    "aria-live": liveRegion ? 'polite' : 'off',
+    "aria-atomic": liveRegion ? 'true' : undefined,
+    "data-testid": dataTestId,
+    children: [jsxs(VisibleContent, {
+      "aria-hidden": accessibleLabel ? 'true' : undefined,
+      children: [showIcon && jsx(Icon, {
+        name: statusConfig.icon,
+        size: sizeStyles.iconSize,
+        iconColor: "inherit"
+      }), displayLabel, jsxs(ScreenReaderOnly, {
+        children: [status, " status"]
+      })]
+    }), accessibleLabel && jsx(ScreenReaderOnly, {
+      children: accessibleLabel
+    })]
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { StatusLabelBase };
+//# sourceMappingURL=StatusLabelBase.mjs.map

package/dist/components/atoms/StatusLabel/StatusLabelBase.mjs.map

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

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

@@ -0,0 +1,2 @@
+export { StatusLabel } from './StatusLabel.mjs';
+export type { StatusLabelProps, StatusType, StatusSize } from './StatusLabel.mjs';

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

@@ -0,0 +1,36 @@
+import React from 'react';
+export interface TagProps {
+    /**
+     * Text content to display in the tag
+     */
+    children: React.ReactNode;
+    /**
+     * Visual variant. Tag is neutral metadata: use `default`, or `emphasis` (near-black) to make a
+     * tag stand out. `success`, `warning` and `error` are deprecated (status belongs to
+     * `StatusLabel`), and so is `interactive` (a blue fill on a static label is decoration).
+     * They keep working until they are removed in 3.0 (decision 0029).
+     * @default 'default'
+     */
+    variant?: 'default' | 'interactive' | 'success' | 'warning' | 'error' | 'emphasis';
+    /**
+     * Whether to show a border
+     * @default true
+     */
+    border?: boolean;
+    /**
+     * Size: small (20px) for dense layouts, or medium (24px). Decision 0018 size scale.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * Tag component for categorizing and labeling content
+ *
+ * A static, non-interactive label used to categorize elements or objects in the UI.
+ * Tags help users quickly identify and understand content classification.
+ */
+export declare const Tag: React.FC<TagProps>;