@common-origin/design-system 2.19.0 → 2.21.0

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

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

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

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { type IconName } from '../../../types/icons.mjs';
+export type { IconName };
+export interface IconProps {
+    name: IconName;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    iconColor?: 'default' | 'emphasis' | 'subdued' | 'disabled' | 'inverse' | 'interactive' | 'error' | 'success' | 'warning' | 'inherit';
+    /**
+     * Makes the icon meaningful: it's announced as an image with this name. Without `aria-label`
+     * or `title`, the icon is decorative and hidden from assistive technology (#85). Use a
+     * human-readable name, never the internal icon name; `icons.json`'s `ariaLabelDefault` is a
+     * starting point.
+     */
+    'aria-label'?: string;
+    /**
+     * Like `aria-label`, and also shown as a tooltip. `aria-label` wins if both are given.
+     */
+    title?: string;
+    'data-testid'?: string;
+}
+export declare const Icon: FC<IconProps>;
+export default Icon;

package/dist/components/atoms/Icon/Icon.mjs

@@ -0,0 +1,95 @@
+'use client';
+import { __makeTemplateObject, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import iconsJson from '../../../styles/icons.json.mjs';
+
+var IconStyled = /*#__PURE__*/styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Icon__IconStyled",
+  componentId: "sc-1105czq-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
+  var $size = _a.$size;
+  return tokens.semantic.size.icon[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return tokens.semantic.size.icon[$size];
+}, function (_a) {
+  var $iconColor = _a.$iconColor;
+  switch ($iconColor) {
+    case 'default':
+      return tokens.semantic.color.icon["default"];
+    case 'emphasis':
+      return tokens.semantic.color.icon.emphasis;
+    case 'subdued':
+      return tokens.semantic.color.icon.muted;
+    case 'disabled':
+      return tokens.semantic.color.icon.disabled;
+    case 'inverse':
+      return tokens.semantic.color.icon.inverse;
+    case 'interactive':
+      return tokens.semantic.color.icon.accent;
+    case 'error':
+      return tokens.semantic.color.icon.danger;
+    case 'success':
+      return tokens.semantic.color.icon.success;
+    case 'warning':
+      return tokens.semantic.color.icon.warning;
+    case 'inherit':
+      return 'currentColor';
+    default:
+      return tokens.semantic.color.icon["default"];
+  }
+});
+var Icon = function Icon(_a) {
+  var name = _a.name,
+    _b = _a.size,
+    size = _b === void 0 ? 'lg' : _b,
+    _c = _a.iconColor,
+    iconColor = _c === void 0 ? 'default' : _c,
+    ariaLabel = _a["aria-label"],
+    title = _a.title,
+    dataTestId = _a["data-testid"];
+  // Decorative unless it's given a name. A blank name is no name, so the icon stays hidden
+  var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) || (title === null || title === void 0 ? void 0 : title.trim()) || undefined;
+  // Get the icon data from the JSON file
+  var iconData = iconsJson[name];
+  if (!iconData) {
+    console.warn("Icon \"".concat(name, "\" not found in icons.json"));
+    return jsx(IconStyled, {
+      "$size": size,
+      "$iconColor": iconColor,
+      "data-testid": dataTestId
+    });
+  }
+  return jsx(IconStyled, {
+    "$size": size,
+    "$iconColor": iconColor,
+    "data-testid": dataTestId,
+    children: jsxs("svg", __assign({
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, label ? {
+      role: 'img',
+      'aria-label': label
+    } : {
+      'aria-hidden': true,
+      focusable: false
+    }, {
+      children: [(title === null || title === void 0 ? void 0 : title.trim()) && jsx("title", {
+        children: title
+      }), jsx("path", {
+        d: iconData.path
+      })]
+    }))
+  });
+};
+var templateObject_1;
+
+export { Icon, Icon as default };
+//# sourceMappingURL=Icon.mjs.map

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

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

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type IconName } from '../Icon/index.mjs';
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant: 'primary' | 'secondary' | 'naked';
+    size?: 'small' | 'medium' | 'large';
+    iconName: IconName;
+    url?: string;
+    'aria-label': string;
+    'aria-describedby'?: string;
+    'aria-expanded'?: boolean;
+    'aria-pressed'?: boolean;
+    'data-testid'?: string;
+}
+export declare const IconButton: React.FC<IconButtonProps>;

package/dist/components/atoms/IconButton/IconButton.mjs

