@common-origin/design-system 1.9.6 → 1.9.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/atoms/Tag/Tag.d.ts +28 -0
  2. package/dist/components/atoms/Tag/index.d.ts +2 -0
  3. package/dist/components/atoms/index.d.ts +1 -0
  4. package/dist/index.esm.js +133 -32
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.js +133 -31
  7. package/dist/index.js.map +1 -1
  8. package/dist/types/icons.d.ts +1 -1
  9. package/package.json +1 -1
package/dist/components/atoms/Tag/Tag.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ import React from 'react';
2
+ export interface TagProps {
3
+ /**
4
+ * Text content to display in the tag
5
+ */
6
+ children: React.ReactNode;
7
+ /**
8
+ * Visual variant of the tag based on semantic meaning
9
+ * @default 'default'
10
+ */
11
+ variant?: 'default' | 'interactive' | 'success' | 'warning' | 'error' | 'emphasis';
12
+ /**
13
+ * Whether to show a border
14
+ * @default true
15
+ */
16
+ border?: boolean;
17
+ /**
18
+ * Test identifier for automated testing
19
+ */
20
+ 'data-testid'?: string;
21
+ }
22
+ /**
23
+ * Tag component for categorizing and labeling content
24
+ *
25
+ * A static, non-interactive label used to categorize elements or objects in the UI.
26
+ * Tags help users quickly identify and understand content classification.
27
+ */
28
+ export declare const Tag: React.FC<TagProps>;
package/dist/components/atoms/Tag/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Tag } from './Tag';
2
+ export type { TagProps } from './Tag';
package/dist/components/atoms/index.d.ts CHANGED
@@ -11,4 +11,5 @@ export * from './IconButton';
11
11
  export * from './ProgressBar';
12
12
  export * from './Divider';
13
13
  export * from './Stack';
14
+ export * from './Tag';
14
15
  export * from './Typography';
package/dist/index.esm.js CHANGED
@@ -595,7 +595,7 @@ var component = {
595
595
  },
596
596
  $ref: "./component/index.json"
597
597
  };
598
- var semantic$1 = {
598
+ var semantic$2 = {
599
599
  border: {
600
600
  "default": "0.0625rem solid #e9ecef",
601
601
  subtle: "0.0625rem solid #dee2e6",
@@ -734,7 +734,7 @@ var semantic$1 = {
734
734
  var tokensData = {
735
735
  base: base$1,
736
736
  component: component,
737
- semantic: semantic$1
737
+ semantic: semantic$2
738
738
  };
739
739
 
740
740
  React.createElement;
@@ -744,7 +744,7 @@ var AvatarContainer = styled.div.withConfig({
744
744
  },
745
745
  displayName: "Avatar__AvatarContainer",
746
746
  componentId: "sc-ezn4ax-0"
747
- })(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) {
747
+ })(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) {
748
748
  var $size = _a.$size;
749
749
  return tokensData.semantic.size.avatar[$size];
750
750
  }, function (_a) {
@@ -827,7 +827,7 @@ var Avatar = function Avatar(_a) {
827
827
  "aria-hidden": "true"
828
828
  }, initials));
829
829
  };
830
- var templateObject_1$m, templateObject_2$b, templateObject_3$9;
830
+ var templateObject_1$n, templateObject_2$b, templateObject_3$9;
831
831
 
832
832
  React.createElement;
833
833
  var _a$5 = tokensData.semantic,
