@common-origin/design-system 1.8.1 → 1.8.3

package/dist/index.esm.js

@@ -831,13 +831,144 @@ var Avatar = function Avatar(_a) {
 var templateObject_1$m, templateObject_2$b, templateObject_3$9;
 
 React.createElement;
-var _a$6 = tokens.semantic,
-  color$4 = _a$6.color,
-  typography$3 = _a$6.typography,
-  _b$2 = tokens.base,
-  fontSize = _b$2.fontSize;
-  _b$2.shadow;
-var scaleIn = keyframes(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
+var _a$5 = tokens.semantic,
+  typography$2 = _a$5.typography,
+  color$4 = _a$5.color;
+var getTypographyStyles = function getTypographyStyles(variant) {
+  var styles = {
+    display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
+    h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
+    h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
+    h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
+    h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
+    h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
+    h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
+    subtitle: "font: ".concat(typography$2.subtitle, ";"),
+    body: "font: ".concat(typography$2.body, ";"),
+    small: "font: ".concat(typography$2.small, ";"),
+    overline: "font: ".concat(typography$2.overline, ";"),
+    caption: "font: ".concat(typography$2.caption, "; text-transform: uppercase;"),
+    button1: "font: ".concat(typography$2.button1, ";"),
+    button2: "font: ".concat(typography$2.button2, ";"),
+    button3: "font: ".concat(typography$2.button3, ";"),
+    label: "font: ".concat(typography$2.label, ";")
+  };
+  return styles[variant] || styles.body;
+};
+var getTextColor = function getTextColor(colorVariant) {
+  var colorMap = {
+    "default": color$4.text["default"],
+    emphasis: color$4.text.emphasis,
+    subdued: color$4.text.subdued,
+    inverse: color$4.text.inverse,
+    disabled: color$4.text.disabled,
+    interactive: color$4.text.interactive,
+    error: color$4.text.error,
+    success: color$4.text.success,
+    warning: color$4.text.warning
+  };
+  return colorMap[colorVariant] || colorMap["default"];
+};
+var getDefaultElement = function getDefaultElement(variant) {
+  var elementMap = {
+    display: 'h1',
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    subtitle: 'p',
+    body: 'p',
+    small: 'span',
+    overline: 'span',
+    caption: 'span',
+    button1: 'span',
+    button2: 'span',
+    button3: 'span',
+    label: 'span'
+  };
+  return elementMap[variant] || 'span';
+};
+var StyledTypography = styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Typography__StyledTypography",
+  componentId: "sc-17mqo4k-0"
+})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */])), function (_a) {
+  var $variant = _a.$variant;
+  return getTypographyStyles($variant);
+}, function (_a) {
+  var $color = _a.$color;
+  return getTextColor($color);
+}, function (_a) {
+  var $variant = _a.$variant;
+  if (['body', 'subtitle', 'small'].includes($variant)) {
+    return 'line-height: 1.5;';
+  }
+  return '';
+});
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */
+var Typography = function Typography(_a) {
+  var _b = _a.variant,
+    variant = _b === void 0 ? 'body' : _b,
+    children = _a.children,
+    _c = _a.color,
+    color = _c === void 0 ? 'default' : _c,
+    as = _a.as,
+    dataTestId = _a["data-testid"];
+  // $variant and $color are only used for styled-components prop filtering
+  var defaultElement = getDefaultElement(variant);
+  var elementType = as || defaultElement;
+  return /*#__PURE__*/React.createElement(StyledTypography, {
+    as: elementType,
+    $variant: variant,
+    $color: color,
+    "data-testid": dataTestId
+  }, children);
+};
+var templateObject_1$l;
+
+React.createElement;
+var color$3 = tokens.semantic.color;
+  tokens.base.shadow;
+var scaleIn = keyframes(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
 var BadgeWrapper = styled.span.withConfig({
   displayName: "Badge__BadgeWrapper",
   componentId: "sc-tjz4pp-0"
@@ -848,26 +979,26 @@ var BadgeIndicator = styled.span.withConfig({
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  font: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  font: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"])), function (props) {
+})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  display: ", ";\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  border-radius: ", ";\n  line-height: 1;\n  white-space: nowrap;\n  box-shadow: 0 0 0 2px ", ";\n  animation: ", " 0.2s ease-out;\n  \n  ", "\n"])), function (props) {
   return props.$isVisible ? 'flex' : 'none';
 }, function (props) {
-  return props.$isDot ? '8px' : '20px';
+  return props.$isDot ? '8px' : '16px';
 }, function (props) {
-  return props.$isDot ? '8px' : '20px';
+  return props.$isDot ? '8px' : '16px';
 }, function (props) {
-  return props.$isDot ? '0' : '0 6px';
-}, tokens.base.border.radius.circle, typography$3.caption, fontSize[1], color$4.background["default"], scaleIn, function (props) {
+  return props.$isDot ? '0' : '0 4px';
+}, tokens.base.border.radius.circle, color$3.background["default"], scaleIn, function (props) {
   switch (props.$variant) {
     case 'primary':
-      return "\n          background-color: ".concat(color$4.background.interactive, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$3.background.interactive, ";\n          color: ").concat(color$3.text.inverse, ";\n        ");
     case 'error':
-      return "\n          background-color: ".concat(color$4.background.error, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$3.background.error, ";\n          color: ").concat(color$3.text.inverse, ";\n        ");
     case 'warning':
-      return "\n          background-color: ".concat(color$4.background.warning, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$3.background.warning, ";\n          color: ").concat(color$3.text.inverse, ";\n        ");
     case 'success':
-      return "\n          background-color: ".concat(color$4.background.success, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$3.background.success, ";\n          color: ").concat(color$3.text.inverse, ";\n        ");
     default:
-      return "\n          background-color: ".concat(color$4.background.emphasis, ";\n          color: ").concat(color$4.text.inverse, ";\n        ");
+      return "\n          background-color: ".concat(color$3.background.emphasis, ";\n          color: ").concat(color$3.text.inverse, ";\n        ");
   }
 });
 var ScreenReaderOnly = styled.span.withConfig({
@@ -899,9 +1030,12 @@ var Badge = function Badge(_a) {
     $isVisible: isVisible,
     role: "status",
     "aria-live": "polite"
-  }, !dot && displayCount, /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
+  }, !dot && /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption",
+    color: "inverse"
+  }, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
 };
