@common-origin/design-system 1.12.1 → 1.13.0

package/dist/index.esm.js

@@ -100,7 +100,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var base$3 = {
+var base$5 = {
 	border: {
 		radius: {
 			"1": "0.125rem",
@@ -635,7 +635,7 @@ var component = {
 	},
 	$ref: "./component/index.json"
 };
-var semantic$4 = {
+var semantic$6 = {
 	border: {
 		"default": "0.0625rem solid #e9ecef",
 		subtle: "0.0625rem solid #dee2e6",
@@ -772,9 +772,9 @@ var semantic$4 = {
 	$ref: "./semantic/index.json"
 };
 var tokensData = {
-	base: base$3,
+	base: base$5,
 	component: component,
-	semantic: semantic$4
+	semantic: semantic$6
 };
 
 React.createElement;
@@ -784,7 +784,7 @@ var AvatarContainer = styled.div.withConfig({
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
+})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  overflow: hidden;\n  flex-shrink: 0;\n"])), function (_a) {
   var $size = _a.$size;
   return tokensData.semantic.size.avatar[$size];
 }, function (_a) {
@@ -797,14 +797,14 @@ var AvatarImage = styled.img.withConfig({
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), tokensData.base.border.radius.circle);
+})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: ", ";\n  /* Remove the img role since the container already has role=\"img\" */\n"])), tokensData.base.border.radius.circle);
 var AvatarInitials = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Avatar__AvatarInitials",
   componentId: "sc-ezn4ax-2"
-})(templateObject_3$c || (templateObject_3$c = __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$e || (templateObject_3$e = __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;
@@ -867,30 +867,30 @@ var Avatar = function Avatar(_a) {
     "aria-hidden": "true"
   }, initials));
 };
-var templateObject_1$s, templateObject_2$g, templateObject_3$c;
+var templateObject_1$u, templateObject_2$i, templateObject_3$e;
 
 React.createElement;
 var _a$5 = tokensData.semantic,
-  typography$1 = _a$5.typography,
+  typography$2 = _a$5.typography,
   color$4 = _a$5.color;
 var getTypographyStyles = function getTypographyStyles(variant) {
   var styles = {
-    display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
-    h1: "font: ".concat(typography$1.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
-    h2: "font: ".concat(typography$1.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
-    h3: "font: ".concat(typography$1.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
-    h4: "font: ".concat(typography$1.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
-    h5: "font: ".concat(typography$1.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
-    h6: "font: ".concat(typography$1.h6, "; letter-spacing: ").concat(tokensData.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, ";")
+    display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
+    h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
+    h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
+    h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
+    h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
+    h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
+    h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(tokensData.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;
 };
@@ -935,7 +935,7 @@ var StyledTypography = styled.span.withConfig({
   },
   displayName: "Typography__StyledTypography",
   componentId: "sc-17mqo4k-0"
-})(templateObject_1$r || (templateObject_1$r = __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"
+})(templateObject_1$t || (templateObject_1$t = __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.
  *
@@ -1002,23 +1002,23 @@ var Typography = function Typography(_a) {
     "data-testid": dataTestId
   }, children);
 };
-var templateObject_1$r;
+var templateObject_1$t;
 
 React.createElement;
 var color$3 = tokensData.semantic.color;
   tokensData.base.shadow;
-var scaleIn = keyframes(templateObject_1$q || (templateObject_1$q = __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 scaleIn = keyframes(templateObject_1$s || (templateObject_1$s = __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"
-})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"])));
+})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"], ["\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  flex-shrink: 0;\n"])));
 var BadgeIndicator = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Badge__BadgeIndicator",
   componentId: "sc-tjz4pp-1"
-})(templateObject_3$b || (templateObject_3$b = __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$d || (templateObject_3$d = __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';
@@ -1043,7 +1043,7 @@ var BadgeIndicator = styled.span.withConfig({
 var ScreenReaderOnly = styled.span.withConfig({
   displayName: "Badge__ScreenReaderOnly",
   componentId: "sc-tjz4pp-2"
-})(templateObject_4$9 || (templateObject_4$9 = __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_4$b || (templateObject_4$b = __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"])));
 var Badge = function Badge(_a) {
   var children = _a.children,
     _b = _a.count,
@@ -1074,7 +1074,7 @@ var Badge = function Badge(_a) {
     color: "inverse"
   }, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
 };
-var templateObject_1$q, templateObject_2$f, templateObject_3$b, templateObject_4$9;
+var templateObject_1$s, templateObject_2$h, templateObject_3$d, templateObject_4$b;
 
 React.createElement;
 var StyledBox = styled.div.withConfig({
@@ -1086,21 +1086,21 @@ 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$p || (templateObject_1$p = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && css(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
-  return props.$flexDirection && css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
+  return props.$flexDirection && css(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && css(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
-  return props.$alignItems && css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
+  return props.$alignItems && css(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
-  return props.$flexWrap && css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
+  return props.$flexWrap && css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
-  return props.$gap && css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
+  return props.$gap && css(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
 }, function (props) {
-  return props.$m && css(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
+  return props.$m && css(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
 }, function (props) {
-  return props.$mt && css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
+  return props.$mt && css(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
 }, function (props) {
   return props.$mr && css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
 }, function (props) {
@@ -1276,7 +1276,7 @@ var BoxTransform = function BoxTransform(props) {
   }, rest), children);
 };
 var Box = BoxTransform;
-var templateObject_1$p, templateObject_2$e, templateObject_3$a, templateObject_4$8, templateObject_5$5, templateObject_6$3, templateObject_7$3, 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$r, templateObject_2$g, templateObject_3$c, templateObject_4$a, templateObject_5$7, templateObject_6$6, templateObject_7$4, templateObject_8$2, 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",
@@ -1378,6 +1378,14 @@ var userBox = {
 	path: "M12 6C14.2091 6 16 7.79086 16 10C16 12.2091 14.2091 14 12 14C9.79086 14 8 12.2091 8 10C8 7.79086 9.79086 6 12 6ZM12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8Z M14 2C17.7712 2 19.6566 2.0003 20.8281 3.17188C21.9997 4.34345 22 6.22876 22 10V14C22 17.7712 21.9997 19.6566 20.8281 20.8281C19.803 21.8533 18.2315 21.982 15.3281 21.998L14 22H10L8.67188 21.998C5.8719 21.9826 4.31033 21.8625 3.2832 20.9346L3.17188 20.8281C2.14675 19.803 2.01797 18.2315 2.00195 15.3281L2 14V10C2 6.34627 2 4.46248 3.06543 3.2832L3.17188 3.17188C4.34345 2.0003 6.22876 2 10 2H14ZM12 18C10.8577 18 9.76263 18.3153 8.88574 18.876C8.39459 19.1901 7.99492 19.5688 7.69043 19.9834C8.33459 19.9972 9.09233 20 10 20H14C14.9072 20 15.6646 19.9971 16.3086 19.9834C16.0041 19.5689 15.6052 19.19 15.1143 18.876C14.2374 18.3153 13.1423 18 12 18ZM10 4C8.05784 4 6.80197 4.00454 5.87695 4.12891C5.00986 4.24554 4.73816 4.43372 4.58594 4.58594C4.43372 4.73816 4.24554 5.00986 4.12891 5.87695C4.00454 6.80197 4 8.05784 4 10V14C4 15.9422 4.00454 17.198 4.12891 18.123C4.24554 18.9901 4.43372 19.2618 4.58594 19.4141C4.71234 19.5405 4.92163 19.6893 5.48535 19.8037C5.96679 18.7505 6.77822 17.8493 7.80859 17.1904C9.02742 16.4111 10.5007 16 12 16C13.4993 16 14.9726 16.4111 16.1914 17.1904C17.2217 17.8492 18.0322 18.7507 18.5137 19.8037C19.0781 19.6893 19.2876 19.5405 19.4141 19.4141C19.5663 19.2618 19.7545 18.9901 19.8711 18.123C19.9955 17.198 20 15.9422 20 14V10C20 8.05784 19.9955 6.80197 19.8711 5.87695C19.7545 5.00986 19.5663 4.73816 19.4141 4.58594C19.2618 4.43372 18.9901 4.24554 18.123 4.12891C17.198 4.00454 15.9422 4 14 4H10Z",
 	name: "userBox"
 };
+var eye = {
+	path: "M12 5C7.52166 5 3.73301 7.94288 2.45825 12C3.73301 16.0571 7.52166 19 12 19C16.4783 19 20.267 16.0571 21.5417 12C20.267 7.94288 16.4783 5 12 5ZM12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9Z",
+	name: "eye"
+};
+var eyeSlash = {
+	path: "M3.70711 2.29289C3.31658 1.90237 2.68342 1.90237 2.29289 2.29289C1.90237 2.68342 1.90237 3.31658 2.29289 3.70711L6.70206 8.11628C5.35737 9.20465 4.27035 10.5612 3.54474 12.0722C4.83034 15.7743 8.14313 18.5 12 18.5C13.6923 18.5 15.2882 18.0602 16.6843 17.2822L20.2929 20.8908C20.6834 21.2813 21.3166 21.2813 21.7071 20.8908C22.0976 20.5003 22.0976 19.867 21.7071 19.4765L3.70711 2.29289ZM15.2279 15.8258L13.3042 13.9021C12.9314 14.2749 12.4394 14.5294 11.8995 14.6183C11.3596 14.7071 10.8078 14.6253 10.3142 14.3835C9.82059 14.1417 9.40848 13.7503 9.13119 13.2593C8.8539 12.7683 8.72446 12.2005 8.75906 11.6276L6.92963 9.79821C6.23474 10.5508 5.66408 11.4232 5.24853 12.3768C6.38454 15.2245 8.99611 17.2 12 17.2C13.1941 17.2 14.3152 16.9113 15.2279 15.8258ZM10.1061 12.9747C10.0982 13.2082 10.1471 13.4402 10.2489 13.6505C10.3507 13.8609 10.5022 14.0431 10.6912 14.1821C10.8802 14.3211 11.101 14.4126 11.3345 14.4485C11.568 14.4844 11.807 14.4636 12.0304 14.3879L10.1061 12.9747ZM12 5.5C10.3077 5.5 8.71178 5.93983 7.31572 6.71784L8.52938 7.93149C9.62166 7.34729 10.8421 7.03 12 7.03C15.0039 7.03 17.6155 9.00549 18.7515 11.8532C18.4306 12.5937 17.9993 13.2778 17.4748 13.8854L18.5983 15.0089C19.3126 14.2222 19.8991 13.2953 20.3245 12.2778C19.03 8.57569 15.8569 5.5 12 5.5Z",
+	name: "eyeSlash"
+};
 var iconsData = {
 	add: add,
 	arrowDown: arrowDown,
@@ -1407,7 +1415,9 @@ var iconsData = {
 	star: star,
 	starFilled: starFilled,
 	table: table,
-	userBox: userBox
+	userBox: userBox,
+	eye: eye,
+	eyeSlash: eyeSlash
 };
 
 React.createElement;
@@ -1417,7 +1427,7 @@ var IconStyled = styled.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$o || (templateObject_1$o = __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$q || (templateObject_1$q = __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 tokensData.semantic.size.icon[$size];
 }, function (_a) {
@@ -1481,13 +1491,13 @@ var Icon = function Icon(_a) {
     d: iconData.path
   })));
 };
-var templateObject_1$o;
+var templateObject_1$q;
 
 React.createElement;
 var button = tokensData.component.button,
-  semantic$3 = tokensData.semantic;
+  semantic$5 = tokensData.semantic;
 // 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$3.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");
+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$5.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 $variant = _a.$variant;
@@ -1513,14 +1523,14 @@ var StyledButton = styled.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$n || (templateObject_1$n = __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$p || (templateObject_1$p = __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('$');
   },
   displayName: "Button__StyledLink",
   componentId: "sc-1eiuum9-1"
-})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
+})(templateObject_2$f || (templateObject_2$f = __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);
 // Helper function to get icon size based on button size
@@ -1613,7 +1623,7 @@ var Button = function Button(_a) {
     "data-testid": dataTestId
   }, buttonProps), renderButtonContent(children, iconName, size));
 };
-var templateObject_1$n, templateObject_2$d;
+var templateObject_1$p, templateObject_2$f;
 
 var chip = tokensData.component.chip;
 // Helper function to get variant styles as objects for CSS custom properties
@@ -1674,14 +1684,14 @@ var BaseChipStyled = styled.span.withConfig({
   },
   displayName: "ChipBase__BaseChipStyled",
   componentId: "sc-moa6zc-0"
-})(templateObject_1$m || (templateObject_1$m = __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$o || (templateObject_1$o = __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
 ])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
 // Icon container for selected indicator or leading icons
 var IconContainer = styled.span.withConfig({
   displayName: "ChipBase__IconContainer",
   componentId: "sc-moa6zc-1"
-})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"
+})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  margin-right: ", ";\n"
 // Close button for dismissible chips
 ])), tokensData.semantic.spacing.layout.sm);
 // Close button for dismissible chips
@@ -1691,7 +1701,7 @@ var CloseButton = styled.button.withConfig({
   },
   displayName: "ChipBase__CloseButton",
   componentId: "sc-moa6zc-2"
-})(templateObject_3$9 || (templateObject_3$9 = __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"
+})(templateObject_3$b || (templateObject_3$b = __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) {
   return props.$disabled ? 'not-allowed' : 'pointer';
@@ -1726,7 +1736,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
     style: __assign(__assign({}, cssProps), style)
   }, htmlProps), children);
 };
-var templateObject_1$m, templateObject_2$c, templateObject_3$9;
+var templateObject_1$o, templateObject_2$e, templateObject_3$b;
 
 React.createElement;
 /**
@@ -1970,32 +1980,32 @@ var spacing$3 = tokensData.semantic.spacing;
 var StyledContainer = styled.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$l || (templateObject_1$l = __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$n || (templateObject_1$n = __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$l;
+var templateObject_1$n;
 
 React.createElement;
-var base$2 = tokensData.base;
+var base$4 = tokensData.base;
 var PictureWrapper = styled.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$k || (templateObject_1$k = __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$m || (templateObject_1$m = __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"
-})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base$2.duration.normal, base$2.easing.easeInOut);
+})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"], ["\n  display: block;\n  cursor: pointer;\n  transition: opacity ", " ", ";\n  \n  &:hover {\n    opacity: 0.8;\n  }\n"])), base$4.duration.normal, base$4.easing.easeInOut);
 var ImageButton = styled.button.withConfig({
   displayName: "Picture__ImageButton",
   componentId: "sc-11d9tei-2"
-})(templateObject_3$8 || (templateObject_3$8 = __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$2.duration.normal, base$2.easing.easeInOut);
+})(templateObject_3$a || (templateObject_3$a = __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$4.duration.normal, base$4.easing.easeInOut);
 var StyledImage = styled.img.withConfig({
   displayName: "Picture__StyledImage",
   componentId: "sc-11d9tei-3"
-})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), base$2.border.radius[2]);
+})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: ", ";\n  display: block;\n"])), base$4.border.radius[2]);
 var Picture = function Picture(_a) {
   var title = _a.title,
     src = _a.src,
@@ -2022,16 +2032,16 @@ var Picture = function Picture(_a) {
     "aria-label": "Read more about ".concat(title)
   }, image) : image);
 };
-var templateObject_1$k, templateObject_2$b, templateObject_3$8, templateObject_4$7;
+var templateObject_1$m, templateObject_2$d, templateObject_3$a, templateObject_4$9;
 
 React.createElement;
 var _a$4 = tokensData.semantic,
-  typography = _a$4.typography,
+  typography$1 = _a$4.typography,
   color$2 = _a$4.color;
 var TimeStyled = styled.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
-})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography.label, color$2.text.subdued);
+})(templateObject_1$l || (templateObject_1$l = __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,
@@ -2043,7 +2053,7 @@ var DateFormatter = function DateFormatter(_a) {
     "data-testid": dataTestId
   }, format(date, formatString));
 };
-var templateObject_1$j;
+var templateObject_1$l;
 
 React.createElement;
 var motion = tokensData.semantic.motion,
@@ -2054,7 +2064,7 @@ var IconButtonStyled = styled.button.withConfig({
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$i || (templateObject_1$i = __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$k || (templateObject_1$k = __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':
@@ -2165,7 +2175,7 @@ var IconButton = function IconButton(_a) {
     "aria-hidden": "true" // Hide icon from screen readers since button has aria-label
   }));
 };
-var templateObject_1$i;
+var templateObject_1$k;
 
 React.createElement;
 var ProgressBarContainer = styled.div.withConfig({
@@ -2174,10 +2184,10 @@ var ProgressBarContainer = styled.div.withConfig({
   },
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
-})(templateObject_3$7 || (templateObject_3$7 = __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$h || (templateObject_1$h = __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);
+})(templateObject_3$9 || (templateObject_3$9 = __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$j || (templateObject_1$j = __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$a || (templateObject_2$a = __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);
+  return props.$variant === 'vertical' && css(templateObject_2$c || (templateObject_2$c = __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);
 });
 var ProgressBarFill = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -2185,7 +2195,7 @@ var ProgressBarFill = styled.div.withConfig({
   },
   displayName: "ProgressBar__ProgressBarFill",
   componentId: "sc-1nco33q-1"
-})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), tokensData.semantic.motion.transition.normal, function (props) {
+})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  transition: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), tokensData.semantic.motion.transition.normal, function (props) {
   var backgroundColor;
   switch (props.$color) {
     case 'success':
@@ -2199,11 +2209,11 @@ var ProgressBarFill = styled.div.withConfig({
       backgroundColor = tokensData.semantic.color.background.interactive;
       break;
   }
-  return css(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
+  return css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
 }, function (props) {
-  return props.$variant === 'horizontal' && css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
+  return props.$variant === 'horizontal' && css(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 }, function (props) {
-  return props.$variant === 'vertical' && css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n    width: 100%;\n    height: ", "%;\n  "], ["\n    width: 100%;\n    height: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
+  return props.$variant === 'vertical' && css(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n    width: 100%;\n    height: ", "%;\n  "], ["\n    width: 100%;\n    height: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
 });
 var ProgressBar = function ProgressBar(_a) {
   var value = _a.value,
@@ -2229,7 +2239,7 @@ var ProgressBar = function ProgressBar(_a) {
     $color: color
   }));
 };
-var templateObject_1$h, templateObject_2$a, templateObject_3$7, templateObject_4$6, templateObject_5$4, templateObject_6$2, templateObject_7$2;
+var templateObject_1$j, templateObject_2$c, templateObject_3$9, templateObject_4$8, templateObject_5$6, templateObject_6$5, templateObject_7$3;
 
 React.createElement;
 var StyledDivider = styled.div.withConfig({
@@ -2238,7 +2248,7 @@ var StyledDivider = styled.div.withConfig({
   },
   displayName: "Divider__StyledDivider",
   componentId: "sc-1l0c8ja-0"
-})(templateObject_1$g || (templateObject_1$g = __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$i || (templateObject_1$i = __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.
  *
@@ -2351,7 +2361,7 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$g;
+var templateObject_1$i;
 
 React.createElement;
 var StyledStack = styled.div.withConfig({
@@ -2360,7 +2370,7 @@ var StyledStack = styled.div.withConfig({
   },
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
-})(templateObject_1$f || (templateObject_1$f = __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$h || (templateObject_1$h = __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
@@ -2398,17 +2408,17 @@ var Stack = function Stack(_a) {
     "data-testid": dataTestId
   }, children);
 };
-var templateObject_1$f;
+var templateObject_1$h;
 
 React.createElement;
-var semantic$2 = tokensData.semantic;
+var semantic$4 = tokensData.semantic;
 var StyledTag = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Tag__StyledTag",
   componentId: "sc-lzfmti-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
+})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: ", ";\n  user-select: none;\n  white-space: nowrap;\n  max-height: ", ";\n  \n  /* Size - fixed to small */\n  padding: ", " ", ";\n  font: ", ";\n  \n  /* Variant styles */\n  background-color: ", ";\n  \n  color: ", ";\n  \n  border: ", ";\n"
 /**
  * Tag component for categorizing and labeling content
  *
@@ -2418,33 +2428,33 @@ var StyledTag = styled.span.withConfig({
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return semantic$2.color.background['interactive-subtle'];
+      return semantic$4.color.background['interactive-subtle'];
     case 'success':
-      return semantic$2.color.background['success-subtle'];
+      return semantic$4.color.background['success-subtle'];
     case 'warning':
-      return semantic$2.color.background['warning-subtle'];
+      return semantic$4.color.background['warning-subtle'];
     case 'error':
-      return semantic$2.color.background['error-subtle'];
+      return semantic$4.color.background['error-subtle'];
     case 'emphasis':
-      return semantic$2.color.background.emphasis;
+      return semantic$4.color.background.emphasis;
     default:
-      return semantic$2.color.background.surface;
+      return semantic$4.color.background.surface;
   }
 }, function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'interactive':
-      return semantic$2.color.text.interactive;
+      return semantic$4.color.text.interactive;
     case 'success':
-      return semantic$2.color.text.success;
+      return semantic$4.color.text.success;
     case 'warning':
-      return semantic$2.color.text.warning;
+      return semantic$4.color.text.warning;
     case 'error':
-      return semantic$2.color.text.error;
+      return semantic$4.color.text.error;
     case 'emphasis':
-      return semantic$2.color.text.inverse;
+      return semantic$4.color.text.inverse;
     default:
-      return semantic$2.color.text["default"];
+      return semantic$4.color.text["default"];
   }
 }, function (_a) {
   var $variant = _a.$variant,
@@ -2452,17 +2462,17 @@ var StyledTag = styled.span.withConfig({
   if (!$border) return 'none';
   switch ($variant) {
     case 'interactive':
-      return "1px solid ".concat(semantic$2.color.border.interactive);
+      return "1px solid ".concat(semantic$4.color.border.interactive);
     case 'success':
-      return "1px solid ".concat(semantic$2.color.border.success);
+      return "1px solid ".concat(semantic$4.color.border.success);
     case 'warning':
-      return "1px solid ".concat(semantic$2.color.border.warning);
+      return "1px solid ".concat(semantic$4.color.border.warning);
     case 'error':
-      return "1px solid ".concat(semantic$2.color.border.error);
+      return "1px solid ".concat(semantic$4.color.border.error);
     case 'emphasis':
-      return "1px solid ".concat(semantic$2.color.background.emphasis);
+      return "1px solid ".concat(semantic$4.color.background.emphasis);
     default:
-      return "1px solid ".concat(semantic$2.color.border["default"]);
+      return "1px solid ".concat(semantic$4.color.border["default"]);
   }
 });
 /**
@@ -2489,18 +2499,18 @@ var Tag = function Tag(_a) {
     "aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
   }, props), children);
 };
-var templateObject_1$e;
+var templateObject_1$g;
 
 React.createElement;
 var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 var BreadcrumbNavStyled = styled.nav.withConfig({
   displayName: "Breadcrumbs__BreadcrumbNavStyled",
   componentId: "sc-7ouzg5-0"
-})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokensData.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"], ["\n  border-bottom: ", ";\n\n  ol {\n    display: flex;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n"])), ((_b$1 = (_a$3 = tokensData.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
 var BreadcrumbStyled = styled.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbStyled",
   componentId: "sc-7ouzg5-1"
-})(templateObject_2$9 || (templateObject_2$9 = __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$b || (templateObject_2$b = __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"]);
 var isInternalUrl = function isInternalUrl(url) {
   return url.startsWith('/') && !url.startsWith('http');
 };
@@ -2526,13 +2536,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
     }, breadcrumb.label)));
   }))));
 };
-var templateObject_1$d, templateObject_2$9;
+var templateObject_1$f, templateObject_2$b;
 
 React.createElement;
 var CardSmallStyled = styled.div.withConfig({
   displayName: "CardSmall__CardSmallStyled",
   componentId: "sc-jpcqvd-0"
-})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), tokensData.base.border.radius[2], tokensData.semantic.color.border.strong);
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  a {\n    text-decoration: none;\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), tokensData.base.border.radius[2], tokensData.semantic.color.border.strong);
 var CardSmall = function CardSmall(_a) {
   var title = _a.title,
     picture = _a.picture,
@@ -2569,14 +2579,14 @@ var CardSmall = function CardSmall(_a) {
     color: "subdued"
   }, meta))))));
 };
-var templateObject_1$c;
+var templateObject_1$e;
 
 React.createElement;
 var border$3 = tokensData.base.border;
 var CardLargeStyled = styled.div.withConfig({
   displayName: "CardLarge__CardLargeStyled",
   componentId: "sc-1rfgdzl-0"
-})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"], ["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"])), border$3.radius[6]);
+})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"], ["\n  max-width: 768px;\n\n  a {\n    text-decoration: none;\n  }\n\n  &:hover {\n    img {\n      opacity: 0.8;\n    }\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n    width: 100%;\n  }\n"])), border$3.radius[6]);
 var CardLarge = function CardLarge(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
@@ -2621,7 +2631,7 @@ var CardLarge = function CardLarge(_a) {
     });
   })))));
 };
-var templateObject_1$b;
+var templateObject_1$d;
 
 /**
  * Hidden native checkbox input for accessibility
@@ -2633,7 +2643,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
   },
   displayName: "SelectableInputBase__HiddenCheckboxInput",
   componentId: "sc-1ddpctx-0"
-})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"
+})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"], ["\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n  pointer-events: none;\n"
 /**
  * Custom checkbox visual component
  * 24px × 24px for 8px grid alignment
@@ -2650,20 +2660,20 @@ var StyledCheckbox = styled.span.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckbox",
   componentId: "sc-1ddpctx-1"
-})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"
+})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  border-radius: ", ";\n  border: ", " solid;\n  background-color: ", ";\n  border-color: ", ";\n  cursor: ", ";\n  transition: all 150ms ease-out;\n  flex-shrink: 0;\n\n  /* Hover state */\n  ", ":not(:disabled):hover + & {\n    border-color: ", ";\n  }\n\n  /* Focus state */\n  ", ":focus-visible + & {\n    outline: ", ";\n    outline-offset: ", ";\n    border-color: ", ";\n  }\n\n  /* Disabled state */\n  ", "\n\n  /* Checkmark icon */\n  &::after {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 6px;\n    top: 3px;\n    width: 4px;\n    height: 8px;\n    border: solid ", ";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  /* Indeterminate icon (horizontal line) */\n  &::before {\n    content: '';\n    position: absolute;\n    display: ", ";\n    left: 4px;\n    top: 8px;\n    width: 10px;\n    height: 2px;\n    background-color: ", ";\n  }\n"
 /**
  * Container for checkbox with proper spacing and alignment
  * 48px min-height for touch target (8px grid aligned)
  */])), tokensData.component.input["default"].borderRadius, tokensData.component.input["default"].borderWidth, function (props) {
-  return props.$checked || props.$indeterminate ? tokensData.semantic.color.background.interactive : tokensData.component.input["default"].backgroundColor;
+  return props.$checked || props.$indeterminate ? tokensData.semantic.color.background.inverse : tokensData.component.input["default"].backgroundColor;
 }, function (props) {
   if (props.$state === 'error') return tokensData.component.input.error.borderColor;
-  if (props.$checked || props.$indeterminate) return tokensData.semantic.color.background.interactive;
+  if (props.$checked || props.$indeterminate) return tokensData.semantic.border.strong;
   return tokensData.component.input["default"].borderColor;
 }, function (props) {
   return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
 }, HiddenCheckboxInput, function (props) {
-  return props.$state === 'error' ? tokensData.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensData.semantic.color.background.interactive : tokensData.component.input.hover.borderColor;
+  return props.$state === 'error' ? tokensData.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensData.semantic.border.strong : tokensData.component.input.hover.borderColor;
 }, HiddenCheckboxInput, tokensData.component.input.focus.outline, tokensData.component.input.focus.outlineOffset, function (props) {
   return props.$state === 'error' ? tokensData.component.input.error.focus.borderColor : tokensData.component.input.focus.borderColor;
 }, function (props) {
@@ -2683,7 +2693,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckboxContainer",
   componentId: "sc-1ddpctx-2"
-})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"
+})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  cursor: ", ";\n  min-height: 32px;\n  flex-direction: ", ";\n  user-select: none;\n"
 /**
  * Label text with proper typography
  */])), tokensData.base.spacing[3], function (props) {
@@ -2700,20 +2710,20 @@ var StyledCheckboxLabel = styled.span.withConfig({
   },
   displayName: "SelectableInputBase__StyledCheckboxLabel",
   componentId: "sc-1ddpctx-3"
-})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
+})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
   return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
 });
