@common-origin/design-system 2.15.0 → 2.16.0

package/dist/index.js

@@ -23,6 +23,7 @@ exports.Button = client.Button;
 exports.CardLarge = client.CardLarge;
 exports.CardSmall = client.CardSmall;
 exports.CategoryBadge = client.CategoryBadge;
+exports.CategoryLabel = client.CategoryLabel;
 exports.Checkbox = client.Checkbox;
 exports.Chip = client.Chip;
 exports.ChipGroup = client.ChipGroup;
@@ -39,6 +40,8 @@ exports.Grid = client.Grid;
 exports.GridCol = client.GridCol;
 exports.Icon = client.Icon;
 exports.IconButton = client.IconButton;
+exports.InlineAlert = client.InlineAlert;
+exports.InputChip = client.InputChip;
 exports.LegacyChip = client.LegacyChip;
 exports.List = client.List;
 exports.ListItem = client.ListItem;
@@ -55,6 +58,7 @@ exports.Sheet = client.Sheet;
 exports.Slider = client.Slider;
 exports.Stack = client.Stack;
 exports.StatusBadge = client.StatusBadge;
+exports.StatusLabel = client.StatusLabel;
 exports.StyledInputBase = client.StyledInputBase;
 exports.StyledTextAreaBase = client.StyledTextAreaBase;
 exports.TabBar = client.TabBar;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles/tokens.json

@@ -107,6 +107,7 @@
       "fit": "fit-content"
     },
     "color": {
+      "transparent": "transparent",
       "neutral": {
         "100": "#f8f9fa",
         "200": "#e9ecef",
@@ -327,8 +328,7 @@
       "easeInBack": "cubic-bezier(0.36, 0, 0.66, -0.56)",
       "easeOutBack": "cubic-bezier(0.34, 1.56, 0.64, 1)",
       "easeInOutBack": "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
-    },
-    "$ref": "./base/index.json"
+    }
   },
   "component": {
     "button": {
@@ -382,6 +382,20 @@
             "textColor": "#adb5bd"
           }
         },
