@common-origin/design-system 2.19.0 → 2.20.0

package/dist/components/atoms/MoneyDisplay/MoneyDisplay.mjs

@@ -0,0 +1,126 @@
+'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 { Typography } from '../Typography/Typography.mjs';
+import { Icon } from '../Icon/Icon.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+var StyledWrapper = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "MoneyDisplay__StyledWrapper",
+  componentId: "sc-1mddej3-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  text-align: ", ";\n  font-weight: ", ";\n"
+// Map size to Typography variant
+])), function (_a) {
+  var $align = _a.$align;
+  return $align;
+}, function (_a) {
+  var $weight = _a.$weight;
+  return tokens.semantic.fontWeight[$weight];
+});
+// Map size to Typography variant
+var sizeToTypographyVariant = {
+  small: 'caption',
+  medium: 'body',
+  large: 'h3',
+  xlarge: 'h2'
+};
+// Map size to Icon size for consistent visual alignment
+var sizeToIconSize = {
+  small: 'xs',
+  medium: 'sm',
+  large: 'md',
+  xlarge: 'lg'
+};
+/**
+ * Generates aria-label with spelled out amount
+ */
+var generateAriaLabel = function generateAriaLabel(amount, currency, locale) {
+  var _a, _b;
+  var formatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+  // Get parts to spell out the amount
+  var parts = formatter.formatToParts(Math.abs(amount));
+  var integerPart = ((_a = parts.find(function (p) {
+    return p.type === 'integer';
+  })) === null || _a === void 0 ? void 0 : _a.value) || '0';
+  var fractionPart = ((_b = parts.find(function (p) {
+    return p.type === 'fraction';
+  })) === null || _b === void 0 ? void 0 : _b.value) || '00';
+  var sign = amount < 0 ? 'negative ' : '';
+  return "".concat(sign).concat(integerPart, " dollars and ").concat(fractionPart, " cents");
+};
+var MoneyDisplay = function MoneyDisplay(_a) {
+  var amount = _a.amount,
+    _b = _a.currency,
+    currency = _b === void 0 ? 'AUD' : _b,
+    _c = _a.variant,
+    variant = _c === void 0 ? 'default' : _c,
+    _d = _a.showSign,
+    showSign = _d === void 0 ? false : _d,
+    _e = _a.size,
+    size = _e === void 0 ? 'medium' : _e,
+    _f = _a.weight,
+    weight = _f === void 0 ? 'regular' : _f,
+    _g = _a.locale,
+    locale = _g === void 0 ? 'en-AU' : _g,
+    _h = _a.align,
+    align = _h === void 0 ? 'left' : _h,
+    dataTestId = _a["data-testid"];
+  // Format the number with Intl.NumberFormat
+  var formatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+  var formattedAmount = formatter.format(Math.abs(amount));
+  // Determine if we need to show a sign icon
+  var showPositiveIcon = showSign && amount > 0 || variant === 'positive';
+  var showNegativeIcon = amount < 0 || variant === 'negative';
+  // Generate accessibility label
+  var ariaLabel = generateAriaLabel(amount, currency, locale);
+  // Get typography variant and icon size
+  var typographyVariant = sizeToTypographyVariant[size];
+  var iconSize = sizeToIconSize[size];
+  // Determine icon color based on variant
+  var iconColor = variant === 'positive' || showPositiveIcon ? 'success' : variant === 'negative' || showNegativeIcon ? 'error' : variant === 'neutral' ? 'subdued' : 'default';
+  // Amount always uses default color (except neutral which stays subdued)
+  var amountColor = variant === 'neutral' ? 'subdued' : 'default';
+  return jsxs(StyledWrapper, {
+    "$align": align,
+    "$weight": weight,
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId,
+    children: [showPositiveIcon && !showNegativeIcon &&
+    // The amount is shown without a sign, so the icon is the sign and needs a name (#85)
+    jsx(Icon, {
+      name: "addRing",
+      size: iconSize,
+      iconColor: iconColor,
+      "aria-label": "Plus"
+    }), showNegativeIcon && jsx(Icon, {
+      name: "remove",
+      size: iconSize,
+      iconColor: iconColor,
+      "aria-label": "Minus"
+    }), jsx(Typography, {
+      variant: typographyVariant,
+      color: amountColor,
+      as: "span",
+      children: formattedAmount
+    })]
+  });
+};
+var templateObject_1;
+
+export { MoneyDisplay };
+//# sourceMappingURL=MoneyDisplay.mjs.map

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

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

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