-var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$5;
+var templateObject_1$c, templateObject_2$a, templateObject_3$8, templateObject_4$7;
 
 React.createElement;
-var StyledFieldContainer$2 = styled.div.withConfig({
+var StyledFieldContainer$3 = styled.div.withConfig({
   displayName: "Checkbox__StyledFieldContainer",
   componentId: "sc-vquz3v-0"
-})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokensData.base.spacing[1]);
-var StyledHelperText$2 = styled.span.withConfig({
+})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: ", ";\n"])), tokensData.base.spacing[1]);
+var StyledHelperText$4 = styled.span.withConfig({
   displayName: "Checkbox__StyledHelperText",
   componentId: "sc-vquz3v-1"
-})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"
+})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-left: ", "; /* Align with label text after checkbox */\n  display: block;\n"
 /**
  * Checkbox component for binary selection with WCAG 2.2 AA compliance
  *
@@ -2794,7 +2804,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
       inputRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
-  return /*#__PURE__*/React.createElement(StyledFieldContainer$2, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, {
+  return /*#__PURE__*/React.createElement(StyledFieldContainer$3, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, {
     $disabled: disabled,
     $labelPosition: labelPosition
   }, /*#__PURE__*/React.createElement(HiddenCheckboxInput, _extends({
@@ -2816,9 +2826,9 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
     "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
     $disabled: disabled
-  }, label)), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$2, {
+  }, label)), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$4, {
     id: helperTextId
-  }, helperText), error && /*#__PURE__*/React.createElement(StyledHelperText$2, {
+  }, helperText), error && /*#__PURE__*/React.createElement(StyledHelperText$4, {
     id: errorId,
     $error: true,
     role: "alert",
@@ -2826,13 +2836,13 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, error));
 });
 Checkbox.displayName = 'Checkbox';
