@common-origin/design-system 2.15.0 → 2.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/README.md +1 -1
  2. package/dist/client.esm.js +949 -649
  3. package/dist/client.esm.js.map +1 -1
  4. package/dist/client.js +951 -647
  5. package/dist/client.js.map +1 -1
  6. package/dist/components/atoms/Button/Button.d.ts +13 -1
  7. package/dist/components/atoms/CategoryBadge/CategoryBadge.d.ts +12 -52
  8. package/dist/components/atoms/CategoryBadge/index.d.ts +1 -1
  9. package/dist/components/atoms/CategoryLabel/CategoryLabel.d.ts +69 -0
  10. package/dist/components/atoms/CategoryLabel/index.d.ts +2 -0
  11. package/dist/components/atoms/Chip/BooleanChip.d.ts +6 -1
  12. package/dist/components/atoms/Chip/Chip.d.ts +17 -12
  13. package/dist/components/atoms/Chip/FilterChip.d.ts +10 -24
  14. package/dist/components/atoms/Chip/InputChip.d.ts +27 -0
  15. package/dist/components/atoms/Chip/index.d.ts +1 -0
  16. package/dist/components/atoms/Chip/shared/types.d.ts +15 -1
  17. package/dist/components/atoms/Chip/shared/utils.d.ts +1 -85
  18. package/dist/components/atoms/DateFormatter/DateFormatter.d.ts +11 -1
  19. package/dist/components/atoms/Icon/Icon.d.ts +11 -0
  20. package/dist/components/atoms/StatusBadge/StatusBadge.d.ts +9 -55
  21. package/dist/components/atoms/StatusBadge/index.d.ts +1 -1
  22. package/dist/components/atoms/StatusLabel/StatusLabel.d.ts +17 -0
  23. package/dist/components/atoms/StatusLabel/StatusLabelBase.d.ts +49 -0
  24. package/dist/components/atoms/StatusLabel/index.d.ts +2 -0
  25. package/dist/components/atoms/Tag/Tag.d.ts +5 -0
  26. package/dist/components/atoms/index.d.ts +2 -0
  27. package/dist/components/molecules/Alert/Alert.d.ts +15 -2
  28. package/dist/components/molecules/DateGroup/DateGroup.d.ts +4 -1
  29. package/dist/components/molecules/InlineAlert/InlineAlert.d.ts +54 -0
  30. package/dist/components/molecules/InlineAlert/index.d.ts +2 -0
  31. package/dist/components/molecules/List/List.d.ts +3 -2
  32. package/dist/components/molecules/List/ListContext.d.ts +6 -0
  33. package/dist/components/molecules/List/ListItem.d.ts +5 -4
  34. package/dist/components/molecules/Modal/Modal.d.ts +6 -2
  35. package/dist/components/molecules/TabBar/TabBar.d.ts +8 -5
  36. package/dist/components/molecules/index.d.ts +1 -0
  37. package/dist/data.esm.js +89 -11
  38. package/dist/data.esm.js.map +1 -1
  39. package/dist/data.js +89 -11
  40. package/dist/data.js.map +1 -1
  41. package/dist/index.esm.js +1 -1
  42. package/dist/index.js +4 -0
  43. package/dist/index.js.map +1 -1
  44. package/dist/styles/tokens.json +89 -11
  45. package/dist/tokens/index.esm.js +89 -11
  46. package/dist/tokens/index.esm.js.map +1 -1
  47. package/dist/tokens/index.js +89 -11
  48. package/dist/tokens/index.js.map +1 -1
  49. package/dist/tokens/types/tokens.d.ts +81 -3
  50. package/dist/tokens.css +769 -0
  51. package/dist/tokens.css.d.ts +4 -0
  52. package/dist/types/tokens.d.ts +81 -3
  53. package/package.json +18 -6
@@ -3,6 +3,7 @@ export * from './Badge';
3
3
  export * from './Box';
4
4
  export * from './Button';
5
5
  export * from './CategoryBadge';
6
+ export * from './CategoryLabel';
6
7
  export * from './Chip';
7
8
  export * from './Container';
8
9
  export * from './Picture';
