@common-origin/design-system 1.4.2 → 1.6.0

package/dist/index.esm.js

@@ -576,6 +576,24 @@ var component = {
 			}
 		}
 	},
+	progressBar: {
+		backgroundColor: "#dee2e6",
+		borderRadius: "0.25rem",
+		sizes: {
+			sm: {
+				height: "0.25rem"
+			},
+			md: {
+				height: "0.5rem"
+			},
+			lg: {
+				height: "1rem"
+			},
+			xl: {
+				height: "1.25rem"
+			}
+		}
+	},
 	$ref: "./component/index.json"
 };
 var semantic$1 = {
@@ -657,7 +675,8 @@ var semantic$1 = {
 			"success-subtle": "#CEF8E0",
 			warning: "#B14C00",
 			"warning-subtle": "#FFECCC",
-			disabled: "#dee2e6"
+			disabled: "#dee2e6",
+			progressTrack: "#dee2e6"
 		},
 		border: {
 			"default": "#e9ecef",
@@ -726,7 +745,7 @@ var AvatarContainer = styled.div.withConfig({
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$k || (templateObject_1$k = __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$l || (templateObject_1$l = __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 tokens.semantic.size.avatar[$size];
 }, function (_a) {
@@ -739,14 +758,14 @@ var AvatarImage = styled.img.withConfig({
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$8 || (templateObject_2$8 = __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"])), tokens.base.border.radius.circle);
+})(templateObject_2$a || (templateObject_2$a = __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"])), tokens.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$6 || (templateObject_3$6 = __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$8 || (templateObject_3$8 = __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
 ])), tokens.base.fontFamily.body, tokens.base.fontWeight[3], function (_a) {
   var $size = _a.$size;
@@ -809,7 +828,7 @@ var Avatar = function Avatar(_a) {
     "aria-hidden": "true"
   }, initials));
 };
-var templateObject_1$k, templateObject_2$8, templateObject_3$6;
+var templateObject_1$l, templateObject_2$a, templateObject_3$8;
 
 React.createElement;
 var StyledBox = styled.div.withConfig({
@@ -821,19 +840,19 @@ 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$j || (templateObject_1$j = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
+  return props.$display && css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
-  return props.$flexDirection && css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
+  return props.$flexDirection && css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
-  return props.$justifyContent && css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
+  return props.$justifyContent && css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
 }, function (props) {
-  return props.$alignItems && css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
+  return props.$alignItems && css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
-  return props.$flexWrap && css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
+  return props.$flexWrap && css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
 }, function (props) {
-  return props.$gap && css(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokens.semantic.spacing.layout[props.$gap]);
+  return props.$gap && css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokens.semantic.spacing.layout[props.$gap]);
 }, function (props) {
-  return props.$m && css(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokens.semantic.spacing.layout[props.$m]);
+  return props.$m && css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokens.semantic.spacing.layout[props.$m]);
 }, function (props) {
   return props.$mt && css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokens.semantic.spacing.layout[props.$mt]);
 }, function (props) {
@@ -1011,7 +1030,7 @@ var BoxTransform = function BoxTransform(props) {
   }, rest), children);
 };
 var Box = BoxTransform;
-var templateObject_1$j, templateObject_2$7, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$1, templateObject_7$1, 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$k, templateObject_2$9, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$2, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
 
 var add = {
 	path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
@@ -1041,6 +1060,10 @@ var caret = {
 	path: "m14.77 11.808-4.458-3.715A.8.8 0 0 0 9 8.708v6.584a.8.8 0 0 0 1.312.614l4.458-3.714a.25.25 0 0 0 0-.384Z",
 	name: "caret"
 };
+var check = {
+	path: "M9.16699 18.375L4.40039 14.7998L5.59961 13.2002L8.83301 15.625L17.2256 5.36719L18.7744 6.63281L9.16699 18.375Z",
+	name: "check"
+};
 var close = {
 	path: "M19.4141 6L13.4141 12L19.4141 18L18 19.4141L12 13.4141L6 19.4141L4.58594 18L10.5859 12L4.58594 6L6 4.58594L12 10.5859L18 4.58594L19.4141 6Z",
 	name: "close"
@@ -1093,6 +1116,7 @@ var iconsData = {
 	arrowRight: arrowRight,
 	back: back,
 	caret: caret,
+	check: check,
 	close: close,
 	directionRight: directionRight,
 	menu: menu,
@@ -1113,7 +1137,7 @@ var IconStyled = styled.span.withConfig({
   },
   displayName: "Icon__IconStyled",
   componentId: "sc-1105czq-0"
-})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
+})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n  \n  svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  \n  /* Use semantic icon colors */\n  color: ", ";\n"])), function (_a) {
   var $size = _a.$size;
   return tokens.semantic.size.icon[$size];
 }, function (_a) {
@@ -1177,7 +1201,7 @@ var Icon = function Icon(_a) {
     d: iconData.path
   })));
 };