-var templateObject_1$9, templateObject_2$7;
+var templateObject_1$b, templateObject_2$9;
 
 React.createElement;
 var ChipGroupWrapper = styled.div.withConfig({
   displayName: "ChipGroup__ChipGroupWrapper",
   componentId: "sc-ae049w-0"
-})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
+})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"], ["\n  > div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n"])));
 var ChipGroup = function ChipGroup(_a) {
   var labels = _a.labels,
     _b = _a.variant,
@@ -2851,7 +2861,7 @@ var ChipGroup = function ChipGroup(_a) {
     });
   })));
 };
-var templateObject_1$8;
+var templateObject_1$a;
 
 React.createElement;
 var _a$2 = tokensData.semantic,
@@ -2861,15 +2871,15 @@ var _a$2 = tokensData.semantic,
 var StyledCodeBlock = styled.pre.withConfig({
   displayName: "CodeBlock__StyledCodeBlock",
   componentId: "sc-1p1t0kp-0"
-})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"])), color$1.background.subtle, border$2.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$1.text["default"], spacing$2.layout.sm);
+})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"], ["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  overflow-x: auto;\n  margin: ", " 0;\n  position: relative;\n"])), color$1.background.subtle, border$2.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$1.text["default"], spacing$2.layout.sm);
 var CodeBlockWrapper = styled.div.withConfig({
   displayName: "CodeBlock__CodeBlockWrapper",
   componentId: "sc-1p1t0kp-1"
-})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"])));
+})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n"])));
 var CopyButtonWrapper = styled.div.withConfig({
   displayName: "CodeBlock__CopyButtonWrapper",
   componentId: "sc-1p1t0kp-2"
-})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"], ["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"])), spacing$2.layout.lg, spacing$2.layout.sm);
+})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"], ["\n  position: absolute;\n  bottom: ", ";\n  right: ", ";\n"])), spacing$2.layout.lg, spacing$2.layout.sm);
 var CopyButton = function CopyButton(_a) {
   var text = _a.text,
     onCopy = _a.onCopy;
@@ -2946,7 +2956,7 @@ var CodeBlock = function CodeBlock(_a) {
     onCopy: onCopy
   }));
 };
