@common-origin/design-system 1.5.0 → 1.7.0

package/dist/index.esm.js

@@ -758,14 +758,14 @@ var AvatarImage = styled.img.withConfig({
   },
   displayName: "Avatar__AvatarImage",
   componentId: "sc-ezn4ax-1"
-})(templateObject_2$9 || (templateObject_2$9 = __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$7 || (templateObject_3$7 = __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;
@@ -828,7 +828,7 @@ var Avatar = function Avatar(_a) {
     "aria-hidden": "true"
   }, initials));
 };
-var templateObject_1$l, templateObject_2$9, templateObject_3$7;
+var templateObject_1$l, templateObject_2$a, templateObject_3$8;
 
 React.createElement;
 var StyledBox = styled.div.withConfig({
@@ -842,9 +842,9 @@ var StyledBox = styled.div.withConfig({
 ])), function (props) {
   return props.$display && css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
 }, function (props) {
-  return props.$flexDirection && css(templateObject_2$8 || (templateObject_2$8 = __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$6 || (templateObject_3$6 = __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$5 || (templateObject_4$5 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
 }, function (props) {
@@ -1030,7 +1030,7 @@ var BoxTransform = function BoxTransform(props) {
   }, rest), children);
 };
 var Box = BoxTransform;
-var templateObject_1$k, templateObject_2$8, templateObject_3$6, templateObject_4$5, templateObject_5$4, templateObject_6$2, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
+var templateObject_1$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",
@@ -1060,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"
@@ -1100,6 +1104,10 @@ var link = {
 	path: "M10 7C10.5523 7 11 7.44772 11 8C11 8.55228 10.5523 9 10 9H7C5.34315 9 4 10.3431 4 12C4 13.6569 5.34315 15 7 15H10C10.5523 15 11 15.4477 11 16C11 16.5523 10.5523 17 10 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H10Z M17 7C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17H14C13.4477 17 13 16.5523 13 16C13 15.4477 13.4477 15 14 15H17C18.6569 15 20 13.6569 20 12C20 10.3431 18.6569 9 17 9H14C13.4477 9 13 8.55228 13 8C13 7.44772 13.4477 7 14 7H17Z M16 11C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H16Z",
 	name: "link"
 };
+var table = {
+	path: "M20 10H16V19H19C19.4995 19 19.7737 18.9982 19.9639 18.9727C19.9662 18.9724 19.9685 18.971 19.9707 18.9707C19.971 18.9685 19.9724 18.9662 19.9727 18.9639C19.9982 18.7737 20 18.4995 20 18V10ZM22 18C22 18.4431 22.0018 18.876 21.9541 19.2305C21.9026 19.6137 21.7773 20.0509 21.4141 20.4141C21.0509 20.7773 20.6137 20.9026 20.2305 20.9541C19.876 21.0018 19.4431 21 19 21H14V8.00001H22V18Z M10 8.00001V21H5.00001C4.55687 21 4.12397 21.0018 3.76954 20.9541C3.38634 20.9026 2.94916 20.7773 2.58595 20.4141C2.22273 20.0509 2.09743 19.6137 2.04591 19.2305C1.99825 18.876 2.00001 18.4431 2.00001 18V8.00001H10ZM4.00001 18C4.00001 18.4995 4.00181 18.7737 4.02735 18.9639C4.02766 18.9661 4.02803 18.9685 4.02833 18.9707C4.03085 18.9711 4.03351 18.9723 4.03614 18.9727C4.22633 18.9982 4.50051 19 5.00001 19H8.00001V10H4.00001V18Z M16 8.00001V21H8.00001V8.00001H16ZM10 19H14V10H10V19Z M20 6.00001C20 5.50051 19.9982 5.22633 19.9727 5.03614C19.9723 5.03351 19.9711 5.03085 19.9707 5.02833C19.9685 5.02803 19.9661 5.02766 19.9639 5.02735C19.7737 5.00181 19.4995 5.00001 19 5.00001H5.00001C4.50051 5.00001 4.22633 5.00181 4.03614 5.02735C4.03355 5.0277 4.03081 5.02798 4.02833 5.02833C4.02798 5.03081 4.0277 5.03355 4.02735 5.03614C4.00181 5.22633 4.00001 5.50051 4.00001 6.00001V8.00001H20V6.00001ZM22 10H2.00001V6.00001C2.00001 5.55687 1.99825 5.12397 2.04591 4.76954C2.09743 4.38634 2.22273 3.94916 2.58595 3.58595C2.94916 3.22273 3.38634 3.09743 3.76954 3.04591C4.12397 2.99825 4.55687 3.00001 5.00001 3.00001H19C19.4431 3.00001 19.876 2.99825 20.2305 3.04591C20.6137 3.09743 21.0509 3.22273 21.4141 3.58595C21.7773 3.94916 21.9026 4.38634 21.9541 4.76954C22.0018 5.12397 22 5.55687 22 6.00001V10Z",
+	name: "table"
+};
 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"
@@ -1112,8 +1120,13 @@ var iconsData = {
 	arrowRight: arrowRight,
 	back: back,
 	caret: caret,
+	check: check,
 	close: close,
 	directionRight: directionRight,
+	"export": {
+	path: "M7.70703 10.707L11 7.41406L11 14C11 14.5523 11.4477 15 12 15C12.5523 15 13 14.5523 13 14V7.41406L16.293 10.707L17.707 9.29297L12 3.58594L6.29297 9.29297L7.70703 10.707Z M4 17V16H6V17C6 17.5523 6.44772 18 7 18H17C17.5523 18 18 17.5523 18 17V16H20V17C20 18.6051 18.7394 19.9158 17.1543 19.9961L17 20H7C5.34315 20 4 18.6569 4 17Z",
+	name: "export"
+},
 	menu: menu,
 	pause: pause,
 	play: play,
@@ -1122,6 +1135,7 @@ var iconsData = {
 	message: message,
 	copy: copy,
 	link: link,
+	table: table,
 	userBox: userBox
 };
 
@@ -1235,7 +1249,7 @@ var StyledLink = styled.a.withConfig({
   },
   displayName: "Button__StyledLink",
   componentId: "sc-1eiuum9-1"
-})(templateObject_2$7 || (templateObject_2$7 = __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
@@ -1328,12 +1342,18 @@ var Button = function Button(_a) {
     "data-testid": dataTestId
   }, buttonProps), renderButtonContent(children, iconName, size));
 };
-var templateObject_1$i, templateObject_2$7;
+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 {
@@ -1358,6 +1378,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':
@@ -1365,11 +1386,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 {
@@ -1378,27 +1394,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: "ChipBase__BaseChipStyled",
+  componentId: "sc-moa6zc-0"
+})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: ", ";\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: ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
+// Icon container for selected indicator or leading icons
+])), tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
+// Icon container for selected indicator or leading icons
+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: "Chip__BaseChip",
-  componentId: "sc-fvu2t0-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"
+  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
-])), chip["default"].borderRadius, tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
+])), 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 StyledChip = function StyledChip(_a) {
+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 = {
@@ -1411,38 +1451,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();
@@ -1454,33 +1503,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$h;
+
+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 = {
@@ -1768,49 +1961,78 @@ var ProgressBar = function ProgressBar(_a) {
 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({
+var StyledDivider = styled.div.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
   },
-  displayName: "SectionSeparator__StyledSeparator",
-  componentId: "sc-ynv482-0"
-})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  border: none;\n  border-top: 1px solid;\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles */\n  ", "\n"], ["\n  border: none;\n  border-top: 1px solid;\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles */\n  ", "\n"
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-1l0c8ja-0"
+})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
 /**
- * SectionSeparator is an atomic component that provides visual separation between content sections.
+ * Divider is an atomic component that provides visual separation between content sections.
  *
  * Features:
  * - Multiple variants (default, strong, minimal)
  * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
  * - Semantic token usage for consistent styling
  * - Full accessibility support
  *
  * @example
  * ```tsx
- * <SectionSeparator />
- * <SectionSeparator variant="strong" size="xlarge" />
- * <SectionSeparator variant="minimal" />
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
  * ```
  */])), function (_a) {
+  var _b = _a.$orientation,
+    $orientation = _b === void 0 ? 'horizontal' : _b;
+  if ($orientation === 'vertical') {
+    return "\n        display: inline-block;\n        height: auto;\n        align-self: stretch;\n        border-left: 1px solid;\n        border-top: none;\n      ";
+  }
+  return "border-top: 1px solid;";
+}, function (_a) {
   var _b = _a.$variant,
-    $variant = _b === void 0 ? 'default' : _b;
+    $variant = _b === void 0 ? 'default' : _b,
+    _c = _a.$orientation,
+    $orientation = _c === void 0 ? 'horizontal' : _c;
+  var borderProperty = $orientation === 'vertical' ? 'border-left' : 'border-top';
   switch ($variant) {
     case 'strong':
-      return "border-top: ".concat(tokens.component.separator.variants.strong.border, ";");
+      return "".concat(borderProperty, ": ").concat(tokens.component.separator.variants.strong.border, ";");
     case 'minimal':
-      return "border-top: ".concat(tokens.component.separator.variants.minimal.border, ";");
+      return "".concat(borderProperty, ": ").concat(tokens.component.separator.variants.minimal.border, ";");
     case 'default':
     default:
-      return "border-top: ".concat(tokens.component.separator.variants["default"].border, ";");
+      return "".concat(borderProperty, ": ").concat(tokens.component.separator.variants["default"].border, ";");
   }
 }, function (_a) {
   var _b = _a.$size,
     $size = _b === void 0 ? 'large' : _b,
     _c = _a.$variant,
-    $variant = _c === void 0 ? 'default' : _c;
-  if ($variant === 'minimal') {
-    // Minimal variant always uses its predefined spacing
+    $variant = _c === void 0 ? 'default' : _c,
+    _d = _a.$orientation,
+    $orientation = _d === void 0 ? 'horizontal' : _d;
+  if ($variant === 'minimal' && $orientation === 'horizontal') {
+    // Minimal variant always uses its predefined spacing for horizontal
     return "margin: ".concat(tokens.component.separator.variants.minimal.margin, ";");
   }
+  if ($orientation === 'vertical') {
+    // Vertical orientation uses horizontal margins (left/right)
+    switch ($size) {
+      case 'small':
+        return "margin: 0 ".concat(tokens.semantic.spacing.separator.sm, ";");
+      case 'medium':
+        return "margin: 0 ".concat(tokens.semantic.spacing.separator.md, ";");
+      case 'xlarge':
+        return "margin: 0 ".concat(tokens.semantic.spacing.separator.xl, ";");
+      case 'large':
+      default:
+        return "margin: 0 ".concat(tokens.semantic.spacing.separator.lg, ";");
+    }
+  }
+  // Horizontal orientation uses vertical margins (top/bottom)
   switch ($size) {
     case 'small':
       return "margin: ".concat(tokens.component.separator.sizes.small.margin, ";");
@@ -1824,33 +2046,38 @@ var StyledSeparator = styled.div.withConfig({
   }
 });
 /**
- * SectionSeparator is an atomic component that provides visual separation between content sections.
+ * Divider is an atomic component that provides visual separation between content sections.
  *
  * Features:
  * - Multiple variants (default, strong, minimal)
  * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
  * - Semantic token usage for consistent styling
  * - Full accessibility support
  *
  * @example
  * ```tsx
- * <SectionSeparator />
- * <SectionSeparator variant="strong" size="xlarge" />
- * <SectionSeparator variant="minimal" />
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
  * ```
  */
-var SectionSeparator = function SectionSeparator(_a) {
+var Divider = function Divider(_a) {
   var _b = _a.variant,
     variant = _b === void 0 ? 'default' : _b,
     _c = _a.size,
     size = _c === void 0 ? 'large' : _c,
+    _d = _a.orientation,
+    orientation = _d === void 0 ? 'horizontal' : _d,
     dataTestId = _a["data-testid"];
-  return /*#__PURE__*/React.createElement(StyledSeparator, {
+  return /*#__PURE__*/React.createElement(StyledDivider, {
     $variant: variant,
     $size: size,
+    $orientation: orientation,
     "data-testid": dataTestId,
     role: "separator",
-    "aria-orientation": "horizontal"
+    "aria-orientation": orientation
   });
 };
 var templateObject_1$b;
@@ -2310,7 +2537,7 @@ var DesignCard = function DesignCard(_a) {
       url: readMoreHref
     }, readMoreText) : /*#__PURE__*/React.createElement(Button, {
       onClick: onReadMore
-    }, readMoreText)))))), /*#__PURE__*/React.createElement(SectionSeparator, null));
+    }, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
   }
   return null;
 };
@@ -2809,5 +3036,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, ProgressBar, ReleaseCard, ResponsiveGrid, SectionSeparator, Stack, Typography, iconsData, tokens };
+export { ArtCard, Avatar, BooleanChip, Box, Breadcrumbs, Button, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Divider, Dropdown, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ReleaseCard, ResponsiveGrid, Stack, Typography, iconsData, tokens };
 //# sourceMappingURL=index.esm.js.map