+        "accent": {
+          "backgroundColor": "#0265DC",
+          "textColor": "#ffffff",
+          "hover": {
+            "backgroundColor": "#0054B6"
+          },
+          "active": {
+            "backgroundColor": "#004491"
+          },
+          "disabled": {
+            "backgroundColor": "#dee2e6",
+            "textColor": "#adb5bd"
+          }
+        },
         "emphasis": {
           "backgroundColor": "#0265DC",
           "textColor": "#ffffff",
@@ -631,7 +645,7 @@
       "default": {
         "backgroundColor": "#ffffff",
         "textColor": "#212529",
-        "borderColor": "#dee2e6",
+        "borderColor": "#6c757d",
         "borderRadius": "0.25rem",
         "borderWidth": "0.0625rem",
         "paddingY": "11px",
@@ -639,7 +653,7 @@
         "font": "400 1rem/1.5rem 'Inter', sans-serif"
       },
       "placeholder": {
-        "textColor": "#adb5bd"
+        "textColor": "#495057"
       },
       "hover": {
         "borderColor": "#343a40"
@@ -711,6 +725,42 @@
       }
     },
     "alert": {
+      "severity": {
+        "error": {
+          "background": "#FFEBE7",
+          "text": "#D31510"
+        },
+        "warning": {
+          "background": "#FFECCC",
+          "text": "#B14C00"
+        },
+        "info": {
+          "background": "#E0F2FF",
+          "text": "#0265DC"
+        },
+        "success": {
+          "background": "#CEF8E0",
+          "text": "#007A4D"
+        }
+      },
+      "appearance": {
+        "outlined": {
+          "borderColor": {
+            "error": "#D31510",
+            "warning": "#B14C00",
+            "info": "#0265DC",
+            "success": "#007A4D"
+          }
+        },
+        "borderless": {
+          "borderColor": {
+            "error": "transparent",
+            "warning": "transparent",
+            "info": "transparent",
+            "success": "transparent"
+          }
+        }
+      },
       "title": {
         "typography": "500 1.125rem/1.5rem 'Inter', sans-serif",
         "fontWeight": "600",
@@ -809,8 +859,7 @@
     },
     "transactionListItem": {
       "minHeight": "4.5rem"
-    },
-    "$ref": "./component/index.json"
+    }
   },
   "semantic": {
     "elevation": {
@@ -897,12 +946,20 @@
         "md": "35rem",
         "lg": "45rem"
       },
+      "label": {
+        "small": "1.25rem",
+        "medium": "1.5rem",
+        "large": "2rem"
+      },
       "menu": {
         "maxHeight": "18.75rem"
       },
       "dimension": {
         "1": "0.25rem",
+        "2": "0.5rem",
+        "4": "1rem",
         "5": "1.25rem",
+        "6": "1.5rem",
         "8": "2rem",
         "12": "3rem",
         "15": "3.75rem",
@@ -975,6 +1032,8 @@
         "inverse": "#ffffff",
         "disabled": "#adb5bd",
         "interactive": "#0265DC",
+        "interactive-hover": "#0054B6",
+        "interactive-active": "#004491",
         "error": "#D31510",
         "success": "#007A4D",
         "warning": "#B14C00"
@@ -983,19 +1042,29 @@
         "default": "#f8f9fa",
         "subtle": "#ffffff",
         "emphasis": "#212529",
+        "emphasis-hover": "#343a40",
+        "emphasis-active": "#16191C",
         "surface": "#e9ecef",
         "inverse": "#343a40",
         "interactive": "#0265DC",
         "interactive-subtle": "#E0F2FF",
+        "interactive-subtle-hover": "#CAE8FF",
+        "interactive-subtle-active": "#B5DEFF",
         "interactive-hover": "#0054B6",
         "interactive-active": "#004491",
         "error": "#D31510",
+        "error-hover": "#B40000",
+        "error-active": "#930000",
         "error-subtle": "#FFEBE7",
         "success": "#007A4D",
         "success-subtle": "#CEF8E0",
         "warning": "#B14C00",
         "warning-subtle": "#FFECCC",
         "disabled": "#dee2e6",
+        "neutral": "#dee2e6",
+        "neutral-hover": "#ced4da",
+        "neutral-active": "#adb5bd",
+        "transparent": "transparent",
         "progressTrack": "#dee2e6",
         "page": "#f8f9fa",
         "overlay": "rgba(33, 37, 41, 0.5)",
@@ -1006,11 +1075,13 @@
       "border": {
         "default": "#e9ecef",
         "subtle": "#dee2e6",
+        "control": "#6c757d",
         "strong": "#343a40",
         "interactive": "#0265DC",
         "error": "#D31510",
         "success": "#007A4D",
-        "warning": "#B14C00"
+        "warning": "#B14C00",
+        "none": "transparent"
       },
       "icon": {
         "default": "#212529",
@@ -1057,10 +1128,18 @@
         "orange-subtle": "#FFECCC",
         "gray": "#495057",
         "gray-emphasis": "#212529",
-        "gray-subtle": "#e9ecef"
+        "gray-subtle": "#e9ecef",
+        "blue-text": "#0265DC",
+        "purple-text": "#7E2EBD",
+        "pink-text": "#B90064",
+        "yellow-text": "#825800",
+        "green-text": "#007A4D",
+        "red-text": "#D31510",
+        "orange-text": "#B14C00",
+        "gray-text": "#212529"
       },
       "status": {
-        "pending": "#D39700",
+        "pending": "#825800",
         "pending-bg": "#FFF3D6",
         "completed": "#007A4D",
         "completed-bg": "#CEF8E0",
@@ -1111,7 +1190,6 @@
       "hover": "background-color 150ms ease-out, color 150ms ease-out",
       "focus": "outline 150ms ease-out, outline-offset 150ms ease-out",
       "interactive": "transform 150ms ease-out, opacity 150ms ease-out"
-    },
-    "$ref": "./semantic/index.json"
+    }
   }
 }

package/dist/tokens/index.esm.js