-var templateObject_1$i;
+var templateObject_1$j;
 
 React.createElement;
 var button = tokens.component.button,
@@ -1209,14 +1233,14 @@ var StyledButton = styled.button.withConfig({
   },
   displayName: "Button__StyledButton",
   componentId: "sc-1eiuum9-0"
-})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
+})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
 var StyledLink = styled.a.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
   displayName: "Button__StyledLink",
   componentId: "sc-1eiuum9-1"
-})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"], ["\n  ", "\n  border-radius: ", ";\n  \n  ", "\n  ", "\n"
+})(templateObject_2$8 || (templateObject_2$8 = __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
@@ -1309,12 +1333,18 @@ var Button = function Button(_a) {
     "data-testid": dataTestId
   }, buttonProps), renderButtonContent(children, iconName, size));
 };
-var templateObject_1$h, templateObject_2$6;
+var templateObject_1$i, templateObject_2$8;
 
-React.createElement;
 var chip = tokens.component.chip;
-// Helper functions to get styles as objects for CSS custom properties
-var getVariantStylesAsObject = function getVariantStylesAsObject(variant) {
+// Helper function to get variant styles as objects for CSS custom properties
+var getVariantStylesAsObject = function getVariantStylesAsObject(variant, selected) {
+  // Boolean chips with selected state get special background
+  if (selected) {
+    return {
+      backgroundColor: tokens.semantic.color.background['interactive-subtle'],
+      color: chip["default"].textColor
+    };
+  }
   switch (variant) {
     case 'emphasis':
       return {
@@ -1339,6 +1369,7 @@ var getVariantStylesAsObject = function getVariantStylesAsObject(variant) {
       };
   }
 };
+// Helper function to get size styles as objects for CSS custom properties
 var getSizeStylesAsObject = function getSizeStylesAsObject(size) {
   switch (size) {
     case 'small':
@@ -1346,11 +1377,6 @@ var getSizeStylesAsObject = function getSizeStylesAsObject(size) {
         font: chip.sizes.small.font,
         padding: chip.sizes.small.padding
       };
-    case 'large':
-      return {
-        font: chip.sizes.large.font,
-        padding: chip.sizes.large.padding
-      };
     case 'medium':
     default:
       return {
@@ -1359,27 +1385,51 @@ var getSizeStylesAsObject = function getSizeStylesAsObject(size) {
       };
   }
 };
+
+React.createElement;
 // Base styled component using CSS variables to avoid prop leaking
-var BaseChip = styled.span.withConfig({
+var BaseChipStyled = styled.span.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
-  displayName: "Chip__BaseChip",
-  componentId: "sc-fvu2t0-0"
-})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\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: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\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"
-// Wrapper component that applies styles via CSS custom properties
+  displayName: "ChipBase__BaseChipStyled",
+  componentId: "sc-moa6zc-0"
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\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: ", ";\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\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
 ])), chip["default"].borderRadius, tokens.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$7 || (templateObject_2$7 = __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
+])), tokens.semantic.spacing.layout.sm);
+// Close button for dismissible chips
+var CloseButton = styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "ChipBase__CloseButton",
+  componentId: "sc-moa6zc-2"
+})(templateObject_3$6 || (templateObject_3$6 = __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
-var StyledChip = function StyledChip(_a) {
+])), tokens.semantic.spacing.layout.sm, function (props) {
+  return props.$disabled ? 'not-allowed' : 'pointer';
+}, function (props) {
+  return props.$disabled ? '0.6' : '1';
+}, tokens.semantic.motion.transition.fast, chip.variants.interactive.backgroundColor);
+// Wrapper component that applies styles via CSS custom properties
+var StyledChipWrapper = function StyledChipWrapper(_a) {
   var $variant = _a.$variant,
     $size = _a.$size,
     $disabled = _a.$disabled,
     $clickable = _a.$clickable,
+    $selected = _a.$selected,
     children = _a.children,
     style = _a.style,
-    htmlProps = __rest(_a, ["$variant", "$size", "$disabled", "$clickable", "children", "style"]);
+    htmlProps = __rest(_a, ["$variant", "$size", "$disabled", "$clickable", "$selected", "children", "style"]);
   // Get styles for variant and size
-  var variantStyles = getVariantStylesAsObject($variant);
+  var variantStyles = getVariantStylesAsObject($variant, $selected);
   var sizeStyles = getSizeStylesAsObject($size);
   // Create CSS custom properties object
   var cssProps = {
@@ -1392,38 +1442,47 @@ var StyledChip = function StyledChip(_a) {
     '--chip-hover-opacity': $disabled ? '0.6' : $clickable ? '0.8' : '1',
     '--chip-active-opacity': $disabled ? '0.6' : $clickable ? '0.9' : '1'
   };
-  return /*#__PURE__*/React.createElement(BaseChip, _extends({
+  return /*#__PURE__*/React.createElement(BaseChipStyled, _extends({
     style: __assign(__assign({}, cssProps), style)
   }, htmlProps), children);
 };
+var templateObject_1$h, templateObject_2$7, templateObject_3$6;
+
+React.createElement;
+/**
+ * Chip - Compact element for displaying tags, categories, and labels
+ *
+ * Use this component for static display chips or simple interactive chips.
+ * For specialized filtering patterns, use:
+ * - FilterChip: Dismissible chips for showing applied filters
+ * - BooleanChip: Toggleable chips for quick filter controls
+ *
+ * Variants:
+ * - default: Standard gray background
+ * - emphasis: High-contrast dark background
+ * - subtle: Light background for secondary info
+ * - interactive: Blue background with hover states
+ */
 var Chip = function Chip(_a) {
   var children = _a.children,
     _b = _a.variant,
     variant = _b === void 0 ? 'default' : _b,
-    _e = _a.size,
-    size = _e === void 0 ? 'medium' : _e,
+    _c = _a.size,
+    size = _c === void 0 ? 'medium' : _c,
     onClick = _a.onClick,
-    _f = _a.disabled,
-    disabled = _f === void 0 ? false : _f,
+    _d = _a.disabled,
+    disabled = _d === void 0 ? false : _d,
     dataTestId = _a["data-testid"],
     ariaLabel = _a["aria-label"],
     ariaDescribedBy = _a["aria-describedby"],
     role = _a.role,
     title = _a.title,
-    // Legacy prop support
     props = __rest(_a, ["children", "variant", "size", "onClick", "disabled", 'data-testid', 'aria-label', 'aria-describedby', "role", "title"]);
   var isClickable = Boolean(onClick && !disabled);
-  // Map legacy variants to new variants for backward compatibility
+  // Map legacy variants to new variants
   var normalizedVariant = variant === 'light' ? 'default' : variant === 'dark' ? 'emphasis' : variant;
-  // Support legacy title prop - prioritize children over title
+  // Support legacy title prop
   var content = children !== undefined ? children : title;
-  // Remove styled-only props from the rest
-  var _g = props;
-    _g.variant;
-    _g.size;
-    _g.disabled;
-    _g.clickable;
-    var htmlProps = __rest(_g, ["variant", "size", "disabled", "clickable"]);
   var handleClick = function handleClick() {
     if (onClick && !disabled) {
       onClick();
@@ -1435,33 +1494,177 @@ var Chip = function Chip(_a) {
       handleClick();
     }
   };
-  return /*#__PURE__*/React.createElement(StyledChip, _extends({
+  return /*#__PURE__*/React.createElement(StyledChipWrapper, _extends({
     $variant: normalizedVariant,
     $size: size,
     $disabled: disabled || undefined,
     $clickable: isClickable || undefined,
     onClick: isClickable ? handleClick : undefined,
-    onKeyDown: isClickable ? handleKeyDown : undefined,
+    onKeyDown: handleKeyDown,
     tabIndex: isClickable ? 0 : undefined,
     role: role || (isClickable ? 'button' : undefined),
     "aria-label": ariaLabel,
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": disabled ? 'true' : undefined,
     "data-testid": dataTestId
-  }, htmlProps), content);
+  }, props), content);
 };
-// Legacy component for backward compatibility
 var LegacyChip = function LegacyChip(_a) {
   var title = _a.title,
     _b = _a.variant,
     variant = _b === void 0 ? 'light' : _b;
-  // Map legacy variants to new variants
   var newVariant = variant === 'dark' ? 'emphasis' : 'default';
   return /*#__PURE__*/React.createElement(Chip, {
     variant: newVariant
   }, title);
 };
-var templateObject_1$g;
+
+React.createElement;
+/**
+ * FilterChip - Chip for displaying filters with selected state and optional dismissal
+ *
+ * Use this component to show filters that can be selected/deselected.
+ * When selected, displays a checkmark and light blue background.
+ * Optionally dismissible when onDismiss is provided.
+ *
+ * Features:
+ * - Shows checkmark icon when selected
+ * - Light blue background when selected
+ * - Optional close (×) button when onDismiss is provided
+ * - Keyboard dismissal with Delete or Backspace keys (when dismissible)
+ * - Non-clickable body (only close button is interactive when present)
+ * - Uses subtle/interactive background styling based on selected state
+ * - Announces as "status" to screen readers
+ */
+var FilterChip = function FilterChip(_a) {
+  var children = _a.children,
+    _b = _a.selected,
+    selected = _b === void 0 ? false : _b,
+    onDismiss = _a.onDismiss,
+    _c = _a.size,
+    size = _c === void 0 ? 'medium' : _c,
+    _d = _a.disabled,
+    disabled = _d === void 0 ? false : _d,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"],
+    role = _a.role,
+    props = __rest(_a, ["children", "selected", "onDismiss", "size", "disabled", 'data-testid', 'aria-label', 'aria-describedby', "role"]);
+  var isDismissible = Boolean(onDismiss);
+  var handleDismiss = function handleDismiss(event) {
+    event.stopPropagation(); // Prevent event bubbling
+    if (!disabled && onDismiss) {
+      onDismiss();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    // Handle dismiss with Delete or Backspace (only when dismissible)
+    if (!disabled && isDismissible && onDismiss && (event.key === 'Delete' || event.key === 'Backspace')) {
+      event.preventDefault();
+      onDismiss();
+    }
+  };
+  var handleCloseKeyDown = function handleCloseKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (!disabled && onDismiss) onDismiss();
+    }
+  };
+  // Generate accessible label for close button
+  var closeButtonLabel = typeof children === 'string' ? "Remove ".concat(children) : 'Remove filter';
+  return /*#__PURE__*/React.createElement(StyledChipWrapper, _extends({
+    $variant: "subtle",
+    $size: size,
+    $disabled: disabled || undefined,
+    $clickable: false,
+    $selected: selected,
+    onKeyDown: handleKeyDown,
+    role: role || 'status',
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-disabled": disabled ? 'true' : undefined,
+    "data-testid": dataTestId
+  }, props), selected && /*#__PURE__*/React.createElement(IconContainer, {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "check",
+    size: "sm"
+  })), children, isDismissible && /*#__PURE__*/React.createElement(CloseButton, {
+    type: "button",
+    onClick: handleDismiss,
+    onKeyDown: handleCloseKeyDown,
+    disabled: disabled,
+    $disabled: disabled,
+    "aria-label": closeButtonLabel,
+    tabIndex: 0,
+    "data-testid": dataTestId ? "".concat(dataTestId, "-close") : undefined
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "close",
+    size: "sm"
+  })));
+};
+
+React.createElement;
+/**
+ * BooleanChip - Toggleable chip for quick filter controls
+ *
+ * Use this component for multi-select filter controls where users can
+ * see which options are active. Common in table filtering patterns where
+ * users toggle filters on/off.
+ *
+ * Features:
+ * - Shows checkmark icon when selected
+ * - Entire chip is clickable to toggle
+ * - Keyboard activation with Space or Enter
+ * - Uses checkbox role with aria-checked
+ * - Visual background change when selected
+ */
+var BooleanChip = function BooleanChip(_a) {
+  var children = _a.children,
+    selected = _a.selected,
+    onClick = _a.onClick,
+    _b = _a.size,
+    size = _b === void 0 ? 'medium' : _b,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"],
+    props = __rest(_a, ["children", "selected", "onClick", "size", "disabled", 'data-testid', 'aria-label', 'aria-describedby']);
+  var handleClick = function handleClick() {
+    if (!disabled) {
+      onClick();
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    // Handle activation with Space or Enter
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick();
+    }
+  };
+  return /*#__PURE__*/React.createElement(StyledChipWrapper, _extends({
+    $variant: "subtle",
+    $size: size,
+    $disabled: disabled || undefined,
+    $clickable: !disabled,
+    $selected: selected,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: disabled ? undefined : 0,
+    role: "checkbox",
+    "aria-checked": selected ? 'true' : 'false',
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-disabled": disabled ? 'true' : undefined,
+    "data-testid": dataTestId
+  }, props), selected && /*#__PURE__*/React.createElement(IconContainer, {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "check",
+    size: "sm"
+  })), children);
+};
 
 // Breakpoints using base tokens
 var breakpoints$1 = {
@@ -1487,32 +1690,32 @@ var spacing$3 = tokens.semantic.spacing;
 var StyledContainer = styled.div.withConfig({
   displayName: "Container__StyledContainer",
   componentId: "sc-17dbj6n-0"
-})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"])), spacing$3.layout['2xl'], spacing$3.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
+})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"], ["\n  width: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: ", ";\n  padding-right: ", ";\n  \n  ", " {\n    max-width: 640px;\n  }\n  \n  ", " {\n    max-width: 768px;\n  }\n  \n  ", " {\n    max-width: 1024px;\n  }\n  \n  ", " {\n    max-width: 1280px;\n  }\n  \n  ", " {\n    max-width: 1536px;\n  }\n"])), spacing$3.layout['2xl'], spacing$3.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
 var Container = function Container(_a) {
   var children = _a.children,
     props = __rest(_a, ["children"]);
   return /*#__PURE__*/React.createElement(StyledContainer, props, children);
 };
