@common-origin/design-system 1.12.1 → 1.14.0
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/Dropdown/Dropdown.d.ts +2 -0
- package/dist/components/molecules/PasswordField/PasswordField.d.ts +55 -0
- package/dist/components/molecules/PasswordField/index.d.ts +2 -0
- package/dist/components/molecules/Sheet/Sheet.d.ts +96 -0
- package/dist/components/molecules/Sheet/index.d.ts +2 -0
- package/dist/components/molecules/Slider/Slider.d.ts +102 -0
- package/dist/components/molecules/Slider/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +3 -0
- package/dist/index.esm.js +936 -180
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +938 -179
- package/dist/index.js.map +1 -1
- package/dist/styles/icons.json +8 -0
- package/dist/types/icons.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/molecules/ArtCard/ArtCard.d.ts +0 -12
- package/dist/components/molecules/ArtCard/index.d.ts +0 -1
- package/dist/components/molecules/DesignCard/DesignCard.d.ts +0 -13
- package/dist/components/molecules/DesignCard/index.d.ts +0 -1
- package/dist/components/molecules/ReleaseCard/ReleaseCard.d.ts +0 -9
- package/dist/components/molecules/ReleaseCard/index.d.ts +0 -1
package/dist/index.esm.js
CHANGED
|
@@ -100,7 +100,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
100
100
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
101
101
|
};
|
|
102
102
|
|
|
103
|
-
var base$
|
|
103
|
+
var base$6 = {
|
|
104
104
|
border: {
|
|
105
105
|
radius: {
|
|
106
106
|
"1": "0.125rem",
|
|
@@ -635,7 +635,7 @@ var component = {
|
|
|
635
635
|
},
|
|
636
636
|
$ref: "./component/index.json"
|
|
637
637
|
};
|
|
638
|
-
var semantic$
|
|
638
|
+
var semantic$7 = {
|
|
639
639
|
border: {
|
|
640
640
|
"default": "0.0625rem solid #e9ecef",
|
|
641
641
|
subtle: "0.0625rem solid #dee2e6",
|
|
@@ -772,9 +772,9 @@ var semantic$4 = {
|
|
|
772
772
|
$ref: "./semantic/index.json"
|
|
773
773
|
};
|
|
774
774
|
var tokensData = {
|
|
775
|
-
base: base$
|
|
775
|
+
base: base$6,
|
|
776
776
|
component: component,
|
|
777
|
-
semantic: semantic$
|
|
777
|
+
semantic: semantic$7
|
|
778
778
|
};
|
|
779
779
|
|
|
780
780
|
React.createElement;
|
|
@@ -784,7 +784,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
784
784
|
},
|
|
785
785
|
displayName: "Avatar__AvatarContainer",
|
|
786
786
|
componentId: "sc-ezn4ax-0"
|
|
787
|
-
})(templateObject_1$
|
|
787
|
+
})(templateObject_1$v || (templateObject_1$v = __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) {
|
|
788
788
|
var $size = _a.$size;
|
|
789
789
|
return tokensData.semantic.size.avatar[$size];
|
|
790
790
|
}, function (_a) {
|
|
@@ -797,14 +797,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
797
797
|
},
|
|
798
798
|
displayName: "Avatar__AvatarImage",
|
|
799
799
|
componentId: "sc-ezn4ax-1"
|
|
800
|
-
})(templateObject_2$
|
|
800
|
+
})(templateObject_2$j || (templateObject_2$j = __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);
|
|
801
801
|
var AvatarInitials = styled.span.withConfig({
|
|
802
802
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
803
803
|
return !prop.startsWith('$');
|
|
804
804
|
},
|
|
805
805
|
displayName: "Avatar__AvatarInitials",
|
|
806
806
|
componentId: "sc-ezn4ax-2"
|
|
807
|
-
})(templateObject_3$
|
|
807
|
+
})(templateObject_3$f || (templateObject_3$f = __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"
|
|
808
808
|
// Helper function to get initials from name
|
|
809
809
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
810
810
|
var $size = _a.$size;
|
|
@@ -867,30 +867,30 @@ var Avatar = function Avatar(_a) {
|
|
|
867
867
|
"aria-hidden": "true"
|
|
868
868
|
}, initials));
|
|
869
869
|
};
|
|
870
|
-
var templateObject_1$
|
|
870
|
+
var templateObject_1$v, templateObject_2$j, templateObject_3$f;
|
|
871
871
|
|
|
872
872
|
React.createElement;
|
|
873
873
|
var _a$5 = tokensData.semantic,
|
|
874
|
-
typography$
|
|
874
|
+
typography$2 = _a$5.typography,
|
|
875
875
|
color$4 = _a$5.color;
|
|
876
876
|
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
877
877
|
var styles = {
|
|
878
|
-
display: "font: ".concat(typography$
|
|
879
|
-
h1: "font: ".concat(typography$
|
|
880
|
-
h2: "font: ".concat(typography$
|
|
881
|
-
h3: "font: ".concat(typography$
|
|
882
|
-
h4: "font: ".concat(typography$
|
|
883
|
-
h5: "font: ".concat(typography$
|
|
884
|
-
h6: "font: ".concat(typography$
|
|
885
|
-
subtitle: "font: ".concat(typography$
|
|
886
|
-
body: "font: ".concat(typography$
|
|
887
|
-
small: "font: ".concat(typography$
|
|
888
|
-
overline: "font: ".concat(typography$
|
|
889
|
-
caption: "font: ".concat(typography$
|
|
890
|
-
button1: "font: ".concat(typography$
|
|
891
|
-
button2: "font: ".concat(typography$
|
|
892
|
-
button3: "font: ".concat(typography$
|
|
893
|
-
label: "font: ".concat(typography$
|
|
878
|
+
display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
879
|
+
h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
880
|
+
h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
881
|
+
h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
882
|
+
h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
883
|
+
h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
884
|
+
h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
885
|
+
subtitle: "font: ".concat(typography$2.subtitle, ";"),
|
|
886
|
+
body: "font: ".concat(typography$2.body, ";"),
|
|
887
|
+
small: "font: ".concat(typography$2.small, ";"),
|
|
888
|
+
overline: "font: ".concat(typography$2.overline, ";"),
|
|
889
|
+
caption: "font: ".concat(typography$2.caption, "; text-transform: uppercase;"),
|
|
890
|
+
button1: "font: ".concat(typography$2.button1, ";"),
|
|
891
|
+
button2: "font: ".concat(typography$2.button2, ";"),
|
|
892
|
+
button3: "font: ".concat(typography$2.button3, ";"),
|
|
893
|
+
label: "font: ".concat(typography$2.label, ";")
|
|
894
894
|
};
|
|
895
895
|
return styles[variant] || styles.body;
|
|
896
896
|
};
|
|
@@ -935,7 +935,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
935
935
|
},
|
|
936
936
|
displayName: "Typography__StyledTypography",
|
|
937
937
|
componentId: "sc-17mqo4k-0"
|
|
938
|
-
})(templateObject_1$
|
|
938
|
+
})(templateObject_1$u || (templateObject_1$u = __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"
|
|
939
939
|
/**
|
|
940
940
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
941
941
|
*
|
|
@@ -1002,23 +1002,23 @@ var Typography = function Typography(_a) {
|
|
|
1002
1002
|
"data-testid": dataTestId
|
|
1003
1003
|
}, children);
|
|
1004
1004
|
};
|
|
1005
|
-
var templateObject_1$
|
|
1005
|
+
var templateObject_1$u;
|
|
1006
1006
|
|
|
1007
1007
|
React.createElement;
|
|
1008
1008
|
var color$3 = tokensData.semantic.color;
|
|
1009
1009
|
tokensData.base.shadow;
|
|
1010
|
-
var scaleIn = keyframes(templateObject_1$
|
|
1010
|
+
var scaleIn = keyframes(templateObject_1$t || (templateObject_1$t = __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"])));
|
|
1011
1011
|
var BadgeWrapper = styled.span.withConfig({
|
|
1012
1012
|
displayName: "Badge__BadgeWrapper",
|
|
1013
1013
|
componentId: "sc-tjz4pp-0"
|
|
1014
|
-
})(templateObject_2$
|
|
1014
|
+
})(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
1015
1015
|
var BadgeIndicator = styled.span.withConfig({
|
|
1016
1016
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1017
1017
|
return !prop.startsWith('$');
|
|
1018
1018
|
},
|
|
1019
1019
|
displayName: "Badge__BadgeIndicator",
|
|
1020
1020
|
componentId: "sc-tjz4pp-1"
|
|
1021
|
-
})(templateObject_3$
|
|
1021
|
+
})(templateObject_3$e || (templateObject_3$e = __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) {
|
|
1022
1022
|
return props.$isVisible ? 'flex' : 'none';
|
|
1023
1023
|
}, function (props) {
|
|
1024
1024
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1043,7 +1043,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1043
1043
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
1044
1044
|
displayName: "Badge__ScreenReaderOnly",
|
|
1045
1045
|
componentId: "sc-tjz4pp-2"
|
|
1046
|
-
})(templateObject_4$
|
|
1046
|
+
})(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
1047
1047
|
var Badge = function Badge(_a) {
|
|
1048
1048
|
var children = _a.children,
|
|
1049
1049
|
_b = _a.count,
|
|
@@ -1074,7 +1074,7 @@ var Badge = function Badge(_a) {
|
|
|
1074
1074
|
color: "inverse"
|
|
1075
1075
|
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
|
|
1076
1076
|
};
|
|
1077
|
-
var templateObject_1$
|
|
1077
|
+
var templateObject_1$t, templateObject_2$i, templateObject_3$e, templateObject_4$c;
|
|
1078
1078
|
|
|
1079
1079
|
React.createElement;
|
|
1080
1080
|
var StyledBox = styled.div.withConfig({
|
|
@@ -1086,31 +1086,31 @@ var StyledBox = styled.div.withConfig({
|
|
|
1086
1086
|
})(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"
|
|
1087
1087
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1088
1088
|
])), function (props) {
|
|
1089
|
-
return props.$display && css(templateObject_1$
|
|
1089
|
+
return props.$display && css(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1090
1090
|
}, function (props) {
|
|
1091
|
-
return props.$flexDirection && css(templateObject_2$
|
|
1091
|
+
return props.$flexDirection && css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1092
1092
|
}, function (props) {
|
|
1093
|
-
return props.$justifyContent && css(templateObject_3$
|
|
1093
|
+
return props.$justifyContent && css(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1094
1094
|
}, function (props) {
|
|
1095
|
-
return props.$alignItems && css(templateObject_4$
|
|
1095
|
+
return props.$alignItems && css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1096
1096
|
}, function (props) {
|
|
1097
|
-
return props.$flexWrap && css(templateObject_5$
|
|
1097
|
+
return props.$flexWrap && css(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1098
1098
|
}, function (props) {
|
|
1099
|
-
return props.$gap && css(templateObject_6$
|
|
1099
|
+
return props.$gap && css(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1100
1100
|
}, function (props) {
|
|
1101
|
-
return props.$m && css(templateObject_7$
|
|
1101
|
+
return props.$m && css(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1102
1102
|
}, function (props) {
|
|
1103
|
-
return props.$mt && css(templateObject_8$
|
|
1103
|
+
return props.$mt && css(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1104
1104
|
}, function (props) {
|
|
1105
|
-
return props.$mr && css(templateObject_9$
|
|
1105
|
+
return props.$mr && css(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
|
|
1106
1106
|
}, function (props) {
|
|
1107
|
-
return props.$mb && css(templateObject_10$
|
|
1107
|
+
return props.$mb && css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
|
|
1108
1108
|
}, function (props) {
|
|
1109
|
-
return props.$ml && css(templateObject_11$
|
|
1109
|
+
return props.$ml && css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
|
|
1110
1110
|
}, function (props) {
|
|
1111
|
-
return props.$mx && css(templateObject_12$
|
|
1111
|
+
return props.$mx && css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n "], ["\n margin-left: ", ";\n margin-right: ", ";\n "])), tokensData.semantic.spacing.layout[props.$mx], tokensData.semantic.spacing.layout[props.$mx]);
|
|
1112
1112
|
}, function (props) {
|
|
1113
|
-
return props.$my && css(templateObject_13$
|
|
1113
|
+
return props.$my && css(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), tokensData.semantic.spacing.layout[props.$my], tokensData.semantic.spacing.layout[props.$my]);
|
|
1114
1114
|
}, function (props) {
|
|
1115
1115
|
return props.$p && css(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensData.semantic.spacing.layout[props.$p]);
|
|
1116
1116
|
}, function (props) {
|
|
@@ -1276,7 +1276,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1276
1276
|
}, rest), children);
|
|
1277
1277
|
};
|
|
1278
1278
|
var Box = BoxTransform;
|
|
1279
|
-
var templateObject_1$
|
|
1279
|
+
var templateObject_1$s, templateObject_2$h, templateObject_3$d, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$3, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, 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;
|
|
1280
1280
|
|
|
1281
1281
|
var add = {
|
|
1282
1282
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1378,6 +1378,14 @@ var userBox = {
|
|
|
1378
1378
|
path: "M12 6C14.2091 6 16 7.79086 16 10C16 12.2091 14.2091 14 12 14C9.79086 14 8 12.2091 8 10C8 7.79086 9.79086 6 12 6ZM12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8Z M14 2C17.7712 2 19.6566 2.0003 20.8281 3.17188C21.9997 4.34345 22 6.22876 22 10V14C22 17.7712 21.9997 19.6566 20.8281 20.8281C19.803 21.8533 18.2315 21.982 15.3281 21.998L14 22H10L8.67188 21.998C5.8719 21.9826 4.31033 21.8625 3.2832 20.9346L3.17188 20.8281C2.14675 19.803 2.01797 18.2315 2.00195 15.3281L2 14V10C2 6.34627 2 4.46248 3.06543 3.2832L3.17188 3.17188C4.34345 2.0003 6.22876 2 10 2H14ZM12 18C10.8577 18 9.76263 18.3153 8.88574 18.876C8.39459 19.1901 7.99492 19.5688 7.69043 19.9834C8.33459 19.9972 9.09233 20 10 20H14C14.9072 20 15.6646 19.9971 16.3086 19.9834C16.0041 19.5689 15.6052 19.19 15.1143 18.876C14.2374 18.3153 13.1423 18 12 18ZM10 4C8.05784 4 6.80197 4.00454 5.87695 4.12891C5.00986 4.24554 4.73816 4.43372 4.58594 4.58594C4.43372 4.73816 4.24554 5.00986 4.12891 5.87695C4.00454 6.80197 4 8.05784 4 10V14C4 15.9422 4.00454 17.198 4.12891 18.123C4.24554 18.9901 4.43372 19.2618 4.58594 19.4141C4.71234 19.5405 4.92163 19.6893 5.48535 19.8037C5.96679 18.7505 6.77822 17.8493 7.80859 17.1904C9.02742 16.4111 10.5007 16 12 16C13.4993 16 14.9726 16.4111 16.1914 17.1904C17.2217 17.8492 18.0322 18.7507 18.5137 19.8037C19.0781 19.6893 19.2876 19.5405 19.4141 19.4141C19.5663 19.2618 19.7545 18.9901 19.8711 18.123C19.9955 17.198 20 15.9422 20 14V10C20 8.05784 19.9955 6.80197 19.8711 5.87695C19.7545 5.00986 19.5663 4.73816 19.4141 4.58594C19.2618 4.43372 18.9901 4.24554 18.123 4.12891C17.198 4.00454 15.9422 4 14 4H10Z",
|
|
1379
1379
|
name: "userBox"
|
|
1380
1380
|
};
|
|
1381
|
+
var eye = {
|
|
1382
|
+
path: "M12 5C7.52166 5 3.73301 7.94288 2.45825 12C3.73301 16.0571 7.52166 19 12 19C16.4783 19 20.267 16.0571 21.5417 12C20.267 7.94288 16.4783 5 12 5ZM12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17ZM12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9Z",
|
|
1383
|
+
name: "eye"
|
|
1384
|
+
};
|
|
1385
|
+
var eyeSlash = {
|
|
1386
|
+
path: "M3.70711 2.29289C3.31658 1.90237 2.68342 1.90237 2.29289 2.29289C1.90237 2.68342 1.90237 3.31658 2.29289 3.70711L6.70206 8.11628C5.35737 9.20465 4.27035 10.5612 3.54474 12.0722C4.83034 15.7743 8.14313 18.5 12 18.5C13.6923 18.5 15.2882 18.0602 16.6843 17.2822L20.2929 20.8908C20.6834 21.2813 21.3166 21.2813 21.7071 20.8908C22.0976 20.5003 22.0976 19.867 21.7071 19.4765L3.70711 2.29289ZM15.2279 15.8258L13.3042 13.9021C12.9314 14.2749 12.4394 14.5294 11.8995 14.6183C11.3596 14.7071 10.8078 14.6253 10.3142 14.3835C9.82059 14.1417 9.40848 13.7503 9.13119 13.2593C8.8539 12.7683 8.72446 12.2005 8.75906 11.6276L6.92963 9.79821C6.23474 10.5508 5.66408 11.4232 5.24853 12.3768C6.38454 15.2245 8.99611 17.2 12 17.2C13.1941 17.2 14.3152 16.9113 15.2279 15.8258ZM10.1061 12.9747C10.0982 13.2082 10.1471 13.4402 10.2489 13.6505C10.3507 13.8609 10.5022 14.0431 10.6912 14.1821C10.8802 14.3211 11.101 14.4126 11.3345 14.4485C11.568 14.4844 11.807 14.4636 12.0304 14.3879L10.1061 12.9747ZM12 5.5C10.3077 5.5 8.71178 5.93983 7.31572 6.71784L8.52938 7.93149C9.62166 7.34729 10.8421 7.03 12 7.03C15.0039 7.03 17.6155 9.00549 18.7515 11.8532C18.4306 12.5937 17.9993 13.2778 17.4748 13.8854L18.5983 15.0089C19.3126 14.2222 19.8991 13.2953 20.3245 12.2778C19.03 8.57569 15.8569 5.5 12 5.5Z",
|
|
1387
|
+
name: "eyeSlash"
|
|
1388
|
+
};
|
|
1381
1389
|
var iconsData = {
|
|
1382
1390
|
add: add,
|
|
1383
1391
|
arrowDown: arrowDown,
|
|
@@ -1407,7 +1415,9 @@ var iconsData = {
|
|
|
1407
1415
|
star: star,
|
|
1408
1416
|
starFilled: starFilled,
|
|
1409
1417
|
table: table,
|
|
1410
|
-
userBox: userBox
|
|
1418
|
+
userBox: userBox,
|
|
1419
|
+
eye: eye,
|
|
1420
|
+
eyeSlash: eyeSlash
|
|
1411
1421
|
};
|
|
1412
1422
|
|
|
1413
1423
|
React.createElement;
|
|
@@ -1417,7 +1427,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1417
1427
|
},
|
|
1418
1428
|
displayName: "Icon__IconStyled",
|
|
1419
1429
|
componentId: "sc-1105czq-0"
|
|
1420
|
-
})(templateObject_1$
|
|
1430
|
+
})(templateObject_1$r || (templateObject_1$r = __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) {
|
|
1421
1431
|
var $size = _a.$size;
|
|
1422
1432
|
return tokensData.semantic.size.icon[$size];
|
|
1423
1433
|
}, function (_a) {
|
|
@@ -1481,13 +1491,13 @@ var Icon = function Icon(_a) {
|
|
|
1481
1491
|
d: iconData.path
|
|
1482
1492
|
})));
|
|
1483
1493
|
};
|
|
1484
|
-
var templateObject_1$
|
|
1494
|
+
var templateObject_1$r;
|
|
1485
1495
|
|
|
1486
1496
|
React.createElement;
|
|
1487
1497
|
var button = tokensData.component.button,
|
|
1488
|
-
semantic$
|
|
1498
|
+
semantic$6 = tokensData.semantic;
|
|
1489
1499
|
// Base styles shared between button and link
|
|
1490
|
-
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$
|
|
1500
|
+
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$6.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");
|
|
1491
1501
|
// Dynamic variant styles using component tokens
|
|
1492
1502
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1493
1503
|
var $variant = _a.$variant;
|
|
@@ -1513,14 +1523,14 @@ var StyledButton = styled.button.withConfig({
|
|
|
1513
1523
|
},
|
|
1514
1524
|
displayName: "Button__StyledButton",
|
|
1515
1525
|
componentId: "sc-1eiuum9-0"
|
|
1516
|
-
})(templateObject_1$
|
|
1526
|
+
})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1517
1527
|
var StyledLink = styled.a.withConfig({
|
|
1518
1528
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1519
1529
|
return !prop.startsWith('$');
|
|
1520
1530
|
},
|
|
1521
1531
|
displayName: "Button__StyledLink",
|
|
1522
1532
|
componentId: "sc-1eiuum9-1"
|
|
1523
|
-
})(templateObject_2$
|
|
1533
|
+
})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1524
1534
|
// Helper function to get icon size based on button size
|
|
1525
1535
|
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1526
1536
|
// Helper function to get icon size based on button size
|
|
@@ -1613,7 +1623,7 @@ var Button = function Button(_a) {
|
|
|
1613
1623
|
"data-testid": dataTestId
|
|
1614
1624
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1615
1625
|
};
|
|
1616
|
-
var templateObject_1$
|
|
1626
|
+
var templateObject_1$q, templateObject_2$g;
|
|
1617
1627
|
|
|
1618
1628
|
var chip = tokensData.component.chip;
|
|
1619
1629
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1674,14 +1684,14 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1674
1684
|
},
|
|
1675
1685
|
displayName: "ChipBase__BaseChipStyled",
|
|
1676
1686
|
componentId: "sc-moa6zc-0"
|
|
1677
|
-
})(templateObject_1$
|
|
1687
|
+
})(templateObject_1$p || (templateObject_1$p = __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"
|
|
1678
1688
|
// Icon container for selected indicator or leading icons
|
|
1679
1689
|
])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1680
1690
|
// Icon container for selected indicator or leading icons
|
|
1681
1691
|
var IconContainer = styled.span.withConfig({
|
|
1682
1692
|
displayName: "ChipBase__IconContainer",
|
|
1683
1693
|
componentId: "sc-moa6zc-1"
|
|
1684
|
-
})(templateObject_2$
|
|
1694
|
+
})(templateObject_2$f || (templateObject_2$f = __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"
|
|
1685
1695
|
// Close button for dismissible chips
|
|
1686
1696
|
])), tokensData.semantic.spacing.layout.sm);
|
|
1687
1697
|
// Close button for dismissible chips
|
|
@@ -1691,7 +1701,7 @@ var CloseButton = styled.button.withConfig({
|
|
|
1691
1701
|
},
|
|
1692
1702
|
displayName: "ChipBase__CloseButton",
|
|
1693
1703
|
componentId: "sc-moa6zc-2"
|
|
1694
|
-
})(templateObject_3$
|
|
1704
|
+
})(templateObject_3$c || (templateObject_3$c = __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"
|
|
1695
1705
|
// Wrapper component that applies styles via CSS custom properties
|
|
1696
1706
|
])), tokensData.semantic.spacing.layout.sm, function (props) {
|
|
1697
1707
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
@@ -1726,7 +1736,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1726
1736
|
style: __assign(__assign({}, cssProps), style)
|
|
1727
1737
|
}, htmlProps), children);
|
|
1728
1738
|
};
|
|
1729
|
-
var templateObject_1$
|
|
1739
|
+
var templateObject_1$p, templateObject_2$f, templateObject_3$c;
|
|
1730
1740
|
|
|
1731
1741
|
React.createElement;
|
|
1732
1742
|
/**
|
|
@@ -1970,32 +1980,32 @@ var spacing$3 = tokensData.semantic.spacing;
|
|
|
1970
1980
|
var StyledContainer = styled.div.withConfig({
|
|
1971
1981
|
displayName: "Container__StyledContainer",
|
|
1972
1982
|
componentId: "sc-17dbj6n-0"
|
|
1973
|
-
})(templateObject_1$
|
|
1983
|
+
})(templateObject_1$o || (templateObject_1$o = __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']);
|
|
1974
1984
|
var Container = function Container(_a) {
|
|
1975
1985
|
var children = _a.children,
|
|
1976
1986
|
props = __rest(_a, ["children"]);
|
|
1977
1987
|
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
1978
1988
|
};
|
|
1979
|
-
var templateObject_1$
|
|
1989
|
+
var templateObject_1$o;
|
|
1980
1990
|
|
|
1981
1991
|
React.createElement;
|
|
1982
|
-
var base$
|
|
1992
|
+
var base$5 = tokensData.base;
|
|
1983
1993
|
var PictureWrapper = styled.div.withConfig({
|
|
1984
1994
|
displayName: "Picture__PictureWrapper",
|
|
1985
1995
|
componentId: "sc-11d9tei-0"
|
|
1986
|
-
})(templateObject_1$
|
|
1996
|
+
})(templateObject_1$n || (templateObject_1$n = __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);
|
|
1987
1997
|
var ImageLink = styled.a.withConfig({
|
|
1988
1998
|
displayName: "Picture__ImageLink",
|
|
1989
1999
|
componentId: "sc-11d9tei-1"
|
|
1990
|
-
})(templateObject_2$
|
|
2000
|
+
})(templateObject_2$e || (templateObject_2$e = __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$5.duration.normal, base$5.easing.easeInOut);
|
|
1991
2001
|
var ImageButton = styled.button.withConfig({
|
|
1992
2002
|
displayName: "Picture__ImageButton",
|
|
1993
2003
|
componentId: "sc-11d9tei-2"
|
|
1994
|
-
})(templateObject_3$
|
|
2004
|
+
})(templateObject_3$b || (templateObject_3$b = __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$5.duration.normal, base$5.easing.easeInOut);
|
|
1995
2005
|
var StyledImage = styled.img.withConfig({
|
|
1996
2006
|
displayName: "Picture__StyledImage",
|
|
1997
2007
|
componentId: "sc-11d9tei-3"
|
|
1998
|
-
})(templateObject_4$
|
|
2008
|
+
})(templateObject_4$a || (templateObject_4$a = __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$5.border.radius[2]);
|
|
1999
2009
|
var Picture = function Picture(_a) {
|
|
2000
2010
|
var title = _a.title,
|
|
2001
2011
|
src = _a.src,
|
|
@@ -2022,16 +2032,16 @@ var Picture = function Picture(_a) {
|
|
|
2022
2032
|
"aria-label": "Read more about ".concat(title)
|
|
2023
2033
|
}, image) : image);
|
|
2024
2034
|
};
|
|
2025
|
-
var templateObject_1$
|
|
2035
|
+
var templateObject_1$n, templateObject_2$e, templateObject_3$b, templateObject_4$a;
|
|
2026
2036
|
|
|
2027
2037
|
React.createElement;
|
|
2028
2038
|
var _a$4 = tokensData.semantic,
|
|
2029
|
-
typography = _a$4.typography,
|
|
2039
|
+
typography$1 = _a$4.typography,
|
|
2030
2040
|
color$2 = _a$4.color;
|
|
2031
2041
|
var TimeStyled = styled.time.withConfig({
|
|
2032
2042
|
displayName: "DateFormatter__TimeStyled",
|
|
2033
2043
|
componentId: "sc-5464cc-0"
|
|
2034
|
-
})(templateObject_1$
|
|
2044
|
+
})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography$1.label, color$2.text.subdued);
|
|
2035
2045
|
var DateFormatter = function DateFormatter(_a) {
|
|
2036
2046
|
var dateString = _a.dateString,
|
|
2037
2047
|
_b = _a.formatString,
|
|
@@ -2043,7 +2053,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
2043
2053
|
"data-testid": dataTestId
|
|
2044
2054
|
}, format(date, formatString));
|
|
2045
2055
|
};
|
|
2046
|
-
var templateObject_1$
|
|
2056
|
+
var templateObject_1$m;
|
|
2047
2057
|
|
|
2048
2058
|
React.createElement;
|
|
2049
2059
|
var motion = tokensData.semantic.motion,
|
|
@@ -2054,7 +2064,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2054
2064
|
},
|
|
2055
2065
|
displayName: "IconButton__IconButtonStyled",
|
|
2056
2066
|
componentId: "sc-k8b14t-0"
|
|
2057
|
-
})(templateObject_1$
|
|
2067
|
+
})(templateObject_1$l || (templateObject_1$l = __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) {
|
|
2058
2068
|
var $variant = _a.$variant;
|
|
2059
2069
|
switch ($variant) {
|
|
2060
2070
|
case 'primary':
|
|
@@ -2165,7 +2175,7 @@ var IconButton = function IconButton(_a) {
|
|
|
2165
2175
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2166
2176
|
}));
|
|
2167
2177
|
};
|
|
2168
|
-
var templateObject_1$
|
|
2178
|
+
var templateObject_1$l;
|
|
2169
2179
|
|
|
2170
2180
|
React.createElement;
|
|
2171
2181
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -2174,10 +2184,10 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
2174
2184
|
},
|
|
2175
2185
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2176
2186
|
componentId: "sc-1nco33q-0"
|
|
2177
|
-
})(templateObject_3$
|
|
2178
|
-
return props.$variant === 'horizontal' && css(templateObject_1$
|
|
2187
|
+
})(templateObject_3$a || (templateObject_3$a = __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) {
|
|
2188
|
+
return props.$variant === 'horizontal' && css(templateObject_1$k || (templateObject_1$k = __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);
|
|
2179
2189
|
}, function (props) {
|
|
2180
|
-
return props.$variant === 'vertical' && css(templateObject_2$
|
|
2190
|
+
return props.$variant === 'vertical' && css(templateObject_2$d || (templateObject_2$d = __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);
|
|
2181
2191
|
});
|
|
2182
2192
|
var ProgressBarFill = styled.div.withConfig({
|
|
2183
2193
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2185,7 +2195,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2185
2195
|
},
|
|
2186
2196
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2187
2197
|
componentId: "sc-1nco33q-1"
|
|
2188
|
-
})(templateObject_7$
|
|
2198
|
+
})(templateObject_7$4 || (templateObject_7$4 = __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) {
|
|
2189
2199
|
var backgroundColor;
|
|
2190
2200
|
switch (props.$color) {
|
|
2191
2201
|
case 'success':
|
|
@@ -2199,11 +2209,11 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2199
2209
|
backgroundColor = tokensData.semantic.color.background.interactive;
|
|
2200
2210
|
break;
|
|
2201
2211
|
}
|
|
2202
|
-
return css(templateObject_4$
|
|
2212
|
+
return css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2203
2213
|
}, function (props) {
|
|
2204
|
-
return props.$variant === 'horizontal' && css(templateObject_5$
|
|
2214
|
+
return props.$variant === 'horizontal' && css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2205
2215
|
}, function (props) {
|
|
2206
|
-
return props.$variant === 'vertical' && css(templateObject_6$
|
|
2216
|
+
return props.$variant === 'vertical' && css(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2207
2217
|
});
|
|
2208
2218
|
var ProgressBar = function ProgressBar(_a) {
|
|
2209
2219
|
var value = _a.value,
|
|
@@ -2229,7 +2239,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2229
2239
|
$color: color
|
|
2230
2240
|
}));
|
|
2231
2241
|
};
|
|
2232
|
-
var templateObject_1$
|
|
2242
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$a, templateObject_4$9, templateObject_5$7, templateObject_6$6, templateObject_7$4;
|
|
2233
2243
|
|
|
2234
2244
|
React.createElement;
|
|
2235
2245
|
var StyledDivider = styled.div.withConfig({
|
|
@@ -2238,7 +2248,7 @@ var StyledDivider = styled.div.withConfig({
|
|
|
2238
2248
|
},
|
|
2239
2249
|
displayName: "Divider__StyledDivider",
|
|
2240
2250
|
componentId: "sc-1l0c8ja-0"
|
|
2241
|
-
})(templateObject_1$
|
|
2251
|
+
})(templateObject_1$j || (templateObject_1$j = __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"
|
|
2242
2252
|
/**
|
|
2243
2253
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2244
2254
|
*
|
|
@@ -2351,7 +2361,7 @@ var Divider = function Divider(_a) {
|
|
|
2351
2361
|
"aria-orientation": orientation
|
|
2352
2362
|
});
|
|
2353
2363
|
};
|
|
2354
|
-
var templateObject_1$
|
|
2364
|
+
var templateObject_1$j;
|
|
2355
2365
|
|
|
2356
2366
|
React.createElement;
|
|
2357
2367
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2360,7 +2370,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2360
2370
|
},
|
|
2361
2371
|
displayName: "Stack__StyledStack",
|
|
2362
2372
|
componentId: "sc-1ehkxgy-0"
|
|
2363
|
-
})(templateObject_1$
|
|
2373
|
+
})(templateObject_1$i || (templateObject_1$i = __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"
|
|
2364
2374
|
// Helper function to convert gap prop to CSS value
|
|
2365
2375
|
])));
|
|
2366
2376
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2398,17 +2408,17 @@ var Stack = function Stack(_a) {
|
|
|
2398
2408
|
"data-testid": dataTestId
|
|
2399
2409
|
}, children);
|
|
2400
2410
|
};
|
|
2401
|
-
var templateObject_1$
|
|
2411
|
+
var templateObject_1$i;
|
|
2402
2412
|
|
|
2403
2413
|
React.createElement;
|
|
2404
|
-
var semantic$
|
|
2414
|
+
var semantic$5 = tokensData.semantic;
|
|
2405
2415
|
var StyledTag = styled.span.withConfig({
|
|
2406
2416
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2407
2417
|
return !prop.startsWith('$');
|
|
2408
2418
|
},
|
|
2409
2419
|
displayName: "Tag__StyledTag",
|
|
2410
2420
|
componentId: "sc-lzfmti-0"
|
|
2411
|
-
})(templateObject_1$
|
|
2421
|
+
})(templateObject_1$h || (templateObject_1$h = __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"
|
|
2412
2422
|
/**
|
|
2413
2423
|
* Tag component for categorizing and labeling content
|
|
2414
2424
|
*
|
|
@@ -2418,33 +2428,33 @@ var StyledTag = styled.span.withConfig({
|
|
|
2418
2428
|
var $variant = _a.$variant;
|
|
2419
2429
|
switch ($variant) {
|
|
2420
2430
|
case 'interactive':
|
|
2421
|
-
return semantic$
|
|
2431
|
+
return semantic$5.color.background['interactive-subtle'];
|
|
2422
2432
|
case 'success':
|
|
2423
|
-
return semantic$
|
|
2433
|
+
return semantic$5.color.background['success-subtle'];
|
|
2424
2434
|
case 'warning':
|
|
2425
|
-
return semantic$
|
|
2435
|
+
return semantic$5.color.background['warning-subtle'];
|
|
2426
2436
|
case 'error':
|
|
2427
|
-
return semantic$
|
|
2437
|
+
return semantic$5.color.background['error-subtle'];
|
|
2428
2438
|
case 'emphasis':
|
|
2429
|
-
return semantic$
|
|
2439
|
+
return semantic$5.color.background.emphasis;
|
|
2430
2440
|
default:
|
|
2431
|
-
return semantic$
|
|
2441
|
+
return semantic$5.color.background.surface;
|
|
2432
2442
|
}
|
|
2433
2443
|
}, function (_a) {
|
|
2434
2444
|
var $variant = _a.$variant;
|
|
2435
2445
|
switch ($variant) {
|
|
2436
2446
|
case 'interactive':
|
|
2437
|
-
return semantic$
|
|
2447
|
+
return semantic$5.color.text.interactive;
|
|
2438
2448
|
case 'success':
|
|
2439
|
-
return semantic$
|
|
2449
|
+
return semantic$5.color.text.success;
|
|
2440
2450
|
case 'warning':
|
|
2441
|
-
return semantic$
|
|
2451
|
+
return semantic$5.color.text.warning;
|
|
2442
2452
|
case 'error':
|
|
2443
|
-
return semantic$
|
|
2453
|
+
return semantic$5.color.text.error;
|
|
2444
2454
|
case 'emphasis':
|
|
2445
|
-
return semantic$
|
|
2455
|
+
return semantic$5.color.text.inverse;
|
|
2446
2456
|
default:
|
|
2447
|
-
return semantic$
|
|
2457
|
+
return semantic$5.color.text["default"];
|
|
2448
2458
|
}
|
|
2449
2459
|
}, function (_a) {
|
|
2450
2460
|
var $variant = _a.$variant,
|
|
@@ -2452,17 +2462,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2452
2462
|
if (!$border) return 'none';
|
|
2453
2463
|
switch ($variant) {
|
|
2454
2464
|
case 'interactive':
|
|
2455
|
-
return "1px solid ".concat(semantic$
|
|
2465
|
+
return "1px solid ".concat(semantic$5.color.border.interactive);
|
|
2456
2466
|
case 'success':
|
|
2457
|
-
return "1px solid ".concat(semantic$
|
|
2467
|
+
return "1px solid ".concat(semantic$5.color.border.success);
|
|
2458
2468
|
case 'warning':
|
|
2459
|
-
return "1px solid ".concat(semantic$
|
|
2469
|
+
return "1px solid ".concat(semantic$5.color.border.warning);
|
|
2460
2470
|
case 'error':
|
|
2461
|
-
return "1px solid ".concat(semantic$
|
|
2471
|
+
return "1px solid ".concat(semantic$5.color.border.error);
|
|
2462
2472
|
case 'emphasis':
|
|
2463
|
-
return "1px solid ".concat(semantic$
|
|
2473
|
+
return "1px solid ".concat(semantic$5.color.background.emphasis);
|
|
2464
2474
|
default:
|
|
2465
|
-
return "1px solid ".concat(semantic$
|
|
2475
|
+
return "1px solid ".concat(semantic$5.color.border["default"]);
|
|
2466
2476
|
}
|
|
2467
2477
|
});
|
|
2468
2478
|
/**
|
|
@@ -2489,18 +2499,18 @@ var Tag = function Tag(_a) {
|
|
|
2489
2499
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
2490
2500
|
}, props), children);
|
|
2491
2501
|
};
|
|
2492
|
-
var templateObject_1$
|
|
2502
|
+
var templateObject_1$h;
|
|
2493
2503
|
|
|
2494
2504
|
React.createElement;
|
|
2495
2505
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
2496
2506
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
2497
2507
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
2498
2508
|
componentId: "sc-7ouzg5-0"
|
|
2499
|
-
})(templateObject_1$
|
|
2509
|
+
})(templateObject_1$g || (templateObject_1$g = __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');
|
|
2500
2510
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
2501
2511
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
2502
2512
|
componentId: "sc-7ouzg5-1"
|
|
2503
|
-
})(templateObject_2$
|
|
2513
|
+
})(templateObject_2$c || (templateObject_2$c = __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"]);
|
|
2504
2514
|
var isInternalUrl = function isInternalUrl(url) {
|
|
2505
2515
|
return url.startsWith('/') && !url.startsWith('http');
|
|
2506
2516
|
};
|
|
@@ -2526,13 +2536,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
2526
2536
|
}, breadcrumb.label)));
|
|
2527
2537
|
}))));
|
|
2528
2538
|
};
|
|
2529
|
-
var templateObject_1$
|
|
2539
|
+
var templateObject_1$g, templateObject_2$c;
|
|
2530
2540
|
|
|
2531
2541
|
React.createElement;
|
|
2532
2542
|
var CardSmallStyled = styled.div.withConfig({
|
|
2533
2543
|
displayName: "CardSmall__CardSmallStyled",
|
|
2534
2544
|
componentId: "sc-jpcqvd-0"
|
|
2535
|
-
})(templateObject_1$
|
|
2545
|
+
})(templateObject_1$f || (templateObject_1$f = __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);
|
|
2536
2546
|
var CardSmall = function CardSmall(_a) {
|
|
2537
2547
|
var title = _a.title,
|
|
2538
2548
|
picture = _a.picture,
|
|
@@ -2569,14 +2579,14 @@ var CardSmall = function CardSmall(_a) {
|
|
|
2569
2579
|
color: "subdued"
|
|
2570
2580
|
}, meta))))));
|
|
2571
2581
|
};
|
|
2572
|
-
var templateObject_1$
|
|
2582
|
+
var templateObject_1$f;
|
|
2573
2583
|
|
|
2574
2584
|
React.createElement;
|
|
2575
2585
|
var border$3 = tokensData.base.border;
|
|
2576
2586
|
var CardLargeStyled = styled.div.withConfig({
|
|
2577
2587
|
displayName: "CardLarge__CardLargeStyled",
|
|
2578
2588
|
componentId: "sc-1rfgdzl-0"
|
|
2579
|
-
})(templateObject_1$
|
|
2589
|
+
})(templateObject_1$e || (templateObject_1$e = __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]);
|
|
2580
2590
|
var CardLarge = function CardLarge(_a) {
|
|
2581
2591
|
var title = _a.title,
|
|
2582
2592
|
excerpt = _a.excerpt,
|
|
@@ -2621,7 +2631,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
2621
2631
|
});
|
|
2622
2632
|
})))));
|
|
2623
2633
|
};
|
|
2624
|
-
var templateObject_1$
|
|
2634
|
+
var templateObject_1$e;
|
|
2625
2635
|
|
|
2626
2636
|
/**
|
|
2627
2637
|
* Hidden native checkbox input for accessibility
|
|
@@ -2633,7 +2643,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
2633
2643
|
},
|
|
2634
2644
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
2635
2645
|
componentId: "sc-1ddpctx-0"
|
|
2636
|
-
})(templateObject_1$
|
|
2646
|
+
})(templateObject_1$d || (templateObject_1$d = __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"
|
|
2637
2647
|
/**
|
|
2638
2648
|
* Custom checkbox visual component
|
|
2639
2649
|
* 24px × 24px for 8px grid alignment
|
|
@@ -2650,20 +2660,20 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2650
2660
|
},
|
|
2651
2661
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2652
2662
|
componentId: "sc-1ddpctx-1"
|
|
2653
|
-
})(templateObject_2$
|
|
2663
|
+
})(templateObject_2$b || (templateObject_2$b = __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"
|
|
2654
2664
|
/**
|
|
2655
2665
|
* Container for checkbox with proper spacing and alignment
|
|
2656
2666
|
* 48px min-height for touch target (8px grid aligned)
|
|
2657
2667
|
*/])), tokensData.component.input["default"].borderRadius, tokensData.component.input["default"].borderWidth, function (props) {
|
|
2658
|
-
return props.$checked || props.$indeterminate ? tokensData.semantic.color.background.
|
|
2668
|
+
return props.$checked || props.$indeterminate ? tokensData.semantic.color.background.inverse : tokensData.component.input["default"].backgroundColor;
|
|
2659
2669
|
}, function (props) {
|
|
2660
2670
|
if (props.$state === 'error') return tokensData.component.input.error.borderColor;
|
|
2661
|
-
if (props.$checked || props.$indeterminate) return tokensData.semantic.
|
|
2671
|
+
if (props.$checked || props.$indeterminate) return tokensData.semantic.border.strong;
|
|
2662
2672
|
return tokensData.component.input["default"].borderColor;
|
|
2663
2673
|
}, function (props) {
|
|
2664
2674
|
return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
|
|
2665
2675
|
}, HiddenCheckboxInput, function (props) {
|
|
2666
|
-
return props.$state === 'error' ? tokensData.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensData.semantic.
|
|
2676
|
+
return props.$state === 'error' ? tokensData.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensData.semantic.border.strong : tokensData.component.input.hover.borderColor;
|
|
2667
2677
|
}, HiddenCheckboxInput, tokensData.component.input.focus.outline, tokensData.component.input.focus.outlineOffset, function (props) {
|
|
2668
2678
|
return props.$state === 'error' ? tokensData.component.input.error.focus.borderColor : tokensData.component.input.focus.borderColor;
|
|
2669
2679
|
}, function (props) {
|
|
@@ -2683,7 +2693,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
2683
2693
|
},
|
|
2684
2694
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
2685
2695
|
componentId: "sc-1ddpctx-2"
|
|
2686
|
-
})(templateObject_3$
|
|
2696
|
+
})(templateObject_3$9 || (templateObject_3$9 = __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"
|
|
2687
2697
|
/**
|
|
2688
2698
|
* Label text with proper typography
|
|
2689
2699
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -2700,20 +2710,20 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
2700
2710
|
},
|
|
2701
2711
|
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
2702
2712
|
componentId: "sc-1ddpctx-3"
|
|
2703
|
-
})(templateObject_4$
|
|
2713
|
+
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
2704
2714
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
2705
2715
|
});
|
|
2706
|
-
var templateObject_1$
|
|
2716
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$9, templateObject_4$8;
|
|
2707
2717
|
|
|
2708
2718
|
React.createElement;
|
|
2709
|
-
var StyledFieldContainer$
|
|
2719
|
+
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
2710
2720
|
displayName: "Checkbox__StyledFieldContainer",
|
|
2711
2721
|
componentId: "sc-vquz3v-0"
|
|
2712
|
-
})(templateObject_1$
|
|
2713
|
-
var StyledHelperText$
|
|
2722
|
+
})(templateObject_1$c || (templateObject_1$c = __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]);
|
|
2723
|
+
var StyledHelperText$4 = styled.span.withConfig({
|
|
2714
2724
|
displayName: "Checkbox__StyledHelperText",
|
|
2715
2725
|
componentId: "sc-vquz3v-1"
|
|
2716
|
-
})(templateObject_2$
|
|
2726
|
+
})(templateObject_2$a || (templateObject_2$a = __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"
|
|
2717
2727
|
/**
|
|
2718
2728
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2719
2729
|
*
|
|
@@ -2794,7 +2804,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
2794
2804
|
inputRef.current.indeterminate = indeterminate;
|
|
2795
2805
|
}
|
|
2796
2806
|
}, [indeterminate]);
|
|
2797
|
-
return /*#__PURE__*/React.createElement(StyledFieldContainer$
|
|
2807
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer$3, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, {
|
|
2798
2808
|
$disabled: disabled,
|
|
2799
2809
|
$labelPosition: labelPosition
|
|
2800
2810
|
}, /*#__PURE__*/React.createElement(HiddenCheckboxInput, _extends({
|
|
@@ -2816,9 +2826,9 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
2816
2826
|
"aria-hidden": "true"
|
|
2817
2827
|
}), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
|
|
2818
2828
|
$disabled: disabled
|
|
2819
|
-
}, label)), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$
|
|
2829
|
+
}, label)), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$4, {
|
|
2820
2830
|
id: helperTextId
|
|
2821
|
-
}, helperText), error && /*#__PURE__*/React.createElement(StyledHelperText$
|
|
2831
|
+
}, helperText), error && /*#__PURE__*/React.createElement(StyledHelperText$4, {
|
|
2822
2832
|
id: errorId,
|
|
2823
2833
|
$error: true,
|
|
2824
2834
|
role: "alert",
|
|
@@ -2826,13 +2836,13 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
2826
2836
|
}, error));
|
|
2827
2837
|
});
|
|
2828
2838
|
Checkbox.displayName = 'Checkbox';
|
|
2829
|
-
var templateObject_1$
|
|
2839
|
+
var templateObject_1$c, templateObject_2$a;
|
|
2830
2840
|
|
|
2831
2841
|
React.createElement;
|
|
2832
2842
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
2833
2843
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
2834
2844
|
componentId: "sc-ae049w-0"
|
|
2835
|
-
})(templateObject_1$
|
|
2845
|
+
})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"], ["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"])));
|
|
2836
2846
|
var ChipGroup = function ChipGroup(_a) {
|
|
2837
2847
|
var labels = _a.labels,
|
|
2838
2848
|
_b = _a.variant,
|
|
@@ -2851,7 +2861,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
2851
2861
|
});
|
|
2852
2862
|
})));
|
|
2853
2863
|
};
|
|
2854
|
-
var templateObject_1$
|
|
2864
|
+
var templateObject_1$b;
|
|
2855
2865
|
|
|
2856
2866
|
React.createElement;
|
|
2857
2867
|
var _a$2 = tokensData.semantic,
|
|
@@ -2861,15 +2871,15 @@ var _a$2 = tokensData.semantic,
|
|
|
2861
2871
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
2862
2872
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
2863
2873
|
componentId: "sc-1p1t0kp-0"
|
|
2864
|
-
})(templateObject_1$
|
|
2874
|
+
})(templateObject_1$a || (templateObject_1$a = __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);
|
|
2865
2875
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
2866
2876
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
2867
2877
|
componentId: "sc-1p1t0kp-1"
|
|
2868
|
-
})(templateObject_2$
|
|
2878
|
+
})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n width: 100%;\n"], ["\n position: relative;\n display: inline-block;\n width: 100%;\n"])));
|
|
2869
2879
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
2870
2880
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
2871
2881
|
componentId: "sc-1p1t0kp-2"
|
|
2872
|
-
})(templateObject_3$
|
|
2882
|
+
})(templateObject_3$8 || (templateObject_3$8 = __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);
|
|
2873
2883
|
var CopyButton = function CopyButton(_a) {
|
|
2874
2884
|
var text = _a.text,
|
|
2875
2885
|
onCopy = _a.onCopy;
|
|
@@ -2946,7 +2956,7 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
2946
2956
|
onCopy: onCopy
|
|
2947
2957
|
}));
|
|
2948
2958
|
};
|
|
2949
|
-
var templateObject_1$
|
|
2959
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$8;
|
|
2950
2960
|
|
|
2951
2961
|
React.createElement;
|
|
2952
2962
|
var _a$1 = tokensData.base,
|
|
@@ -2955,23 +2965,23 @@ var _a$1 = tokensData.base,
|
|
|
2955
2965
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
2956
2966
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
2957
2967
|
componentId: "sc-1mi4lso-0"
|
|
2958
|
-
})(templateObject_1$
|
|
2968
|
+
})(templateObject_1$9 || (templateObject_1$9 = __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]);
|
|
2959
2969
|
var ImageWrapper = styled.div.withConfig({
|
|
2960
2970
|
displayName: "FeatureBlock__ImageWrapper",
|
|
2961
2971
|
componentId: "sc-1mi4lso-1"
|
|
2962
|
-
})(templateObject_2$
|
|
2972
|
+
})(templateObject_2$8 || (templateObject_2$8 = __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);
|
|
2963
2973
|
var ContentSection = styled.div.withConfig({
|
|
2964
2974
|
displayName: "FeatureBlock__ContentSection",
|
|
2965
2975
|
componentId: "sc-1mi4lso-2"
|
|
2966
|
-
})(templateObject_3$
|
|
2976
|
+
})(templateObject_3$7 || (templateObject_3$7 = __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]);
|
|
2967
2977
|
var ButtonWrapper = styled.div.withConfig({
|
|
2968
2978
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
2969
2979
|
componentId: "sc-1mi4lso-3"
|
|
2970
|
-
})(templateObject_4$
|
|
2980
|
+
})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
2971
2981
|
var ContentWrapper = styled.div.withConfig({
|
|
2972
2982
|
displayName: "FeatureBlock__ContentWrapper",
|
|
2973
2983
|
componentId: "sc-1mi4lso-4"
|
|
2974
|
-
})(templateObject_5$
|
|
2984
|
+
})(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
2975
2985
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
2976
2986
|
var title = _a.title,
|
|
2977
2987
|
excerpt = _a.excerpt,
|
|
@@ -3011,7 +3021,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
3011
3021
|
onClick: onReadMore
|
|
3012
3022
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
3013
3023
|
};
|
|
3014
|
-
var templateObject_1$
|
|
3024
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$7, templateObject_5$6;
|
|
3015
3025
|
|
|
3016
3026
|
React.createElement;
|
|
3017
3027
|
var _a = tokensData.base,
|
|
@@ -3019,23 +3029,33 @@ var _a = tokensData.base,
|
|
|
3019
3029
|
shadow = _a.shadow,
|
|
3020
3030
|
zIndex = _a.zIndex,
|
|
3021
3031
|
_b = tokensData.semantic,
|
|
3022
|
-
color = _b.color
|
|
3023
|
-
_b.typography
|
|
3024
|
-
|
|
3032
|
+
color = _b.color,
|
|
3033
|
+
typography = _b.typography,
|
|
3034
|
+
border = _b.border,
|
|
3025
3035
|
input$1 = tokensData.component.input;
|
|
3026
3036
|
var DropdownContainer = styled.div.withConfig({
|
|
3027
3037
|
displayName: "Dropdown__DropdownContainer",
|
|
3028
3038
|
componentId: "sc-kz07c4-0"
|
|
3029
|
-
})(templateObject_1$
|
|
3039
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
3030
3040
|
var DropdownTrigger = styled.button.withConfig({
|
|
3031
3041
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3032
3042
|
return !prop.startsWith('$');
|
|
3033
3043
|
},
|
|
3034
3044
|
displayName: "Dropdown__DropdownTrigger",
|
|
3035
3045
|
componentId: "sc-kz07c4-1"
|
|
3036
|
-
})(templateObject_2$
|
|
3037
|
-
var $
|
|
3038
|
-
return $
|
|
3046
|
+
})(templateObject_2$7 || (templateObject_2$7 = __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, function (_a) {
|
|
3047
|
+
var $hasError = _a.$hasError;
|
|
3048
|
+
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
3049
|
+
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
3050
|
+
var $hasError = _a.$hasError;
|
|
3051
|
+
return $hasError ? input$1.error.hover.borderColor : input$1.hover.borderColor;
|
|
3052
|
+
}, function (_a) {
|
|
3053
|
+
var $hasError = _a.$hasError;
|
|
3054
|
+
return $hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor;
|
|
3055
|
+
}, 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) {
|
|
3056
|
+
var $isOpen = _a.$isOpen,
|
|
3057
|
+
$hasError = _a.$hasError;
|
|
3058
|
+
return $isOpen && "\n border-color: ".concat($hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor, ";\n ");
|
|
3039
3059
|
});
|
|
3040
3060
|
var DropdownIcon = styled.div.withConfig({
|
|
3041
3061
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3043,7 +3063,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
3043
3063
|
},
|
|
3044
3064
|
displayName: "Dropdown__DropdownIcon",
|
|
3045
3065
|
componentId: "sc-kz07c4-2"
|
|
3046
|
-
})(templateObject_3$
|
|
3066
|
+
})(templateObject_3$6 || (templateObject_3$6 = __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) {
|
|
3047
3067
|
var $isOpen = _a.$isOpen;
|
|
3048
3068
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
3049
3069
|
});
|
|
@@ -3053,7 +3073,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
3053
3073
|
},
|
|
3054
3074
|
displayName: "Dropdown__DropdownMenu",
|
|
3055
3075
|
componentId: "sc-kz07c4-3"
|
|
3056
|
-
})(templateObject_4$
|
|
3076
|
+
})(templateObject_4$6 || (templateObject_4$6 = __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) {
|
|
3057
3077
|
var $isOpen = _a.$isOpen;
|
|
3058
3078
|
return $isOpen ? 1 : 0;
|
|
3059
3079
|
}, function (_a) {
|
|
@@ -3069,13 +3089,20 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3069
3089
|
},
|
|
3070
3090
|
displayName: "Dropdown__DropdownOption",
|
|
3071
3091
|
componentId: "sc-kz07c4-4"
|
|
3072
|
-
})(templateObject_5$
|
|
3092
|
+
})(templateObject_5$5 || (templateObject_5$5 = __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) {
|
|
3073
3093
|
var $isSelected = _a.$isSelected,
|
|
3074
3094
|
$isFocused = _a.$isFocused;
|
|
3075
3095
|
if ($isFocused) return color.background.surface;
|
|
3076
3096
|
if ($isSelected) return color.background.surface;
|
|
3077
3097
|
return 'transparent';
|
|
3078
3098
|
}, input$1["default"].font, input$1["default"].textColor, color.background.surface, color.background.surface, border.subtle);
|
|
3099
|
+
var StyledHelperText$3 = styled.div.withConfig({
|
|
3100
|
+
displayName: "Dropdown__StyledHelperText",
|
|
3101
|
+
componentId: "sc-kz07c4-5"
|
|
3102
|
+
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography.caption, function (_a) {
|
|
3103
|
+
var $hasError = _a.$hasError;
|
|
3104
|
+
return $hasError ? color.text.error : color.text.subdued;
|
|
3105
|
+
}, spacing[2]);
|
|
3079
3106
|
var Dropdown = function Dropdown(_a) {
|
|
3080
3107
|
var options = _a.options,
|
|
3081
3108
|
value = _a.value,
|
|
@@ -3085,7 +3112,9 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3085
3112
|
_c = _a.disabled,
|
|
3086
3113
|
disabled = _c === void 0 ? false : _c,
|
|
3087
3114
|
className = _a.className,
|
|
3088
|
-
label = _a.label
|
|
3115
|
+
label = _a.label,
|
|
3116
|
+
helperText = _a.helperText,
|
|
3117
|
+
error = _a.error;
|
|
3089
3118
|
var _d = useState(false),
|
|
3090
3119
|
isOpen = _d[0],
|
|
3091
3120
|
setIsOpen = _d[1];
|
|
@@ -3098,6 +3127,10 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3098
3127
|
var selectedOption = options.find(function (option) {
|
|
3099
3128
|
return option.id === value;
|
|
3100
3129
|
});
|
|
3130
|
+
var hasError = Boolean(error);
|
|
3131
|
+
var errorId = error ? "".concat(dropdownId, "-error") : undefined;
|
|
3132
|
+
var helperId = helperText && !error ? "".concat(dropdownId, "-helper") : undefined;
|
|
3133
|
+
var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
|
|
3101
3134
|
// Close dropdown when clicking outside
|
|
3102
3135
|
useEffect(function () {
|
|
3103
3136
|
var handleClickOutside = function handleClickOutside(event) {
|
|
@@ -3197,10 +3230,13 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3197
3230
|
}, label)), /*#__PURE__*/React.createElement(DropdownTrigger, {
|
|
3198
3231
|
id: dropdownId,
|
|
3199
3232
|
$isOpen: isOpen,
|
|
3233
|
+
$hasError: hasError,
|
|
3200
3234
|
onClick: handleTriggerClick,
|
|
3201
3235
|
disabled: disabled,
|
|
3202
3236
|
"aria-expanded": isOpen,
|
|
3203
|
-
"aria-haspopup": "listbox"
|
|
3237
|
+
"aria-haspopup": "listbox",
|
|
3238
|
+
"aria-invalid": hasError,
|
|
3239
|
+
"aria-describedby": describedBy
|
|
3204
3240
|
}, /*#__PURE__*/React.createElement("span", null, selectedOption ? selectedOption.label : placeholder), /*#__PURE__*/React.createElement(DropdownIcon, {
|
|
3205
3241
|
$isOpen: isOpen
|
|
3206
3242
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -3221,9 +3257,16 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3221
3257
|
role: "option",
|
|
3222
3258
|
"aria-selected": option.id === value
|
|
3223
3259
|
}, option.label);
|
|
3224
|
-
}))
|
|
3260
|
+
})), error && /*#__PURE__*/React.createElement(StyledHelperText$3, {
|
|
3261
|
+
id: errorId,
|
|
3262
|
+
role: "alert",
|
|
3263
|
+
"aria-live": "polite",
|
|
3264
|
+
$hasError: true
|
|
3265
|
+
}, error), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$3, {
|
|
3266
|
+
id: helperId
|
|
3267
|
+
}, helperText));
|
|
3225
3268
|
};
|
|
3226
|
-
var templateObject_1$
|
|
3269
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$6, templateObject_4$6, templateObject_5$5, templateObject_6$5;
|
|
3227
3270
|
|
|
3228
3271
|
var input = tokensData.component.input;
|
|
3229
3272
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -3232,7 +3275,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
3232
3275
|
},
|
|
3233
3276
|
displayName: "InputBase__StyledInputBase",
|
|
3234
3277
|
componentId: "sc-1bpf4e8-0"
|
|
3235
|
-
})(templateObject_1$
|
|
3278
|
+
})(templateObject_1$7 || (templateObject_1$7 = __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"
|
|
3236
3279
|
/**
|
|
3237
3280
|
* Base styled textarea with shared styling
|
|
3238
3281
|
*/])), input["default"].font, function (_a) {
|
|
@@ -3263,40 +3306,40 @@ var StyledTextAreaBase = styled.textarea.withConfig({
|
|
|
3263
3306
|
},
|
|
3264
3307
|
displayName: "InputBase__StyledTextAreaBase",
|
|
3265
3308
|
componentId: "sc-1bpf4e8-1"
|
|
3266
|
-
})(templateObject_2$
|
|
3267
|
-
var templateObject_1$
|
|
3309
|
+
})(templateObject_2$6 || (templateObject_2$6 = __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);
|
|
3310
|
+
var templateObject_1$7, templateObject_2$6;
|
|
3268
3311
|
|
|
3269
3312
|
React.createElement;
|
|
3270
|
-
var semantic$
|
|
3271
|
-
base$
|
|
3272
|
-
var StyledFieldContainer$
|
|
3313
|
+
var semantic$4 = tokensData.semantic,
|
|
3314
|
+
base$4 = tokensData.base;
|
|
3315
|
+
var StyledFieldContainer$2 = styled.div.withConfig({
|
|
3273
3316
|
displayName: "NumberInput__StyledFieldContainer",
|
|
3274
3317
|
componentId: "sc-qotc3w-0"
|
|
3275
|
-
})(templateObject_1$
|
|
3276
|
-
var StyledLabel$
|
|
3318
|
+
})(templateObject_1$6 || (templateObject_1$6 = __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$4.spacing[2]);
|
|
3319
|
+
var StyledLabel$3 = styled.label.withConfig({
|
|
3277
3320
|
displayName: "NumberInput__StyledLabel",
|
|
3278
3321
|
componentId: "sc-qotc3w-1"
|
|
3279
|
-
})(templateObject_2$
|
|
3280
|
-
var StyledRequiredIndicator$
|
|
3322
|
+
})(templateObject_2$5 || (templateObject_2$5 = __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$4.spacing[1], semantic$4.typography.label, semantic$4.color.text["default"], semantic$4.color.text.disabled);
|
|
3323
|
+
var StyledRequiredIndicator$2 = styled.span.withConfig({
|
|
3281
3324
|
displayName: "NumberInput__StyledRequiredIndicator",
|
|
3282
3325
|
componentId: "sc-qotc3w-2"
|
|
3283
|
-
})(templateObject_3$
|
|
3284
|
-
var StyledInputWrapper = styled.div.withConfig({
|
|
3326
|
+
})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$4.color.text.error, base$4.fontWeight[5]);
|
|
3327
|
+
var StyledInputWrapper$1 = styled.div.withConfig({
|
|
3285
3328
|
displayName: "NumberInput__StyledInputWrapper",
|
|
3286
3329
|
componentId: "sc-qotc3w-3"
|
|
3287
|
-
})(templateObject_4$
|
|
3330
|
+
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n"])));
|
|
3288
3331
|
var StyledNumberInput = styled(StyledInputBase).withConfig({
|
|
3289
3332
|
displayName: "NumberInput__StyledNumberInput",
|
|
3290
3333
|
componentId: "sc-qotc3w-4"
|
|
3291
|
-
})(templateObject_5$
|
|
3334
|
+
})(templateObject_5$4 || (templateObject_5$4 = __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$4.spacing[10]);
|
|
3292
3335
|
var StyledStepperContainer = styled.div.withConfig({
|
|
3293
3336
|
displayName: "NumberInput__StyledStepperContainer",
|
|
3294
3337
|
componentId: "sc-qotc3w-5"
|
|
3295
|
-
})(templateObject_6$
|
|
3296
|
-
var StyledHelperText$
|
|
3338
|
+
})(templateObject_6$4 || (templateObject_6$4 = __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$4.spacing[2], base$4.spacing[2]);
|
|
3339
|
+
var StyledHelperText$2 = styled.div.withConfig({
|
|
3297
3340
|
displayName: "NumberInput__StyledHelperText",
|
|
3298
3341
|
componentId: "sc-qotc3w-6"
|
|
3299
|
-
})(templateObject_7$
|
|
3342
|
+
})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
3300
3343
|
/**
|
|
3301
3344
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
3302
3345
|
*
|
|
@@ -3319,9 +3362,9 @@ var StyledHelperText$1 = styled.div.withConfig({
|
|
|
3319
3362
|
* onChange={(newValue) => setValue(newValue)}
|
|
3320
3363
|
* />
|
|
3321
3364
|
* ```
|
|
3322
|
-
*/])), semantic$
|
|
3365
|
+
*/])), semantic$4.typography.small, function (_a) {
|
|
3323
3366
|
var $isError = _a.$isError;
|
|
3324
|
-
return $isError ? semantic$
|
|
3367
|
+
return $isError ? semantic$4.color.text.error : semantic$4.color.text.subdued;
|
|
3325
3368
|
});
|
|
3326
3369
|
/**
|
|
3327
3370
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
@@ -3457,12 +3500,12 @@ var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
3457
3500
|
var isDecrementDisabled = disabled || min !== undefined && value !== '' && typeof value === 'number' && value <= min;
|
|
3458
3501
|
// Build aria-describedby
|
|
3459
3502
|
var ariaDescribedByIds = [ariaDescribedBy, helperText ? helperId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined;
|
|
3460
|
-
return /*#__PURE__*/React.createElement(StyledFieldContainer$
|
|
3503
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer$2, null, label && /*#__PURE__*/React.createElement(StyledLabel$3, {
|
|
3461
3504
|
htmlFor: id,
|
|
3462
3505
|
"data-disabled": disabled
|
|
3463
|
-
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$
|
|
3506
|
+
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$2, {
|
|
3464
3507
|
"aria-label": "required"
|
|
3465
|
-
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper, null, /*#__PURE__*/React.createElement(StyledNumberInput, _extends({
|
|
3508
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$1, null, /*#__PURE__*/React.createElement(StyledNumberInput, _extends({
|
|
3466
3509
|
ref: ref,
|
|
3467
3510
|
id: id,
|
|
3468
3511
|
type: "text",
|
|
@@ -3503,7 +3546,7 @@ var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
3503
3546
|
"aria-label": "Decrement value",
|
|
3504
3547
|
tabIndex: -1,
|
|
3505
3548
|
type: "button"
|
|
3506
|
-
}))), (helperText || error) && /*#__PURE__*/React.createElement(StyledHelperText$
|
|
3549
|
+
}))), (helperText || error) && /*#__PURE__*/React.createElement(StyledHelperText$2, {
|
|
3507
3550
|
id: error ? errorId : helperId,
|
|
3508
3551
|
$isError: !!error,
|
|
3509
3552
|
role: error ? 'alert' : undefined,
|
|
@@ -3511,7 +3554,7 @@ var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
3511
3554
|
}, error || helperText));
|
|
3512
3555
|
});
|
|
3513
3556
|
NumberInput.displayName = 'NumberInput';
|
|
3514
|
-
var templateObject_1$
|
|
3557
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$5, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$3;
|
|
3515
3558
|
|
|
3516
3559
|
React.createElement;
|
|
3517
3560
|
var PageTitleStyled = styled.div.withConfig({
|
|
@@ -3520,7 +3563,7 @@ var PageTitleStyled = styled.div.withConfig({
|
|
|
3520
3563
|
},
|
|
3521
3564
|
displayName: "PageTitle__PageTitleStyled",
|
|
3522
3565
|
componentId: "sc-16h256f-0"
|
|
3523
|
-
})(templateObject_1$
|
|
3566
|
+
})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
|
|
3524
3567
|
var $hasBackButton = _a.$hasBackButton;
|
|
3525
3568
|
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
3526
3569
|
});
|
|
@@ -3547,7 +3590,720 @@ var PageTitle = function PageTitle(_a) {
|
|
|
3547
3590
|
color: "subdued"
|
|
3548
3591
|
}, subtitle)));
|
|
3549
3592
|
};
|
|
3550
|
-
var templateObject_1$
|
|
3593
|
+
var templateObject_1$5;
|
|
3594
|
+
|
|
3595
|
+
React.createElement;
|
|
3596
|
+
var semantic$3 = tokensData.semantic,
|
|
3597
|
+
base$3 = tokensData.base;
|
|
3598
|
+
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
3599
|
+
displayName: "PasswordField__StyledFieldContainer",
|
|
3600
|
+
componentId: "sc-1p15zk0-0"
|
|
3601
|
+
})(templateObject_1$4 || (templateObject_1$4 = __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$3.spacing[2]);
|
|
3602
|
+
var StyledLabel$2 = styled.label.withConfig({
|
|
3603
|
+
displayName: "PasswordField__StyledLabel",
|
|
3604
|
+
componentId: "sc-1p15zk0-1"
|
|
3605
|
+
})(templateObject_2$4 || (templateObject_2$4 = __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$3.spacing[1], semantic$3.typography.label, semantic$3.color.text["default"], semantic$3.color.text.disabled);
|
|
3606
|
+
var StyledRequiredIndicator$1 = styled.span.withConfig({
|
|
3607
|
+
displayName: "PasswordField__StyledRequiredIndicator",
|
|
3608
|
+
componentId: "sc-1p15zk0-2"
|
|
3609
|
+
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$3.color.text.error, base$3.fontWeight[5]);
|
|
3610
|
+
var StyledHelperText$1 = styled.div.withConfig({
|
|
3611
|
+
displayName: "PasswordField__StyledHelperText",
|
|
3612
|
+
componentId: "sc-1p15zk0-3"
|
|
3613
|
+
})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), semantic$3.typography.caption, function (_a) {
|
|
3614
|
+
var $hasError = _a.$hasError;
|
|
3615
|
+
return $hasError ? semantic$3.color.text.error : semantic$3.color.text.subdued;
|
|
3616
|
+
});
|
|
3617
|
+
var StyledInputWrapper = styled.div.withConfig({
|
|
3618
|
+
displayName: "PasswordField__StyledInputWrapper",
|
|
3619
|
+
componentId: "sc-1p15zk0-4"
|
|
3620
|
+
})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
3621
|
+
var StyledToggleButton = styled.div.withConfig({
|
|
3622
|
+
displayName: "PasswordField__StyledToggleButton",
|
|
3623
|
+
componentId: "sc-1p15zk0-5"
|
|
3624
|
+
})(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n"], ["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n"
|
|
3625
|
+
/**
|
|
3626
|
+
* PasswordField component for secure password input with visibility toggle
|
|
3627
|
+
*
|
|
3628
|
+
* @example
|
|
3629
|
+
* ```tsx
|
|
3630
|
+
* <PasswordField
|
|
3631
|
+
* label="Password"
|
|
3632
|
+
* helperText="Must be at least 8 characters"
|
|
3633
|
+
* required
|
|
3634
|
+
* />
|
|
3635
|
+
* ```
|
|
3636
|
+
*/])), base$3.spacing[2]);
|
|
3637
|
+
/**
|
|
3638
|
+
* PasswordField component for secure password input with visibility toggle
|
|
3639
|
+
*
|
|
3640
|
+
* @example
|
|
3641
|
+
* ```tsx
|
|
3642
|
+
* <PasswordField
|
|
3643
|
+
* label="Password"
|
|
3644
|
+
* helperText="Must be at least 8 characters"
|
|
3645
|
+
* required
|
|
3646
|
+
* />
|
|
3647
|
+
* ```
|
|
3648
|
+
*/
|
|
3649
|
+
var PasswordField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
3650
|
+
var label = _a.label,
|
|
3651
|
+
helperText = _a.helperText,
|
|
3652
|
+
error = _a.error,
|
|
3653
|
+
_b = _a.required,
|
|
3654
|
+
required = _b === void 0 ? false : _b,
|
|
3655
|
+
_c = _a.disabled,
|
|
3656
|
+
disabled = _c === void 0 ? false : _c,
|
|
3657
|
+
providedId = _a.id,
|
|
3658
|
+
dataTestId = _a["data-testid"],
|
|
3659
|
+
_d = _a.showToggle,
|
|
3660
|
+
showToggle = _d === void 0 ? true : _d,
|
|
3661
|
+
inputProps = __rest(_a, ["label", "helperText", "error", "required", "disabled", "id", 'data-testid', "showToggle"]);
|
|
3662
|
+
// Generate unique ID if not provided
|
|
3663
|
+
var generatedId = useId();
|
|
3664
|
+
var id = providedId || generatedId;
|
|
3665
|
+
// Password visibility state
|
|
3666
|
+
var _e = useState(false),
|
|
3667
|
+
showPassword = _e[0],
|
|
3668
|
+
setShowPassword = _e[1];
|
|
3669
|
+
// IDs for ARIA relationships
|
|
3670
|
+
var errorId = error ? "".concat(id, "-error") : undefined;
|
|
3671
|
+
var helperId = helperText && !error ? "".concat(id, "-helper") : undefined;
|
|
3672
|
+
var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
|
|
3673
|
+
var hasError = Boolean(error);
|
|
3674
|
+
var togglePasswordVisibility = function togglePasswordVisibility() {
|
|
3675
|
+
setShowPassword(!showPassword);
|
|
3676
|
+
};
|
|
3677
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer$1, null, label && /*#__PURE__*/React.createElement(StyledLabel$2, {
|
|
3678
|
+
htmlFor: id,
|
|
3679
|
+
"data-disabled": disabled
|
|
3680
|
+
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$1, {
|
|
3681
|
+
"aria-label": "required"
|
|
3682
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper, null, /*#__PURE__*/React.createElement(StyledInputBase, _extends({
|
|
3683
|
+
ref: ref,
|
|
3684
|
+
id: id,
|
|
3685
|
+
type: showPassword ? 'text' : 'password',
|
|
3686
|
+
disabled: disabled,
|
|
3687
|
+
required: required,
|
|
3688
|
+
"aria-required": required,
|
|
3689
|
+
"aria-invalid": hasError,
|
|
3690
|
+
"aria-describedby": describedBy,
|
|
3691
|
+
$hasError: hasError,
|
|
3692
|
+
$disabled: disabled,
|
|
3693
|
+
"data-testid": dataTestId,
|
|
3694
|
+
style: {
|
|
3695
|
+
paddingRight: showToggle ? '3rem' : undefined
|
|
3696
|
+
}
|
|
3697
|
+
}, inputProps)), showToggle && /*#__PURE__*/React.createElement(StyledToggleButton, null, /*#__PURE__*/React.createElement(IconButton, {
|
|
3698
|
+
variant: "naked",
|
|
3699
|
+
size: "small",
|
|
3700
|
+
iconName: showPassword ? 'eyeSlash' : 'eye',
|
|
3701
|
+
onClick: togglePasswordVisibility,
|
|
3702
|
+
disabled: disabled,
|
|
3703
|
+
"aria-label": showPassword ? 'Hide password' : 'Show password',
|
|
3704
|
+
"aria-pressed": showPassword,
|
|
3705
|
+
type: "button",
|
|
3706
|
+
tabIndex: -1
|
|
3707
|
+
}))), error && /*#__PURE__*/React.createElement(StyledHelperText$1, {
|
|
3708
|
+
id: errorId,
|
|
3709
|
+
role: "alert",
|
|
3710
|
+
"aria-live": "polite",
|
|
3711
|
+
$hasError: true
|
|
3712
|
+
}, error), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$1, {
|
|
3713
|
+
id: helperId
|
|
3714
|
+
}, helperText));
|
|
3715
|
+
});
|
|
3716
|
+
PasswordField.displayName = 'PasswordField';
|
|
3717
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$3, templateObject_6$3;
|
|
3718
|
+
|
|
3719
|
+
React.createElement;
|
|
3720
|
+
var semantic$2 = tokensData.semantic,
|
|
3721
|
+
base$2 = tokensData.base;
|
|
3722
|
+
// Fade in animation for overlay
|
|
3723
|
+
var fadeIn = keyframes(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"
|
|
3724
|
+
// Slide animations for each position
|
|
3725
|
+
])));
|
|
3726
|
+
// Slide animations for each position
|
|
3727
|
+
var slideInRight = keyframes(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n"], ["\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n"])));
|
|
3728
|
+
var slideInLeft = keyframes(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n"], ["\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n"])));
|
|
3729
|
+
var slideInTop = keyframes(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n"], ["\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n"])));
|
|
3730
|
+
var slideInBottom = keyframes(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"], ["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"])));
|
|
3731
|
+
var StyledOverlay = styled.div.withConfig({
|
|
3732
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3733
|
+
return !prop.startsWith('$');
|
|
3734
|
+
},
|
|
3735
|
+
displayName: "Sheet__StyledOverlay",
|
|
3736
|
+
componentId: "sc-8abisx-0"
|
|
3737
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n ", "\n display: ", ";\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n ", "\n display: ", ";\n"])), css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["animation: ", " 200ms ease-in-out;"], ["animation: ", " 200ms ease-in-out;"])), fadeIn), function (_a) {
|
|
3738
|
+
var $isOpen = _a.$isOpen;
|
|
3739
|
+
return $isOpen ? 'block' : 'none';
|
|
3740
|
+
});
|
|
3741
|
+
var StyledSheet = styled.div.withConfig({
|
|
3742
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3743
|
+
return !prop.startsWith('$');
|
|
3744
|
+
},
|
|
3745
|
+
displayName: "Sheet__StyledSheet",
|
|
3746
|
+
componentId: "sc-8abisx-1"
|
|
3747
|
+
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"], ["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), semantic$2.color.background["default"], base$2.shadow[4], function (_a) {
|
|
3748
|
+
var $position = _a.$position,
|
|
3749
|
+
$variant = _a.$variant,
|
|
3750
|
+
$width = _a.$width,
|
|
3751
|
+
$height = _a.$height;
|
|
3752
|
+
var isDrawer = $variant === 'drawer';
|
|
3753
|
+
var margin = isDrawer ? base$2.spacing[4] : '0';
|
|
3754
|
+
var borderRadius = isDrawer ? base$2.border.radius[3] : '0';
|
|
3755
|
+
switch ($position) {
|
|
3756
|
+
case 'right':
|
|
3757
|
+
return css(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n top: ", ";\n right: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: ", " 0 0 ", ";\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n right: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: ", " 0 0 ", ";\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $width, isDrawer ? "".concat(base$2.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInRight);
|
|
3758
|
+
case 'left':
|
|
3759
|
+
return css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: 0 ", " ", " 0;\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n left: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: 0 ", " ", " 0;\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $width, isDrawer ? "".concat(base$2.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInLeft);
|
|
3760
|
+
case 'top':
|
|
3761
|
+
return css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$2.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInTop);
|
|
3762
|
+
case 'bottom':
|
|
3763
|
+
return css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "], ["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$2.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInBottom);
|
|
3764
|
+
}
|
|
3765
|
+
}, base$2.spacing[2], semantic$2.color.background.subtle, semantic$2.color.border["default"], base$2.border.radius.circle, semantic$2.color.border.strong);
|
|
3766
|
+
var StyledSheetContent = styled.div.withConfig({
|
|
3767
|
+
displayName: "Sheet__StyledSheetContent",
|
|
3768
|
+
componentId: "sc-8abisx-2"
|
|
3769
|
+
})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n padding: ", ";\n min-height: 100%;\n"], ["\n padding: ", ";\n min-height: 100%;\n"
|
|
3770
|
+
/**
|
|
3771
|
+
* Sheet component for side panels and drawers
|
|
3772
|
+
*
|
|
3773
|
+
* Provides a sliding panel that appears from any edge of the screen.
|
|
3774
|
+
* Can be used for navigation menus, filters, forms, or additional content.
|
|
3775
|
+
*
|
|
3776
|
+
* @example
|
|
3777
|
+
* ```tsx
|
|
3778
|
+
* // Right-positioned sheet (default)
|
|
3779
|
+
* <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
|
|
3780
|
+
* <h2>Sheet Content</h2>
|
|
3781
|
+
* <p>Your content here</p>
|
|
3782
|
+
* </Sheet>
|
|
3783
|
+
*
|
|
3784
|
+
* // Drawer variant from bottom
|
|
3785
|
+
* <Sheet
|
|
3786
|
+
* isOpen={isOpen}
|
|
3787
|
+
* onClose={() => setIsOpen(false)}
|
|
3788
|
+
* position="bottom"
|
|
3789
|
+
* variant="drawer"
|
|
3790
|
+
* height="60vh"
|
|
3791
|
+
* >
|
|
3792
|
+
* <h2>Mobile Menu</h2>
|
|
3793
|
+
* </Sheet>
|
|
3794
|
+
* ```
|
|
3795
|
+
*/])), base$2.spacing[6]);
|
|
3796
|
+
/**
|
|
3797
|
+
* Sheet component for side panels and drawers
|
|
3798
|
+
*
|
|
3799
|
+
* Provides a sliding panel that appears from any edge of the screen.
|
|
3800
|
+
* Can be used for navigation menus, filters, forms, or additional content.
|
|
3801
|
+
*
|
|
3802
|
+
* @example
|
|
3803
|
+
* ```tsx
|
|
3804
|
+
* // Right-positioned sheet (default)
|
|
3805
|
+
* <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
|
|
3806
|
+
* <h2>Sheet Content</h2>
|
|
3807
|
+
* <p>Your content here</p>
|
|
3808
|
+
* </Sheet>
|
|
3809
|
+
*
|
|
3810
|
+
* // Drawer variant from bottom
|
|
3811
|
+
* <Sheet
|
|
3812
|
+
* isOpen={isOpen}
|
|
3813
|
+
* onClose={() => setIsOpen(false)}
|
|
3814
|
+
* position="bottom"
|
|
3815
|
+
* variant="drawer"
|
|
3816
|
+
* height="60vh"
|
|
3817
|
+
* >
|
|
3818
|
+
* <h2>Mobile Menu</h2>
|
|
3819
|
+
* </Sheet>
|
|
3820
|
+
* ```
|
|
3821
|
+
*/
|
|
3822
|
+
var Sheet = function Sheet(_a) {
|
|
3823
|
+
var isOpen = _a.isOpen,
|
|
3824
|
+
onClose = _a.onClose,
|
|
3825
|
+
_b = _a.position,
|
|
3826
|
+
position = _b === void 0 ? 'right' : _b,
|
|
3827
|
+
_c = _a.variant,
|
|
3828
|
+
variant = _c === void 0 ? 'sheet' : _c,
|
|
3829
|
+
_d = _a.width,
|
|
3830
|
+
width = _d === void 0 ? '400px' : _d,
|
|
3831
|
+
_e = _a.height,
|
|
3832
|
+
height = _e === void 0 ? '400px' : _e,
|
|
3833
|
+
children = _a.children,
|
|
3834
|
+
_f = _a.closeOnOverlayClick,
|
|
3835
|
+
closeOnOverlayClick = _f === void 0 ? true : _f,
|
|
3836
|
+
_g = _a.closeOnEscape,
|
|
3837
|
+
closeOnEscape = _g === void 0 ? true : _g,
|
|
3838
|
+
title = _a.title,
|
|
3839
|
+
dataTestId = _a["data-testid"],
|
|
3840
|
+
ariaLabel = _a["aria-label"],
|
|
3841
|
+
ariaDescribedBy = _a["aria-describedby"];
|
|
3842
|
+
var sheetRef = useRef(null);
|
|
3843
|
+
var previousFocusRef = useRef(null);
|
|
3844
|
+
// Focus management
|
|
3845
|
+
useEffect(function () {
|
|
3846
|
+
if (isOpen) {
|
|
3847
|
+
// Store previous focus
|
|
3848
|
+
previousFocusRef.current = document.activeElement;
|
|
3849
|
+
// Focus sheet
|
|
3850
|
+
setTimeout(function () {
|
|
3851
|
+
var _a;
|
|
3852
|
+
(_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
3853
|
+
}, 100); // Small delay to allow animation to start
|
|
3854
|
+
// Prevent body scroll
|
|
3855
|
+
document.body.style.overflow = 'hidden';
|
|
3856
|
+
} else {
|
|
3857
|
+
// Restore previous focus
|
|
3858
|
+
if (previousFocusRef.current) {
|
|
3859
|
+
previousFocusRef.current.focus();
|
|
3860
|
+
}
|
|
3861
|
+
// Restore body scroll
|
|
3862
|
+
document.body.style.overflow = '';
|
|
3863
|
+
}
|
|
3864
|
+
return function () {
|
|
3865
|
+
document.body.style.overflow = '';
|
|
3866
|
+
};
|
|
3867
|
+
}, [isOpen]);
|
|
3868
|
+
// Keyboard handling
|
|
3869
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
3870
|
+
var _a;
|
|
3871
|
+
if (closeOnEscape && event.key === 'Escape') {
|
|
3872
|
+
event.preventDefault();
|
|
3873
|
+
onClose();
|
|
3874
|
+
}
|
|
3875
|
+
// Focus trap
|
|
3876
|
+
if (event.key === 'Tab') {
|
|
3877
|
+
var focusableElements = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
3878
|
+
if (!focusableElements || focusableElements.length === 0) return;
|
|
3879
|
+
var firstElement = focusableElements[0];
|
|
3880
|
+
var lastElement = focusableElements[focusableElements.length - 1];
|
|
3881
|
+
if (event.shiftKey && document.activeElement === firstElement) {
|
|
3882
|
+
event.preventDefault();
|
|
3883
|
+
lastElement.focus();
|
|
3884
|
+
} else if (!event.shiftKey && document.activeElement === lastElement) {
|
|
3885
|
+
event.preventDefault();
|
|
3886
|
+
firstElement.focus();
|
|
3887
|
+
}
|
|
3888
|
+
}
|
|
3889
|
+
};
|
|
3890
|
+
// Overlay click handling
|
|
3891
|
+
var handleOverlayClick = function handleOverlayClick(event) {
|
|
3892
|
+
if (closeOnOverlayClick && event.target === event.currentTarget) {
|
|
3893
|
+
onClose();
|
|
3894
|
+
}
|
|
3895
|
+
};
|
|
3896
|
+
if (!isOpen) return null;
|
|
3897
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOverlay, {
|
|
3898
|
+
$isOpen: isOpen,
|
|
3899
|
+
onClick: handleOverlayClick,
|
|
3900
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'sheet-overlay'
|
|
3901
|
+
}), /*#__PURE__*/React.createElement(StyledSheet, {
|
|
3902
|
+
ref: sheetRef,
|
|
3903
|
+
role: "dialog",
|
|
3904
|
+
"aria-modal": "true",
|
|
3905
|
+
"aria-label": ariaLabel || title || 'Sheet dialog',
|
|
3906
|
+
"aria-describedby": ariaDescribedBy,
|
|
3907
|
+
tabIndex: -1,
|
|
3908
|
+
$position: position,
|
|
3909
|
+
$variant: variant,
|
|
3910
|
+
$width: width,
|
|
3911
|
+
$height: height,
|
|
3912
|
+
$isOpen: isOpen,
|
|
3913
|
+
onKeyDown: handleKeyDown,
|
|
3914
|
+
"data-testid": dataTestId
|
|
3915
|
+
}, /*#__PURE__*/React.createElement(StyledSheetContent, null, children)));
|
|
3916
|
+
};
|
|
3917
|
+
Sheet.displayName = 'Sheet';
|
|
3918
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
|
|
3919
|
+
|
|
3920
|
+
React.createElement;
|
|
3921
|
+
var semantic$1 = tokensData.semantic,
|
|
3922
|
+
base$1 = tokensData.base;
|
|
3923
|
+
var StyledSliderContainer = styled.div.withConfig({
|
|
3924
|
+
displayName: "Slider__StyledSliderContainer",
|
|
3925
|
+
componentId: "sc-6mh2d4-0"
|
|
3926
|
+
})(templateObject_1$2 || (templateObject_1$2 = __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]);
|
|
3927
|
+
var StyledLabel$1 = styled.label.withConfig({
|
|
3928
|
+
displayName: "Slider__StyledLabel",
|
|
3929
|
+
componentId: "sc-6mh2d4-1"
|
|
3930
|
+
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), semantic$1.typography.label, function (_a) {
|
|
3931
|
+
var $disabled = _a.$disabled;
|
|
3932
|
+
return $disabled ? semantic$1.color.text.disabled : semantic$1.color.text["default"];
|
|
3933
|
+
});
|
|
3934
|
+
var StyledSliderTrackContainer = styled.div.withConfig({
|
|
3935
|
+
displayName: "Slider__StyledSliderTrackContainer",
|
|
3936
|
+
componentId: "sc-6mh2d4-2"
|
|
3937
|
+
})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"])), base$1.spacing[10]);
|
|
3938
|
+
var StyledTrack = styled.div.withConfig({
|
|
3939
|
+
displayName: "Slider__StyledTrack",
|
|
3940
|
+
componentId: "sc-6mh2d4-3"
|
|
3941
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n cursor: ", ";\n"], ["\n position: relative;\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n cursor: ", ";\n"])), base$1.spacing[1], function (_a) {
|
|
3942
|
+
var $disabled = _a.$disabled;
|
|
3943
|
+
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.border["default"];
|
|
3944
|
+
}, base$1.border.radius.circle, function (_a) {
|
|
3945
|
+
var $disabled = _a.$disabled;
|
|
3946
|
+
return $disabled ? 'not-allowed' : 'pointer';
|
|
3947
|
+
});
|
|
3948
|
+
var StyledTrackFill = styled.div.withConfig({
|
|
3949
|
+
displayName: "Slider__StyledTrackFill",
|
|
3950
|
+
componentId: "sc-6mh2d4-4"
|
|
3951
|
+
})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"], ["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"])), function (_a) {
|
|
3952
|
+
var $disabled = _a.$disabled;
|
|
3953
|
+
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.interactive;
|
|
3954
|
+
}, base$1.border.radius.circle);
|
|
3955
|
+
var StyledThumb = styled.div.withConfig({
|
|
3956
|
+
displayName: "Slider__StyledThumb",
|
|
3957
|
+
componentId: "sc-6mh2d4-5"
|
|
3958
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"], ["\n position: absolute;\n width: ", ";\n height: ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"])), base$1.spacing[5], base$1.spacing[5], function (_a) {
|
|
3959
|
+
var $disabled = _a.$disabled;
|
|
3960
|
+
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
|
|
3961
|
+
}, base$1.border.width[2], function (_a) {
|
|
3962
|
+
var $disabled = _a.$disabled;
|
|
3963
|
+
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.interactive;
|
|
3964
|
+
}, base$1.border.radius.circle, function (_a) {
|
|
3965
|
+
var $disabled = _a.$disabled;
|
|
3966
|
+
return $disabled ? 'not-allowed' : 'grab';
|
|
3967
|
+
}, semantic$1.motion.transition.fast, base$1.shadow[2], base$1.shadow[3], base$1.border.width[2], semantic$1.color.border.interactive, base$1.spacing[1], function (_a) {
|
|
3968
|
+
var $active = _a.$active;
|
|
3969
|
+
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(base$1.shadow[4], ";\n ");
|
|
3970
|
+
});
|
|
3971
|
+
var StyledValueLabel = styled.div.withConfig({
|
|
3972
|
+
displayName: "Slider__StyledValueLabel",
|
|
3973
|
+
componentId: "sc-6mh2d4-6"
|
|
3974
|
+
})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n position: absolute;\n top: -", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"], ["\n position: absolute;\n top: -", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"])), base$1.spacing[8], base$1.spacing[1], base$1.spacing[2], semantic$1.color.background.emphasis, semantic$1.color.text.inverse, semantic$1.typography.caption, base$1.border.radius[2], function (_a) {
|
|
3975
|
+
var $disabled = _a.$disabled;
|
|
3976
|
+
return $disabled ? base$1.opacity[50] : base$1.opacity[100];
|
|
3977
|
+
}, base$1.spacing[1], base$1.spacing[1], base$1.spacing[1], semantic$1.color.background.emphasis);
|
|
3978
|
+
var StyledMinMaxLabels = styled.div.withConfig({
|
|
3979
|
+
displayName: "Slider__StyledMinMaxLabels",
|
|
3980
|
+
componentId: "sc-6mh2d4-7"
|
|
3981
|
+
})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"
|
|
3982
|
+
/**
|
|
3983
|
+
* Slider component for single value or range selection
|
|
3984
|
+
*
|
|
3985
|
+
* @example
|
|
3986
|
+
* ```tsx
|
|
3987
|
+
* // Single value slider
|
|
3988
|
+
* <Slider
|
|
3989
|
+
* label="Volume"
|
|
3990
|
+
* min={0}
|
|
3991
|
+
* max={100}
|
|
3992
|
+
* value={50}
|
|
3993
|
+
* onChange={(value) => console.log(value)}
|
|
3994
|
+
* />
|
|
3995
|
+
*
|
|
3996
|
+
* // Range slider
|
|
3997
|
+
* <Slider
|
|
3998
|
+
* label="Budget Range"
|
|
3999
|
+
* min={0}
|
|
4000
|
+
* max={1000}
|
|
4001
|
+
* rangeValue={[200, 800]}
|
|
4002
|
+
* onRangeChange={(values) => console.log(values)}
|
|
4003
|
+
* />
|
|
4004
|
+
* ```
|
|
4005
|
+
*/])), semantic$1.typography.caption, semantic$1.color.text.subdued, base$1.spacing[1]);
|
|
4006
|
+
/**
|
|
4007
|
+
* Slider component for single value or range selection
|
|
4008
|
+
*
|
|
4009
|
+
* @example
|
|
4010
|
+
* ```tsx
|
|
4011
|
+
* // Single value slider
|
|
4012
|
+
* <Slider
|
|
4013
|
+
* label="Volume"
|
|
4014
|
+
* min={0}
|
|
4015
|
+
* max={100}
|
|
4016
|
+
* value={50}
|
|
4017
|
+
* onChange={(value) => console.log(value)}
|
|
4018
|
+
* />
|
|
4019
|
+
*
|
|
4020
|
+
* // Range slider
|
|
4021
|
+
* <Slider
|
|
4022
|
+
* label="Budget Range"
|
|
4023
|
+
* min={0}
|
|
4024
|
+
* max={1000}
|
|
4025
|
+
* rangeValue={[200, 800]}
|
|
4026
|
+
* onRangeChange={(values) => console.log(values)}
|
|
4027
|
+
* />
|
|
4028
|
+
* ```
|
|
4029
|
+
*/
|
|
4030
|
+
var Slider = function Slider(_a) {
|
|
4031
|
+
var _b = _a.min,
|
|
4032
|
+
min = _b === void 0 ? 0 : _b,
|
|
4033
|
+
_c = _a.max,
|
|
4034
|
+
max = _c === void 0 ? 100 : _c,
|
|
4035
|
+
_d = _a.step,
|
|
4036
|
+
step = _d === void 0 ? 1 : _d,
|
|
4037
|
+
controlledValue = _a.value,
|
|
4038
|
+
defaultValue = _a.defaultValue,
|
|
4039
|
+
controlledRangeValue = _a.rangeValue,
|
|
4040
|
+
defaultRangeValue = _a.defaultRangeValue,
|
|
4041
|
+
onChange = _a.onChange,
|
|
4042
|
+
onRangeChange = _a.onRangeChange,
|
|
4043
|
+
_e = _a.disabled,
|
|
4044
|
+
disabled = _e === void 0 ? false : _e,
|
|
4045
|
+
label = _a.label,
|
|
4046
|
+
_f = _a.showValueLabel,
|
|
4047
|
+
showValueLabel = _f === void 0 ? true : _f,
|
|
4048
|
+
_g = _a.formatValue,
|
|
4049
|
+
formatValue = _g === void 0 ? function (val) {
|
|
4050
|
+
return val.toString();
|
|
4051
|
+
} : _g,
|
|
4052
|
+
dataTestId = _a["data-testid"],
|
|
4053
|
+
ariaLabel = _a["aria-label"],
|
|
4054
|
+
ariaDescribedBy = _a["aria-describedby"];
|
|
4055
|
+
var generatedId = useId();
|
|
4056
|
+
var trackRef = useRef(null);
|
|
4057
|
+
var _h = useState(null),
|
|
4058
|
+
activeThumb = _h[0],
|
|
4059
|
+
setActiveThumb = _h[1];
|
|
4060
|
+
// Determine if this is a range slider
|
|
4061
|
+
var isRange = controlledRangeValue !== undefined || defaultRangeValue !== undefined || onRangeChange !== undefined;
|
|
4062
|
+
// State for single slider
|
|
4063
|
+
var _j = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : min),
|
|
4064
|
+
internalValue = _j[0],
|
|
4065
|
+
setInternalValue = _j[1];
|
|
4066
|
+
var currentValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
|
|
4067
|
+
// State for range slider
|
|
4068
|
+
var _k = useState(defaultRangeValue !== null && defaultRangeValue !== void 0 ? defaultRangeValue : [min, min + (max - min) / 4]),
|
|
4069
|
+
internalRangeValue = _k[0],
|
|
4070
|
+
setInternalRangeValue = _k[1];
|
|
4071
|
+
var currentRangeValue = controlledRangeValue !== null && controlledRangeValue !== void 0 ? controlledRangeValue : internalRangeValue;
|
|
4072
|
+
// Clamp value to min/max and nearest step
|
|
4073
|
+
var clampValue = function clampValue(val) {
|
|
4074
|
+
var clamped = Math.max(min, Math.min(max, val));
|
|
4075
|
+
var stepped = Math.round((clamped - min) / step) * step + min;
|
|
4076
|
+
return Math.min(max, stepped);
|
|
4077
|
+
};
|
|
4078
|
+
// Convert pixel position to value
|
|
4079
|
+
var positionToValue = function positionToValue(clientX) {
|
|
4080
|
+
if (!trackRef.current) return min;
|
|
4081
|
+
var rect = trackRef.current.getBoundingClientRect();
|
|
4082
|
+
var percent = (clientX - rect.left) / rect.width;
|
|
4083
|
+
var rawValue = min + percent * (max - min);
|
|
4084
|
+
return clampValue(rawValue);
|
|
4085
|
+
};
|
|
4086
|
+
// Convert value to percentage for positioning
|
|
4087
|
+
var valueToPercent = function valueToPercent(val) {
|
|
4088
|
+
return (val - min) / (max - min) * 100;
|
|
4089
|
+
};
|
|
4090
|
+
// Handle single slider change
|
|
4091
|
+
var handleSingleChange = function handleSingleChange(newValue) {
|
|
4092
|
+
var clampedValue = clampValue(newValue);
|
|
4093
|
+
setInternalValue(clampedValue);
|
|
4094
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(clampedValue);
|
|
4095
|
+
};
|
|
4096
|
+
// Handle range slider change
|
|
4097
|
+
var handleRangeChange = function handleRangeChange(newMin, newMax) {
|
|
4098
|
+
var clampedMin = clampValue(newMin);
|
|
4099
|
+
var clampedMax = clampValue(newMax);
|
|
4100
|
+
// Ensure min <= max
|
|
4101
|
+
var orderedMin = Math.min(clampedMin, clampedMax);
|
|
4102
|
+
var orderedMax = Math.max(clampedMin, clampedMax);
|
|
4103
|
+
setInternalRangeValue([orderedMin, orderedMax]);
|
|
4104
|
+
onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange([orderedMin, orderedMax]);
|
|
4105
|
+
};
|
|
4106
|
+
// Mouse/touch handlers
|
|
4107
|
+
var handleTrackClick = function handleTrackClick(event) {
|
|
4108
|
+
if (disabled) return;
|
|
4109
|
+
var newValue = positionToValue(event.clientX);
|
|
4110
|
+
if (isRange) {
|
|
4111
|
+
var minVal = currentRangeValue[0],
|
|
4112
|
+
maxVal = currentRangeValue[1];
|
|
4113
|
+
var distToMin = Math.abs(newValue - minVal);
|
|
4114
|
+
var distToMax = Math.abs(newValue - maxVal);
|
|
4115
|
+
if (distToMin < distToMax) {
|
|
4116
|
+
handleRangeChange(newValue, maxVal);
|
|
4117
|
+
} else {
|
|
4118
|
+
handleRangeChange(minVal, newValue);
|
|
4119
|
+
}
|
|
4120
|
+
} else {
|
|
4121
|
+
handleSingleChange(newValue);
|
|
4122
|
+
}
|
|
4123
|
+
};
|
|
4124
|
+
var handleThumbMouseDown = function handleThumbMouseDown(thumb) {
|
|
4125
|
+
return function (event) {
|
|
4126
|
+
if (disabled) return;
|
|
4127
|
+
event.preventDefault();
|
|
4128
|
+
setActiveThumb(thumb);
|
|
4129
|
+
var handleMouseMove = function handleMouseMove(e) {
|
|
4130
|
+
var newValue = positionToValue(e.clientX);
|
|
4131
|
+
if (isRange) {
|
|
4132
|
+
var minVal = currentRangeValue[0],
|
|
4133
|
+
maxVal = currentRangeValue[1];
|
|
4134
|
+
if (thumb === 'min') {
|
|
4135
|
+
handleRangeChange(newValue, maxVal);
|
|
4136
|
+
} else {
|
|
4137
|
+
handleRangeChange(minVal, newValue);
|
|
4138
|
+
}
|
|
4139
|
+
} else {
|
|
4140
|
+
handleSingleChange(newValue);
|
|
4141
|
+
}
|
|
4142
|
+
};
|
|
4143
|
+
var _handleMouseUp = function handleMouseUp() {
|
|
4144
|
+
setActiveThumb(null);
|
|
4145
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
4146
|
+
document.removeEventListener('mouseup', _handleMouseUp);
|
|
4147
|
+
};
|
|
4148
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
4149
|
+
document.addEventListener('mouseup', _handleMouseUp);
|
|
4150
|
+
};
|
|
4151
|
+
};
|
|
4152
|
+
// Keyboard navigation
|
|
4153
|
+
var handleKeyDown = function handleKeyDown(thumb) {
|
|
4154
|
+
return function (event) {
|
|
4155
|
+
if (disabled) return;
|
|
4156
|
+
var valueChange = 0;
|
|
4157
|
+
switch (event.key) {
|
|
4158
|
+
case 'ArrowRight':
|
|
4159
|
+
case 'ArrowUp':
|
|
4160
|
+
valueChange = step;
|
|
4161
|
+
event.preventDefault();
|
|
4162
|
+
break;
|
|
4163
|
+
case 'ArrowLeft':
|
|
4164
|
+
case 'ArrowDown':
|
|
4165
|
+
valueChange = -step;
|
|
4166
|
+
event.preventDefault();
|
|
4167
|
+
break;
|
|
4168
|
+
case 'PageUp':
|
|
4169
|
+
valueChange = step * 10;
|
|
4170
|
+
event.preventDefault();
|
|
4171
|
+
break;
|
|
4172
|
+
case 'PageDown':
|
|
4173
|
+
valueChange = -step * 10;
|
|
4174
|
+
event.preventDefault();
|
|
4175
|
+
break;
|
|
4176
|
+
case 'Home':
|
|
4177
|
+
if (isRange) {
|
|
4178
|
+
var minVal = currentRangeValue[0],
|
|
4179
|
+
maxVal = currentRangeValue[1];
|
|
4180
|
+
if (thumb === 'min') {
|
|
4181
|
+
handleRangeChange(min, maxVal);
|
|
4182
|
+
} else {
|
|
4183
|
+
handleRangeChange(minVal, min);
|
|
4184
|
+
}
|
|
4185
|
+
} else {
|
|
4186
|
+
handleSingleChange(min);
|
|
4187
|
+
}
|
|
4188
|
+
event.preventDefault();
|
|
4189
|
+
return;
|
|
4190
|
+
case 'End':
|
|
4191
|
+
if (isRange) {
|
|
4192
|
+
var minVal = currentRangeValue[0],
|
|
4193
|
+
maxVal = currentRangeValue[1];
|
|
4194
|
+
if (thumb === 'min') {
|
|
4195
|
+
handleRangeChange(max, maxVal);
|
|
4196
|
+
} else {
|
|
4197
|
+
handleRangeChange(minVal, max);
|
|
4198
|
+
}
|
|
4199
|
+
} else {
|
|
4200
|
+
handleSingleChange(max);
|
|
4201
|
+
}
|
|
4202
|
+
event.preventDefault();
|
|
4203
|
+
return;
|
|
4204
|
+
default:
|
|
4205
|
+
return;
|
|
4206
|
+
}
|
|
4207
|
+
if (isRange) {
|
|
4208
|
+
var minVal = currentRangeValue[0],
|
|
4209
|
+
maxVal = currentRangeValue[1];
|
|
4210
|
+
if (thumb === 'min') {
|
|
4211
|
+
handleRangeChange(minVal + valueChange, maxVal);
|
|
4212
|
+
} else {
|
|
4213
|
+
handleRangeChange(minVal, maxVal + valueChange);
|
|
4214
|
+
}
|
|
4215
|
+
} else {
|
|
4216
|
+
handleSingleChange(currentValue + valueChange);
|
|
4217
|
+
}
|
|
4218
|
+
};
|
|
4219
|
+
};
|
|
4220
|
+
// Calculate positions
|
|
4221
|
+
var singlePercent = valueToPercent(currentValue);
|
|
4222
|
+
var _l = [valueToPercent(currentRangeValue[0]), valueToPercent(currentRangeValue[1])],
|
|
4223
|
+
minPercent = _l[0],
|
|
4224
|
+
maxPercent = _l[1];
|
|
4225
|
+
return /*#__PURE__*/React.createElement(StyledSliderContainer, {
|
|
4226
|
+
"data-testid": dataTestId
|
|
4227
|
+
}, label && /*#__PURE__*/React.createElement(StyledLabel$1, {
|
|
4228
|
+
htmlFor: generatedId,
|
|
4229
|
+
$disabled: disabled
|
|
4230
|
+
}, label), /*#__PURE__*/React.createElement(StyledSliderTrackContainer, null, /*#__PURE__*/React.createElement(StyledTrack, {
|
|
4231
|
+
ref: trackRef,
|
|
4232
|
+
onClick: handleTrackClick,
|
|
4233
|
+
$disabled: disabled
|
|
4234
|
+
}, isRange ? /*#__PURE__*/React.createElement(StyledTrackFill, {
|
|
4235
|
+
$disabled: disabled,
|
|
4236
|
+
style: {
|
|
4237
|
+
left: "".concat(minPercent, "%"),
|
|
4238
|
+
width: "".concat(maxPercent - minPercent, "%")
|
|
4239
|
+
}
|
|
4240
|
+
}) : /*#__PURE__*/React.createElement(StyledTrackFill, {
|
|
4241
|
+
$disabled: disabled,
|
|
4242
|
+
style: {
|
|
4243
|
+
left: 0,
|
|
4244
|
+
width: "".concat(singlePercent, "%")
|
|
4245
|
+
}
|
|
4246
|
+
}), isRange ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledThumb, {
|
|
4247
|
+
role: "slider",
|
|
4248
|
+
tabIndex: disabled ? -1 : 0,
|
|
4249
|
+
"aria-label": ariaLabel ? "".concat(ariaLabel, " minimum") : 'Minimum value',
|
|
4250
|
+
"aria-valuemin": min,
|
|
4251
|
+
"aria-valuemax": max,
|
|
4252
|
+
"aria-valuenow": currentRangeValue[0],
|
|
4253
|
+
"aria-valuetext": formatValue(currentRangeValue[0]),
|
|
4254
|
+
"aria-disabled": disabled,
|
|
4255
|
+
"aria-describedby": ariaDescribedBy,
|
|
4256
|
+
$disabled: disabled,
|
|
4257
|
+
$active: activeThumb === 'min',
|
|
4258
|
+
style: {
|
|
4259
|
+
left: "".concat(minPercent, "%")
|
|
4260
|
+
},
|
|
4261
|
+
onMouseDown: handleThumbMouseDown('min'),
|
|
4262
|
+
onKeyDown: handleKeyDown('min')
|
|
4263
|
+
}, showValueLabel && /*#__PURE__*/React.createElement(StyledValueLabel, {
|
|
4264
|
+
$disabled: disabled
|
|
4265
|
+
}, formatValue(currentRangeValue[0]))), /*#__PURE__*/React.createElement(StyledThumb, {
|
|
4266
|
+
role: "slider",
|
|
4267
|
+
tabIndex: disabled ? -1 : 0,
|
|
4268
|
+
"aria-label": ariaLabel ? "".concat(ariaLabel, " maximum") : 'Maximum value',
|
|
4269
|
+
"aria-valuemin": min,
|
|
4270
|
+
"aria-valuemax": max,
|
|
4271
|
+
"aria-valuenow": currentRangeValue[1],
|
|
4272
|
+
"aria-valuetext": formatValue(currentRangeValue[1]),
|
|
4273
|
+
"aria-disabled": disabled,
|
|
4274
|
+
"aria-describedby": ariaDescribedBy,
|
|
4275
|
+
$disabled: disabled,
|
|
4276
|
+
$active: activeThumb === 'max',
|
|
4277
|
+
style: {
|
|
4278
|
+
left: "".concat(maxPercent, "%")
|
|
4279
|
+
},
|
|
4280
|
+
onMouseDown: handleThumbMouseDown('max'),
|
|
4281
|
+
onKeyDown: handleKeyDown('max')
|
|
4282
|
+
}, showValueLabel && /*#__PURE__*/React.createElement(StyledValueLabel, {
|
|
4283
|
+
$disabled: disabled
|
|
4284
|
+
}, formatValue(currentRangeValue[1])))) : /*#__PURE__*/React.createElement(StyledThumb, {
|
|
4285
|
+
role: "slider",
|
|
4286
|
+
tabIndex: disabled ? -1 : 0,
|
|
4287
|
+
"aria-label": ariaLabel || label || 'Slider value',
|
|
4288
|
+
"aria-valuemin": min,
|
|
4289
|
+
"aria-valuemax": max,
|
|
4290
|
+
"aria-valuenow": currentValue,
|
|
4291
|
+
"aria-valuetext": formatValue(currentValue),
|
|
4292
|
+
"aria-disabled": disabled,
|
|
4293
|
+
"aria-describedby": ariaDescribedBy,
|
|
4294
|
+
$disabled: disabled,
|
|
4295
|
+
$active: activeThumb === 'single',
|
|
4296
|
+
style: {
|
|
4297
|
+
left: "".concat(singlePercent, "%")
|
|
4298
|
+
},
|
|
4299
|
+
onMouseDown: handleThumbMouseDown('single'),
|
|
4300
|
+
onKeyDown: handleKeyDown('single')
|
|
4301
|
+
}, showValueLabel && /*#__PURE__*/React.createElement(StyledValueLabel, {
|
|
4302
|
+
$disabled: disabled
|
|
4303
|
+
}, formatValue(currentValue))))), /*#__PURE__*/React.createElement(StyledMinMaxLabels, null, /*#__PURE__*/React.createElement("span", null, formatValue(min)), /*#__PURE__*/React.createElement("span", null, formatValue(max))));
|
|
4304
|
+
};
|
|
4305
|
+
Slider.displayName = 'Slider';
|
|
4306
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1;
|
|
3551
4307
|
|
|
3552
4308
|
React.createElement;
|
|
3553
4309
|
var semantic = tokensData.semantic,
|
|
@@ -3851,5 +4607,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
3851
4607
|
// Main design system exports
|
|
3852
4608
|
var tokens = tokensData;
|
|
3853
4609
|
|
|
3854
|
-
export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, NumberInput, PageTitle, Picture, ProgressBar, ResponsiveGrid, Stack, StyledInputBase, StyledTextAreaBase, Tag, TextField, Typography, iconsData, tokens };
|
|
4610
|
+
export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, Sheet, Slider, Stack, StyledInputBase, StyledTextAreaBase, Tag, TextField, Typography, iconsData, tokens };
|
|
3855
4611
|
//# sourceMappingURL=index.esm.js.map
|