@common-origin/design-system 2.18.0 → 2.20.0

package/dist/components/molecules/Dropdown/Dropdown.mjs

@@ -0,0 +1,282 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useId, useEffect } from 'react';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { reducedMotion, interactiveRow } from '../../../lib/styleUtils.mjs';
+
+var _a = tokens.semantic,
+  border = _a.border,
+  elevation = _a.elevation,
+  motion = _a.motion,
+  space = _a.space,
+  _b = tokens.component,
+  input = _b.input,
+  field = _b.field;
+// Spacing comes from the semantic scales: no component spacing tokens (decision 0022).
+// The trigger and options take their height from size.control.lg as a minimum and centre
+// their content (decision 0034). The small vertical padding only matters when a long
+// label wraps; a single line is shorter than the minimum.
+var controlPaddingX = tokens.semantic.space.inset.lg;
+var controlPaddingY = space[200];
+var controlHeight = tokens.semantic.size.control.lg;
+var duration = motion.duration,
+  easing = motion.easing;
+var DropdownContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Dropdown__DropdownContainer",
+  componentId: "sc-kz07c4-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+var DropdownTrigger = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Dropdown__DropdownTrigger",
+  componentId: "sc-kz07c4-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color ", " ", ",\n              outline ", " ", ";\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: not-allowed;\n  }\n  \n  ", "\n"])), controlHeight, controlPaddingY, controlPaddingX, input["default"].backgroundColor, input["default"].borderWidth, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? input.error.borderColor : input["default"].borderColor;
+}, input["default"].borderRadius, input["default"].font, input["default"].textColor, duration.moderate, easing.standard, duration.moderate, easing.standard, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? input.error.hover.borderColor : input.hover.borderColor;
+}, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
+}, input.focus.outline, border.focusOffset, input.disabled.backgroundColor, input.disabled.textColor, input.disabled.borderColor, function (_a) {
+  var $isOpen = _a.$isOpen,
+    $hasError = _a.$hasError;
+  return $isOpen && "\n    border-color: ".concat($hasError ? input.error.focus.borderColor : input.focus.borderColor, ";\n  ");
+});
+var DropdownIcon = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Dropdown__DropdownIcon",
+  componentId: "sc-kz07c4-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform ", " ", ";\n  \n  ", "\n\n  ", " {\n    transition: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform ", " ", ";\n  \n  ", "\n\n  ", " {\n    transition: none;\n  }\n"])), space[200], duration.fast, easing.decelerate, function (_a) {
+  var $isOpen = _a.$isOpen;
+  return $isOpen && "\n    transform: rotate(180deg);\n  ";
+}, reducedMotion);
+var DropdownMenu = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Dropdown__DropdownMenu",
+  componentId: "sc-kz07c4-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: opacity ", " ", ",\n              visibility ", " ", ",\n              transform ", " ", ";\n  max-height: ", ";\n  overflow-y: auto;\n\n  ", " {\n    transform: none;\n  }\n"])), tokens.semantic.layer.dropdown, input["default"].backgroundColor, border.emphasis, input["default"].borderRadius, elevation.floating, space[100], function (_a) {
+  var $isOpen = _a.$isOpen;
+  return $isOpen ? 1 : 0;
+}, function (_a) {
+  var $isOpen = _a.$isOpen;
+  return $isOpen ? 'visible' : 'hidden';
+}, function (_a) {
+  var $isOpen = _a.$isOpen;
+  return $isOpen ? 'translateY(0)' : "translateY(calc(-1 * ".concat(tokens.semantic.motion.distance.sm, "))");
+}, duration.fast, easing.decelerate, duration.fast, easing.decelerate, duration.fast, easing.decelerate, tokens.semantic.size.menu.maxHeight, reducedMotion);
+var DropdownOption = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Dropdown__DropdownOption",
+  componentId: "sc-kz07c4-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ", color ", " ", ";\n\n  /* The shared row states (decisions 0029, 0030): focus shows the hover state in grey; only the\n     selected option is light blue, with its text darkening with the fill */\n  ", "\n  \n  &:focus {\n    outline: none;\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  box-sizing: border-box; /* the min-height includes the border, without relying on a global reset */\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ", color ", " ", ";\n\n  /* The shared row states (decisions 0029, 0030): focus shows the hover state in grey; only the\n     selected option is light blue, with its text darkening with the fill */\n  ", "\n  \n  &:focus {\n    outline: none;\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), space[200], controlHeight, controlPaddingY, controlPaddingX, input["default"].font, input["default"].textColor, duration.fast, easing.decelerate, duration.fast, easing.decelerate, function (_a) {
+  var $isSelected = _a.$isSelected,
+    $isFocused = _a.$isFocused;
+  return interactiveRow({
+    selected: $isSelected,
+    focused: $isFocused
+  });
+}, border.emphasis);
+var StyledHelperText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Dropdown__StyledHelperText",
+  componentId: "sc-kz07c4-5"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), field.helperText.typography, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? field.helperText.colorError : field.helperText.color;
+}, space[200]);
+var Dropdown = function Dropdown(_a) {
+  var options = _a.options,
+    value = _a.value,
+    onChange = _a.onChange,
+    _b = _a.placeholder,
+    placeholder = _b === void 0 ? 'Select an option' : _b,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    className = _a.className,
+    label = _a.label,
+    helperText = _a.helperText,
+    error = _a.error,
+    dataTestId = _a["data-testid"];
+  var _d = useState(false),
+    isOpen = _d[0],
+    setIsOpen = _d[1];
+  var _e = useState(-1),
+    focusedIndex = _e[0],
+    setFocusedIndex = _e[1];
+  var dropdownRef = useRef(null);
+  // Generate unique ID for accessibility (SSR-safe)
+  var dropdownId = useId();
+  var selectedOption = options.find(function (option) {
+    return option.id === value;
+  });
+  var hasError = Boolean(error);
+  var errorId = error ? "".concat(dropdownId, "-error") : undefined;
+  var helperId = helperText && !error ? "".concat(dropdownId, "-helper") : undefined;
+  var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
+  // Close dropdown when clicking outside
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  // Close dropdown on escape key and handle arrow navigation
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (!isOpen) return;
+      switch (event.key) {
+        case 'Escape':
+          setIsOpen(false);
+          setFocusedIndex(-1);
+          // Return focus to trigger button
+          if (dropdownRef.current) {
+            var trigger = dropdownRef.current.querySelector('button');
+            trigger === null || trigger === void 0 ? void 0 : trigger.focus();
+          }
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          setFocusedIndex(function (prev) {
+            var newIndex = prev < options.length - 1 ? prev + 1 : 0;
+            return newIndex;
+          });
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setFocusedIndex(function (prev) {
+            var newIndex = prev > 0 ? prev - 1 : options.length - 1;
+            return newIndex;
+          });
+          break;
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < options.length) {
+            handleOptionClick(options[focusedIndex].id);
+          }
+          break;
+        case 'Home':
+          event.preventDefault();
+          setFocusedIndex(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          setFocusedIndex(options.length - 1);
+          break;
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      return function () {
+        return document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+    return undefined;
+  }, [isOpen, focusedIndex, options]);
+  var handleTriggerClick = function handleTriggerClick() {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+      if (!isOpen) {
+        // When opening, set focus to the currently selected option or first option
+        var selectedIndex = options.findIndex(function (option) {
+          return option.id === value;
+        });
+        setFocusedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+      } else {
+        // When closing, reset focus
+        setFocusedIndex(-1);
+      }
+    }
+  };
+  var handleOptionClick = function handleOptionClick(optionId) {
+    onChange(optionId);
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  };
+  return jsxs(DropdownContainer, {
+    ref: dropdownRef,
+    className: className,
+    "data-testid": dataTestId,
+    children: [label && jsx("label", {
+      htmlFor: dropdownId,
+      style: {
+        display: 'block',
+        marginBottom: space[200]
+      },
+      children: jsx(Typography, {
+        variant: "label",
+        children: label
+      })
+    }), jsxs(DropdownTrigger, {
+      id: dropdownId,
+      "$isOpen": isOpen,
+      "$hasError": hasError,
+      onClick: handleTriggerClick,
+      disabled: disabled,
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-invalid": hasError,
+      "aria-describedby": describedBy,
+      children: [jsx("span", {
+        children: selectedOption ? selectedOption.label : placeholder
+      }), jsx(DropdownIcon, {
+        "$isOpen": isOpen,
+        children: jsx(Icon, {
+          name: "arrowDown",
+          iconColor: disabled ? 'disabled' : 'subdued'
+        })
+      })]
+    }), jsx(DropdownMenu, {
+      "$isOpen": isOpen,
+      role: "listbox",
+      "aria-labelledby": dropdownId,
+      children: options.map(function (option, index) {
+        return jsxs(DropdownOption, {
+          "$isSelected": option.id === value,
+          "$isFocused": index === focusedIndex,
+          onClick: function onClick() {
+            return handleOptionClick(option.id);
+          },
+          role: "option",
+          "aria-selected": option.id === value,
+          children: [option.label, option.id === value && jsx(Icon, {
+            name: "check",
+            size: "sm",
+            iconColor: "inherit"
+          })]
+        }, option.id);
+      })
+    }), error && jsx(StyledHelperText, {
+      id: errorId,
+      role: "alert",
+      "aria-live": "polite",
+      "$hasError": true,
+      children: error
+    }), helperText && !error && jsx(StyledHelperText, {
+      id: helperId,
+      children: helperText
+    })]
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { Dropdown };
+//# sourceMappingURL=Dropdown.mjs.map

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

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

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

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { type IconName } from '../../../types/icons.mjs';
+export type EmptyStateIllustration = 'search' | 'transactions' | 'notifications' | 'empty' | 'error' | 'custom';
+export type EmptyStateVariant = 'default' | 'error' | 'success';
+export type EmptyStateSize = 'small' | 'medium' | 'large';
+export interface EmptyStateAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary';
+    icon?: IconName;
+}
+export interface EmptyStateProps {
+    /** Predefined illustration type */
+    illustration?: EmptyStateIllustration;
+    /** Custom illustration (SVG string or React node) */
+    customIllustration?: React.ReactNode;
+    /** Main heading */
+    title: string;
+    /** Descriptive text */
+    description: string;
+    /** Primary call-to-action */
+    action?: EmptyStateAction;
+    /** Secondary action */
+    secondaryAction?: EmptyStateAction;
+    /** Visual variant */
+    variant?: EmptyStateVariant;
+    /** Size of the component */
+    size?: EmptyStateSize;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+export declare const EmptyState: React.FC<EmptyStateProps>;

package/dist/components/molecules/EmptyState/EmptyState.mjs

@@ -0,0 +1,133 @@
+'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 tokens from '../../../lib/cssTokens.mjs';
+import { Stack } from '../../atoms/Stack/Stack.mjs';
+import { Box } from '../../atoms/Box/Box.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { Button } from '../../atoms/Button/Button.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+
+var semantic = tokens.semantic;
+var StyledContainer = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "EmptyState__StyledContainer",
+  componentId: "sc-1u5hxh-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  max-width: ", ";\n  margin: 0 auto;\n  padding: ", ";\n"])), tokens.component.emptyState.maxWidth, function (_a) {
+  var $size = _a.$size;
+  return $size === 'small' ? semantic.space[800] : $size === 'large' ? semantic.space[1400] : semantic.space[1000];
+});
+var StyledIllustration = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "EmptyState__StyledIllustration",
+  componentId: "sc-1u5hxh-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: ", ";\n  color: ", ";\n"])), function (_a) {
+  var $size = _a.$size;
+  return $size === 'small' ? tokens.component.emptyState.illustration.small : $size === 'large' ? tokens.component.emptyState.illustration.large : tokens.component.emptyState.illustration.medium;
+}, function (_a) {
+  var $size = _a.$size;
+  return $size === 'small' ? tokens.component.emptyState.illustration.small : $size === 'large' ? tokens.component.emptyState.illustration.large : tokens.component.emptyState.illustration.medium;
+}, semantic.space[600], function (_a) {
+  var $variant = _a.$variant;
+  return $variant === 'error' ? semantic.color.icon.danger : $variant === 'success' ? semantic.color.icon.success : semantic.color.icon.muted;
+});
+var StyledTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "EmptyState__StyledTextContainer",
+  componentId: "sc-1u5hxh-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: ", ";\n  margin-bottom: ", ";\n"], ["\n  max-width: ", ";\n  margin-bottom: ", ";\n"
+// Map illustration type to icon name
+])), tokens.component.emptyState.text.maxWidth, semantic.space[600]);
+// Map illustration type to icon name
+var illustrationToIcon = {
+  search: 'search',
+  transactions: 'paper',
+  // Placeholder - will use custom icon when available
+  notifications: 'bell',
+  empty: 'paper',
+  error: 'crossCircle'
+};
+var EmptyState = function EmptyState(_a) {
+  var _b = _a.illustration,
+    illustration = _b === void 0 ? 'empty' : _b,
+    customIllustration = _a.customIllustration,
+    title = _a.title,
+    description = _a.description,
+    action = _a.action,
+    secondaryAction = _a.secondaryAction,
+    _c = _a.variant,
+    variant = _c === void 0 ? 'default' : _c,
+    _d = _a.size,
+    size = _d === void 0 ? 'medium' : _d,
+    dataTestId = _a["data-testid"];
+  // Determine what to show for illustration
+  var renderIllustration = function renderIllustration() {
+    if (customIllustration) {
+      return customIllustration;
+    }
+    if (illustration !== 'custom') {
+      var iconName = illustrationToIcon[illustration];
+      return jsx(Icon, {
+        name: iconName,
+        size: "2xl"
+      });
+    }
+    return null;
+  };
+  return jsxs(StyledContainer, {
+    "$size": size,
+    "data-testid": dataTestId,
+    role: "status",
+    "aria-label": "Empty state: ".concat(title),
+    children: [jsx(StyledIllustration, {
+      "$size": size,
+      "$variant": variant,
+      "aria-hidden": "true",
+      children: renderIllustration()
+    }), jsxs(StyledTextContainer, {
+      children: [jsx(Typography, {
+        variant: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3',
+        color: variant === 'error' ? 'error' : 'default',
+        as: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3',
+        children: title
+      }), jsx("div", {
+        style: {
+          marginTop: semantic.space[300]
+        },
+        children: jsx(Typography, {
+          variant: "body",
+          color: "subdued",
+          children: description
+        })
+      })]
+    }), (action || secondaryAction) && jsx(Box, {
+      width: "100%",
+      maxWidth: tokens.component.emptyState.actions.maxWidth,
+      children: jsxs(Stack, {
+        direction: "column",
+        gap: "sm",
+        children: [action && jsx(Button, {
+          variant: action.variant || 'primary',
+          onClick: action.onClick,
+          iconName: action.icon,
+          "data-testid": dataTestId ? "".concat(dataTestId, "-primary-action") : undefined,
+          children: action.label
+        }), secondaryAction && jsx(Button, {
+          variant: "naked",
+          onClick: secondaryAction.onClick,
+          "data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined,
+          children: secondaryAction.label
+        })]
+      })
+    })]
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { EmptyState };
+//# sourceMappingURL=EmptyState.mjs.map

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

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

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

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState.mjs';
+export type { EmptyStateProps, EmptyStateIllustration, EmptyStateVariant, EmptyStateSize, EmptyStateAction } from './EmptyState.mjs';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export type FeatureBlockProps = {
+    title: string;
+    excerpt: string;
+    labels: string[];
+    coverImage: string;
+    date: string;
+    onReadMore?: () => void;
+    readMoreHref?: string;
+    readMoreText?: string;
+    /** Test identifier for automated testing */
+    'data-testid'?: string;
+};
+export declare const FeatureBlock: React.FC<FeatureBlockProps>;

package/dist/components/molecules/FeatureBlock/FeatureBlock.mjs

@@ -0,0 +1,99 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Chip } from '../../atoms/Chip/Chip.mjs';
+import '../../atoms/Icon/Icon.mjs';
+import '../../atoms/Chip/shared/ChipBase.mjs';
+import { Button } from '../../atoms/Button/Button.mjs';
+import { Picture } from '../../atoms/Picture/Picture.mjs';
+import { Divider } from '../../atoms/Divider/Divider.mjs';
+import { Stack } from '../../atoms/Stack/Stack.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { DateFormatter } from '../../atoms/DateFormatter/DateFormatter.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+
+var space = tokens.semantic.space;
+var FeatureBlockStyled = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FeatureBlock__FeatureBlockStyled",
+  componentId: "sc-1mi4lso-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  /* The image isn't clickable, so it doesn't answer hover (issue 185, P5) */\n  img {\n    border-radius: ", ";\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokens.semantic.breakpoint.md, tokens.semantic.breakpoint.lg, space[1200], tokens.semantic.radius['2xl']);
+var ImageWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FeatureBlock__ImageWrapper",
+  componentId: "sc-1mi4lso-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokens.semantic.breakpoint.lg);
+var ContentSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FeatureBlock__ContentSection",
+  componentId: "sc-1mi4lso-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), space[600], tokens.semantic.breakpoint.lg, space[800], tokens.semantic.breakpoint.xl, space[2400]);
+var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FeatureBlock__ButtonWrapper",
+  componentId: "sc-1mi4lso-3"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), space[400]);
+var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FeatureBlock__ContentWrapper",
+  componentId: "sc-1mi4lso-4"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"])));
+var FeatureBlock = function FeatureBlock(_a) {
+  var title = _a.title,
+    excerpt = _a.excerpt,
+    _b = _a.labels,
+    labels = _b === void 0 ? [] : _b,
+    coverImage = _a.coverImage,
+    date = _a.date,
+    onReadMore = _a.onReadMore,
+    readMoreHref = _a.readMoreHref,
+    _c = _a.readMoreText,
+    readMoreText = _c === void 0 ? "Read more" : _c,
+    dataTestId = _a["data-testid"];
+  return jsxs(Fragment, {
+    children: [jsxs(FeatureBlockStyled, {
+      "data-testid": dataTestId,
+      children: [jsx(ImageWrapper, {
+        children: jsx(Picture, {
+          title: title,
+          src: coverImage
+        })
+      }), jsx(ContentSection, {
+        children: jsx(ContentWrapper, {
+          children: jsxs(Stack, {
+            direction: "column",
+            gap: "md",
+            children: [jsx(Typography, {
+              variant: "h3",
+              children: title
+            }), jsx(DateFormatter, {
+              dateString: date
+            }), jsx(Typography, {
+              variant: "small",
+              children: excerpt
+            }), jsx(Stack, {
+              direction: "row",
+              gap: "xs",
+              children: Array.isArray(labels) && labels.map(function (label, index) {
+                return jsx(Chip, {
+                  title: label,
+                  variant: "default"
+                }, index);
+              })
+            }), (onReadMore || readMoreHref) && jsx(ButtonWrapper, {
+              children: readMoreHref ? jsx(Button, {
+                purpose: "link",
+                url: readMoreHref,
+                children: readMoreText
+              }) : jsx(Button, {
+                onClick: onReadMore,
+                children: readMoreText
+              })
+            })]
+          })
+        })
+      })]
+    }), jsx(Divider, {})]
+  });
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { FeatureBlock };
+//# sourceMappingURL=FeatureBlock.mjs.map

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

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

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

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

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

@@ -0,0 +1,54 @@
+import React from 'react';
+export type InlineAlertVariant = 'error' | 'warning' | 'info' | 'success';
+export type InlineAlertSize = 'small' | 'medium';
+export interface InlineAlertProps {
+    /**
+     * Severity, shown by the icon and the text colour
+     * @default 'info'
+     */
+    variant?: InlineAlertVariant;
+    /**
+     * Size on the label scale (decision 0018): small (20px) for dense places such as tables,
+     * medium (24px) for forms and content. The message can wrap; the size sets its minimum height.
+     * @default 'medium'
+     */
+    size?: InlineAlertSize;
+    /**
+     * The message: short text only (no title, action or dismiss button; use Alert for those).
+     * With no message, InlineAlert renders an empty live region and no icon: keep it mounted and
+     * set the message to have screen readers announce it reliably.
+     */
+    children?: React.ReactNode;
+    /**
+     * ARIA live region behaviour, as on Alert
+     * - polite: non-urgent announcements
+     * - assertive: important, time-sensitive information
+     * - off: not announced
+     * @default 'polite'
+     */
+    ariaLive?: 'polite' | 'assertive' | 'off';
+    /**
+     * Element id. When the message gives feedback about a control, the control references this
+     * id with aria-describedby, so the message is read when the control is focused.
+     */
+    id?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * InlineAlert is a short, local message that sits next to what it's about: between paragraphs,
+ * below a field or in a table cell (decision 0019). A severity icon and text in the severity
+ * colour, with no background or border. For a title, an action or a dismiss button, use Alert.
+ *
+ * @example
+ * ```tsx
+ * <InlineAlert variant="success">Saved</InlineAlert>
+ *
+ * // Field feedback: the control references the message with aria-describedby
+ * <input id="email" aria-describedby="email-error" aria-invalid="true" />
+ * <InlineAlert id="email-error" variant="error" size="small">Enter a valid email address</InlineAlert>
+ * ```
+ */
+export declare const InlineAlert: React.FC<InlineAlertProps>;