-var templateObject_1$7, templateObject_2$6, templateObject_3$5;
+var templateObject_1$9, templateObject_2$8, templateObject_3$7;
 
 React.createElement;
 var _a$1 = tokensData.base,
@@ -2955,23 +2965,23 @@ var _a$1 = tokensData.base,
 var FeatureBlockStyled = styled.div.withConfig({
   displayName: "FeatureBlock__FeatureBlockStyled",
   componentId: "sc-1mi4lso-0"
-})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
+})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
 var ImageWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ImageWrapper",
   componentId: "sc-1mi4lso-1"
-})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokensData.base.breakpoint.lg);
+})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokensData.base.breakpoint.lg);
 var ContentSection = styled.div.withConfig({
   displayName: "FeatureBlock__ContentSection",
   componentId: "sc-1mi4lso-2"
-})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), spacing$1[6], tokensData.base.breakpoint.lg, spacing$1[8], tokensData.base.breakpoint.xl, spacing$1[24]);
+})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), spacing$1[6], tokensData.base.breakpoint.lg, spacing$1[8], tokensData.base.breakpoint.xl, spacing$1[24]);
 var ButtonWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ButtonWrapper",
   componentId: "sc-1mi4lso-3"
-})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), spacing$1[4]);
+})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), spacing$1[4]);
 var ContentWrapper = styled.div.withConfig({
   displayName: "FeatureBlock__ContentWrapper",
   componentId: "sc-1mi4lso-4"
-})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"])));
+})(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"])));
 var FeatureBlock = function FeatureBlock(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
@@ -3011,7 +3021,7 @@ var FeatureBlock = function FeatureBlock(_a) {
     onClick: onReadMore
   }, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
 };
-var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$4, templateObject_5$3;
+var templateObject_1$8, templateObject_2$7, templateObject_3$6, templateObject_4$6, templateObject_5$5;
 
 React.createElement;
 var _a = tokensData.base,
@@ -3019,23 +3029,33 @@ var _a = tokensData.base,
   shadow = _a.shadow,
   zIndex = _a.zIndex,
   _b = tokensData.semantic,
-  color = _b.color;
-  _b.typography;
-  var border = _b.border,
+  color = _b.color,
+  typography = _b.typography,
+  border = _b.border,
   input$1 = tokensData.component.input;
 var DropdownContainer = styled.div.withConfig({
   displayName: "Dropdown__DropdownContainer",
   componentId: "sc-kz07c4-0"
-})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
 var DropdownTrigger = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Dropdown__DropdownTrigger",
   componentId: "sc-kz07c4-1"
-})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, input$1.hover.borderColor, input$1.focus.borderColor, input$1.focus.outline, input$1.focus.outlineOffset, input$1.disabled.backgroundColor, input$1.disabled.textColor, input$1.disabled.borderColor, input$1.disabled.cursor, function (_a) {
-  var $isOpen = _a.$isOpen;
-  return $isOpen && "\n    border-color: ".concat(input$1.focus.borderColor, ";\n  ");
+})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  font: ", ";\n  color: ", ";\n  cursor: pointer;\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    cursor: ", ";\n  }\n  \n  ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
+}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? input$1.error.hover.borderColor : input$1.hover.borderColor;
+}, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor;
+}, input$1.focus.outline, input$1.focus.outlineOffset, input$1.disabled.backgroundColor, input$1.disabled.textColor, input$1.disabled.borderColor, input$1.disabled.cursor, function (_a) {
+  var $isOpen = _a.$isOpen,
+    $hasError = _a.$hasError;
+  return $isOpen && "\n    border-color: ".concat($hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor, ";\n  ");
 });
 var DropdownIcon = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -3043,7 +3063,7 @@ var DropdownIcon = styled.div.withConfig({
   },
   displayName: "Dropdown__DropdownIcon",
   componentId: "sc-kz07c4-2"
-})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"])), spacing[2], function (_a) {
+})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", ";\n  transition: transform 0.15s ease;\n  \n  ", "\n"])), spacing[2], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen && "\n    transform: rotate(180deg);\n  ";
 });
