@common-origin/design-system 2.2.5 → 2.3.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/atoms/CategoryBadge/CategoryBadge.d.ts +82 -0
- package/dist/components/atoms/CategoryBadge/index.d.ts +2 -0
- package/dist/components/atoms/StatusBadge/StatusBadge.d.ts +68 -0
- package/dist/components/atoms/StatusBadge/index.d.ts +2 -0
- package/dist/components/atoms/index.d.ts +2 -0
- package/dist/components/molecules/ActionSheet/ActionSheet.d.ts +110 -0
- package/dist/components/molecules/ActionSheet/index.d.ts +2 -0
- package/dist/components/molecules/SearchField/SearchField.d.ts +108 -0
- package/dist/components/molecules/SearchField/index.d.ts +2 -0
- package/dist/components/molecules/TabBar/TabBar.d.ts +79 -0
- package/dist/components/molecules/TabBar/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +3 -0
- package/dist/index.d.ts +85 -0
- package/dist/index.esm.js +1465 -262
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1468 -260
- package/dist/index.js.map +1 -1
- package/dist/styles/tokens.json +85 -0
- package/dist/tokens/index.esm.js +85 -0
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +85 -0
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/tokens.d.ts +85 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var styled = require('styled-components');
|
|
5
5
|
var dateFns = require('date-fns');
|
|
6
|
+
var reactDom = require('react-dom');
|
|
6
7
|
|
|
7
8
|
function _extends() {
|
|
8
9
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
@@ -101,7 +102,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
101
102
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
102
103
|
};
|
|
103
104
|
|
|
104
|
-
var base$
|
|
105
|
+
var base$d = {
|
|
105
106
|
border: {
|
|
106
107
|
radius: {
|
|
107
108
|
"1": "0.125rem",
|
|
@@ -269,6 +270,51 @@ var base$8 = {
|
|
|
269
270
|
"1100": "#004491",
|
|
270
271
|
"1200": "#003571",
|
|
271
272
|
"1300": "#002754"
|
|
273
|
+
},
|
|
274
|
+
purple: {
|
|
275
|
+
"100": "#F9F0FF",
|
|
276
|
+
"200": "#F4E1FF",
|
|
277
|
+
"300": "#EDD0FF",
|
|
278
|
+
"400": "#E3B8FF",
|
|
279
|
+
"500": "#D59DFF",
|
|
280
|
+
"600": "#C27EF7",
|
|
281
|
+
"700": "#AD5FE8",
|
|
282
|
+
"800": "#9644D4",
|
|
283
|
+
"900": "#7E2EBD",
|
|
284
|
+
"1000": "#67229F",
|
|
285
|
+
"1100": "#511882",
|
|
286
|
+
"1200": "#3D1066",
|
|
287
|
+
"1300": "#2B0A4D"
|
|
288
|
+
},
|
|
289
|
+
pink: {
|
|
290
|
+
"100": "#FFEFF9",
|
|
291
|
+
"200": "#FFDFF4",
|
|
292
|
+
"300": "#FFCBED",
|
|
293
|
+
"400": "#FFB0E3",
|
|
294
|
+
"500": "#FF8ED4",
|
|
295
|
+
"600": "#FF69C1",
|
|
296
|
+
"700": "#FF42AB",
|
|
297
|
+
"800": "#F31A93",
|
|
298
|
+
"900": "#DC007B",
|
|
299
|
+
"1000": "#B90064",
|
|
300
|
+
"1100": "#97004E",
|
|
301
|
+
"1200": "#78003A",
|
|
302
|
+
"1300": "#5C0029"
|
|
303
|
+
},
|
|
304
|
+
yellow: {
|
|
305
|
+
"100": "#FFF3D6",
|
|
306
|
+
"200": "#FFE9B3",
|
|
307
|
+
"300": "#FFDE8F",
|
|
308
|
+
"400": "#FFD162",
|
|
309
|
+
"500": "#FFC233",
|
|
310
|
+
"600": "#EDAD0A",
|
|
311
|
+
"700": "#D39700",
|
|
312
|
+
"800": "#B88100",
|
|
313
|
+
"900": "#9D6C00",
|
|
314
|
+
"1000": "#825800",
|
|
315
|
+
"1100": "#694600",
|
|
316
|
+
"1200": "#523600",
|
|
317
|
+
"1300": "#3D2800"
|
|
272
318
|
}
|
|
273
319
|
},
|
|
274
320
|
spacing: {
|
|
@@ -636,7 +682,7 @@ var component = {
|
|
|
636
682
|
},
|
|
637
683
|
$ref: "./component/index.json"
|
|
638
684
|
};
|
|
639
|
-
var semantic$
|
|
685
|
+
var semantic$g = {
|
|
640
686
|
border: {
|
|
641
687
|
"default": "0.0625rem solid #e9ecef",
|
|
642
688
|
subtle: "0.0625rem solid #dee2e6",
|
|
@@ -747,6 +793,46 @@ var semantic$b = {
|
|
|
747
793
|
"debit-hover": "#B40000",
|
|
748
794
|
pending: "#F68511",
|
|
749
795
|
neutral: "#6c757d"
|
|
796
|
+
},
|
|
797
|
+
category: {
|
|
798
|
+
blue: "#3892F3",
|
|
799
|
+
"blue-emphasis": "#0265DC",
|
|
800
|
+
"blue-subtle": "#E0F2FF",
|
|
801
|
+
purple: "#AD5FE8",
|
|
802
|
+
"purple-emphasis": "#7E2EBD",
|
|
803
|
+
"purple-subtle": "#F9F0FF",
|
|
804
|
+
pink: "#FF42AB",
|
|
805
|
+
"pink-emphasis": "#DC007B",
|
|
806
|
+
"pink-subtle": "#FFEFF9",
|
|
807
|
+
yellow: "#D39700",
|
|
808
|
+
"yellow-emphasis": "#9D6C00",
|
|
809
|
+
"yellow-subtle": "#FFF3D6",
|
|
810
|
+
green: "#15A46E",
|
|
811
|
+
"green-emphasis": "#007A4D",
|
|
812
|
+
"green-subtle": "#CEF8E0",
|
|
813
|
+
red: "#F75C46",
|
|
814
|
+
"red-emphasis": "#D31510",
|
|
815
|
+
"red-subtle": "#FFEBE7",
|
|
816
|
+
orange: "#E46F00",
|
|
817
|
+
"orange-emphasis": "#B14C00",
|
|
818
|
+
"orange-subtle": "#FFECCC",
|
|
819
|
+
gray: "#495057",
|
|
820
|
+
"gray-emphasis": "#212529",
|
|
821
|
+
"gray-subtle": "#e9ecef"
|
|
822
|
+
},
|
|
823
|
+
status: {
|
|
824
|
+
pending: "#D39700",
|
|
825
|
+
"pending-bg": "#FFF3D6",
|
|
826
|
+
completed: "#007A4D",
|
|
827
|
+
"completed-bg": "#CEF8E0",
|
|
828
|
+
failed: "#D31510",
|
|
829
|
+
"failed-bg": "#FFEBE7",
|
|
830
|
+
cancelled: "#495057",
|
|
831
|
+
"cancelled-bg": "#e9ecef",
|
|
832
|
+
processing: "#0265DC",
|
|
833
|
+
"processing-bg": "#E0F2FF",
|
|
834
|
+
scheduled: "#7E2EBD",
|
|
835
|
+
"scheduled-bg": "#F9F0FF"
|
|
750
836
|
}
|
|
751
837
|
},
|
|
752
838
|
typography: {
|
|
@@ -781,9 +867,9 @@ var semantic$b = {
|
|
|
781
867
|
$ref: "./semantic/index.json"
|
|
782
868
|
};
|
|
783
869
|
var tokensData = {
|
|
784
|
-
base: base$
|
|
870
|
+
base: base$d,
|
|
785
871
|
component: component,
|
|
786
|
-
semantic: semantic$
|
|
872
|
+
semantic: semantic$g
|
|
787
873
|
};
|
|
788
874
|
|
|
789
875
|
React.createElement;
|
|
@@ -793,7 +879,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
793
879
|
},
|
|
794
880
|
displayName: "Avatar__AvatarContainer",
|
|
795
881
|
componentId: "sc-ezn4ax-0"
|
|
796
|
-
})(templateObject_1$
|
|
882
|
+
})(templateObject_1$I || (templateObject_1$I = __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) {
|
|
797
883
|
var $size = _a.$size;
|
|
798
884
|
return tokensData.semantic.size.avatar[$size];
|
|
799
885
|
}, function (_a) {
|
|
@@ -806,14 +892,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
806
892
|
},
|
|
807
893
|
displayName: "Avatar__AvatarImage",
|
|
808
894
|
componentId: "sc-ezn4ax-1"
|
|
809
|
-
})(templateObject_2$
|
|
895
|
+
})(templateObject_2$t || (templateObject_2$t = __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);
|
|
810
896
|
var AvatarInitials = styled.span.withConfig({
|
|
811
897
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
812
898
|
return !prop.startsWith('$');
|
|
813
899
|
},
|
|
814
900
|
displayName: "Avatar__AvatarInitials",
|
|
815
901
|
componentId: "sc-ezn4ax-2"
|
|
816
|
-
})(templateObject_3$
|
|
902
|
+
})(templateObject_3$p || (templateObject_3$p = __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"
|
|
817
903
|
// Helper function to get initials from name
|
|
818
904
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
819
905
|
var $size = _a.$size;
|
|
@@ -876,7 +962,7 @@ var Avatar = function Avatar(_a) {
|
|
|
876
962
|
"aria-hidden": "true"
|
|
877
963
|
}, initials));
|
|
878
964
|
};
|
|
879
|
-
var templateObject_1$
|
|
965
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$p;
|
|
880
966
|
|
|
881
967
|
React.createElement;
|
|
882
968
|
var _a$5 = tokensData.semantic,
|
|
@@ -944,7 +1030,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
944
1030
|
},
|
|
945
1031
|
displayName: "Typography__StyledTypography",
|
|
946
1032
|
componentId: "sc-17mqo4k-0"
|
|
947
|
-
})(templateObject_1$
|
|
1033
|
+
})(templateObject_1$H || (templateObject_1$H = __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"
|
|
948
1034
|
/**
|
|
949
1035
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
950
1036
|
*
|
|
@@ -1011,23 +1097,23 @@ var Typography = function Typography(_a) {
|
|
|
1011
1097
|
"data-testid": dataTestId
|
|
1012
1098
|
}, children);
|
|
1013
1099
|
};
|
|
1014
|
-
var templateObject_1$
|
|
1100
|
+
var templateObject_1$H;
|
|
1015
1101
|
|
|
1016
1102
|
React.createElement;
|
|
1017
1103
|
var color$3 = tokensData.semantic.color;
|
|
1018
1104
|
tokensData.base.shadow;
|
|
1019
|
-
var scaleIn = styled.keyframes(templateObject_1$
|
|
1105
|
+
var scaleIn$1 = styled.keyframes(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
1020
1106
|
var BadgeWrapper = styled.span.withConfig({
|
|
1021
1107
|
displayName: "Badge__BadgeWrapper",
|
|
1022
1108
|
componentId: "sc-tjz4pp-0"
|
|
1023
|
-
})(templateObject_2$
|
|
1109
|
+
})(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
1024
1110
|
var BadgeIndicator = styled.span.withConfig({
|
|
1025
1111
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1026
1112
|
return !prop.startsWith('$');
|
|
1027
1113
|
},
|
|
1028
1114
|
displayName: "Badge__BadgeIndicator",
|
|
1029
1115
|
componentId: "sc-tjz4pp-1"
|
|
1030
|
-
})(templateObject_3$
|
|
1116
|
+
})(templateObject_3$o || (templateObject_3$o = __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) {
|
|
1031
1117
|
return props.$isVisible ? 'flex' : 'none';
|
|
1032
1118
|
}, function (props) {
|
|
1033
1119
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1035,7 +1121,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1035
1121
|
return props.$isDot ? '8px' : '16px';
|
|
1036
1122
|
}, function (props) {
|
|
1037
1123
|
return props.$isDot ? '0' : '0 4px';
|
|
1038
|
-
}, tokensData.base.border.radius.circle, color$3.background["default"], scaleIn, function (props) {
|
|
1124
|
+
}, tokensData.base.border.radius.circle, color$3.background["default"], scaleIn$1, function (props) {
|
|
1039
1125
|
switch (props.$variant) {
|
|
1040
1126
|
case 'primary':
|
|
1041
1127
|
return "\n background-color: ".concat(color$3.background.interactive, ";\n color: ").concat(color$3.text.inverse, ";\n ");
|
|
@@ -1049,10 +1135,10 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1049
1135
|
return "\n background-color: ".concat(color$3.background.emphasis, ";\n color: ").concat(color$3.text.inverse, ";\n ");
|
|
1050
1136
|
}
|
|
1051
1137
|
});
|
|
1052
|
-
var ScreenReaderOnly = styled.span.withConfig({
|
|
1138
|
+
var ScreenReaderOnly$1 = styled.span.withConfig({
|
|
1053
1139
|
displayName: "Badge__ScreenReaderOnly",
|
|
1054
1140
|
componentId: "sc-tjz4pp-2"
|
|
1055
|
-
})(templateObject_4$
|
|
1141
|
+
})(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
1056
1142
|
var Badge = function Badge(_a) {
|
|
1057
1143
|
var children = _a.children,
|
|
1058
1144
|
_b = _a.count,
|
|
@@ -1081,9 +1167,9 @@ var Badge = function Badge(_a) {
|
|
|
1081
1167
|
}, !dot && /*#__PURE__*/React.createElement(Typography, {
|
|
1082
1168
|
variant: "caption",
|
|
1083
1169
|
color: "inverse"
|
|
1084
|
-
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
|
|
1170
|
+
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly$1, null, label)));
|
|
1085
1171
|
};
|
|
1086
|
-
var templateObject_1$
|
|
1172
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$o, templateObject_4$j;
|
|
1087
1173
|
|
|
1088
1174
|
React.createElement;
|
|
1089
1175
|
var StyledBox = styled.div.withConfig({
|
|
@@ -1095,25 +1181,25 @@ var StyledBox = styled.div.withConfig({
|
|
|
1095
1181
|
})(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"
|
|
1096
1182
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1097
1183
|
])), function (props) {
|
|
1098
|
-
return props.$display && styled.css(templateObject_1$
|
|
1184
|
+
return props.$display && styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1099
1185
|
}, function (props) {
|
|
1100
|
-
return props.$flexDirection && styled.css(templateObject_2$
|
|
1186
|
+
return props.$flexDirection && styled.css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1101
1187
|
}, function (props) {
|
|
1102
|
-
return props.$justifyContent && styled.css(templateObject_3$
|
|
1188
|
+
return props.$justifyContent && styled.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1103
1189
|
}, function (props) {
|
|
1104
|
-
return props.$alignItems && styled.css(templateObject_4$
|
|
1190
|
+
return props.$alignItems && styled.css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1105
1191
|
}, function (props) {
|
|
1106
|
-
return props.$flexWrap && styled.css(templateObject_5$
|
|
1192
|
+
return props.$flexWrap && styled.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1107
1193
|
}, function (props) {
|
|
1108
|
-
return props.$gap && styled.css(templateObject_6$
|
|
1194
|
+
return props.$gap && styled.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1109
1195
|
}, function (props) {
|
|
1110
|
-
return props.$m && styled.css(templateObject_7$
|
|
1196
|
+
return props.$m && styled.css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1111
1197
|
}, function (props) {
|
|
1112
|
-
return props.$mt && styled.css(templateObject_8$
|
|
1198
|
+
return props.$mt && styled.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1113
1199
|
}, function (props) {
|
|
1114
|
-
return props.$mr && styled.css(templateObject_9$
|
|
1200
|
+
return props.$mr && styled.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
|
|
1115
1201
|
}, function (props) {
|
|
1116
|
-
return props.$mb && styled.css(templateObject_10$
|
|
1202
|
+
return props.$mb && styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
|
|
1117
1203
|
}, function (props) {
|
|
1118
1204
|
return props.$ml && styled.css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
|
|
1119
1205
|
}, function (props) {
|
|
@@ -1285,7 +1371,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1285
1371
|
}, rest), children);
|
|
1286
1372
|
};
|
|
1287
1373
|
var Box = BoxTransform;
|
|
1288
|
-
var templateObject_1$
|
|
1374
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$e, templateObject_6$d, templateObject_7$b, templateObject_8$6, templateObject_9$4, templateObject_10$3, 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;
|
|
1289
1375
|
|
|
1290
1376
|
var add = {
|
|
1291
1377
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1511,7 +1597,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1511
1597
|
},
|
|
1512
1598
|
displayName: "Icon__IconStyled",
|
|
1513
1599
|
componentId: "sc-1105czq-0"
|
|
1514
|
-
})(templateObject_1$
|
|
1600
|
+
})(templateObject_1$E || (templateObject_1$E = __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) {
|
|
1515
1601
|
var $size = _a.$size;
|
|
1516
1602
|
return tokensData.semantic.size.icon[$size];
|
|
1517
1603
|
}, function (_a) {
|
|
@@ -1575,20 +1661,20 @@ var Icon = function Icon(_a) {
|
|
|
1575
1661
|
d: iconData.path
|
|
1576
1662
|
})));
|
|
1577
1663
|
};
|
|
1578
|
-
var templateObject_1$
|
|
1664
|
+
var templateObject_1$E;
|
|
1579
1665
|
|
|
1580
1666
|
React.createElement;
|
|
1581
1667
|
var button = tokensData.component.button,
|
|
1582
|
-
semantic$
|
|
1668
|
+
semantic$f = tokensData.semantic;
|
|
1583
1669
|
// Base styles shared between button and link
|
|
1584
|
-
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$
|
|
1670
|
+
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$f.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");
|
|
1585
1671
|
// Dynamic variant styles using component tokens
|
|
1586
1672
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1587
1673
|
var $variant = _a.$variant;
|
|
1588
1674
|
return "\n background-color: ".concat($variant === 'primary' ? button.primary.backgroundColor : $variant === 'secondary' ? button.variants.secondary.backgroundColor : button.variants.naked.backgroundColor, ";\n color: ").concat($variant === 'primary' ? button.primary.textColor : $variant === 'secondary' ? button.variants.secondary.textColor : button.variants.naked.textColor, ";\n \n &:hover:not(:disabled) {\n background-color: ").concat($variant === 'primary' ? button.hover.backgroundColor : $variant === 'secondary' ? button.variants.secondary.hover.backgroundColor : button.variants.naked.hover.backgroundColor, ";\n }\n\n &:active:not(:disabled) {\n background-color: ").concat($variant === 'primary' ? button.active.backgroundColor : $variant === 'secondary' ? button.variants.secondary.active.backgroundColor : button.variants.naked.active.backgroundColor, ";\n }\n\n &:disabled {\n background-color: ").concat($variant === 'primary' ? button.disabled.backgroundColor : $variant === 'secondary' ? button.variants.secondary.disabled.backgroundColor : button.variants.naked.disabled.backgroundColor, ";\n color: ").concat($variant === 'primary' ? button.disabled.textColor : $variant === 'secondary' ? button.variants.secondary.disabled.textColor : button.variants.naked.disabled.textColor, ";\n }\n");
|
|
1589
1675
|
};
|
|
1590
1676
|
// Dynamic size styles using component tokens
|
|
1591
|
-
var getSizeStyles = function getSizeStyles(_a) {
|
|
1677
|
+
var getSizeStyles$2 = function getSizeStyles(_a) {
|
|
1592
1678
|
var $size = _a.$size;
|
|
1593
1679
|
switch ($size) {
|
|
1594
1680
|
case 'small':
|
|
@@ -1607,16 +1693,16 @@ var StyledButton = styled.button.withConfig({
|
|
|
1607
1693
|
},
|
|
1608
1694
|
displayName: "Button__StyledButton",
|
|
1609
1695
|
componentId: "sc-1eiuum9-0"
|
|
1610
|
-
})(templateObject_1$
|
|
1696
|
+
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles$2);
|
|
1611
1697
|
var StyledLink = styled.a.withConfig({
|
|
1612
1698
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1613
1699
|
return !prop.startsWith('$');
|
|
1614
1700
|
},
|
|
1615
1701
|
displayName: "Button__StyledLink",
|
|
1616
1702
|
componentId: "sc-1eiuum9-1"
|
|
1617
|
-
})(templateObject_2$
|
|
1703
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1618
1704
|
// Helper function to get icon size based on button size
|
|
1619
|
-
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1705
|
+
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles$2);
|
|
1620
1706
|
// Helper function to get icon size based on button size
|
|
1621
1707
|
var getIconSize = function getIconSize(buttonSize) {
|
|
1622
1708
|
switch (buttonSize) {
|
|
@@ -1706,7 +1792,168 @@ var Button = function Button(_a) {
|
|
|
1706
1792
|
"data-testid": dataTestId
|
|
1707
1793
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1708
1794
|
};
|
|
1709
|
-
var templateObject_1$
|
|
1795
|
+
var templateObject_1$D, templateObject_2$q;
|
|
1796
|
+
|
|
1797
|
+
React.createElement;
|
|
1798
|
+
var semantic$e = tokensData.semantic,
|
|
1799
|
+
base$c = tokensData.base;
|
|
1800
|
+
var getColorStyles = function getColorStyles(color, variant) {
|
|
1801
|
+
var colorKey = color;
|
|
1802
|
+
if (variant === 'filled') {
|
|
1803
|
+
return {
|
|
1804
|
+
backgroundColor: semantic$e.color.category["".concat(colorKey, "-emphasis")],
|
|
1805
|
+
color: semantic$e.color.text.inverse,
|
|
1806
|
+
borderColor: 'transparent'
|
|
1807
|
+
};
|
|
1808
|
+
}
|
|
1809
|
+
if (variant === 'outlined') {
|
|
1810
|
+
return {
|
|
1811
|
+
backgroundColor: 'transparent',
|
|
1812
|
+
color: semantic$e.color.category[colorKey],
|
|
1813
|
+
borderColor: semantic$e.color.category[colorKey]
|
|
1814
|
+
};
|
|
1815
|
+
}
|
|
1816
|
+
// minimal
|
|
1817
|
+
return {
|
|
1818
|
+
backgroundColor: semantic$e.color.category["".concat(colorKey, "-subtle")],
|
|
1819
|
+
color: semantic$e.color.category[colorKey],
|
|
1820
|
+
borderColor: 'transparent'
|
|
1821
|
+
};
|
|
1822
|
+
};
|
|
1823
|
+
var getSizeStyles$1 = function getSizeStyles(size) {
|
|
1824
|
+
if (size === 'small') {
|
|
1825
|
+
return {
|
|
1826
|
+
height: '24px',
|
|
1827
|
+
padding: "".concat(base$c.spacing[1], " ").concat(base$c.spacing[2]),
|
|
1828
|
+
font: semantic$e.typography.caption,
|
|
1829
|
+
gap: base$c.spacing[1],
|
|
1830
|
+
iconSize: 'xs'
|
|
1831
|
+
};
|
|
1832
|
+
}
|
|
1833
|
+
// medium
|
|
1834
|
+
return {
|
|
1835
|
+
height: '32px',
|
|
1836
|
+
padding: "".concat(base$c.spacing[2], " ").concat(base$c.spacing[3]),
|
|
1837
|
+
font: semantic$e.typography.small,
|
|
1838
|
+
gap: base$c.spacing[1],
|
|
1839
|
+
iconSize: 'sm'
|
|
1840
|
+
};
|
|
1841
|
+
};
|
|
1842
|
+
var StyledCategoryBadge = styled.span.withConfig({
|
|
1843
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1844
|
+
return !prop.startsWith('$');
|
|
1845
|
+
},
|
|
1846
|
+
displayName: "CategoryBadge__StyledCategoryBadge",
|
|
1847
|
+
componentId: "sc-17aslpn-0"
|
|
1848
|
+
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: ", ";\n white-space: nowrap;\n user-select: none;\n transition: ", ";\n border-width: ", ";\n border-style: solid;\n \n /* Apply CSS custom properties */\n background-color: var(--category-badge-bg);\n color: var(--category-badge-color);\n border-color: var(--category-badge-border);\n height: var(--category-badge-height);\n padding: var(--category-badge-padding);\n font: var(--category-badge-font);\n gap: var(--category-badge-gap);\n opacity: var(--category-badge-opacity);\n cursor: var(--category-badge-cursor);\n \n /* Hover state for clickable badges */\n ", "\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: ", ";\n white-space: nowrap;\n user-select: none;\n transition: ", ";\n border-width: ", ";\n border-style: solid;\n \n /* Apply CSS custom properties */\n background-color: var(--category-badge-bg);\n color: var(--category-badge-color);\n border-color: var(--category-badge-border);\n height: var(--category-badge-height);\n padding: var(--category-badge-padding);\n font: var(--category-badge-font);\n gap: var(--category-badge-gap);\n opacity: var(--category-badge-opacity);\n cursor: var(--category-badge-cursor);\n \n /* Hover state for clickable badges */\n ", "\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"
|
|
1849
|
+
/**
|
|
1850
|
+
* CategoryBadge component for displaying transaction categories
|
|
1851
|
+
*
|
|
1852
|
+
* Supports 8 color options, 3 visual variants, optional icons, and interactive behavior.
|
|
1853
|
+
* Perfect for categorizing financial transactions or content.
|
|
1854
|
+
*
|
|
1855
|
+
* @example
|
|
1856
|
+
* ```tsx
|
|
1857
|
+
* <CategoryBadge color="orange" icon="restaurant">
|
|
1858
|
+
* Food & Dining
|
|
1859
|
+
* </CategoryBadge>
|
|
1860
|
+
*
|
|
1861
|
+
* <CategoryBadge
|
|
1862
|
+
* color="blue"
|
|
1863
|
+
* variant="outlined"
|
|
1864
|
+
* size="small"
|
|
1865
|
+
* onClick={() => filterByCategory('travel')}
|
|
1866
|
+
* >
|
|
1867
|
+
* Travel
|
|
1868
|
+
* </CategoryBadge>
|
|
1869
|
+
* ```
|
|
1870
|
+
*/])), base$c.border.radius.circle, base$c.fontWeight[3], semantic$e.motion.hover, base$c.border.width[1], function (props) {
|
|
1871
|
+
return props.$clickable && !props.$disabled && "\n &:hover {\n opacity: 0.85;\n transform: translateY(-1px);\n }\n \n &:active {\n transform: translateY(0);\n opacity: 0.95;\n }\n ";
|
|
1872
|
+
}, base$c.border.width[2], semantic$e.color.border.strong, base$c.spacing[1]);
|
|
1873
|
+
/**
|
|
1874
|
+
* CategoryBadge component for displaying transaction categories
|
|
1875
|
+
*
|
|
1876
|
+
* Supports 8 color options, 3 visual variants, optional icons, and interactive behavior.
|
|
1877
|
+
* Perfect for categorizing financial transactions or content.
|
|
1878
|
+
*
|
|
1879
|
+
* @example
|
|
1880
|
+
* ```tsx
|
|
1881
|
+
* <CategoryBadge color="orange" icon="restaurant">
|
|
1882
|
+
* Food & Dining
|
|
1883
|
+
* </CategoryBadge>
|
|
1884
|
+
*
|
|
1885
|
+
* <CategoryBadge
|
|
1886
|
+
* color="blue"
|
|
1887
|
+
* variant="outlined"
|
|
1888
|
+
* size="small"
|
|
1889
|
+
* onClick={() => filterByCategory('travel')}
|
|
1890
|
+
* >
|
|
1891
|
+
* Travel
|
|
1892
|
+
* </CategoryBadge>
|
|
1893
|
+
* ```
|
|
1894
|
+
*/
|
|
1895
|
+
var CategoryBadge = function CategoryBadge(_a) {
|
|
1896
|
+
var children = _a.children,
|
|
1897
|
+
_b = _a.color,
|
|
1898
|
+
color = _b === void 0 ? 'blue' : _b,
|
|
1899
|
+
_c = _a.variant,
|
|
1900
|
+
variant = _c === void 0 ? 'filled' : _c,
|
|
1901
|
+
_d = _a.size,
|
|
1902
|
+
size = _d === void 0 ? 'medium' : _d,
|
|
1903
|
+
icon = _a.icon,
|
|
1904
|
+
onClick = _a.onClick,
|
|
1905
|
+
_e = _a.disabled,
|
|
1906
|
+
disabled = _e === void 0 ? false : _e,
|
|
1907
|
+
dataTestId = _a["data-testid"],
|
|
1908
|
+
ariaLabel = _a["aria-label"];
|
|
1909
|
+
var hasClickHandler = Boolean(onClick);
|
|
1910
|
+
var isClickable = hasClickHandler && !disabled;
|
|
1911
|
+
var colorStyles = getColorStyles(color, variant);
|
|
1912
|
+
var sizeStyles = getSizeStyles$1(size);
|
|
1913
|
+
var cssProps = {
|
|
1914
|
+
'--category-badge-bg': colorStyles.backgroundColor,
|
|
1915
|
+
'--category-badge-color': colorStyles.color,
|
|
1916
|
+
'--category-badge-border': colorStyles.borderColor,
|
|
1917
|
+
'--category-badge-height': sizeStyles.height,
|
|
1918
|
+
'--category-badge-padding': sizeStyles.padding,
|
|
1919
|
+
'--category-badge-font': sizeStyles.font,
|
|
1920
|
+
'--category-badge-gap': sizeStyles.gap,
|
|
1921
|
+
'--category-badge-opacity': disabled ? '0.6' : '1',
|
|
1922
|
+
'--category-badge-cursor': disabled ? 'not-allowed' : isClickable ? 'pointer' : 'default'
|
|
1923
|
+
};
|
|
1924
|
+
var handleClick = function handleClick() {
|
|
1925
|
+
if (isClickable) {
|
|
1926
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
1927
|
+
}
|
|
1928
|
+
};
|
|
1929
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
1930
|
+
if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
|
|
1931
|
+
event.preventDefault();
|
|
1932
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
1933
|
+
}
|
|
1934
|
+
};
|
|
1935
|
+
return /*#__PURE__*/React.createElement(StyledCategoryBadge, {
|
|
1936
|
+
$color: color,
|
|
1937
|
+
$variant: variant,
|
|
1938
|
+
$size: size,
|
|
1939
|
+
$clickable: isClickable,
|
|
1940
|
+
$disabled: disabled,
|
|
1941
|
+
onClick: handleClick,
|
|
1942
|
+
onKeyDown: handleKeyDown,
|
|
1943
|
+
tabIndex: hasClickHandler ? 0 : undefined,
|
|
1944
|
+
role: hasClickHandler ? 'button' : undefined,
|
|
1945
|
+
"aria-label": ariaLabel,
|
|
1946
|
+
"aria-disabled": disabled,
|
|
1947
|
+
"data-testid": dataTestId,
|
|
1948
|
+
style: cssProps
|
|
1949
|
+
}, icon && /*#__PURE__*/React.createElement(Icon, {
|
|
1950
|
+
name: icon,
|
|
1951
|
+
size: sizeStyles.iconSize,
|
|
1952
|
+
"aria-hidden": "true"
|
|
1953
|
+
}), children);
|
|
1954
|
+
};
|
|
1955
|
+
CategoryBadge.displayName = 'CategoryBadge';
|
|
1956
|
+
var templateObject_1$C;
|
|
1710
1957
|
|
|
1711
1958
|
var chip = tokensData.component.chip;
|
|
1712
1959
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1767,14 +2014,14 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1767
2014
|
},
|
|
1768
2015
|
displayName: "ChipBase__BaseChipStyled",
|
|
1769
2016
|
componentId: "sc-moa6zc-0"
|
|
1770
|
-
})(templateObject_1$
|
|
2017
|
+
})(templateObject_1$B || (templateObject_1$B = __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"
|
|
1771
2018
|
// Icon container for selected indicator or leading icons
|
|
1772
2019
|
])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1773
2020
|
// Icon container for selected indicator or leading icons
|
|
1774
2021
|
var IconContainer = styled.span.withConfig({
|
|
1775
2022
|
displayName: "ChipBase__IconContainer",
|
|
1776
2023
|
componentId: "sc-moa6zc-1"
|
|
1777
|
-
})(templateObject_2$
|
|
2024
|
+
})(templateObject_2$p || (templateObject_2$p = __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"
|
|
1778
2025
|
// Close button for dismissible chips
|
|
1779
2026
|
])), tokensData.semantic.spacing.layout.sm);
|
|
1780
2027
|
// Close button for dismissible chips
|
|
@@ -1784,7 +2031,7 @@ var CloseButton = styled.button.withConfig({
|
|
|
1784
2031
|
},
|
|
1785
2032
|
displayName: "ChipBase__CloseButton",
|
|
1786
2033
|
componentId: "sc-moa6zc-2"
|
|
1787
|
-
})(templateObject_3$
|
|
2034
|
+
})(templateObject_3$m || (templateObject_3$m = __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"
|
|
1788
2035
|
// Wrapper component that applies styles via CSS custom properties
|
|
1789
2036
|
])), tokensData.semantic.spacing.layout.sm, function (props) {
|
|
1790
2037
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
@@ -1819,7 +2066,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1819
2066
|
style: __assign(__assign({}, cssProps), style)
|
|
1820
2067
|
}, htmlProps), children);
|
|
1821
2068
|
};
|
|
1822
|
-
var templateObject_1$
|
|
2069
|
+
var templateObject_1$B, templateObject_2$p, templateObject_3$m;
|
|
1823
2070
|
|
|
1824
2071
|
React.createElement;
|
|
1825
2072
|
/**
|
|
@@ -2063,32 +2310,32 @@ var spacing$3 = tokensData.semantic.spacing;
|
|
|
2063
2310
|
var StyledContainer$2 = styled.div.withConfig({
|
|
2064
2311
|
displayName: "Container__StyledContainer",
|
|
2065
2312
|
componentId: "sc-17dbj6n-0"
|
|
2066
|
-
})(templateObject_1$
|
|
2313
|
+
})(templateObject_1$A || (templateObject_1$A = __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']);
|
|
2067
2314
|
var Container = function Container(_a) {
|
|
2068
2315
|
var children = _a.children,
|
|
2069
2316
|
props = __rest(_a, ["children"]);
|
|
2070
2317
|
return /*#__PURE__*/React.createElement(StyledContainer$2, props, children);
|
|
2071
2318
|
};
|
|
2072
|
-
var templateObject_1$
|
|
2319
|
+
var templateObject_1$A;
|
|
2073
2320
|
|
|
2074
2321
|
React.createElement;
|
|
2075
|
-
var base$
|
|
2322
|
+
var base$b = tokensData.base;
|
|
2076
2323
|
var PictureWrapper = styled.div.withConfig({
|
|
2077
2324
|
displayName: "Picture__PictureWrapper",
|
|
2078
2325
|
componentId: "sc-11d9tei-0"
|
|
2079
|
-
})(templateObject_1$
|
|
2326
|
+
})(templateObject_1$z || (templateObject_1$z = __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);
|
|
2080
2327
|
var ImageLink = styled.a.withConfig({
|
|
2081
2328
|
displayName: "Picture__ImageLink",
|
|
2082
2329
|
componentId: "sc-11d9tei-1"
|
|
2083
|
-
})(templateObject_2$
|
|
2330
|
+
})(templateObject_2$o || (templateObject_2$o = __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$b.duration.normal, base$b.easing.easeInOut);
|
|
2084
2331
|
var ImageButton = styled.button.withConfig({
|
|
2085
2332
|
displayName: "Picture__ImageButton",
|
|
2086
2333
|
componentId: "sc-11d9tei-2"
|
|
2087
|
-
})(templateObject_3$
|
|
2334
|
+
})(templateObject_3$l || (templateObject_3$l = __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$b.duration.normal, base$b.easing.easeInOut);
|
|
2088
2335
|
var StyledImage = styled.img.withConfig({
|
|
2089
2336
|
displayName: "Picture__StyledImage",
|
|
2090
2337
|
componentId: "sc-11d9tei-3"
|
|
2091
|
-
})(templateObject_4$
|
|
2338
|
+
})(templateObject_4$h || (templateObject_4$h = __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$b.border.radius[2]);
|
|
2092
2339
|
var Picture = function Picture(_a) {
|
|
2093
2340
|
var title = _a.title,
|
|
2094
2341
|
src = _a.src,
|
|
@@ -2115,7 +2362,7 @@ var Picture = function Picture(_a) {
|
|
|
2115
2362
|
"aria-label": "Read more about ".concat(title)
|
|
2116
2363
|
}, image) : image);
|
|
2117
2364
|
};
|
|
2118
|
-
var templateObject_1$
|
|
2365
|
+
var templateObject_1$z, templateObject_2$o, templateObject_3$l, templateObject_4$h;
|
|
2119
2366
|
|
|
2120
2367
|
React.createElement;
|
|
2121
2368
|
var _a$4 = tokensData.semantic,
|
|
@@ -2124,7 +2371,7 @@ var _a$4 = tokensData.semantic,
|
|
|
2124
2371
|
var TimeStyled = styled.time.withConfig({
|
|
2125
2372
|
displayName: "DateFormatter__TimeStyled",
|
|
2126
2373
|
componentId: "sc-5464cc-0"
|
|
2127
|
-
})(templateObject_1$
|
|
2374
|
+
})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
2128
2375
|
/**
|
|
2129
2376
|
* Formats a date with smart relative/absolute logic
|
|
2130
2377
|
*/])), typography$1.label, color$2.text.subdued);
|
|
@@ -2172,7 +2419,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
2172
2419
|
"data-testid": dataTestId
|
|
2173
2420
|
}, displayText);
|
|
2174
2421
|
};
|
|
2175
|
-
var templateObject_1$
|
|
2422
|
+
var templateObject_1$y;
|
|
2176
2423
|
|
|
2177
2424
|
React.createElement;
|
|
2178
2425
|
var motion = tokensData.semantic.motion,
|
|
@@ -2183,7 +2430,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2183
2430
|
},
|
|
2184
2431
|
displayName: "IconButton__IconButtonStyled",
|
|
2185
2432
|
componentId: "sc-k8b14t-0"
|
|
2186
|
-
})(templateObject_1$
|
|
2433
|
+
})(templateObject_1$x || (templateObject_1$x = __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) {
|
|
2187
2434
|
var $variant = _a.$variant;
|
|
2188
2435
|
switch ($variant) {
|
|
2189
2436
|
case 'primary':
|
|
@@ -2294,7 +2541,7 @@ var IconButton = function IconButton(_a) {
|
|
|
2294
2541
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2295
2542
|
}));
|
|
2296
2543
|
};
|
|
2297
|
-
var templateObject_1$
|
|
2544
|
+
var templateObject_1$x;
|
|
2298
2545
|
|
|
2299
2546
|
React.createElement;
|
|
2300
2547
|
var StyledWrapper = styled.span.withConfig({
|
|
@@ -2303,7 +2550,7 @@ var StyledWrapper = styled.span.withConfig({
|
|
|
2303
2550
|
},
|
|
2304
2551
|
displayName: "MoneyDisplay__StyledWrapper",
|
|
2305
2552
|
componentId: "sc-1mddej3-0"
|
|
2306
|
-
})(templateObject_1$
|
|
2553
|
+
})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: inline-block;\n text-align: ", ";\n font-weight: ", ";\n"], ["\n display: inline-block;\n text-align: ", ";\n font-weight: ", ";\n"
|
|
2307
2554
|
// Map size to Typography variant
|
|
2308
2555
|
])), function (_a) {
|
|
2309
2556
|
var $align = _a.$align;
|
|
@@ -2400,7 +2647,7 @@ var MoneyDisplay = function MoneyDisplay(_a) {
|
|
|
2400
2647
|
as: "span"
|
|
2401
2648
|
}, displayText));
|
|
2402
2649
|
};
|
|
2403
|
-
var templateObject_1$
|
|
2650
|
+
var templateObject_1$w;
|
|
2404
2651
|
|
|
2405
2652
|
React.createElement;
|
|
2406
2653
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -2409,10 +2656,10 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
2409
2656
|
},
|
|
2410
2657
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2411
2658
|
componentId: "sc-1nco33q-0"
|
|
2412
|
-
})(templateObject_3$
|
|
2413
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_1$
|
|
2659
|
+
})(templateObject_3$k || (templateObject_3$k = __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) {
|
|
2660
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_1$v || (templateObject_1$v = __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);
|
|
2414
2661
|
}, function (props) {
|
|
2415
|
-
return props.$variant === 'vertical' && styled.css(templateObject_2$
|
|
2662
|
+
return props.$variant === 'vertical' && styled.css(templateObject_2$n || (templateObject_2$n = __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);
|
|
2416
2663
|
});
|
|
2417
2664
|
var ProgressBarFill = styled.div.withConfig({
|
|
2418
2665
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2420,7 +2667,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2420
2667
|
},
|
|
2421
2668
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2422
2669
|
componentId: "sc-1nco33q-1"
|
|
2423
|
-
})(templateObject_7$
|
|
2670
|
+
})(templateObject_7$a || (templateObject_7$a = __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) {
|
|
2424
2671
|
var backgroundColor;
|
|
2425
2672
|
switch (props.$color) {
|
|
2426
2673
|
case 'success':
|
|
@@ -2434,11 +2681,11 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2434
2681
|
backgroundColor = tokensData.semantic.color.background.interactive;
|
|
2435
2682
|
break;
|
|
2436
2683
|
}
|
|
2437
|
-
return styled.css(templateObject_4$
|
|
2684
|
+
return styled.css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2438
2685
|
}, function (props) {
|
|
2439
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_5$
|
|
2686
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2440
2687
|
}, function (props) {
|
|
2441
|
-
return props.$variant === 'vertical' && styled.css(templateObject_6$
|
|
2688
|
+
return props.$variant === 'vertical' && styled.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2442
2689
|
});
|
|
2443
2690
|
var ProgressBar = function ProgressBar(_a) {
|
|
2444
2691
|
var value = _a.value,
|
|
@@ -2464,16 +2711,16 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2464
2711
|
$color: color
|
|
2465
2712
|
}));
|
|
2466
2713
|
};
|
|
2467
|
-
var templateObject_1$
|
|
2714
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$c, templateObject_7$a;
|
|
2468
2715
|
|
|
2469
2716
|
React.createElement;
|
|
2470
|
-
var StyledDivider = styled.div.withConfig({
|
|
2717
|
+
var StyledDivider$1 = styled.div.withConfig({
|
|
2471
2718
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2472
2719
|
return !prop.startsWith('$');
|
|
2473
2720
|
},
|
|
2474
2721
|
displayName: "Divider__StyledDivider",
|
|
2475
2722
|
componentId: "sc-1l0c8ja-0"
|
|
2476
|
-
})(templateObject_1$
|
|
2723
|
+
})(templateObject_1$u || (templateObject_1$u = __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"
|
|
2477
2724
|
/**
|
|
2478
2725
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2479
2726
|
*
|
|
@@ -2577,7 +2824,7 @@ var Divider = function Divider(_a) {
|
|
|
2577
2824
|
_d = _a.orientation,
|
|
2578
2825
|
orientation = _d === void 0 ? 'horizontal' : _d,
|
|
2579
2826
|
dataTestId = _a["data-testid"];
|
|
2580
|
-
return /*#__PURE__*/React.createElement(StyledDivider, {
|
|
2827
|
+
return /*#__PURE__*/React.createElement(StyledDivider$1, {
|
|
2581
2828
|
$variant: variant,
|
|
2582
2829
|
$size: size,
|
|
2583
2830
|
$orientation: orientation,
|
|
@@ -2586,7 +2833,7 @@ var Divider = function Divider(_a) {
|
|
|
2586
2833
|
"aria-orientation": orientation
|
|
2587
2834
|
});
|
|
2588
2835
|
};
|
|
2589
|
-
var templateObject_1$
|
|
2836
|
+
var templateObject_1$u;
|
|
2590
2837
|
|
|
2591
2838
|
React.createElement;
|
|
2592
2839
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2595,7 +2842,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2595
2842
|
},
|
|
2596
2843
|
displayName: "Stack__StyledStack",
|
|
2597
2844
|
componentId: "sc-1ehkxgy-0"
|
|
2598
|
-
})(templateObject_1$
|
|
2845
|
+
})(templateObject_1$t || (templateObject_1$t = __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"
|
|
2599
2846
|
// Helper function to convert gap prop to CSS value
|
|
2600
2847
|
])));
|
|
2601
2848
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2633,17 +2880,180 @@ var Stack = function Stack(_a) {
|
|
|
2633
2880
|
"data-testid": dataTestId
|
|
2634
2881
|
}, children);
|
|
2635
2882
|
};
|
|
2636
|
-
var templateObject_1$
|
|
2883
|
+
var templateObject_1$t;
|
|
2637
2884
|
|
|
2638
2885
|
React.createElement;
|
|
2639
|
-
var semantic$
|
|
2886
|
+
var semantic$d = tokensData.semantic,
|
|
2887
|
+
base$a = tokensData.base;
|
|
2888
|
+
var scaleIn = styled.keyframes(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n"], ["\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n"])));
|
|
2889
|
+
var getStatusConfig = function getStatusConfig(status) {
|
|
2890
|
+
var configs = {
|
|
2891
|
+
pending: {
|
|
2892
|
+
color: semantic$d.color.status.pending,
|
|
2893
|
+
bgColor: semantic$d.color.status['pending-bg'],
|
|
2894
|
+
icon: 'refresh',
|
|
2895
|
+
// Fallback until 'clock' icon is added
|
|
2896
|
+
label: 'Pending'
|
|
2897
|
+
},
|
|
2898
|
+
completed: {
|
|
2899
|
+
color: semantic$d.color.status.completed,
|
|
2900
|
+
bgColor: semantic$d.color.status['completed-bg'],
|
|
2901
|
+
icon: 'check',
|
|
2902
|
+
label: 'Completed'
|
|
2903
|
+
},
|
|
2904
|
+
failed: {
|
|
2905
|
+
color: semantic$d.color.status.failed,
|
|
2906
|
+
bgColor: semantic$d.color.status['failed-bg'],
|
|
2907
|
+
icon: 'close',
|
|
2908
|
+
label: 'Failed'
|
|
2909
|
+
},
|
|
2910
|
+
cancelled: {
|
|
2911
|
+
color: semantic$d.color.status.cancelled,
|
|
2912
|
+
bgColor: semantic$d.color.status['cancelled-bg'],
|
|
2913
|
+
icon: 'cancel',
|
|
2914
|
+
label: 'Cancelled'
|
|
2915
|
+
},
|
|
2916
|
+
processing: {
|
|
2917
|
+
color: semantic$d.color.status.processing,
|
|
2918
|
+
bgColor: semantic$d.color.status['processing-bg'],
|
|
2919
|
+
icon: 'refresh',
|
|
2920
|
+
label: 'Processing'
|
|
2921
|
+
},
|
|
2922
|
+
scheduled: {
|
|
2923
|
+
color: semantic$d.color.status.scheduled,
|
|
2924
|
+
bgColor: semantic$d.color.status['scheduled-bg'],
|
|
2925
|
+
icon: 'bell',
|
|
2926
|
+
// Fallback until 'calendar' icon is added
|
|
2927
|
+
label: 'Scheduled'
|
|
2928
|
+
}
|
|
2929
|
+
};
|
|
2930
|
+
return configs[status];
|
|
2931
|
+
};
|
|
2932
|
+
var getSizeStyles = function getSizeStyles(size) {
|
|
2933
|
+
if (size === 'small') {
|
|
2934
|
+
return {
|
|
2935
|
+
height: '20px',
|
|
2936
|
+
padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[2]),
|
|
2937
|
+
font: semantic$d.typography.caption,
|
|
2938
|
+
gap: base$a.spacing[1],
|
|
2939
|
+
iconSize: 'xs'
|
|
2940
|
+
};
|
|
2941
|
+
}
|
|
2942
|
+
// medium
|
|
2943
|
+
return {
|
|
2944
|
+
height: '24px',
|
|
2945
|
+
padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[3]),
|
|
2946
|
+
font: semantic$d.typography.small,
|
|
2947
|
+
gap: base$a.spacing[1],
|
|
2948
|
+
iconSize: 'sm'
|
|
2949
|
+
};
|
|
2950
|
+
};
|
|
2951
|
+
var StyledStatusBadge = styled.span.withConfig({
|
|
2952
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2953
|
+
return !prop.startsWith('$');
|
|
2954
|
+
},
|
|
2955
|
+
displayName: "StatusBadge__StyledStatusBadge",
|
|
2956
|
+
componentId: "sc-1paksgb-0"
|
|
2957
|
+
})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: ", ";\n white-space: nowrap;\n user-select: none;\n animation: ", " 0.2s ease-out;\n \n /* Apply CSS custom properties */\n background-color: var(--status-badge-bg);\n color: var(--status-badge-color);\n height: var(--status-badge-height);\n padding: var(--status-badge-padding);\n font: var(--status-badge-font);\n gap: var(--status-badge-gap);\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: ", ";\n white-space: nowrap;\n user-select: none;\n animation: ", " 0.2s ease-out;\n \n /* Apply CSS custom properties */\n background-color: var(--status-badge-bg);\n color: var(--status-badge-color);\n height: var(--status-badge-height);\n padding: var(--status-badge-padding);\n font: var(--status-badge-font);\n gap: var(--status-badge-gap);\n"])), base$a.border.radius.circle, base$a.fontWeight[3], scaleIn);
|
|
2958
|
+
var ScreenReaderOnly = styled.span.withConfig({
|
|
2959
|
+
displayName: "StatusBadge__ScreenReaderOnly",
|
|
2960
|
+
componentId: "sc-1paksgb-1"
|
|
2961
|
+
})(templateObject_3$j || (templateObject_3$j = __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"
|
|
2962
|
+
/**
|
|
2963
|
+
* StatusBadge component for displaying transaction or task status
|
|
2964
|
+
*
|
|
2965
|
+
* Displays status with appropriate color, icon, and supports live updates for screen readers.
|
|
2966
|
+
* Maps to 6 common status types with semantic color tokens.
|
|
2967
|
+
*
|
|
2968
|
+
* @example
|
|
2969
|
+
* ```tsx
|
|
2970
|
+
* <StatusBadge status="completed" />
|
|
2971
|
+
*
|
|
2972
|
+
* <StatusBadge
|
|
2973
|
+
* status="pending"
|
|
2974
|
+
* label="Awaiting approval"
|
|
2975
|
+
* size="small"
|
|
2976
|
+
* />
|
|
2977
|
+
*
|
|
2978
|
+
* <StatusBadge
|
|
2979
|
+
* status="failed"
|
|
2980
|
+
* showIcon={false}
|
|
2981
|
+
* liveRegion={true}
|
|
2982
|
+
* />
|
|
2983
|
+
* ```
|
|
2984
|
+
*/])));
|
|
2985
|
+
/**
|
|
2986
|
+
* StatusBadge component for displaying transaction or task status
|
|
2987
|
+
*
|
|
2988
|
+
* Displays status with appropriate color, icon, and supports live updates for screen readers.
|
|
2989
|
+
* Maps to 6 common status types with semantic color tokens.
|
|
2990
|
+
*
|
|
2991
|
+
* @example
|
|
2992
|
+
* ```tsx
|
|
2993
|
+
* <StatusBadge status="completed" />
|
|
2994
|
+
*
|
|
2995
|
+
* <StatusBadge
|
|
2996
|
+
* status="pending"
|
|
2997
|
+
* label="Awaiting approval"
|
|
2998
|
+
* size="small"
|
|
2999
|
+
* />
|
|
3000
|
+
*
|
|
3001
|
+
* <StatusBadge
|
|
3002
|
+
* status="failed"
|
|
3003
|
+
* showIcon={false}
|
|
3004
|
+
* liveRegion={true}
|
|
3005
|
+
* />
|
|
3006
|
+
* ```
|
|
3007
|
+
*/
|
|
3008
|
+
var StatusBadge = function StatusBadge(_a) {
|
|
3009
|
+
var status = _a.status,
|
|
3010
|
+
label = _a.label,
|
|
3011
|
+
_b = _a.size,
|
|
3012
|
+
size = _b === void 0 ? 'medium' : _b,
|
|
3013
|
+
_c = _a.showIcon,
|
|
3014
|
+
showIcon = _c === void 0 ? true : _c,
|
|
3015
|
+
_d = _a.liveRegion,
|
|
3016
|
+
liveRegion = _d === void 0 ? true : _d,
|
|
3017
|
+
dataTestId = _a["data-testid"],
|
|
3018
|
+
ariaLabel = _a["aria-label"];
|
|
3019
|
+
var statusConfig = getStatusConfig(status);
|
|
3020
|
+
var sizeStyles = getSizeStyles(size);
|
|
3021
|
+
var displayLabel = label || statusConfig.label;
|
|
3022
|
+
var cssProps = {
|
|
3023
|
+
'--status-badge-bg': statusConfig.bgColor,
|
|
3024
|
+
'--status-badge-color': statusConfig.color,
|
|
3025
|
+
'--status-badge-height': sizeStyles.height,
|
|
3026
|
+
'--status-badge-padding': sizeStyles.padding,
|
|
3027
|
+
'--status-badge-font': sizeStyles.font,
|
|
3028
|
+
'--status-badge-gap': sizeStyles.gap
|
|
3029
|
+
};
|
|
3030
|
+
return /*#__PURE__*/React.createElement(StyledStatusBadge, {
|
|
3031
|
+
$status: status,
|
|
3032
|
+
$size: size,
|
|
3033
|
+
role: "status",
|
|
3034
|
+
"aria-label": ariaLabel || "Status: ".concat(displayLabel),
|
|
3035
|
+
"aria-live": liveRegion ? 'polite' : undefined,
|
|
3036
|
+
"aria-atomic": liveRegion ? 'true' : undefined,
|
|
3037
|
+
"data-testid": dataTestId,
|
|
3038
|
+
style: cssProps
|
|
3039
|
+
}, showIcon && /*#__PURE__*/React.createElement(Icon, {
|
|
3040
|
+
name: statusConfig.icon,
|
|
3041
|
+
size: sizeStyles.iconSize,
|
|
3042
|
+
"aria-hidden": "true"
|
|
3043
|
+
}), displayLabel, /*#__PURE__*/React.createElement(ScreenReaderOnly, null, status, " status"));
|
|
3044
|
+
};
|
|
3045
|
+
StatusBadge.displayName = 'StatusBadge';
|
|
3046
|
+
var templateObject_1$s, templateObject_2$m, templateObject_3$j;
|
|
3047
|
+
|
|
3048
|
+
React.createElement;
|
|
3049
|
+
var semantic$c = tokensData.semantic;
|
|
2640
3050
|
var StyledTag = styled.span.withConfig({
|
|
2641
3051
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2642
3052
|
return !prop.startsWith('$');
|
|
2643
3053
|
},
|
|
2644
3054
|
displayName: "Tag__StyledTag",
|
|
2645
3055
|
componentId: "sc-lzfmti-0"
|
|
2646
|
-
})(templateObject_1$
|
|
3056
|
+
})(templateObject_1$r || (templateObject_1$r = __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"
|
|
2647
3057
|
/**
|
|
2648
3058
|
* Tag component for categorizing and labeling content
|
|
2649
3059
|
*
|
|
@@ -2653,33 +3063,33 @@ var StyledTag = styled.span.withConfig({
|
|
|
2653
3063
|
var $variant = _a.$variant;
|
|
2654
3064
|
switch ($variant) {
|
|
2655
3065
|
case 'interactive':
|
|
2656
|
-
return semantic$
|
|
3066
|
+
return semantic$c.color.background['interactive-subtle'];
|
|
2657
3067
|
case 'success':
|
|
2658
|
-
return semantic$
|
|
3068
|
+
return semantic$c.color.background['success-subtle'];
|
|
2659
3069
|
case 'warning':
|
|
2660
|
-
return semantic$
|
|
3070
|
+
return semantic$c.color.background['warning-subtle'];
|
|
2661
3071
|
case 'error':
|
|
2662
|
-
return semantic$
|
|
3072
|
+
return semantic$c.color.background['error-subtle'];
|
|
2663
3073
|
case 'emphasis':
|
|
2664
|
-
return semantic$
|
|
3074
|
+
return semantic$c.color.background.emphasis;
|
|
2665
3075
|
default:
|
|
2666
|
-
return semantic$
|
|
3076
|
+
return semantic$c.color.background.surface;
|
|
2667
3077
|
}
|
|
2668
3078
|
}, function (_a) {
|
|
2669
3079
|
var $variant = _a.$variant;
|
|
2670
3080
|
switch ($variant) {
|
|
2671
3081
|
case 'interactive':
|
|
2672
|
-
return semantic$
|
|
3082
|
+
return semantic$c.color.text.interactive;
|
|
2673
3083
|
case 'success':
|
|
2674
|
-
return semantic$
|
|
3084
|
+
return semantic$c.color.text.success;
|
|
2675
3085
|
case 'warning':
|
|
2676
|
-
return semantic$
|
|
3086
|
+
return semantic$c.color.text.warning;
|
|
2677
3087
|
case 'error':
|
|
2678
|
-
return semantic$
|
|
3088
|
+
return semantic$c.color.text.error;
|
|
2679
3089
|
case 'emphasis':
|
|
2680
|
-
return semantic$
|
|
3090
|
+
return semantic$c.color.text.inverse;
|
|
2681
3091
|
default:
|
|
2682
|
-
return semantic$
|
|
3092
|
+
return semantic$c.color.text["default"];
|
|
2683
3093
|
}
|
|
2684
3094
|
}, function (_a) {
|
|
2685
3095
|
var $variant = _a.$variant,
|
|
@@ -2687,17 +3097,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2687
3097
|
if (!$border) return 'none';
|
|
2688
3098
|
switch ($variant) {
|
|
2689
3099
|
case 'interactive':
|
|
2690
|
-
return "1px solid ".concat(semantic$
|
|
3100
|
+
return "1px solid ".concat(semantic$c.color.border.interactive);
|
|
2691
3101
|
case 'success':
|
|
2692
|
-
return "1px solid ".concat(semantic$
|
|
3102
|
+
return "1px solid ".concat(semantic$c.color.border.success);
|
|
2693
3103
|
case 'warning':
|
|
2694
|
-
return "1px solid ".concat(semantic$
|
|
3104
|
+
return "1px solid ".concat(semantic$c.color.border.warning);
|
|
2695
3105
|
case 'error':
|
|
2696
|
-
return "1px solid ".concat(semantic$
|
|
3106
|
+
return "1px solid ".concat(semantic$c.color.border.error);
|
|
2697
3107
|
case 'emphasis':
|
|
2698
|
-
return "1px solid ".concat(semantic$
|
|
3108
|
+
return "1px solid ".concat(semantic$c.color.background.emphasis);
|
|
2699
3109
|
default:
|
|
2700
|
-
return "1px solid ".concat(semantic$
|
|
3110
|
+
return "1px solid ".concat(semantic$c.color.border["default"]);
|
|
2701
3111
|
}
|
|
2702
3112
|
});
|
|
2703
3113
|
/**
|
|
@@ -2724,40 +3134,40 @@ var Tag = function Tag(_a) {
|
|
|
2724
3134
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
2725
3135
|
}, props), children);
|
|
2726
3136
|
};
|
|
2727
|
-
var templateObject_1$
|
|
3137
|
+
var templateObject_1$r;
|
|
2728
3138
|
|
|
2729
3139
|
React.createElement;
|
|
2730
3140
|
var StyledCard = styled.div.withConfig({
|
|
2731
3141
|
displayName: "AccountCard__StyledCard",
|
|
2732
3142
|
componentId: "sc-1erp7zn-0"
|
|
2733
|
-
})(templateObject_1$
|
|
3143
|
+
})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n min-width: 300px;\n min-height: 200px;\n padding: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: all 0.2s ease;\n \n ", "\n"], ["\n min-width: 300px;\n min-height: 200px;\n padding: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: all 0.2s ease;\n \n ", "\n"])), tokensData.semantic.spacing.layout.lg, tokensData.semantic.color.background.surface, tokensData.semantic.color.border["default"], tokensData.base.border.radius[5], tokensData.base.shadow[3], function (_a) {
|
|
2734
3144
|
var $clickable = _a.$clickable;
|
|
2735
3145
|
return $clickable && "\n cursor: pointer;\n \n &:hover {\n box-shadow: ".concat(tokensData.base.shadow[4], ";\n transform: translateY(-2px);\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n outline-offset: 2px;\n }\n ");
|
|
2736
3146
|
});
|
|
2737
|
-
var StyledHeader$
|
|
3147
|
+
var StyledHeader$2 = styled.div.withConfig({
|
|
2738
3148
|
displayName: "AccountCard__StyledHeader",
|
|
2739
3149
|
componentId: "sc-1erp7zn-1"
|
|
2740
|
-
})(templateObject_2$
|
|
3150
|
+
})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.md);
|
|
2741
3151
|
var StyledIconWrapper = styled.div.withConfig({
|
|
2742
3152
|
displayName: "AccountCard__StyledIconWrapper",
|
|
2743
3153
|
componentId: "sc-1erp7zn-2"
|
|
2744
|
-
})(templateObject_3$
|
|
3154
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: ", ";\n color: ", ";\n"], ["\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: ", ";\n color: ", ";\n"])), tokensData.semantic.color.background.interactive, tokensData.base.border.radius[3], tokensData.semantic.color.icon.interactive);
|
|
2745
3155
|
var StyledBalanceSection = styled.div.withConfig({
|
|
2746
3156
|
displayName: "AccountCard__StyledBalanceSection",
|
|
2747
3157
|
componentId: "sc-1erp7zn-3"
|
|
2748
|
-
})(templateObject_4$
|
|
3158
|
+
})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.lg);
|
|
2749
3159
|
var StyledTrendSection = styled.div.withConfig({
|
|
2750
3160
|
displayName: "AccountCard__StyledTrendSection",
|
|
2751
3161
|
componentId: "sc-1erp7zn-4"
|
|
2752
|
-
})(templateObject_5$
|
|
3162
|
+
})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n margin-top: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n margin-top: ", ";\n"])), tokensData.semantic.spacing.layout.xs, tokensData.semantic.spacing.layout.sm);
|
|
2753
3163
|
var StyledActions$1 = styled.div.withConfig({
|
|
2754
3164
|
displayName: "AccountCard__StyledActions",
|
|
2755
3165
|
componentId: "sc-1erp7zn-5"
|
|
2756
|
-
})(templateObject_6$
|
|
3166
|
+
})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n margin-top: auto;\n \n & > * {\n flex: 1;\n }\n"], ["\n display: flex;\n gap: ", ";\n margin-top: auto;\n \n & > * {\n flex: 1;\n }\n"])), tokensData.semantic.spacing.layout.sm);
|
|
2757
3167
|
var StyledStackWrapper = styled.div.withConfig({
|
|
2758
3168
|
displayName: "AccountCard__StyledStackWrapper",
|
|
2759
3169
|
componentId: "sc-1erp7zn-6"
|
|
2760
|
-
})(templateObject_7$
|
|
3170
|
+
})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n height: 100%;\n min-height: 168px;\n"], ["\n height: 100%;\n min-height: 168px;\n"
|
|
2761
3171
|
// Map account types to icon names (using placeholders)
|
|
2762
3172
|
])));
|
|
2763
3173
|
// Map account types to icon names (using placeholders)
|
|
@@ -2828,7 +3238,7 @@ var AccountCard = function AccountCard(_a) {
|
|
|
2828
3238
|
}, /*#__PURE__*/React.createElement(StyledStackWrapper, null, /*#__PURE__*/React.createElement(Stack, {
|
|
2829
3239
|
direction: "column",
|
|
2830
3240
|
gap: "none"
|
|
2831
|
-
}, /*#__PURE__*/React.createElement(StyledHeader$
|
|
3241
|
+
}, /*#__PURE__*/React.createElement(StyledHeader$2, null, /*#__PURE__*/React.createElement(Stack, {
|
|
2832
3242
|
direction: "row",
|
|
2833
3243
|
gap: "md",
|
|
2834
3244
|
alignItems: "center"
|
|
@@ -2886,11 +3296,249 @@ var AccountCard = function AccountCard(_a) {
|
|
|
2886
3296
|
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined
|
|
2887
3297
|
}, secondaryAction.label)))));
|
|
2888
3298
|
};
|
|
2889
|
-
var templateObject_1$
|
|
3299
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$c, templateObject_6$b, templateObject_7$9;
|
|
2890
3300
|
|
|
2891
3301
|
React.createElement;
|
|
2892
|
-
var semantic$
|
|
2893
|
-
base$
|
|
3302
|
+
var semantic$b = tokensData.semantic,
|
|
3303
|
+
base$9 = tokensData.base;
|
|
3304
|
+
var slideUp = styled.keyframes(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
3305
|
+
var fadeIn$1 = styled.keyframes(templateObject_2$k || (templateObject_2$k = __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"])));
|
|
3306
|
+
var StyledOverlay$1 = styled.div.withConfig({
|
|
3307
|
+
displayName: "ActionSheet__StyledOverlay",
|
|
3308
|
+
componentId: "sc-regbol-0"
|
|
3309
|
+
})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9999;\n animation: ", " 0.2s ease-out;\n"], ["\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9999;\n animation: ", " 0.2s ease-out;\n"])), fadeIn$1);
|
|
3310
|
+
var StyledActionSheet = styled.div.withConfig({
|
|
3311
|
+
displayName: "ActionSheet__StyledActionSheet",
|
|
3312
|
+
componentId: "sc-regbol-1"
|
|
3313
|
+
})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n box-shadow: ", ";\n max-height: 90vh;\n overflow-y: auto;\n z-index: 10000;\n animation: ", " 0.3s ease-out;\n"], ["\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n box-shadow: ", ";\n max-height: 90vh;\n overflow-y: auto;\n z-index: 10000;\n animation: ", " 0.3s ease-out;\n"])), semantic$b.color.background.subtle, base$9.border.radius[4], base$9.border.radius[4], base$9.shadow[4], slideUp);
|
|
3314
|
+
var StyledHeader$1 = styled.div.withConfig({
|
|
3315
|
+
displayName: "ActionSheet__StyledHeader",
|
|
3316
|
+
componentId: "sc-regbol-2"
|
|
3317
|
+
})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", " solid ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", " solid ", ";\n"])), base$9.spacing[4], base$9.spacing[4], base$9.spacing[3], base$9.border.width[1], semantic$b.color.border["default"]);
|
|
3318
|
+
var StyledHeaderContent = styled.div.withConfig({
|
|
3319
|
+
displayName: "ActionSheet__StyledHeaderContent",
|
|
3320
|
+
componentId: "sc-regbol-3"
|
|
3321
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
3322
|
+
var StyledCloseButton = styled.button.withConfig({
|
|
3323
|
+
displayName: "ActionSheet__StyledCloseButton",
|
|
3324
|
+
componentId: "sc-regbol-4"
|
|
3325
|
+
})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"])), base$9.spacing[2], semantic$b.color.icon.subdued, base$9.border.radius[2], semantic$b.motion.hover, base$9.spacing[2], semantic$b.color.icon["default"], semantic$b.color.background.surface, base$9.border.width[2], semantic$b.color.border.strong, base$9.spacing[1]);
|
|
3326
|
+
var StyledActionsList = styled.div.withConfig({
|
|
3327
|
+
displayName: "ActionSheet__StyledActionsList",
|
|
3328
|
+
componentId: "sc-regbol-5"
|
|
3329
|
+
})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n padding: ", " 0;\n"], ["\n padding: ", " 0;\n"])), base$9.spacing[2]);
|
|
3330
|
+
var StyledActionButton = styled.button.withConfig({
|
|
3331
|
+
displayName: "ActionSheet__StyledActionButton",
|
|
3332
|
+
componentId: "sc-regbol-6"
|
|
3333
|
+
})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n text-align: left;\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n \n &:active:not(:disabled) {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n text-align: left;\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n \n &:active:not(:disabled) {\n background-color: ", ";\n }\n"])), base$9.spacing[3], base$9.spacing[3], base$9.spacing[4], semantic$b.typography.body, semantic$b.motion.hover, function (props) {
|
|
3334
|
+
return props.$destructive && "\n color: ".concat(semantic$b.color.text.error, ";\n ");
|
|
3335
|
+
}, function (props) {
|
|
3336
|
+
return props.$disabled && "\n color: ".concat(semantic$b.color.text.disabled, ";\n cursor: not-allowed;\n ");
|
|
3337
|
+
}, semantic$b.color.background['interactive-subtle'], base$9.border.width[2], semantic$b.color.border.strong, base$9.spacing[1], semantic$b.color.background.surface);
|
|
3338
|
+
var StyledDivider = styled.div.withConfig({
|
|
3339
|
+
displayName: "ActionSheet__StyledDivider",
|
|
3340
|
+
componentId: "sc-regbol-7"
|
|
3341
|
+
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n height: ", ";\n background-color: ", ";\n margin: ", " ", ";\n"], ["\n height: ", ";\n background-color: ", ";\n margin: ", " ", ";\n"
|
|
3342
|
+
/**
|
|
3343
|
+
* ActionSheet component for bottom sheet modals
|
|
3344
|
+
*
|
|
3345
|
+
* Displays a modal action sheet that slides up from the bottom,
|
|
3346
|
+
* providing a list of actions for the user to choose from.
|
|
3347
|
+
* Includes focus trapping, keyboard navigation, and accessibility features.
|
|
3348
|
+
*
|
|
3349
|
+
* @example
|
|
3350
|
+
* ```tsx
|
|
3351
|
+
* const [isOpen, setIsOpen] = useState(false)
|
|
3352
|
+
*
|
|
3353
|
+
* <ActionSheet
|
|
3354
|
+
* isOpen={isOpen}
|
|
3355
|
+
* onClose={() => setIsOpen(false)}
|
|
3356
|
+
* title="Choose an action"
|
|
3357
|
+
* actions={[
|
|
3358
|
+
* {
|
|
3359
|
+
* id: 'edit',
|
|
3360
|
+
* label: 'Edit',
|
|
3361
|
+
* icon: 'edit',
|
|
3362
|
+
* onSelect: () => console.log('Edit')
|
|
3363
|
+
* },
|
|
3364
|
+
* {
|
|
3365
|
+
* id: 'delete',
|
|
3366
|
+
* label: 'Delete',
|
|
3367
|
+
* icon: 'trash',
|
|
3368
|
+
* destructive: true,
|
|
3369
|
+
* onSelect: () => console.log('Delete')
|
|
3370
|
+
* }
|
|
3371
|
+
* ]}
|
|
3372
|
+
* />
|
|
3373
|
+
* ```
|
|
3374
|
+
*/])), base$9.border.width[1], semantic$b.color.border["default"], base$9.spacing[2], base$9.spacing[4]);
|
|
3375
|
+
/**
|
|
3376
|
+
* ActionSheet component for bottom sheet modals
|
|
3377
|
+
*
|
|
3378
|
+
* Displays a modal action sheet that slides up from the bottom,
|
|
3379
|
+
* providing a list of actions for the user to choose from.
|
|
3380
|
+
* Includes focus trapping, keyboard navigation, and accessibility features.
|
|
3381
|
+
*
|
|
3382
|
+
* @example
|
|
3383
|
+
* ```tsx
|
|
3384
|
+
* const [isOpen, setIsOpen] = useState(false)
|
|
3385
|
+
*
|
|
3386
|
+
* <ActionSheet
|
|
3387
|
+
* isOpen={isOpen}
|
|
3388
|
+
* onClose={() => setIsOpen(false)}
|
|
3389
|
+
* title="Choose an action"
|
|
3390
|
+
* actions={[
|
|
3391
|
+
* {
|
|
3392
|
+
* id: 'edit',
|
|
3393
|
+
* label: 'Edit',
|
|
3394
|
+
* icon: 'edit',
|
|
3395
|
+
* onSelect: () => console.log('Edit')
|
|
3396
|
+
* },
|
|
3397
|
+
* {
|
|
3398
|
+
* id: 'delete',
|
|
3399
|
+
* label: 'Delete',
|
|
3400
|
+
* icon: 'trash',
|
|
3401
|
+
* destructive: true,
|
|
3402
|
+
* onSelect: () => console.log('Delete')
|
|
3403
|
+
* }
|
|
3404
|
+
* ]}
|
|
3405
|
+
* />
|
|
3406
|
+
* ```
|
|
3407
|
+
*/
|
|
3408
|
+
var ActionSheet = function ActionSheet(_a) {
|
|
3409
|
+
var isOpen = _a.isOpen,
|
|
3410
|
+
onClose = _a.onClose,
|
|
3411
|
+
title = _a.title,
|
|
3412
|
+
description = _a.description,
|
|
3413
|
+
actions = _a.actions,
|
|
3414
|
+
_b = _a.closeOnOverlayClick,
|
|
3415
|
+
closeOnOverlayClick = _b === void 0 ? true : _b,
|
|
3416
|
+
_c = _a.closeOnEscape,
|
|
3417
|
+
closeOnEscape = _c === void 0 ? true : _c,
|
|
3418
|
+
_d = _a.showCloseButton,
|
|
3419
|
+
showCloseButton = _d === void 0 ? true : _d,
|
|
3420
|
+
dataTestId = _a["data-testid"];
|
|
3421
|
+
var sheetRef = React.useRef(null);
|
|
3422
|
+
var previousActiveElement = React.useRef(null);
|
|
3423
|
+
// Store the element that had focus when sheet opened
|
|
3424
|
+
React.useEffect(function () {
|
|
3425
|
+
if (isOpen) {
|
|
3426
|
+
previousActiveElement.current = document.activeElement;
|
|
3427
|
+
}
|
|
3428
|
+
}, [isOpen]);
|
|
3429
|
+
// Focus management and escape key handling
|
|
3430
|
+
React.useEffect(function () {
|
|
3431
|
+
if (!isOpen) return;
|
|
3432
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
3433
|
+
if (e.key === 'Escape' && closeOnEscape) {
|
|
3434
|
+
e.preventDefault();
|
|
3435
|
+
onClose();
|
|
3436
|
+
}
|
|
3437
|
+
// Focus trap
|
|
3438
|
+
if (e.key === 'Tab' && sheetRef.current) {
|
|
3439
|
+
var focusableElements = sheetRef.current.querySelectorAll('button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])');
|
|
3440
|
+
var firstElement = focusableElements[0];
|
|
3441
|
+
var lastElement = focusableElements[focusableElements.length - 1];
|
|
3442
|
+
if (e.shiftKey && document.activeElement === firstElement) {
|
|
3443
|
+
e.preventDefault();
|
|
3444
|
+
lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
|
|
3445
|
+
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
|
3446
|
+
e.preventDefault();
|
|
3447
|
+
firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
|
|
3448
|
+
}
|
|
3449
|
+
}
|
|
3450
|
+
};
|
|
3451
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
3452
|
+
// Focus first focusable element
|
|
3453
|
+
requestAnimationFrame(function () {
|
|
3454
|
+
var _a;
|
|
3455
|
+
var firstButton = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled)');
|
|
3456
|
+
firstButton === null || firstButton === void 0 ? void 0 : firstButton.focus();
|
|
3457
|
+
});
|
|
3458
|
+
// Prevent body scroll
|
|
3459
|
+
var originalOverflow = document.body.style.overflow;
|
|
3460
|
+
document.body.style.overflow = 'hidden';
|
|
3461
|
+
return function () {
|
|
3462
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
3463
|
+
document.body.style.overflow = originalOverflow;
|
|
3464
|
+
// Return focus to previous element
|
|
3465
|
+
if (previousActiveElement.current) {
|
|
3466
|
+
previousActiveElement.current.focus();
|
|
3467
|
+
}
|
|
3468
|
+
};
|
|
3469
|
+
}, [isOpen, onClose, closeOnEscape]);
|
|
3470
|
+
var handleOverlayClick = function handleOverlayClick(e) {
|
|
3471
|
+
if (closeOnOverlayClick && e.target === e.currentTarget) {
|
|
3472
|
+
onClose();
|
|
3473
|
+
}
|
|
3474
|
+
};
|
|
3475
|
+
var handleActionClick = function handleActionClick(action) {
|
|
3476
|
+
if (!action.disabled) {
|
|
3477
|
+
action.onSelect();
|
|
3478
|
+
onClose();
|
|
3479
|
+
}
|
|
3480
|
+
};
|
|
3481
|
+
if (!isOpen) return null;
|
|
3482
|
+
// Find if there are any destructive actions to add divider
|
|
3483
|
+
var destructiveIndex = actions.findIndex(function (a) {
|
|
3484
|
+
return a.destructive;
|
|
3485
|
+
});
|
|
3486
|
+
var hasDestructive = destructiveIndex >= 0;
|
|
3487
|
+
return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOverlay$1, {
|
|
3488
|
+
onClick: handleOverlayClick
|
|
3489
|
+
}), /*#__PURE__*/React.createElement(StyledActionSheet, {
|
|
3490
|
+
ref: sheetRef,
|
|
3491
|
+
role: "dialog",
|
|
3492
|
+
"aria-modal": "true",
|
|
3493
|
+
"aria-labelledby": title ? 'action-sheet-title' : undefined,
|
|
3494
|
+
"aria-describedby": description ? 'action-sheet-description' : undefined,
|
|
3495
|
+
"data-testid": dataTestId
|
|
3496
|
+
}, (title || description || showCloseButton) && /*#__PURE__*/React.createElement(StyledHeader$1, null, /*#__PURE__*/React.createElement(StyledHeaderContent, null, /*#__PURE__*/React.createElement(Stack, {
|
|
3497
|
+
direction: "column",
|
|
3498
|
+
gap: description && title ? 'xs' : 'none'
|
|
3499
|
+
}, title && /*#__PURE__*/React.createElement("div", {
|
|
3500
|
+
id: "action-sheet-title"
|
|
3501
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3502
|
+
variant: "h3"
|
|
3503
|
+
}, title)), description && /*#__PURE__*/React.createElement("div", {
|
|
3504
|
+
id: "action-sheet-description"
|
|
3505
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3506
|
+
variant: "body",
|
|
3507
|
+
color: "subdued"
|
|
3508
|
+
}, description)))), showCloseButton && /*#__PURE__*/React.createElement(StyledCloseButton, {
|
|
3509
|
+
type: "button",
|
|
3510
|
+
onClick: onClose,
|
|
3511
|
+
"aria-label": "Close"
|
|
3512
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
3513
|
+
name: "close",
|
|
3514
|
+
size: "sm",
|
|
3515
|
+
iconColor: "subdued"
|
|
3516
|
+
}))), /*#__PURE__*/React.createElement(StyledActionsList, null, actions.map(function (action, index) {
|
|
3517
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
3518
|
+
key: action.id
|
|
3519
|
+
}, hasDestructive && index === destructiveIndex && index > 0 && /*#__PURE__*/React.createElement(StyledDivider, null), /*#__PURE__*/React.createElement(StyledActionButton, {
|
|
3520
|
+
type: "button",
|
|
3521
|
+
onClick: function onClick() {
|
|
3522
|
+
return handleActionClick(action);
|
|
3523
|
+
},
|
|
3524
|
+
disabled: action.disabled,
|
|
3525
|
+
$destructive: action.destructive || false,
|
|
3526
|
+
$disabled: action.disabled || false,
|
|
3527
|
+
"aria-label": action.label
|
|
3528
|
+
}, action.icon && /*#__PURE__*/React.createElement(Icon, {
|
|
3529
|
+
name: action.icon,
|
|
3530
|
+
size: "md",
|
|
3531
|
+
iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
|
|
3532
|
+
}), /*#__PURE__*/React.createElement(Typography, {
|
|
3533
|
+
variant: "body"
|
|
3534
|
+
}, action.label)));
|
|
3535
|
+
})))), document.body);
|
|
3536
|
+
};
|
|
3537
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$5, templateObject_9$3, templateObject_10$2;
|
|
3538
|
+
|
|
3539
|
+
React.createElement;
|
|
3540
|
+
var semantic$a = tokensData.semantic,
|
|
3541
|
+
base$8 = tokensData.base;
|
|
2894
3542
|
// Default icons by variant
|
|
2895
3543
|
var variantIcons = {
|
|
2896
3544
|
error: 'crossCircle',
|
|
@@ -2918,56 +3566,56 @@ var StyledAlert = styled.div.withConfig({
|
|
|
2918
3566
|
},
|
|
2919
3567
|
displayName: "Alert__StyledAlert",
|
|
2920
3568
|
componentId: "sc-18tq5d-0"
|
|
2921
|
-
})(templateObject_1$
|
|
3569
|
+
})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: 1px solid;\n position: relative;\n width: 100%;\n \n /* Variant-specific colors */\n ", "\n \n /* Responsive adjustments */\n @media (min-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n align-items: ", ";\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: 1px solid;\n position: relative;\n width: 100%;\n \n /* Variant-specific colors */\n ", "\n \n /* Responsive adjustments */\n @media (min-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2922
3570
|
var $inline = _a.$inline;
|
|
2923
3571
|
return $inline ? 'center' : 'flex-start';
|
|
2924
3572
|
}, function (_a) {
|
|
2925
3573
|
var $inline = _a.$inline;
|
|
2926
|
-
return $inline ? semantic$
|
|
3574
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
|
|
2927
3575
|
}, function (_a) {
|
|
2928
3576
|
var $inline = _a.$inline;
|
|
2929
|
-
return $inline ? semantic$
|
|
2930
|
-
}, base$
|
|
3577
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
|
|
3578
|
+
}, base$8.border.radius[2], function (_a) {
|
|
2931
3579
|
var $variant = _a.$variant;
|
|
2932
3580
|
switch ($variant) {
|
|
2933
3581
|
case 'error':
|
|
2934
|
-
return "\n background-color: ".concat(semantic$
|
|
3582
|
+
return "\n background-color: ".concat(semantic$a.color.background['error-subtle'], ";\n border-color: ").concat(semantic$a.color.border.error, ";\n color: ").concat(semantic$a.color.text.error, ";\n ");
|
|
2935
3583
|
case 'warning':
|
|
2936
|
-
return "\n background-color: ".concat(semantic$
|
|
3584
|
+
return "\n background-color: ".concat(semantic$a.color.background['warning-subtle'], ";\n border-color: ").concat(semantic$a.color.border.warning, ";\n color: ").concat(semantic$a.color.text.warning, ";\n ");
|
|
2937
3585
|
case 'success':
|
|
2938
|
-
return "\n background-color: ".concat(semantic$
|
|
3586
|
+
return "\n background-color: ".concat(semantic$a.color.background['success-subtle'], ";\n border-color: ").concat(semantic$a.color.border.success, ";\n color: ").concat(semantic$a.color.text.success, ";\n ");
|
|
2939
3587
|
case 'info':
|
|
2940
3588
|
default:
|
|
2941
|
-
return "\n background-color: ".concat(semantic$
|
|
3589
|
+
return "\n background-color: ".concat(semantic$a.color.background['interactive-subtle'], ";\n border-color: ").concat(semantic$a.color.border.interactive, ";\n color: ").concat(semantic$a.color.text.interactive, ";\n ");
|
|
2942
3590
|
}
|
|
2943
|
-
}, base$
|
|
3591
|
+
}, base$8.breakpoint.md, function (_a) {
|
|
2944
3592
|
var $inline = _a.$inline;
|
|
2945
|
-
return $inline ? semantic$
|
|
3593
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.lg;
|
|
2946
3594
|
});
|
|
2947
3595
|
var StyledIconContainer$1 = styled.div.withConfig({
|
|
2948
3596
|
displayName: "Alert__StyledIconContainer",
|
|
2949
3597
|
componentId: "sc-18tq5d-1"
|
|
2950
|
-
})(templateObject_2$
|
|
3598
|
+
})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n"])));
|
|
2951
3599
|
var StyledContent$1 = styled.div.withConfig({
|
|
2952
3600
|
displayName: "Alert__StyledContent",
|
|
2953
3601
|
componentId: "sc-18tq5d-2"
|
|
2954
|
-
})(templateObject_3$
|
|
3602
|
+
})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"])), semantic$a.spacing.layout.xs);
|
|
2955
3603
|
var StyledTitle = styled.span.withConfig({
|
|
2956
3604
|
displayName: "Alert__StyledTitle",
|
|
2957
3605
|
componentId: "sc-18tq5d-3"
|
|
2958
|
-
})(templateObject_4$
|
|
3606
|
+
})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font: ", ";\n font-weight: 600 !important;\n margin: 0;\n\tline-height: 1.125;\n"], ["\n font: ", ";\n font-weight: 600 !important;\n margin: 0;\n\tline-height: 1.125;\n"])), semantic$a.typography.h6);
|
|
2959
3607
|
var StyledMessage = styled.span.withConfig({
|
|
2960
3608
|
displayName: "Alert__StyledMessage",
|
|
2961
3609
|
componentId: "sc-18tq5d-4"
|
|
2962
|
-
})(templateObject_5$
|
|
3610
|
+
})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n font: ", ";\n\tline-height: 1.25;\n"], ["\n font: ", ";\n\tline-height: 1.25;\n"])), semantic$a.typography.body);
|
|
2963
3611
|
var StyledActions = styled.div.withConfig({
|
|
2964
3612
|
displayName: "Alert__StyledActions",
|
|
2965
3613
|
componentId: "sc-18tq5d-5"
|
|
2966
|
-
})(templateObject_6$
|
|
3614
|
+
})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"])), semantic$a.spacing.layout.sm);
|
|
2967
3615
|
var StyledDismissButton = styled(IconButton).withConfig({
|
|
2968
3616
|
displayName: "Alert__StyledDismissButton",
|
|
2969
3617
|
componentId: "sc-18tq5d-6"
|
|
2970
|
-
})(templateObject_7$
|
|
3618
|
+
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"], ["\n margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"])), semantic$a.spacing.layout.xs);
|
|
2971
3619
|
var Alert = function Alert(_a) {
|
|
2972
3620
|
var _b = _a.variant,
|
|
2973
3621
|
variant = _b === void 0 ? 'info' : _b,
|
|
@@ -3025,18 +3673,18 @@ var Alert = function Alert(_a) {
|
|
|
3025
3673
|
})));
|
|
3026
3674
|
};
|
|
3027
3675
|
Alert.displayName = 'Alert';
|
|
3028
|
-
var templateObject_1$
|
|
3676
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7;
|
|
3029
3677
|
|
|
3030
3678
|
React.createElement;
|
|
3031
3679
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
3032
3680
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
3033
3681
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
3034
3682
|
componentId: "sc-7ouzg5-0"
|
|
3035
|
-
})(templateObject_1$
|
|
3683
|
+
})(templateObject_1$n || (templateObject_1$n = __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');
|
|
3036
3684
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
3037
3685
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
3038
3686
|
componentId: "sc-7ouzg5-1"
|
|
3039
|
-
})(templateObject_2$
|
|
3687
|
+
})(templateObject_2$i || (templateObject_2$i = __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"]);
|
|
3040
3688
|
var isInternalUrl = function isInternalUrl(url) {
|
|
3041
3689
|
return url.startsWith('/') && !url.startsWith('http');
|
|
3042
3690
|
};
|
|
@@ -3064,13 +3712,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
3064
3712
|
}, breadcrumb.label)));
|
|
3065
3713
|
}))));
|
|
3066
3714
|
};
|
|
3067
|
-
var templateObject_1$
|
|
3715
|
+
var templateObject_1$n, templateObject_2$i;
|
|
3068
3716
|
|
|
3069
3717
|
React.createElement;
|
|
3070
3718
|
var CardSmallStyled = styled.div.withConfig({
|
|
3071
3719
|
displayName: "CardSmall__CardSmallStyled",
|
|
3072
3720
|
componentId: "sc-jpcqvd-0"
|
|
3073
|
-
})(templateObject_1$
|
|
3721
|
+
})(templateObject_1$m || (templateObject_1$m = __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);
|
|
3074
3722
|
var CardSmall = function CardSmall(_a) {
|
|
3075
3723
|
var title = _a.title,
|
|
3076
3724
|
picture = _a.picture,
|
|
@@ -3112,14 +3760,14 @@ var CardSmall = function CardSmall(_a) {
|
|
|
3112
3760
|
"aria-label": title
|
|
3113
3761
|
}, content));
|
|
3114
3762
|
};
|
|
3115
|
-
var templateObject_1$
|
|
3763
|
+
var templateObject_1$m;
|
|
3116
3764
|
|
|
3117
3765
|
React.createElement;
|
|
3118
3766
|
var border$3 = tokensData.base.border;
|
|
3119
3767
|
var CardLargeStyled = styled.div.withConfig({
|
|
3120
3768
|
displayName: "CardLarge__CardLargeStyled",
|
|
3121
3769
|
componentId: "sc-1rfgdzl-0"
|
|
3122
|
-
})(templateObject_1$
|
|
3770
|
+
})(templateObject_1$l || (templateObject_1$l = __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]);
|
|
3123
3771
|
var CardLarge = function CardLarge(_a) {
|
|
3124
3772
|
var title = _a.title,
|
|
3125
3773
|
excerpt = _a.excerpt,
|
|
@@ -3164,7 +3812,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
3164
3812
|
});
|
|
3165
3813
|
})))));
|
|
3166
3814
|
};
|
|
3167
|
-
var templateObject_1$
|
|
3815
|
+
var templateObject_1$l;
|
|
3168
3816
|
|
|
3169
3817
|
/**
|
|
3170
3818
|
* Hidden native checkbox input for accessibility
|
|
@@ -3176,7 +3824,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
3176
3824
|
},
|
|
3177
3825
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
3178
3826
|
componentId: "sc-1ddpctx-0"
|
|
3179
|
-
})(templateObject_1$
|
|
3827
|
+
})(templateObject_1$k || (templateObject_1$k = __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"
|
|
3180
3828
|
/**
|
|
3181
3829
|
* Custom checkbox visual component
|
|
3182
3830
|
* 24px × 24px for 8px grid alignment
|
|
@@ -3193,7 +3841,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
3193
3841
|
},
|
|
3194
3842
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
3195
3843
|
componentId: "sc-1ddpctx-1"
|
|
3196
|
-
})(templateObject_2$
|
|
3844
|
+
})(templateObject_2$h || (templateObject_2$h = __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"
|
|
3197
3845
|
/**
|
|
3198
3846
|
* Container for checkbox with proper spacing and alignment
|
|
3199
3847
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -3226,7 +3874,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
3226
3874
|
},
|
|
3227
3875
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
3228
3876
|
componentId: "sc-1ddpctx-2"
|
|
3229
|
-
})(templateObject_3$
|
|
3877
|
+
})(templateObject_3$f || (templateObject_3$f = __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"
|
|
3230
3878
|
/**
|
|
3231
3879
|
* Label text with proper typography
|
|
3232
3880
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -3243,20 +3891,20 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
3243
3891
|
},
|
|
3244
3892
|
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
3245
3893
|
componentId: "sc-1ddpctx-3"
|
|
3246
|
-
})(templateObject_4$
|
|
3894
|
+
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
3247
3895
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
3248
3896
|
});
|
|
3249
|
-
var templateObject_1$
|
|
3897
|
+
var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$c;
|
|
3250
3898
|
|
|
3251
3899
|
React.createElement;
|
|
3252
3900
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
3253
3901
|
displayName: "Checkbox__StyledFieldContainer",
|
|
3254
3902
|
componentId: "sc-vquz3v-0"
|
|
3255
|
-
})(templateObject_1$
|
|
3903
|
+
})(templateObject_1$j || (templateObject_1$j = __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]);
|
|
3256
3904
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
3257
3905
|
displayName: "Checkbox__StyledHelperText",
|
|
3258
3906
|
componentId: "sc-vquz3v-1"
|
|
3259
|
-
})(templateObject_2$
|
|
3907
|
+
})(templateObject_2$g || (templateObject_2$g = __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"
|
|
3260
3908
|
/**
|
|
3261
3909
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
3262
3910
|
*
|
|
@@ -3369,13 +4017,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
3369
4017
|
}, error));
|
|
3370
4018
|
});
|
|
3371
4019
|
Checkbox.displayName = 'Checkbox';
|
|
3372
|
-
var templateObject_1$
|
|
4020
|
+
var templateObject_1$j, templateObject_2$g;
|
|
3373
4021
|
|
|
3374
4022
|
React.createElement;
|
|
3375
4023
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
3376
4024
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
3377
4025
|
componentId: "sc-ae049w-0"
|
|
3378
|
-
})(templateObject_1$
|
|
4026
|
+
})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"], ["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"])));
|
|
3379
4027
|
var ChipGroup = function ChipGroup(_a) {
|
|
3380
4028
|
var labels = _a.labels,
|
|
3381
4029
|
_b = _a.variant,
|
|
@@ -3394,7 +4042,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
3394
4042
|
});
|
|
3395
4043
|
})));
|
|
3396
4044
|
};
|
|
3397
|
-
var templateObject_1$
|
|
4045
|
+
var templateObject_1$i;
|
|
3398
4046
|
|
|
3399
4047
|
React.createElement;
|
|
3400
4048
|
var _a$2 = tokensData.semantic,
|
|
@@ -3404,15 +4052,15 @@ var _a$2 = tokensData.semantic,
|
|
|
3404
4052
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
3405
4053
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
3406
4054
|
componentId: "sc-1p1t0kp-0"
|
|
3407
|
-
})(templateObject_1$
|
|
4055
|
+
})(templateObject_1$h || (templateObject_1$h = __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);
|
|
3408
4056
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
3409
4057
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
3410
4058
|
componentId: "sc-1p1t0kp-1"
|
|
3411
|
-
})(templateObject_2$
|
|
4059
|
+
})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n width: 100%;\n"], ["\n position: relative;\n display: inline-block;\n width: 100%;\n"])));
|
|
3412
4060
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
3413
4061
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
3414
4062
|
componentId: "sc-1p1t0kp-2"
|
|
3415
|
-
})(templateObject_3$
|
|
4063
|
+
})(templateObject_3$e || (templateObject_3$e = __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);
|
|
3416
4064
|
var CopyButton = function CopyButton(_a) {
|
|
3417
4065
|
var text = _a.text,
|
|
3418
4066
|
onCopy = _a.onCopy;
|
|
@@ -3489,28 +4137,28 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
3489
4137
|
onCopy: onCopy
|
|
3490
4138
|
}));
|
|
3491
4139
|
};
|
|
3492
|
-
var templateObject_1$
|
|
4140
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$e;
|
|
3493
4141
|
|
|
3494
4142
|
React.createElement;
|
|
3495
4143
|
var StyledHeader = styled.div.withConfig({
|
|
3496
4144
|
displayName: "DateGroup__StyledHeader",
|
|
3497
4145
|
componentId: "sc-9nfm1f-0"
|
|
3498
|
-
})(templateObject_1$
|
|
4146
|
+
})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n \n ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.sm, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], function (_a) {
|
|
3499
4147
|
var $sticky = _a.$sticky;
|
|
3500
4148
|
return $sticky && "\n position: sticky;\n top: 0;\n z-index: 10;\n box-shadow: ".concat(tokensData.base.shadow[2], ";\n ");
|
|
3501
4149
|
});
|
|
3502
4150
|
var StyledLeftSection = styled.div.withConfig({
|
|
3503
4151
|
displayName: "DateGroup__StyledLeftSection",
|
|
3504
4152
|
componentId: "sc-9nfm1f-1"
|
|
3505
|
-
})(templateObject_2$
|
|
4153
|
+
})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
|
|
3506
4154
|
var StyledRightSection = styled.div.withConfig({
|
|
3507
4155
|
displayName: "DateGroup__StyledRightSection",
|
|
3508
4156
|
componentId: "sc-9nfm1f-2"
|
|
3509
|
-
})(templateObject_3$
|
|
4157
|
+
})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.md);
|
|
3510
4158
|
var StyledContent = styled.div.withConfig({
|
|
3511
4159
|
displayName: "DateGroup__StyledContent",
|
|
3512
4160
|
componentId: "sc-9nfm1f-3"
|
|
3513
|
-
})(templateObject_4$
|
|
4161
|
+
})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n /* Content area for children */\n"], ["\n /* Content area for children */\n"
|
|
3514
4162
|
/**
|
|
3515
4163
|
* DateGroup component
|
|
3516
4164
|
*
|
|
@@ -3574,19 +4222,19 @@ var DateGroup = function DateGroup(_a) {
|
|
|
3574
4222
|
"data-testid": dataTestId ? "".concat(dataTestId, "-content") : undefined
|
|
3575
4223
|
}, children));
|
|
3576
4224
|
};
|
|
3577
|
-
var templateObject_1$
|
|
4225
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
3578
4226
|
|
|
3579
4227
|
React.createElement;
|
|
3580
|
-
var semantic$
|
|
4228
|
+
var semantic$9 = tokensData.semantic;
|
|
3581
4229
|
var StyledContainer$1 = styled.div.withConfig({
|
|
3582
4230
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3583
4231
|
return !prop.startsWith('$');
|
|
3584
4232
|
},
|
|
3585
4233
|
displayName: "EmptyState__StyledContainer",
|
|
3586
4234
|
componentId: "sc-1u5hxh-0"
|
|
3587
|
-
})(templateObject_1$
|
|
4235
|
+
})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: 400px;\n margin: 0 auto;\n padding: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: 400px;\n margin: 0 auto;\n padding: ", ";\n"])), function (_a) {
|
|
3588
4236
|
var $size = _a.$size;
|
|
3589
|
-
return $size === 'small' ? semantic$
|
|
4237
|
+
return $size === 'small' ? semantic$9.spacing.layout['4xl'] : $size === 'large' ? semantic$9.spacing.layout['8xl'] : semantic$9.spacing.layout['6xl'];
|
|
3590
4238
|
});
|
|
3591
4239
|
var StyledIllustration = styled.div.withConfig({
|
|
3592
4240
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3594,22 +4242,22 @@ var StyledIllustration = styled.div.withConfig({
|
|
|
3594
4242
|
},
|
|
3595
4243
|
displayName: "EmptyState__StyledIllustration",
|
|
3596
4244
|
componentId: "sc-1u5hxh-1"
|
|
3597
|
-
})(templateObject_2$
|
|
4245
|
+
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: ", ";\n color: ", ";\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: ", ";\n color: ", ";\n"])), function (_a) {
|
|
3598
4246
|
var $size = _a.$size;
|
|
3599
4247
|
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
3600
4248
|
}, function (_a) {
|
|
3601
4249
|
var $size = _a.$size;
|
|
3602
4250
|
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
3603
|
-
}, semantic$
|
|
4251
|
+
}, semantic$9.spacing.layout['2xl'], function (_a) {
|
|
3604
4252
|
var $variant = _a.$variant;
|
|
3605
|
-
return $variant === 'error' ? semantic$
|
|
4253
|
+
return $variant === 'error' ? semantic$9.color.icon.error : $variant === 'success' ? semantic$9.color.icon.success : semantic$9.color.icon.subdued;
|
|
3606
4254
|
});
|
|
3607
4255
|
var StyledTextContainer = styled.div.withConfig({
|
|
3608
4256
|
displayName: "EmptyState__StyledTextContainer",
|
|
3609
4257
|
componentId: "sc-1u5hxh-2"
|
|
3610
|
-
})(templateObject_3$
|
|
4258
|
+
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width: 360px;\n margin-bottom: ", ";\n"], ["\n max-width: 360px;\n margin-bottom: ", ";\n"
|
|
3611
4259
|
// Map illustration type to icon name
|
|
3612
|
-
])), semantic$
|
|
4260
|
+
])), semantic$9.spacing.layout['2xl']);
|
|
3613
4261
|
// Map illustration type to icon name
|
|
3614
4262
|
var illustrationToIcon = {
|
|
3615
4263
|
search: 'search',
|
|
@@ -3661,7 +4309,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
3661
4309
|
as: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3'
|
|
3662
4310
|
}, title), /*#__PURE__*/React.createElement("div", {
|
|
3663
4311
|
style: {
|
|
3664
|
-
marginTop: semantic$
|
|
4312
|
+
marginTop: semantic$9.spacing.layout.md
|
|
3665
4313
|
}
|
|
3666
4314
|
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3667
4315
|
variant: "body",
|
|
@@ -3683,7 +4331,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
3683
4331
|
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined
|
|
3684
4332
|
}, secondaryAction.label))));
|
|
3685
4333
|
};
|
|
3686
|
-
var templateObject_1$
|
|
4334
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c;
|
|
3687
4335
|
|
|
3688
4336
|
React.createElement;
|
|
3689
4337
|
var _a$1 = tokensData.base,
|
|
@@ -3692,23 +4340,23 @@ var _a$1 = tokensData.base,
|
|
|
3692
4340
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
3693
4341
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
3694
4342
|
componentId: "sc-1mi4lso-0"
|
|
3695
|
-
})(templateObject_1$
|
|
4343
|
+
})(templateObject_1$e || (templateObject_1$e = __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]);
|
|
3696
4344
|
var ImageWrapper = styled.div.withConfig({
|
|
3697
4345
|
displayName: "FeatureBlock__ImageWrapper",
|
|
3698
4346
|
componentId: "sc-1mi4lso-1"
|
|
3699
|
-
})(templateObject_2$
|
|
4347
|
+
})(templateObject_2$c || (templateObject_2$c = __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);
|
|
3700
4348
|
var ContentSection = styled.div.withConfig({
|
|
3701
4349
|
displayName: "FeatureBlock__ContentSection",
|
|
3702
4350
|
componentId: "sc-1mi4lso-2"
|
|
3703
|
-
})(templateObject_3$
|
|
4351
|
+
})(templateObject_3$b || (templateObject_3$b = __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]);
|
|
3704
4352
|
var ButtonWrapper = styled.div.withConfig({
|
|
3705
4353
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
3706
4354
|
componentId: "sc-1mi4lso-3"
|
|
3707
|
-
})(templateObject_4$
|
|
4355
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
3708
4356
|
var ContentWrapper = styled.div.withConfig({
|
|
3709
4357
|
displayName: "FeatureBlock__ContentWrapper",
|
|
3710
4358
|
componentId: "sc-1mi4lso-4"
|
|
3711
|
-
})(templateObject_5$
|
|
4359
|
+
})(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
3712
4360
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
3713
4361
|
var title = _a.title,
|
|
3714
4362
|
excerpt = _a.excerpt,
|
|
@@ -3748,7 +4396,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
3748
4396
|
onClick: onReadMore
|
|
3749
4397
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
3750
4398
|
};
|
|
3751
|
-
var templateObject_1$
|
|
4399
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
|
|
3752
4400
|
|
|
3753
4401
|
React.createElement;
|
|
3754
4402
|
var _a = tokensData.base,
|
|
@@ -3763,14 +4411,14 @@ var _a = tokensData.base,
|
|
|
3763
4411
|
var DropdownContainer = styled.div.withConfig({
|
|
3764
4412
|
displayName: "Dropdown__DropdownContainer",
|
|
3765
4413
|
componentId: "sc-kz07c4-0"
|
|
3766
|
-
})(templateObject_1$
|
|
4414
|
+
})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
3767
4415
|
var DropdownTrigger = styled.button.withConfig({
|
|
3768
4416
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3769
4417
|
return !prop.startsWith('$');
|
|
3770
4418
|
},
|
|
3771
4419
|
displayName: "Dropdown__DropdownTrigger",
|
|
3772
4420
|
componentId: "sc-kz07c4-1"
|
|
3773
|
-
})(templateObject_2$
|
|
4421
|
+
})(templateObject_2$b || (templateObject_2$b = __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) {
|
|
3774
4422
|
var $hasError = _a.$hasError;
|
|
3775
4423
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
3776
4424
|
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
@@ -3790,7 +4438,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
3790
4438
|
},
|
|
3791
4439
|
displayName: "Dropdown__DropdownIcon",
|
|
3792
4440
|
componentId: "sc-kz07c4-2"
|
|
3793
|
-
})(templateObject_3$
|
|
4441
|
+
})(templateObject_3$a || (templateObject_3$a = __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) {
|
|
3794
4442
|
var $isOpen = _a.$isOpen;
|
|
3795
4443
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
3796
4444
|
});
|
|
@@ -3800,7 +4448,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
3800
4448
|
},
|
|
3801
4449
|
displayName: "Dropdown__DropdownMenu",
|
|
3802
4450
|
componentId: "sc-kz07c4-3"
|
|
3803
|
-
})(templateObject_4$
|
|
4451
|
+
})(templateObject_4$9 || (templateObject_4$9 = __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) {
|
|
3804
4452
|
var $isOpen = _a.$isOpen;
|
|
3805
4453
|
return $isOpen ? 1 : 0;
|
|
3806
4454
|
}, function (_a) {
|
|
@@ -3816,7 +4464,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3816
4464
|
},
|
|
3817
4465
|
displayName: "Dropdown__DropdownOption",
|
|
3818
4466
|
componentId: "sc-kz07c4-4"
|
|
3819
|
-
})(templateObject_5$
|
|
4467
|
+
})(templateObject_5$8 || (templateObject_5$8 = __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) {
|
|
3820
4468
|
var $isSelected = _a.$isSelected,
|
|
3821
4469
|
$isFocused = _a.$isFocused;
|
|
3822
4470
|
if ($isFocused) return color.background.surface;
|
|
@@ -3826,7 +4474,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3826
4474
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
3827
4475
|
displayName: "Dropdown__StyledHelperText",
|
|
3828
4476
|
componentId: "sc-kz07c4-5"
|
|
3829
|
-
})(templateObject_6$
|
|
4477
|
+
})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography.caption, function (_a) {
|
|
3830
4478
|
var $hasError = _a.$hasError;
|
|
3831
4479
|
return $hasError ? color.text.error : color.text.subdued;
|
|
3832
4480
|
}, spacing[2]);
|
|
@@ -3993,19 +4641,19 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3993
4641
|
id: helperId
|
|
3994
4642
|
}, helperText));
|
|
3995
4643
|
};
|
|
3996
|
-
var templateObject_1$
|
|
4644
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$8;
|
|
3997
4645
|
|
|
3998
4646
|
React.createElement;
|
|
3999
|
-
var semantic$
|
|
4647
|
+
var semantic$8 = tokensData.semantic;
|
|
4000
4648
|
var StyledList = styled.ul.withConfig({
|
|
4001
4649
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4002
4650
|
return !prop.startsWith('$');
|
|
4003
4651
|
},
|
|
4004
4652
|
displayName: "List__StyledList",
|
|
4005
4653
|
componentId: "sc-1irksg5-0"
|
|
4006
|
-
})(templateObject_1$
|
|
4654
|
+
})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n \n /* Divider styles */\n ", "\n"], ["\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n \n /* Divider styles */\n ", "\n"])), function (_a) {
|
|
4007
4655
|
var $dividers = _a.$dividers;
|
|
4008
|
-
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$
|
|
4656
|
+
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$8.color.border["default"], ";\n }\n ");
|
|
4009
4657
|
});
|
|
4010
4658
|
var List = function List(_a) {
|
|
4011
4659
|
var children = _a.children,
|
|
@@ -4025,23 +4673,23 @@ var List = function List(_a) {
|
|
|
4025
4673
|
}, props), children);
|
|
4026
4674
|
};
|
|
4027
4675
|
List.displayName = 'List';
|
|
4028
|
-
var templateObject_1$
|
|
4676
|
+
var templateObject_1$c;
|
|
4029
4677
|
|
|
4030
4678
|
React.createElement;
|
|
4031
|
-
var semantic$
|
|
4032
|
-
base$
|
|
4679
|
+
var semantic$7 = tokensData.semantic,
|
|
4680
|
+
base$7 = tokensData.base;
|
|
4033
4681
|
var StyledListItem = styled.li.withConfig({
|
|
4034
4682
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4035
4683
|
return !prop.startsWith('$');
|
|
4036
4684
|
},
|
|
4037
4685
|
displayName: "ListItem__StyledListItem",
|
|
4038
4686
|
componentId: "sc-1wzzt21-0"
|
|
4039
|
-
})(templateObject_1$
|
|
4687
|
+
})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n"])), function (_a) {
|
|
4040
4688
|
var $interactive = _a.$interactive;
|
|
4041
4689
|
return $interactive && 'user-select: none;';
|
|
4042
4690
|
}, function (_a) {
|
|
4043
4691
|
var $disabled = _a.$disabled;
|
|
4044
|
-
return $disabled && "\n opacity: ".concat(base$
|
|
4692
|
+
return $disabled && "\n opacity: ".concat(base$7.opacity[50], ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
4045
4693
|
});
|
|
4046
4694
|
var StyledItemContent = styled.div.withConfig({
|
|
4047
4695
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -4049,12 +4697,12 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
4049
4697
|
},
|
|
4050
4698
|
displayName: "ListItem__StyledItemContent",
|
|
4051
4699
|
componentId: "sc-1wzzt21-1"
|
|
4052
|
-
})(templateObject_2$
|
|
4700
|
+
})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color 150ms ease;\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"], ["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color 150ms ease;\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"])), semantic$7.spacing.layout.md, function (_a) {
|
|
4053
4701
|
var $spacing = _a.$spacing;
|
|
4054
|
-
return $spacing === 'compact' ? "".concat(semantic$
|
|
4055
|
-
}, base$
|
|
4702
|
+
return $spacing === 'compact' ? "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.md) : "".concat(semantic$7.spacing.layout.md, " ").concat(semantic$7.spacing.layout.lg);
|
|
4703
|
+
}, base$7.border.radius[2], function (_a) {
|
|
4056
4704
|
var $selected = _a.$selected;
|
|
4057
|
-
return $selected ? semantic$
|
|
4705
|
+
return $selected ? semantic$7.color.background['interactive-subtle'] : 'transparent';
|
|
4058
4706
|
}, function (_a) {
|
|
4059
4707
|
var $interactive = _a.$interactive,
|
|
4060
4708
|
$disabled = _a.$disabled;
|
|
@@ -4066,26 +4714,26 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
4066
4714
|
$disabled = _a.$disabled,
|
|
4067
4715
|
$selected = _a.$selected;
|
|
4068
4716
|
return !$disabled && $interactive && "\n &:hover {\n background-color: ".concat($selected ? tokensData.component.button.variants.secondary.backgroundColor : tokensData.component.button.variants.secondary.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat(tokensData.component.button.variants.naked.backgroundColor, ";\n }\n ");
|
|
4069
|
-
}, semantic$
|
|
4717
|
+
}, semantic$7.color.border.interactive);
|
|
4070
4718
|
var StyledIconContainer = styled.div.withConfig({
|
|
4071
4719
|
displayName: "ListItem__StyledIconContainer",
|
|
4072
4720
|
componentId: "sc-1wzzt21-2"
|
|
4073
|
-
})(templateObject_3$
|
|
4721
|
+
})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n"])));
|
|
4074
4722
|
var StyledTextContent = styled.div.withConfig({
|
|
4075
4723
|
displayName: "ListItem__StyledTextContent",
|
|
4076
4724
|
componentId: "sc-1wzzt21-3"
|
|
4077
|
-
})(templateObject_4$
|
|
4725
|
+
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"])), semantic$7.spacing.layout.xs);
|
|
4078
4726
|
var StyledRightContent = styled.div.withConfig({
|
|
4079
4727
|
displayName: "ListItem__StyledRightContent",
|
|
4080
4728
|
componentId: "sc-1wzzt21-4"
|
|
4081
|
-
})(templateObject_5$
|
|
4729
|
+
})(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"])), semantic$7.spacing.layout.sm);
|
|
4082
4730
|
var StyledChevronIcon = styled.div.withConfig({
|
|
4083
4731
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4084
4732
|
return !prop.startsWith('$');
|
|
4085
4733
|
},
|
|
4086
4734
|
displayName: "ListItem__StyledChevronIcon",
|
|
4087
4735
|
componentId: "sc-1wzzt21-5"
|
|
4088
|
-
})(templateObject_6$
|
|
4736
|
+
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"])), semantic$7.color.icon.subdued, function (_a) {
|
|
4089
4737
|
var $expanded = _a.$expanded;
|
|
4090
4738
|
return $expanded ? '180deg' : '0deg';
|
|
4091
4739
|
});
|
|
@@ -4095,7 +4743,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
4095
4743
|
},
|
|
4096
4744
|
displayName: "ListItem__StyledExpandedContent",
|
|
4097
4745
|
componentId: "sc-1wzzt21-6"
|
|
4098
|
-
})(templateObject_7$
|
|
4746
|
+
})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"], ["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"])), function (_a) {
|
|
4099
4747
|
var $expanded = _a.$expanded;
|
|
4100
4748
|
return $expanded ? '1000px' : '0';
|
|
4101
4749
|
}, function (_a) {
|
|
@@ -4104,7 +4752,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
4104
4752
|
}, function (_a) {
|
|
4105
4753
|
var $expanded = _a.$expanded,
|
|
4106
4754
|
$spacing = _a.$spacing;
|
|
4107
|
-
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$
|
|
4755
|
+
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.md, " ").concat(semantic$7.spacing.layout.sm, " 48px") : "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.lg, " ").concat(semantic$7.spacing.layout.md, " 60px"), ";\n background-color: ").concat(semantic$7.color.background['subtle'], ";\n border-radius: ").concat(base$7.border.radius[2], ";\n margin: 0 ").concat($spacing === 'compact' ? semantic$7.spacing.layout.md : semantic$7.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md, ";\n ");
|
|
4108
4756
|
});
|
|
4109
4757
|
var ListItem = function ListItem(_a) {
|
|
4110
4758
|
var primary = _a.primary,
|
|
@@ -4190,7 +4838,7 @@ var ListItem = function ListItem(_a) {
|
|
|
4190
4838
|
}, children));
|
|
4191
4839
|
};
|
|
4192
4840
|
ListItem.displayName = 'ListItem';
|
|
4193
|
-
var templateObject_1$
|
|
4841
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$7, templateObject_7$6;
|
|
4194
4842
|
|
|
4195
4843
|
var input = tokensData.component.input;
|
|
4196
4844
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -4199,7 +4847,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
4199
4847
|
},
|
|
4200
4848
|
displayName: "InputBase__StyledInputBase",
|
|
4201
4849
|
componentId: "sc-1bpf4e8-0"
|
|
4202
|
-
})(templateObject_1$
|
|
4850
|
+
})(templateObject_1$a || (templateObject_1$a = __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"
|
|
4203
4851
|
/**
|
|
4204
4852
|
* Base styled textarea with shared styling
|
|
4205
4853
|
*/])), input["default"].font, function (_a) {
|
|
@@ -4230,40 +4878,40 @@ var StyledTextAreaBase = styled.textarea.withConfig({
|
|
|
4230
4878
|
},
|
|
4231
4879
|
displayName: "InputBase__StyledTextAreaBase",
|
|
4232
4880
|
componentId: "sc-1bpf4e8-1"
|
|
4233
|
-
})(templateObject_2$
|
|
4234
|
-
var templateObject_1$
|
|
4881
|
+
})(templateObject_2$9 || (templateObject_2$9 = __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);
|
|
4882
|
+
var templateObject_1$a, templateObject_2$9;
|
|
4235
4883
|
|
|
4236
4884
|
React.createElement;
|
|
4237
|
-
var semantic$
|
|
4238
|
-
base$
|
|
4885
|
+
var semantic$6 = tokensData.semantic,
|
|
4886
|
+
base$6 = tokensData.base;
|
|
4239
4887
|
var StyledFieldContainer$2 = styled.div.withConfig({
|
|
4240
4888
|
displayName: "NumberInput__StyledFieldContainer",
|
|
4241
4889
|
componentId: "sc-qotc3w-0"
|
|
4242
|
-
})(templateObject_1$
|
|
4890
|
+
})(templateObject_1$9 || (templateObject_1$9 = __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$6.spacing[2]);
|
|
4243
4891
|
var StyledLabel$3 = styled.label.withConfig({
|
|
4244
4892
|
displayName: "NumberInput__StyledLabel",
|
|
4245
4893
|
componentId: "sc-qotc3w-1"
|
|
4246
|
-
})(templateObject_2$
|
|
4894
|
+
})(templateObject_2$8 || (templateObject_2$8 = __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$6.spacing[1], semantic$6.typography.label, semantic$6.color.text["default"], semantic$6.color.text.disabled);
|
|
4247
4895
|
var StyledRequiredIndicator$2 = styled.span.withConfig({
|
|
4248
4896
|
displayName: "NumberInput__StyledRequiredIndicator",
|
|
4249
4897
|
componentId: "sc-qotc3w-2"
|
|
4250
|
-
})(templateObject_3$
|
|
4251
|
-
var StyledInputWrapper$
|
|
4898
|
+
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$6.color.text.error, base$6.fontWeight[5]);
|
|
4899
|
+
var StyledInputWrapper$2 = styled.div.withConfig({
|
|
4252
4900
|
displayName: "NumberInput__StyledInputWrapper",
|
|
4253
4901
|
componentId: "sc-qotc3w-3"
|
|
4254
|
-
})(templateObject_4$
|
|
4902
|
+
})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n"])));
|
|
4255
4903
|
var StyledNumberInput = styled(StyledInputBase).withConfig({
|
|
4256
4904
|
displayName: "NumberInput__StyledNumberInput",
|
|
4257
4905
|
componentId: "sc-qotc3w-4"
|
|
4258
|
-
})(templateObject_5$
|
|
4906
|
+
})(templateObject_5$6 || (templateObject_5$6 = __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$6.spacing[10]);
|
|
4259
4907
|
var StyledStepperContainer = styled.div.withConfig({
|
|
4260
4908
|
displayName: "NumberInput__StyledStepperContainer",
|
|
4261
4909
|
componentId: "sc-qotc3w-5"
|
|
4262
|
-
})(templateObject_6$
|
|
4910
|
+
})(templateObject_6$6 || (templateObject_6$6 = __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$6.spacing[2], base$6.spacing[2]);
|
|
4263
4911
|
var StyledHelperText$2 = styled.div.withConfig({
|
|
4264
4912
|
displayName: "NumberInput__StyledHelperText",
|
|
4265
4913
|
componentId: "sc-qotc3w-6"
|
|
4266
|
-
})(templateObject_7$
|
|
4914
|
+
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
4267
4915
|
/**
|
|
4268
4916
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
4269
4917
|
*
|
|
@@ -4286,9 +4934,9 @@ var StyledHelperText$2 = styled.div.withConfig({
|
|
|
4286
4934
|
* onChange={(newValue) => setValue(newValue)}
|
|
4287
4935
|
* />
|
|
4288
4936
|
* ```
|
|
4289
|
-
*/])), semantic$
|
|
4937
|
+
*/])), semantic$6.typography.small, function (_a) {
|
|
4290
4938
|
var $isError = _a.$isError;
|
|
4291
|
-
return $isError ? semantic$
|
|
4939
|
+
return $isError ? semantic$6.color.text.error : semantic$6.color.text.subdued;
|
|
4292
4940
|
});
|
|
4293
4941
|
/**
|
|
4294
4942
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
@@ -4429,7 +5077,7 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
4429
5077
|
"data-disabled": disabled
|
|
4430
5078
|
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$2, {
|
|
4431
5079
|
"aria-label": "required"
|
|
4432
|
-
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$
|
|
5080
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$2, null, /*#__PURE__*/React.createElement(StyledNumberInput, _extends({
|
|
4433
5081
|
ref: ref,
|
|
4434
5082
|
id: id,
|
|
4435
5083
|
type: "text",
|
|
@@ -4478,7 +5126,7 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
4478
5126
|
}, error || helperText));
|
|
4479
5127
|
});
|
|
4480
5128
|
NumberInput.displayName = 'NumberInput';
|
|
4481
|
-
var templateObject_1$
|
|
5129
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$7, templateObject_5$6, templateObject_6$6, templateObject_7$5;
|
|
4482
5130
|
|
|
4483
5131
|
React.createElement;
|
|
4484
5132
|
var PageTitleStyled = styled.div.withConfig({
|
|
@@ -4487,7 +5135,7 @@ var PageTitleStyled = styled.div.withConfig({
|
|
|
4487
5135
|
},
|
|
4488
5136
|
displayName: "PageTitle__PageTitleStyled",
|
|
4489
5137
|
componentId: "sc-16h256f-0"
|
|
4490
|
-
})(templateObject_1$
|
|
5138
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
|
|
4491
5139
|
var $hasBackButton = _a.$hasBackButton;
|
|
4492
5140
|
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
4493
5141
|
});
|
|
@@ -4514,38 +5162,38 @@ var PageTitle = function PageTitle(_a) {
|
|
|
4514
5162
|
color: "subdued"
|
|
4515
5163
|
}, subtitle)));
|
|
4516
5164
|
};
|
|
4517
|
-
var templateObject_1$
|
|
5165
|
+
var templateObject_1$8;
|
|
4518
5166
|
|
|
4519
5167
|
React.createElement;
|
|
4520
|
-
var semantic$
|
|
4521
|
-
base$
|
|
5168
|
+
var semantic$5 = tokensData.semantic,
|
|
5169
|
+
base$5 = tokensData.base;
|
|
4522
5170
|
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
4523
5171
|
displayName: "PasswordField__StyledFieldContainer",
|
|
4524
5172
|
componentId: "sc-1p15zk0-0"
|
|
4525
|
-
})(templateObject_1$
|
|
5173
|
+
})(templateObject_1$7 || (templateObject_1$7 = __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$5.spacing[2]);
|
|
4526
5174
|
var StyledLabel$2 = styled.label.withConfig({
|
|
4527
5175
|
displayName: "PasswordField__StyledLabel",
|
|
4528
5176
|
componentId: "sc-1p15zk0-1"
|
|
4529
|
-
})(templateObject_2$
|
|
5177
|
+
})(templateObject_2$7 || (templateObject_2$7 = __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$5.spacing[1], semantic$5.typography.label, semantic$5.color.text["default"], semantic$5.color.text.disabled);
|
|
4530
5178
|
var StyledRequiredIndicator$1 = styled.span.withConfig({
|
|
4531
5179
|
displayName: "PasswordField__StyledRequiredIndicator",
|
|
4532
5180
|
componentId: "sc-1p15zk0-2"
|
|
4533
|
-
})(templateObject_3$
|
|
5181
|
+
})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$5.color.text.error, base$5.fontWeight[5]);
|
|
4534
5182
|
var StyledHelperText$1 = styled.div.withConfig({
|
|
4535
5183
|
displayName: "PasswordField__StyledHelperText",
|
|
4536
5184
|
componentId: "sc-1p15zk0-3"
|
|
4537
|
-
})(templateObject_4$
|
|
5185
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), semantic$5.typography.caption, function (_a) {
|
|
4538
5186
|
var $hasError = _a.$hasError;
|
|
4539
|
-
return $hasError ? semantic$
|
|
5187
|
+
return $hasError ? semantic$5.color.text.error : semantic$5.color.text.subdued;
|
|
4540
5188
|
});
|
|
4541
|
-
var StyledInputWrapper = styled.div.withConfig({
|
|
5189
|
+
var StyledInputWrapper$1 = styled.div.withConfig({
|
|
4542
5190
|
displayName: "PasswordField__StyledInputWrapper",
|
|
4543
5191
|
componentId: "sc-1p15zk0-4"
|
|
4544
|
-
})(templateObject_5$
|
|
5192
|
+
})(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
4545
5193
|
var StyledToggleButton = styled.div.withConfig({
|
|
4546
5194
|
displayName: "PasswordField__StyledToggleButton",
|
|
4547
5195
|
componentId: "sc-1p15zk0-5"
|
|
4548
|
-
})(templateObject_6$
|
|
5196
|
+
})(templateObject_6$5 || (templateObject_6$5 = __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"
|
|
4549
5197
|
/**
|
|
4550
5198
|
* PasswordField component for secure password input with visibility toggle
|
|
4551
5199
|
*
|
|
@@ -4557,7 +5205,7 @@ var StyledToggleButton = styled.div.withConfig({
|
|
|
4557
5205
|
* required
|
|
4558
5206
|
* />
|
|
4559
5207
|
* ```
|
|
4560
|
-
*/])), base$
|
|
5208
|
+
*/])), base$5.spacing[2]);
|
|
4561
5209
|
/**
|
|
4562
5210
|
* PasswordField component for secure password input with visibility toggle
|
|
4563
5211
|
*
|
|
@@ -4603,7 +5251,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
4603
5251
|
"data-disabled": disabled
|
|
4604
5252
|
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$1, {
|
|
4605
5253
|
"aria-label": "required"
|
|
4606
|
-
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper, null, /*#__PURE__*/React.createElement(StyledInputBase, _extends({
|
|
5254
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$1, null, /*#__PURE__*/React.createElement(StyledInputBase, _extends({
|
|
4607
5255
|
ref: ref,
|
|
4608
5256
|
id: id,
|
|
4609
5257
|
type: showPassword ? 'text' : 'password',
|
|
@@ -4638,18 +5286,355 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
4638
5286
|
}, helperText));
|
|
4639
5287
|
});
|
|
4640
5288
|
PasswordField.displayName = 'PasswordField';
|
|
4641
|
-
var templateObject_1$
|
|
5289
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$5;
|
|
4642
5290
|
|
|
4643
5291
|
React.createElement;
|
|
4644
|
-
var semantic$
|
|
4645
|
-
base$
|
|
5292
|
+
var semantic$4 = tokensData.semantic,
|
|
5293
|
+
base$4 = tokensData.base;
|
|
5294
|
+
var StyledSearchContainer = styled.div.withConfig({
|
|
5295
|
+
displayName: "SearchField__StyledSearchContainer",
|
|
5296
|
+
componentId: "sc-qhz9i8-0"
|
|
5297
|
+
})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
5298
|
+
var StyledInputWrapper = styled.div.withConfig({
|
|
5299
|
+
displayName: "SearchField__StyledInputWrapper",
|
|
5300
|
+
componentId: "sc-qhz9i8-1"
|
|
5301
|
+
})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], semantic$4.color.background.subtle, base$4.border.width[1], semantic$4.color.border["default"], base$4.border.radius[3], semantic$4.motion.hover, function (props) {
|
|
5302
|
+
return props.$isFocused && "\n border-color: ".concat(semantic$4.color.border.interactive, ";\n box-shadow: 0 0 0 ").concat(base$4.border.width[2], " ").concat(semantic$4.color.background['interactive-subtle'], ";\n ");
|
|
5303
|
+
}, function (props) {
|
|
5304
|
+
return props.$disabled && "\n background-color: ".concat(semantic$4.color.background.disabled, ";\n cursor: not-allowed;\n ");
|
|
5305
|
+
}, semantic$4.color.border.strong);
|
|
5306
|
+
var StyledInput = styled.input.withConfig({
|
|
5307
|
+
displayName: "SearchField__StyledInput",
|
|
5308
|
+
componentId: "sc-qhz9i8-2"
|
|
5309
|
+
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n \n &::placeholder {\n color: ", ";\n }\n \n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n flex: 1;\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n \n &::placeholder {\n color: ", ";\n }\n \n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"])), semantic$4.typography.body, semantic$4.color.text["default"], semantic$4.color.text.subdued, semantic$4.color.text.disabled);
|
|
5310
|
+
var StyledClearButton = styled.button.withConfig({
|
|
5311
|
+
displayName: "SearchField__StyledClearButton",
|
|
5312
|
+
componentId: "sc-qhz9i8-3"
|
|
5313
|
+
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"])), base$4.spacing[1], semantic$4.color.icon.subdued, base$4.border.radius[2], semantic$4.motion.hover, semantic$4.color.icon["default"], semantic$4.color.background.surface, base$4.border.width[2], semantic$4.color.border.strong, base$4.spacing[1]);
|
|
5314
|
+
var StyledSuggestionsList = styled.ul.withConfig({
|
|
5315
|
+
displayName: "SearchField__StyledSuggestionsList",
|
|
5316
|
+
componentId: "sc-qhz9i8-4"
|
|
5317
|
+
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: 300px;\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: 1000;\n"], ["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: 300px;\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: 1000;\n"])), base$4.spacing[1], semantic$4.color.background.subtle, base$4.border.width[1], semantic$4.color.border["default"], base$4.border.radius[3], base$4.shadow[3], base$4.spacing[1]);
|
|
5318
|
+
var StyledSuggestionItem = styled.li.withConfig({
|
|
5319
|
+
displayName: "SearchField__StyledSuggestionItem",
|
|
5320
|
+
componentId: "sc-qhz9i8-5"
|
|
5321
|
+
})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n &:hover {\n background-color: ", ";\n }\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n &:hover {\n background-color: ", ";\n }\n \n ", "\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], semantic$4.motion.hover, function (props) {
|
|
5322
|
+
return props.$isHighlighted && "\n background-color: ".concat(semantic$4.color.background['interactive-subtle'], ";\n ");
|
|
5323
|
+
}, semantic$4.color.background['interactive-subtle'], function (props) {
|
|
5324
|
+
return props.$isRecent && "\n color: ".concat(semantic$4.color.text.subdued, ";\n ");
|
|
5325
|
+
});
|
|
5326
|
+
var StyledSectionHeader = styled.div.withConfig({
|
|
5327
|
+
displayName: "SearchField__StyledSectionHeader",
|
|
5328
|
+
componentId: "sc-qhz9i8-6"
|
|
5329
|
+
})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"], ["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.caption, semantic$4.color.text.subdued, base$4.letterSpacing[4]);
|
|
5330
|
+
var StyledClearRecent = styled.button.withConfig({
|
|
5331
|
+
displayName: "SearchField__StyledClearRecent",
|
|
5332
|
+
componentId: "sc-qhz9i8-7"
|
|
5333
|
+
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n cursor: pointer;\n width: 100%;\n text-align: left;\n transition: ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n"], ["\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n cursor: pointer;\n width: 100%;\n text-align: left;\n transition: ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.small, semantic$4.color.text.interactive, semantic$4.motion.hover, semantic$4.color.background['interactive-subtle'], base$4.border.width[2], semantic$4.color.border.strong, base$4.spacing[1]);
|
|
5334
|
+
var debounce = function debounce(func, wait) {
|
|
5335
|
+
var timeout = null;
|
|
5336
|
+
return function () {
|
|
5337
|
+
var args = [];
|
|
5338
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
5339
|
+
args[_i] = arguments[_i];
|
|
5340
|
+
}
|
|
5341
|
+
if (timeout) clearTimeout(timeout);
|
|
5342
|
+
timeout = setTimeout(function () {
|
|
5343
|
+
return func.apply(void 0, args);
|
|
5344
|
+
}, wait);
|
|
5345
|
+
};
|
|
5346
|
+
};
|
|
5347
|
+
/**
|
|
5348
|
+
* SearchField component with autocomplete and recent searches
|
|
5349
|
+
*
|
|
5350
|
+
* Provides intelligent search with debouncing, keyboard navigation,
|
|
5351
|
+
* suggestions, and recent search history. Fully accessible with ARIA.
|
|
5352
|
+
*
|
|
5353
|
+
* @example
|
|
5354
|
+
* ```tsx
|
|
5355
|
+
* const [search, setSearch] = useState('')
|
|
5356
|
+
* const [suggestions] = useState([
|
|
5357
|
+
* { id: '1', label: 'Apple', category: 'Fruit' },
|
|
5358
|
+
* { id: '2', label: 'Banana', category: 'Fruit' }
|
|
5359
|
+
* ])
|
|
5360
|
+
*
|
|
5361
|
+
* <SearchField
|
|
5362
|
+
* value={search}
|
|
5363
|
+
* onChange={setSearch}
|
|
5364
|
+
* suggestions={suggestions}
|
|
5365
|
+
* recentSearches={['coffee', 'tea']}
|
|
5366
|
+
* onSuggestionSelect={(item) => console.log('Selected:', item)}
|
|
5367
|
+
* />
|
|
5368
|
+
* ```
|
|
5369
|
+
*/
|
|
5370
|
+
var SearchField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
5371
|
+
var value = _a.value,
|
|
5372
|
+
onChange = _a.onChange,
|
|
5373
|
+
_b = _a.suggestions,
|
|
5374
|
+
suggestions = _b === void 0 ? [] : _b,
|
|
5375
|
+
_c = _a.showRecentSearches,
|
|
5376
|
+
showRecentSearches = _c === void 0 ? true : _c,
|
|
5377
|
+
_d = _a.recentSearches,
|
|
5378
|
+
recentSearches = _d === void 0 ? [] : _d,
|
|
5379
|
+
onSuggestionSelect = _a.onSuggestionSelect,
|
|
5380
|
+
onClearRecentSearches = _a.onClearRecentSearches,
|
|
5381
|
+
_e = _a.debounceMs,
|
|
5382
|
+
debounceMs = _e === void 0 ? 300 : _e,
|
|
5383
|
+
_f = _a.placeholder,
|
|
5384
|
+
placeholder = _f === void 0 ? 'Search...' : _f,
|
|
5385
|
+
_g = _a.disabled,
|
|
5386
|
+
disabled = _g === void 0 ? false : _g,
|
|
5387
|
+
_h = _a.loading,
|
|
5388
|
+
loading = _h === void 0 ? false : _h,
|
|
5389
|
+
_j = _a["aria-label"],
|
|
5390
|
+
ariaLabel = _j === void 0 ? 'Search' : _j,
|
|
5391
|
+
dataTestId = _a["data-testid"],
|
|
5392
|
+
inputProps = __rest(_a, ["value", "onChange", "suggestions", "showRecentSearches", "recentSearches", "onSuggestionSelect", "onClearRecentSearches", "debounceMs", "placeholder", "disabled", "loading", 'aria-label', 'data-testid']);
|
|
5393
|
+
var _k = React.useState(false),
|
|
5394
|
+
isFocused = _k[0],
|
|
5395
|
+
setIsFocused = _k[1];
|
|
5396
|
+
var _l = React.useState(false),
|
|
5397
|
+
showSuggestions = _l[0],
|
|
5398
|
+
setShowSuggestions = _l[1];
|
|
5399
|
+
var _m = React.useState(-1),
|
|
5400
|
+
highlightedIndex = _m[0],
|
|
5401
|
+
setHighlightedIndex = _m[1];
|
|
5402
|
+
var _o = React.useState(value);
|
|
5403
|
+
_o[0];
|
|
5404
|
+
var setDebouncedValue = _o[1];
|
|
5405
|
+
var inputRef = React.useRef(null);
|
|
5406
|
+
var listRef = React.useRef(null);
|
|
5407
|
+
// Combine refs
|
|
5408
|
+
React.useEffect(function () {
|
|
5409
|
+
if (ref) {
|
|
5410
|
+
if (typeof ref === 'function') {
|
|
5411
|
+
ref(inputRef.current);
|
|
5412
|
+
} else {
|
|
5413
|
+
ref.current = inputRef.current;
|
|
5414
|
+
}
|
|
5415
|
+
}
|
|
5416
|
+
}, [ref]);
|
|
5417
|
+
// Debounced search
|
|
5418
|
+
var debouncedOnChange = React.useMemo(function () {
|
|
5419
|
+
return debounce(function (newValue) {
|
|
5420
|
+
setDebouncedValue(newValue);
|
|
5421
|
+
}, debounceMs);
|
|
5422
|
+
}, [debounceMs]);
|
|
5423
|
+
React.useEffect(function () {
|
|
5424
|
+
debouncedOnChange(value);
|
|
5425
|
+
}, [value, debouncedOnChange]);
|
|
5426
|
+
// Combined list of suggestions and recent searches
|
|
5427
|
+
var displayItems = React.useMemo(function () {
|
|
5428
|
+
var items = [];
|
|
5429
|
+
if (value.trim()) {
|
|
5430
|
+
// Show matching suggestions
|
|
5431
|
+
suggestions.forEach(function (s) {
|
|
5432
|
+
return items.push({
|
|
5433
|
+
type: 'suggestion',
|
|
5434
|
+
data: s
|
|
5435
|
+
});
|
|
5436
|
+
});
|
|
5437
|
+
} else if (showRecentSearches && recentSearches.length > 0) {
|
|
5438
|
+
// Show recent searches when empty
|
|
5439
|
+
recentSearches.forEach(function (r) {
|
|
5440
|
+
return items.push({
|
|
5441
|
+
type: 'recent',
|
|
5442
|
+
data: r
|
|
5443
|
+
});
|
|
5444
|
+
});
|
|
5445
|
+
if (onClearRecentSearches) {
|
|
5446
|
+
items.push({
|
|
5447
|
+
type: 'clear',
|
|
5448
|
+
data: 'clear'
|
|
5449
|
+
});
|
|
5450
|
+
}
|
|
5451
|
+
}
|
|
5452
|
+
return items;
|
|
5453
|
+
}, [value, suggestions, recentSearches, showRecentSearches, onClearRecentSearches]);
|
|
5454
|
+
var handleInputChange = function handleInputChange(e) {
|
|
5455
|
+
var newValue = e.target.value;
|
|
5456
|
+
onChange(newValue);
|
|
5457
|
+
setShowSuggestions(true);
|
|
5458
|
+
setHighlightedIndex(-1);
|
|
5459
|
+
};
|
|
5460
|
+
var handleFocus = function handleFocus(e) {
|
|
5461
|
+
var _a;
|
|
5462
|
+
setIsFocused(true);
|
|
5463
|
+
setShowSuggestions(true);
|
|
5464
|
+
(_a = inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
|
|
5465
|
+
};
|
|
5466
|
+
var handleBlur = function handleBlur(e) {
|
|
5467
|
+
var _a;
|
|
5468
|
+
// Delay to allow click events on suggestions
|
|
5469
|
+
setTimeout(function () {
|
|
5470
|
+
setIsFocused(false);
|
|
5471
|
+
setShowSuggestions(false);
|
|
5472
|
+
setHighlightedIndex(-1);
|
|
5473
|
+
}, 200);
|
|
5474
|
+
(_a = inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
|
|
5475
|
+
};
|
|
5476
|
+
var handleSuggestionClick = function handleSuggestionClick(item) {
|
|
5477
|
+
var _a;
|
|
5478
|
+
if (item.type === 'clear') {
|
|
5479
|
+
onClearRecentSearches === null || onClearRecentSearches === void 0 ? void 0 : onClearRecentSearches();
|
|
5480
|
+
return;
|
|
5481
|
+
}
|
|
5482
|
+
var suggestion = item.data;
|
|
5483
|
+
if (typeof suggestion === 'string') {
|
|
5484
|
+
onChange(suggestion);
|
|
5485
|
+
onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(suggestion);
|
|
5486
|
+
} else {
|
|
5487
|
+
onChange(suggestion.label);
|
|
5488
|
+
onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(suggestion);
|
|
5489
|
+
}
|
|
5490
|
+
setShowSuggestions(false);
|
|
5491
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
5492
|
+
};
|
|
5493
|
+
var handleClear = function handleClear() {
|
|
5494
|
+
var _a;
|
|
5495
|
+
onChange('');
|
|
5496
|
+
setShowSuggestions(false);
|
|
5497
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
5498
|
+
};
|
|
5499
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
5500
|
+
var _a;
|
|
5501
|
+
if (!showSuggestions || displayItems.length === 0) return;
|
|
5502
|
+
switch (e.key) {
|
|
5503
|
+
case 'ArrowDown':
|
|
5504
|
+
e.preventDefault();
|
|
5505
|
+
setHighlightedIndex(function (prev) {
|
|
5506
|
+
return prev < displayItems.length - 1 ? prev + 1 : prev;
|
|
5507
|
+
});
|
|
5508
|
+
break;
|
|
5509
|
+
case 'ArrowUp':
|
|
5510
|
+
e.preventDefault();
|
|
5511
|
+
setHighlightedIndex(function (prev) {
|
|
5512
|
+
return prev > 0 ? prev - 1 : -1;
|
|
5513
|
+
});
|
|
5514
|
+
break;
|
|
5515
|
+
case 'Enter':
|
|
5516
|
+
e.preventDefault();
|
|
5517
|
+
if (highlightedIndex >= 0 && highlightedIndex < displayItems.length) {
|
|
5518
|
+
handleSuggestionClick(displayItems[highlightedIndex]);
|
|
5519
|
+
}
|
|
5520
|
+
break;
|
|
5521
|
+
case 'Escape':
|
|
5522
|
+
e.preventDefault();
|
|
5523
|
+
setShowSuggestions(false);
|
|
5524
|
+
setHighlightedIndex(-1);
|
|
5525
|
+
break;
|
|
5526
|
+
}
|
|
5527
|
+
(_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
|
|
5528
|
+
};
|
|
5529
|
+
// Scroll highlighted item into view
|
|
5530
|
+
React.useEffect(function () {
|
|
5531
|
+
var _a;
|
|
5532
|
+
if (highlightedIndex >= 0 && listRef.current) {
|
|
5533
|
+
var items = listRef.current.querySelectorAll('li');
|
|
5534
|
+
(_a = items[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
5535
|
+
block: 'nearest'
|
|
5536
|
+
});
|
|
5537
|
+
}
|
|
5538
|
+
}, [highlightedIndex]);
|
|
5539
|
+
var showClearButton = value.length > 0 && !disabled;
|
|
5540
|
+
var hasItems = displayItems.length > 0;
|
|
5541
|
+
return /*#__PURE__*/React.createElement(StyledSearchContainer, {
|
|
5542
|
+
$isFocused: isFocused,
|
|
5543
|
+
$disabled: disabled,
|
|
5544
|
+
"data-testid": dataTestId
|
|
5545
|
+
}, /*#__PURE__*/React.createElement(StyledInputWrapper, {
|
|
5546
|
+
$isFocused: isFocused,
|
|
5547
|
+
$disabled: disabled
|
|
5548
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
5549
|
+
name: "search",
|
|
5550
|
+
size: "sm",
|
|
5551
|
+
iconColor: "subdued",
|
|
5552
|
+
"aria-hidden": "true"
|
|
5553
|
+
}), /*#__PURE__*/React.createElement(StyledInput, _extends({
|
|
5554
|
+
ref: inputRef,
|
|
5555
|
+
type: "text",
|
|
5556
|
+
value: value,
|
|
5557
|
+
onChange: handleInputChange,
|
|
5558
|
+
onFocus: handleFocus,
|
|
5559
|
+
onBlur: handleBlur,
|
|
5560
|
+
onKeyDown: handleKeyDown,
|
|
5561
|
+
placeholder: placeholder,
|
|
5562
|
+
disabled: disabled,
|
|
5563
|
+
"aria-label": ariaLabel,
|
|
5564
|
+
"aria-autocomplete": "list",
|
|
5565
|
+
"aria-controls": showSuggestions && hasItems ? 'search-suggestions' : undefined,
|
|
5566
|
+
"aria-expanded": showSuggestions && hasItems,
|
|
5567
|
+
"aria-activedescendant": highlightedIndex >= 0 ? "suggestion-".concat(highlightedIndex) : undefined,
|
|
5568
|
+
role: "combobox"
|
|
5569
|
+
}, inputProps)), loading && /*#__PURE__*/React.createElement(Icon, {
|
|
5570
|
+
name: "refresh",
|
|
5571
|
+
size: "sm",
|
|
5572
|
+
iconColor: "subdued",
|
|
5573
|
+
"aria-label": "Loading"
|
|
5574
|
+
}), showClearButton && /*#__PURE__*/React.createElement(StyledClearButton, {
|
|
5575
|
+
type: "button",
|
|
5576
|
+
onClick: handleClear,
|
|
5577
|
+
"aria-label": "Clear search",
|
|
5578
|
+
tabIndex: -1
|
|
5579
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
5580
|
+
name: "close",
|
|
5581
|
+
size: "xs"
|
|
5582
|
+
}))), showSuggestions && hasItems && /*#__PURE__*/React.createElement(StyledSuggestionsList, {
|
|
5583
|
+
ref: listRef,
|
|
5584
|
+
id: "search-suggestions",
|
|
5585
|
+
role: "listbox"
|
|
5586
|
+
}, !value.trim() && showRecentSearches && recentSearches.length > 0 && /*#__PURE__*/React.createElement(StyledSectionHeader, null, "Recent Searches"), displayItems.map(function (item, index) {
|
|
5587
|
+
if (item.type === 'clear') {
|
|
5588
|
+
return /*#__PURE__*/React.createElement(StyledClearRecent, {
|
|
5589
|
+
key: "clear",
|
|
5590
|
+
type: "button",
|
|
5591
|
+
onClick: function onClick() {
|
|
5592
|
+
return handleSuggestionClick(item);
|
|
5593
|
+
}
|
|
5594
|
+
}, "Clear recent searches");
|
|
5595
|
+
}
|
|
5596
|
+
var suggestion = item.data;
|
|
5597
|
+
var isString = typeof suggestion === 'string';
|
|
5598
|
+
var label = isString ? suggestion : suggestion.label;
|
|
5599
|
+
var description = !isString ? suggestion.description : undefined;
|
|
5600
|
+
return /*#__PURE__*/React.createElement(StyledSuggestionItem, {
|
|
5601
|
+
key: isString ? suggestion : suggestion.id,
|
|
5602
|
+
id: "suggestion-".concat(index),
|
|
5603
|
+
role: "option",
|
|
5604
|
+
"aria-selected": index === highlightedIndex,
|
|
5605
|
+
$isHighlighted: index === highlightedIndex,
|
|
5606
|
+
$isRecent: item.type === 'recent',
|
|
5607
|
+
onClick: function onClick() {
|
|
5608
|
+
return handleSuggestionClick(item);
|
|
5609
|
+
}
|
|
5610
|
+
}, item.type === 'recent' && /*#__PURE__*/React.createElement(Icon, {
|
|
5611
|
+
name: "refresh",
|
|
5612
|
+
size: "xs",
|
|
5613
|
+
"aria-hidden": "true"
|
|
5614
|
+
}), /*#__PURE__*/React.createElement(Stack, {
|
|
5615
|
+
direction: "column",
|
|
5616
|
+
gap: "none"
|
|
5617
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
5618
|
+
variant: "body"
|
|
5619
|
+
}, label), description && /*#__PURE__*/React.createElement(Typography, {
|
|
5620
|
+
variant: "caption",
|
|
5621
|
+
color: "subdued"
|
|
5622
|
+
}, description)));
|
|
5623
|
+
})));
|
|
5624
|
+
});
|
|
5625
|
+
SearchField.displayName = 'SearchField';
|
|
5626
|
+
var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4;
|
|
5627
|
+
|
|
5628
|
+
React.createElement;
|
|
5629
|
+
var semantic$3 = tokensData.semantic,
|
|
5630
|
+
base$3 = tokensData.base;
|
|
4646
5631
|
// Fade in animation for overlay
|
|
4647
|
-
var fadeIn = styled.keyframes(templateObject_1$
|
|
5632
|
+
var fadeIn = styled.keyframes(templateObject_1$5 || (templateObject_1$5 = __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"
|
|
4648
5633
|
// Slide animations for each position
|
|
4649
5634
|
])));
|
|
4650
5635
|
// Slide animations for each position
|
|
4651
|
-
var slideInRight = styled.keyframes(templateObject_2$
|
|
4652
|
-
var slideInLeft = styled.keyframes(templateObject_3$
|
|
5636
|
+
var slideInRight = styled.keyframes(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
5637
|
+
var slideInLeft = styled.keyframes(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
4653
5638
|
var slideInTop = styled.keyframes(templateObject_4$4 || (templateObject_4$4 = __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"])));
|
|
4654
5639
|
var slideInBottom = styled.keyframes(templateObject_5$3 || (templateObject_5$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"])));
|
|
4655
5640
|
var StyledOverlay = styled.div.withConfig({
|
|
@@ -4668,25 +5653,25 @@ var StyledSheet = styled.div.withConfig({
|
|
|
4668
5653
|
},
|
|
4669
5654
|
displayName: "Sheet__StyledSheet",
|
|
4670
5655
|
componentId: "sc-8abisx-1"
|
|
4671
|
-
})(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$
|
|
5656
|
+
})(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$3.color.background["default"], base$3.shadow[4], function (_a) {
|
|
4672
5657
|
var $position = _a.$position,
|
|
4673
5658
|
$variant = _a.$variant,
|
|
4674
5659
|
$width = _a.$width,
|
|
4675
5660
|
$height = _a.$height;
|
|
4676
5661
|
var isDrawer = $variant === 'drawer';
|
|
4677
|
-
var margin = isDrawer ? base$
|
|
4678
|
-
var borderRadius = isDrawer ? base$
|
|
5662
|
+
var margin = isDrawer ? base$3.spacing[4] : '0';
|
|
5663
|
+
var borderRadius = isDrawer ? base$3.border.radius[3] : '0';
|
|
4679
5664
|
switch ($position) {
|
|
4680
5665
|
case 'right':
|
|
4681
|
-
return styled.css(templateObject_8$3 || (templateObject_8$3 = __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$
|
|
5666
|
+
return styled.css(templateObject_8$3 || (templateObject_8$3 = __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$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInRight);
|
|
4682
5667
|
case 'left':
|
|
4683
|
-
return styled.css(templateObject_9$2 || (templateObject_9$2 = __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$
|
|
5668
|
+
return styled.css(templateObject_9$2 || (templateObject_9$2 = __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$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInLeft);
|
|
4684
5669
|
case 'top':
|
|
4685
|
-
return styled.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$
|
|
5670
|
+
return styled.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$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInTop);
|
|
4686
5671
|
case 'bottom':
|
|
4687
|
-
return styled.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$
|
|
5672
|
+
return styled.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$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInBottom);
|
|
4688
5673
|
}
|
|
4689
|
-
}, base$
|
|
5674
|
+
}, base$3.spacing[2], semantic$3.color.background.subtle, semantic$3.color.border["default"], base$3.border.radius.circle, semantic$3.color.border.strong);
|
|
4690
5675
|
var StyledSheetContent = styled.div.withConfig({
|
|
4691
5676
|
displayName: "Sheet__StyledSheetContent",
|
|
4692
5677
|
componentId: "sc-8abisx-2"
|
|
@@ -4716,7 +5701,7 @@ var StyledSheetContent = styled.div.withConfig({
|
|
|
4716
5701
|
* <h2>Mobile Menu</h2>
|
|
4717
5702
|
* </Sheet>
|
|
4718
5703
|
* ```
|
|
4719
|
-
*/])), base$
|
|
5704
|
+
*/])), base$3.spacing[6]);
|
|
4720
5705
|
/**
|
|
4721
5706
|
* Sheet component for side panels and drawers
|
|
4722
5707
|
*
|
|
@@ -4839,33 +5824,33 @@ var Sheet = function Sheet(_a) {
|
|
|
4839
5824
|
}, /*#__PURE__*/React.createElement(StyledSheetContent, null, children)));
|
|
4840
5825
|
};
|
|
4841
5826
|
Sheet.displayName = 'Sheet';
|
|
4842
|
-
var templateObject_1$
|
|
5827
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
|
|
4843
5828
|
|
|
4844
5829
|
React.createElement;
|
|
4845
|
-
var semantic$
|
|
4846
|
-
base$
|
|
5830
|
+
var semantic$2 = tokensData.semantic,
|
|
5831
|
+
base$2 = tokensData.base;
|
|
4847
5832
|
var StyledSliderContainer = styled.div.withConfig({
|
|
4848
5833
|
displayName: "Slider__StyledSliderContainer",
|
|
4849
5834
|
componentId: "sc-6mh2d4-0"
|
|
4850
|
-
})(templateObject_1$
|
|
5835
|
+
})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap:0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap:0;\n width: 100%;\n"])));
|
|
4851
5836
|
var StyledLabel$1 = styled.label.withConfig({
|
|
4852
5837
|
displayName: "Slider__StyledLabel",
|
|
4853
5838
|
componentId: "sc-6mh2d4-1"
|
|
4854
|
-
})(templateObject_2$
|
|
5839
|
+
})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"])), semantic$2.typography.label, function (_a) {
|
|
4855
5840
|
var $disabled = _a.$disabled;
|
|
4856
|
-
return $disabled ? semantic$
|
|
4857
|
-
}, semantic$
|
|
5841
|
+
return $disabled ? semantic$2.color.text.disabled : semantic$2.color.text["default"];
|
|
5842
|
+
}, semantic$2.spacing.layout.lg);
|
|
4858
5843
|
var StyledSliderTrackContainer = styled.div.withConfig({
|
|
4859
5844
|
displayName: "Slider__StyledSliderTrackContainer",
|
|
4860
5845
|
componentId: "sc-6mh2d4-2"
|
|
4861
|
-
})(templateObject_3$
|
|
5846
|
+
})(templateObject_3$4 || (templateObject_3$4 = __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$2.spacing[10]);
|
|
4862
5847
|
var StyledTrack = styled.div.withConfig({
|
|
4863
5848
|
displayName: "Slider__StyledTrack",
|
|
4864
5849
|
componentId: "sc-6mh2d4-3"
|
|
4865
|
-
})(templateObject_4$3 || (templateObject_4$3 = __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$
|
|
5850
|
+
})(templateObject_4$3 || (templateObject_4$3 = __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$2.spacing[1], function (_a) {
|
|
4866
5851
|
var $disabled = _a.$disabled;
|
|
4867
|
-
return $disabled ? semantic$
|
|
4868
|
-
}, base$
|
|
5852
|
+
return $disabled ? semantic$2.color.background.disabled : semantic$2.color.border["default"];
|
|
5853
|
+
}, base$2.border.radius.circle, function (_a) {
|
|
4869
5854
|
var $disabled = _a.$disabled;
|
|
4870
5855
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
4871
5856
|
});
|
|
@@ -4874,31 +5859,31 @@ var StyledTrackFill = styled.div.withConfig({
|
|
|
4874
5859
|
componentId: "sc-6mh2d4-4"
|
|
4875
5860
|
})(templateObject_5$2 || (templateObject_5$2 = __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) {
|
|
4876
5861
|
var $disabled = _a.$disabled;
|
|
4877
|
-
return $disabled ? semantic$
|
|
4878
|
-
}, base$
|
|
5862
|
+
return $disabled ? semantic$2.color.border["default"] : semantic$2.color.background.emphasis;
|
|
5863
|
+
}, base$2.border.radius.circle);
|
|
4879
5864
|
var StyledThumb = styled.div.withConfig({
|
|
4880
5865
|
displayName: "Slider__StyledThumb",
|
|
4881
5866
|
componentId: "sc-6mh2d4-5"
|
|
4882
|
-
})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\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 top: -", ";\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$
|
|
5867
|
+
})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\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 top: -", ";\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$2.spacing[5], base$2.spacing[5], semantic$2.spacing.layout.sm, function (_a) {
|
|
4883
5868
|
var $disabled = _a.$disabled;
|
|
4884
|
-
return $disabled ? semantic$
|
|
4885
|
-
}, base$
|
|
5869
|
+
return $disabled ? semantic$2.color.background.disabled : semantic$2.color.background.subtle;
|
|
5870
|
+
}, base$2.border.width[2], function (_a) {
|
|
4886
5871
|
var $disabled = _a.$disabled;
|
|
4887
|
-
return $disabled ? semantic$
|
|
4888
|
-
}, base$
|
|
5872
|
+
return $disabled ? semantic$2.color.border["default"] : semantic$2.color.background.emphasis;
|
|
5873
|
+
}, base$2.border.radius.circle, function (_a) {
|
|
4889
5874
|
var $disabled = _a.$disabled;
|
|
4890
5875
|
return $disabled ? 'not-allowed' : 'grab';
|
|
4891
|
-
}, semantic$
|
|
5876
|
+
}, semantic$2.motion.transition.fast, base$2.shadow[2], base$2.shadow[3], base$2.border.width[2], semantic$2.color.border.interactive, base$2.spacing[1], function (_a) {
|
|
4892
5877
|
var $active = _a.$active;
|
|
4893
|
-
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(base$
|
|
5878
|
+
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(base$2.shadow[4], ";\n ");
|
|
4894
5879
|
});
|
|
4895
5880
|
var StyledValueLabel = styled.div.withConfig({
|
|
4896
5881
|
displayName: "Slider__StyledValueLabel",
|
|
4897
5882
|
componentId: "sc-6mh2d4-6"
|
|
4898
|
-
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n position: absolute;\n top: -", ";\n left: ", ";\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 left: ", ";\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$
|
|
5883
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n position: absolute;\n top: -", ";\n left: ", ";\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 left: ", ";\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$2.spacing[8], semantic$2.spacing.layout.sm, base$2.spacing[1], base$2.spacing[2], semantic$2.color.background.emphasis, semantic$2.color.text.inverse, semantic$2.typography.caption, base$2.border.radius[2], function (_a) {
|
|
4899
5884
|
var $disabled = _a.$disabled;
|
|
4900
|
-
return $disabled ? base$
|
|
4901
|
-
}, base$
|
|
5885
|
+
return $disabled ? base$2.opacity[50] : base$2.opacity[100];
|
|
5886
|
+
}, base$2.spacing[1], base$2.spacing[1], base$2.spacing[1], semantic$2.color.background.emphasis);
|
|
4902
5887
|
var StyledMinMaxLabels = styled.div.withConfig({
|
|
4903
5888
|
displayName: "Slider__StyledMinMaxLabels",
|
|
4904
5889
|
componentId: "sc-6mh2d4-7"
|
|
@@ -4926,7 +5911,7 @@ var StyledMinMaxLabels = styled.div.withConfig({
|
|
|
4926
5911
|
* onRangeChange={(values) => console.log(values)}
|
|
4927
5912
|
* />
|
|
4928
5913
|
* ```
|
|
4929
|
-
*/])), semantic$
|
|
5914
|
+
*/])), semantic$2.typography.body, semantic$2.color.text.subdued, base$2.spacing[1]);
|
|
4930
5915
|
/**
|
|
4931
5916
|
* Slider component for single value or range selection
|
|
4932
5917
|
*
|
|
@@ -5227,7 +6212,225 @@ var Slider = function Slider(_a) {
|
|
|
5227
6212
|
}, formatValue(currentValue))))), /*#__PURE__*/React.createElement(StyledMinMaxLabels, null, /*#__PURE__*/React.createElement("span", null, formatValue(min)), /*#__PURE__*/React.createElement("span", null, formatValue(max))));
|
|
5228
6213
|
};
|
|
5229
6214
|
Slider.displayName = 'Slider';
|
|
5230
|
-
var templateObject_1$
|
|
6215
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
6216
|
+
|
|
6217
|
+
React.createElement;
|
|
6218
|
+
var semantic$1 = tokensData.semantic,
|
|
6219
|
+
base$1 = tokensData.base;
|
|
6220
|
+
var StyledTabList = styled.div.withConfig({
|
|
6221
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6222
|
+
return !prop.startsWith('$');
|
|
6223
|
+
},
|
|
6224
|
+
displayName: "TabBar__StyledTabList",
|
|
6225
|
+
componentId: "sc-1g9ib0y-0"
|
|
6226
|
+
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n border-bottom: ", ";\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n \n &::-webkit-scrollbar {\n height: 4px;\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n border-bottom: ", ";\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n \n &::-webkit-scrollbar {\n height: 4px;\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n"])), function (props) {
|
|
6227
|
+
return props.$variant === 'pills' ? base$1.spacing[2] : '0';
|
|
6228
|
+
}, function (props) {
|
|
6229
|
+
return props.$variant === 'underline' ? "".concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border.subtle) : 'none';
|
|
6230
|
+
}, semantic$1.color.background.subtle, semantic$1.color.border["default"], base$1.border.radius[2]);
|
|
6231
|
+
var StyledTab = styled.button.withConfig({
|
|
6232
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6233
|
+
return !prop.startsWith('$');
|
|
6234
|
+
},
|
|
6235
|
+
displayName: "TabBar__StyledTab",
|
|
6236
|
+
componentId: "sc-1g9ib0y-1"
|
|
6237
|
+
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /* Variant-specific styles */\n ", "\n \n /* Disabled state */\n opacity: ", ";\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n z-index: 1;\n }\n \n /* Active/pressed state */\n &:active:not(:disabled) {\n transform: translateY(1px);\n }\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /* Variant-specific styles */\n ", "\n \n /* Disabled state */\n opacity: ", ";\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n z-index: 1;\n }\n \n /* Active/pressed state */\n &:active:not(:disabled) {\n transform: translateY(1px);\n }\n"])), base$1.spacing[2], base$1.spacing[3], base$1.spacing[4], semantic$1.typography.button2, function (props) {
|
|
6238
|
+
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
6239
|
+
}, semantic$1.motion.hover, function (props) {
|
|
6240
|
+
if (props.$variant === 'pills') {
|
|
6241
|
+
return "\n border-radius: ".concat(base$1.border.radius.circle, ";\n background-color: ").concat(props.$isActive ? semantic$1.color.background.interactive : semantic$1.color.background.subtle, ";\n color: ").concat(props.$isActive ? semantic$1.color.text.inverse : semantic$1.color.text["default"], ";\n \n &:hover:not(:disabled) {\n background-color: ").concat(props.$isActive ? semantic$1.color.background['interactive-hover'] : semantic$1.color.background.surface, ";\n }\n ");
|
|
6242
|
+
}
|
|
6243
|
+
if (props.$variant === 'underline') {
|
|
6244
|
+
return "\n color: ".concat(props.$isActive ? semantic$1.color.text.interactive : semantic$1.color.text.subdued, ";\n \n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n height: ").concat(base$1.border.width[2], ";\n background-color: ").concat(props.$isActive ? semantic$1.color.background.interactive : 'transparent', ";\n transition: ").concat(semantic$1.motion.hover, ";\n }\n \n &:hover:not(:disabled) {\n color: ").concat(semantic$1.color.text.interactive, ";\n }\n ");
|
|
6245
|
+
}
|
|
6246
|
+
// default variant
|
|
6247
|
+
return "\n border-radius: ".concat(base$1.border.radius[2], " ").concat(base$1.border.radius[2], " 0 0;\n background-color: ").concat(props.$isActive ? semantic$1.color.background.subtle : semantic$1.color.background["default"], ";\n color: ").concat(props.$isActive ? semantic$1.color.text["default"] : semantic$1.color.text.subdued, ";\n border: ").concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border["default"], ";\n border-bottom: ").concat(props.$isActive ? 'none' : "".concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border["default"]), ";\n margin-bottom: ").concat(props.$isActive ? '-1px' : '0', ";\n \n &:hover:not(:disabled) {\n background-color: ").concat(semantic$1.color.background.surface, ";\n color: ").concat(semantic$1.color.text["default"], ";\n }\n ");
|
|
6248
|
+
}, function (props) {
|
|
6249
|
+
return props.$disabled ? '0.5' : '1';
|
|
6250
|
+
}, base$1.border.width[2], semantic$1.color.border.strong, base$1.spacing[1]);
|
|
6251
|
+
var StyledBadge = styled.span.withConfig({
|
|
6252
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6253
|
+
return !prop.startsWith('$');
|
|
6254
|
+
},
|
|
6255
|
+
displayName: "TabBar__StyledBadge",
|
|
6256
|
+
componentId: "sc-1g9ib0y-2"
|
|
6257
|
+
})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 ", ";\n font: ", ";\n font-weight: ", ";\n border-radius: ", ";\n background-color: ", ";\n color: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 ", ";\n font: ", ";\n font-weight: ", ";\n border-radius: ", ";\n background-color: ", ";\n color: ", ";\n"
|
|
6258
|
+
/**
|
|
6259
|
+
* TabBar component for tabbed navigation
|
|
6260
|
+
*
|
|
6261
|
+
* Provides accessible tab navigation with 3 visual variants, keyboard support,
|
|
6262
|
+
* and optional badge counts. Follows ARIA tablist pattern.
|
|
6263
|
+
*
|
|
6264
|
+
* @example
|
|
6265
|
+
* ```tsx
|
|
6266
|
+
* const [activeTab, setActiveTab] = useState('all')
|
|
6267
|
+
*
|
|
6268
|
+
* <TabBar
|
|
6269
|
+
* tabs={[
|
|
6270
|
+
* { id: 'all', label: 'All', badge: 42 },
|
|
6271
|
+
* { id: 'pending', label: 'Pending', badge: 5 },
|
|
6272
|
+
* { id: 'completed', label: 'Completed' }
|
|
6273
|
+
* ]}
|
|
6274
|
+
* activeTab={activeTab}
|
|
6275
|
+
* onTabChange={setActiveTab}
|
|
6276
|
+
* variant="pills"
|
|
6277
|
+
* />
|
|
6278
|
+
* ```
|
|
6279
|
+
*/])), base$1.spacing[1], semantic$1.typography.caption, base$1.fontWeight[5], base$1.border.radius.circle, function (props) {
|
|
6280
|
+
if (props.$variant === 'pills') {
|
|
6281
|
+
return props.$isActive ? 'rgba(255, 255, 255, 0.2)' : semantic$1.color.background.interactive;
|
|
6282
|
+
}
|
|
6283
|
+
return semantic$1.color.background.interactive;
|
|
6284
|
+
}, function (props) {
|
|
6285
|
+
return props.$variant === 'pills' && props.$isActive ? semantic$1.color.text.inverse : semantic$1.color.text.inverse;
|
|
6286
|
+
});
|
|
6287
|
+
/**
|
|
6288
|
+
* TabBar component for tabbed navigation
|
|
6289
|
+
*
|
|
6290
|
+
* Provides accessible tab navigation with 3 visual variants, keyboard support,
|
|
6291
|
+
* and optional badge counts. Follows ARIA tablist pattern.
|
|
6292
|
+
*
|
|
6293
|
+
* @example
|
|
6294
|
+
* ```tsx
|
|
6295
|
+
* const [activeTab, setActiveTab] = useState('all')
|
|
6296
|
+
*
|
|
6297
|
+
* <TabBar
|
|
6298
|
+
* tabs={[
|
|
6299
|
+
* { id: 'all', label: 'All', badge: 42 },
|
|
6300
|
+
* { id: 'pending', label: 'Pending', badge: 5 },
|
|
6301
|
+
* { id: 'completed', label: 'Completed' }
|
|
6302
|
+
* ]}
|
|
6303
|
+
* activeTab={activeTab}
|
|
6304
|
+
* onTabChange={setActiveTab}
|
|
6305
|
+
* variant="pills"
|
|
6306
|
+
* />
|
|
6307
|
+
* ```
|
|
6308
|
+
*/
|
|
6309
|
+
var TabBar = function TabBar(_a) {
|
|
6310
|
+
var tabs = _a.tabs,
|
|
6311
|
+
activeTab = _a.activeTab,
|
|
6312
|
+
onTabChange = _a.onTabChange,
|
|
6313
|
+
_b = _a.variant,
|
|
6314
|
+
variant = _b === void 0 ? 'default' : _b,
|
|
6315
|
+
_c = _a["aria-label"],
|
|
6316
|
+
ariaLabel = _c === void 0 ? 'Tab navigation' : _c,
|
|
6317
|
+
dataTestId = _a["data-testid"];
|
|
6318
|
+
var tabRefs = React.useRef([]);
|
|
6319
|
+
var _d = React.useState(function () {
|
|
6320
|
+
return tabs.findIndex(function (tab) {
|
|
6321
|
+
return tab.id === activeTab;
|
|
6322
|
+
});
|
|
6323
|
+
}),
|
|
6324
|
+
focusedIndex = _d[0],
|
|
6325
|
+
setFocusedIndex = _d[1];
|
|
6326
|
+
// Update focused index when active tab changes externally
|
|
6327
|
+
React.useEffect(function () {
|
|
6328
|
+
var newIndex = tabs.findIndex(function (tab) {
|
|
6329
|
+
return tab.id === activeTab;
|
|
6330
|
+
});
|
|
6331
|
+
if (newIndex !== -1) {
|
|
6332
|
+
setFocusedIndex(newIndex);
|
|
6333
|
+
}
|
|
6334
|
+
}, [activeTab, tabs]);
|
|
6335
|
+
var handleTabClick = function handleTabClick(tab, index) {
|
|
6336
|
+
if (!tab.disabled) {
|
|
6337
|
+
onTabChange(tab.id);
|
|
6338
|
+
setFocusedIndex(index);
|
|
6339
|
+
}
|
|
6340
|
+
};
|
|
6341
|
+
var handleKeyDown = function handleKeyDown(event, index) {
|
|
6342
|
+
var _a;
|
|
6343
|
+
var newIndex = index;
|
|
6344
|
+
switch (event.key) {
|
|
6345
|
+
case 'ArrowLeft':
|
|
6346
|
+
event.preventDefault();
|
|
6347
|
+
// Find previous non-disabled tab
|
|
6348
|
+
newIndex = index - 1;
|
|
6349
|
+
while (newIndex >= 0 && tabs[newIndex].disabled) {
|
|
6350
|
+
newIndex--;
|
|
6351
|
+
}
|
|
6352
|
+
if (newIndex < 0) {
|
|
6353
|
+
// Wrap to last non-disabled tab
|
|
6354
|
+
newIndex = tabs.length - 1;
|
|
6355
|
+
while (newIndex > index && tabs[newIndex].disabled) {
|
|
6356
|
+
newIndex--;
|
|
6357
|
+
}
|
|
6358
|
+
}
|
|
6359
|
+
break;
|
|
6360
|
+
case 'ArrowRight':
|
|
6361
|
+
event.preventDefault();
|
|
6362
|
+
// Find next non-disabled tab
|
|
6363
|
+
newIndex = index + 1;
|
|
6364
|
+
while (newIndex < tabs.length && tabs[newIndex].disabled) {
|
|
6365
|
+
newIndex++;
|
|
6366
|
+
}
|
|
6367
|
+
if (newIndex >= tabs.length) {
|
|
6368
|
+
// Wrap to first non-disabled tab
|
|
6369
|
+
newIndex = 0;
|
|
6370
|
+
while (newIndex < index && tabs[newIndex].disabled) {
|
|
6371
|
+
newIndex++;
|
|
6372
|
+
}
|
|
6373
|
+
}
|
|
6374
|
+
break;
|
|
6375
|
+
case 'Home':
|
|
6376
|
+
event.preventDefault();
|
|
6377
|
+
// Focus first non-disabled tab
|
|
6378
|
+
newIndex = 0;
|
|
6379
|
+
while (newIndex < tabs.length && tabs[newIndex].disabled) {
|
|
6380
|
+
newIndex++;
|
|
6381
|
+
}
|
|
6382
|
+
break;
|
|
6383
|
+
case 'End':
|
|
6384
|
+
event.preventDefault();
|
|
6385
|
+
// Focus last non-disabled tab
|
|
6386
|
+
newIndex = tabs.length - 1;
|
|
6387
|
+
while (newIndex >= 0 && tabs[newIndex].disabled) {
|
|
6388
|
+
newIndex--;
|
|
6389
|
+
}
|
|
6390
|
+
break;
|
|
6391
|
+
default:
|
|
6392
|
+
return;
|
|
6393
|
+
}
|
|
6394
|
+
if (newIndex !== index && newIndex >= 0 && newIndex < tabs.length) {
|
|
6395
|
+
setFocusedIndex(newIndex);
|
|
6396
|
+
(_a = tabRefs.current[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6397
|
+
}
|
|
6398
|
+
};
|
|
6399
|
+
return /*#__PURE__*/React.createElement(StyledTabList, {
|
|
6400
|
+
$variant: variant,
|
|
6401
|
+
role: "tablist",
|
|
6402
|
+
"aria-label": ariaLabel,
|
|
6403
|
+
"data-testid": dataTestId
|
|
6404
|
+
}, tabs.map(function (tab, index) {
|
|
6405
|
+
return /*#__PURE__*/React.createElement(StyledTab, {
|
|
6406
|
+
key: tab.id,
|
|
6407
|
+
ref: function ref(el) {
|
|
6408
|
+
tabRefs.current[index] = el;
|
|
6409
|
+
},
|
|
6410
|
+
$variant: variant,
|
|
6411
|
+
$isActive: tab.id === activeTab,
|
|
6412
|
+
$disabled: tab.disabled || false,
|
|
6413
|
+
role: "tab",
|
|
6414
|
+
"aria-selected": tab.id === activeTab,
|
|
6415
|
+
"aria-disabled": tab.disabled || false,
|
|
6416
|
+
tabIndex: index === focusedIndex ? 0 : -1,
|
|
6417
|
+
disabled: tab.disabled,
|
|
6418
|
+
onClick: function onClick() {
|
|
6419
|
+
return handleTabClick(tab, index);
|
|
6420
|
+
},
|
|
6421
|
+
onKeyDown: function onKeyDown(e) {
|
|
6422
|
+
return handleKeyDown(e, index);
|
|
6423
|
+
},
|
|
6424
|
+
"data-testid": "".concat(dataTestId, "-tab-").concat(tab.id)
|
|
6425
|
+
}, tab.label, typeof tab.badge === 'number' && tab.badge > 0 && /*#__PURE__*/React.createElement(StyledBadge, {
|
|
6426
|
+
$variant: variant,
|
|
6427
|
+
$isActive: tab.id === activeTab,
|
|
6428
|
+
"aria-label": "".concat(tab.badge, " items")
|
|
6429
|
+
}, tab.badge > 99 ? '99+' : tab.badge));
|
|
6430
|
+
}));
|
|
6431
|
+
};
|
|
6432
|
+
TabBar.displayName = 'TabBar';
|
|
6433
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
5231
6434
|
|
|
5232
6435
|
React.createElement;
|
|
5233
6436
|
var semantic = tokensData.semantic,
|
|
@@ -5702,6 +6905,7 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
5702
6905
|
var tokens = tokensData;
|
|
5703
6906
|
|
|
5704
6907
|
exports.AccountCard = AccountCard;
|
|
6908
|
+
exports.ActionSheet = ActionSheet;
|
|
5705
6909
|
exports.Alert = Alert;
|
|
5706
6910
|
exports.Avatar = Avatar;
|
|
5707
6911
|
exports.Badge = Badge;
|
|
@@ -5711,6 +6915,7 @@ exports.Breadcrumbs = Breadcrumbs;
|
|
|
5711
6915
|
exports.Button = Button;
|
|
5712
6916
|
exports.CardLarge = CardLarge;
|
|
5713
6917
|
exports.CardSmall = CardSmall;
|
|
6918
|
+
exports.CategoryBadge = CategoryBadge;
|
|
5714
6919
|
exports.Checkbox = Checkbox;
|
|
5715
6920
|
exports.Chip = Chip;
|
|
5716
6921
|
exports.ChipGroup = ChipGroup;
|
|
@@ -5737,11 +6942,14 @@ exports.PasswordField = PasswordField;
|
|
|
5737
6942
|
exports.Picture = Picture;
|
|
5738
6943
|
exports.ProgressBar = ProgressBar;
|
|
5739
6944
|
exports.ResponsiveGrid = ResponsiveGrid;
|
|
6945
|
+
exports.SearchField = SearchField;
|
|
5740
6946
|
exports.Sheet = Sheet;
|
|
5741
6947
|
exports.Slider = Slider;
|
|
5742
6948
|
exports.Stack = Stack;
|
|
6949
|
+
exports.StatusBadge = StatusBadge;
|
|
5743
6950
|
exports.StyledInputBase = StyledInputBase;
|
|
5744
6951
|
exports.StyledTextAreaBase = StyledTextAreaBase;
|
|
6952
|
+
exports.TabBar = TabBar;
|
|
5745
6953
|
exports.Tag = Tag;
|
|
5746
6954
|
exports.TextField = TextField;
|
|
5747
6955
|
exports.TransactionListItem = TransactionListItem;
|