@@ -895,7 +895,7 @@ var StyledTypography = styled.span.withConfig({
895
895
  },
896
896
  displayName: "Typography__StyledTypography",
897
897
  componentId: "sc-17mqo4k-0"
898
- })(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"
898
+ })(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"
899
899
  /**
900
900
  * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
901
901
  *
@@ -962,12 +962,12 @@ var Typography = function Typography(_a) {
962
962
  "data-testid": dataTestId
963
963
  }, children);
964
964
  };
965
- var templateObject_1$l;
965
+ var templateObject_1$m;
966
966
 
967
967
  React.createElement;
968
968
  var color$3 = tokensData.semantic.color;
969
969
  tokensData.base.shadow;
970
- 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"])));
970
+ 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"])));
971
971
  var BadgeWrapper = styled.span.withConfig({
972
972
  displayName: "Badge__BadgeWrapper",
973
973
  componentId: "sc-tjz4pp-0"
@@ -1034,7 +1034,7 @@ var Badge = function Badge(_a) {
1034
1034
  color: "inverse"
1035
1035
  }, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
1036
1036
  };
1037
- var templateObject_1$k, templateObject_2$a, templateObject_3$8, templateObject_4$6;
1037
+ var templateObject_1$l, templateObject_2$a, templateObject_3$8, templateObject_4$6;
1038
1038
 
1039
1039
  React.createElement;
1040
1040
  var StyledBox = styled.div.withConfig({
@@ -1046,7 +1046,7 @@ var StyledBox = styled.div.withConfig({
1046
1046
  })(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"
1047
1047
  // Transform component that maps clean props to $-prefixed props for styled-components
1048
1048
  ])), function (props) {
1049
- return props.$display && css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
1049
+ return props.$display && css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
1050
1050
  }, function (props) {
1051
1051
  return props.$flexDirection && css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
1052
1052
  }, function (props) {
@@ -1236,7 +1236,7 @@ var BoxTransform = function BoxTransform(props) {
1236
1236
  }, rest), children);
1237
1237
  };
1238
1238
  var Box = BoxTransform;
1239
- 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;
1239
+ 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;
1240
1240
 
1241
1241
  var add = {
1242
1242
  path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
@@ -1314,6 +1314,14 @@ var link = {
1314
1314
  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",
1315
1315
  name: "link"
1316
1316
  };
1317
+ var star = {
1318
+ path: "M12.1694 2.69385C12.9932 2.77396 13.4716 3.43132 13.7543 3.92432C14.0789 4.49022 14.4038 5.30605 14.7846 6.25537L14.8207 6.34619C15.0505 6.91906 15.1961 7.27937 15.3344 7.54248C15.4618 7.78468 15.545 7.86702 15.6088 7.91455C15.6727 7.96207 15.7762 8.01756 16.0454 8.06982C16.3371 8.12644 16.723 8.16226 17.3374 8.21729L17.5532 8.23682C18.4922 8.32092 19.3095 8.39132 19.9086 8.53271C20.4448 8.65928 21.1605 8.92163 21.4799 9.64404L21.5385 9.79443L21.5825 9.94971C21.7646 10.7185 21.3522 11.3598 21.0014 11.7847C20.6095 12.2594 20.0015 12.8094 19.3041 13.4438L18.8217 13.8833C18.4435 14.2274 18.2065 14.4438 18.0385 14.6255C17.8832 14.7936 17.8357 14.8811 17.812 14.9419C17.7962 14.9823 17.7833 15.0238 17.7729 15.0659C17.7573 15.1293 17.7457 15.2284 17.7758 15.4556C17.8084 15.7009 17.877 16.014 17.9877 16.5132L18.0541 16.814C18.2456 17.6769 18.4083 18.4052 18.4711 18.9624C18.5264 19.4519 18.5632 20.1921 18.0688 20.7427C17.8119 21.0287 17.4777 21.2343 17.1069 21.3354C16.393 21.5302 15.7481 21.166 15.3354 20.897C14.8658 20.5908 14.2881 20.1183 13.603 19.5601C13.1257 19.1711 12.8201 18.924 12.5707 18.7573C12.3364 18.6006 12.226 18.5671 12.1577 18.5562C12.0532 18.5395 11.9467 18.5395 11.8422 18.5562C11.7738 18.5671 11.6635 18.6006 11.4291 18.7573C11.1799 18.924 10.8752 19.1712 10.3979 19.5601C9.7126 20.1185 9.13421 20.5907 8.6645 20.897C8.2518 21.166 7.60685 21.5302 6.89301 21.3354C6.52221 21.2343 6.18793 21.0286 5.9311 20.7427C5.43682 20.1921 5.47353 19.4519 5.52876 18.9624C5.59163 18.4052 5.75429 17.6769 5.94575 16.814L6.01313 16.5132C6.12388 16.014 6.19251 15.7009 6.22505 15.4556C6.25517 15.2284 6.24262 15.1293 6.227 15.0659C6.21659 15.0238 6.20372 14.9823 6.18794 14.9419C6.16419 14.8811 6.11677 14.7936 5.96137 14.6255C5.79337 14.4437 5.55643 14.2274 5.17817 13.8833L4.69575 13.4438C3.9984 12.8094 3.39042 12.2594 2.99848 11.7847C2.62437 11.3315 2.17967 10.632 2.46137 9.79443L2.51997 9.64404C2.83942 8.92145 3.55601 8.65926 4.09223 8.53271C4.69142 8.39138 5.50869 8.32091 6.4477 8.23682L6.66255 8.21729C7.27717 8.16224 7.66376 8.12647 7.95551 8.06982C8.22431 8.01759 8.32719 7.96204 8.39106 7.91455C8.45493 7.86704 8.53808 7.78477 8.66548 7.54248C8.80378 7.27937 8.94936 6.91906 9.17915 6.34619L9.21528 6.25537C9.59606 5.3061 9.92105 4.49022 10.2456 3.92432C10.5472 3.39847 11.0719 2.68604 12.0004 2.68604L12.1694 2.69385ZM11.9809 4.91943C11.7432 5.334 11.4773 5.98839 11.0717 6.99951L11.0356 7.09131C10.8211 7.62611 10.633 8.09725 10.436 8.47217C10.2282 8.86755 9.97336 9.23085 9.58442 9.52002C9.19552 9.80914 8.77481 9.94855 8.33637 10.0337C7.9205 10.1144 7.41442 10.1581 6.84028 10.2095L6.62544 10.229C5.61908 10.3191 4.97689 10.3795 4.55122 10.48C4.54116 10.4824 4.53136 10.4845 4.52192 10.4868C4.52814 10.4945 4.53377 10.5031 4.54048 10.5112C4.81896 10.8485 5.29492 11.2843 6.04243 11.9644L6.52387 12.4038C6.87706 12.7251 7.18977 13.008 7.43012 13.2681C7.68276 13.5414 7.90359 13.8383 8.05024 14.2134C8.0979 14.3353 8.13804 14.4603 8.16938 14.5874C8.2658 14.9786 8.25641 15.3491 8.20747 15.7183C8.16092 16.0693 8.06871 16.4806 7.96528 16.9468L7.89887 17.2466C7.69668 18.1579 7.5641 18.7614 7.51606 19.187C7.5133 19.2115 7.51318 19.2347 7.51118 19.2563C7.52986 19.2447 7.55171 19.2349 7.5727 19.2212C7.9315 18.9872 8.41071 18.5988 9.13423 18.0093C9.58206 17.6444 9.97081 17.3257 10.3168 17.0942C10.6777 16.8529 11.0642 16.6555 11.5268 16.5815C11.8402 16.5315 12.1597 16.5315 12.4731 16.5815C12.9358 16.6554 13.3222 16.8529 13.6831 17.0942C14.0291 17.3256 14.4178 17.6444 14.8657 18.0093C15.5891 18.5988 16.0684 18.9872 16.4272 19.2212C16.4479 19.2347 16.4693 19.2448 16.4877 19.2563C16.4857 19.2348 16.4866 19.2115 16.4838 19.187C16.4358 18.7614 16.3042 18.1579 16.102 17.2466L16.0346 16.9468C15.9312 16.4806 15.839 16.0693 15.7924 15.7183C15.7435 15.3491 15.7341 14.9786 15.8305 14.5874C15.8619 14.4603 15.902 14.3353 15.9497 14.2134C16.0963 13.8383 16.3172 13.5414 16.5698 13.2681C16.8101 13.0081 17.1228 12.7251 17.476 12.4038L17.9584 11.9644C18.7057 11.2845 19.181 10.8485 19.4594 10.5112C19.466 10.5033 19.4709 10.4944 19.477 10.4868C19.4679 10.4846 19.4584 10.4823 19.4487 10.48C19.023 10.3795 18.3808 10.3191 17.3745 10.229L17.1596 10.2095C16.5855 10.1581 16.0794 10.1144 15.6635 10.0337C15.2251 9.94854 14.8043 9.80913 14.4155 9.52002C14.0266 9.23086 13.7717 8.86753 13.5639 8.47217C13.3669 8.09725 13.1788 7.62609 12.9643 7.09131L12.9282 6.99951C12.5226 5.98836 12.2567 5.33399 12.019 4.91943C12.0127 4.90849 12.0054 4.89835 11.9995 4.88818C11.9936 4.89819 11.9871 4.90868 11.9809 4.91943Z",
1319
+ name: "star"
1320
+ };
1321
+ var starFilled = {
1322
+ path: "M11.5842 3.72972C11.8583 3.67149 12.1421 3.67145 12.4162 3.72972C13.1456 3.88498 13.544 4.48698 13.7834 4.92601C14.0442 5.40446 14.3105 6.0721 14.6213 6.84691C14.81 7.31745 14.9297 7.61361 15.0402 7.83324C15.1428 8.03686 15.2072 8.11103 15.2541 8.15355C15.302 8.19691 15.3541 8.23544 15.4094 8.26878C15.4628 8.30094 15.5528 8.34217 15.7805 8.38207C16.0252 8.42491 16.3465 8.45463 16.8557 8.50023C17.6616 8.5724 18.3628 8.63331 18.8869 8.74632C19.3781 8.85232 20.055 9.06776 20.4065 9.72386C20.4855 9.87145 20.5453 10.0285 20.5852 10.1907L20.6184 10.3547L20.634 10.4905C20.6842 11.1591 20.3102 11.6897 20.0041 12.0471C19.6576 12.4515 19.14 12.9197 18.5481 13.4582L18.2072 13.7678C17.5764 14.3417 17.4619 14.467 17.3986 14.5911C17.349 14.6885 17.3156 14.7943 17.3 14.9026C17.2803 15.0404 17.3019 15.2079 17.4865 16.0403L17.5471 16.3108C17.6935 16.9706 17.8174 17.5288 17.8762 17.9612C17.9277 18.34 17.9788 18.9022 17.7053 19.3879C17.3677 19.9871 16.7457 20.3705 16.0588 20.4036C15.5019 20.4301 15.0217 20.1323 14.7063 19.9162C14.3463 19.6696 13.9031 19.3081 13.3791 18.8811C13.013 18.5827 12.779 18.393 12.5891 18.26C12.4096 18.1343 12.3248 18.1003 12.2756 18.0862C12.0957 18.0347 11.9047 18.0347 11.7248 18.0862C11.6757 18.1003 11.5909 18.1343 11.4113 18.26C11.2214 18.393 10.9873 18.5829 10.6213 18.8811C10.0973 19.308 9.65414 19.6696 9.29415 19.9162C8.97877 20.1322 8.49933 20.4299 7.94259 20.4036C7.25539 20.3707 6.63286 19.9873 6.29513 19.3879C6.02156 18.9022 6.07274 18.34 6.12423 17.9612C6.18305 17.5288 6.3079 16.9707 6.45431 16.3108L6.51388 16.0403C6.69854 15.208 6.72017 15.0404 6.7004 14.9026C6.68477 14.7943 6.65143 14.6886 6.60177 14.5911C6.53852 14.4669 6.42448 14.3422 5.79318 13.7678L5.45333 13.4582C4.86129 12.9196 4.34387 12.4516 3.99728 12.0471C3.67068 11.6659 3.26588 11.0877 3.38204 10.3547C3.41706 10.1341 3.48949 9.92077 3.59494 9.72386C3.94661 9.06767 4.62328 8.85224 5.11447 8.74632C5.63848 8.63339 6.33914 8.57238 7.14474 8.50023C7.65378 8.45464 7.97527 8.42491 8.21994 8.38207C8.44768 8.34214 8.53864 8.30095 8.59201 8.26878C8.64708 8.23552 8.69961 8.19675 8.74728 8.15355C8.79417 8.11093 8.859 8.03619 8.96115 7.83324C9.07161 7.61364 9.19046 7.31724 9.37912 6.84691C9.68989 6.07215 9.95619 5.40443 10.217 4.92601C10.4564 4.48697 10.8548 3.88493 11.5842 3.72972Z",
1323
+ name: "starFilled"
1324
+ };
1317
1325
  var table = {
1318
1326
  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",
1319
1327
  name: "table"
@@ -1346,6 +1354,8 @@ var iconsData = {
1346
1354
  message: message,
1347
1355
  copy: copy,
1348
1356
  link: link,
1357
+ star: star,
1358
+ starFilled: starFilled,
1349
1359
  table: table,
1350
1360
  userBox: userBox
1351
1361
  };
@@ -1357,7 +1367,7 @@ var IconStyled = styled.span.withConfig({
1357
1367
  },
1358
1368
  displayName: "Icon__IconStyled",
1359
1369
  componentId: "sc-1105czq-0"
1360
- })(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) {
1370
+ })(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) {
1361
1371
  var $size = _a.$size;
1362
1372
  return tokensData.semantic.size.icon[$size];
1363
1373
  }, function (_a) {
@@ -1421,13 +1431,13 @@ var Icon = function Icon(_a) {
1421
1431
  d: iconData.path
1422
1432
  })));
1423
1433
  };
1424
- var templateObject_1$i;
1434
+ var templateObject_1$j;
1425
1435
 
1426
1436
  React.createElement;
1427
1437
  var button = tokensData.component.button,
1428
- semantic = tokensData.semantic;
1438
+ semantic$1 = tokensData.semantic;
1429
1439
  // Base styles shared between button and link
1430
- 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");
1440
+ 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");
1431
1441
  // Dynamic variant styles using component tokens
1432
1442
  var getVariantStyles = function getVariantStyles(_a) {
1433
1443
  var $variant = _a.$variant;
@@ -1453,7 +1463,7 @@ var StyledButton = styled.button.withConfig({
1453
1463
  },
1454
1464
  displayName: "Button__StyledButton",
1455
1465
  componentId: "sc-1eiuum9-0"
1456
- })(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);
1466
+ })(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);
1457
1467
  var StyledLink = styled.a.withConfig({
1458
1468
  shouldForwardProp: function shouldForwardProp(prop) {
1459
1469
  return !prop.startsWith('$');
@@ -1553,7 +1563,7 @@ var Button = function Button(_a) {
1553
1563
  "data-testid": dataTestId
1554
1564
  }, buttonProps), renderButtonContent(children, iconName, size));
1555
1565
  };
1556
- var templateObject_1$h, templateObject_2$8;
1566
+ var templateObject_1$i, templateObject_2$8;
1557
1567
 
1558
1568
  var chip = tokensData.component.chip;
1559
1569
  // Helper function to get variant styles as objects for CSS custom properties
@@ -1614,7 +1624,7 @@ var BaseChipStyled = styled.span.withConfig({
1614
1624
  },
1615
1625
  displayName: "ChipBase__BaseChipStyled",
1616
1626
  componentId: "sc-moa6zc-0"
1617
- })(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"
1627
+ })(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"
1618
1628
  // Icon container for selected indicator or leading icons
1619
1629
  ])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
1620
1630
  // Icon container for selected indicator or leading icons
@@ -1666,7 +1676,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
1666
1676
  style: __assign(__assign({}, cssProps), style)
1667
1677
  }, htmlProps), children);
1668
1678
  };
1669
- var templateObject_1$g, templateObject_2$7, templateObject_3$6;
1679
+ var templateObject_1$h, templateObject_2$7, templateObject_3$6;
1670
1680
 
1671
1681
  React.createElement;
1672
1682
  /**
@@ -1910,20 +1920,20 @@ var spacing$3 = tokensData.semantic.spacing;
1910
1920
  var StyledContainer = styled.div.withConfig({
1911
1921
  displayName: "Container__StyledContainer",
1912
1922
  componentId: "sc-17dbj6n-0"
1913
- })(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']);
1923
+ })(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']);
1914
1924
  var Container = function Container(_a) {
1915
1925
  var children = _a.children,
1916
1926
  props = __rest(_a, ["children"]);
1917
1927
  return /*#__PURE__*/React.createElement(StyledContainer, props, children);
1918
1928
  };