@@ -0,0 +1,150 @@
+'use client';
+import { __makeTemplateObject, __rest, __assign } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Icon } from '../Icon/Icon.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+import { forcedColorsEdge } from '../../../lib/styleUtils.mjs';
+
+var _a = tokens.semantic,
+  motion = _a.motion,
+  border = _a.border,
+  space = _a.space,
+  size = _a.size,
+  _b = tokens.component,
+  iconButton = _b.iconButton,
+  button = _b.button;
+// Height and width come from size.control as a minimum (decision 0034)
+var control = {
+  small: size.control.sm,
+  medium: size.control.md,
+  large: size.control.lg
+};
+// Padding comes from the semantic spacing scale: no component spacing tokens (decision 0022)
+var padding = {
+  small: space.inset.xs,
+  medium: space.inset.sm,
+  large: space.inset.md
+};
+// Colours and motion come from Button's tokens, so IconButton's variants look and behave exactly like
+// Button's in every state (#130). Only the size and the icon differ
+var variants = {
+  primary: {
+    bg: button.primary.backgroundColor,
+    text: button.primary.textColor,
+    hoverBg: button.hover.backgroundColor,
+    activeBg: button.active.backgroundColor,
+    disabledBg: button.disabled.backgroundColor,
+    disabledText: button.disabled.textColor
+  },
+  secondary: {
+    bg: button.variants.secondary.backgroundColor,
+    text: button.variants.secondary.textColor,
+    hoverBg: button.variants.secondary.hover.backgroundColor,
+    activeBg: button.variants.secondary.active.backgroundColor,
+    disabledBg: button.variants.secondary.disabled.backgroundColor,
+    disabledText: button.variants.secondary.disabled.textColor
+  },
+  naked: {
+    bg: button.variants.naked.backgroundColor,
+    text: button.variants.naked.textColor,
+    hoverBg: button.variants.naked.hover.backgroundColor,
+    activeBg: button.variants.naked.active.backgroundColor,
+    disabledBg: button.variants.naked.disabled.backgroundColor,
+    disabledText: button.variants.naked.disabled.textColor
+  }
+};
+// JavaScript callers can pass any string, so an unknown variant falls back to primary, as before
+var colours = function colours(variant) {
+  var _a;
+  return (_a = variants[variant]) !== null && _a !== void 0 ? _a : variants.primary;
+};
+var IconButtonStyled = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "IconButton__IconButtonStyled",
+  componentId: "sc-k8b14t-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), function (_a) {
+  var $variant = _a.$variant;
+  return colours($variant).bg;
+}, function (_a) {
+  var $variant = _a.$variant;
+  return colours($variant).text;
+}, iconButton.primary.borderRadius, motion.transition.feedback, function (_a) {
+  var $size = _a.$size;
+  return control[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return control[$size];
+}, function (_a) {
+  var $size = _a.$size;
+  return padding[$size];
+}, function (_a) {
+  var $variant = _a.$variant;
+  return colours($variant).hoverBg;
+}, function (_a) {
+  var $variant = _a.$variant;
+  return colours($variant).activeBg;
+}, iconButton.focus.outline, border.focusOffset, function (_a) {
+  var $variant = _a.$variant;
+  return colours($variant).disabledBg;
+}, function (_a) {
+  var $variant = _a.$variant;
+  return colours($variant).disabledText;
+}, forcedColorsEdge);
+var IconButton = function IconButton(_a) {
+  var variant = _a.variant,
+    _b = _a.size,
+    size = _b === void 0 ? 'medium' : _b,
+    url = _a.url,
+    _c = _a.iconName,
+    iconName = _c === void 0 ? 'close' : _c,
+    onClick = _a.onClick,
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"],
+    ariaExpanded = _a["aria-expanded"],
+    ariaPressed = _a["aria-pressed"],
+    dataTestId = _a["data-testid"],
+    disabled = _a.disabled,
+    _d = _a.type,
+    type = _d === void 0 ? 'button' : _d,
+    htmlProps = __rest(_a, ["variant", "size", "url", "iconName", "onClick", 'aria-label', 'aria-describedby', 'aria-expanded', 'aria-pressed', 'data-testid', "disabled", "type"]);
+  var handleClick = function handleClick(event) {
+    if (onClick) {
+      onClick(event);
+    } else if (url && url.trim() !== '') {
+      // Use proper navigation instead of direct href assignment
+      if (url.startsWith('http') || url.startsWith('//')) {
+        window.open(url, '_blank', 'noopener,noreferrer');
+      } else {
+        window.location.assign(url);
+      }
+    }
+  };
+  var iconSize = size === 'large' ? 'lg' : size === 'small' ? 'sm' : 'md';
+  return jsx(IconButtonStyled, __assign({
+    "$variant": variant,
+    "$size": size,
+    onClick: handleClick,
+    disabled: disabled,
+    type: type,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-pressed": ariaPressed,
+    "data-testid": dataTestId
+  }, htmlProps, {
+    children: jsx(Icon, {
+      name: iconName,
+      size: iconSize,
+      iconColor: "inherit",
+      "aria-hidden": "true" // Hide icon from screen readers since button has aria-label
+    })
+  }));
+};
+var templateObject_1;
+
+export { IconButton };
+//# sourceMappingURL=IconButton.mjs.map

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

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

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

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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+export type MoneyDisplayVariant = 'default' | 'positive' | 'negative' | 'neutral';
+export type MoneyDisplaySize = 'small' | 'medium' | 'large' | 'xlarge';
+export type MoneyDisplayWeight = 'regular' | 'medium' | 'bold';
+export type MoneyDisplayAlign = 'left' | 'center' | 'right';
+export interface MoneyDisplayProps {
+    /** The monetary amount to display */
+    amount: number;
+    /** Currency code (ISO 4217) */
+    currency?: string;
+    /** Visual variant affecting color and style */
+    variant?: MoneyDisplayVariant;
+    /** Show +/- sign prefix */
+    showSign?: boolean;
+    /** Size of the amount display */
+    size?: MoneyDisplaySize;
+    /** Font weight */
+    weight?: MoneyDisplayWeight;
+    /** Locale for number formatting */
+    locale?: string;
+    /** Align text */
+    align?: MoneyDisplayAlign;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+export declare const MoneyDisplay: React.FC<MoneyDisplayProps>;

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;