@@ -0,0 +1,2 @@
+export { MoneyDisplay } from './MoneyDisplay.mjs';
+export type { MoneyDisplayProps, MoneyDisplayVariant, MoneyDisplaySize, MoneyDisplayWeight, MoneyDisplayAlign } from './MoneyDisplay.mjs';

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

@@ -0,0 +1,12 @@
+import React from 'react';
+type PictureProps = {
+    title: string;
+    src: string;
+    width?: number;
+    height?: number;
+    onClick?: () => void;
+    href?: string;
+    'data-testid'?: string;
+};
+export declare const Picture: React.FC<PictureProps>;
+export {};

package/dist/components/atoms/Picture/Picture.mjs

@@ -0,0 +1,65 @@
+'use client';
+import { __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 { media } from '../../../lib/styleUtils.mjs';
+
+var PictureWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Picture__PictureWrapper",
+  componentId: "sc-11d9tei-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"
+// A clickable image answers input on the image itself (decision 0029, #185): it fades on hover and
+// one step further while pressed, and draws the system focus ring around the image, following its
+// rounded corners. Fading isn't movement, so it stays under reduced motion.
+])), media.sm);
+// A clickable image answers input on the image itself (decision 0029, #185): it fades on hover and
+// one step further while pressed, and draws the system focus ring around the image, following its
+// rounded corners. Fading isn't movement, so it stays under reduced motion.
+var clickableImage = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n\n  img {\n    transition: ", ";\n  }\n\n  &:hover img {\n    opacity: ", ";\n  }\n\n  &:active img {\n    opacity: ", ";\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible img {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), tokens.semantic.motion.transition.press, tokens.semantic.opacity.hover, tokens.semantic.opacity.pressed, tokens.semantic.border.focus, tokens.semantic.border.focusOffset);
+var ImageLink = /*#__PURE__*/styled.a.withConfig({
+  displayName: "Picture__ImageLink",
+  componentId: "sc-11d9tei-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), clickableImage);
+var ImageButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "Picture__ImageButton",
+  componentId: "sc-11d9tei-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  width: 100%;\n  ", "\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  width: 100%;\n  ", "\n"])), clickableImage);
+var StyledImage = /*#__PURE__*/styled.img.withConfig({
+  displayName: "Picture__StyledImage",
+  componentId: "sc-11d9tei-3"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), tokens.semantic.radius.sm);
+var Picture = function Picture(_a) {
+  var title = _a.title,
+    src = _a.src,
+    _b = _a.width,
+    width = _b === void 0 ? 1300 : _b,
+    _c = _a.height,
+    height = _c === void 0 ? 630 : _c,
+    onClick = _a.onClick,
+    href = _a.href,
+    dataTestId = _a["data-testid"];
+  var image = jsx(StyledImage, {
+    src: src,
+    alt: title,
+    width: width,
+    height: height
+  });
+  return jsx(PictureWrapper, {
+    "data-testid": dataTestId,
+    children: href ? jsx(ImageLink, {
+      href: href,
+      "aria-label": "Read more about ".concat(title),
+      children: image
+    }) : onClick ? jsx(ImageButton, {
+      onClick: onClick,
+      "aria-label": "Read more about ".concat(title),
+      children: image
+    }) : image
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { Picture };
+//# sourceMappingURL=Picture.mjs.map

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

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

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

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface ProgressBarProps {
+    /** Progress value from 0 to 100 */
+    value: number;
+    /** Orientation of the progress bar */
+    variant?: 'horizontal' | 'vertical';
+    /** Fill colour: `default` is near-black (`background.emphasis`); `success` and `error` use their status colours */
+    color?: 'success' | 'error' | 'default';
+    /** Height size for horizontal progress bar (default: md) */
+    height?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Width size for vertical progress bar (default: md) */
+    width?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Accessible name, e.g. "Upload progress". Provide this or aria-labelledby; falls back to "Progress" */
+    'aria-label'?: string;
+    /** ID of the visible element that names the progress bar */
+    'aria-labelledby'?: string;
+    /** Data attribute for testing */
+    'data-testid'?: string;
+}
+export declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

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