@common-origin/design-system 2.4.0 → 2.4.2

package/dist/components/atoms/Chip/shared/ChipBase.d.ts

@@ -1,8 +1,6 @@
-import React from 'react';
 import { InternalStyledProps } from './types';
-export declare const BaseChipStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+export declare const StyledChip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, InternalStyledProps>> & string;
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $disabled?: boolean;
 }>> & string;
-export declare const StyledChipWrapper: React.FC<React.PropsWithChildren<InternalStyledProps & React.HTMLAttributes<HTMLSpanElement>>>;

package/dist/components/atoms/Chip/shared/utils.d.ts

@@ -36,12 +36,13 @@ declare const chip: {
         };
     };
 };
-export declare const getVariantStylesAsObject: (variant: ChipVariant, selected?: boolean) => {
-    backgroundColor: string;
-    color: string;
-};
-export declare const getSizeStylesAsObject: (size: BaseChipProps["size"]) => {
-    font: string;
-    padding: string;
-};
+interface StyledChipProps {
+    $variant: ChipVariant;
+    $size: BaseChipProps['size'];
+    $disabled?: boolean;
+    $clickable?: boolean;
+    $selected?: boolean;
+}
+export declare const getVariantStyles: ({ $variant, $selected }: StyledChipProps) => string;
+export declare const getSizeStyles: ({ $size }: StyledChipProps) => string;
 export { chip as chipTokens };

package/dist/index.esm.js

@@ -887,7 +887,7 @@ var AvatarInitials = styled.span.withConfig({
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
+})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: 1;\n  text-transform: uppercase;\n  user-select: none;\n"
 // Helper function to get initials from name
 ])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
   var $size = _a.$size;
@@ -953,7 +953,7 @@ var Avatar = function Avatar(_a) {
     })
   }));
 };
-var templateObject_1$I, templateObject_2$t, templateObject_3$p;
+var templateObject_1$I, templateObject_2$t, templateObject_3$q;
 
 var _a$5 = tokensData.semantic,
   typography$2 = _a$5.typography,
@@ -1103,7 +1103,7 @@ var BadgeIndicator = styled.span.withConfig({
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$o || (templateObject_3$o = __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) {
+})(templateObject_3$p || (templateObject_3$p = __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' : '16px';
@@ -1164,7 +1164,7 @@ var Badge = function Badge(_a) {
     })]
   });
 };
-var templateObject_1$G, templateObject_2$s, templateObject_3$o, templateObject_4$j;
+var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$j;
 
 var StyledBox = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -1179,7 +1179,7 @@ var StyledBox = styled.div.withConfig({
 }, function (props) {
   return props.$flexDirection && css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
   return props.$alignItems && css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
@@ -1399,7 +1399,7 @@ var BoxTransform = function BoxTransform(props) {
   }));
 };
 var Box = BoxTransform;
-var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$5, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, 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, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
+var templateObject_1$F, templateObject_2$r, templateObject_3$o, templateObject_4$i, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$5, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, 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, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
 
 var add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
@@ -1697,12 +1697,12 @@ var button = tokensData.component.button,
 // Base styles shared between button and link
 var baseButtonStyles = "\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ".concat(tokensData.semantic.spacing.layout.xs, ";\n  height: max-content;\n  cursor: pointer;\n  border: none;\n  text-decoration: none;\n  transition: ").concat(semantic$f.motion.hover, ";\n  white-space: nowrap;\n  user-select: none;\n  \n  &:focus {\n    outline: ").concat(button.focus.outline, ";\n    outline-offset: ").concat(button.focus.outlineOffset, ";\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n");
 // Dynamic variant styles using component tokens