-var templateObject_1$l, templateObject_2$a, templateObject_3$8, templateObject_4$6;
+var templateObject_1$k, templateObject_2$a, templateObject_3$8, templateObject_4$6;
 
 React.createElement;
 var StyledBox = styled.div.withConfig({
@@ -913,7 +1047,7 @@ var StyledBox = styled.div.withConfig({
 })(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"
 // Transform component that maps clean props to $-prefixed props for styled-components
 ])), function (props) {
-  return props.$display && css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
   return props.$flexDirection && css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
@@ -1103,7 +1237,7 @@ var BoxTransform = function BoxTransform(props) {
   }, rest), children);
 };
 var Box = BoxTransform;
-var templateObject_1$k, templateObject_2$9, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$2, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
+var templateObject_1$j, templateObject_2$9, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$2, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
 
 var add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
@@ -1145,6 +1279,10 @@ var directionRight = {
 	path: "M20 12L20.7071 11.2929L21.4142 12L20.7071 12.7071L20 12ZM5 13C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11V13ZM14 6L14.7071 5.29289L20.7071 11.2929L20 12L19.2929 12.7071L13.2929 6.70711L14 6ZM20 12L20.7071 12.7071L14.7071 18.7071L14 18L13.2929 17.2929L19.2929 11.2929L20 12ZM20 12V13H5V12V11H20V12Z",
 	name: "directionRight"
 };
