@common-origin/design-system 2.13.0 → 2.15.0

package/dist/data.js

@@ -77,17 +77,29 @@ var base = {
 		"8": "2rem",
 		"9": "2.25rem",
 		"10": "2.5rem",
+		"11": "2.75rem",
 		"12": "3rem",
 		"14": "3.5rem",
+		"15": "3.75rem",
 		"16": "4rem",
+		"18": "4.5rem",
 		"20": "5rem",
 		"24": "6rem",
 		"28": "7rem",
+		"30": "7.5rem",
 		"32": "8rem",
 		"40": "10rem",
+		"45": "11.25rem",
 		"48": "12rem",
+		"50": "12.5rem",
 		"56": "14rem",
 		"64": "16rem",
+		"75": "18.75rem",
+		"90": "22.5rem",
+		"100": "25rem",
+		"140": "35rem",
+		"180": "45rem",
+		"192": "48rem",
 		auto: "auto",
 		full: "100%",
 		screen: "100vh",
@@ -277,7 +289,8 @@ var base = {
 		"8": "2.5rem",
 		"9": "3rem",
 		"10": "4.5rem",
-		"11": "5rem"
+		"11": "5rem",
+		none: "1"
 	},
 	letterSpacing: {
 		"0": "-0.125rem",
@@ -415,6 +428,9 @@ var component = {
 		}
 	},
 	chip: {
+		closeButton: {
+			size: "1.25rem"
+		},
 		"default": {
 			backgroundColor: "#e9ecef",
 			textColor: "#212529",
@@ -650,6 +666,9 @@ var component = {
 			textColor: "#adb5bd",
 			borderColor: "#dee2e6",
 			cursor: "not-allowed"
+		},
+		textarea: {
+			minHeight: "7.5rem"
 		}
 	},
 	badge: {
@@ -659,12 +678,138 @@ var component = {
 		count: {
 			minWidth: "1rem",
 			height: "1rem",
-			paddingX: "0.25rem"
+			paddingX: "0.25rem",
+			lineHeight: "1"
 		},
 		ring: {
 			width: "0.125rem"
 		},
-		borderRadius: "10rem"
+		borderRadius: "10rem",
+		label: {
+			fontWeight: "500",
+			typography: {
+				small: "400 0.75rem/1rem 'Inter', sans-serif",
+				medium: "400 0.875rem/1.25rem 'Inter', sans-serif"
+			}
+		}
+	},
+	field: {
+		gap: "0.5rem",
+		label: {
+			typography: "600 0.875rem/1.25rem 'Inter', sans-serif",
+			color: "#212529",
+			colorDisabled: "#adb5bd",
+			gap: "0.25rem"
+		},
+		requiredIndicator: {
+			color: "#D31510",
+			fontWeight: "700"
+		},
+		helperText: {
+			typography: "400 0.75rem/1rem 'Inter', sans-serif",
+			color: "#495057",
+			colorError: "#D31510"
+		}
+	},
+	alert: {
+		title: {
+			typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
+			fontWeight: "600",
+			lineHeight: "1.25rem"
+		},
+		message: {
+			typography: "400 1rem/1.5rem 'Inter', sans-serif",
+			lineHeight: "1.25rem"
+		}
+	},
+	tabBar: {
+		badge: {
+			typography: "400 0.75rem/1rem 'Inter', sans-serif",
+			fontWeight: "700",
+			size: "1.25rem"
+		},
+		scrollbar: {
+			height: "0.25rem"
+		}
+	},
+	searchField: {
+		sectionHeader: {
+			typography: "400 0.75rem/1rem 'Inter', sans-serif",
+			letterSpacing: "0.125rem"
+		}
+	},
+	avatar: {
+		initials: {
+			fontFamily: "'Inter', sans-serif",
+			fontWeight: "500",
+			lineHeight: "1",
+			fontSize: {
+				xs: "0.75rem",
+				sm: "0.875rem",
+				md: "1rem",
+				lg: "1.125rem",
+				xl: "1.25rem"
+			}
+		}
+	},
+	codeBlock: {
+		fontFamily: "Menlo, Monaco, Consolas, Courier New, monospace",
+		fontSize: "0.75rem",
+		lineHeight: "1.25rem"
+	},
+	slider: {
+		thumb: {
+			shadow: {
+				"default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+				hover: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+				active: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+			}
+		}
+	},
+	accountCard: {
+		header: {
+			minHeight: "3rem"
+		},
+		minWidth: "18.75rem"
+	},
+	breadcrumbs: {
+		item: {
+			maxWidth: "11.25rem"
+		}
+	},
+	cardLarge: {
+		maxWidth: "48rem"
+	},
+	checkbox: {
+		box: {
+			size: "1.25rem"
+		},
+		row: {
+			minHeight: "2rem"
+		}
+	},
+	emptyState: {
+		illustration: {
+			small: "5rem",
+			medium: "7.5rem",
+			large: "12.5rem"
+		},
+		maxWidth: "25rem",
+		text: {
+			maxWidth: "22.5rem"
+		},
+		actions: {
+			maxWidth: "18.75rem"
+		}
+	},
+	listItem: {
+		expandedIndent: {
+			compact: "3rem",
+			comfortable: "3.75rem"
+		}
+	},
+	transactionListItem: {
+		minHeight: "4.5rem"
 	},
 	$ref: "./component/index.json"
 };
@@ -677,12 +822,63 @@ var semantic = {
 		overlay: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
 		sticky: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
 	},
+	breakpoint: {
+		xs: "0px",
+		sm: "640px",
+		md: "768px",
+		lg: "1024px",
+		xl: "1280px",
+		"2xl": "1536px"
+	},
+	opacity: {
+		disabled: "0.5",
+		full: "1"
+	},
+	fontFamily: {
+		body: "'Inter', sans-serif",
+		monospace: "Menlo, Monaco, Consolas, Courier New, monospace"
+	},
+	fontSize: {
+		xs: "0.75rem",
+		sm: "0.875rem",
+		md: "1rem",
+		lg: "1.125rem",
+		xl: "1.25rem"
+	},
+	lineHeight: {
+		none: "1",
+		tight: "1.25rem",
+		normal: "1.5rem"
+	},
+	letterSpacing: {
+		tighter: "-0.125rem",
+		tight: "-0.0625rem",
+		normal: "0rem",
+		wide: "0.125rem"
+	},
+	fontWeight: {
+		regular: "400",
+		medium: "500",
+		semibold: "600",
+		bold: "700"
+	},
+	zIndex: {
+		sticky: "10",
+		dropdown: "1000",
+		overlay: "1010",
+		modal: "1020"
+	},
 	border: {
 		"default": "0.0625rem solid #e9ecef",
 		subtle: "0.0625rem solid #dee2e6",
 		strong: "0.0625rem solid #343a40",
 		focus: "0.125rem solid #343a40",
 		tooltip: "0.125rem dotted #dee2e6",
+		width: {
+			thin: "0.0625rem",
+			thick: "0.125rem"
+		},
+		focusOffset: "0.125rem",
 		radius: {
 			none: "0",
 			xs: "0.125rem",
@@ -696,6 +892,31 @@ var semantic = {
 		}
 	},
 	size: {
+		touchTarget: "2.75rem",
+		overlay: {
+			sm: "25rem",
+			md: "35rem",
+			lg: "45rem"
+		},
+		menu: {
+			maxHeight: "18.75rem"
+		},
+		dimension: {
+			"1": "0.25rem",
+			"5": "1.25rem",
+			"8": "2rem",
+			"12": "3rem",
+			"15": "3.75rem",
+			"18": "4.5rem",
+			"20": "5rem",
+			"30": "7.5rem",
+			"45": "11.25rem",
+			"50": "12.5rem",
+			"75": "18.75rem",
+			"90": "22.5rem",
+			"100": "25rem",
+			"192": "48rem"
+		},
 		icon: {
 			xs: "0.75rem",
 			sm: "1rem",
@@ -743,6 +964,7 @@ var semantic = {
 			"8xl": "3.5rem",
 			"9xl": "4rem",
 			"10xl": "5rem",
+			"11xl": "6rem",
 			auto: "auto"
 		}
 	},
@@ -779,7 +1001,8 @@ var semantic = {
 			page: "#f8f9fa",
 			overlay: "rgba(33, 37, 41, 0.5)",
 			"hover-overlay": "rgba(33, 37, 41, 0.1)",
-			"active-overlay": "rgba(33, 37, 41, 0.15)"
+			"active-overlay": "rgba(33, 37, 41, 0.15)",
+			"inverse-overlay": "rgba(255, 255, 255, 0.2)"
 		},
 		border: {
 			"default": "#e9ecef",
@@ -872,6 +1095,15 @@ var semantic = {
 		breadcrumb: "400 0.75rem/1.125rem 'Inter', sans-serif"
 	},
 	motion: {
+		duration: {
+			normal: "200ms",
+			fast: "150ms",
+			slow: "300ms"
+		},
+		easing: {
+			easeInOut: "ease-in-out",
+			easeOut: "ease-out"
+		},
 		transition: {
 			fast: "all 150ms ease-out",
 			normal: "all 200ms ease-in-out",

package/dist/data.js.map

@@ -1 +1 @@
-{"version":3,"file":"data.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;;;;;;;"}
+{"version":3,"file":"data.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;;;;;;;"}

package/dist/lib/styleUtils.d.ts

@@ -14,3 +14,6 @@ export declare const media: {
     xl: string;
     '2xl': string;
 };
+export declare const reducedMotion = "@media (prefers-reduced-motion: reduce)";
+export declare const exitAnimation: import("styled-components").RuleSet<object>;
+export declare const visuallyHidden: import("styled-components").RuleSet<object>;

package/dist/lib/usePresence.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+export declare const EXIT_DURATION_MS: number;
+/**
+ * Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit
+ * animation can run before it unmounts (decision 0005).
+ */
+export declare function usePresence(isOpen: boolean, exitMs?: number): {
+    isPresent: boolean;
+    isExiting: boolean;
+};
+/**
+ * Makes an element inert while `isInert` is true, so an exiting overlay's controls leave
+ * the tab order and can't be activated. Set through the DOM because React 18 has no
+ * `inert` prop.
+ */
+export declare function useInert(ref: RefObject<HTMLElement | null>, isInert: boolean): void;

package/dist/styles/tokens.json

@@ -76,17 +76,29 @@
       "8": "2rem",
       "9": "2.25rem",
       "10": "2.5rem",
+      "11": "2.75rem",
       "12": "3rem",
       "14": "3.5rem",
+      "15": "3.75rem",
       "16": "4rem",
+      "18": "4.5rem",
       "20": "5rem",
       "24": "6rem",
       "28": "7rem",
+      "30": "7.5rem",
       "32": "8rem",
       "40": "10rem",
+      "45": "11.25rem",
       "48": "12rem",
+      "50": "12.5rem",
       "56": "14rem",
       "64": "16rem",
+      "75": "18.75rem",
+      "90": "22.5rem",
+      "100": "25rem",
+      "140": "35rem",
+      "180": "45rem",
+      "192": "48rem",
       "auto": "auto",
       "full": "100%",
       "screen": "100vh",
@@ -276,7 +288,8 @@
       "8": "2.5rem",
       "9": "3rem",
       "10": "4.5rem",
-      "11": "5rem"
+      "11": "5rem",
+      "none": "1"
     },
     "letterSpacing": {
       "0": "-0.125rem",
@@ -414,6 +427,9 @@
       }
     },
     "chip": {
+      "closeButton": {
+        "size": "1.25rem"
+      },
       "default": {
         "backgroundColor": "#e9ecef",
         "textColor": "#212529",
@@ -649,6 +665,9 @@
         "textColor": "#adb5bd",
         "borderColor": "#dee2e6",
         "cursor": "not-allowed"
+      },
+      "textarea": {
+        "minHeight": "7.5rem"
       }
     },
     "badge": {
@@ -658,12 +677,138 @@
       "count": {
         "minWidth": "1rem",
         "height": "1rem",
-        "paddingX": "0.25rem"
+        "paddingX": "0.25rem",
+        "lineHeight": "1"
       },
       "ring": {
         "width": "0.125rem"
       },
-      "borderRadius": "10rem"
+      "borderRadius": "10rem",
+      "label": {
+        "fontWeight": "500",
+        "typography": {
+          "small": "400 0.75rem/1rem 'Inter', sans-serif",
+          "medium": "400 0.875rem/1.25rem 'Inter', sans-serif"
+        }
+      }
+    },
+    "field": {
+      "gap": "0.5rem",
+      "label": {
+        "typography": "600 0.875rem/1.25rem 'Inter', sans-serif",
+        "color": "#212529",
+        "colorDisabled": "#adb5bd",
+        "gap": "0.25rem"
+      },
+      "requiredIndicator": {
+        "color": "#D31510",
+        "fontWeight": "700"
+      },
+      "helperText": {
+        "typography": "400 0.75rem/1rem 'Inter', sans-serif",
+        "color": "#495057",
+        "colorError": "#D31510"
+      }
+    },
+    "alert": {
+      "title": {
+        "typography": "500 1.125rem/1.5rem 'Inter', sans-serif",
+        "fontWeight": "600",
+        "lineHeight": "1.25rem"
+      },
+      "message": {
+        "typography": "400 1rem/1.5rem 'Inter', sans-serif",
+        "lineHeight": "1.25rem"
+      }
+    },
+    "tabBar": {
+      "badge": {
+        "typography": "400 0.75rem/1rem 'Inter', sans-serif",
+        "fontWeight": "700",
+        "size": "1.25rem"
+      },
+      "scrollbar": {
+        "height": "0.25rem"
+      }
+    },
+    "searchField": {
+      "sectionHeader": {
+        "typography": "400 0.75rem/1rem 'Inter', sans-serif",
+        "letterSpacing": "0.125rem"
+      }
+    },
+    "avatar": {
+      "initials": {
+        "fontFamily": "'Inter', sans-serif",
+        "fontWeight": "500",
+        "lineHeight": "1",
+        "fontSize": {
+          "xs": "0.75rem",
+          "sm": "0.875rem",
+          "md": "1rem",
+          "lg": "1.125rem",
+          "xl": "1.25rem"
+        }
+      }
+    },
+    "codeBlock": {
+      "fontFamily": "Menlo, Monaco, Consolas, Courier New, monospace",
+      "fontSize": "0.75rem",
+      "lineHeight": "1.25rem"
+    },
+    "slider": {
+      "thumb": {
+        "shadow": {
+          "default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+          "hover": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          "active": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+        }
+      }
+    },
+    "accountCard": {
+      "header": {
+        "minHeight": "3rem"
+      },
+      "minWidth": "18.75rem"
+    },
+    "breadcrumbs": {
+      "item": {
+        "maxWidth": "11.25rem"
+      }
+    },
+    "cardLarge": {
+      "maxWidth": "48rem"
+    },
+    "checkbox": {
+      "box": {
+        "size": "1.25rem"
+      },
+      "row": {
+        "minHeight": "2rem"
+      }
+    },
+    "emptyState": {
+      "illustration": {
+        "small": "5rem",
+        "medium": "7.5rem",
+        "large": "12.5rem"
+      },
+      "maxWidth": "25rem",
+      "text": {
+        "maxWidth": "22.5rem"
+      },
+      "actions": {
+        "maxWidth": "18.75rem"
+      }
+    },
+    "listItem": {
+      "expandedIndent": {
+        "compact": "3rem",
+        "comfortable": "3.75rem"
+      }
+    },
+    "transactionListItem": {
+      "minHeight": "4.5rem"
     },
     "$ref": "./component/index.json"
   },
@@ -676,12 +821,63 @@
       "overlay": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
       "sticky": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
     },
+    "breakpoint": {
+      "xs": "0px",
+      "sm": "640px",
+      "md": "768px",
+      "lg": "1024px",
+      "xl": "1280px",
+      "2xl": "1536px"
+    },
+    "opacity": {
+      "disabled": "0.5",
+      "full": "1"
+    },
+    "fontFamily": {
+      "body": "'Inter', sans-serif",
+      "monospace": "Menlo, Monaco, Consolas, Courier New, monospace"
+    },
+    "fontSize": {
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "md": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.25rem"
+    },
+    "lineHeight": {
+      "none": "1",
+      "tight": "1.25rem",
+      "normal": "1.5rem"
+    },
+    "letterSpacing": {
+      "tighter": "-0.125rem",
+      "tight": "-0.0625rem",
+      "normal": "0rem",
+      "wide": "0.125rem"
+    },
+    "fontWeight": {
+      "regular": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700"
+    },
+    "zIndex": {
+      "sticky": "10",
+      "dropdown": "1000",
+      "overlay": "1010",
+      "modal": "1020"
+    },
     "border": {
       "default": "0.0625rem solid #e9ecef",
       "subtle": "0.0625rem solid #dee2e6",
       "strong": "0.0625rem solid #343a40",
       "focus": "0.125rem solid #343a40",
       "tooltip": "0.125rem dotted #dee2e6",
+      "width": {
+        "thin": "0.0625rem",
+        "thick": "0.125rem"
+      },
+      "focusOffset": "0.125rem",
       "radius": {
         "none": "0",
         "xs": "0.125rem",
@@ -695,6 +891,31 @@
       }
     },
     "size": {
+      "touchTarget": "2.75rem",
+      "overlay": {
+        "sm": "25rem",
+        "md": "35rem",
+        "lg": "45rem"
+      },
+      "menu": {
+        "maxHeight": "18.75rem"
+      },
+      "dimension": {
+        "1": "0.25rem",
+        "5": "1.25rem",
+        "8": "2rem",
+        "12": "3rem",
+        "15": "3.75rem",
+        "18": "4.5rem",
+        "20": "5rem",
+        "30": "7.5rem",
+        "45": "11.25rem",
+        "50": "12.5rem",
+        "75": "18.75rem",
+        "90": "22.5rem",
+        "100": "25rem",
+        "192": "48rem"
+      },
       "icon": {
         "xs": "0.75rem",
         "sm": "1rem",
@@ -742,6 +963,7 @@
         "8xl": "3.5rem",
         "9xl": "4rem",
         "10xl": "5rem",
+        "11xl": "6rem",
         "auto": "auto"
       }
     },
@@ -778,7 +1000,8 @@
         "page": "#f8f9fa",
         "overlay": "rgba(33, 37, 41, 0.5)",
         "hover-overlay": "rgba(33, 37, 41, 0.1)",
-        "active-overlay": "rgba(33, 37, 41, 0.15)"
+        "active-overlay": "rgba(33, 37, 41, 0.15)",
+        "inverse-overlay": "rgba(255, 255, 255, 0.2)"
       },
       "border": {
         "default": "#e9ecef",
@@ -871,6 +1094,15 @@
       "breadcrumb": "400 0.75rem/1.125rem 'Inter', sans-serif"
     },
     "motion": {
+      "duration": {
+        "normal": "200ms",
+        "fast": "150ms",
+        "slow": "300ms"
+      },
+      "easing": {
+        "easeInOut": "ease-in-out",
+        "easeOut": "ease-out"
+      },
       "transition": {
         "fast": "all 150ms ease-out",
         "normal": "all 200ms ease-in-out",