1919
- var templateObject_1$f;
1929
+ var templateObject_1$g;
1920
1930
 
1921
1931
  React.createElement;
1922
1932
  var base = tokensData.base;
1923
1933
  var PictureWrapper = styled.div.withConfig({
1924
1934
  displayName: "Picture__PictureWrapper",
1925
1935
  componentId: "sc-11d9tei-0"
1926
- })(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);
1936
+ })(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);
1927
1937
  var ImageLink = styled.a.withConfig({
1928
1938
  displayName: "Picture__ImageLink",
1929
1939
  componentId: "sc-11d9tei-1"
@@ -1962,7 +1972,7 @@ var Picture = function Picture(_a) {
1962
1972
  "aria-label": "Read more about ".concat(title)
1963
1973
  }, image) : image);
1964
1974
  };
1965
- var templateObject_1$e, templateObject_2$6, templateObject_3$5, templateObject_4$4;
1975
+ var templateObject_1$f, templateObject_2$6, templateObject_3$5, templateObject_4$4;
1966
1976
 
1967
1977
  React.createElement;
1968
1978
  var _a$4 = tokensData.semantic,
@@ -1971,7 +1981,7 @@ var _a$4 = tokensData.semantic,
1971
1981
  var TimeStyled = styled.time.withConfig({
1972
1982
  displayName: "DateFormatter__TimeStyled",
1973
1983
  componentId: "sc-5464cc-0"
1974
- })(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography$1.label, color$2.text.subdued);
1984
+ })(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography$1.label, color$2.text.subdued);
1975
1985
  var DateFormatter = function DateFormatter(_a) {
1976
1986
  var dateString = _a.dateString,
1977
1987
  _b = _a.formatString,
@@ -1983,7 +1993,7 @@ var DateFormatter = function DateFormatter(_a) {
1983
1993
  "data-testid": dataTestId
1984
1994
  }, format(date, formatString));