+var filter = {
+	path: "M20 7C20.5523 7 21 7.44771 21 8C21 8.55228 20.5523 9 20 9H11C10.4477 9 10 8.55228 10 8C10 7.44772 10.4477 7 11 7L20 7Z M14 15C14.5523 15 15 15.4477 15 16C15 16.5523 14.5523 17 14 17L4 17C3.44772 17 3 16.5523 3 16C3 15.4477 3.44772 15 4 15L14 15Z M7 10C8.10457 10 9 9.10457 9 8C9 6.89543 8.10457 6 7 6C5.89543 6 5 6.89543 5 8C5 9.10457 5.89543 10 7 10ZM7 12C4.79086 12 3 10.2091 3 8C3 5.79086 4.79086 4 7 4C9.20914 4 11 5.79086 11 8C11 10.2091 9.20914 12 7 12Z M17 18C18.1046 18 19 17.1046 19 16C19 14.8954 18.1046 14 17 14C15.8954 14 15 14.8954 15 16C15 17.1046 15.8954 18 17 18ZM17 20C14.7909 20 13 18.2091 13 16C13 13.7909 14.7909 12 17 12C19.2091 12 21 13.7909 21 16C21 18.2091 19.2091 20 17 20Z",
+	name: "filter"
+};
 var menu = {
 	path: "M4 7a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 5a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 5a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z",
 	name: "menu"
@@ -1200,6 +1338,7 @@ var iconsData = {
 	path: "M7.70703 10.707L11 7.41406L11 14C11 14.5523 11.4477 15 12 15C12.5523 15 13 14.5523 13 14V7.41406L16.293 10.707L17.707 9.29297L12 3.58594L6.29297 9.29297L7.70703 10.707Z M4 17V16H6V17C6 17.5523 6.44772 18 7 18H17C17.5523 18 18 17.5523 18 17V16H20V17C20 18.6051 18.7394 19.9158 17.1543 19.9961L17 20H7C5.34315 20 4 18.6569 4 17Z",
 	name: "export"
 },
+	filter: filter,
 	menu: menu,
 	pause: pause,
 	play: play,
@@ -1219,7 +1358,7 @@ var IconStyled = styled.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$j || (templateObject_1$j = __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) {
+})(templateObject_1$i || (templateObject_1$i = __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) {
@@ -1283,7 +1422,7 @@ var Icon = function Icon(_a) {
     d: iconData.path
   })));
 };
-var templateObject_1$j;
+var templateObject_1$i;
 
 React.createElement;
 var button = tokens.component.button,
@@ -1315,7 +1454,7 @@ var StyledButton = styled.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
 var StyledLink = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -1415,7 +1554,7 @@ var Button = function Button(_a) {
     "data-testid": dataTestId
   }, buttonProps), renderButtonContent(children, iconName, size));
 };
-var templateObject_1$i, templateObject_2$8;
+var templateObject_1$h, templateObject_2$8;
 
 var chip = tokens.component.chip;
 // Helper function to get variant styles as objects for CSS custom properties
@@ -1476,7 +1615,7 @@ var BaseChipStyled = styled.span.withConfig({
   },
   displayName: "ChipBase__BaseChipStyled",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
+})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
 // Icon container for selected indicator or leading icons
 ])), tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
 // Icon container for selected indicator or leading icons
@@ -1528,7 +1667,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
     style: __assign(__assign({}, cssProps), style)
   }, htmlProps), children);
 };
-var templateObject_1$h, templateObject_2$7, templateObject_3$6;
+var templateObject_1$g, templateObject_2$7, templateObject_3$6;
 
 React.createElement;
 /**
@@ -1772,20 +1911,20 @@ var spacing$3 = tokens.semantic.spacing;
 var StyledContainer = styled.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"])), spacing$3.layout['2xl'], spacing$3.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"])), spacing$3.layout['2xl'], spacing$3.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
 var Container = function Container(_a) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
   return /*#__PURE__*/React.createElement(StyledContainer, props, children);
 };
-var templateObject_1$g;
+var templateObject_1$f;
 
 React.createElement;
 var base = tokens.base;
 var PictureWrapper = styled.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"])), media$1.sm);
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"])), media$1.sm);
 var ImageLink = styled.a.withConfig({
   displayName: "Picture__ImageLink",
   componentId: "sc-11d9tei-1"
@@ -1824,16 +1963,16 @@ var Picture = function Picture(_a) {
     "aria-label": "Read more about ".concat(title)
   }, image) : image);
 };