@@ -3053,7 +3073,7 @@ var DropdownMenu = styled.div.withConfig({
   },
   displayName: "Dropdown__DropdownMenu",
   componentId: "sc-kz07c4-3"
-})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"])), zIndex[3], input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, shadow[3], spacing[1], function (_a) {
+})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"], ["\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transition: all 0.15s ease;\n  max-height: 300px;\n  overflow-y: auto;\n"])), zIndex[3], input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, shadow[3], spacing[1], function (_a) {
   var $isOpen = _a.$isOpen;
   return $isOpen ? 1 : 0;
 }, function (_a) {
@@ -3069,13 +3089,20 @@ var DropdownOption = styled.button.withConfig({
   },
   displayName: "Dropdown__DropdownOption",
   componentId: "sc-kz07c4-4"
-})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
+})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"], ["\n  width: 100%;\n  display: block;\n  padding: ", " ", ";\n  background-color: ", ";\n  border: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  \n  &:hover {\n    background-color: ", ";\n  }\n  \n  &:focus {\n    outline: none;\n    background-color: ", ";\n  }\n  \n  &:not(:last-child) {\n    border-bottom: ", ";\n  }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
   var $isSelected = _a.$isSelected,
     $isFocused = _a.$isFocused;
   if ($isFocused) return color.background.surface;
   if ($isSelected) return color.background.surface;
   return 'transparent';
 }, input$1["default"].font, input$1["default"].textColor, color.background.surface, color.background.surface, border.subtle);
+var StyledHelperText$3 = styled.div.withConfig({
+  displayName: "Dropdown__StyledHelperText",
+  componentId: "sc-kz07c4-5"
+})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), typography.caption, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? color.text.error : color.text.subdued;
+}, spacing[2]);
 var Dropdown = function Dropdown(_a) {
   var options = _a.options,
     value = _a.value,
@@ -3085,7 +3112,9 @@ var Dropdown = function Dropdown(_a) {
     _c = _a.disabled,
     disabled = _c === void 0 ? false : _c,
     className = _a.className,
-    label = _a.label;
+    label = _a.label,
+    helperText = _a.helperText,
+    error = _a.error;
   var _d = useState(false),
     isOpen = _d[0],
     setIsOpen = _d[1];
@@ -3098,6 +3127,10 @@ var Dropdown = function Dropdown(_a) {
   var selectedOption = options.find(function (option) {
     return option.id === value;
   });
+  var hasError = Boolean(error);
+  var errorId = error ? "".concat(dropdownId, "-error") : undefined;
+  var helperId = helperText && !error ? "".concat(dropdownId, "-helper") : undefined;
+  var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
   // Close dropdown when clicking outside
   useEffect(function () {
     var handleClickOutside = function handleClickOutside(event) {
@@ -3197,10 +3230,13 @@ var Dropdown = function Dropdown(_a) {
   }, label)), /*#__PURE__*/React.createElement(DropdownTrigger, {
     id: dropdownId,
     $isOpen: isOpen,
+    $hasError: hasError,
     onClick: handleTriggerClick,
     disabled: disabled,
     "aria-expanded": isOpen,
-    "aria-haspopup": "listbox"
+    "aria-haspopup": "listbox",
+    "aria-invalid": hasError,
+    "aria-describedby": describedBy
   }, /*#__PURE__*/React.createElement("span", null, selectedOption ? selectedOption.label : placeholder), /*#__PURE__*/React.createElement(DropdownIcon, {
     $isOpen: isOpen
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -3221,9 +3257,16 @@ var Dropdown = function Dropdown(_a) {
       role: "option",
       "aria-selected": option.id === value
     }, option.label);
-  })));
+  })), error && /*#__PURE__*/React.createElement(StyledHelperText$3, {
+    id: errorId,
+    role: "alert",
+    "aria-live": "polite",
+    $hasError: true
+  }, error), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$3, {
+    id: helperId
+  }, helperText));
 };
-var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2;
+var templateObject_1$7, templateObject_2$6, templateObject_3$5, templateObject_4$5, templateObject_5$4, templateObject_6$4;
 
 var input = tokensData.component.input;
 var StyledInputBase = styled.input.withConfig({
@@ -3232,7 +3275,7 @@ var StyledInputBase = styled.input.withConfig({
   },
   displayName: "InputBase__StyledInputBase",
   componentId: "sc-1bpf4e8-0"
-})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: ", ";\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"], ["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: ", ";\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"
+})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: ", ";\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"], ["\n  /* Typography */\n  font: ", ";\n  color: ", ";\n  \n  /* Layout */\n  width: 100%;\n  padding: ", " ", ";\n  \n  /* Visual styling */\n  background-color: ", ";\n  \n  border: ", " solid ", ";\n  \n  border-radius: ", ";\n  \n  /* Remove default appearance */\n  appearance: none;\n  outline: none;\n  \n  /* Transitions */\n  transition: border-color 200ms ease-in-out, \n              outline 200ms ease-in-out;\n  \n  /* Placeholder */\n  &::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n  \n  /* Focus state */\n  &:focus {\n    border-color: ", ";\n    outline: ", ";\n    outline-offset: ", ";\n  }\n  \n  /* Hover state (only when not disabled) */\n  &:hover:not(:disabled) {\n    border-color: ", ";\n  }\n  \n  /* Disabled state */\n  &:disabled {\n    cursor: ", ";\n  }\n  \n  /* Remove number input spinners */\n  &[type='number']::-webkit-inner-spin-button,\n  &[type='number']::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  \n  &[type='number'] {\n    -moz-appearance: textfield;\n  }\n"
 /**
  * Base styled textarea with shared styling
  */])), input["default"].font, function (_a) {
@@ -3263,40 +3306,40 @@ var StyledTextAreaBase = styled.textarea.withConfig({
   },
   displayName: "InputBase__StyledTextAreaBase",
   componentId: "sc-1bpf4e8-1"
-})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  /* Inherit all input base styles */\n  ", "\n  \n  /* TextArea specific */\n  min-height: 120px;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5;\n"], ["\n  /* Inherit all input base styles */\n  ", "\n  \n  /* TextArea specific */\n  min-height: 120px;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5;\n"])), StyledInputBase);
-var templateObject_1$4, templateObject_2$3;
+})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n  /* Inherit all input base styles */\n  ", "\n  \n  /* TextArea specific */\n  min-height: 120px;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5;\n"], ["\n  /* Inherit all input base styles */\n  ", "\n  \n  /* TextArea specific */\n  min-height: 120px;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5;\n"])), StyledInputBase);
+var templateObject_1$6, templateObject_2$5;
 
 React.createElement;