1985
1995
  };
1986
- var templateObject_1$d;
1996
+ var templateObject_1$e;
1987
1997
 
1988
1998
  React.createElement;
1989
1999
  var motion = tokensData.semantic.motion,
@@ -1994,7 +2004,7 @@ var IconButtonStyled = styled.button.withConfig({
1994
2004
  },
1995
2005
  displayName: "IconButton__IconButtonStyled",
1996
2006
  componentId: "sc-k8b14t-0"
1997
- })(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) {
2007
+ })(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) {
1998
2008
  var $variant = _a.$variant;
1999
2009
  switch ($variant) {
2000
2010
  case 'primary':
@@ -2105,7 +2115,7 @@ var IconButton = function IconButton(_a) {
2105
2115
  "aria-hidden": "true" // Hide icon from screen readers since button has aria-label
2106
2116
  }));
2107
2117
  };
2108
- var templateObject_1$c;
2118
+ var templateObject_1$d;
2109
2119
 
2110
2120
  React.createElement;
2111
2121
  var ProgressBarContainer = styled.div.withConfig({
@@ -2115,7 +2125,7 @@ var ProgressBarContainer = styled.div.withConfig({
2115
2125
  displayName: "ProgressBar__ProgressBarContainer",
2116
2126
  componentId: "sc-1nco33q-0"
2117
2127
  })(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) {
2118
- 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);
2128
+ 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);
2119
2129
  }, function (props) {
2120
2130
  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);