@@ -106,6 +106,7 @@ var base = {
 		fit: "fit-content"
 	},
 	color: {
+		transparent: "transparent",
 		neutral: {
 			"100": "#f8f9fa",
 			"200": "#e9ecef",
@@ -326,8 +327,7 @@ var base = {
 		easeInBack: "cubic-bezier(0.36, 0, 0.66, -0.56)",
 		easeOutBack: "cubic-bezier(0.34, 1.56, 0.64, 1)",
 		easeInOutBack: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
-	},
-	$ref: "./base/index.json"
+	}
 };
 var component = {
 	button: {
@@ -381,6 +381,20 @@ var component = {
 					textColor: "#adb5bd"
 				}
 			},
+			accent: {
+				backgroundColor: "#0265DC",
+				textColor: "#ffffff",
+				hover: {
+					backgroundColor: "#0054B6"
+				},
+				active: {
+					backgroundColor: "#004491"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
+			},
 			emphasis: {
 				backgroundColor: "#0265DC",
 				textColor: "#ffffff",
@@ -630,7 +644,7 @@ var component = {
 		"default": {
 			backgroundColor: "#ffffff",
 			textColor: "#212529",
-			borderColor: "#dee2e6",
+			borderColor: "#6c757d",
 			borderRadius: "0.25rem",
 			borderWidth: "0.0625rem",
 			paddingY: "11px",
@@ -638,7 +652,7 @@ var component = {
 			font: "400 1rem/1.5rem 'Inter', sans-serif"
 		},
 		placeholder: {
-			textColor: "#adb5bd"
+			textColor: "#495057"
 		},
 		hover: {
 			borderColor: "#343a40"
@@ -710,6 +724,42 @@ var component = {
 		}
 	},
 	alert: {
+		severity: {
+			error: {
+				background: "#FFEBE7",
+				text: "#D31510"
+			},
+			warning: {
+				background: "#FFECCC",
+				text: "#B14C00"
+			},
+			info: {
+				background: "#E0F2FF",
+				text: "#0265DC"
+			},
+			success: {
+				background: "#CEF8E0",
+				text: "#007A4D"
+			}
+		},
+		appearance: {
+			outlined: {
+				borderColor: {
+					error: "#D31510",
+					warning: "#B14C00",
+					info: "#0265DC",
+					success: "#007A4D"
+				}
+			},
+			borderless: {
+				borderColor: {
+					error: "transparent",
+					warning: "transparent",
+					info: "transparent",
+					success: "transparent"
+				}
+			}
+		},
 		title: {
 			typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
 			fontWeight: "600",
@@ -808,8 +858,7 @@ var component = {
 	},
 	transactionListItem: {
 		minHeight: "4.5rem"
-	},
-	$ref: "./component/index.json"
+	}
 };
 var semantic = {
 	elevation: {
@@ -896,12 +945,20 @@ var semantic = {
 			md: "35rem",
 			lg: "45rem"
 		},
+		label: {
+			small: "1.25rem",
+			medium: "1.5rem",
+			large: "2rem"
+		},
 		menu: {
 			maxHeight: "18.75rem"
 		},
 		dimension: {
 			"1": "0.25rem",
+			"2": "0.5rem",
+			"4": "1rem",
 			"5": "1.25rem",
+			"6": "1.5rem",
 			"8": "2rem",
 			"12": "3rem",
 			"15": "3.75rem",
@@ -974,6 +1031,8 @@ var semantic = {
 			inverse: "#ffffff",
 			disabled: "#adb5bd",
 			interactive: "#0265DC",
+			"interactive-hover": "#0054B6",
+			"interactive-active": "#004491",
 			error: "#D31510",
 			success: "#007A4D",
 			warning: "#B14C00"
@@ -982,19 +1041,29 @@ var semantic = {
 			"default": "#f8f9fa",
 			subtle: "#ffffff",
 			emphasis: "#212529",
+			"emphasis-hover": "#343a40",
+			"emphasis-active": "#16191C",
 			surface: "#e9ecef",
 			inverse: "#343a40",
 			interactive: "#0265DC",
 			"interactive-subtle": "#E0F2FF",
+			"interactive-subtle-hover": "#CAE8FF",
+			"interactive-subtle-active": "#B5DEFF",
 			"interactive-hover": "#0054B6",
 			"interactive-active": "#004491",
 			error: "#D31510",
+			"error-hover": "#B40000",
+			"error-active": "#930000",
 			"error-subtle": "#FFEBE7",
 			success: "#007A4D",
 			"success-subtle": "#CEF8E0",
 			warning: "#B14C00",
 			"warning-subtle": "#FFECCC",
 			disabled: "#dee2e6",
+			neutral: "#dee2e6",
+			"neutral-hover": "#ced4da",
+			"neutral-active": "#adb5bd",
+			transparent: "transparent",
 			progressTrack: "#dee2e6",
 			page: "#f8f9fa",
 			overlay: "rgba(33, 37, 41, 0.5)",
@@ -1005,11 +1074,13 @@ var semantic = {
 		border: {
 			"default": "#e9ecef",
 			subtle: "#dee2e6",
+			control: "#6c757d",
 			strong: "#343a40",
 			interactive: "#0265DC",
 			error: "#D31510",
 			success: "#007A4D",
-			warning: "#B14C00"
+			warning: "#B14C00",
+			none: "transparent"
 		},
 		icon: {
 			"default": "#212529",
@@ -1056,10 +1127,18 @@ var semantic = {
 			"orange-subtle": "#FFECCC",
 			gray: "#495057",
 			"gray-emphasis": "#212529",
-			"gray-subtle": "#e9ecef"
+			"gray-subtle": "#e9ecef",
+			"blue-text": "#0265DC",
+			"purple-text": "#7E2EBD",
+			"pink-text": "#B90064",
+			"yellow-text": "#825800",
+			"green-text": "#007A4D",
+			"red-text": "#D31510",
+			"orange-text": "#B14C00",
+			"gray-text": "#212529"
 		},
 		status: {
-			pending: "#D39700",
+			pending: "#825800",
 			"pending-bg": "#FFF3D6",
 			completed: "#007A4D",
 			"completed-bg": "#CEF8E0",
@@ -1110,8 +1189,7 @@ var semantic = {
 		hover: "background-color 150ms ease-out, color 150ms ease-out",
 		focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
 		interactive: "transform 150ms ease-out, opacity 150ms ease-out"
-	},
-	$ref: "./semantic/index.json"
+	}
 };
 var tokensJson = {
 	base: base,

package/dist/tokens/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../src/types/tokens.ts","../../src/tokens.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","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n  Tokens,\n  TokensBase,\n  TokensSemantic,\n  TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../src/types/tokens.ts","../../src/tokens.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","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n  Tokens,\n  TokensBase,\n  TokensSemantic,\n  TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;"}

package/dist/tokens/index.js

@@ -110,6 +110,7 @@ var base = {
 		fit: "fit-content"
 	},
 	color: {
+		transparent: "transparent",
 		neutral: {
 			"100": "#f8f9fa",
 			"200": "#e9ecef",
@@ -330,8 +331,7 @@ var base = {
 		easeInBack: "cubic-bezier(0.36, 0, 0.66, -0.56)",
 		easeOutBack: "cubic-bezier(0.34, 1.56, 0.64, 1)",
 		easeInOutBack: "cubic-bezier(0.68, -0.6, 0.32, 1.6)"
-	},
-	$ref: "./base/index.json"
+	}
 };
 var component = {
 	button: {
@@ -385,6 +385,20 @@ var component = {
 					textColor: "#adb5bd"
 				}
 			},
+			accent: {
+				backgroundColor: "#0265DC",
+				textColor: "#ffffff",
+				hover: {
+					backgroundColor: "#0054B6"
+				},
+				active: {
+					backgroundColor: "#004491"
+				},
+				disabled: {
+					backgroundColor: "#dee2e6",
+					textColor: "#adb5bd"
+				}
+			},
 			emphasis: {
 				backgroundColor: "#0265DC",
 				textColor: "#ffffff",
@@ -634,7 +648,7 @@ var component = {
 		"default": {
 			backgroundColor: "#ffffff",
 			textColor: "#212529",
-			borderColor: "#dee2e6",
+			borderColor: "#6c757d",
 			borderRadius: "0.25rem",
 			borderWidth: "0.0625rem",
 			paddingY: "11px",
@@ -642,7 +656,7 @@ var component = {
 			font: "400 1rem/1.5rem 'Inter', sans-serif"
 		},
 		placeholder: {
-			textColor: "#adb5bd"
+			textColor: "#495057"
 		},
 		hover: {
 			borderColor: "#343a40"
@@ -714,6 +728,42 @@ var component = {
 		}
 	},
 	alert: {
+		severity: {
+			error: {
+				background: "#FFEBE7",
+				text: "#D31510"
+			},
+			warning: {
+				background: "#FFECCC",
+				text: "#B14C00"
+			},
+			info: {
+				background: "#E0F2FF",
+				text: "#0265DC"
+			},
+			success: {
+				background: "#CEF8E0",
+				text: "#007A4D"
+			}
+		},
+		appearance: {
+			outlined: {
+				borderColor: {
+					error: "#D31510",
+					warning: "#B14C00",
+					info: "#0265DC",
+					success: "#007A4D"
+				}
+			},
+			borderless: {
+				borderColor: {
+					error: "transparent",
+					warning: "transparent",
+					info: "transparent",
+					success: "transparent"
+				}
+			}
+		},
 		title: {
 			typography: "500 1.125rem/1.5rem 'Inter', sans-serif",
 			fontWeight: "600",
@@ -812,8 +862,7 @@ var component = {
 	},
 	transactionListItem: {
 		minHeight: "4.5rem"
-	},
-	$ref: "./component/index.json"
+	}
 };
 var semantic = {
 	elevation: {
@@ -900,12 +949,20 @@ var semantic = {
 			md: "35rem",
 			lg: "45rem"
 		},
+		label: {
+			small: "1.25rem",
+			medium: "1.5rem",
+			large: "2rem"
+		},
 		menu: {
 			maxHeight: "18.75rem"
 		},
 		dimension: {
 			"1": "0.25rem",
+			"2": "0.5rem",
+			"4": "1rem",
 			"5": "1.25rem",
+			"6": "1.5rem",
 			"8": "2rem",
 			"12": "3rem",
 			"15": "3.75rem",
@@ -978,6 +1035,8 @@ var semantic = {
 			inverse: "#ffffff",
 			disabled: "#adb5bd",
 			interactive: "#0265DC",
+			"interactive-hover": "#0054B6",
+			"interactive-active": "#004491",
 			error: "#D31510",
 			success: "#007A4D",
 			warning: "#B14C00"
@@ -986,19 +1045,29 @@ var semantic = {
 			"default": "#f8f9fa",
 			subtle: "#ffffff",
 			emphasis: "#212529",
+			"emphasis-hover": "#343a40",
+			"emphasis-active": "#16191C",
 			surface: "#e9ecef",
 			inverse: "#343a40",
 			interactive: "#0265DC",
 			"interactive-subtle": "#E0F2FF",
+			"interactive-subtle-hover": "#CAE8FF",
+			"interactive-subtle-active": "#B5DEFF",
 			"interactive-hover": "#0054B6",
 			"interactive-active": "#004491",
 			error: "#D31510",
+			"error-hover": "#B40000",
+			"error-active": "#930000",
 			"error-subtle": "#FFEBE7",
 			success: "#007A4D",
 			"success-subtle": "#CEF8E0",
 			warning: "#B14C00",
 			"warning-subtle": "#FFECCC",
 			disabled: "#dee2e6",
+			neutral: "#dee2e6",
+			"neutral-hover": "#ced4da",
+			"neutral-active": "#adb5bd",
+			transparent: "transparent",
 			progressTrack: "#dee2e6",
 			page: "#f8f9fa",
 			overlay: "rgba(33, 37, 41, 0.5)",
@@ -1009,11 +1078,13 @@ var semantic = {
 		border: {
 			"default": "#e9ecef",
 			subtle: "#dee2e6",
+			control: "#6c757d",
 			strong: "#343a40",
 			interactive: "#0265DC",
 			error: "#D31510",
 			success: "#007A4D",
-			warning: "#B14C00"
+			warning: "#B14C00",
+			none: "transparent"
 		},
 		icon: {
 			"default": "#212529",
@@ -1060,10 +1131,18 @@ var semantic = {
 			"orange-subtle": "#FFECCC",
 			gray: "#495057",
 			"gray-emphasis": "#212529",
-			"gray-subtle": "#e9ecef"
+			"gray-subtle": "#e9ecef",
+			"blue-text": "#0265DC",
+			"purple-text": "#7E2EBD",
+			"pink-text": "#B90064",
+			"yellow-text": "#825800",
+			"green-text": "#007A4D",
+			"red-text": "#D31510",
+			"orange-text": "#B14C00",
+			"gray-text": "#212529"
 		},
 		status: {
-			pending: "#D39700",
+			pending: "#825800",
 			"pending-bg": "#FFF3D6",
 			completed: "#007A4D",
 			"completed-bg": "#CEF8E0",
@@ -1114,8 +1193,7 @@ var semantic = {
 		hover: "background-color 150ms ease-out, color 150ms ease-out",
 		focus: "outline 150ms ease-out, outline-offset 150ms ease-out",
 		interactive: "transform 150ms ease-out, opacity 150ms ease-out"
-	},
-	$ref: "./semantic/index.json"
+	}
 };
 var tokensJson = {
 	base: base,

package/dist/tokens/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/types/tokens.ts","../../src/tokens.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","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n  Tokens,\n  TokensBase,\n  TokensSemantic,\n  TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/types/tokens.ts","../../src/tokens.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","// Tokens-only export for standalone usage\nimport { tokens } from './types/tokens'\n\nexport { tokens }\nexport default tokens\n\nexport type {\n  Tokens,\n  TokensBase,\n  TokensSemantic,\n  TokensComponent\n} from './types/tokens'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA;AACO,IAAM,MAAM,GAAG;;ACJtB;;;;;"}