-var semantic$1 = tokensData.semantic,
-  base$1 = tokensData.base;
-var StyledFieldContainer$1 = styled.div.withConfig({
+var semantic$3 = tokensData.semantic,
+  base$3 = tokensData.base;
+var StyledFieldContainer$2 = styled.div.withConfig({
   displayName: "NumberInput__StyledFieldContainer",
   componentId: "sc-qotc3w-0"
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), base$1.spacing[2]);
-var StyledLabel$1 = styled.label.withConfig({
+})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), base$3.spacing[2]);
+var StyledLabel$3 = styled.label.withConfig({
   displayName: "NumberInput__StyledLabel",
   componentId: "sc-qotc3w-1"
-})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), base$1.spacing[1], semantic$1.typography.label, semantic$1.color.text["default"], semantic$1.color.text.disabled);
-var StyledRequiredIndicator$1 = styled.span.withConfig({
+})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), base$3.spacing[1], semantic$3.typography.label, semantic$3.color.text["default"], semantic$3.color.text.disabled);
+var StyledRequiredIndicator$2 = styled.span.withConfig({
   displayName: "NumberInput__StyledRequiredIndicator",
   componentId: "sc-qotc3w-2"
-})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n"])), semantic$1.color.text.error, base$1.fontWeight[5]);
-var StyledInputWrapper = styled.div.withConfig({
+})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n"])), semantic$3.color.text.error, base$3.fontWeight[5]);
+var StyledInputWrapper$1 = styled.div.withConfig({
   displayName: "NumberInput__StyledInputWrapper",
   componentId: "sc-qotc3w-3"
-})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
+})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
 var StyledNumberInput = styled(StyledInputBase).withConfig({
   displayName: "NumberInput__StyledNumberInput",
   componentId: "sc-qotc3w-4"
-})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  /* Add padding on the right to make room for stepper buttons */\n  padding-right: ", ";\n"], ["\n  /* Add padding on the right to make room for stepper buttons */\n  padding-right: ", ";\n"])), base$1.spacing[10]);
+})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  /* Add padding on the right to make room for stepper buttons */\n  padding-right: ", ";\n"], ["\n  /* Add padding on the right to make room for stepper buttons */\n  padding-right: ", ";\n"])), base$3.spacing[10]);
 var StyledStepperContainer = styled.div.withConfig({
   displayName: "NumberInput__StyledStepperContainer",
   componentId: "sc-qotc3w-5"
-})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"])), base$1.spacing[2], base$1.spacing[2]);
-var StyledHelperText$1 = styled.div.withConfig({
+})(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"], ["\n  position: absolute;\n  right: ", ";\n  display: flex;\n  flex-direction: row;\n  gap: ", ";\n"])), base$3.spacing[2], base$3.spacing[2]);
+var StyledHelperText$2 = styled.div.withConfig({
   displayName: "NumberInput__StyledHelperText",
   componentId: "sc-qotc3w-6"
-})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
+})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"
 /**
  * NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
  *
@@ -3319,9 +3362,9 @@ var StyledHelperText$1 = styled.div.withConfig({
  *   onChange={(newValue) => setValue(newValue)}
  * />
  * ```
- */])), semantic$1.typography.small, function (_a) {
+ */])), semantic$3.typography.small, function (_a) {
   var $isError = _a.$isError;
-  return $isError ? semantic$1.color.text.error : semantic$1.color.text.subdued;
+  return $isError ? semantic$3.color.text.error : semantic$3.color.text.subdued;
 });
 /**
  * NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
@@ -3457,12 +3500,12 @@ var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var isDecrementDisabled = disabled || min !== undefined && value !== '' && typeof value === 'number' && value <= min;
   // Build aria-describedby
   var ariaDescribedByIds = [ariaDescribedBy, helperText ? helperId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined;
-  return /*#__PURE__*/React.createElement(StyledFieldContainer$1, null, label && /*#__PURE__*/React.createElement(StyledLabel$1, {
+  return /*#__PURE__*/React.createElement(StyledFieldContainer$2, null, label && /*#__PURE__*/React.createElement(StyledLabel$3, {
     htmlFor: id,
     "data-disabled": disabled
-  }, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$1, {
+  }, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$2, {
     "aria-label": "required"
-  }, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper, null, /*#__PURE__*/React.createElement(StyledNumberInput, _extends({
+  }, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$1, null, /*#__PURE__*/React.createElement(StyledNumberInput, _extends({
     ref: ref,
     id: id,
     type: "text",
@@ -3503,7 +3546,7 @@ var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     "aria-label": "Decrement value",
     tabIndex: -1,
     type: "button"
-  }))), (helperText || error) && /*#__PURE__*/React.createElement(StyledHelperText$1, {
+  }))), (helperText || error) && /*#__PURE__*/React.createElement(StyledHelperText$2, {
     id: error ? errorId : helperId,
     $isError: !!error,
     role: error ? 'alert' : undefined,
@@ -3511,7 +3554,7 @@ var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, error || helperText));
 });
 NumberInput.displayName = 'NumberInput';
-var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7$1;
+var templateObject_1$5, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$2;
 
 React.createElement;
 var PageTitleStyled = styled.div.withConfig({
@@ -3520,7 +3563,7 @@ var PageTitleStyled = styled.div.withConfig({
   },
   displayName: "PageTitle__PageTitleStyled",
   componentId: "sc-16h256f-0"
-})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
+})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"], ["\n  margin-bottom: ", ";\n  margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
   var $hasBackButton = _a.$hasBackButton;
   return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
 });
@@ -3547,7 +3590,519 @@ var PageTitle = function PageTitle(_a) {
     color: "subdued"
   }, subtitle)));
 };
