@common-origin/design-system 1.11.3 → 1.12.1
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/components/molecules/NumberInput/NumberInput.d.ts +86 -0
- package/dist/components/molecules/NumberInput/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +1 -0
- package/dist/index.esm.js +442 -184
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +441 -182
- package/dist/index.js.map +1 -1
- package/dist/styles/icons.json +12 -4
- package/dist/styles/tokens.json +3 -3
- package/dist/tokens/index.esm.js +3 -3
- package/dist/tokens/index.js +3 -3
- package/dist/types/icons.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -102,7 +102,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
102
102
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
103
103
|
};
|
|
104
104
|
|
|
105
|
-
var base$
|
|
105
|
+
var base$3 = {
|
|
106
106
|
border: {
|
|
107
107
|
radius: {
|
|
108
108
|
"1": "0.125rem",
|
|
@@ -446,7 +446,7 @@ var component = {
|
|
|
446
446
|
backgroundColor: "#e9ecef",
|
|
447
447
|
textColor: "#212529",
|
|
448
448
|
borderRadius: "0.25rem",
|
|
449
|
-
padding: "
|
|
449
|
+
padding: "2px 0.5rem",
|
|
450
450
|
font: "500 0.875rem/1.25rem 'Inter', sans-serif"
|
|
451
451
|
},
|
|
452
452
|
variants: {
|
|
@@ -465,11 +465,11 @@ var component = {
|
|
|
465
465
|
},
|
|
466
466
|
sizes: {
|
|
467
467
|
small: {
|
|
468
|
-
padding: "
|
|
468
|
+
padding: "2px 0.5rem",
|
|
469
469
|
font: "400 0.75rem/1rem 'Inter', sans-serif"
|
|
470
470
|
},
|
|
471
471
|
medium: {
|
|
472
|
-
padding: "
|
|
472
|
+
padding: "2px 0.5rem",
|
|
473
473
|
font: "500 0.875rem/1.25rem 'Inter', sans-serif"
|
|
474
474
|
},
|
|
475
475
|
large: {
|
|
@@ -637,7 +637,7 @@ var component = {
|
|
|
637
637
|
},
|
|
638
638
|
$ref: "./component/index.json"
|
|
639
639
|
};
|
|
640
|
-
var semantic$
|
|
640
|
+
var semantic$4 = {
|
|
641
641
|
border: {
|
|
642
642
|
"default": "0.0625rem solid #e9ecef",
|
|
643
643
|
subtle: "0.0625rem solid #dee2e6",
|
|
@@ -774,9 +774,9 @@ var semantic$3 = {
|
|
|
774
774
|
$ref: "./semantic/index.json"
|
|
775
775
|
};
|
|
776
776
|
var tokensData = {
|
|
777
|
-
base: base$
|
|
777
|
+
base: base$3,
|
|
778
778
|
component: component,
|
|
779
|
-
semantic: semantic$
|
|
779
|
+
semantic: semantic$4
|
|
780
780
|
};
|
|
781
781
|
|
|
782
782
|
React.createElement;
|
|
@@ -786,7 +786,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
786
786
|
},
|
|
787
787
|
displayName: "Avatar__AvatarContainer",
|
|
788
788
|
componentId: "sc-ezn4ax-0"
|
|
789
|
-
})(templateObject_1$
|
|
789
|
+
})(templateObject_1$s || (templateObject_1$s = __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) {
|
|
790
790
|
var $size = _a.$size;
|
|
791
791
|
return tokensData.semantic.size.avatar[$size];
|
|
792
792
|
}, function (_a) {
|
|
@@ -799,14 +799,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
799
799
|
},
|
|
800
800
|
displayName: "Avatar__AvatarImage",
|
|
801
801
|
componentId: "sc-ezn4ax-1"
|
|
802
|
-
})(templateObject_2$
|
|
802
|
+
})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"])), tokensData.base.border.radius.circle);
|
|
803
803
|
var AvatarInitials = styled.span.withConfig({
|
|
804
804
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
805
805
|
return !prop.startsWith('$');
|
|
806
806
|
},
|
|
807
807
|
displayName: "Avatar__AvatarInitials",
|
|
808
808
|
componentId: "sc-ezn4ax-2"
|
|
809
|
-
})(templateObject_3$
|
|
809
|
+
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n color: ", ";\n line-height: 1;\n text-transform: uppercase;\n user-select: none;\n"], ["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n color: ", ";\n line-height: 1;\n text-transform: uppercase;\n user-select: none;\n"
|
|
810
810
|
// Helper function to get initials from name
|
|
811
811
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
812
812
|
var $size = _a.$size;
|
|
@@ -869,30 +869,30 @@ var Avatar = function Avatar(_a) {
|
|
|
869
869
|
"aria-hidden": "true"
|
|
870
870
|
}, initials));
|
|
871
871
|
};
|
|
872
|
-
var templateObject_1$
|
|
872
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$c;
|
|
873
873
|
|
|
874
874
|
React.createElement;
|
|
875
875
|
var _a$5 = tokensData.semantic,
|
|
876
|
-
typography$
|
|
876
|
+
typography$1 = _a$5.typography,
|
|
877
877
|
color$4 = _a$5.color;
|
|
878
878
|
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
879
879
|
var styles = {
|
|
880
|
-
display: "font: ".concat(typography$
|
|
881
|
-
h1: "font: ".concat(typography$
|
|
882
|
-
h2: "font: ".concat(typography$
|
|
883
|
-
h3: "font: ".concat(typography$
|
|
884
|
-
h4: "font: ".concat(typography$
|
|
885
|
-
h5: "font: ".concat(typography$
|
|
886
|
-
h6: "font: ".concat(typography$
|
|
887
|
-
subtitle: "font: ".concat(typography$
|
|
888
|
-
body: "font: ".concat(typography$
|
|
889
|
-
small: "font: ".concat(typography$
|
|
890
|
-
overline: "font: ".concat(typography$
|
|
891
|
-
caption: "font: ".concat(typography$
|
|
892
|
-
button1: "font: ".concat(typography$
|
|
893
|
-
button2: "font: ".concat(typography$
|
|
894
|
-
button3: "font: ".concat(typography$
|
|
895
|
-
label: "font: ".concat(typography$
|
|
880
|
+
display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
881
|
+
h1: "font: ".concat(typography$1.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
882
|
+
h2: "font: ".concat(typography$1.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
883
|
+
h3: "font: ".concat(typography$1.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
884
|
+
h4: "font: ".concat(typography$1.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
885
|
+
h5: "font: ".concat(typography$1.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
886
|
+
h6: "font: ".concat(typography$1.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
887
|
+
subtitle: "font: ".concat(typography$1.subtitle, ";"),
|
|
888
|
+
body: "font: ".concat(typography$1.body, ";"),
|
|
889
|
+
small: "font: ".concat(typography$1.small, ";"),
|
|
890
|
+
overline: "font: ".concat(typography$1.overline, ";"),
|
|
891
|
+
caption: "font: ".concat(typography$1.caption, "; text-transform: uppercase;"),
|
|
892
|
+
button1: "font: ".concat(typography$1.button1, ";"),
|
|
893
|
+
button2: "font: ".concat(typography$1.button2, ";"),
|
|
894
|
+
button3: "font: ".concat(typography$1.button3, ";"),
|
|
895
|
+
label: "font: ".concat(typography$1.label, ";")
|
|
896
896
|
};
|
|
897
897
|
return styles[variant] || styles.body;
|
|
898
898
|
};
|
|
@@ -937,7 +937,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
937
937
|
},
|
|
938
938
|
displayName: "Typography__StyledTypography",
|
|
939
939
|
componentId: "sc-17mqo4k-0"
|
|
940
|
-
})(templateObject_1$
|
|
940
|
+
})(templateObject_1$r || (templateObject_1$r = __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"
|
|
941
941
|
/**
|
|
942
942
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
943
943
|
*
|
|
@@ -1004,23 +1004,23 @@ var Typography = function Typography(_a) {
|
|
|
1004
1004
|
"data-testid": dataTestId
|
|
1005
1005
|
}, children);
|
|
1006
1006
|
};
|
|
1007
|
-
var templateObject_1$
|
|
1007
|
+
var templateObject_1$r;
|
|
1008
1008
|
|
|
1009
1009
|
React.createElement;
|
|
1010
1010
|
var color$3 = tokensData.semantic.color;
|
|
1011
1011
|
tokensData.base.shadow;
|
|
1012
|
-
var scaleIn = styled.keyframes(templateObject_1$
|
|
1012
|
+
var scaleIn = styled.keyframes(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
1013
1013
|
var BadgeWrapper = styled.span.withConfig({
|
|
1014
1014
|
displayName: "Badge__BadgeWrapper",
|
|
1015
1015
|
componentId: "sc-tjz4pp-0"
|
|
1016
|
-
})(templateObject_2$
|
|
1016
|
+
})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n flex-shrink: 0;\n"], ["\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n flex-shrink: 0;\n"])));
|
|
1017
1017
|
var BadgeIndicator = styled.span.withConfig({
|
|
1018
1018
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1019
1019
|
return !prop.startsWith('$');
|
|
1020
1020
|
},
|
|
1021
1021
|
displayName: "Badge__BadgeIndicator",
|
|
1022
1022
|
componentId: "sc-tjz4pp-1"
|
|
1023
|
-
})(templateObject_3$
|
|
1023
|
+
})(templateObject_3$b || (templateObject_3$b = __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) {
|
|
1024
1024
|
return props.$isVisible ? 'flex' : 'none';
|
|
1025
1025
|
}, function (props) {
|
|
1026
1026
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1045,7 +1045,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1045
1045
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
1046
1046
|
displayName: "Badge__ScreenReaderOnly",
|
|
1047
1047
|
componentId: "sc-tjz4pp-2"
|
|
1048
|
-
})(templateObject_4$
|
|
1048
|
+
})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n"], ["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n"])));
|
|
1049
1049
|
var Badge = function Badge(_a) {
|
|
1050
1050
|
var children = _a.children,
|
|
1051
1051
|
_b = _a.count,
|
|
@@ -1076,7 +1076,7 @@ var Badge = function Badge(_a) {
|
|
|
1076
1076
|
color: "inverse"
|
|
1077
1077
|
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
|
|
1078
1078
|
};
|
|
1079
|
-
var templateObject_1$
|
|
1079
|
+
var templateObject_1$q, templateObject_2$f, templateObject_3$b, templateObject_4$9;
|
|
1080
1080
|
|
|
1081
1081
|
React.createElement;
|
|
1082
1082
|
var StyledBox = styled.div.withConfig({
|
|
@@ -1088,19 +1088,19 @@ var StyledBox = styled.div.withConfig({
|
|
|
1088
1088
|
})(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"
|
|
1089
1089
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1090
1090
|
])), function (props) {
|
|
1091
|
-
return props.$display && styled.css(templateObject_1$
|
|
1091
|
+
return props.$display && styled.css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1092
1092
|
}, function (props) {
|
|
1093
|
-
return props.$flexDirection && styled.css(templateObject_2$
|
|
1093
|
+
return props.$flexDirection && styled.css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1094
1094
|
}, function (props) {
|
|
1095
|
-
return props.$justifyContent && styled.css(templateObject_3$
|
|
1095
|
+
return props.$justifyContent && styled.css(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1096
1096
|
}, function (props) {
|
|
1097
|
-
return props.$alignItems && styled.css(templateObject_4$
|
|
1097
|
+
return props.$alignItems && styled.css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1098
1098
|
}, function (props) {
|
|
1099
|
-
return props.$flexWrap && styled.css(templateObject_5$
|
|
1099
|
+
return props.$flexWrap && styled.css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1100
1100
|
}, function (props) {
|
|
1101
|
-
return props.$gap && styled.css(templateObject_6$
|
|
1101
|
+
return props.$gap && styled.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1102
1102
|
}, function (props) {
|
|
1103
|
-
return props.$m && styled.css(templateObject_7$
|
|
1103
|
+
return props.$m && styled.css(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1104
1104
|
}, function (props) {
|
|
1105
1105
|
return props.$mt && styled.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1106
1106
|
}, function (props) {
|
|
@@ -1278,7 +1278,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1278
1278
|
}, rest), children);
|
|
1279
1279
|
};
|
|
1280
1280
|
var Box = BoxTransform;
|
|
1281
|
-
var templateObject_1$
|
|
1281
|
+
var templateObject_1$p, templateObject_2$e, templateObject_3$a, templateObject_4$8, templateObject_5$5, templateObject_6$3, templateObject_7$3, 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;
|
|
1282
1282
|
|
|
1283
1283
|
var add = {
|
|
1284
1284
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1308,6 +1308,14 @@ var caret = {
|
|
|
1308
1308
|
path: "m14.77 11.808-4.458-3.715A.8.8 0 0 0 9 8.708v6.584a.8.8 0 0 0 1.312.614l4.458-3.714a.25.25 0 0 0 0-.384Z",
|
|
1309
1309
|
name: "caret"
|
|
1310
1310
|
};
|
|
1311
|
+
var caretDown = {
|
|
1312
|
+
path: "M11.8079 14.7695L8.09345 10.3121C7.65923 9.79109 8.02975 9 8.70802 9L15.292 9C15.9702 9 16.3408 9.79109 15.9065 10.3121L12.192 14.7695C12.0921 14.8895 11.9079 14.8895 11.8079 14.7695Z",
|
|
1313
|
+
name: "caretDown"
|
|
1314
|
+
};
|
|
1315
|
+
var caretUp = {
|
|
1316
|
+
path: "M12.192 9.23058L15.9065 13.688C16.3408 14.209 15.9702 15.0001 15.292 15.0001H8.70802C8.02975 15.0001 7.65923 14.209 8.09345 13.688L11.8079 9.23058C11.9079 9.11064 12.0921 9.11064 12.192 9.23058Z",
|
|
1317
|
+
name: "caretUp"
|
|
1318
|
+
};
|
|
1311
1319
|
var check = {
|
|
1312
1320
|
path: "M9.16699 18.375L4.40039 14.7998L5.59961 13.2002L8.83301 15.625L17.2256 5.36719L18.7744 6.63281L9.16699 18.375Z",
|
|
1313
1321
|
name: "check"
|
|
@@ -1380,6 +1388,8 @@ var iconsData = {
|
|
|
1380
1388
|
arrowRight: arrowRight,
|
|
1381
1389
|
back: back,
|
|
1382
1390
|
caret: caret,
|
|
1391
|
+
caretDown: caretDown,
|
|
1392
|
+
caretUp: caretUp,
|
|
1383
1393
|
check: check,
|
|
1384
1394
|
close: close,
|
|
1385
1395
|
directionRight: directionRight,
|
|
@@ -1409,7 +1419,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1409
1419
|
},
|
|
1410
1420
|
displayName: "Icon__IconStyled",
|
|
1411
1421
|
componentId: "sc-1105czq-0"
|
|
1412
|
-
})(templateObject_1$
|
|
1422
|
+
})(templateObject_1$o || (templateObject_1$o = __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) {
|
|
1413
1423
|
var $size = _a.$size;
|
|
1414
1424
|
return tokensData.semantic.size.icon[$size];
|
|
1415
1425
|
}, function (_a) {
|
|
@@ -1473,13 +1483,13 @@ var Icon = function Icon(_a) {
|
|
|
1473
1483
|
d: iconData.path
|
|
1474
1484
|
})));
|
|
1475
1485
|
};
|
|
1476
|
-
var templateObject_1$
|
|
1486
|
+
var templateObject_1$o;
|
|
1477
1487
|
|
|
1478
1488
|
React.createElement;
|
|
1479
1489
|
var button = tokensData.component.button,
|
|
1480
|
-
semantic$
|
|
1490
|
+
semantic$3 = tokensData.semantic;
|
|
1481
1491
|
// Base styles shared between button and link
|
|
1482
|
-
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$
|
|
1492
|
+
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$3.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");
|
|
1483
1493
|
// Dynamic variant styles using component tokens
|
|
1484
1494
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1485
1495
|
var $variant = _a.$variant;
|
|
@@ -1505,14 +1515,14 @@ var StyledButton = styled.button.withConfig({
|
|
|
1505
1515
|
},
|
|
1506
1516
|
displayName: "Button__StyledButton",
|
|
1507
1517
|
componentId: "sc-1eiuum9-0"
|
|
1508
|
-
})(templateObject_1$
|
|
1518
|
+
})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1509
1519
|
var StyledLink = styled.a.withConfig({
|
|
1510
1520
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1511
1521
|
return !prop.startsWith('$');
|
|
1512
1522
|
},
|
|
1513
1523
|
displayName: "Button__StyledLink",
|
|
1514
1524
|
componentId: "sc-1eiuum9-1"
|
|
1515
|
-
})(templateObject_2$
|
|
1525
|
+
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1516
1526
|
// Helper function to get icon size based on button size
|
|
1517
1527
|
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1518
1528
|
// Helper function to get icon size based on button size
|
|
@@ -1605,7 +1615,7 @@ var Button = function Button(_a) {
|
|
|
1605
1615
|
"data-testid": dataTestId
|
|
1606
1616
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1607
1617
|
};
|
|
1608
|
-
var templateObject_1$
|
|
1618
|
+
var templateObject_1$n, templateObject_2$d;
|
|
1609
1619
|
|
|
1610
1620
|
var chip = tokensData.component.chip;
|
|
1611
1621
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1666,14 +1676,14 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1666
1676
|
},
|
|
1667
1677
|
displayName: "ChipBase__BaseChipStyled",
|
|
1668
1678
|
componentId: "sc-moa6zc-0"
|
|
1669
|
-
})(templateObject_1$
|
|
1679
|
+
})(templateObject_1$m || (templateObject_1$m = __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"
|
|
1670
1680
|
// Icon container for selected indicator or leading icons
|
|
1671
1681
|
])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1672
1682
|
// Icon container for selected indicator or leading icons
|
|
1673
1683
|
var IconContainer = styled.span.withConfig({
|
|
1674
1684
|
displayName: "ChipBase__IconContainer",
|
|
1675
1685
|
componentId: "sc-moa6zc-1"
|
|
1676
|
-
})(templateObject_2$
|
|
1686
|
+
})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n margin-right: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n margin-right: ", ";\n"
|
|
1677
1687
|
// Close button for dismissible chips
|
|
1678
1688
|
])), tokensData.semantic.spacing.layout.sm);
|
|
1679
1689
|
// Close button for dismissible chips
|
|
@@ -1683,7 +1693,7 @@ var CloseButton = styled.button.withConfig({
|
|
|
1683
1693
|
},
|
|
1684
1694
|
displayName: "ChipBase__CloseButton",
|
|
1685
1695
|
componentId: "sc-moa6zc-2"
|
|
1686
|
-
})(templateObject_3$
|
|
1696
|
+
})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 0;\n cursor: ", ";\n opacity: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n opacity: 0.7;\n }\n \n &:active:not(:disabled) {\n opacity: 0.9;\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: 2px;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 0;\n cursor: ", ";\n opacity: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n opacity: 0.7;\n }\n \n &:active:not(:disabled) {\n opacity: 0.9;\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: 2px;\n }\n"
|
|
1687
1697
|
// Wrapper component that applies styles via CSS custom properties
|
|
1688
1698
|
])), tokensData.semantic.spacing.layout.sm, function (props) {
|
|
1689
1699
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
@@ -1718,7 +1728,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1718
1728
|
style: __assign(__assign({}, cssProps), style)
|
|
1719
1729
|
}, htmlProps), children);
|
|
1720
1730
|
};
|
|
1721
|
-
var templateObject_1$
|
|
1731
|
+
var templateObject_1$m, templateObject_2$c, templateObject_3$9;
|
|
1722
1732
|
|
|
1723
1733
|
React.createElement;
|
|
1724
1734
|
/**
|
|
@@ -1962,32 +1972,32 @@ var spacing$3 = tokensData.semantic.spacing;
|
|
|
1962
1972
|
var StyledContainer = styled.div.withConfig({
|
|
1963
1973
|
displayName: "Container__StyledContainer",
|
|
1964
1974
|
componentId: "sc-17dbj6n-0"
|
|
1965
|
-
})(templateObject_1$
|
|
1975
|
+
})(templateObject_1$l || (templateObject_1$l = __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']);
|
|
1966
1976
|
var Container = function Container(_a) {
|
|
1967
1977
|
var children = _a.children,
|
|
1968
1978
|
props = __rest(_a, ["children"]);
|
|
1969
1979
|
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
1970
1980
|
};
|
|
1971
|
-
var templateObject_1$
|
|
1981
|
+
var templateObject_1$l;
|
|
1972
1982
|
|
|
1973
1983
|
React.createElement;
|
|
1974
|
-
var base$
|
|
1984
|
+
var base$2 = tokensData.base;
|
|
1975
1985
|
var PictureWrapper = styled.div.withConfig({
|
|
1976
1986
|
displayName: "Picture__PictureWrapper",
|
|
1977
1987
|
componentId: "sc-11d9tei-0"
|
|
1978
|
-
})(templateObject_1$
|
|
1988
|
+
})(templateObject_1$k || (templateObject_1$k = __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);
|
|
1979
1989
|
var ImageLink = styled.a.withConfig({
|
|
1980
1990
|
displayName: "Picture__ImageLink",
|
|
1981
1991
|
componentId: "sc-11d9tei-1"
|
|
1982
|
-
})(templateObject_2$
|
|
1992
|
+
})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: block;\n cursor: pointer;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"], ["\n display: block;\n cursor: pointer;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"])), base$2.duration.normal, base$2.easing.easeInOut);
|
|
1983
1993
|
var ImageButton = styled.button.withConfig({
|
|
1984
1994
|
displayName: "Picture__ImageButton",
|
|
1985
1995
|
componentId: "sc-11d9tei-2"
|
|
1986
|
-
})(templateObject_3$
|
|
1996
|
+
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n display: block;\n width: 100%;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"], ["\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n display: block;\n width: 100%;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"])), base$2.duration.normal, base$2.easing.easeInOut);
|
|
1987
1997
|
var StyledImage = styled.img.withConfig({
|
|
1988
1998
|
displayName: "Picture__StyledImage",
|
|
1989
1999
|
componentId: "sc-11d9tei-3"
|
|
1990
|
-
})(templateObject_4$
|
|
2000
|
+
})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n width: 100%;\n height: auto;\n border-radius: ", ";\n display: block;\n"], ["\n width: 100%;\n height: auto;\n border-radius: ", ";\n display: block;\n"])), base$2.border.radius[2]);
|
|
1991
2001
|
var Picture = function Picture(_a) {
|
|
1992
2002
|
var title = _a.title,
|
|
1993
2003
|
src = _a.src,
|
|
@@ -2014,16 +2024,16 @@ var Picture = function Picture(_a) {
|
|
|
2014
2024
|
"aria-label": "Read more about ".concat(title)
|
|
2015
2025
|
}, image) : image);
|
|
2016
2026
|
};
|
|
2017
|
-
var templateObject_1$
|
|
2027
|
+
var templateObject_1$k, templateObject_2$b, templateObject_3$8, templateObject_4$7;
|
|
2018
2028
|
|
|
2019
2029
|
React.createElement;
|
|
2020
2030
|
var _a$4 = tokensData.semantic,
|
|
2021
|
-
typography
|
|
2031
|
+
typography = _a$4.typography,
|
|
2022
2032
|
color$2 = _a$4.color;
|
|
2023
2033
|
var TimeStyled = styled.time.withConfig({
|
|
2024
2034
|
displayName: "DateFormatter__TimeStyled",
|
|
2025
2035
|
componentId: "sc-5464cc-0"
|
|
2026
|
-
})(templateObject_1$
|
|
2036
|
+
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography.label, color$2.text.subdued);
|
|
2027
2037
|
var DateFormatter = function DateFormatter(_a) {
|
|
2028
2038
|
var dateString = _a.dateString,
|
|
2029
2039
|
_b = _a.formatString,
|
|
@@ -2035,7 +2045,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
2035
2045
|
"data-testid": dataTestId
|
|
2036
2046
|
}, dateFns.format(date, formatString));
|
|
2037
2047
|
};
|
|
2038
|
-
var templateObject_1$
|
|
2048
|
+
var templateObject_1$j;
|
|
2039
2049
|
|
|
2040
2050
|
React.createElement;
|
|
2041
2051
|
var motion = tokensData.semantic.motion,
|
|
@@ -2046,7 +2056,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2046
2056
|
},
|
|
2047
2057
|
displayName: "IconButton__IconButtonStyled",
|
|
2048
2058
|
componentId: "sc-k8b14t-0"
|
|
2049
|
-
})(templateObject_1$
|
|
2059
|
+
})(templateObject_1$i || (templateObject_1$i = __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) {
|
|
2050
2060
|
var $variant = _a.$variant;
|
|
2051
2061
|
switch ($variant) {
|
|
2052
2062
|
case 'primary':
|
|
@@ -2157,7 +2167,7 @@ var IconButton = function IconButton(_a) {
|
|
|
2157
2167
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2158
2168
|
}));
|
|
2159
2169
|
};
|
|
2160
|
-
var templateObject_1$
|
|
2170
|
+
var templateObject_1$i;
|
|
2161
2171
|
|
|
2162
2172
|
React.createElement;
|
|
2163
2173
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -2166,10 +2176,10 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
2166
2176
|
},
|
|
2167
2177
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2168
2178
|
componentId: "sc-1nco33q-0"
|
|
2169
|
-
})(templateObject_3$
|
|
2170
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_1$
|
|
2179
|
+
})(templateObject_3$7 || (templateObject_3$7 = __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) {
|
|
2180
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_1$h || (templateObject_1$h = __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);
|
|
2171
2181
|
}, function (props) {
|
|
2172
|
-
return props.$variant === 'vertical' && styled.css(templateObject_2$
|
|
2182
|
+
return props.$variant === 'vertical' && styled.css(templateObject_2$a || (templateObject_2$a = __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);
|
|
2173
2183
|
});
|
|
2174
2184
|
var ProgressBarFill = styled.div.withConfig({
|
|
2175
2185
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2177,7 +2187,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2177
2187
|
},
|
|
2178
2188
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2179
2189
|
componentId: "sc-1nco33q-1"
|
|
2180
|
-
})(templateObject_7$
|
|
2190
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), tokensData.semantic.motion.transition.normal, function (props) {
|
|
2181
2191
|
var backgroundColor;
|
|
2182
2192
|
switch (props.$color) {
|
|
2183
2193
|
case 'success':
|
|
@@ -2191,11 +2201,11 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2191
2201
|
backgroundColor = tokensData.semantic.color.background.interactive;
|
|
2192
2202
|
break;
|
|
2193
2203
|
}
|
|
2194
|
-
return styled.css(templateObject_4$
|
|
2204
|
+
return styled.css(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2195
2205
|
}, function (props) {
|
|
2196
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_5$
|
|
2206
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2197
2207
|
}, function (props) {
|
|
2198
|
-
return props.$variant === 'vertical' && styled.css(templateObject_6$
|
|
2208
|
+
return props.$variant === 'vertical' && styled.css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2199
2209
|
});
|
|
2200
2210
|
var ProgressBar = function ProgressBar(_a) {
|
|
2201
2211
|
var value = _a.value,
|
|
@@ -2221,7 +2231,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2221
2231
|
$color: color
|
|
2222
2232
|
}));
|
|
2223
2233
|
};
|
|
2224
|
-
var templateObject_1$
|
|
2234
|
+
var templateObject_1$h, templateObject_2$a, templateObject_3$7, templateObject_4$6, templateObject_5$4, templateObject_6$2, templateObject_7$2;
|
|
2225
2235
|
|
|
2226
2236
|
React.createElement;
|
|
2227
2237
|
var StyledDivider = styled.div.withConfig({
|
|
@@ -2230,7 +2240,7 @@ var StyledDivider = styled.div.withConfig({
|
|
|
2230
2240
|
},
|
|
2231
2241
|
displayName: "Divider__StyledDivider",
|
|
2232
2242
|
componentId: "sc-1l0c8ja-0"
|
|
2233
|
-
})(templateObject_1$
|
|
2243
|
+
})(templateObject_1$g || (templateObject_1$g = __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"
|
|
2234
2244
|
/**
|
|
2235
2245
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2236
2246
|
*
|
|
@@ -2343,7 +2353,7 @@ var Divider = function Divider(_a) {
|
|
|
2343
2353
|
"aria-orientation": orientation
|
|
2344
2354
|
});
|
|
2345
2355
|
};
|
|
2346
|
-
var templateObject_1$
|
|
2356
|
+
var templateObject_1$g;
|
|
2347
2357
|
|
|
2348
2358
|
React.createElement;
|
|
2349
2359
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2352,7 +2362,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2352
2362
|
},
|
|
2353
2363
|
displayName: "Stack__StyledStack",
|
|
2354
2364
|
componentId: "sc-1ehkxgy-0"
|
|
2355
|
-
})(templateObject_1$
|
|
2365
|
+
})(templateObject_1$f || (templateObject_1$f = __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"
|
|
2356
2366
|
// Helper function to convert gap prop to CSS value
|
|
2357
2367
|
])));
|
|
2358
2368
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2390,17 +2400,17 @@ var Stack = function Stack(_a) {
|
|
|
2390
2400
|
"data-testid": dataTestId
|
|
2391
2401
|
}, children);
|
|
2392
2402
|
};
|
|
2393
|
-
var templateObject_1$
|
|
2403
|
+
var templateObject_1$f;
|
|
2394
2404
|
|
|
2395
2405
|
React.createElement;
|
|
2396
|
-
var semantic$
|
|
2406
|
+
var semantic$2 = tokensData.semantic;
|
|
2397
2407
|
var StyledTag = styled.span.withConfig({
|
|
2398
2408
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2399
2409
|
return !prop.startsWith('$');
|
|
2400
2410
|
},
|
|
2401
2411
|
displayName: "Tag__StyledTag",
|
|
2402
2412
|
componentId: "sc-lzfmti-0"
|
|
2403
|
-
})(templateObject_1$
|
|
2413
|
+
})(templateObject_1$e || (templateObject_1$e = __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"
|
|
2404
2414
|
/**
|
|
2405
2415
|
* Tag component for categorizing and labeling content
|
|
2406
2416
|
*
|
|
@@ -2410,33 +2420,33 @@ var StyledTag = styled.span.withConfig({
|
|
|
2410
2420
|
var $variant = _a.$variant;
|
|
2411
2421
|
switch ($variant) {
|
|
2412
2422
|
case 'interactive':
|
|
2413
|
-
return semantic$
|
|
2423
|
+
return semantic$2.color.background['interactive-subtle'];
|
|
2414
2424
|
case 'success':
|
|
2415
|
-
return semantic$
|
|
2425
|
+
return semantic$2.color.background['success-subtle'];
|
|
2416
2426
|
case 'warning':
|
|
2417
|
-
return semantic$
|
|
2427
|
+
return semantic$2.color.background['warning-subtle'];
|
|
2418
2428
|
case 'error':
|
|
2419
|
-
return semantic$
|
|
2429
|
+
return semantic$2.color.background['error-subtle'];
|
|
2420
2430
|
case 'emphasis':
|
|
2421
|
-
return semantic$
|
|
2431
|
+
return semantic$2.color.background.emphasis;
|
|
2422
2432
|
default:
|
|
2423
|
-
return semantic$
|
|
2433
|
+
return semantic$2.color.background.surface;
|
|
2424
2434
|
}
|
|
2425
2435
|
}, function (_a) {
|
|
2426
2436
|
var $variant = _a.$variant;
|
|
2427
2437
|
switch ($variant) {
|
|
2428
2438
|
case 'interactive':
|
|
2429
|
-
return semantic$
|
|
2439
|
+
return semantic$2.color.text.interactive;
|
|
2430
2440
|
case 'success':
|
|
2431
|
-
return semantic$
|
|
2441
|
+
return semantic$2.color.text.success;
|
|
2432
2442
|
case 'warning':
|
|
2433
|
-
return semantic$
|
|
2443
|
+
return semantic$2.color.text.warning;
|
|
2434
2444
|
case 'error':
|
|
2435
|
-
return semantic$
|
|
2445
|
+
return semantic$2.color.text.error;
|
|
2436
2446
|
case 'emphasis':
|
|
2437
|
-
return semantic$
|
|
2447
|
+
return semantic$2.color.text.inverse;
|
|
2438
2448
|
default:
|
|
2439
|
-
return semantic$
|
|
2449
|
+
return semantic$2.color.text["default"];
|
|
2440
2450
|
}
|
|
2441
2451
|
}, function (_a) {
|
|
2442
2452
|
var $variant = _a.$variant,
|
|
@@ -2444,17 +2454,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2444
2454
|
if (!$border) return 'none';
|
|
2445
2455
|
switch ($variant) {
|
|
2446
2456
|
case 'interactive':
|
|
2447
|
-
return "1px solid ".concat(semantic$
|
|
2457
|
+
return "1px solid ".concat(semantic$2.color.border.interactive);
|
|
2448
2458
|
case 'success':
|
|
2449
|
-
return "1px solid ".concat(semantic$
|
|
2459
|
+
return "1px solid ".concat(semantic$2.color.border.success);
|
|
2450
2460
|
case 'warning':
|
|
2451
|
-
return "1px solid ".concat(semantic$
|
|
2461
|
+
return "1px solid ".concat(semantic$2.color.border.warning);
|
|
2452
2462
|
case 'error':
|
|
2453
|
-
return "1px solid ".concat(semantic$
|
|
2463
|
+
return "1px solid ".concat(semantic$2.color.border.error);
|
|
2454
2464
|
case 'emphasis':
|
|
2455
|
-
return "1px solid ".concat(semantic$
|
|
2465
|
+
return "1px solid ".concat(semantic$2.color.background.emphasis);
|
|
2456
2466
|
default:
|
|
2457
|
-
return "1px solid ".concat(semantic$
|
|
2467
|
+
return "1px solid ".concat(semantic$2.color.border["default"]);
|
|
2458
2468
|
}
|
|
2459
2469
|
});
|
|
2460
2470
|
/**
|
|
@@ -2481,18 +2491,18 @@ var Tag = function Tag(_a) {
|
|
|
2481
2491
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
2482
2492
|
}, props), children);
|
|
2483
2493
|
};
|
|
2484
|
-
var templateObject_1$
|
|
2494
|
+
var templateObject_1$e;
|
|
2485
2495
|
|
|
2486
2496
|
React.createElement;
|
|
2487
2497
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
2488
2498
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
2489
2499
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
2490
2500
|
componentId: "sc-7ouzg5-0"
|
|
2491
|
-
})(templateObject_1$
|
|
2501
|
+
})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"], ["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"])), ((_b$1 = (_a$3 = tokensData.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
|
|
2492
2502
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
2493
2503
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
2494
2504
|
componentId: "sc-7ouzg5-1"
|
|
2495
|
-
})(templateObject_2$
|
|
2505
|
+
})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n text-decoration: underline;\n color: ", ";\n }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', ((_h = (_g = tokensData.base) === null || _g === void 0 ? void 0 : _g.spacing) === null || _h === void 0 ? void 0 : _h['4']) || '1rem', ((_k = (_j = tokensData.base) === null || _j === void 0 ? void 0 : _j.spacing) === null || _k === void 0 ? void 0 : _k['4']) || '1rem', ((_m = (_l = tokensData.base) === null || _l === void 0 ? void 0 : _l.spacing) === null || _m === void 0 ? void 0 : _m['3']) || '0.75rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
|
|
2496
2506
|
var isInternalUrl = function isInternalUrl(url) {
|
|
2497
2507
|
return url.startsWith('/') && !url.startsWith('http');
|
|
2498
2508
|
};
|
|
@@ -2518,13 +2528,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
2518
2528
|
}, breadcrumb.label)));
|
|
2519
2529
|
}))));
|
|
2520
2530
|
};
|
|
2521
|
-
var templateObject_1$
|
|
2531
|
+
var templateObject_1$d, templateObject_2$9;
|
|
2522
2532
|
|
|
2523
2533
|
React.createElement;
|
|
2524
2534
|
var CardSmallStyled = styled.div.withConfig({
|
|
2525
2535
|
displayName: "CardSmall__CardSmallStyled",
|
|
2526
2536
|
componentId: "sc-jpcqvd-0"
|
|
2527
|
-
})(templateObject_1$
|
|
2537
|
+
})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n a {\n text-decoration: none;\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n width: 100%;\n height: auto;\n display: block;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n &:focus-within {\n outline: none;\n box-shadow: 0 0 0 2px ", ";\n }\n"], ["\n a {\n text-decoration: none;\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n width: 100%;\n height: auto;\n display: block;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n &:focus-within {\n outline: none;\n box-shadow: 0 0 0 2px ", ";\n }\n"])), tokensData.base.border.radius[2], tokensData.semantic.color.border.strong);
|
|
2528
2538
|
var CardSmall = function CardSmall(_a) {
|
|
2529
2539
|
var title = _a.title,
|
|
2530
2540
|
picture = _a.picture,
|
|
@@ -2561,14 +2571,14 @@ var CardSmall = function CardSmall(_a) {
|
|
|
2561
2571
|
color: "subdued"
|
|
2562
2572
|
}, meta))))));
|
|
2563
2573
|
};
|
|
2564
|
-
var templateObject_1$
|
|
2574
|
+
var templateObject_1$c;
|
|
2565
2575
|
|
|
2566
2576
|
React.createElement;
|
|
2567
2577
|
var border$3 = tokensData.base.border;
|
|
2568
2578
|
var CardLargeStyled = styled.div.withConfig({
|
|
2569
2579
|
displayName: "CardLarge__CardLargeStyled",
|
|
2570
2580
|
componentId: "sc-1rfgdzl-0"
|
|
2571
|
-
})(templateObject_1$
|
|
2581
|
+
})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n max-width: 768px;\n\n a {\n text-decoration: none;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n width: 100%;\n }\n"], ["\n max-width: 768px;\n\n a {\n text-decoration: none;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n width: 100%;\n }\n"])), border$3.radius[6]);
|
|
2572
2582
|
var CardLarge = function CardLarge(_a) {
|
|
2573
2583
|
var title = _a.title,
|
|
2574
2584
|
excerpt = _a.excerpt,
|
|
@@ -2613,7 +2623,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
2613
2623
|
});
|
|
2614
2624
|
})))));
|
|
2615
2625
|
};
|
|
2616
|
-
var templateObject_1$
|
|
2626
|
+
var templateObject_1$b;
|
|
2617
2627
|
|
|
2618
2628
|
/**
|
|
2619
2629
|
* Hidden native checkbox input for accessibility
|
|
@@ -2625,7 +2635,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
2625
2635
|
},
|
|
2626
2636
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
2627
2637
|
componentId: "sc-1ddpctx-0"
|
|
2628
|
-
})(templateObject_1$
|
|
2638
|
+
})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n pointer-events: none;\n"], ["\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n pointer-events: none;\n"
|
|
2629
2639
|
/**
|
|
2630
2640
|
* Custom checkbox visual component
|
|
2631
2641
|
* 24px × 24px for 8px grid alignment
|
|
@@ -2642,7 +2652,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2642
2652
|
},
|
|
2643
2653
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2644
2654
|
componentId: "sc-1ddpctx-1"
|
|
2645
|
-
})(templateObject_2$
|
|
2655
|
+
})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n min-width: 20px;\n min-height: 20px;\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all 150ms ease-out;\n flex-shrink: 0;\n\n /* Hover state */\n ", ":not(:disabled):hover + & {\n border-color: ", ";\n }\n\n /* Focus state */\n ", ":focus-visible + & {\n outline: ", ";\n outline-offset: ", ";\n border-color: ", ";\n }\n\n /* Disabled state */\n ", "\n\n /* Checkmark icon */\n &::after {\n content: '';\n position: absolute;\n display: ", ";\n left: 6px;\n top: 3px;\n width: 4px;\n height: 8px;\n border: solid ", ";\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n\n /* Indeterminate icon (horizontal line) */\n &::before {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 8px;\n width: 10px;\n height: 2px;\n background-color: ", ";\n }\n"], ["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n min-width: 20px;\n min-height: 20px;\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all 150ms ease-out;\n flex-shrink: 0;\n\n /* Hover state */\n ", ":not(:disabled):hover + & {\n border-color: ", ";\n }\n\n /* Focus state */\n ", ":focus-visible + & {\n outline: ", ";\n outline-offset: ", ";\n border-color: ", ";\n }\n\n /* Disabled state */\n ", "\n\n /* Checkmark icon */\n &::after {\n content: '';\n position: absolute;\n display: ", ";\n left: 6px;\n top: 3px;\n width: 4px;\n height: 8px;\n border: solid ", ";\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n\n /* Indeterminate icon (horizontal line) */\n &::before {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 8px;\n width: 10px;\n height: 2px;\n background-color: ", ";\n }\n"
|
|
2646
2656
|
/**
|
|
2647
2657
|
* Container for checkbox with proper spacing and alignment
|
|
2648
2658
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -2675,7 +2685,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
2675
2685
|
},
|
|
2676
2686
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
2677
2687
|
componentId: "sc-1ddpctx-2"
|
|
2678
|
-
})(templateObject_3$
|
|
2688
|
+
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 32px;\n flex-direction: ", ";\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 32px;\n flex-direction: ", ";\n user-select: none;\n"
|
|
2679
2689
|
/**
|
|
2680
2690
|
* Label text with proper typography
|
|
2681
2691
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -2692,20 +2702,20 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
2692
2702
|
},
|
|
2693
2703
|
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
2694
2704
|
componentId: "sc-1ddpctx-3"
|
|
2695
|
-
})(templateObject_4$
|
|
2705
|
+
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
2696
2706
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
2697
2707
|
});
|
|
2698
|
-
var templateObject_1$
|
|
2708
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$5;
|
|
2699
2709
|
|
|
2700
2710
|
React.createElement;
|
|
2701
|
-
var StyledFieldContainer$
|
|
2711
|
+
var StyledFieldContainer$2 = styled.div.withConfig({
|
|
2702
2712
|
displayName: "Checkbox__StyledFieldContainer",
|
|
2703
2713
|
componentId: "sc-vquz3v-0"
|
|
2704
|
-
})(templateObject_1$
|
|
2705
|
-
var StyledHelperText$
|
|
2714
|
+
})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"], ["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"])), tokensData.base.spacing[1]);
|
|
2715
|
+
var StyledHelperText$2 = styled.span.withConfig({
|
|
2706
2716
|
displayName: "Checkbox__StyledHelperText",
|
|
2707
2717
|
componentId: "sc-vquz3v-1"
|
|
2708
|
-
})(templateObject_2$
|
|
2718
|
+
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-left: ", "; /* Align with label text after checkbox */\n display: block;\n"], ["\n font: ", ";\n color: ", ";\n margin-left: ", "; /* Align with label text after checkbox */\n display: block;\n"
|
|
2709
2719
|
/**
|
|
2710
2720
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2711
2721
|
*
|
|
@@ -2786,7 +2796,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
2786
2796
|
inputRef.current.indeterminate = indeterminate;
|
|
2787
2797
|
}
|
|
2788
2798
|
}, [indeterminate]);
|
|
2789
|
-
return /*#__PURE__*/React.createElement(StyledFieldContainer$
|
|
2799
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer$2, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, {
|
|
2790
2800
|
$disabled: disabled,
|
|
2791
2801
|
$labelPosition: labelPosition
|
|
2792
2802
|
}, /*#__PURE__*/React.createElement(HiddenCheckboxInput, _extends({
|
|
@@ -2808,9 +2818,9 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
2808
2818
|
"aria-hidden": "true"
|
|
2809
2819
|
}), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
|
|
2810
2820
|
$disabled: disabled
|
|
2811
|
-
}, label)), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$
|
|
2821
|
+
}, label)), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$2, {
|
|
2812
2822
|
id: helperTextId
|
|
2813
|
-
}, helperText), error && /*#__PURE__*/React.createElement(StyledHelperText$
|
|
2823
|
+
}, helperText), error && /*#__PURE__*/React.createElement(StyledHelperText$2, {
|
|
2814
2824
|
id: errorId,
|
|
2815
2825
|
$error: true,
|
|
2816
2826
|
role: "alert",
|
|
@@ -2818,13 +2828,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
2818
2828
|
}, error));
|
|
2819
2829
|
});
|
|
2820
2830
|
Checkbox.displayName = 'Checkbox';
|
|
2821
|
-
var templateObject_1$
|
|
2831
|
+
var templateObject_1$9, templateObject_2$7;
|
|
2822
2832
|
|
|
2823
2833
|
React.createElement;
|
|
2824
2834
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
2825
2835
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
2826
2836
|
componentId: "sc-ae049w-0"
|
|
2827
|
-
})(templateObject_1$
|
|
2837
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"], ["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"])));
|
|
2828
2838
|
var ChipGroup = function ChipGroup(_a) {
|
|
2829
2839
|
var labels = _a.labels,
|
|
2830
2840
|
_b = _a.variant,
|
|
@@ -2843,7 +2853,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
2843
2853
|
});
|
|
2844
2854
|
})));
|
|
2845
2855
|
};
|
|
2846
|
-
var templateObject_1$
|
|
2856
|
+
var templateObject_1$8;
|
|
2847
2857
|
|
|
2848
2858
|
React.createElement;
|
|
2849
2859
|
var _a$2 = tokensData.semantic,
|
|
@@ -2853,15 +2863,15 @@ var _a$2 = tokensData.semantic,
|
|
|
2853
2863
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
2854
2864
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
2855
2865
|
componentId: "sc-1p1t0kp-0"
|
|
2856
|
-
})(templateObject_1$
|
|
2866
|
+
})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n margin: ", " 0;\n position: relative;\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n margin: ", " 0;\n position: relative;\n"])), color$1.background.subtle, border$2.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$1.text["default"], spacing$2.layout.sm);
|
|
2857
2867
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
2858
2868
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
2859
2869
|
componentId: "sc-1p1t0kp-1"
|
|
2860
|
-
})(templateObject_2$
|
|
2870
|
+
})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n width: 100%;\n"], ["\n position: relative;\n display: inline-block;\n width: 100%;\n"])));
|
|
2861
2871
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
2862
2872
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
2863
2873
|
componentId: "sc-1p1t0kp-2"
|
|
2864
|
-
})(templateObject_3$
|
|
2874
|
+
})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n right: ", ";\n"], ["\n position: absolute;\n bottom: ", ";\n right: ", ";\n"])), spacing$2.layout.lg, spacing$2.layout.sm);
|
|
2865
2875
|
var CopyButton = function CopyButton(_a) {
|
|
2866
2876
|
var text = _a.text,
|
|
2867
2877
|
onCopy = _a.onCopy;
|
|
@@ -2938,7 +2948,7 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
2938
2948
|
onCopy: onCopy
|
|
2939
2949
|
}));
|
|
2940
2950
|
};
|
|
2941
|
-
var templateObject_1$
|
|
2951
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$5;
|
|
2942
2952
|
|
|
2943
2953
|
React.createElement;
|
|
2944
2954
|
var _a$1 = tokensData.base,
|
|
@@ -2947,23 +2957,23 @@ var _a$1 = tokensData.base,
|
|
|
2947
2957
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
2948
2958
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
2949
2959
|
componentId: "sc-1mi4lso-0"
|
|
2950
|
-
})(templateObject_1$
|
|
2960
|
+
})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n a {\n text-decoration: none;\n }\n"], ["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n a {\n text-decoration: none;\n }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
|
|
2951
2961
|
var ImageWrapper = styled.div.withConfig({
|
|
2952
2962
|
displayName: "FeatureBlock__ImageWrapper",
|
|
2953
2963
|
componentId: "sc-1mi4lso-1"
|
|
2954
|
-
})(templateObject_2$
|
|
2964
|
+
})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n grid-column: span 12;\n\n @media (min-width: ", ") {\n grid-column: span 6;\n }\n"], ["\n grid-column: span 12;\n\n @media (min-width: ", ") {\n grid-column: span 6;\n }\n"])), tokensData.base.breakpoint.lg);
|
|
2955
2965
|
var ContentSection = styled.div.withConfig({
|
|
2956
2966
|
displayName: "FeatureBlock__ContentSection",
|
|
2957
2967
|
componentId: "sc-1mi4lso-2"
|
|
2958
|
-
})(templateObject_3$
|
|
2968
|
+
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n grid-column: span 12;\n margin-top: ", ";\n\n @media (min-width: ", ") {\n grid-column: span 6;\n margin-top: 0;\n padding-right: ", ";\n }\n\n @media (min-width: ", ") {\n padding-right: ", ";\n }\n"], ["\n grid-column: span 12;\n margin-top: ", ";\n\n @media (min-width: ", ") {\n grid-column: span 6;\n margin-top: 0;\n padding-right: ", ";\n }\n\n @media (min-width: ", ") {\n padding-right: ", ";\n }\n"])), spacing$1[6], tokensData.base.breakpoint.lg, spacing$1[8], tokensData.base.breakpoint.xl, spacing$1[24]);
|
|
2959
2969
|
var ButtonWrapper = styled.div.withConfig({
|
|
2960
2970
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
2961
2971
|
componentId: "sc-1mi4lso-3"
|
|
2962
|
-
})(templateObject_4$
|
|
2972
|
+
})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
2963
2973
|
var ContentWrapper = styled.div.withConfig({
|
|
2964
2974
|
displayName: "FeatureBlock__ContentWrapper",
|
|
2965
2975
|
componentId: "sc-1mi4lso-4"
|
|
2966
|
-
})(templateObject_5$
|
|
2976
|
+
})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n"])));
|
|
2967
2977
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
2968
2978
|
var title = _a.title,
|
|
2969
2979
|
excerpt = _a.excerpt,
|
|
@@ -3003,7 +3013,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
3003
3013
|
onClick: onReadMore
|
|
3004
3014
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
3005
3015
|
};
|
|
3006
|
-
var templateObject_1$
|
|
3016
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$4, templateObject_5$3;
|
|
3007
3017
|
|
|
3008
3018
|
React.createElement;
|
|
3009
3019
|
var _a = tokensData.base,
|
|
@@ -3011,22 +3021,23 @@ var _a = tokensData.base,
|
|
|
3011
3021
|
shadow = _a.shadow,
|
|
3012
3022
|
zIndex = _a.zIndex,
|
|
3013
3023
|
_b = tokensData.semantic,
|
|
3014
|
-
color = _b.color
|
|
3015
|
-
|
|
3016
|
-
border = _b.border
|
|
3024
|
+
color = _b.color;
|
|
3025
|
+
_b.typography;
|
|
3026
|
+
var border = _b.border,
|
|
3027
|
+
input$1 = tokensData.component.input;
|
|
3017
3028
|
var DropdownContainer = styled.div.withConfig({
|
|
3018
3029
|
displayName: "Dropdown__DropdownContainer",
|
|
3019
3030
|
componentId: "sc-kz07c4-0"
|
|
3020
|
-
})(templateObject_1$
|
|
3031
|
+
})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
3021
3032
|
var DropdownTrigger = styled.button.withConfig({
|
|
3022
3033
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3023
3034
|
return !prop.startsWith('$');
|
|
3024
3035
|
},
|
|
3025
3036
|
displayName: "Dropdown__DropdownTrigger",
|
|
3026
3037
|
componentId: "sc-kz07c4-1"
|
|
3027
|
-
})(templateObject_2$
|
|
3038
|
+
})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor: ", ";\n }\n \n ", "\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor: ", ";\n }\n \n ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, input$1.hover.borderColor, input$1.focus.borderColor, input$1.focus.outline, input$1.focus.outlineOffset, input$1.disabled.backgroundColor, input$1.disabled.textColor, input$1.disabled.borderColor, input$1.disabled.cursor, function (_a) {
|
|
3028
3039
|
var $isOpen = _a.$isOpen;
|
|
3029
|
-
return $isOpen && "\n
|
|
3040
|
+
return $isOpen && "\n border-color: ".concat(input$1.focus.borderColor, ";\n ");
|
|
3030
3041
|
});
|
|
3031
3042
|
var DropdownIcon = styled.div.withConfig({
|
|
3032
3043
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3034,7 +3045,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
3034
3045
|
},
|
|
3035
3046
|
displayName: "Dropdown__DropdownIcon",
|
|
3036
3047
|
componentId: "sc-kz07c4-2"
|
|
3037
|
-
})(templateObject_3$
|
|
3048
|
+
})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-left: ", ";\n transition: transform 0.15s ease;\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n margin-left: ", ";\n transition: transform 0.15s ease;\n \n ", "\n"])), spacing[2], function (_a) {
|
|
3038
3049
|
var $isOpen = _a.$isOpen;
|
|
3039
3050
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
3040
3051
|
});
|
|
@@ -3044,7 +3055,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
3044
3055
|
},
|
|
3045
3056
|
displayName: "Dropdown__DropdownMenu",
|
|
3046
3057
|
componentId: "sc-kz07c4-3"
|
|
3047
|
-
})(templateObject_4$
|
|
3058
|
+
})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"])), zIndex[3], input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, shadow[3], spacing[1], function (_a) {
|
|
3048
3059
|
var $isOpen = _a.$isOpen;
|
|
3049
3060
|
return $isOpen ? 1 : 0;
|
|
3050
3061
|
}, function (_a) {
|
|
@@ -3060,13 +3071,13 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3060
3071
|
},
|
|
3061
3072
|
displayName: "Dropdown__DropdownOption",
|
|
3062
3073
|
componentId: "sc-kz07c4-4"
|
|
3063
|
-
})(templateObject_5$
|
|
3074
|
+
})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color 0.15s ease;\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"], ["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color 0.15s ease;\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
|
|
3064
3075
|
var $isSelected = _a.$isSelected,
|
|
3065
3076
|
$isFocused = _a.$isFocused;
|
|
3066
3077
|
if ($isFocused) return color.background.surface;
|
|
3067
3078
|
if ($isSelected) return color.background.surface;
|
|
3068
3079
|
return 'transparent';
|
|
3069
|
-
},
|
|
3080
|
+
}, input$1["default"].font, input$1["default"].textColor, color.background.surface, color.background.surface, border.subtle);
|
|
3070
3081
|
var Dropdown = function Dropdown(_a) {
|
|
3071
3082
|
var options = _a.options,
|
|
3072
3083
|
value = _a.value,
|
|
@@ -3214,43 +3225,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3214
3225
|
}, option.label);
|
|
3215
3226
|
})));
|
|
3216
3227
|
};
|
|
3217
|
-
var templateObject_1$
|
|
3218
|
-
|
|
3219
|
-
React.createElement;
|
|
3220
|
-
var PageTitleStyled = styled.div.withConfig({
|
|
3221
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3222
|
-
return !prop.startsWith('$');
|
|
3223
|
-
},
|
|
3224
|
-
displayName: "PageTitle__PageTitleStyled",
|
|
3225
|
-
componentId: "sc-16h256f-0"
|
|
3226
|
-
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
|
|
3227
|
-
var $hasBackButton = _a.$hasBackButton;
|
|
3228
|
-
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
3229
|
-
});
|
|
3230
|
-
var PageTitle = function PageTitle(_a) {
|
|
3231
|
-
var title = _a.title,
|
|
3232
|
-
_b = _a.hasBackButton,
|
|
3233
|
-
hasBackButton = _b === void 0 ? false : _b,
|
|
3234
|
-
subtitle = _a.subtitle;
|
|
3235
|
-
return /*#__PURE__*/React.createElement(PageTitleStyled, {
|
|
3236
|
-
$hasBackButton: hasBackButton
|
|
3237
|
-
}, hasBackButton && /*#__PURE__*/React.createElement(IconButton, {
|
|
3238
|
-
iconName: "back",
|
|
3239
|
-
size: "large",
|
|
3240
|
-
variant: "naked",
|
|
3241
|
-
url: "/music",
|
|
3242
|
-
"aria-label": "Go back to music page"
|
|
3243
|
-
}), /*#__PURE__*/React.createElement(Stack, {
|
|
3244
|
-
direction: "column",
|
|
3245
|
-
gap: "md"
|
|
3246
|
-
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3247
|
-
variant: "h1"
|
|
3248
|
-
}, title), subtitle && /*#__PURE__*/React.createElement(Typography, {
|
|
3249
|
-
variant: "caption",
|
|
3250
|
-
color: "subdued"
|
|
3251
|
-
}, subtitle)));
|
|
3252
|
-
};
|
|
3253
|
-
var templateObject_1$3;
|
|
3228
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2;
|
|
3254
3229
|
|
|
3255
3230
|
var input = tokensData.component.input;
|
|
3256
3231
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -3259,7 +3234,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
3259
3234
|
},
|
|
3260
3235
|
displayName: "InputBase__StyledInputBase",
|
|
3261
3236
|
componentId: "sc-1bpf4e8-0"
|
|
3262
|
-
})(templateObject_1$
|
|
3237
|
+
})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: ", ";\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"], ["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: ", ";\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"
|
|
3263
3238
|
/**
|
|
3264
3239
|
* Base styled textarea with shared styling
|
|
3265
3240
|
*/])), input["default"].font, function (_a) {
|
|
@@ -3290,8 +3265,291 @@ var StyledTextAreaBase = styled.textarea.withConfig({
|
|
|
3290
3265
|
},
|
|
3291
3266
|
displayName: "InputBase__StyledTextAreaBase",
|
|
3292
3267
|
componentId: "sc-1bpf4e8-1"
|
|
3293
|
-
})(templateObject_2$
|
|
3294
|
-
var templateObject_1$
|
|
3268
|
+
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"], ["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"])), StyledInputBase);
|
|
3269
|
+
var templateObject_1$4, templateObject_2$3;
|
|
3270
|
+
|
|
3271
|
+
React.createElement;
|
|
3272
|
+
var semantic$1 = tokensData.semantic,
|
|
3273
|
+
base$1 = tokensData.base;
|
|
3274
|
+
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
3275
|
+
displayName: "NumberInput__StyledFieldContainer",
|
|
3276
|
+
componentId: "sc-qotc3w-0"
|
|
3277
|
+
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base$1.spacing[2]);
|
|
3278
|
+
var StyledLabel$1 = styled.label.withConfig({
|
|
3279
|
+
displayName: "NumberInput__StyledLabel",
|
|
3280
|
+
componentId: "sc-qotc3w-1"
|
|
3281
|
+
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"])), base$1.spacing[1], semantic$1.typography.label, semantic$1.color.text["default"], semantic$1.color.text.disabled);
|
|
3282
|
+
var StyledRequiredIndicator$1 = styled.span.withConfig({
|
|
3283
|
+
displayName: "NumberInput__StyledRequiredIndicator",
|
|
3284
|
+
componentId: "sc-qotc3w-2"
|
|
3285
|
+
})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$1.color.text.error, base$1.fontWeight[5]);
|
|
3286
|
+
var StyledInputWrapper = styled.div.withConfig({
|
|
3287
|
+
displayName: "NumberInput__StyledInputWrapper",
|
|
3288
|
+
componentId: "sc-qotc3w-3"
|
|
3289
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n"])));
|
|
3290
|
+
var StyledNumberInput = styled(StyledInputBase).withConfig({
|
|
3291
|
+
displayName: "NumberInput__StyledNumberInput",
|
|
3292
|
+
componentId: "sc-qotc3w-4"
|
|
3293
|
+
})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"], ["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"])), base$1.spacing[10]);
|
|
3294
|
+
var StyledStepperContainer = styled.div.withConfig({
|
|
3295
|
+
displayName: "NumberInput__StyledStepperContainer",
|
|
3296
|
+
componentId: "sc-qotc3w-5"
|
|
3297
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"], ["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"])), base$1.spacing[2], base$1.spacing[2]);
|
|
3298
|
+
var StyledHelperText$1 = styled.div.withConfig({
|
|
3299
|
+
displayName: "NumberInput__StyledHelperText",
|
|
3300
|
+
componentId: "sc-qotc3w-6"
|
|
3301
|
+
})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
3302
|
+
/**
|
|
3303
|
+
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
3304
|
+
*
|
|
3305
|
+
* Features:
|
|
3306
|
+
* - Stepper buttons for increment/decrement
|
|
3307
|
+
* - Keyboard arrow up/down support
|
|
3308
|
+
* - Min/max value constraints
|
|
3309
|
+
* - Custom step values
|
|
3310
|
+
* - Decimal and integer support
|
|
3311
|
+
* - Full accessibility with ARIA attributes
|
|
3312
|
+
*
|
|
3313
|
+
* @example
|
|
3314
|
+
* ```tsx
|
|
3315
|
+
* <NumberInput
|
|
3316
|
+
* label="Quantity"
|
|
3317
|
+
* min={0}
|
|
3318
|
+
* max={100}
|
|
3319
|
+
* step={1}
|
|
3320
|
+
* value={value}
|
|
3321
|
+
* onChange={(newValue) => setValue(newValue)}
|
|
3322
|
+
* />
|
|
3323
|
+
* ```
|
|
3324
|
+
*/])), semantic$1.typography.small, function (_a) {
|
|
3325
|
+
var $isError = _a.$isError;
|
|
3326
|
+
return $isError ? semantic$1.color.text.error : semantic$1.color.text.subdued;
|
|
3327
|
+
});
|
|
3328
|
+
/**
|
|
3329
|
+
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
3330
|
+
*
|
|
3331
|
+
* Features:
|
|
3332
|
+
* - Stepper buttons for increment/decrement
|
|
3333
|
+
* - Keyboard arrow up/down support
|
|
3334
|
+
* - Min/max value constraints
|
|
3335
|
+
* - Custom step values
|
|
3336
|
+
* - Decimal and integer support
|
|
3337
|
+
* - Full accessibility with ARIA attributes
|
|
3338
|
+
*
|
|
3339
|
+
* @example
|
|
3340
|
+
* ```tsx
|
|
3341
|
+
* <NumberInput
|
|
3342
|
+
* label="Quantity"
|
|
3343
|
+
* min={0}
|
|
3344
|
+
* max={100}
|
|
3345
|
+
* step={1}
|
|
3346
|
+
* value={value}
|
|
3347
|
+
* onChange={(newValue) => setValue(newValue)}
|
|
3348
|
+
* />
|
|
3349
|
+
* ```
|
|
3350
|
+
*/
|
|
3351
|
+
var NumberInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
3352
|
+
var label = _a.label,
|
|
3353
|
+
helperText = _a.helperText,
|
|
3354
|
+
error = _a.error,
|
|
3355
|
+
_b = _a.required,
|
|
3356
|
+
required = _b === void 0 ? false : _b,
|
|
3357
|
+
_c = _a.disabled,
|
|
3358
|
+
disabled = _c === void 0 ? false : _c,
|
|
3359
|
+
min = _a.min,
|
|
3360
|
+
max = _a.max,
|
|
3361
|
+
_d = _a.step,
|
|
3362
|
+
step = _d === void 0 ? 1 : _d,
|
|
3363
|
+
value = _a.value,
|
|
3364
|
+
defaultValue = _a.defaultValue,
|
|
3365
|
+
onChange = _a.onChange,
|
|
3366
|
+
providedId = _a.id,
|
|
3367
|
+
testId = _a["data-testid"],
|
|
3368
|
+
placeholder = _a.placeholder,
|
|
3369
|
+
ariaLabel = _a["aria-label"],
|
|
3370
|
+
ariaDescribedBy = _a["aria-describedby"],
|
|
3371
|
+
rest = __rest(_a, ["label", "helperText", "error", "required", "disabled", "min", "max", "step", "value", "defaultValue", "onChange", "id", 'data-testid', "placeholder", 'aria-label', 'aria-describedby']);
|
|
3372
|
+
var generatedId = React.useId();
|
|
3373
|
+
var id = providedId || generatedId;
|
|
3374
|
+
var helperId = "".concat(id, "-helper");
|
|
3375
|
+
var errorId = "".concat(id, "-error");
|
|
3376
|
+
// Parse string value to number or empty string
|
|
3377
|
+
var parseValue = React.useCallback(function (val) {
|
|
3378
|
+
if (val === '' || val === '-') return '';
|
|
3379
|
+
var parsed = parseFloat(val);
|
|
3380
|
+
return isNaN(parsed) ? '' : parsed;
|
|
3381
|
+
}, []);
|
|
3382
|
+
// Format number to string for display
|
|
3383
|
+
var formatValue = React.useCallback(function (val) {
|
|
3384
|
+
return val === '' ? '' : String(val);
|
|
3385
|
+
}, []);
|
|
3386
|
+
// Handle increment
|
|
3387
|
+
var handleIncrement = React.useCallback(function () {
|
|
3388
|
+
if (disabled) return;
|
|
3389
|
+
var inputElement = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
3390
|
+
var currentValue = value !== undefined ? value : parseValue((inputElement === null || inputElement === void 0 ? void 0 : inputElement.value) || '');
|
|
3391
|
+
var numValue = currentValue === '' ? min !== undefined ? min : 0 : currentValue;
|
|
3392
|
+
var newValue = numValue + step;
|
|
3393
|
+
// Check max constraint
|
|
3394
|
+
if (max !== undefined && newValue > max) return;
|
|
3395
|
+
// Update input value directly for both controlled and uncontrolled
|
|
3396
|
+
if (inputElement) {
|
|
3397
|
+
inputElement.value = String(newValue);
|
|
3398
|
+
}
|
|
3399
|
+
// Create synthetic event
|
|
3400
|
+
var syntheticEvent = {
|
|
3401
|
+
target: inputElement || {
|
|
3402
|
+
value: String(newValue)
|
|
3403
|
+
},
|
|
3404
|
+
currentTarget: inputElement || {
|
|
3405
|
+
value: String(newValue)
|
|
3406
|
+
}
|
|
3407
|
+
};
|
|
3408
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValue, syntheticEvent);
|
|
3409
|
+
}, [disabled, value, min, max, step, onChange, parseValue, ref]);
|
|
3410
|
+
// Handle decrement
|
|
3411
|
+
var handleDecrement = React.useCallback(function () {
|
|
3412
|
+
if (disabled) return;
|
|
3413
|
+
var inputElement = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
3414
|
+
var currentValue = value !== undefined ? value : parseValue((inputElement === null || inputElement === void 0 ? void 0 : inputElement.value) || '');
|
|
3415
|
+
var numValue = currentValue === '' ? max !== undefined ? max : 0 : currentValue;
|
|
3416
|
+
var newValue = numValue - step;
|
|
3417
|
+
// Check min constraint
|
|
3418
|
+
if (min !== undefined && newValue < min) return;
|
|
3419
|
+
// Update input value directly for both controlled and uncontrolled
|
|
3420
|
+
if (inputElement) {
|
|
3421
|
+
inputElement.value = String(newValue);
|
|
3422
|
+
}
|
|
3423
|
+
// Create synthetic event
|
|
3424
|
+
var syntheticEvent = {
|
|
3425
|
+
target: inputElement || {
|
|
3426
|
+
value: String(newValue)
|
|
3427
|
+
},
|
|
3428
|
+
currentTarget: inputElement || {
|
|
3429
|
+
value: String(newValue)
|
|
3430
|
+
}
|
|
3431
|
+
};
|
|
3432
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValue, syntheticEvent);
|
|
3433
|
+
}, [disabled, value, min, max, step, onChange, parseValue, ref]);
|
|
3434
|
+
// Handle input change
|
|
3435
|
+
var handleChange = React.useCallback(function (e) {
|
|
3436
|
+
var inputValue = e.target.value;
|
|
3437
|
+
// Allow empty, negative sign, or valid number (including decimals)
|
|
3438
|
+
if (inputValue === '' || inputValue === '-' || /^-?\d*\.?\d*$/.test(inputValue)) {
|
|
3439
|
+
var parsedValue = parseValue(inputValue);
|
|
3440
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(parsedValue, e);
|
|
3441
|
+
} else {
|
|
3442
|
+
// Prevent invalid input by not updating
|
|
3443
|
+
e.preventDefault();
|
|
3444
|
+
e.target.value = formatValue(value !== undefined ? value : '');
|
|
3445
|
+
}
|
|
3446
|
+
}, [onChange, parseValue, value, formatValue]);
|
|
3447
|
+
// Handle keyboard navigation
|
|
3448
|
+
var handleKeyDown = React.useCallback(function (e) {
|
|
3449
|
+
if (e.key === 'ArrowUp') {
|
|
3450
|
+
e.preventDefault();
|
|
3451
|
+
handleIncrement();
|
|
3452
|
+
} else if (e.key === 'ArrowDown') {
|
|
3453
|
+
e.preventDefault();
|
|
3454
|
+
handleDecrement();
|
|
3455
|
+
}
|
|
3456
|
+
}, [handleIncrement, handleDecrement]);
|
|
3457
|
+
// Check if buttons should be disabled
|
|
3458
|
+
var isIncrementDisabled = disabled || max !== undefined && value !== '' && typeof value === 'number' && value >= max;
|
|
3459
|
+
var isDecrementDisabled = disabled || min !== undefined && value !== '' && typeof value === 'number' && value <= min;
|
|
3460
|
+
// Build aria-describedby
|
|
3461
|
+
var ariaDescribedByIds = [ariaDescribedBy, helperText ? helperId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined;
|
|
3462
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer$1, null, label && /*#__PURE__*/React.createElement(StyledLabel$1, {
|
|
3463
|
+
htmlFor: id,
|
|
3464
|
+
"data-disabled": disabled
|
|
3465
|
+
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$1, {
|
|
3466
|
+
"aria-label": "required"
|
|
3467
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper, null, /*#__PURE__*/React.createElement(StyledNumberInput, _extends({
|
|
3468
|
+
ref: ref,
|
|
3469
|
+
id: id,
|
|
3470
|
+
type: "text",
|
|
3471
|
+
inputMode: "decimal",
|
|
3472
|
+
value: value !== undefined ? formatValue(value) : undefined,
|
|
3473
|
+
defaultValue: defaultValue !== undefined ? formatValue(defaultValue) : undefined,
|
|
3474
|
+
onChange: handleChange,
|
|
3475
|
+
onKeyDown: handleKeyDown,
|
|
3476
|
+
disabled: disabled,
|
|
3477
|
+
required: required,
|
|
3478
|
+
placeholder: placeholder,
|
|
3479
|
+
$hasError: !!error,
|
|
3480
|
+
$disabled: disabled,
|
|
3481
|
+
"aria-label": ariaLabel || label,
|
|
3482
|
+
"aria-invalid": !!error,
|
|
3483
|
+
"aria-describedby": ariaDescribedByIds,
|
|
3484
|
+
"aria-required": required,
|
|
3485
|
+
"data-testid": testId,
|
|
3486
|
+
role: "spinbutton",
|
|
3487
|
+
"aria-valuemin": min,
|
|
3488
|
+
"aria-valuemax": max,
|
|
3489
|
+
"aria-valuenow": typeof value === 'number' ? value : undefined
|
|
3490
|
+
}, rest)), /*#__PURE__*/React.createElement(StyledStepperContainer, null, /*#__PURE__*/React.createElement(IconButton, {
|
|
3491
|
+
iconName: "caretUp",
|
|
3492
|
+
variant: "secondary",
|
|
3493
|
+
size: "small",
|
|
3494
|
+
onClick: handleIncrement,
|
|
3495
|
+
disabled: isIncrementDisabled,
|
|
3496
|
+
"aria-label": "Increment value",
|
|
3497
|
+
tabIndex: -1,
|
|
3498
|
+
type: "button"
|
|
3499
|
+
}), /*#__PURE__*/React.createElement(IconButton, {
|
|
3500
|
+
iconName: "caretDown",
|
|
3501
|
+
variant: "secondary",
|
|
3502
|
+
size: "small",
|
|
3503
|
+
onClick: handleDecrement,
|
|
3504
|
+
disabled: isDecrementDisabled,
|
|
3505
|
+
"aria-label": "Decrement value",
|
|
3506
|
+
tabIndex: -1,
|
|
3507
|
+
type: "button"
|
|
3508
|
+
}))), (helperText || error) && /*#__PURE__*/React.createElement(StyledHelperText$1, {
|
|
3509
|
+
id: error ? errorId : helperId,
|
|
3510
|
+
$isError: !!error,
|
|
3511
|
+
role: error ? 'alert' : undefined,
|
|
3512
|
+
"aria-live": error ? 'polite' : undefined
|
|
3513
|
+
}, error || helperText));
|
|
3514
|
+
});
|
|
3515
|
+
NumberInput.displayName = 'NumberInput';
|
|
3516
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
3517
|
+
|
|
3518
|
+
React.createElement;
|
|
3519
|
+
var PageTitleStyled = styled.div.withConfig({
|
|
3520
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3521
|
+
return !prop.startsWith('$');
|
|
3522
|
+
},
|
|
3523
|
+
displayName: "PageTitle__PageTitleStyled",
|
|
3524
|
+
componentId: "sc-16h256f-0"
|
|
3525
|
+
})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
|
|
3526
|
+
var $hasBackButton = _a.$hasBackButton;
|
|
3527
|
+
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
3528
|
+
});
|
|
3529
|
+
var PageTitle = function PageTitle(_a) {
|
|
3530
|
+
var title = _a.title,
|
|
3531
|
+
_b = _a.hasBackButton,
|
|
3532
|
+
hasBackButton = _b === void 0 ? false : _b,
|
|
3533
|
+
subtitle = _a.subtitle;
|
|
3534
|
+
return /*#__PURE__*/React.createElement(PageTitleStyled, {
|
|
3535
|
+
$hasBackButton: hasBackButton
|
|
3536
|
+
}, hasBackButton && /*#__PURE__*/React.createElement(IconButton, {
|
|
3537
|
+
iconName: "back",
|
|
3538
|
+
size: "large",
|
|
3539
|
+
variant: "naked",
|
|
3540
|
+
url: "/music",
|
|
3541
|
+
"aria-label": "Go back to music page"
|
|
3542
|
+
}), /*#__PURE__*/React.createElement(Stack, {
|
|
3543
|
+
direction: "column",
|
|
3544
|
+
gap: "md"
|
|
3545
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3546
|
+
variant: "h1"
|
|
3547
|
+
}, title), subtitle && /*#__PURE__*/React.createElement(Typography, {
|
|
3548
|
+
variant: "caption",
|
|
3549
|
+
color: "subdued"
|
|
3550
|
+
}, subtitle)));
|
|
3551
|
+
};
|
|
3552
|
+
var templateObject_1$2;
|
|
3295
3553
|
|
|
3296
3554
|
React.createElement;
|
|
3297
3555
|
var semantic = tokensData.semantic,
|
|
@@ -3618,6 +3876,7 @@ exports.GridCol = GridCol;
|
|
|
3618
3876
|
exports.Icon = Icon;
|
|
3619
3877
|
exports.IconButton = IconButton;
|
|
3620
3878
|
exports.LegacyChip = LegacyChip;
|
|
3879
|
+
exports.NumberInput = NumberInput;
|
|
3621
3880
|
exports.PageTitle = PageTitle;
|
|
3622
3881
|
exports.Picture = Picture;
|
|
3623
3882
|
exports.ProgressBar = ProgressBar;
|