@common-origin/design-system 1.9.6 → 1.9.7

package/dist/components/atoms/Tag/Tag.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface TagProps {
+    /**
+     * Text content to display in the tag
+     */
+    children: React.ReactNode;
+    /**
+     * Visual variant of the tag based on semantic meaning
+     * @default 'default'
+     */
+    variant?: 'default' | 'interactive' | 'success' | 'warning' | 'error' | 'emphasis';
+    /**
+     * Whether to show a border
+     * @default true
+     */
+    border?: boolean;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * Tag component for categorizing and labeling content
+ *
+ * A static, non-interactive label used to categorize elements or objects in the UI.
+ * Tags help users quickly identify and understand content classification.
+ */
+export declare const Tag: React.FC<TagProps>;

package/dist/components/atoms/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export { Tag } from './Tag';
+export type { TagProps } from './Tag';

package/dist/components/atoms/index.d.ts

@@ -11,4 +11,5 @@ export * from './IconButton';
 export * from './ProgressBar';
 export * from './Divider';
 export * from './Stack';
+export * from './Tag';
 export * from './Typography';

package/dist/index.esm.js

@@ -595,7 +595,7 @@ var component = {
 	},
 	$ref: "./component/index.json"
 };
-var semantic$1 = {
+var semantic$2 = {
 	border: {
 		"default": "0.0625rem solid #e9ecef",
 		subtle: "0.0625rem solid #dee2e6",
@@ -734,7 +734,7 @@ var semantic$1 = {
 var tokensData = {
 	base: base$1,
 	component: component,
-	semantic: semantic$1
+	semantic: semantic$2
 };
 
 React.createElement;
@@ -744,7 +744,7 @@ var AvatarContainer = styled.div.withConfig({
   },
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-ezn4ax-0"
-})(templateObject_1$m || (templateObject_1$m = __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$n || (templateObject_1$n = __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) {
@@ -827,7 +827,7 @@ var Avatar = function Avatar(_a) {
     "aria-hidden": "true"
   }, initials));
 };
-var templateObject_1$m, templateObject_2$b, templateObject_3$9;
+var templateObject_1$n, templateObject_2$b, templateObject_3$9;
 
 React.createElement;
 var _a$5 = tokensData.semantic,
@@ -895,7 +895,7 @@ var StyledTypography = styled.span.withConfig({
   },
   displayName: "Typography__StyledTypography",
   componentId: "sc-17mqo4k-0"
-})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"], ["\n  ", "\n  color: ", ";\n  margin: 0;\n  \n  /* Ensure proper line height for readability */\n  ", "\n"
+})(templateObject_1$m || (templateObject_1$m = __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.
  *
@@ -962,12 +962,12 @@ var Typography = function Typography(_a) {
     "data-testid": dataTestId
   }, children);
 };
-var templateObject_1$l;
+var templateObject_1$m;
 
 React.createElement;
 var color$3 = tokensData.semantic.color;
   tokensData.base.shadow;
-var scaleIn = keyframes(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
+var scaleIn = keyframes(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"], ["\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n"])));
 var BadgeWrapper = styled.span.withConfig({
   displayName: "Badge__BadgeWrapper",
   componentId: "sc-tjz4pp-0"
@@ -1034,7 +1034,7 @@ var Badge = function Badge(_a) {
     color: "inverse"
   }, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
 };
-var templateObject_1$k, templateObject_2$a, templateObject_3$8, templateObject_4$6;
+var templateObject_1$l, templateObject_2$a, templateObject_3$8, templateObject_4$6;
 
 React.createElement;
 var StyledBox = styled.div.withConfig({
@@ -1046,7 +1046,7 @@ var StyledBox = styled.div.withConfig({
 })(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"], ["\n  ", "\n  \n  // Flexbox\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Margin\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Padding\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Size\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Position\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Borders\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  // Background & Color\n  ", "\n  ", "\n  \n  // Overflow\n  ", "\n  ", "\n  ", "\n"
 // Transform component that maps clean props to $-prefixed props for styled-components
 ])), function (props) {
-  return props.$display && css(templateObject_1$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$9 || (templateObject_2$9 = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
 }, function (props) {
@@ -1236,7 +1236,7 @@ var BoxTransform = function BoxTransform(props) {
   }, rest), children);
 };
 var Box = BoxTransform;
-var templateObject_1$j, templateObject_2$9, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$2, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
+var 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",
@@ -1357,7 +1357,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 tokensData.semantic.size.icon[$size];
 }, function (_a) {
@@ -1421,13 +1421,13 @@ var Icon = function Icon(_a) {
     d: iconData.path
   })));
 };