-var templateObject_1$2;
+var templateObject_1$4;
+
+React.createElement;
+var semantic$2 = tokensData.semantic,
+  base$2 = tokensData.base;
+var StyledFieldContainer$1 = styled.div.withConfig({
+  displayName: "PasswordField__StyledFieldContainer",
+  componentId: "sc-1p15zk0-0"
+})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), base$2.spacing[2]);
+var StyledLabel$2 = styled.label.withConfig({
+  displayName: "PasswordField__StyledLabel",
+  componentId: "sc-1p15zk0-1"
+})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  font: ", ";\n  color: ", ";\n  \n  &[data-disabled='true'] {\n    color: ", ";\n  }\n"])), base$2.spacing[1], semantic$2.typography.label, semantic$2.color.text["default"], semantic$2.color.text.disabled);
+var StyledRequiredIndicator$1 = styled.span.withConfig({
+  displayName: "PasswordField__StyledRequiredIndicator",
+  componentId: "sc-1p15zk0-2"
+})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n"])), semantic$2.color.text.error, base$2.fontWeight[5]);
+var StyledHelperText$1 = styled.div.withConfig({
+  displayName: "PasswordField__StyledHelperText",
+  componentId: "sc-1p15zk0-3"
+})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), semantic$2.typography.caption, function (_a) {
+  var $hasError = _a.$hasError;
+  return $hasError ? semantic$2.color.text.error : semantic$2.color.text.subdued;
+});
+var StyledInputWrapper = styled.div.withConfig({
+  displayName: "PasswordField__StyledInputWrapper",
+  componentId: "sc-1p15zk0-4"
+})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n"])));
+var StyledToggleButton = styled.div.withConfig({
+  displayName: "PasswordField__StyledToggleButton",
+  componentId: "sc-1p15zk0-5"
+})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"], ["\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n"
+/**
+ * PasswordField component for secure password input with visibility toggle
+ *
+ * @example
+ * ```tsx
+ * <PasswordField
+ *   label="Password"
+ *   helperText="Must be at least 8 characters"
+ *   required
+ * />
+ * ```
+ */])), base$2.spacing[2]);
+/**
+ * PasswordField component for secure password input with visibility toggle
+ *
+ * @example
+ * ```tsx
+ * <PasswordField
+ *   label="Password"
+ *   helperText="Must be at least 8 characters"
+ *   required
+ * />
+ * ```
+ */
+var PasswordField = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var label = _a.label,
+    helperText = _a.helperText,
+    error = _a.error,
+    _b = _a.required,
+    required = _b === void 0 ? false : _b,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    providedId = _a.id,
+    dataTestId = _a["data-testid"],
+    _d = _a.showToggle,
+    showToggle = _d === void 0 ? true : _d,
+    inputProps = __rest(_a, ["label", "helperText", "error", "required", "disabled", "id", 'data-testid', "showToggle"]);
+  // Generate unique ID if not provided
+  var generatedId = useId();
+  var id = providedId || generatedId;
+  // Password visibility state
+  var _e = useState(false),
+    showPassword = _e[0],
+    setShowPassword = _e[1];
+  // IDs for ARIA relationships
+  var errorId = error ? "".concat(id, "-error") : undefined;
+  var helperId = helperText && !error ? "".concat(id, "-helper") : undefined;
+  var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
+  var hasError = Boolean(error);
+  var togglePasswordVisibility = function togglePasswordVisibility() {
+    setShowPassword(!showPassword);
+  };
+  return /*#__PURE__*/React.createElement(StyledFieldContainer$1, null, label && /*#__PURE__*/React.createElement(StyledLabel$2, {
+    htmlFor: id,
+    "data-disabled": disabled
+  }, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$1, {
+    "aria-label": "required"
+  }, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper, null, /*#__PURE__*/React.createElement(StyledInputBase, _extends({
+    ref: ref,
+    id: id,
+    type: showPassword ? 'text' : 'password',
+    disabled: disabled,
+    required: required,
+    "aria-required": required,
+    "aria-invalid": hasError,
+    "aria-describedby": describedBy,
+    $hasError: hasError,
+    $disabled: disabled,
+    "data-testid": dataTestId,
+    style: {
+      paddingRight: showToggle ? '3rem' : undefined
+    }
+  }, inputProps)), showToggle && /*#__PURE__*/React.createElement(StyledToggleButton, null, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "naked",
+    size: "small",
+    iconName: showPassword ? 'eyeSlash' : 'eye',
+    onClick: togglePasswordVisibility,
+    disabled: disabled,
+    "aria-label": showPassword ? 'Hide password' : 'Show password',
+    "aria-pressed": showPassword,
+    type: "button",
+    tabIndex: -1
+  }))), error && /*#__PURE__*/React.createElement(StyledHelperText$1, {
+    id: errorId,
+    role: "alert",
+    "aria-live": "polite",
+    $hasError: true
+  }, error), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$1, {
+    id: helperId
+  }, helperText));
+});
+PasswordField.displayName = 'PasswordField';
+var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2;
+
+React.createElement;
+var semantic$1 = tokensData.semantic,
+  base$1 = tokensData.base;
+var StyledSliderContainer = styled.div.withConfig({
+  displayName: "Slider__StyledSliderContainer",
+  componentId: "sc-6mh2d4-0"
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  width: 100%;\n"])), base$1.spacing[2]);
+var StyledLabel$1 = styled.label.withConfig({
+  displayName: "Slider__StyledLabel",
+  componentId: "sc-6mh2d4-1"
+})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), semantic$1.typography.label, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? semantic$1.color.text.disabled : semantic$1.color.text["default"];
+});
+var StyledSliderTrackContainer = styled.div.withConfig({
+  displayName: "Slider__StyledSliderTrackContainer",
+  componentId: "sc-6mh2d4-2"
+})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  display: flex;\n  align-items: center;\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  display: flex;\n  align-items: center;\n"])), base$1.spacing[10]);
+var StyledTrack = styled.div.withConfig({
+  displayName: "Slider__StyledTrack",
+  componentId: "sc-6mh2d4-3"
+})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n"])), base$1.spacing[1], function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? semantic$1.color.background.disabled : semantic$1.color.border["default"];
+}, base$1.border.radius.circle, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var StyledTrackFill = styled.div.withConfig({
+  displayName: "Slider__StyledTrackFill",
+  componentId: "sc-6mh2d4-4"
+})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n"], ["\n  position: absolute;\n  height: 100%;\n  background-color: ", ";\n  border-radius: ", ";\n  pointer-events: none;\n"])), function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.interactive;
+}, base$1.border.radius.circle);
+var StyledThumb = styled.div.withConfig({
+  displayName: "Slider__StyledThumb",
+  componentId: "sc-6mh2d4-5"
+})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  transform: translateX(-50%);\n  transition: ", ";\n  box-shadow: ", ";\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\n  \n  &:active:not([aria-disabled=\"true\"]) {\n    cursor: grabbing;\n    transform: translateX(-50%) scale(0.95);\n  }\n  \n  ", "\n"], ["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: ", " solid ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  transform: translateX(-50%);\n  transition: ", ";\n  box-shadow: ", ";\n  \n  &:hover:not([aria-disabled=\"true\"]) {\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: ", ";\n  }\n  \n  &:active:not([aria-disabled=\"true\"]) {\n    cursor: grabbing;\n    transform: translateX(-50%) scale(0.95);\n  }\n  \n  ", "\n"])), base$1.spacing[5], base$1.spacing[5], function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
+}, base$1.border.width[2], function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.interactive;
+}, base$1.border.radius.circle, function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? 'not-allowed' : 'grab';
+}, semantic$1.motion.transition.fast, base$1.shadow[2], base$1.shadow[3], base$1.border.width[2], semantic$1.color.border.interactive, base$1.spacing[1], function (_a) {
+  var $active = _a.$active;
+  return $active && "\n    transform: translateX(-50%) scale(1.1);\n    box-shadow: ".concat(base$1.shadow[4], ";\n  ");
+});
+var StyledValueLabel = styled.div.withConfig({
+  displayName: "Slider__StyledValueLabel",
+  componentId: "sc-6mh2d4-6"
+})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  position: absolute;\n  top: -", ";\n  transform: translateX(-50%);\n  padding: ", " ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  border-radius: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: ", ";\n  \n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid ", ";\n  }\n"], ["\n  position: absolute;\n  top: -", ";\n  transform: translateX(-50%);\n  padding: ", " ", ";\n  background-color: ", ";\n  color: ", ";\n  font: ", ";\n  border-radius: ", ";\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: ", ";\n  \n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: ", " solid transparent;\n    border-right: ", " solid transparent;\n    border-top: ", " solid ", ";\n  }\n"])), base$1.spacing[8], base$1.spacing[1], base$1.spacing[2], semantic$1.color.background.emphasis, semantic$1.color.text.inverse, semantic$1.typography.caption, base$1.border.radius[2], function (_a) {
+  var $disabled = _a.$disabled;
+  return $disabled ? base$1.opacity[50] : base$1.opacity[100];
+}, base$1.spacing[1], base$1.spacing[1], base$1.spacing[1], semantic$1.color.background.emphasis);
+var StyledMinMaxLabels = styled.div.withConfig({
+  displayName: "Slider__StyledMinMaxLabels",
+  componentId: "sc-6mh2d4-7"
+})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  font: ", ";\n  color: ", ";\n  margin-top: ", ";\n"
+/**
+ * Slider component for single value or range selection
+ *
+ * @example
+ * ```tsx
+ * // Single value slider
+ * <Slider
+ *   label="Volume"
+ *   min={0}
+ *   max={100}
+ *   value={50}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // Range slider
+ * <Slider
+ *   label="Budget Range"
+ *   min={0}
+ *   max={1000}
+ *   rangeValue={[200, 800]}
+ *   onRangeChange={(values) => console.log(values)}
+ * />
+ * ```
+ */])), semantic$1.typography.caption, semantic$1.color.text.subdued, base$1.spacing[1]);
+/**
+ * Slider component for single value or range selection
+ *
+ * @example
+ * ```tsx
+ * // Single value slider
+ * <Slider
+ *   label="Volume"
+ *   min={0}
+ *   max={100}
+ *   value={50}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // Range slider
+ * <Slider
+ *   label="Budget Range"
+ *   min={0}
+ *   max={1000}
+ *   rangeValue={[200, 800]}
+ *   onRangeChange={(values) => console.log(values)}
+ * />
+ * ```
+ */
+var Slider = function Slider(_a) {
+  var _b = _a.min,
+    min = _b === void 0 ? 0 : _b,
+    _c = _a.max,
+    max = _c === void 0 ? 100 : _c,
+    _d = _a.step,
+    step = _d === void 0 ? 1 : _d,
+    controlledValue = _a.value,
+    defaultValue = _a.defaultValue,
+    controlledRangeValue = _a.rangeValue,
+    defaultRangeValue = _a.defaultRangeValue,
+    onChange = _a.onChange,
+    onRangeChange = _a.onRangeChange,
+    _e = _a.disabled,
+    disabled = _e === void 0 ? false : _e,
+    label = _a.label,
+    _f = _a.showValueLabel,
+    showValueLabel = _f === void 0 ? true : _f,
+    _g = _a.formatValue,
+    formatValue = _g === void 0 ? function (val) {
+      return val.toString();
+    } : _g,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"];
+  var generatedId = useId();
+  var trackRef = useRef(null);
+  var _h = useState(null),
+    activeThumb = _h[0],
+    setActiveThumb = _h[1];
+  // Determine if this is a range slider
+  var isRange = controlledRangeValue !== undefined || defaultRangeValue !== undefined || onRangeChange !== undefined;
+  // State for single slider
+  var _j = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : min),
+    internalValue = _j[0],
+    setInternalValue = _j[1];
+  var currentValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
+  // State for range slider
+  var _k = useState(defaultRangeValue !== null && defaultRangeValue !== void 0 ? defaultRangeValue : [min, min + (max - min) / 4]),
+    internalRangeValue = _k[0],
+    setInternalRangeValue = _k[1];
+  var currentRangeValue = controlledRangeValue !== null && controlledRangeValue !== void 0 ? controlledRangeValue : internalRangeValue;
+  // Clamp value to min/max and nearest step
+  var clampValue = function clampValue(val) {
+    var clamped = Math.max(min, Math.min(max, val));
+    var stepped = Math.round((clamped - min) / step) * step + min;
+    return Math.min(max, stepped);
+  };
+  // Convert pixel position to value
+  var positionToValue = function positionToValue(clientX) {
+    if (!trackRef.current) return min;
+    var rect = trackRef.current.getBoundingClientRect();
+    var percent = (clientX - rect.left) / rect.width;
+    var rawValue = min + percent * (max - min);
+    return clampValue(rawValue);
+  };
+  // Convert value to percentage for positioning
+  var valueToPercent = function valueToPercent(val) {
+    return (val - min) / (max - min) * 100;
+  };
+  // Handle single slider change
+  var handleSingleChange = function handleSingleChange(newValue) {
+    var clampedValue = clampValue(newValue);
+    setInternalValue(clampedValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(clampedValue);
+  };
+  // Handle range slider change
+  var handleRangeChange = function handleRangeChange(newMin, newMax) {
+    var clampedMin = clampValue(newMin);
+    var clampedMax = clampValue(newMax);
+    // Ensure min <= max
+    var orderedMin = Math.min(clampedMin, clampedMax);
+    var orderedMax = Math.max(clampedMin, clampedMax);
+    setInternalRangeValue([orderedMin, orderedMax]);
+    onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange([orderedMin, orderedMax]);
+  };
+  // Mouse/touch handlers
+  var handleTrackClick = function handleTrackClick(event) {
+    if (disabled) return;
+    var newValue = positionToValue(event.clientX);
+    if (isRange) {
+      var minVal = currentRangeValue[0],
+        maxVal = currentRangeValue[1];
+      var distToMin = Math.abs(newValue - minVal);
+      var distToMax = Math.abs(newValue - maxVal);
+      if (distToMin < distToMax) {
+        handleRangeChange(newValue, maxVal);
+      } else {
+        handleRangeChange(minVal, newValue);
+      }
+    } else {
+      handleSingleChange(newValue);
+    }
+  };
+  var handleThumbMouseDown = function handleThumbMouseDown(thumb) {
+    return function (event) {
+      if (disabled) return;
+      event.preventDefault();
+      setActiveThumb(thumb);
+      var handleMouseMove = function handleMouseMove(e) {
+        var newValue = positionToValue(e.clientX);
+        if (isRange) {
+          var minVal = currentRangeValue[0],
+            maxVal = currentRangeValue[1];
+          if (thumb === 'min') {
+            handleRangeChange(newValue, maxVal);
+          } else {
+            handleRangeChange(minVal, newValue);
+          }
+        } else {
+          handleSingleChange(newValue);
+        }
+      };
+      var _handleMouseUp = function handleMouseUp() {
+        setActiveThumb(null);
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', _handleMouseUp);
+      };
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', _handleMouseUp);
+    };
+  };
+  // Keyboard navigation
+  var handleKeyDown = function handleKeyDown(thumb) {
+    return function (event) {
+      if (disabled) return;
+      var valueChange = 0;
+      switch (event.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          valueChange = step;
+          event.preventDefault();
+          break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          valueChange = -step;
+          event.preventDefault();
+          break;
+        case 'PageUp':
+          valueChange = step * 10;
+          event.preventDefault();
+          break;
+        case 'PageDown':
+          valueChange = -step * 10;
+          event.preventDefault();
+          break;
+        case 'Home':
+          if (isRange) {
+            var minVal = currentRangeValue[0],
+              maxVal = currentRangeValue[1];
+            if (thumb === 'min') {
+              handleRangeChange(min, maxVal);
+            } else {
+              handleRangeChange(minVal, min);
+            }
+          } else {
+            handleSingleChange(min);
+          }
+          event.preventDefault();
+          return;
+        case 'End':
+          if (isRange) {
+            var minVal = currentRangeValue[0],
+              maxVal = currentRangeValue[1];
+            if (thumb === 'min') {
+              handleRangeChange(max, maxVal);
+            } else {
+              handleRangeChange(minVal, max);
+            }
+          } else {
+            handleSingleChange(max);
+          }
+          event.preventDefault();
+          return;
+        default:
+          return;
+      }
+      if (isRange) {
+        var minVal = currentRangeValue[0],
+          maxVal = currentRangeValue[1];
+        if (thumb === 'min') {
+          handleRangeChange(minVal + valueChange, maxVal);
+        } else {
+          handleRangeChange(minVal, maxVal + valueChange);
+        }
+      } else {
+        handleSingleChange(currentValue + valueChange);
+      }
+    };
+  };
+  // Calculate positions
+  var singlePercent = valueToPercent(currentValue);
+  var _l = [valueToPercent(currentRangeValue[0]), valueToPercent(currentRangeValue[1])],
+    minPercent = _l[0],
+    maxPercent = _l[1];
+  return /*#__PURE__*/React.createElement(StyledSliderContainer, {
+    "data-testid": dataTestId
+  }, label && /*#__PURE__*/React.createElement(StyledLabel$1, {
+    htmlFor: generatedId,
+    $disabled: disabled
+  }, label), /*#__PURE__*/React.createElement(StyledSliderTrackContainer, null, /*#__PURE__*/React.createElement(StyledTrack, {
+    ref: trackRef,
+    onClick: handleTrackClick,
+    $disabled: disabled
+  }, isRange ? /*#__PURE__*/React.createElement(StyledTrackFill, {
+    $disabled: disabled,
+    style: {
+      left: "".concat(minPercent, "%"),
+      width: "".concat(maxPercent - minPercent, "%")
+    }
+  }) : /*#__PURE__*/React.createElement(StyledTrackFill, {
+    $disabled: disabled,
+    style: {
+      left: 0,
+      width: "".concat(singlePercent, "%")
+    }
+  }), isRange ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledThumb, {
+    role: "slider",
+    tabIndex: disabled ? -1 : 0,
+    "aria-label": ariaLabel ? "".concat(ariaLabel, " minimum") : 'Minimum value',
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": currentRangeValue[0],
+    "aria-valuetext": formatValue(currentRangeValue[0]),
+    "aria-disabled": disabled,
+    "aria-describedby": ariaDescribedBy,
+    $disabled: disabled,
+    $active: activeThumb === 'min',
+    style: {
+      left: "".concat(minPercent, "%")
+    },
+    onMouseDown: handleThumbMouseDown('min'),
+    onKeyDown: handleKeyDown('min')
+  }, showValueLabel && /*#__PURE__*/React.createElement(StyledValueLabel, {
+    $disabled: disabled
+  }, formatValue(currentRangeValue[0]))), /*#__PURE__*/React.createElement(StyledThumb, {
+    role: "slider",
+    tabIndex: disabled ? -1 : 0,
+    "aria-label": ariaLabel ? "".concat(ariaLabel, " maximum") : 'Maximum value',
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": currentRangeValue[1],
+    "aria-valuetext": formatValue(currentRangeValue[1]),
+    "aria-disabled": disabled,
+    "aria-describedby": ariaDescribedBy,
+    $disabled: disabled,
+    $active: activeThumb === 'max',
+    style: {
+      left: "".concat(maxPercent, "%")
+    },
+    onMouseDown: handleThumbMouseDown('max'),
+    onKeyDown: handleKeyDown('max')
+  }, showValueLabel && /*#__PURE__*/React.createElement(StyledValueLabel, {
+    $disabled: disabled
+  }, formatValue(currentRangeValue[1])))) : /*#__PURE__*/React.createElement(StyledThumb, {
+    role: "slider",
+    tabIndex: disabled ? -1 : 0,
+    "aria-label": ariaLabel || label || 'Slider value',
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": currentValue,
+    "aria-valuetext": formatValue(currentValue),
+    "aria-disabled": disabled,
+    "aria-describedby": ariaDescribedBy,
+    $disabled: disabled,
+    $active: activeThumb === 'single',
+    style: {
+      left: "".concat(singlePercent, "%")
+    },
+    onMouseDown: handleThumbMouseDown('single'),
+    onKeyDown: handleKeyDown('single')
+  }, showValueLabel && /*#__PURE__*/React.createElement(StyledValueLabel, {
+    $disabled: disabled
+  }, formatValue(currentValue))))), /*#__PURE__*/React.createElement(StyledMinMaxLabels, null, /*#__PURE__*/React.createElement("span", null, formatValue(min)), /*#__PURE__*/React.createElement("span", null, formatValue(max))));
+};
+Slider.displayName = 'Slider';
+var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1;
 
 React.createElement;
 var semantic = tokensData.semantic,
@@ -3851,5 +4406,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
 // Main design system exports
 var tokens = tokensData;
 
-export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, NumberInput, PageTitle, Picture, ProgressBar, ResponsiveGrid, Stack, StyledInputBase, StyledTextAreaBase, Tag, TextField, Typography, iconsData, tokens };
+export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, Slider, Stack, StyledInputBase, StyledTextAreaBase, Tag, TextField, Typography, iconsData, tokens };
 //# sourceMappingURL=index.esm.js.map