-var templateObject_1$f, templateObject_2$6, templateObject_3$5, templateObject_4$4;
+var templateObject_1$e, templateObject_2$6, templateObject_3$5, templateObject_4$4;
 
 React.createElement;
-var _a$5 = tokens.semantic,
-  typography$2 = _a$5.typography,
-  color$3 = _a$5.color;
+var _a$4 = tokens.semantic,
+  typography$1 = _a$4.typography,
+  color$2 = _a$4.color;
 var TimeStyled = styled.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography$2.label, color$3.text.subdued);
+})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography$1.label, color$2.text.subdued);
 var DateFormatter = function DateFormatter(_a) {
   var dateString = _a.dateString,
     _b = _a.formatString,
@@ -1845,7 +1984,7 @@ var DateFormatter = function DateFormatter(_a) {
     "data-testid": dataTestId
   }, format(date, formatString));
 };
-var templateObject_1$e;
+var templateObject_1$d;
 
 React.createElement;
 var motion = tokens.semantic.motion,
@@ -1856,7 +1995,7 @@ var IconButtonStyled = styled.button.withConfig({
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"], ["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), function (_a) {
+})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"], ["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'primary':
@@ -1967,7 +2106,7 @@ var IconButton = function IconButton(_a) {
     "aria-hidden": "true" // Hide icon from screen readers since button has aria-label
   }));
 };
-var templateObject_1$d;
+var templateObject_1$c;
 
 React.createElement;
 var ProgressBarContainer = styled.div.withConfig({
@@ -1977,7 +2116,7 @@ var ProgressBarContainer = styled.div.withConfig({
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
 })(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"])), tokens.semantic.color.background.disabled, tokens.base.border.radius[1], function (props) {
-  return props.$variant === 'horizontal' && css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? tokens.component.progressBar.sizes[props.$height].height : tokens.component.progressBar.sizes.md.height);
+  return props.$variant === 'horizontal' && css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? tokens.component.progressBar.sizes[props.$height].height : tokens.component.progressBar.sizes.md.height);
 }, function (props) {
   return props.$variant === 'vertical' && css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? tokens.component.progressBar.sizes[props.$width].height : tokens.component.progressBar.sizes.md.height);
 });
@@ -2031,7 +2170,7 @@ var ProgressBar = function ProgressBar(_a) {
     $color: color
   }));
 };
-var templateObject_1$c, templateObject_2$5, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$1, templateObject_7$1;
+var templateObject_1$b, templateObject_2$5, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$1, templateObject_7$1;
 
 React.createElement;
 var StyledDivider = styled.div.withConfig({
@@ -2040,7 +2179,7 @@ var StyledDivider = styled.div.withConfig({
   },
   displayName: "Divider__StyledDivider",
   componentId: "sc-1l0c8ja-0"
-})(templateObject_1$b || (templateObject_1$b = __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"
+})(templateObject_1$a || (templateObject_1$a = __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.
  *
@@ -2153,7 +2292,7 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$b;
+var templateObject_1$a;
 
 React.createElement;
 var StyledStack = styled.div.withConfig({
@@ -2162,7 +2301,7 @@ var StyledStack = styled.div.withConfig({
   },
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
-})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
+})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
 // Helper function to convert gap prop to CSS value
 ])));
 // Helper function to convert gap prop to CSS value
@@ -2200,141 +2339,6 @@ var Stack = function Stack(_a) {
     "data-testid": dataTestId
   }, children);
 };