-var templateObject_1$f;
+var templateObject_1$g;
 
 React.createElement;
 var base = tokens.base;
 var PictureWrapper = styled.div.withConfig({
   displayName: "Picture__PictureWrapper",
   componentId: "sc-11d9tei-0"
-})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"])), media$1.sm);
+})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"], ["\n  margin: 0 auto;\n  \n  ", " {\n    margin-left: 0;\n    margin-right: 0;\n  }\n"])), media$1.sm);
 var ImageLink = styled.a.withConfig({
   displayName: "Picture__ImageLink",
   componentId: "sc-11d9tei-1"
-})(templateObject_2$5 || (templateObject_2$5 = __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.duration.normal, base.easing.easeInOut);
+})(templateObject_2$6 || (templateObject_2$6 = __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.duration.normal, base.easing.easeInOut);
 var ImageButton = styled.button.withConfig({
   displayName: "Picture__ImageButton",
   componentId: "sc-11d9tei-2"
-})(templateObject_3$4 || (templateObject_3$4 = __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.duration.normal, base.easing.easeInOut);
+})(templateObject_3$5 || (templateObject_3$5 = __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.duration.normal, base.easing.easeInOut);
 var StyledImage = styled.img.withConfig({
   displayName: "Picture__StyledImage",
   componentId: "sc-11d9tei-3"
-})(templateObject_4$3 || (templateObject_4$3 = __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.border.radius[2]);
+})(templateObject_4$4 || (templateObject_4$4 = __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.border.radius[2]);
 var Picture = function Picture(_a) {
   var title = _a.title,
     src = _a.src,
@@ -1539,7 +1742,7 @@ var Picture = function Picture(_a) {
     "aria-label": "Read more about ".concat(title)
   }, image) : image);
 };