@@ -14,5 +15,6 @@ export * from './ProgressBar';
14
15
  export * from './Divider';
15
16
  export * from './Stack';
16
17
  export * from './StatusBadge';
18
+ export * from './StatusLabel';
17
19
  export * from './Tag';
18
20
  export * from './Typography';
@@ -9,6 +9,16 @@ export interface AlertProps {
9
9
  * @default 'info'
10
10
  */
11
11
  variant?: 'error' | 'warning' | 'info' | 'success';
12
+ /**
13
+ * Whether the severity border is drawn (decision 0019)
14
+ * - outlined: severity tint and a 1px severity border. Only for alerts at the top: a
15
+ * page-level alert at the top of the page, an alert at the top of the content area, and an
16
+ * error summary
17
+ * - borderless: severity tint only. Every other alert, including alerts inside content and at
18
+ * the bottom of a page; the icon and title colour carry the severity
19
+ * @default 'outlined'
20
+ */
21
+ appearance?: 'outlined' | 'borderless';
12
22
  /**
13
23
  * Alert message content
14
24
  */
@@ -28,12 +38,15 @@ export interface AlertProps {
28
38
  */
29
39
  onDismiss?: () => void;
30
40
  /**
31
- * Optional action button or component
41
+ * Optional action button or component, placed below the message and left-aligned with it
32
42
  */
33
43
  action?: React.ReactNode;
34
44
  /**
35
45
  * Compact inline variant with reduced padding
36
46
  * @default false
47
+ * @deprecated Use `InlineAlert` for a short, local message (decision 0019). `inline` keeps
48
+ * working until it is removed in 3.0. An inline alert that needs a title, action or dismiss
49
+ * button stays an Alert.
37
50
  */
38
51
  inline?: boolean;
39
52
  /**
@@ -50,6 +63,6 @@ export interface AlertProps {
50
63
  'data-testid'?: string;
51
64
  }
52
65
  export declare const Alert: {
53
- ({ variant, children, title, dismissible, onDismiss, action, inline, ariaLive, "data-testid": dataTestId, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
66
+ ({ variant, appearance, children, title, dismissible, onDismiss, action, inline, ariaLive, "data-testid": dataTestId, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element | null;
54
67
  displayName: string;
55
68
  };
@@ -5,7 +5,10 @@ export interface DateGroupProps {
5
5
  date: Date | string;
6
6
  /** Children to render under the date header (typically transactions) */
7
7
  children: React.ReactNode;
8
- /** Format mode for date display */
8
+ /**
9
+ * Format mode for the date header, passed to DateFormatter's `mode`. `'relative'` is
10
+ * deprecated: it behaves exactly like `'smart'`, so use `'smart'` (#82).
11
+ */
9
12
  format?: DateFormatMode;
10
13
  /** Whether to show total amount for this date group */
11
14
  showTotal?: boolean;
@@ -0,0 +1,54 @@
1
+ import React from 'react';
2
+ export type InlineAlertVariant = 'error' | 'warning' | 'info' | 'success';
3
+ export type InlineAlertSize = 'small' | 'medium';
4
+ export interface InlineAlertProps {
5
+ /**
6
+ * Severity, shown by the icon and the text colour
7
+ * @default 'info'
8
+ */
9
+ variant?: InlineAlertVariant;
10
+ /**
11
+ * Size on the label scale (decision 0018): small (20px) for dense places such as tables,
12
+ * medium (24px) for forms and content. The message can wrap; the size sets its minimum height.
13
+ * @default 'medium'
14
+ */
15
+ size?: InlineAlertSize;
16
+ /**
17
+ * The message: short text only (no title, action or dismiss button; use Alert for those).
18
+ * With no message, InlineAlert renders an empty live region and no icon: keep it mounted and
19
+ * set the message to have screen readers announce it reliably.
20
+ */
21
+ children?: React.ReactNode;
22
+ /**
23
+ * ARIA live region behaviour, as on Alert
24
+ * - polite: non-urgent announcements
25
+ * - assertive: important, time-sensitive information
26
+ * - off: not announced
27
+ * @default 'polite'
28
+ */
29
+ ariaLive?: 'polite' | 'assertive' | 'off';
30
+ /**
31
+ * Element id. When the message gives feedback about a control, the control references this
32
+ * id with aria-describedby, so the message is read when the control is focused.
33
+ */
34
+ id?: string;
35
+ /**
36
+ * Test identifier for automated testing
37
+ */
38
+ 'data-testid'?: string;
39
+ }
40
+ /**
41
+ * InlineAlert is a short, local message that sits next to what it's about: between paragraphs,
42
+ * below a field or in a table cell (decision 0019). A severity icon and text in the severity
43
+ * colour, with no background or border. For a title, an action or a dismiss button, use Alert.
44
+ *
45
+ * @example
46
+ * ```tsx
47
+ * <InlineAlert variant="success">Saved</InlineAlert>
48
+ *
49
+ * // Field feedback: the control references the message with aria-describedby
50
+ * <input id="email" aria-describedby="email-error" aria-invalid="true" />
51
+ * <InlineAlert id="email-error" variant="error" size="small">Enter a valid email address</InlineAlert>
52
+ * ```
53
+ */
54
+ export declare const InlineAlert: React.FC<InlineAlertProps>;
@@ -0,0 +1,2 @@
1
+ export { InlineAlert } from './InlineAlert';
2
+ export type { InlineAlertProps, InlineAlertVariant, InlineAlertSize } from './InlineAlert';
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { type ListSpacing } from './ListContext';
2
3
  export interface ListProps {
3
4
  /**
4
5
  * ListItem components
@@ -10,10 +11,10 @@ export interface ListProps {
10
11
  */
11
12
  dividers?: boolean;
12
13
  /**
13
- * Vertical spacing between items
14
+ * Density of the list's items: their padding. A ListItem's own `spacing` overrides it (#77).
14
15
  * @default 'comfortable'
15
16
  */
16
- spacing?: 'compact' | 'comfortable';
17
+ spacing?: ListSpacing;
17
18
  /**
18
19
  * Additional CSS class name
19
20
  */
@@ -0,0 +1,6 @@
1
+ export type ListSpacing = 'compact' | 'comfortable';
2
+ /**
3
+ * The spacing a List gives its items (#77). A ListItem without its own `spacing` uses it; outside
4
+ * a List it's `comfortable`. Internal: not exported from the package.
5
+ */
6
+ export declare const ListSpacingContext: import("react").Context<ListSpacing>;
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { type ListSpacing } from './ListContext';
2
3
  export interface ListItemProps {
3
4
  /**
4
5
  * Main text/content
@@ -56,10 +57,10 @@ export interface ListItemProps {
56
57
  */
57
58
  destructive?: boolean;
58
59
  /**
59
- * Spacing variant from parent List
60
- * @default 'comfortable'
60
+ * Density of this item. Defaults to the parent List's `spacing`, or `comfortable` outside a
61
+ * List; set it to override the List for this item (#77).
61
62
  */
62
- spacing?: 'compact' | 'comfortable';
63
+ spacing?: ListSpacing;
63
64
  /**
64
65
  * Expanded content (shown when expanded=true)
65
66
  */
@@ -95,6 +96,6 @@ export interface ListItemProps {
95
96
  onKeyDown?: (e: React.KeyboardEvent) => void;
96
97
  }
97
98
  export declare const ListItem: {
98
- ({ primary, secondary, badge, icon, expandable, expanded, onToggle, interactive, onClick, disabled, selected, destructive, spacing, children, className, "data-testid": dataTestId, role: customRole, "aria-selected": ariaSelected, id, tabIndex: customTabIndex, onKeyDown: customOnKeyDown, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
99
+ ({ primary, secondary, badge, icon, expandable, expanded, onToggle, interactive, onClick, disabled, selected, destructive, spacing: spacingProp, children, className, "data-testid": dataTestId, role: customRole, "aria-selected": ariaSelected, id, tabIndex: customTabIndex, onKeyDown: customOnKeyDown, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
99
100
  displayName: string;
100
101
  };
@@ -1,4 +1,5 @@
1
1
  import { type ReactNode } from 'react';
2
+ import { type ButtonVariant } from '../../atoms/Button';
2
3
  import { type IconName } from '../../../types/icons';
3
4
  export type ModalSize = 'small' | 'medium' | 'large';
4
5
  export interface ModalAction {
@@ -6,8 +7,11 @@ export interface ModalAction {
6
7
  label: string;
7
8
  /** Callback when the action is clicked */
8
9
  onClick: () => void;
9
- /** Button variant */
10
- variant?: 'primary' | 'secondary' | 'naked' | 'emphasis' | 'danger';
10
+ /**
11
+ * Button variant. `accent` is the blue call to action (at most one per view).
12
+ * `emphasis` is a deprecated alias for `accent` and will be removed in 3.0.
13
+ */
14
+ variant?: ButtonVariant;
11
15
  /** Optional leading icon */
12
16
  icon?: IconName;
13
17
  /** Whether the button is disabled */
@@ -1,5 +1,7 @@
1
1
  /**
2
- * Tab variant options for TabBar
2
+ * Tab variant options for TabBar.
3
+ * @deprecated TabBar has one look, `underline` (decision 0020). `'default'` and `'pills'` render
4
+ * as `underline`. The type is removed in 3.0.
3
5
  */
4
6
  export type TabVariant = 'default' | 'pills' | 'underline';
5
7
  /**
@@ -41,8 +43,10 @@ export interface TabBarProps {
41
43
  */
42
44
  onTabChange: (tabId: string) => void;
43
45
  /**
44
- * Visual variant of the tabs
45
- * @default 'default'
46
+ * Visual variant of the tabs.
47
+ * @deprecated TabBar has one look, `underline` (decision 0020). `'default'` and `'pills'` render
48
+ * as `underline`. Remove the prop; it is removed in 3.0.
49
+ * @default 'underline'
46
50
  */
47
51
  variant?: TabVariant;
48
52
  /**
@@ -57,7 +61,7 @@ export interface TabBarProps {
57
61
  /**
58
62
  * TabBar component for tabbed navigation
59
63
  *
60
- * Provides accessible tab navigation with 3 visual variants, keyboard support,
64
+ * Provides accessible tab navigation with an underline style, keyboard support,
61
65
  * and optional badge counts. Follows ARIA tablist pattern.
62
66
  *
63
67
  * @example
@@ -72,7 +76,6 @@ export interface TabBarProps {
72
76
  * ]}
73
77
  * activeTab={activeTab}
74
78
  * onTabChange={setActiveTab}
75
- * variant="pills"
76
79
  * />
77
80
  * ```
78
81
  */
@@ -2,6 +2,7 @@ export * from './AccountCard';
2
2
  export * from './ActionSheet';
3
3
  export * from './AgentInput';
4
4
  export * from './Alert';
5
+ export * from './InlineAlert';
5
6
  export * from './Breadcrumbs';
6
7
  export * from './CardSmall';
7
8
  export * from './CardLarge';
package/dist/data.esm.js CHANGED
@@ -106,6 +106,7 @@ var base = {
106
106
  fit: "fit-content"
107
107
  },
108
108
  color: {
109
+ transparent: "transparent",
109
110
  neutral: {
110
111
  "100": "#f8f9fa",
111
112
  "200": "#e9ecef",
@@ -326,8 +327,7 @@ var base = {
326
327
  easeInBack: "cubic-bezier(0.36, 0, 0.66, -0.56)",
327
328
  easeOutBack: "cubic-bezier(0.34, 1.56, 0.64, 1)",
328
329
  easeInOutBack: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
329
- },
330
- $ref: "./base/index.json"
330
+ }
331
331
  };
332
332
  var component = {
333
333
  button: {
@@ -381,6 +381,20 @@ var component = {
381
381
  textColor: "#adb5bd"
382
382
  }
383
383
  },
384
+ accent: {
385
+ backgroundColor: "#0265DC",
386
+ textColor: "#ffffff",
387
+ hover: {
388
+ backgroundColor: "#0054B6"
389
+ },
390
+ active: {
391
+ backgroundColor: "#004491"
392
+ },
393
+ disabled: {
394
+ backgroundColor: "#dee2e6",
395
+ textColor: "#adb5bd"
396
+ }
397
+ },
384
398
  emphasis: {
385
399
  backgroundColor: "#0265DC",
386
400
  textColor: "#ffffff",
@@ -630,7 +644,7 @@ var component = {
630
644
  "default": {
631
645
  backgroundColor: "#ffffff",
632
646
  textColor: "#212529",
633
- borderColor: "#dee2e6",
647
+ borderColor: "#6c757d",
634
648
  borderRadius: "0.25rem",
635
649
  borderWidth: "0.0625rem",
636
650
  paddingY: "11px",
@@ -638,7 +652,7 @@ var component = {
638
652
  font: "400 1rem/1.5rem 'Inter', sans-serif"
639
653
  },
640
654
  placeholder: {
641
- textColor: "#adb5bd"
655
+ textColor: "#495057"
642
656
  },
643
657
  hover: {
644
658
  borderColor: "#343a40"
@@ -710,6 +724,42 @@ var component = {
710
724
  }
711
725
  },
712
726
  alert: {
727
+ severity: {
728
+ error: {
729
+ background: "#FFEBE7",
730
+ text: "#D31510"
731
+ },
732
+ warning: {
733
+ background: "#FFECCC",
734
+ text: "#B14C00"
735
+ },
736
+ info: {
737
+ background: "#E0F2FF",
738
+ text: "#0265DC"
739
+ },
740
+ success: {
741
+ background: "#CEF8E0",
742
+ text: "#007A4D"
743
+ }
744
+ },
745
+ appearance: {
746
+ outlined: {
747
+ borderColor: {
748
+ error: "#D31510",
749
+ warning: "#B14C00",
750
+ info: "#0265DC",
751
+ success: "#007A4D"
752
+ }
753
+ },
754
+ borderless: {
755
+ borderColor: {
756
+ error: "transparent",
757
+ warning: "transparent",
758
+ info: "transparent",
759
+ success: "transparent"
760
+ }
761
+ }
762
+ },
713
763
  title: {
714
764
  typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
715
765
  fontWeight: "600",
@@ -808,8 +858,7 @@ var component = {
808
858
  },
809
859
  transactionListItem: {
810
860
  minHeight: "4.5rem"
811
- },
812
- $ref: "./component/index.json"
861
+ }
813
862
  };
814
863
  var semantic = {
815
864
  elevation: {
@@ -896,12 +945,20 @@ var semantic = {
896
945
  md: "35rem",
897
946
  lg: "45rem"
898
947
  },
948
+ label: {
949
+ small: "1.25rem",
950
+ medium: "1.5rem",
951
+ large: "2rem"
952
+ },
899
953
  menu: {
900
954
  maxHeight: "18.75rem"
901
955
  },
902
956
  dimension: {
903
957
  "1": "0.25rem",
958
+ "2": "0.5rem",
959
+ "4": "1rem",
904
960
  "5": "1.25rem",
961
+ "6": "1.5rem",
905
962
  "8": "2rem",
906
963
  "12": "3rem",
907
964
  "15": "3.75rem",
@@ -974,6 +1031,8 @@ var semantic = {
974
1031
  inverse: "#ffffff",
975
1032
  disabled: "#adb5bd",
976
1033
  interactive: "#0265DC",
1034
+ "interactive-hover": "#0054B6",
1035
+ "interactive-active": "#004491",
977
1036
  error: "#D31510",
978
1037
  success: "#007A4D",
979
1038
  warning: "#B14C00"
@@ -982,19 +1041,29 @@ var semantic = {
982
1041
  "default": "#f8f9fa",
983
1042
  subtle: "#ffffff",
984
1043
  emphasis: "#212529",
1044
+ "emphasis-hover": "#343a40",
1045
+ "emphasis-active": "#16191C",
985
1046
  surface: "#e9ecef",
986
1047
  inverse: "#343a40",
987
1048
  interactive: "#0265DC",
988
1049
  "interactive-subtle": "#E0F2FF",
1050
+ "interactive-subtle-hover": "#CAE8FF",
1051
+ "interactive-subtle-active": "#B5DEFF",
989
1052
  "interactive-hover": "#0054B6",
990
1053
  "interactive-active": "#004491",
991
1054
  error: "#D31510",
1055
+ "error-hover": "#B40000",
1056
+ "error-active": "#930000",
992
1057
  "error-subtle": "#FFEBE7",
993
1058
  success: "#007A4D",
994
1059
  "success-subtle": "#CEF8E0",
995
1060
  warning: "#B14C00",
996
1061
  "warning-subtle": "#FFECCC",
997
1062
  disabled: "#dee2e6",
1063
+ neutral: "#dee2e6",
1064
+ "neutral-hover": "#ced4da",
1065
+ "neutral-active": "#adb5bd",
1066
+ transparent: "transparent",
998
1067
  progressTrack: "#dee2e6",
999
1068
  page: "#f8f9fa",
1000
1069
  overlay: "rgba(33, 37, 41, 0.5)",
@@ -1005,11 +1074,13 @@ var semantic = {
1005
1074
  border: {
1006
1075
  "default": "#e9ecef",
1007
1076
  subtle: "#dee2e6",
1077
+ control: "#6c757d",
1008
1078
  strong: "#343a40",
1009
1079
  interactive: "#0265DC",
1010
1080
  error: "#D31510",
1011
1081
  success: "#007A4D",
1012
- warning: "#B14C00"
1082
+ warning: "#B14C00",
1083
+ none: "transparent"
1013
1084
  },
1014
1085
  icon: {
1015
1086
  "default": "#212529",
@@ -1056,10 +1127,18 @@ var semantic = {
1056
1127
  "orange-subtle": "#FFECCC",
1057
1128
  gray: "#495057",
1058
1129
  "gray-emphasis": "#212529",
1059
- "gray-subtle": "#e9ecef"
1130
+ "gray-subtle": "#e9ecef",
1131
+ "blue-text": "#0265DC",
1132
+ "purple-text": "#7E2EBD",
1133
+ "pink-text": "#B90064",
1134
+ "yellow-text": "#825800",
1135
+ "green-text": "#007A4D",
1136
+ "red-text": "#D31510",
1137
+ "orange-text": "#B14C00",
1138
+ "gray-text": "#212529"
1060
1139
  },
1061
1140
  status: {
1062
- pending: "#D39700",
1141
+ pending: "#825800",
1063
1142
  "pending-bg": "#FFF3D6",
1064
1143
  completed: "#007A4D",
1065
1144
  "completed-bg": "#CEF8E0",
@@ -1110,8 +1189,7 @@ var semantic = {
1110
1189
  hover: "background-color 150ms ease-out, color 150ms ease-out",
1111
1190
  focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
1112
1191
  interactive: "transform 150ms ease-out, opacity 150ms ease-out"
1113
- },
1114
- $ref: "./semantic/index.json"
1192
+ }
1115
1193
  };
1116
1194
  var tokensJson = {
1117
1195
  base: base,
@@ -1 +1 @@
1
- {"version":3,"file":"data.esm.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n | 'add'\n | 'addRing'\n | 'arrowDown'\n | 'arrowLeft'\n | 'arrowRight'\n | 'arrowUp'\n | 'back'\n | 'bell'\n | 'cancel'\n | 'caret'\n | 'caretDown'\n | 'caretUp'\n | 'check'\n | 'checkRing'\n | 'close'\n | 'copy'\n | 'creditCard'\n | 'crossCircle'\n | 'directionRight'\n | 'directionUp'\n | 'edit'\n | 'export'\n | 'fileDocSearch'\n | 'filter'\n | 'info'\n | 'kebab'\n | 'lamp'\n | 'lineOut'\n | 'link'\n | 'meatballs'\n | 'menu'\n | 'message'\n | 'move'\n | 'mic'\n | 'order'\n | 'paper'\n | 'pause'\n | 'play'\n | 'playBack'\n | 'refresh'\n | 'remove'\n | 'search'\n | 'star'\n | 'starFilled'\n | 'table'\n | 'trash'\n | 'userBox'\n | 'view'\n | 'viewHide'\n | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n | 'action'\n | 'communication'\n | 'content'\n | 'feedback'\n | 'media'\n | 'navigation'\n | 'object'\n | 'status'\n | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n /** SVG path data */\n path: string\n /** Display name of the icon */\n name: string\n /** What the icon visually depicts */\n description: string\n /** Semantic category for grouping */\n category: IconCategory\n /** Alternative names and search terms */\n aliases: string[]\n /** When and why to use this icon */\n intent: string\n /** Whether the icon is typically decorative (true) or informative (false) */\n decorativeDefault: boolean\n /** Suggested accessible label when the icon conveys meaning */\n ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAMA,MAAM,GAAGC;;ACJtB;AACA;AACA;AA2FA;AACO,IAAMC,SAAS,GAAGC;;;;"}
1
+ {"version":3,"file":"data.esm.js","sources":["../src/types/tokens.ts","../src/types/icons.ts"],"sourcesContent":["import tokensJson from '../styles/tokens.json'\n\n// Re-declared as a const so emitted .d.ts files inline the token shape instead of importing JSON,\n// which consumers can only resolve with `resolveJsonModule`.\nexport const tokens = tokensJson\n\nexport type Tokens = typeof tokens\nexport type TokensBase = Tokens['base']\nexport type TokensSemantic = Tokens['semantic']\nexport type TokensComponent = Tokens['component']\n","// Icon type definitions for external consumption\n// This is a self-contained type that doesn't depend on JSON imports\n// to ensure it works correctly in consuming projects\n\nimport iconsJson from '../styles/icons.json'\n\nexport type IconName =\n | 'add'\n | 'addRing'\n | 'arrowDown'\n | 'arrowLeft'\n | 'arrowRight'\n | 'arrowUp'\n | 'back'\n | 'bell'\n | 'cancel'\n | 'caret'\n | 'caretDown'\n | 'caretUp'\n | 'check'\n | 'checkRing'\n | 'close'\n | 'copy'\n | 'creditCard'\n | 'crossCircle'\n | 'directionRight'\n | 'directionUp'\n | 'edit'\n | 'export'\n | 'fileDocSearch'\n | 'filter'\n | 'info'\n | 'kebab'\n | 'lamp'\n | 'lineOut'\n | 'link'\n | 'meatballs'\n | 'menu'\n | 'message'\n | 'move'\n | 'mic'\n | 'order'\n | 'paper'\n | 'pause'\n | 'play'\n | 'playBack'\n | 'refresh'\n | 'remove'\n | 'search'\n | 'star'\n | 'starFilled'\n | 'table'\n | 'trash'\n | 'userBox'\n | 'view'\n | 'viewHide'\n | 'wallet'\n\n/** Semantic category for grouping icons by purpose */\nexport type IconCategory =\n | 'action'\n | 'communication'\n | 'content'\n | 'feedback'\n | 'media'\n | 'navigation'\n | 'object'\n | 'status'\n | 'user'\n\n/** Enriched metadata for each icon entry in icons.json */\nexport interface IconMetadata {\n /** SVG path data */\n path: string\n /** Display name of the icon */\n name: string\n /** What the icon visually depicts */\n description: string\n /** Semantic category for grouping */\n category: IconCategory\n /** Alternative names and search terms */\n aliases: string[]\n /** When and why to use this icon */\n intent: string\n /** Whether the icon is typically decorative (true) or informative (false) */\n decorativeDefault: boolean\n /** Suggested accessible label when the icon conveys meaning */\n ariaLabelDefault: string\n}\n\n/** The full icon registry keyed by IconName */\nexport type IconRegistry = Record<IconName, IconMetadata>\n\n// Typed as IconRegistry so emitted .d.ts files don't import JSON (needs `resolveJsonModule` in consumers).\nexport const iconsData = iconsJson as IconRegistry\n"],"names":["tokens","tokensJson","iconsData","iconsJson"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAMA,MAAM,GAAGC;;ACJtB;AACA;AACA;AA2FA;AACO,IAAMC,SAAS,GAAGC;;;;"}