@common-origin/design-system 1.8.0 → 1.8.2
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.
- package/dist/index.esm.js +182 -178
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +182 -178
- package/dist/index.js.map +1 -1
- package/dist/types/icons.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -833,13 +833,144 @@ var Avatar = function Avatar(_a) {
|
|
|
833
833
|
var templateObject_1$m, templateObject_2$b, templateObject_3$9;
|
|
834
834
|
|
|
835
835
|
React.createElement;
|
|
836
|
-
var _a$
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
836
|
+
var _a$5 = tokens.semantic,
|
|
837
|
+
typography$2 = _a$5.typography,
|
|
838
|
+
color$4 = _a$5.color;
|
|
839
|
+
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
840
|
+
var styles = {
|
|
841
|
+
display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
|
|
842
|
+
h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
|
|
843
|
+
h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
|
|
844
|
+
h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
|
|
845
|
+
h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
|
|
846
|
+
h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
|
|
847
|
+
h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
|
|
848
|
+
subtitle: "font: ".concat(typography$2.subtitle, ";"),
|
|
849
|
+
body: "font: ".concat(typography$2.body, ";"),
|
|
850
|
+
small: "font: ".concat(typography$2.small, ";"),
|
|
851
|
+
overline: "font: ".concat(typography$2.overline, ";"),
|
|
852
|
+
caption: "font: ".concat(typography$2.caption, "; text-transform: uppercase;"),
|
|
853
|
+
button1: "font: ".concat(typography$2.button1, ";"),
|
|
854
|
+
button2: "font: ".concat(typography$2.button2, ";"),
|
|
855
|
+
button3: "font: ".concat(typography$2.button3, ";"),
|
|
856
|
+
label: "font: ".concat(typography$2.label, ";")
|
|
857
|
+
};
|
|
858
|
+
return styles[variant] || styles.body;
|
|
859
|
+
};
|
|
860
|
+
var getTextColor = function getTextColor(colorVariant) {
|
|
861
|
+
var colorMap = {
|
|
862
|
+
"default": color$4.text["default"],
|
|
863
|
+
emphasis: color$4.text.emphasis,
|
|
864
|
+
subdued: color$4.text.subdued,
|
|
865
|
+
inverse: color$4.text.inverse,
|
|
866
|
+
disabled: color$4.text.disabled,
|
|
867
|
+
interactive: color$4.text.interactive,
|
|
868
|
+
error: color$4.text.error,
|
|
869
|
+
success: color$4.text.success,
|
|
870
|
+
warning: color$4.text.warning
|
|
871
|
+
};
|
|
872
|
+
return colorMap[colorVariant] || colorMap["default"];
|
|
873
|
+
};
|
|
874
|
+
var getDefaultElement = function getDefaultElement(variant) {
|
|
875
|
+
var elementMap = {
|
|
876
|
+
display: 'h1',
|
|
877
|
+
h1: 'h1',
|
|
878
|
+
h2: 'h2',
|
|
879
|
+
h3: 'h3',
|
|
880
|
+
h4: 'h4',
|
|
881
|
+
h5: 'h5',
|
|
882
|
+
h6: 'h6',
|
|
883
|
+
subtitle: 'p',
|
|
884
|
+
body: 'p',
|
|
885
|
+
small: 'span',
|
|
886
|
+
overline: 'span',
|
|
887
|
+
caption: 'span',
|
|
888
|
+
button1: 'span',
|
|
889
|
+
button2: 'span',
|
|
890
|
+
button3: 'span',
|
|
891
|
+
label: 'span'
|
|
892
|
+
};
|
|
893
|
+
return elementMap[variant] || 'span';
|
|
894
|
+
};
|
|
895
|
+
var StyledTypography = styled.span.withConfig({
|
|
896
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
897
|
+
return !prop.startsWith('$');
|
|
898
|
+
},
|
|
899
|
+
displayName: "Typography__StyledTypography",
|
|
900
|
+
componentId: "sc-17mqo4k-0"
|
|
901
|
+
})(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"
|
|
902
|
+
/**
|
|
903
|
+
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
904
|
+
*
|
|
905
|
+
* Features:
|
|
906
|
+
* - Semantic variants (h1-h6, body, subtitle, etc.)
|
|
907
|
+
* - Color variants for different contexts
|
|
908
|
+
* - Automatic semantic HTML element selection
|
|
909
|
+
* - Manual element override support
|
|
910
|
+
* - Direct semantic token usage (no component tokens needed)
|
|
911
|
+
* - Full accessibility support
|
|
912
|
+
*
|
|
913
|
+
* @example
|
|
914
|
+
* ```tsx
|
|
915
|
+
* <Typography variant="h1">Main Heading</Typography>
|
|
916
|
+
* <Typography variant="body" color="subdued">Body text</Typography>
|
|
917
|
+
* <Typography variant="caption" as="figcaption">Image caption</Typography>
|
|
918
|
+
* ```
|
|
919
|
+
*/])), function (_a) {
|
|
920
|
+
var $variant = _a.$variant;
|
|
921
|
+
return getTypographyStyles($variant);
|
|
922
|
+
}, function (_a) {
|
|
923
|
+
var $color = _a.$color;
|
|
924
|
+
return getTextColor($color);
|
|
925
|
+
}, function (_a) {
|
|
926
|
+
var $variant = _a.$variant;
|
|
927
|
+
if (['body', 'subtitle', 'small'].includes($variant)) {
|
|
928
|
+
return 'line-height: 1.5;';
|
|
929
|
+
}
|
|
930
|
+
return '';
|
|
931
|
+
});
|
|
932
|
+
/**
|
|
933
|
+
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
934
|
+
*
|
|
935
|
+
* Features:
|
|
936
|
+
* - Semantic variants (h1-h6, body, subtitle, etc.)
|
|
937
|
+
* - Color variants for different contexts
|
|
938
|
+
* - Automatic semantic HTML element selection
|
|
939
|
+
* - Manual element override support
|
|
940
|
+
* - Direct semantic token usage (no component tokens needed)
|
|
941
|
+
* - Full accessibility support
|
|
942
|
+
*
|
|
943
|
+
* @example
|
|
944
|
+
* ```tsx
|
|
945
|
+
* <Typography variant="h1">Main Heading</Typography>
|
|
946
|
+
* <Typography variant="body" color="subdued">Body text</Typography>
|
|
947
|
+
* <Typography variant="caption" as="figcaption">Image caption</Typography>
|
|
948
|
+
* ```
|
|
949
|
+
*/
|
|
950
|
+
var Typography = function Typography(_a) {
|
|
951
|
+
var _b = _a.variant,
|
|
952
|
+
variant = _b === void 0 ? 'body' : _b,
|
|
953
|
+
children = _a.children,
|
|
954
|
+
_c = _a.color,
|
|
955
|
+
color = _c === void 0 ? 'default' : _c,
|
|
956
|
+
as = _a.as,
|
|
957
|
+
dataTestId = _a["data-testid"];
|
|
958
|
+
// $variant and $color are only used for styled-components prop filtering
|
|
959
|
+
var defaultElement = getDefaultElement(variant);
|
|
960
|
+
var elementType = as || defaultElement;
|
|
961
|
+
return /*#__PURE__*/React.createElement(StyledTypography, {
|
|
962
|
+
as: elementType,
|
|
963
|
+
$variant: variant,
|
|
964
|
+
$color: color,
|
|
965
|
+
"data-testid": dataTestId
|
|
966
|
+
}, children);
|
|
967
|
+
};
|
|
968
|
+
var templateObject_1$l;
|
|
969
|
+
|
|
970
|
+
React.createElement;
|
|
971
|
+
var color$3 = tokens.semantic.color;
|
|
972
|
+
tokens.base.shadow;
|
|
973
|
+
var scaleIn = styled.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"])));
|
|
843
974
|
var BadgeWrapper = styled.span.withConfig({
|
|
844
975
|
displayName: "Badge__BadgeWrapper",
|
|
845
976
|
componentId: "sc-tjz4pp-0"
|
|
@@ -850,26 +981,26 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
850
981
|
},
|
|
851
982
|
displayName: "Badge__BadgeIndicator",
|
|
852
983
|
componentId: "sc-tjz4pp-1"
|
|
853
|
-
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: ", ";\n align-items: center;\n justify-content: center;\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n
|
|
984
|
+
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: ", ";\n align-items: center;\n justify-content: center;\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n line-height: 1;\n white-space: nowrap;\n box-shadow: 0 0 0 2px ", ";\n animation: ", " 0.2s ease-out;\n \n ", "\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: ", ";\n align-items: center;\n justify-content: center;\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n line-height: 1;\n white-space: nowrap;\n box-shadow: 0 0 0 2px ", ";\n animation: ", " 0.2s ease-out;\n \n ", "\n"])), function (props) {
|
|
854
985
|
return props.$isVisible ? 'flex' : 'none';
|
|
855
986
|
}, function (props) {
|
|
856
|
-
return props.$isDot ? '8px' : '
|
|
987
|
+
return props.$isDot ? '8px' : '16px';
|
|
857
988
|
}, function (props) {
|
|
858
|
-
return props.$isDot ? '8px' : '
|
|
989
|
+
return props.$isDot ? '8px' : '16px';
|
|
859
990
|
}, function (props) {
|
|
860
|
-
return props.$isDot ? '0' : '0
|
|
861
|
-
}, tokens.base.border.radius.circle,
|
|
991
|
+
return props.$isDot ? '0' : '0 4px';
|
|
992
|
+
}, tokens.base.border.radius.circle, color$3.background["default"], scaleIn, function (props) {
|
|
862
993
|
switch (props.$variant) {
|
|
863
994
|
case 'primary':
|
|
864
|
-
return "\n background-color: ".concat(color$
|
|
995
|
+
return "\n background-color: ".concat(color$3.background.interactive, ";\n color: ").concat(color$3.text.inverse, ";\n ");
|
|
865
996
|
case 'error':
|
|
866
|
-
return "\n background-color: ".concat(color$
|
|
997
|
+
return "\n background-color: ".concat(color$3.background.error, ";\n color: ").concat(color$3.text.inverse, ";\n ");
|
|
867
998
|
case 'warning':
|
|
868
|
-
return "\n background-color: ".concat(color$
|
|
999
|
+
return "\n background-color: ".concat(color$3.background.warning, ";\n color: ").concat(color$3.text.inverse, ";\n ");
|
|
869
1000
|
case 'success':
|
|
870
|
-
return "\n background-color: ".concat(color$
|
|
1001
|
+
return "\n background-color: ".concat(color$3.background.success, ";\n color: ").concat(color$3.text.inverse, ";\n ");
|
|
871
1002
|
default:
|
|
872
|
-
return "\n background-color: ".concat(color$
|
|
1003
|
+
return "\n background-color: ".concat(color$3.background.emphasis, ";\n color: ").concat(color$3.text.inverse, ";\n ");
|
|
873
1004
|
}
|
|
874
1005
|
});
|
|
875
1006
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
@@ -901,9 +1032,12 @@ var Badge = function Badge(_a) {
|
|
|
901
1032
|
$isVisible: isVisible,
|
|
902
1033
|
role: "status",
|
|
903
1034
|
"aria-live": "polite"
|
|
904
|
-
}, !dot &&
|
|
1035
|
+
}, !dot && /*#__PURE__*/React.createElement(Typography, {
|
|
1036
|
+
variant: "caption",
|
|
1037
|
+
color: "inverse"
|
|
1038
|
+
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
|
|
905
1039
|
};
|
|
906
|
-
var templateObject_1$
|
|
1040
|
+
var templateObject_1$k, templateObject_2$a, templateObject_3$8, templateObject_4$6;
|
|
907
1041
|
|
|
908
1042
|
React.createElement;
|
|
909
1043
|
var StyledBox = styled.div.withConfig({
|
|
@@ -915,7 +1049,7 @@ var StyledBox = styled.div.withConfig({
|
|
|
915
1049
|
})(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"
|
|
916
1050
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
917
1051
|
])), function (props) {
|
|
918
|
-
return props.$display && styled.css(templateObject_1$
|
|
1052
|
+
return props.$display && styled.css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
919
1053
|
}, function (props) {
|
|
920
1054
|
return props.$flexDirection && styled.css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
921
1055
|
}, function (props) {
|
|
@@ -1105,7 +1239,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1105
1239
|
}, rest), children);
|
|
1106
1240
|
};
|
|
1107
1241
|
var Box = BoxTransform;
|
|
1108
|
-
var templateObject_1$
|
|
1242
|
+
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;
|
|
1109
1243
|
|
|
1110
1244
|
var add = {
|
|
1111
1245
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1147,6 +1281,10 @@ var directionRight = {
|
|
|
1147
1281
|
path: "M20 12L20.7071 11.2929L21.4142 12L20.7071 12.7071L20 12ZM5 13C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11V13ZM14 6L14.7071 5.29289L20.7071 11.2929L20 12L19.2929 12.7071L13.2929 6.70711L14 6ZM20 12L20.7071 12.7071L14.7071 18.7071L14 18L13.2929 17.2929L19.2929 11.2929L20 12ZM20 12V13H5V12V11H20V12Z",
|
|
1148
1282
|
name: "directionRight"
|
|
1149
1283
|
};
|
|
1284
|
+
var filter = {
|
|
1285
|
+
path: "M20 7C20.5523 7 21 7.44771 21 8C21 8.55228 20.5523 9 20 9H11C10.4477 9 10 8.55228 10 8C10 7.44772 10.4477 7 11 7L20 7Z M14 15C14.5523 15 15 15.4477 15 16C15 16.5523 14.5523 17 14 17L4 17C3.44772 17 3 16.5523 3 16C3 15.4477 3.44772 15 4 15L14 15Z M7 10C8.10457 10 9 9.10457 9 8C9 6.89543 8.10457 6 7 6C5.89543 6 5 6.89543 5 8C5 9.10457 5.89543 10 7 10ZM7 12C4.79086 12 3 10.2091 3 8C3 5.79086 4.79086 4 7 4C9.20914 4 11 5.79086 11 8C11 10.2091 9.20914 12 7 12Z M17 18C18.1046 18 19 17.1046 19 16C19 14.8954 18.1046 14 17 14C15.8954 14 15 14.8954 15 16C15 17.1046 15.8954 18 17 18ZM17 20C14.7909 20 13 18.2091 13 16C13 13.7909 14.7909 12 17 12C19.2091 12 21 13.7909 21 16C21 18.2091 19.2091 20 17 20Z",
|
|
1286
|
+
name: "filter"
|
|
1287
|
+
};
|
|
1150
1288
|
var menu = {
|
|
1151
1289
|
path: "M4 7a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 5a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 5a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z",
|
|
1152
1290
|
name: "menu"
|
|
@@ -1202,6 +1340,7 @@ var iconsData = {
|
|
|
1202
1340
|
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",
|
|
1203
1341
|
name: "export"
|
|
1204
1342
|
},
|
|
1343
|
+
filter: filter,
|
|
1205
1344
|
menu: menu,
|
|
1206
1345
|
pause: pause,
|
|
1207
1346
|
play: play,
|
|
@@ -1221,7 +1360,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1221
1360
|
},
|
|
1222
1361
|
displayName: "Icon__IconStyled",
|
|
1223
1362
|
componentId: "sc-1105czq-0"
|
|
1224
|
-
})(templateObject_1$
|
|
1363
|
+
})(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) {
|
|
1225
1364
|
var $size = _a.$size;
|
|
1226
1365
|
return tokens.semantic.size.icon[$size];
|
|
1227
1366
|
}, function (_a) {
|
|
@@ -1285,7 +1424,7 @@ var Icon = function Icon(_a) {
|
|
|
1285
1424
|
d: iconData.path
|
|
1286
1425
|
})));
|
|
1287
1426
|
};
|
|
1288
|
-
var templateObject_1$
|
|
1427
|
+
var templateObject_1$i;
|
|
1289
1428
|
|
|
1290
1429
|
React.createElement;
|
|
1291
1430
|
var button = tokens.component.button,
|
|
@@ -1317,7 +1456,7 @@ var StyledButton = styled.button.withConfig({
|
|
|
1317
1456
|
},
|
|
1318
1457
|
displayName: "Button__StyledButton",
|
|
1319
1458
|
componentId: "sc-1eiuum9-0"
|
|
1320
|
-
})(templateObject_1$
|
|
1459
|
+
})(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);
|
|
1321
1460
|
var StyledLink = styled.a.withConfig({
|
|
1322
1461
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1323
1462
|
return !prop.startsWith('$');
|
|
@@ -1417,7 +1556,7 @@ var Button = function Button(_a) {
|
|
|
1417
1556
|
"data-testid": dataTestId
|
|
1418
1557
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1419
1558
|
};
|
|
1420
|
-
var templateObject_1$
|
|
1559
|
+
var templateObject_1$h, templateObject_2$8;
|
|
1421
1560
|
|
|
1422
1561
|
var chip = tokens.component.chip;
|
|
1423
1562
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1478,7 +1617,7 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1478
1617
|
},
|
|
1479
1618
|
displayName: "ChipBase__BaseChipStyled",
|
|
1480
1619
|
componentId: "sc-moa6zc-0"
|
|
1481
|
-
})(templateObject_1$
|
|
1620
|
+
})(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"
|
|
1482
1621
|
// Icon container for selected indicator or leading icons
|
|
1483
1622
|
])), tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1484
1623
|
// Icon container for selected indicator or leading icons
|
|
@@ -1530,7 +1669,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1530
1669
|
style: __assign(__assign({}, cssProps), style)
|
|
1531
1670
|
}, htmlProps), children);
|
|
1532
1671
|
};
|
|
1533
|
-
var templateObject_1$
|
|
1672
|
+
var templateObject_1$g, templateObject_2$7, templateObject_3$6;
|
|
1534
1673
|
|
|
1535
1674
|
React.createElement;
|
|
1536
1675
|
/**
|
|
@@ -1774,20 +1913,20 @@ var spacing$3 = tokens.semantic.spacing;
|
|
|
1774
1913
|
var StyledContainer = styled.div.withConfig({
|
|
1775
1914
|
displayName: "Container__StyledContainer",
|
|
1776
1915
|
componentId: "sc-17dbj6n-0"
|
|
1777
|
-
})(templateObject_1$
|
|
1916
|
+
})(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']);
|
|
1778
1917
|
var Container = function Container(_a) {
|
|
1779
1918
|
var children = _a.children,
|
|
1780
1919
|
props = __rest(_a, ["children"]);
|
|
1781
1920
|
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
1782
1921
|
};
|
|
1783
|
-
var templateObject_1$
|
|
1922
|
+
var templateObject_1$f;
|
|
1784
1923
|
|
|
1785
1924
|
React.createElement;
|
|
1786
1925
|
var base = tokens.base;
|
|
1787
1926
|
var PictureWrapper = styled.div.withConfig({
|
|
1788
1927
|
displayName: "Picture__PictureWrapper",
|
|
1789
1928
|
componentId: "sc-11d9tei-0"
|
|
1790
|
-
})(templateObject_1$
|
|
1929
|
+
})(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);
|
|
1791
1930
|
var ImageLink = styled.a.withConfig({
|
|
1792
1931
|
displayName: "Picture__ImageLink",
|
|
1793
1932
|
componentId: "sc-11d9tei-1"
|
|
@@ -1826,16 +1965,16 @@ var Picture = function Picture(_a) {
|
|
|
1826
1965
|
"aria-label": "Read more about ".concat(title)
|
|
1827
1966
|
}, image) : image);
|
|
1828
1967
|
};
|
|
1829
|
-
var templateObject_1$
|
|
1968
|
+
var templateObject_1$e, templateObject_2$6, templateObject_3$5, templateObject_4$4;
|
|
1830
1969
|
|
|
1831
1970
|
React.createElement;
|
|
1832
|
-
var _a$
|
|
1833
|
-
typography$
|
|
1834
|
-
color$
|
|
1971
|
+
var _a$4 = tokens.semantic,
|
|
1972
|
+
typography$1 = _a$4.typography,
|
|
1973
|
+
color$2 = _a$4.color;
|
|
1835
1974
|
var TimeStyled = styled.time.withConfig({
|
|
1836
1975
|
displayName: "DateFormatter__TimeStyled",
|
|
1837
1976
|
componentId: "sc-5464cc-0"
|
|
1838
|
-
})(templateObject_1$
|
|
1977
|
+
})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography$1.label, color$2.text.subdued);
|
|
1839
1978
|
var DateFormatter = function DateFormatter(_a) {
|
|
1840
1979
|
var dateString = _a.dateString,
|
|
1841
1980
|
_b = _a.formatString,
|
|
@@ -1847,7 +1986,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
1847
1986
|
"data-testid": dataTestId
|
|
1848
1987
|
}, dateFns.format(date, formatString));
|
|
1849
1988
|
};
|
|
1850
|
-
var templateObject_1$
|
|
1989
|
+
var templateObject_1$d;
|
|
1851
1990
|
|
|
1852
1991
|
React.createElement;
|
|
1853
1992
|
var motion = tokens.semantic.motion,
|
|
@@ -1858,7 +1997,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
1858
1997
|
},
|
|
1859
1998
|
displayName: "IconButton__IconButtonStyled",
|
|
1860
1999
|
componentId: "sc-k8b14t-0"
|
|
1861
|
-
})(templateObject_1$
|
|
2000
|
+
})(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) {
|
|
1862
2001
|
var $variant = _a.$variant;
|
|
1863
2002
|
switch ($variant) {
|
|
1864
2003
|
case 'primary':
|
|
@@ -1969,7 +2108,7 @@ var IconButton = function IconButton(_a) {
|
|
|
1969
2108
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
1970
2109
|
}));
|
|
1971
2110
|
};
|
|
1972
|
-
var templateObject_1$
|
|
2111
|
+
var templateObject_1$c;
|
|
1973
2112
|
|
|
1974
2113
|
React.createElement;
|
|
1975
2114
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -1979,7 +2118,7 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
1979
2118
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
1980
2119
|
componentId: "sc-1nco33q-0"
|
|
1981
2120
|
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"])), tokens.semantic.color.background.disabled, tokens.base.border.radius[1], function (props) {
|
|
1982
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_1$
|
|
2121
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? tokens.component.progressBar.sizes[props.$height].height : tokens.component.progressBar.sizes.md.height);
|
|
1983
2122
|
}, function (props) {
|
|
1984
2123
|
return props.$variant === 'vertical' && styled.css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? tokens.component.progressBar.sizes[props.$width].height : tokens.component.progressBar.sizes.md.height);
|
|
1985
2124
|
});
|
|
@@ -2033,7 +2172,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2033
2172
|
$color: color
|
|
2034
2173
|
}));
|
|
2035
2174
|
};
|
|
2036
|
-
var templateObject_1$
|
|
2175
|
+
var templateObject_1$b, templateObject_2$5, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$1, templateObject_7$1;
|
|
2037
2176
|
|
|
2038
2177
|
React.createElement;
|
|
2039
2178
|
var StyledDivider = styled.div.withConfig({
|
|
@@ -2042,7 +2181,7 @@ var StyledDivider = styled.div.withConfig({
|
|
|
2042
2181
|
},
|
|
2043
2182
|
displayName: "Divider__StyledDivider",
|
|
2044
2183
|
componentId: "sc-1l0c8ja-0"
|
|
2045
|
-
})(templateObject_1$
|
|
2184
|
+
})(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"
|
|
2046
2185
|
/**
|
|
2047
2186
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2048
2187
|
*
|
|
@@ -2155,7 +2294,7 @@ var Divider = function Divider(_a) {
|
|
|
2155
2294
|
"aria-orientation": orientation
|
|
2156
2295
|
});
|
|
2157
2296
|
};
|
|
2158
|
-
var templateObject_1$
|
|
2297
|
+
var templateObject_1$a;
|
|
2159
2298
|
|
|
2160
2299
|
React.createElement;
|
|
2161
2300
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2164,7 +2303,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2164
2303
|
},
|
|
2165
2304
|
displayName: "Stack__StyledStack",
|
|
2166
2305
|
componentId: "sc-1ehkxgy-0"
|
|
2167
|
-
})(templateObject_1$
|
|
2306
|
+
})(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"
|
|
2168
2307
|
// Helper function to convert gap prop to CSS value
|
|
2169
2308
|
])));
|
|
2170
2309
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2202,141 +2341,6 @@ var Stack = function Stack(_a) {
|
|
|
2202
2341
|
"data-testid": dataTestId
|
|
2203
2342
|
}, children);
|
|
2204
2343
|
};
|
|
2205
|
-
var templateObject_1$a;
|
|
2206
|
-
|
|
2207
|
-
React.createElement;
|
|
2208
|
-
var _a$4 = tokens.semantic,
|
|
2209
|
-
typography$1 = _a$4.typography,
|
|
2210
|
-
color$2 = _a$4.color;
|
|
2211
|
-
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
2212
|
-
var styles = {
|
|
2213
|
-
display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
|
|
2214
|
-
h1: "font: ".concat(typography$1.h1, "; letter-spacing: ").concat(tokens.base.letterSpacing[0], ";"),
|
|
2215
|
-
h2: "font: ".concat(typography$1.h2, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
|
|
2216
|
-
h3: "font: ".concat(typography$1.h3, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
|
|
2217
|
-
h4: "font: ".concat(typography$1.h4, "; letter-spacing: ").concat(tokens.base.letterSpacing[1], ";"),
|
|
2218
|
-
h5: "font: ".concat(typography$1.h5, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
|
|
2219
|
-
h6: "font: ".concat(typography$1.h6, "; letter-spacing: ").concat(tokens.base.letterSpacing[2], ";"),
|
|
2220
|
-
subtitle: "font: ".concat(typography$1.subtitle, ";"),
|
|
2221
|
-
body: "font: ".concat(typography$1.body, ";"),
|
|
2222
|
-
small: "font: ".concat(typography$1.small, ";"),
|
|
2223
|
-
overline: "font: ".concat(typography$1.overline, ";"),
|
|
2224
|
-
caption: "font: ".concat(typography$1.caption, "; text-transform: uppercase;"),
|
|
2225
|
-
button1: "font: ".concat(typography$1.button1, ";"),
|
|
2226
|
-
button2: "font: ".concat(typography$1.button2, ";"),
|
|
2227
|
-
button3: "font: ".concat(typography$1.button3, ";"),
|
|
2228
|
-
label: "font: ".concat(typography$1.label, ";")
|
|
2229
|
-
};
|
|
2230
|
-
return styles[variant] || styles.body;
|
|
2231
|
-
};
|
|
2232
|
-
var getTextColor = function getTextColor(colorVariant) {
|
|
2233
|
-
var colorMap = {
|
|
2234
|
-
"default": color$2.text["default"],
|
|
2235
|
-
emphasis: color$2.text.emphasis,
|
|
2236
|
-
subdued: color$2.text.subdued,
|
|
2237
|
-
inverse: color$2.text.inverse,
|
|
2238
|
-
disabled: color$2.text.disabled,
|
|
2239
|
-
interactive: color$2.text.interactive,
|
|
2240
|
-
error: color$2.text.error,
|
|
2241
|
-
success: color$2.text.success,
|
|
2242
|
-
warning: color$2.text.warning
|
|
2243
|
-
};
|
|
2244
|
-
return colorMap[colorVariant] || colorMap["default"];
|
|
2245
|
-
};
|
|
2246
|
-
var getDefaultElement = function getDefaultElement(variant) {
|
|
2247
|
-
var elementMap = {
|
|
2248
|
-
display: 'h1',
|
|
2249
|
-
h1: 'h1',
|
|
2250
|
-
h2: 'h2',
|
|
2251
|
-
h3: 'h3',
|
|
2252
|
-
h4: 'h4',
|
|
2253
|
-
h5: 'h5',
|
|
2254
|
-
h6: 'h6',
|
|
2255
|
-
subtitle: 'p',
|
|
2256
|
-
body: 'p',
|
|
2257
|
-
small: 'span',
|
|
2258
|
-
overline: 'span',
|
|
2259
|
-
caption: 'span',
|
|
2260
|
-
button1: 'span',
|
|
2261
|
-
button2: 'span',
|
|
2262
|
-
button3: 'span',
|
|
2263
|
-
label: 'span'
|
|
2264
|
-
};
|
|
2265
|
-
return elementMap[variant] || 'span';
|
|
2266
|
-
};
|
|
2267
|
-
var StyledTypography = styled.span.withConfig({
|
|
2268
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2269
|
-
return !prop.startsWith('$');
|
|
2270
|
-
},
|
|
2271
|
-
displayName: "Typography__StyledTypography",
|
|
2272
|
-
componentId: "sc-17mqo4k-0"
|
|
2273
|
-
})(templateObject_1$9 || (templateObject_1$9 = __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"
|
|
2274
|
-
/**
|
|
2275
|
-
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
2276
|
-
*
|
|
2277
|
-
* Features:
|
|
2278
|
-
* - Semantic variants (h1-h6, body, subtitle, etc.)
|
|
2279
|
-
* - Color variants for different contexts
|
|
2280
|
-
* - Automatic semantic HTML element selection
|
|
2281
|
-
* - Manual element override support
|
|
2282
|
-
* - Direct semantic token usage (no component tokens needed)
|
|
2283
|
-
* - Full accessibility support
|
|
2284
|
-
*
|
|
2285
|
-
* @example
|
|
2286
|
-
* ```tsx
|
|
2287
|
-
* <Typography variant="h1">Main Heading</Typography>
|
|
2288
|
-
* <Typography variant="body" color="subdued">Body text</Typography>
|
|
2289
|
-
* <Typography variant="caption" as="figcaption">Image caption</Typography>
|
|
2290
|
-
* ```
|
|
2291
|
-
*/])), function (_a) {
|
|
2292
|
-
var $variant = _a.$variant;
|
|
2293
|
-
return getTypographyStyles($variant);
|
|
2294
|
-
}, function (_a) {
|
|
2295
|
-
var $color = _a.$color;
|
|
2296
|
-
return getTextColor($color);
|
|
2297
|
-
}, function (_a) {
|
|
2298
|
-
var $variant = _a.$variant;
|
|
2299
|
-
if (['body', 'subtitle', 'small'].includes($variant)) {
|
|
2300
|
-
return 'line-height: 1.5;';
|
|
2301
|
-
}
|
|
2302
|
-
return '';
|
|
2303
|
-
});
|
|
2304
|
-
/**
|
|
2305
|
-
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
2306
|
-
*
|
|
2307
|
-
* Features:
|
|
2308
|
-
* - Semantic variants (h1-h6, body, subtitle, etc.)
|
|
2309
|
-
* - Color variants for different contexts
|
|
2310
|
-
* - Automatic semantic HTML element selection
|
|
2311
|
-
* - Manual element override support
|
|
2312
|
-
* - Direct semantic token usage (no component tokens needed)
|
|
2313
|
-
* - Full accessibility support
|
|
2314
|
-
*
|
|
2315
|
-
* @example
|
|
2316
|
-
* ```tsx
|
|
2317
|
-
* <Typography variant="h1">Main Heading</Typography>
|
|
2318
|
-
* <Typography variant="body" color="subdued">Body text</Typography>
|
|
2319
|
-
* <Typography variant="caption" as="figcaption">Image caption</Typography>
|
|
2320
|
-
* ```
|
|
2321
|
-
*/
|
|
2322
|
-
var Typography = function Typography(_a) {
|
|
2323
|
-
var _b = _a.variant,
|
|
2324
|
-
variant = _b === void 0 ? 'body' : _b,
|
|
2325
|
-
children = _a.children,
|
|
2326
|
-
_c = _a.color,
|
|
2327
|
-
color = _c === void 0 ? 'default' : _c,
|
|
2328
|
-
as = _a.as,
|
|
2329
|
-
dataTestId = _a["data-testid"];
|
|
2330
|
-
// $variant and $color are only used for styled-components prop filtering
|
|
2331
|
-
var defaultElement = getDefaultElement(variant);
|
|
2332
|
-
var elementType = as || defaultElement;
|
|
2333
|
-
return /*#__PURE__*/React.createElement(StyledTypography, {
|
|
2334
|
-
as: elementType,
|
|
2335
|
-
$variant: variant,
|
|
2336
|
-
$color: color,
|
|
2337
|
-
"data-testid": dataTestId
|
|
2338
|
-
}, children);
|
|
2339
|
-
};
|
|
2340
2344
|
var templateObject_1$9;
|
|
2341
2345
|
|
|
2342
2346
|
React.createElement;
|