-var templateObject_1$i;
+var templateObject_1$j;
 
 React.createElement;
 var button = tokensData.component.button,
-  semantic = tokensData.semantic;
+  semantic$1 = 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.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$1.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;
@@ -1453,7 +1453,7 @@ 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('$');
@@ -1553,7 +1553,7 @@ var Button = function Button(_a) {
     "data-testid": dataTestId
   }, buttonProps), renderButtonContent(children, iconName, size));
 };
-var templateObject_1$h, templateObject_2$8;
+var templateObject_1$i, templateObject_2$8;
 
 var chip = tokensData.component.chip;
 // Helper function to get variant styles as objects for CSS custom properties
@@ -1614,7 +1614,7 @@ var BaseChipStyled = styled.span.withConfig({
   },
   displayName: "ChipBase__BaseChipStyled",
   componentId: "sc-moa6zc-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: 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$h || (templateObject_1$h = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  height: max-content;\n  border-radius: 12px;\n  box-sizing: border-box;\n  user-select: none;\n  white-space: nowrap;\n  transition: width ", ";\n  \n  /* Use CSS custom properties set by wrapper */\n  background-color: var(--chip-bg-color);\n  color: var(--chip-text-color);\n  font: var(--chip-font);\n  padding: var(--chip-padding);\n  opacity: var(--chip-opacity, 1);\n  cursor: var(--chip-cursor, default);\n  \n  &:hover {\n    opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:active {\n    opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n  }\n  \n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n"
 // Icon container for selected indicator or leading icons
 ])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
 // Icon container for selected indicator or leading icons
@@ -1666,7 +1666,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
     style: __assign(__assign({}, cssProps), style)
   }, htmlProps), children);
 };