-var templateObject_1$e, templateObject_2$5, templateObject_3$4, templateObject_4$3;
+var templateObject_1$f, templateObject_2$6, templateObject_3$5, templateObject_4$4;
 
 React.createElement;
 var _a$5 = tokens.semantic,
@@ -1548,7 +1751,7 @@ var _a$5 = tokens.semantic,
 var TimeStyled = styled.time.withConfig({
   displayName: "DateFormatter__TimeStyled",
   componentId: "sc-5464cc-0"
-})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography$2.label, color$3.text.subdued);
+})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography$2.label, color$3.text.subdued);
 var DateFormatter = function DateFormatter(_a) {
   var dateString = _a.dateString,
     _b = _a.formatString,
@@ -1560,7 +1763,7 @@ var DateFormatter = function DateFormatter(_a) {
     "data-testid": dataTestId
   }, format(date, formatString));
 };
-var templateObject_1$d;
+var templateObject_1$e;
 
 React.createElement;
 var motion = tokens.semantic.motion,
@@ -1571,7 +1774,7 @@ var IconButtonStyled = styled.button.withConfig({
   },
   displayName: "IconButton__IconButtonStyled",
   componentId: "sc-k8b14t-0"
-})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"], ["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), function (_a) {
+})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"], ["\n  background-color: ", ";\n  border: none;\n  border-radius: ", ";\n  transition: ", ";\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  height: max-content;\n  cursor: pointer;\n  position: relative;\n\n  /* Size-specific dimensions from component tokens */\n  min-width: ", ";\n  min-height: ", ";\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:focus {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: not-allowed;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    border: 1px solid;\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), function (_a) {
   var $variant = _a.$variant;
   switch ($variant) {
     case 'primary':
@@ -1682,7 +1885,71 @@ var IconButton = function IconButton(_a) {
     "aria-hidden": "true" // Hide icon from screen readers since button has aria-label
   }));
 };