2121
2131
  });
@@ -2169,7 +2179,7 @@ var ProgressBar = function ProgressBar(_a) {
2169
2179
  $color: color
2170
2180
  }));
2171
2181
  };
2172
- var templateObject_1$b, templateObject_2$5, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$1, templateObject_7$1;
2182
+ var templateObject_1$c, templateObject_2$5, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$1, templateObject_7$1;
2173
2183
 
2174
2184
  React.createElement;
2175
2185
  var StyledDivider = styled.div.withConfig({
@@ -2178,7 +2188,7 @@ var StyledDivider = styled.div.withConfig({
2178
2188
  },
2179
2189
  displayName: "Divider__StyledDivider",
2180
2190
  componentId: "sc-1l0c8ja-0"
2181
- })(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"
2191
+ })(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"
2182
2192
  /**
2183
2193
  * Divider is an atomic component that provides visual separation between content sections.
2184
2194
  *
@@ -2291,7 +2301,7 @@ var Divider = function Divider(_a) {
2291
2301
  "aria-orientation": orientation
2292
2302
  });
2293
2303
  };
2294
- var templateObject_1$a;
2304
+ var templateObject_1$b;
2295
2305
 
2296
2306
  React.createElement;
2297
2307
  var StyledStack = styled.div.withConfig({
@@ -2300,7 +2310,7 @@ var StyledStack = styled.div.withConfig({
2300
2310
  },
2301
2311
  displayName: "Stack__StyledStack",
2302
2312
  componentId: "sc-1ehkxgy-0"
2303
- })(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"
2313
+ })(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"
2304
2314
  // Helper function to convert gap prop to CSS value
2305
2315
  ])));
2306
2316
  // Helper function to convert gap prop to CSS value
@@ -2338,6 +2348,97 @@ var Stack = function Stack(_a) {
2338
2348
  "data-testid": dataTestId
2339
2349
  }, children);
2340
2350
  };
2351
+ var templateObject_1$a;
2352
+
2353
+ React.createElement;
2354
+ var semantic = tokensData.semantic;
2355
+ var StyledTag = styled.span.withConfig({
2356
+ shouldForwardProp: function shouldForwardProp(prop) {
2357
+ return !prop.startsWith('$');
2358
+ },
2359
+ displayName: "Tag__StyledTag",
2360
+ componentId: "sc-lzfmti-0"
2361
+ })(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"
2362
+ /**
2363
+ * Tag component for categorizing and labeling content
2364
+ *
2365
+ * A static, non-interactive label used to categorize elements or objects in the UI.
2366
+ * Tags help users quickly identify and understand content classification.
2367
+ */])), 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) {
2368
+ var $variant = _a.$variant;
2369
+ switch ($variant) {
2370
+ case 'interactive':
2371
+ return semantic.color.background['interactive-subtle'];
2372
+ case 'success':
2373
+ return semantic.color.background['success-subtle'];
2374
+ case 'warning':
2375
+ return semantic.color.background['warning-subtle'];
2376
+ case 'error':
2377
+ return semantic.color.background['error-subtle'];
2378
+ case 'emphasis':
2379
+ return semantic.color.background.emphasis;
2380
+ default:
2381
+ return semantic.color.background.surface;
2382
+ }
2383
+ }, function (_a) {
2384
+ var $variant = _a.$variant;
2385
+ switch ($variant) {
2386
+ case 'interactive':
2387
+ return semantic.color.text.interactive;
2388
+ case 'success':
2389
+ return semantic.color.text.success;
2390
+ case 'warning':
2391
+ return semantic.color.text.warning;
2392
+ case 'error':
2393
+ return semantic.color.text.error;
2394
+ case 'emphasis':
2395
+ return semantic.color.text.inverse;
2396
+ default:
2397
+ return semantic.color.text["default"];
2398
+ }
2399
+ }, function (_a) {
2400
+ var $variant = _a.$variant,
2401
+ $border = _a.$border;
2402
+ if (!$border) return 'none';
2403
+ switch ($variant) {
2404
+ case 'interactive':
2405
+ return "1px solid ".concat(semantic.color.border.interactive);
2406
+ case 'success':
2407
+ return "1px solid ".concat(semantic.color.border.success);
2408
+ case 'warning':
2409
+ return "1px solid ".concat(semantic.color.border.warning);
2410
+ case 'error':
2411
+ return "1px solid ".concat(semantic.color.border.error);
2412
+ case 'emphasis':
2413
+ return "1px solid ".concat(semantic.color.background.emphasis);
2414
+ default:
2415
+ return "1px solid ".concat(semantic.color.border["default"]);
2416
+ }
2417
+ });
2418
+ /**
2419
+ * Tag component for categorizing and labeling content
2420
+ *
2421
+ * A static, non-interactive label used to categorize elements or objects in the UI.
2422
+ * Tags help users quickly identify and understand content classification.
2423
+ */
2424
+ var Tag = function Tag(_a) {
2425
+ var children = _a.children,
2426
+ _b = _a.variant,
2427
+ variant = _b === void 0 ? 'default' : _b,
2428
+ _c = _a.border,
2429
+ border = _c === void 0 ? true : _c,
2430
+ dataTestId = _a["data-testid"],
2431
+ props = __rest(_a, ["children", "variant", "border", 'data-testid']);
2432
+ return /*#__PURE__*/React.createElement(StyledTag, _extends({
2433
+ $variant: variant,
2434
+ $border: border,
2435
+ "data-testid": dataTestId,
2436
+ "data-variant": variant,
2437
+ "data-border": border,
2438
+ role: "status",
2439
+ "aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
2440
+ }, props), children);
2441
+ };
2341
2442
  var templateObject_1$9;
2342
2443
 
2343
2444
  React.createElement;
@@ -3107,5 +3208,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
3107
3208
  // Main design system exports
3108
3209
  var tokens = tokensData;
3109
3210
 
3110
- 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 };
3211
+ 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 };
3111
3212
  //# sourceMappingURL=index.esm.js.map