-var getVariantStyles = function getVariantStyles(_a) {
+var getVariantStyles$1 = function getVariantStyles(_a) {
   var $variant = _a.$variant;
   return "\n  background-color: ".concat($variant === 'primary' ? button.primary.backgroundColor : $variant === 'secondary' ? button.variants.secondary.backgroundColor : button.variants.naked.backgroundColor, ";\n  color: ").concat($variant === 'primary' ? button.primary.textColor : $variant === 'secondary' ? button.variants.secondary.textColor : button.variants.naked.textColor, ";\n  \n  &:hover:not(:disabled) {\n    background-color: ").concat($variant === 'primary' ? button.hover.backgroundColor : $variant === 'secondary' ? button.variants.secondary.hover.backgroundColor : button.variants.naked.hover.backgroundColor, ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ").concat($variant === 'primary' ? button.active.backgroundColor : $variant === 'secondary' ? button.variants.secondary.active.backgroundColor : button.variants.naked.active.backgroundColor, ";\n  }\n\n  &:disabled {\n    background-color: ").concat($variant === 'primary' ? button.disabled.backgroundColor : $variant === 'secondary' ? button.variants.secondary.disabled.backgroundColor : button.variants.naked.disabled.backgroundColor, ";\n    color: ").concat($variant === 'primary' ? button.disabled.textColor : $variant === 'secondary' ? button.variants.secondary.disabled.textColor : button.variants.naked.disabled.textColor, ";\n  }\n");
 };
 // Dynamic size styles using component tokens
-var getSizeStyles$2 = function getSizeStyles(_a) {
+var getSizeStyles$3 = function getSizeStyles(_a) {
   var $size = _a.$size;
   switch ($size) {
     case 'small':
@@ -1721,7 +1721,7 @@ var StyledButton = styled.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles$2);
+})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles$1, getSizeStyles$3);
 var StyledLink = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -1730,7 +1730,7 @@ var StyledLink = styled.a.withConfig({
   componentId: "sc-1eiuum9-1"
 })(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
 // Helper function to get icon size based on button size
-])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles$2);
+])), baseButtonStyles, button.primary.borderRadius, getVariantStyles$1, getSizeStyles$3);
 // Helper function to get icon size based on button size
 var getIconSize = function getIconSize(buttonSize) {
   switch (buttonSize) {
@@ -1856,7 +1856,7 @@ var getColorStyles = function getColorStyles(color, variant) {
     borderColor: 'transparent'
   };
 };
-var getSizeStyles$1 = function getSizeStyles(size) {
+var getSizeStyles$2 = function getSizeStyles(size) {
   if (size === 'small') {
     return {
       height: '24px',
@@ -1945,7 +1945,7 @@ var CategoryBadge = function CategoryBadge(_a) {
   var hasClickHandler = Boolean(onClick);
   var isClickable = hasClickHandler && !disabled;
   var colorStyles = getColorStyles(color, variant);
-  var sizeStyles = getSizeStyles$1(size);
+  var sizeStyles = getSizeStyles$2(size);
   var cssProps = {
     '--category-badge-bg': colorStyles.backgroundColor,
     '--category-badge-color': colorStyles.color,
@@ -1994,66 +1994,56 @@ CategoryBadge.displayName = 'CategoryBadge';
 var templateObject_1$C;
 
 var chip = tokensData.component.chip;
-// Helper function to get variant styles as objects for CSS custom properties
-var getVariantStylesAsObject = function getVariantStylesAsObject(variant, selected) {
+// Helper function to get variant styles matching Button's approach
+var getVariantStyles = function getVariantStyles(_a) {
+  var $variant = _a.$variant,
+    $selected = _a.$selected;
   // Boolean chips with selected state get special background
-  if (selected) {
-    return {
-      backgroundColor: tokensData.semantic.color.background['interactive-subtle'],
-      color: chip["default"].textColor
-    };
+  if ($selected) {
+    return "\n      background-color: ".concat(tokensData.semantic.color.background['interactive-subtle'], ";\n      color: ").concat(chip["default"].textColor, ";\n    ");
   }
-  switch (variant) {
+  switch ($variant) {
     case 'emphasis':
-      return {
-        backgroundColor: chip.variants.emphasis.backgroundColor,
-        color: chip.variants.emphasis.textColor
-      };
+      return "\n        background-color: ".concat(chip.variants.emphasis.backgroundColor, ";\n        color: ").concat(chip.variants.emphasis.textColor, ";\n      ");
     case 'subtle':
-      return {
-        backgroundColor: chip.variants.subtle.backgroundColor,
-        color: chip.variants.subtle.textColor
-      };
+      return "\n        background-color: ".concat(chip.variants.subtle.backgroundColor, ";\n        color: ").concat(chip.variants.subtle.textColor, ";\n      ");
     case 'interactive':
-      return {
-        backgroundColor: chip.variants.interactive.backgroundColor,
-        color: chip.variants.interactive.textColor
-      };
+      return "\n        background-color: ".concat(chip.variants.interactive.backgroundColor, ";\n        color: ").concat(chip.variants.interactive.textColor, ";\n      ");
     case 'default':
     default:
-      return {
-        backgroundColor: chip["default"].backgroundColor,
-        color: chip["default"].textColor
-      };
+      return "\n        background-color: ".concat(chip["default"].backgroundColor, ";\n        color: ").concat(chip["default"].textColor, ";\n      ");
   }
 };
-// Helper function to get size styles as objects for CSS custom properties
-var getSizeStylesAsObject = function getSizeStylesAsObject(size) {
-  switch (size) {
+// Helper function to get size styles matching Button's approach
+var getSizeStyles$1 = function getSizeStyles(_a) {
+  var $size = _a.$size;
+  switch ($size) {
     case 'small':
-      return {
-        font: chip.sizes.small.font,
-        padding: chip.sizes.small.padding
-      };
+      return "\n        font: ".concat(chip.sizes.small.font, ";\n        padding: ").concat(chip.sizes.small.padding, ";\n      ");
     case 'medium':
     default:
-      return {
-        font: chip.sizes.medium.font,
-        padding: chip.sizes.medium.padding
-      };
+      return "\n        font: ".concat(chip.sizes.medium.font, ";\n        padding: ").concat(chip.sizes.medium.padding, ";\n      ");
   }
 };
 
-// Base styled component using CSS variables to avoid prop leaking
-var BaseChipStyled = styled.span.withConfig({
+// Base styled component using direct prop interpolation like Button
+var StyledChip = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
-  displayName: "ChipBase__BaseChipStyled",
+  displayName: "ChipBase__StyledChip",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$B || (templateObject_1$B = __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$B || (templateObject_1$B = __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 ", ", background-color ", ";\n  cursor: ", ";\n  opacity: ", ";\n  \n  ", "\n  ", "\n  \n  &:hover {\n    opacity: ", ";\n  }\n  \n  &:active {\n    opacity: ", ";\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 ", ", background-color ", ";\n  cursor: ", ";\n  opacity: ", ";\n  \n  ", "\n  ", "\n  \n  &:hover {\n    opacity: ", ";\n  }\n  \n  &:active {\n    opacity: ", ";\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
 // Icon container for selected indicator or leading icons
-])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
+])), tokensData.semantic.motion.interactive, tokensData.semantic.motion.hover, function (props) {
+  return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
+}, function (props) {
+  return props.$disabled ? '0.6' : '1';
+}, getVariantStyles, getSizeStyles$1, function (props) {
+  return props.$disabled ? '0.6' : props.$clickable ? '0.8' : '1';
+}, function (props) {
+  return props.$disabled ? '0.6' : props.$clickable ? '0.9' : '1';
+}, chip.variants.interactive.backgroundColor);
 // Icon container for selected indicator or leading icons
 var IconContainer = styled.span.withConfig({
   displayName: "ChipBase__IconContainer",
@@ -2068,44 +2058,12 @@ var CloseButton = styled.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 0;\n  cursor: ", ";\n  opacity: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    opacity: 0.7;\n  }\n  \n  &:active:not(:disabled) {\n    opacity: 0.9;\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 0;\n  cursor: ", ";\n  opacity: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    opacity: 0.7;\n  }\n  \n  &:active:not(:disabled) {\n    opacity: 0.9;\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n"
-// Wrapper component that applies styles via CSS custom properties
-])), tokensData.semantic.spacing.layout.sm, function (props) {
+})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 0;\n  cursor: ", ";\n  opacity: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    opacity: 0.7;\n  }\n  \n  &:active:not(:disabled) {\n    opacity: 0.9;\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: ", ";\n  background: transparent;\n  border: none;\n  padding: 0;\n  cursor: ", ";\n  opacity: ", ";\n  color: inherit;\n  transition: ", ";\n  \n  &:hover:not(:disabled) {\n    opacity: 0.7;\n  }\n  \n  &:active:not(:disabled) {\n    opacity: 0.9;\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n"])), tokensData.semantic.spacing.layout.sm, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
 }, function (props) {
   return props.$disabled ? '0.6' : '1';
 }, tokensData.semantic.motion.transition.fast, chip.variants.interactive.backgroundColor);
-// Wrapper component that applies styles via CSS custom properties
-var StyledChipWrapper = function StyledChipWrapper(_a) {
-  var $variant = _a.$variant,
-    $size = _a.$size,
-    $disabled = _a.$disabled,
-    $clickable = _a.$clickable,
-    $selected = _a.$selected,
-    children = _a.children,
-    style = _a.style,
-    htmlProps = __rest(_a, ["$variant", "$size", "$disabled", "$clickable", "$selected", "children", "style"]);
-  // Get styles for variant and size
-  var variantStyles = getVariantStylesAsObject($variant, $selected);
-  var sizeStyles = getSizeStylesAsObject($size);
-  // Create CSS custom properties object
-  var cssProps = {
-    '--chip-bg-color': variantStyles.backgroundColor,
-    '--chip-text-color': variantStyles.color,
-    '--chip-font': sizeStyles.font,
-    '--chip-padding': sizeStyles.padding,
-    '--chip-opacity': $disabled ? '0.6' : '1',
-    '--chip-cursor': $disabled ? 'not-allowed' : $clickable ? 'pointer' : 'default',
-    '--chip-hover-opacity': $disabled ? '0.6' : $clickable ? '0.8' : '1',
-    '--chip-active-opacity': $disabled ? '0.6' : $clickable ? '0.9' : '1'
-  };
-  return jsx(BaseChipStyled, __assign({
-    style: __assign(__assign({}, cssProps), style)
-  }, htmlProps, {
-    children: children
-  }));
-};
-var templateObject_1$B, templateObject_2$p, templateObject_3$m;
+var templateObject_1$B, templateObject_2$p, templateObject_3$n;
 
 /**
  * Chip - Compact element for displaying tags, categories, and labels
@@ -2152,7 +2110,7 @@ var Chip = function Chip(_a) {
       handleClick();
     }
   };
-  return jsx(StyledChipWrapper, __assign({
+  return jsx(StyledChip, __assign({
     "$variant": normalizedVariant,
     "$size": size,
     "$disabled": disabled || undefined,
@@ -2232,7 +2190,7 @@ var FilterChip = function FilterChip(_a) {
   };
   // Generate accessible label for close button
   var closeButtonLabel = typeof children === 'string' ? "Remove ".concat(children) : 'Remove filter';
-  return jsxs(StyledChipWrapper, __assign({
+  return jsxs(StyledChip, __assign({
     "$variant": "subtle",
     "$size": size,
     "$disabled": disabled || undefined,
@@ -2306,7 +2264,7 @@ var BooleanChip = function BooleanChip(_a) {
       handleClick();
     }
   };
-  return jsxs(StyledChipWrapper, __assign({
+  return jsxs(StyledChip, __assign({
     "$variant": "subtle",
     "$size": size,
     "$disabled": disabled || undefined,
@@ -2377,7 +2335,7 @@ var ImageLink = styled.a.withConfig({
 var ImageButton = styled.button.withConfig({
   displayName: "Picture__ImageButton",
   componentId: "sc-11d9tei-2"
-})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base$b.duration.normal, base$b.easing.easeInOut);
+})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  display: block;\n  width: 100%;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base$b.duration.normal, base$b.easing.easeInOut);
 var StyledImage = styled.img.withConfig({
   displayName: "Picture__StyledImage",
   componentId: "sc-11d9tei-3"
@@ -2411,7 +2369,7 @@ var Picture = function Picture(_a) {
     }) : image
   });
 };
-var templateObject_1$z, templateObject_2$o, templateObject_3$l, templateObject_4$h;
+var templateObject_1$z, templateObject_2$o, templateObject_3$m, templateObject_4$h;
 
 var _a$4 = tokensData.semantic,
   typography$1 = _a$4.typography,
@@ -2706,7 +2664,7 @@ var ProgressBarContainer = styled.div.withConfig({
   },
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
-})(templateObject_3$k || (templateObject_3$k = __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"])), tokensData.semantic.color.background.disabled, tokensData.base.border.radius[1], function (props) {
+})(templateObject_3$l || (templateObject_3$l = __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"])), tokensData.semantic.color.background.disabled, tokensData.base.border.radius[1], function (props) {
   return props.$variant === 'horizontal' && css(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? tokensData.component.progressBar.sizes[props.$height].height : tokensData.component.progressBar.sizes.md.height);
 }, function (props) {
   return props.$variant === 'vertical' && css(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? tokensData.component.progressBar.sizes[props.$width].height : tokensData.component.progressBar.sizes.md.height);
@@ -2762,7 +2720,7 @@ var ProgressBar = function ProgressBar(_a) {
     })
   });
 };
-var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$b, templateObject_7$8;
+var templateObject_1$v, templateObject_2$n, templateObject_3$l, templateObject_4$g, templateObject_5$d, templateObject_6$b, templateObject_7$8;
 
 var StyledDivider$1 = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -3007,7 +2965,7 @@ var StyledStatusBadge = styled.span.withConfig({
 var ScreenReaderOnly = styled.span.withConfig({
   displayName: "StatusBadge__ScreenReaderOnly",
   componentId: "sc-1paksgb-1"
-})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"
+})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n"
 /**
  * StatusBadge component for displaying transaction or task status
  *
@@ -3096,7 +3054,7 @@ var StatusBadge = function StatusBadge(_a) {
   });
 };
 StatusBadge.displayName = 'StatusBadge';
-var templateObject_1$s, templateObject_2$m, templateObject_3$j;
+var templateObject_1$s, templateObject_2$m, templateObject_3$k;
 
 var semantic$c = tokensData.semantic;
 var StyledTag = styled.span.withConfig({
@@ -3201,7 +3159,7 @@ var StyledIconWrapper = styled.div.withConfig({
 var StyledBalanceSection = styled.div.withConfig({
   displayName: "AccountCard__StyledBalanceSection",
   componentId: "sc-1erp7zn-2"
-})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.lg);
+})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.lg);
 var StyledTrendSection = styled.div.withConfig({
   displayName: "AccountCard__StyledTrendSection",
   componentId: "sc-1erp7zn-3"
@@ -3310,7 +3268,7 @@ var AccountCard = function AccountCard(_a) {
               })
             }), jsxs(Stack, {
               direction: "column",
-              gap: "xs",
+              gap: "none",
               children: [jsx(Typography, {
                 variant: "h4",
                 children: accountName
@@ -3374,7 +3332,7 @@ var AccountCard = function AccountCard(_a) {
     })
   });
 };
-var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$c, templateObject_6$a;
+var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$f, templateObject_5$c, templateObject_6$a;
 
 var semantic$b = tokensData.semantic,
   base$9 = tokensData.base;
@@ -3383,7 +3341,7 @@ var fadeIn$1 = keyframes(templateObject_2$k || (templateObject_2$k = __makeTempl
 var StyledOverlay$1 = styled.div.withConfig({
   displayName: "ActionSheet__StyledOverlay",
   componentId: "sc-regbol-0"
-})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"])), fadeIn$1);
+})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 9999;\n  animation: ", " 0.2s ease-out;\n"])), fadeIn$1);
 var StyledActionSheet = styled.div.withConfig({
   displayName: "ActionSheet__StyledActionSheet",
   componentId: "sc-regbol-1"
@@ -3628,7 +3586,7 @@ var ActionSheet = function ActionSheet(_a) {
     })]
   }), document.body);
 };
-var templateObject_1$p, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$2;
+var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$e, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$2;
 
 var semantic$a = tokensData.semantic,
   base$8 = tokensData.base;
@@ -3692,7 +3650,7 @@ var StyledIconContainer$1 = styled.div.withConfig({
 var StyledContent$1 = styled.div.withConfig({
   displayName: "Alert__StyledContent",
   componentId: "sc-18tq5d-2"
-})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$a.spacing.layout.xs);
+})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  min-width: 0; /* Allow text wrapping */\n"])), semantic$a.spacing.layout.xs);
 var StyledTitle = styled.span.withConfig({
   displayName: "Alert__StyledTitle",
   componentId: "sc-18tq5d-3"
@@ -3776,9 +3734,9 @@ var Alert = function Alert(_a) {
   }));
 };
 Alert.displayName = 'Alert';
-var templateObject_1$o, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$8, templateObject_7$6;
+var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$d, templateObject_5$a, templateObject_6$8, templateObject_7$6;
 
-var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+var _a$3, _b$1, _c, _d, _e, _f;
 var BreadcrumbNavStyled = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbNavStyled",
   componentId: "sc-7ouzg5-0"
@@ -3786,7 +3744,11 @@ var BreadcrumbNavStyled = styled.nav.withConfig({
 var BreadcrumbStyled = styled.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
-})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-block;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  &:not(:last-of-type)::before {\n    content: '';\n    background-image: url('/assets/icons/caret.svg');\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-color: transparent;\n    opacity: 0.5;\n    display: inline-block;\n    width: ", ";\n    height: ", ";\n    right: -", ";\n    position: absolute;\n  }\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-block;\n  margin-right: ", ";\n  padding: ", ";\n  position: relative;\n\n  &:not(:last-of-type)::before {\n    content: '';\n    background-image: url('/assets/icons/caret.svg');\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n    background-color: transparent;\n    opacity: 0.5;\n    display: inline-block;\n    width: ", ";\n    height: ", ";\n    right: -", ";\n    position: absolute;\n  }\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', ((_h = (_g = tokensData.base) === null || _g === void 0 ? void 0 : _g.spacing) === null || _h === void 0 ? void 0 : _h['4']) || '1rem', ((_k = (_j = tokensData.base) === null || _j === void 0 ? void 0 : _j.spacing) === null || _k === void 0 ? void 0 : _k['4']) || '1rem', ((_m = (_l = tokensData.base) === null || _l === void 0 ? void 0 : _l.spacing) === null || _m === void 0 ? void 0 : _m['3']) || '0.75rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
+})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"], ["\n  text-transform: uppercase;\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", ";\n\n  &:last-of-type a {\n    text-decoration: none;\n    color: ", ";\n  }\n\n  &:last-of-type p {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 180px;\n  }\n\n  > a {\n    display: inline-flex;\n    align-items: center;\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
+var BreadcrumbSeparator = styled.span.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbSeparator",
+  componentId: "sc-7ouzg5-2"
+})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n"])));
 var isInternalUrl = function isInternalUrl(url) {
   return url.startsWith('/') && !url.startsWith('http');
 };
@@ -3798,34 +3760,43 @@ var Breadcrumbs = function Breadcrumbs(_a) {
       "aria-label": "breadcrumb",
       children: jsx("ol", {
         children: breadcrumbs.map(function (breadcrumb, index) {
-          return jsx(BreadcrumbStyled, {
-            children: index === breadcrumbs.length - 1 ? jsx(Typography, {
-              variant: "caption",
-              children: breadcrumb.label
-            }) : LinkComponent && isInternalUrl(breadcrumb.url) ? jsx(LinkComponent, {
-              href: breadcrumb.url,
-              children: jsx(Typography, {
-                variant: "caption",
-                children: breadcrumb.label
-              })
-            }) : jsx("a", __assign({
-              href: breadcrumb.url
-            }, !isInternalUrl(breadcrumb.url) && {
-              target: "_blank",
-              rel: "noopener noreferrer"
-            }, {
-              children: jsx(Typography, {
+          return jsxs(React.Fragment, {
+            children: [jsx(BreadcrumbStyled, {
+              children: index === breadcrumbs.length - 1 ? jsx(Typography, {
                 variant: "caption",
                 children: breadcrumb.label
+              }) : LinkComponent && isInternalUrl(breadcrumb.url) ? jsx(LinkComponent, {
+                href: breadcrumb.url,
+                children: jsx(Typography, {
+                  variant: "caption",
+                  children: breadcrumb.label
+                })
+              }) : jsx("a", __assign({
+                href: breadcrumb.url
+              }, !isInternalUrl(breadcrumb.url) && {
+                target: "_blank",
+                rel: "noopener noreferrer"
+              }, {
+                children: jsx(Typography, {
+                  variant: "caption",
+                  children: breadcrumb.label
+                })
+              }))
+            }), index < breadcrumbs.length - 1 && jsx(BreadcrumbSeparator, {
+              "aria-hidden": "true",
+              children: jsx(Icon, {
+                name: "arrowRight",
+                size: "xs",
+                iconColor: "subdued"
               })
-            }))
+            })]
           }, index);
         })
       })
     })
   });
 };
-var templateObject_1$n, templateObject_2$i;
+var templateObject_1$n, templateObject_2$i, templateObject_3$g;
 
 var CardSmallStyled = styled.div.withConfig({
   displayName: "CardSmall__CardSmallStyled",
@@ -4668,8 +4639,8 @@ var Dropdown = function Dropdown(_a) {
     focusedIndex = _e[0],
     setFocusedIndex = _e[1];
   var dropdownRef = useRef(null);
-  // Generate unique ID for accessibility
-  var dropdownId = useRef("dropdown-".concat(Math.random().toString(36).substr(2, 9))).current;
+  // Generate unique ID for accessibility (SSR-safe)
+  var dropdownId = useId();
   var selectedOption = options.find(function (option) {
     return option.id === value;
   });