-var templateObject_1$c;
+var templateObject_1$d;
+
+React.createElement;
+var ProgressBarContainer = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "ProgressBar__ProgressBarContainer",
+  componentId: "sc-1nco33q-0"
+})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"])), tokens.semantic.color.background.disabled, tokens.base.border.radius[1], function (props) {
+  return props.$variant === 'horizontal' && css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? tokens.component.progressBar.sizes[props.$height].height : tokens.component.progressBar.sizes.md.height);
+}, function (props) {
+  return props.$variant === 'vertical' && css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n  "], ["\n    width: ", ";\n    height: 100%;\n  "])), props.$width ? tokens.component.progressBar.sizes[props.$width].height : tokens.component.progressBar.sizes.md.height);
+});
+var ProgressBarFill = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "ProgressBar__ProgressBarFill",
+  componentId: "sc-1nco33q-1"
+})(templateObject_7$1 || (templateObject_7$1 = __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"])), tokens.semantic.motion.transition.normal, function (props) {
+  var backgroundColor;
+  switch (props.$color) {
+    case 'success':
+      backgroundColor = tokens.semantic.color.background.success;
+      break;
+    case 'error':
+      backgroundColor = tokens.semantic.color.background.error;
+      break;
+    case 'default':
+    default:
+      backgroundColor = tokens.semantic.color.background.interactive;
+      break;
+  }
+  return css(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
+}, function (props) {
+  return props.$variant === 'horizontal' && css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n    width: ", "%;\n  "], ["\n    width: ", "%;\n  "])), Math.min(100, Math.max(0, props.$value)));
+}, function (props) {
+  return props.$variant === 'vertical' && css(templateObject_6$1 || (templateObject_6$1 = __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,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'horizontal' : _b,
+    _c = _a.color,
+    color = _c === void 0 ? 'default' : _c,
+    height = _a.height,
+    width = _a.width,
+    dataTestId = _a["data-testid"];
+  return /*#__PURE__*/React.createElement(ProgressBarContainer, {
+    $variant: variant,
+    $height: height,
+    $width: width,
+    "data-testid": dataTestId,
+    role: "progressbar",
+    "aria-valuenow": Math.min(100, Math.max(0, value)),
+    "aria-valuemin": 0,
+    "aria-valuemax": 100
+  }, /*#__PURE__*/React.createElement(ProgressBarFill, {
+    $value: value,
+    $variant: variant,
+    $color: color
+  }));
+};
+var templateObject_1$c, templateObject_2$5, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$1, templateObject_7$1;
 
 React.createElement;
 var StyledSeparator = styled.div.withConfig({
@@ -2726,5 +2993,5 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
 
-export { ArtCard, Avatar, Box, Breadcrumbs, Button, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Dropdown, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ReleaseCard, ResponsiveGrid, SectionSeparator, Stack, Typography, iconsData, tokens };
+export { ArtCard, Avatar, BooleanChip, Box, Breadcrumbs, Button, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Dropdown, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ReleaseCard, ResponsiveGrid, SectionSeparator, Stack, Typography, iconsData, tokens };
 //# sourceMappingURL=index.esm.js.map