@common-origin/design-system 2.18.0 → 2.20.0

package/dist/components/atoms/DateFormatter/DateFormatter.mjs

@@ -0,0 +1,64 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { parseISO, format, isToday, isYesterday, isThisWeek } from 'date-fns';
+import styled$module from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+
+var _a = tokens.semantic,
+  typography = _a.typography,
+  color = _a.color;
+var TimeStyled = /*#__PURE__*/styled.time.withConfig({
+  displayName: "DateFormatter__TimeStyled",
+  componentId: "sc-5464cc-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+/**
+ * Formats a date with smart relative/absolute logic
+ */])), typography.label, color.text.muted);
+/**
+ * Formats a date with smart relative/absolute logic
+ */
+var formatDateSmart = function formatDateSmart(date, customFormat) {
+  // Relative labels for recent dates
+  if (isToday(date)) return 'Today';
+  if (isYesterday(date)) return 'Yesterday';
+  // Show day name for dates within this week
+  if (isThisWeek(date, {
+    weekStartsOn: 1
+  })) {
+    return format(date, 'EEEE'); // "Monday", "Tuesday", etc.
+  }
+  // Fall back to custom format or default full date format
+  return format(date, customFormat || 'MMMM dd, yyyy');
+};
+var DateFormatter = function DateFormatter(_a) {
+  var dateString = _a.dateString,
+    formatString = _a.formatString,
+    _b = _a.mode,
+    mode = _b === void 0 ? 'absolute' : _b,
+    dataTestId = _a["data-testid"];
+  var date = parseISO(dateString);
+  var displayText;
+  switch (mode) {
+    case 'relative': // Deprecated alias for 'smart', removed in 3.0 (#82)
+    case 'smart':
+      // Today, Yesterday or the day name for recent dates; formatted for older ones
+      displayText = formatDateSmart(date, formatString);
+      break;
+    case 'absolute':
+    default:
+      // Always use the format string (default 'yyyy')
+      displayText = format(date, formatString || 'yyyy');
+      break;
+  }
+  return jsx(TimeStyled, {
+    dateTime: dateString,
+    "data-testid": dataTestId,
+    children: displayText
+  });
+};
+var templateObject_1;
+
+export { DateFormatter };
+//# sourceMappingURL=DateFormatter.mjs.map

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

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

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

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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+export interface DividerProps {
+    /** Variant style of the divider */
+    variant?: 'default' | 'strong' | 'minimal';
+    /** Size variation affecting spacing */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Orientation of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * Divider is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
+ * ```
+ */
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/atoms/Divider/Divider.mjs

@@ -0,0 +1,134 @@
+'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';
+
+// Destructure tokens for cleaner access
+var separatorTokens = tokens.component.separator;
+// Margins come from the semantic separator spacing: no component spacing tokens (decision 0022)
+var space = tokens.semantic.space;
+var StyledDivider = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-1l0c8ja-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
+/**
+ * Divider is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
+ * ```
+ */])), function (_a) {
+  var _b = _a.$orientation,
+    $orientation = _b === void 0 ? 'horizontal' : _b;
+  if ($orientation === 'vertical') {
+    return "\n        display: inline-block;\n        height: auto;\n        align-self: stretch;\n        border-left: ".concat(tokens.semantic.border.width.thin, " solid;\n        border-top: none;\n      ");
+  }
+  return "border-top: ".concat(tokens.semantic.border.width.thin, " solid;");
+}, function (_a) {
+  var _b = _a.$variant,
+    $variant = _b === void 0 ? 'default' : _b,
+    _c = _a.$orientation,
+    $orientation = _c === void 0 ? 'horizontal' : _c;
+  var borderProperty = $orientation === 'vertical' ? 'border-left' : 'border-top';
+  switch ($variant) {
+    case 'strong':
+      return "".concat(borderProperty, ": ").concat(separatorTokens.variants.strong.border, ";");
+    case 'minimal':
+      return "".concat(borderProperty, ": ").concat(separatorTokens.variants.minimal.border, ";");
+    case 'default':
+    default:
+      return "".concat(borderProperty, ": ").concat(separatorTokens.variants["default"].border, ";");
+  }
+}, function (_a) {
+  var _b = _a.$size,
+    $size = _b === void 0 ? 'large' : _b,
+    _c = _a.$variant,
+    $variant = _c === void 0 ? 'default' : _c,
+    _d = _a.$orientation,
+    $orientation = _d === void 0 ? 'horizontal' : _d;
+  if ($variant === 'minimal' && $orientation === 'horizontal') {
+    // Minimal variant always uses its predefined spacing for horizontal
+    return "margin: ".concat(space[600], " 0;");
+  }
+  if ($orientation === 'vertical') {
+    // Vertical orientation uses horizontal margins (left/right)
+    switch ($size) {
+      case 'small':
+        return "margin: 0 ".concat(space[400], ";");
+      case 'medium':
+        return "margin: 0 ".concat(space[600], ";");
+      case 'xlarge':
+        return "margin: 0 ".concat(space[1200], ";");
+      case 'large':
+      default:
+        return "margin: 0 ".concat(space[800], ";");
+    }
+  }
+  // Horizontal orientation uses vertical margins (top/bottom)
+  switch ($size) {
+    case 'small':
+      return "margin: ".concat(space[400], " 0;");
+    case 'medium':
+      return "margin: ".concat(space[600], " 0;");
+    case 'xlarge':
+      return "margin: ".concat(space[1200], " 0;");
+    case 'large':
+    default:
+      return "margin: ".concat(space[800], " 0;");
+  }
+});
+/**
+ * Divider is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
+ * ```
+ */
+var Divider = function Divider(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'default' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'large' : _c,
+    _d = _a.orientation,
+    orientation = _d === void 0 ? 'horizontal' : _d,
+    dataTestId = _a["data-testid"];
+  return jsx(StyledDivider, {
+    "$variant": variant,
+    "$size": size,
+    "$orientation": orientation,
+    "data-testid": dataTestId,
+    role: "separator",
+    "aria-orientation": orientation
+  });
+};
+var templateObject_1;
+
+export { Divider };
+//# sourceMappingURL=Divider.mjs.map

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

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

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