-var templateObject_1$a;
-
-React.createElement;
-var _a$4 = tokens.semantic,
-  typography$1 = _a$4.typography,
-  color$2 = _a$4.color;
-var getTypographyStyles = function getTypographyStyles(variant) {
-  var styles = {
-    display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
-    h1: "font: ".concat(typography$1.h1, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
-    h2: "font: ".concat(typography$1.h2, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
-    h3: "font: ".concat(typography$1.h3, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
-    h4: "font: ".concat(typography$1.h4, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
-    h5: "font: ".concat(typography$1.h5, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
-    h6: "font: ".concat(typography$1.h6, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
-    subtitle: "font: ".concat(typography$1.subtitle, ";"),
-    body: "font: ".concat(typography$1.body, ";"),
-    small: "font: ".concat(typography$1.small, ";"),
-    overline: "font: ".concat(typography$1.overline, ";"),
-    caption: "font: ".concat(typography$1.caption, "; text-transform: uppercase;"),
-    button1: "font: ".concat(typography$1.button1, ";"),
-    button2: "font: ".concat(typography$1.button2, ";"),
-    button3: "font: ".concat(typography$1.button3, ";"),
-    label: "font: ".concat(typography$1.label, ";")
-  };
-  return styles[variant] || styles.body;
-};
-var getTextColor = function getTextColor(colorVariant) {
-  var colorMap = {
-    "default": color$2.text["default"],
-    emphasis: color$2.text.emphasis,
-    subdued: color$2.text.subdued,
-    inverse: color$2.text.inverse,
-    disabled: color$2.text.disabled,
-    interactive: color$2.text.interactive,
-    error: color$2.text.error,
-    success: color$2.text.success,
-    warning: color$2.text.warning
-  };
-  return colorMap[colorVariant] || colorMap["default"];
-};
-var getDefaultElement = function getDefaultElement(variant) {
-  var elementMap = {
-    display: 'h1',
-    h1: 'h1',
-    h2: 'h2',
-    h3: 'h3',
-    h4: 'h4',
-    h5: 'h5',
-    h6: 'h6',
-    subtitle: 'p',
-    body: 'p',
-    small: 'span',
-    overline: 'span',
-    caption: 'span',
-    button1: 'span',
-    button2: 'span',
-    button3: 'span',
-    label: 'span'
-  };
-  return elementMap[variant] || 'span';
-};
-var StyledTypography = styled.span.withConfig({
-  shouldForwardProp: function shouldForwardProp(prop) {
-    return !prop.startsWith('$');
-  },
-  displayName: "Typography__StyledTypography",
-  componentId: "sc-17mqo4k-0"
-})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"
-/**
- * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
- *
- * Features:
- * - Semantic variants (h1-h6, body, subtitle, etc.)
- * - Color variants for different contexts
- * - Automatic semantic HTML element selection
- * - Manual element override support
- * - Direct semantic token usage (no component tokens needed)
- * - Full accessibility support
- *
- * @example
- * ```tsx
- * <Typography variant="h1">Main Heading</Typography>
- * <Typography variant="body" color="subdued">Body text</Typography>
- * <Typography variant="caption" as="figcaption">Image caption</Typography>
- * ```
- */])), function (_a) {
-  var $variant = _a.$variant;
-  return getTypographyStyles($variant);
-}, function (_a) {
-  var $color = _a.$color;
-  return getTextColor($color);
-}, function (_a) {
-  var $variant = _a.$variant;
-  if (['body', 'subtitle', 'small'].includes($variant)) {
-    return 'line-height: 1.5;';
-  }
-  return '';
-});
-/**
- * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
- *
- * Features:
- * - Semantic variants (h1-h6, body, subtitle, etc.)
- * - Color variants for different contexts
- * - Automatic semantic HTML element selection
- * - Manual element override support
- * - Direct semantic token usage (no component tokens needed)
- * - Full accessibility support
- *
- * @example
- * ```tsx
- * <Typography variant="h1">Main Heading</Typography>
- * <Typography variant="body" color="subdued">Body text</Typography>
- * <Typography variant="caption" as="figcaption">Image caption</Typography>
- * ```
- */
-var Typography = function Typography(_a) {
-  var _b = _a.variant,
-    variant = _b === void 0 ? 'body' : _b,
-    children = _a.children,
-    _c = _a.color,
-    color = _c === void 0 ? 'default' : _c,
-    as = _a.as,
-    dataTestId = _a["data-testid"];
-  // $variant and $color are only used for styled-components prop filtering
-  var defaultElement = getDefaultElement(variant);
-  var elementType = as || defaultElement;
-  return /*#__PURE__*/React.createElement(StyledTypography, {
-    as: elementType,
-    $variant: variant,
-    $color: color,
-    "data-testid": dataTestId
-  }, children);
-};
 var templateObject_1$9;
 
 React.createElement;