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