-var templateObject_1$g, templateObject_2$7, templateObject_3$6;
+var templateObject_1$h, templateObject_2$7, templateObject_3$6;
 
 React.createElement;
 /**
@@ -1910,20 +1910,20 @@ var spacing$3 = tokensData.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 = tokensData.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"
@@ -1962,7 +1962,7 @@ var Picture = function Picture(_a) {
     "aria-label": "Read more about ".concat(title)
   }, image) : image);
 };
-var templateObject_1$e, templateObject_2$6, templateObject_3$5, templateObject_4$4;
+var templateObject_1$f, templateObject_2$6, templateObject_3$5, templateObject_4$4;
 
 React.createElement;
 var _a$4 = tokensData.semantic,
@@ -1971,7 +1971,7 @@ var _a$4 = tokensData.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$1.label, color$2.text.subdued);
+})(templateObject_1$e || (templateObject_1$e = __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,
@@ -1983,7 +1983,7 @@ var DateFormatter = function DateFormatter(_a) {
     "data-testid": dataTestId
   }, format(date, formatString));
 };
-var templateObject_1$d;
+var templateObject_1$e;
 
 React.createElement;
 var motion = tokensData.semantic.motion,
@@ -1994,7 +1994,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':
@@ -2105,7 +2105,7 @@ 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({
@@ -2115,7 +2115,7 @@ var ProgressBarContainer = styled.div.withConfig({
   displayName: "ProgressBar__ProgressBarContainer",
   componentId: "sc-1nco33q-0"
 })(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"])), tokensData.semantic.color.background.disabled, tokensData.base.border.radius[1], function (props) {
-  return props.$variant === 'horizontal' && css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n  "], ["\n    width: 100%;\n    height: ", ";\n  "])), props.$height ? tokensData.component.progressBar.sizes[props.$height].height : tokensData.component.progressBar.sizes.md.height);
+  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 ? tokensData.component.progressBar.sizes[props.$height].height : tokensData.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 ? tokensData.component.progressBar.sizes[props.$width].height : tokensData.component.progressBar.sizes.md.height);
 });
@@ -2169,7 +2169,7 @@ var ProgressBar = function ProgressBar(_a) {
     $color: color
   }));
 };
-var templateObject_1$b, templateObject_2$5, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$1, templateObject_7$1;
+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 StyledDivider = styled.div.withConfig({
@@ -2178,7 +2178,7 @@ var StyledDivider = styled.div.withConfig({
   },
   displayName: "Divider__StyledDivider",
   componentId: "sc-1l0c8ja-0"
-})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"], ["\n  border: none;\n  \n  /* Apply orientation */\n  ", "\n  \n  /* Apply variant styles */\n  ", "\n  \n  /* Apply size styles (spacing) */\n  ", "\n"
+})(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"
 /**
  * Divider is an atomic component that provides visual separation between content sections.
  *
@@ -2291,7 +2291,7 @@ var Divider = function Divider(_a) {
     "aria-orientation": orientation
   });
 };
-var templateObject_1$a;
+var templateObject_1$b;
 
 React.createElement;
 var StyledStack = styled.div.withConfig({
@@ -2300,7 +2300,7 @@ var StyledStack = styled.div.withConfig({
   },
   displayName: "Stack__StyledStack",
   componentId: "sc-1ehkxgy-0"
-})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
+})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"], ["\n  display: flex;\n  flex-direction: var(--stack-direction);\n  align-items: var(--stack-align-items);\n  justify-content: var(--stack-justify-content);\n  gap: var(--stack-gap);\n  flex-wrap: var(--stack-wrap);\n"
 // Helper function to convert gap prop to CSS value
 ])));
 // Helper function to convert gap prop to CSS value
@@ -2338,6 +2338,97 @@ var Stack = function Stack(_a) {
     "data-testid": dataTestId
   }, children);
 };
+var templateObject_1$a;
+
+React.createElement;
+var semantic = tokensData.semantic;
+var StyledTag = styled.span.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Tag__StyledTag",
+  componentId: "sc-lzfmti-0"
+})(templateObject_1$9 || (templateObject_1$9 = __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
+ *
+ * A static, non-interactive label used to categorize elements or objects in the UI.
+ * Tags help users quickly identify and understand content classification.
+ */])), tokensData.base.border.radius[2], tokensData.semantic.size.icon.lg || '2rem', tokensData.base.spacing[1], tokensData.base.spacing[2], tokensData.semantic.typography.button3, function (_a) {
+  var $variant = _a.$variant;
+  switch ($variant) {
+    case 'interactive':
+      return semantic.color.background['interactive-subtle'];
+    case 'success':
+      return semantic.color.background['success-subtle'];
+    case 'warning':
+      return semantic.color.background['warning-subtle'];
+    case 'error':
+      return semantic.color.background['error-subtle'];
+    case 'emphasis':
+      return semantic.color.background.emphasis;
+    default:
+      return semantic.color.background.surface;
+  }
+}, function (_a) {
+  var $variant = _a.$variant;
+  switch ($variant) {
+    case 'interactive':
+      return semantic.color.text.interactive;
+    case 'success':
+      return semantic.color.text.success;
+    case 'warning':
+      return semantic.color.text.warning;
+    case 'error':
+      return semantic.color.text.error;
+    case 'emphasis':
+      return semantic.color.text.inverse;
+    default:
+      return semantic.color.text["default"];
+  }
+}, function (_a) {
+  var $variant = _a.$variant,
+    $border = _a.$border;
+  if (!$border) return 'none';
+  switch ($variant) {
+    case 'interactive':
+      return "1px solid ".concat(semantic.color.border.interactive);
+    case 'success':
+      return "1px solid ".concat(semantic.color.border.success);
+    case 'warning':
+      return "1px solid ".concat(semantic.color.border.warning);
+    case 'error':
+      return "1px solid ".concat(semantic.color.border.error);
+    case 'emphasis':
+      return "1px solid ".concat(semantic.color.background.emphasis);
+    default:
+      return "1px solid ".concat(semantic.color.border["default"]);
+  }
+});
+/**
+ * Tag component for categorizing and labeling content
+ *
+ * A static, non-interactive label used to categorize elements or objects in the UI.
+ * Tags help users quickly identify and understand content classification.
+ */
+var Tag = function Tag(_a) {
+  var children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'default' : _b,
+    _c = _a.border,
+    border = _c === void 0 ? true : _c,
+    dataTestId = _a["data-testid"],
+    props = __rest(_a, ["children", "variant", "border", 'data-testid']);
+  return /*#__PURE__*/React.createElement(StyledTag, _extends({
+    $variant: variant,
+    $border: border,
+    "data-testid": dataTestId,
+    "data-variant": variant,
+    "data-border": border,
+    role: "status",
+    "aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
+  }, props), children);
+};
 var templateObject_1$9;
 
 React.createElement;
@@ -3107,5 +3198,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, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ResponsiveGrid, Stack, Typography, iconsData, tokens };
+export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ResponsiveGrid, Stack, Tag, Typography, iconsData, tokens };
 //# sourceMappingURL=index.esm.js.map