@common-origin/design-system 2.0.1 → 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/Chip/shared/ChipBase.d.ts +1 -1
- package/dist/components/atoms/Chip/shared/utils.d.ts +1 -1
- package/dist/components/atoms/DateFormatter/DateFormatter.d.ts +3 -0
- package/dist/components/atoms/MoneyDisplay/MoneyDisplay.d.ts +26 -0
- package/dist/components/atoms/MoneyDisplay/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 +3 -0
- package/dist/components/molecules/AccountCard/AccountCard.d.ts +44 -0
- package/dist/components/molecules/AccountCard/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/Checkbox/SelectableInputBase.d.ts +1 -2
- package/dist/components/molecules/DateGroup/DateGroup.d.ts +34 -0
- package/dist/components/molecules/DateGroup/index.d.ts +2 -0
- package/dist/components/molecules/EmptyState/EmptyState.d.ts +32 -0
- package/dist/components/molecules/EmptyState/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/TextField/InputBase.d.ts +0 -1
- package/dist/components/molecules/TransactionListItem/TransactionListItem.d.ts +39 -0
- package/dist/components/molecules/TransactionListItem/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +7 -0
- package/dist/index.d.ts +93 -0
- package/dist/index.esm.js +2214 -335
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2221 -332
- package/dist/index.js.map +1 -1
- package/dist/styles/tokens.json +93 -0
- package/dist/tokens/index.esm.js +93 -0
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +93 -0
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/tokens.d.ts +93 -0
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var styled = require('styled-components');
|
|
5
5
|
var dateFns = require('date-fns');
|
|
6
|
+
var reactDom = require('react-dom');
|
|
6
7
|
|
|
7
8
|
function _extends() {
|
|
8
9
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
@@ -101,7 +102,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
101
102
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
102
103
|
};
|
|
103
104
|
|
|
104
|
-
var base$
|
|
105
|
+
var base$d = {
|
|
105
106
|
border: {
|
|
106
107
|
radius: {
|
|
107
108
|
"1": "0.125rem",
|
|
@@ -269,6 +270,51 @@ var base$8 = {
|
|
|
269
270
|
"1100": "#004491",
|
|
270
271
|
"1200": "#003571",
|
|
271
272
|
"1300": "#002754"
|
|
273
|
+
},
|
|
274
|
+
purple: {
|
|
275
|
+
"100": "#F9F0FF",
|
|
276
|
+
"200": "#F4E1FF",
|
|
277
|
+
"300": "#EDD0FF",
|
|
278
|
+
"400": "#E3B8FF",
|
|
279
|
+
"500": "#D59DFF",
|
|
280
|
+
"600": "#C27EF7",
|
|
281
|
+
"700": "#AD5FE8",
|
|
282
|
+
"800": "#9644D4",
|
|
283
|
+
"900": "#7E2EBD",
|
|
284
|
+
"1000": "#67229F",
|
|
285
|
+
"1100": "#511882",
|
|
286
|
+
"1200": "#3D1066",
|
|
287
|
+
"1300": "#2B0A4D"
|
|
288
|
+
},
|
|
289
|
+
pink: {
|
|
290
|
+
"100": "#FFEFF9",
|
|
291
|
+
"200": "#FFDFF4",
|
|
292
|
+
"300": "#FFCBED",
|
|
293
|
+
"400": "#FFB0E3",
|
|
294
|
+
"500": "#FF8ED4",
|
|
295
|
+
"600": "#FF69C1",
|
|
296
|
+
"700": "#FF42AB",
|
|
297
|
+
"800": "#F31A93",
|
|
298
|
+
"900": "#DC007B",
|
|
299
|
+
"1000": "#B90064",
|
|
300
|
+
"1100": "#97004E",
|
|
301
|
+
"1200": "#78003A",
|
|
302
|
+
"1300": "#5C0029"
|
|
303
|
+
},
|
|
304
|
+
yellow: {
|
|
305
|
+
"100": "#FFF3D6",
|
|
306
|
+
"200": "#FFE9B3",
|
|
307
|
+
"300": "#FFDE8F",
|
|
308
|
+
"400": "#FFD162",
|
|
309
|
+
"500": "#FFC233",
|
|
310
|
+
"600": "#EDAD0A",
|
|
311
|
+
"700": "#D39700",
|
|
312
|
+
"800": "#B88100",
|
|
313
|
+
"900": "#9D6C00",
|
|
314
|
+
"1000": "#825800",
|
|
315
|
+
"1100": "#694600",
|
|
316
|
+
"1200": "#523600",
|
|
317
|
+
"1300": "#3D2800"
|
|
272
318
|
}
|
|
273
319
|
},
|
|
274
320
|
spacing: {
|
|
@@ -636,7 +682,7 @@ var component = {
|
|
|
636
682
|
},
|
|
637
683
|
$ref: "./component/index.json"
|
|
638
684
|
};
|
|
639
|
-
var semantic$
|
|
685
|
+
var semantic$g = {
|
|
640
686
|
border: {
|
|
641
687
|
"default": "0.0625rem solid #e9ecef",
|
|
642
688
|
subtle: "0.0625rem solid #dee2e6",
|
|
@@ -739,6 +785,54 @@ var semantic$a = {
|
|
|
739
785
|
error: "#D31510",
|
|
740
786
|
success: "#007A4D",
|
|
741
787
|
warning: "#B14C00"
|
|
788
|
+
},
|
|
789
|
+
financial: {
|
|
790
|
+
credit: "#15A46E",
|
|
791
|
+
"credit-hover": "#008F5D",
|
|
792
|
+
debit: "#D31510",
|
|
793
|
+
"debit-hover": "#B40000",
|
|
794
|
+
pending: "#F68511",
|
|
795
|
+
neutral: "#6c757d"
|
|
796
|
+
},
|
|
797
|
+
category: {
|
|
798
|
+
blue: "#3892F3",
|
|
799
|
+
"blue-emphasis": "#0265DC",
|
|
800
|
+
"blue-subtle": "#E0F2FF",
|
|
801
|
+
purple: "#AD5FE8",
|
|
802
|
+
"purple-emphasis": "#7E2EBD",
|
|
803
|
+
"purple-subtle": "#F9F0FF",
|
|
804
|
+
pink: "#FF42AB",
|
|
805
|
+
"pink-emphasis": "#DC007B",
|
|
806
|
+
"pink-subtle": "#FFEFF9",
|
|
807
|
+
yellow: "#D39700",
|
|
808
|
+
"yellow-emphasis": "#9D6C00",
|
|
809
|
+
"yellow-subtle": "#FFF3D6",
|
|
810
|
+
green: "#15A46E",
|
|
811
|
+
"green-emphasis": "#007A4D",
|
|
812
|
+
"green-subtle": "#CEF8E0",
|
|
813
|
+
red: "#F75C46",
|
|
814
|
+
"red-emphasis": "#D31510",
|
|
815
|
+
"red-subtle": "#FFEBE7",
|
|
816
|
+
orange: "#E46F00",
|
|
817
|
+
"orange-emphasis": "#B14C00",
|
|
818
|
+
"orange-subtle": "#FFECCC",
|
|
819
|
+
gray: "#495057",
|
|
820
|
+
"gray-emphasis": "#212529",
|
|
821
|
+
"gray-subtle": "#e9ecef"
|
|
822
|
+
},
|
|
823
|
+
status: {
|
|
824
|
+
pending: "#D39700",
|
|
825
|
+
"pending-bg": "#FFF3D6",
|
|
826
|
+
completed: "#007A4D",
|
|
827
|
+
"completed-bg": "#CEF8E0",
|
|
828
|
+
failed: "#D31510",
|
|
829
|
+
"failed-bg": "#FFEBE7",
|
|
830
|
+
cancelled: "#495057",
|
|
831
|
+
"cancelled-bg": "#e9ecef",
|
|
832
|
+
processing: "#0265DC",
|
|
833
|
+
"processing-bg": "#E0F2FF",
|
|
834
|
+
scheduled: "#7E2EBD",
|
|
835
|
+
"scheduled-bg": "#F9F0FF"
|
|
742
836
|
}
|
|
743
837
|
},
|
|
744
838
|
typography: {
|
|
@@ -773,9 +867,9 @@ var semantic$a = {
|
|
|
773
867
|
$ref: "./semantic/index.json"
|
|
774
868
|
};
|
|
775
869
|
var tokensData = {
|
|
776
|
-
base: base$
|
|
870
|
+
base: base$d,
|
|
777
871
|
component: component,
|
|
778
|
-
semantic: semantic$
|
|
872
|
+
semantic: semantic$g
|
|
779
873
|
};
|
|
780
874
|
|
|
781
875
|
React.createElement;
|
|
@@ -785,7 +879,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
785
879
|
},
|
|
786
880
|
displayName: "Avatar__AvatarContainer",
|
|
787
881
|
componentId: "sc-ezn4ax-0"
|
|
788
|
-
})(templateObject_1$
|
|
882
|
+
})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n background-color: ", ";\n overflow: hidden;\n flex-shrink: 0;\n"], ["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n background-color: ", ";\n overflow: hidden;\n flex-shrink: 0;\n"])), function (_a) {
|
|
789
883
|
var $size = _a.$size;
|
|
790
884
|
return tokensData.semantic.size.avatar[$size];
|
|
791
885
|
}, function (_a) {
|
|
@@ -798,14 +892,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
798
892
|
},
|
|
799
893
|
displayName: "Avatar__AvatarImage",
|
|
800
894
|
componentId: "sc-ezn4ax-1"
|
|
801
|
-
})(templateObject_2$
|
|
895
|
+
})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"])), tokensData.base.border.radius.circle);
|
|
802
896
|
var AvatarInitials = styled.span.withConfig({
|
|
803
897
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
804
898
|
return !prop.startsWith('$');
|
|
805
899
|
},
|
|
806
900
|
displayName: "Avatar__AvatarInitials",
|
|
807
901
|
componentId: "sc-ezn4ax-2"
|
|
808
|
-
})(templateObject_3$
|
|
902
|
+
})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n color: ", ";\n line-height: 1;\n text-transform: uppercase;\n user-select: none;\n"], ["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n color: ", ";\n line-height: 1;\n text-transform: uppercase;\n user-select: none;\n"
|
|
809
903
|
// Helper function to get initials from name
|
|
810
904
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
811
905
|
var $size = _a.$size;
|
|
@@ -868,7 +962,7 @@ var Avatar = function Avatar(_a) {
|
|
|
868
962
|
"aria-hidden": "true"
|
|
869
963
|
}, initials));
|
|
870
964
|
};
|
|
871
|
-
var templateObject_1$
|
|
965
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$p;
|
|
872
966
|
|
|
873
967
|
React.createElement;
|
|
874
968
|
var _a$5 = tokensData.semantic,
|
|
@@ -936,7 +1030,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
936
1030
|
},
|
|
937
1031
|
displayName: "Typography__StyledTypography",
|
|
938
1032
|
componentId: "sc-17mqo4k-0"
|
|
939
|
-
})(templateObject_1$
|
|
1033
|
+
})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n color: ", ";\n margin: 0;\n \n /* Ensure proper line height for readability */\n ", "\n"], ["\n ", "\n color: ", ";\n margin: 0;\n \n /* Ensure proper line height for readability */\n ", "\n"
|
|
940
1034
|
/**
|
|
941
1035
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
942
1036
|
*
|
|
@@ -1003,23 +1097,23 @@ var Typography = function Typography(_a) {
|
|
|
1003
1097
|
"data-testid": dataTestId
|
|
1004
1098
|
}, children);
|
|
1005
1099
|
};
|
|
1006
|
-
var templateObject_1$
|
|
1100
|
+
var templateObject_1$H;
|
|
1007
1101
|
|
|
1008
1102
|
React.createElement;
|
|
1009
1103
|
var color$3 = tokensData.semantic.color;
|
|
1010
1104
|
tokensData.base.shadow;
|
|
1011
|
-
var scaleIn = styled.keyframes(templateObject_1$
|
|
1105
|
+
var scaleIn$1 = styled.keyframes(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n from {\n transform: scale(0.8);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n"], ["\n from {\n transform: scale(0.8);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n"])));
|
|
1012
1106
|
var BadgeWrapper = styled.span.withConfig({
|
|
1013
1107
|
displayName: "Badge__BadgeWrapper",
|
|
1014
1108
|
componentId: "sc-tjz4pp-0"
|
|
1015
|
-
})(templateObject_2$
|
|
1109
|
+
})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n flex-shrink: 0;\n"], ["\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n flex-shrink: 0;\n"])));
|
|
1016
1110
|
var BadgeIndicator = styled.span.withConfig({
|
|
1017
1111
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1018
1112
|
return !prop.startsWith('$');
|
|
1019
1113
|
},
|
|
1020
1114
|
displayName: "Badge__BadgeIndicator",
|
|
1021
1115
|
componentId: "sc-tjz4pp-1"
|
|
1022
|
-
})(templateObject_3$
|
|
1116
|
+
})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: ", ";\n align-items: center;\n justify-content: center;\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n line-height: 1;\n white-space: nowrap;\n box-shadow: 0 0 0 2px ", ";\n animation: ", " 0.2s ease-out;\n \n ", "\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: ", ";\n align-items: center;\n justify-content: center;\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n line-height: 1;\n white-space: nowrap;\n box-shadow: 0 0 0 2px ", ";\n animation: ", " 0.2s ease-out;\n \n ", "\n"])), function (props) {
|
|
1023
1117
|
return props.$isVisible ? 'flex' : 'none';
|
|
1024
1118
|
}, function (props) {
|
|
1025
1119
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1027,7 +1121,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1027
1121
|
return props.$isDot ? '8px' : '16px';
|
|
1028
1122
|
}, function (props) {
|
|
1029
1123
|
return props.$isDot ? '0' : '0 4px';
|
|
1030
|
-
}, tokensData.base.border.radius.circle, color$3.background["default"], scaleIn, function (props) {
|
|
1124
|
+
}, tokensData.base.border.radius.circle, color$3.background["default"], scaleIn$1, function (props) {
|
|
1031
1125
|
switch (props.$variant) {
|
|
1032
1126
|
case 'primary':
|
|
1033
1127
|
return "\n background-color: ".concat(color$3.background.interactive, ";\n color: ").concat(color$3.text.inverse, ";\n ");
|
|
@@ -1041,10 +1135,10 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1041
1135
|
return "\n background-color: ".concat(color$3.background.emphasis, ";\n color: ").concat(color$3.text.inverse, ";\n ");
|
|
1042
1136
|
}
|
|
1043
1137
|
});
|
|
1044
|
-
var ScreenReaderOnly = styled.span.withConfig({
|
|
1138
|
+
var ScreenReaderOnly$1 = styled.span.withConfig({
|
|
1045
1139
|
displayName: "Badge__ScreenReaderOnly",
|
|
1046
1140
|
componentId: "sc-tjz4pp-2"
|
|
1047
|
-
})(templateObject_4$
|
|
1141
|
+
})(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n"], ["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n"])));
|
|
1048
1142
|
var Badge = function Badge(_a) {
|
|
1049
1143
|
var children = _a.children,
|
|
1050
1144
|
_b = _a.count,
|
|
@@ -1073,9 +1167,9 @@ var Badge = function Badge(_a) {
|
|
|
1073
1167
|
}, !dot && /*#__PURE__*/React.createElement(Typography, {
|
|
1074
1168
|
variant: "caption",
|
|
1075
1169
|
color: "inverse"
|
|
1076
|
-
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
|
|
1170
|
+
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly$1, null, label)));
|
|
1077
1171
|
};
|
|
1078
|
-
var templateObject_1$
|
|
1172
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$o, templateObject_4$j;
|
|
1079
1173
|
|
|
1080
1174
|
React.createElement;
|
|
1081
1175
|
var StyledBox = styled.div.withConfig({
|
|
@@ -1087,25 +1181,25 @@ var StyledBox = styled.div.withConfig({
|
|
|
1087
1181
|
})(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"], ["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"
|
|
1088
1182
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1089
1183
|
])), function (props) {
|
|
1090
|
-
return props.$display && styled.css(templateObject_1$
|
|
1184
|
+
return props.$display && styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1091
1185
|
}, function (props) {
|
|
1092
|
-
return props.$flexDirection && styled.css(templateObject_2$
|
|
1186
|
+
return props.$flexDirection && styled.css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1093
1187
|
}, function (props) {
|
|
1094
|
-
return props.$justifyContent && styled.css(templateObject_3$
|
|
1188
|
+
return props.$justifyContent && styled.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1095
1189
|
}, function (props) {
|
|
1096
|
-
return props.$alignItems && styled.css(templateObject_4$
|
|
1190
|
+
return props.$alignItems && styled.css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1097
1191
|
}, function (props) {
|
|
1098
|
-
return props.$flexWrap && styled.css(templateObject_5$
|
|
1192
|
+
return props.$flexWrap && styled.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1099
1193
|
}, function (props) {
|
|
1100
|
-
return props.$gap && styled.css(templateObject_6$
|
|
1194
|
+
return props.$gap && styled.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1101
1195
|
}, function (props) {
|
|
1102
|
-
return props.$m && styled.css(templateObject_7$
|
|
1196
|
+
return props.$m && styled.css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1103
1197
|
}, function (props) {
|
|
1104
|
-
return props.$mt && styled.css(templateObject_8$
|
|
1198
|
+
return props.$mt && styled.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1105
1199
|
}, function (props) {
|
|
1106
|
-
return props.$mr && styled.css(templateObject_9$
|
|
1200
|
+
return props.$mr && styled.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
|
|
1107
1201
|
}, function (props) {
|
|
1108
|
-
return props.$mb && styled.css(templateObject_10$
|
|
1202
|
+
return props.$mb && styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
|
|
1109
1203
|
}, function (props) {
|
|
1110
1204
|
return props.$ml && styled.css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
|
|
1111
1205
|
}, function (props) {
|
|
@@ -1277,7 +1371,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1277
1371
|
}, rest), children);
|
|
1278
1372
|
};
|
|
1279
1373
|
var Box = BoxTransform;
|
|
1280
|
-
var templateObject_1$
|
|
1374
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$e, templateObject_6$d, templateObject_7$b, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
|
|
1281
1375
|
|
|
1282
1376
|
var add = {
|
|
1283
1377
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1503,7 +1597,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1503
1597
|
},
|
|
1504
1598
|
displayName: "Icon__IconStyled",
|
|
1505
1599
|
componentId: "sc-1105czq-0"
|
|
1506
|
-
})(templateObject_1$
|
|
1600
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n \n svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n \n /* Use semantic icon colors */\n color: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n \n svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n \n /* Use semantic icon colors */\n color: ", ";\n"])), function (_a) {
|
|
1507
1601
|
var $size = _a.$size;
|
|
1508
1602
|
return tokensData.semantic.size.icon[$size];
|
|
1509
1603
|
}, function (_a) {
|
|
@@ -1567,20 +1661,20 @@ var Icon = function Icon(_a) {
|
|
|
1567
1661
|
d: iconData.path
|
|
1568
1662
|
})));
|
|
1569
1663
|
};
|
|
1570
|
-
var templateObject_1$
|
|
1664
|
+
var templateObject_1$E;
|
|
1571
1665
|
|
|
1572
1666
|
React.createElement;
|
|
1573
1667
|
var button = tokensData.component.button,
|
|
1574
|
-
semantic$
|
|
1668
|
+
semantic$f = tokensData.semantic;
|
|
1575
1669
|
// Base styles shared between button and link
|
|
1576
|
-
var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(tokensData.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic$
|
|
1670
|
+
var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(tokensData.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic$f.motion.hover, ";\n white-space: nowrap;\n user-select: none;\n \n &:focus {\n outline: ").concat(button.focus.outline, ";\n outline-offset: ").concat(button.focus.outlineOffset, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n");
|
|
1577
1671
|
// Dynamic variant styles using component tokens
|
|
1578
1672
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1579
1673
|
var $variant = _a.$variant;
|
|
1580
1674
|
return "\n background-color: ".concat($variant === 'primary' ? button.primary.backgroundColor : $variant === 'secondary' ? button.variants.secondary.backgroundColor : button.variants.naked.backgroundColor, ";\n color: ").concat($variant === 'primary' ? button.primary.textColor : $variant === 'secondary' ? button.variants.secondary.textColor : button.variants.naked.textColor, ";\n \n &:hover:not(:disabled) {\n background-color: ").concat($variant === 'primary' ? button.hover.backgroundColor : $variant === 'secondary' ? button.variants.secondary.hover.backgroundColor : button.variants.naked.hover.backgroundColor, ";\n }\n\n &:active:not(:disabled) {\n background-color: ").concat($variant === 'primary' ? button.active.backgroundColor : $variant === 'secondary' ? button.variants.secondary.active.backgroundColor : button.variants.naked.active.backgroundColor, ";\n }\n\n &:disabled {\n background-color: ").concat($variant === 'primary' ? button.disabled.backgroundColor : $variant === 'secondary' ? button.variants.secondary.disabled.backgroundColor : button.variants.naked.disabled.backgroundColor, ";\n color: ").concat($variant === 'primary' ? button.disabled.textColor : $variant === 'secondary' ? button.variants.secondary.disabled.textColor : button.variants.naked.disabled.textColor, ";\n }\n");
|
|
1581
1675
|
};
|
|
1582
1676
|
// Dynamic size styles using component tokens
|
|
1583
|
-
var getSizeStyles = function getSizeStyles(_a) {
|
|
1677
|
+
var getSizeStyles$2 = function getSizeStyles(_a) {
|
|
1584
1678
|
var $size = _a.$size;
|
|
1585
1679
|
switch ($size) {
|
|
1586
1680
|
case 'small':
|
|
@@ -1599,16 +1693,16 @@ var StyledButton = styled.button.withConfig({
|
|
|
1599
1693
|
},
|
|
1600
1694
|
displayName: "Button__StyledButton",
|
|
1601
1695
|
componentId: "sc-1eiuum9-0"
|
|
1602
|
-
})(templateObject_1$
|
|
1696
|
+
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles$2);
|
|
1603
1697
|
var StyledLink = styled.a.withConfig({
|
|
1604
1698
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1605
1699
|
return !prop.startsWith('$');
|
|
1606
1700
|
},
|
|
1607
1701
|
displayName: "Button__StyledLink",
|
|
1608
1702
|
componentId: "sc-1eiuum9-1"
|
|
1609
|
-
})(templateObject_2$
|
|
1703
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1610
1704
|
// Helper function to get icon size based on button size
|
|
1611
|
-
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1705
|
+
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles$2);
|
|
1612
1706
|
// Helper function to get icon size based on button size
|
|
1613
1707
|
var getIconSize = function getIconSize(buttonSize) {
|
|
1614
1708
|
switch (buttonSize) {
|
|
@@ -1698,7 +1792,168 @@ var Button = function Button(_a) {
|
|
|
1698
1792
|
"data-testid": dataTestId
|
|
1699
1793
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1700
1794
|
};
|
|
1701
|
-
var templateObject_1$
|
|
1795
|
+
var templateObject_1$D, templateObject_2$q;
|
|
1796
|
+
|
|
1797
|
+
React.createElement;
|
|
1798
|
+
var semantic$e = tokensData.semantic,
|
|
1799
|
+
base$c = tokensData.base;
|
|
1800
|
+
var getColorStyles = function getColorStyles(color, variant) {
|
|
1801
|
+
var colorKey = color;
|
|
1802
|
+
if (variant === 'filled') {
|
|
1803
|
+
return {
|
|
1804
|
+
backgroundColor: semantic$e.color.category["".concat(colorKey, "-emphasis")],
|
|
1805
|
+
color: semantic$e.color.text.inverse,
|
|
1806
|
+
borderColor: 'transparent'
|
|
1807
|
+
};
|
|
1808
|
+
}
|
|
1809
|
+
if (variant === 'outlined') {
|
|
1810
|
+
return {
|
|
1811
|
+
backgroundColor: 'transparent',
|
|
1812
|
+
color: semantic$e.color.category[colorKey],
|
|
1813
|
+
borderColor: semantic$e.color.category[colorKey]
|
|
1814
|
+
};
|
|
1815
|
+
}
|
|
1816
|
+
// minimal
|
|
1817
|
+
return {
|
|
1818
|
+
backgroundColor: semantic$e.color.category["".concat(colorKey, "-subtle")],
|
|
1819
|
+
color: semantic$e.color.category[colorKey],
|
|
1820
|
+
borderColor: 'transparent'
|
|
1821
|
+
};
|
|
1822
|
+
};
|
|
1823
|
+
var getSizeStyles$1 = function getSizeStyles(size) {
|
|
1824
|
+
if (size === 'small') {
|
|
1825
|
+
return {
|
|
1826
|
+
height: '24px',
|
|
1827
|
+
padding: "".concat(base$c.spacing[1], " ").concat(base$c.spacing[2]),
|
|
1828
|
+
font: semantic$e.typography.caption,
|
|
1829
|
+
gap: base$c.spacing[1],
|
|
1830
|
+
iconSize: 'xs'
|
|
1831
|
+
};
|
|
1832
|
+
}
|
|
1833
|
+
// medium
|
|
1834
|
+
return {
|
|
1835
|
+
height: '32px',
|
|
1836
|
+
padding: "".concat(base$c.spacing[2], " ").concat(base$c.spacing[3]),
|
|
1837
|
+
font: semantic$e.typography.small,
|
|
1838
|
+
gap: base$c.spacing[1],
|
|
1839
|
+
iconSize: 'sm'
|
|
1840
|
+
};
|
|
1841
|
+
};
|
|
1842
|
+
var StyledCategoryBadge = styled.span.withConfig({
|
|
1843
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1844
|
+
return !prop.startsWith('$');
|
|
1845
|
+
},
|
|
1846
|
+
displayName: "CategoryBadge__StyledCategoryBadge",
|
|
1847
|
+
componentId: "sc-17aslpn-0"
|
|
1848
|
+
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: ", ";\n white-space: nowrap;\n user-select: none;\n transition: ", ";\n border-width: ", ";\n border-style: solid;\n \n /* Apply CSS custom properties */\n background-color: var(--category-badge-bg);\n color: var(--category-badge-color);\n border-color: var(--category-badge-border);\n height: var(--category-badge-height);\n padding: var(--category-badge-padding);\n font: var(--category-badge-font);\n gap: var(--category-badge-gap);\n opacity: var(--category-badge-opacity);\n cursor: var(--category-badge-cursor);\n \n /* Hover state for clickable badges */\n ", "\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: ", ";\n white-space: nowrap;\n user-select: none;\n transition: ", ";\n border-width: ", ";\n border-style: solid;\n \n /* Apply CSS custom properties */\n background-color: var(--category-badge-bg);\n color: var(--category-badge-color);\n border-color: var(--category-badge-border);\n height: var(--category-badge-height);\n padding: var(--category-badge-padding);\n font: var(--category-badge-font);\n gap: var(--category-badge-gap);\n opacity: var(--category-badge-opacity);\n cursor: var(--category-badge-cursor);\n \n /* Hover state for clickable badges */\n ", "\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"
|
|
1849
|
+
/**
|
|
1850
|
+
* CategoryBadge component for displaying transaction categories
|
|
1851
|
+
*
|
|
1852
|
+
* Supports 8 color options, 3 visual variants, optional icons, and interactive behavior.
|
|
1853
|
+
* Perfect for categorizing financial transactions or content.
|
|
1854
|
+
*
|
|
1855
|
+
* @example
|
|
1856
|
+
* ```tsx
|
|
1857
|
+
* <CategoryBadge color="orange" icon="restaurant">
|
|
1858
|
+
* Food & Dining
|
|
1859
|
+
* </CategoryBadge>
|
|
1860
|
+
*
|
|
1861
|
+
* <CategoryBadge
|
|
1862
|
+
* color="blue"
|
|
1863
|
+
* variant="outlined"
|
|
1864
|
+
* size="small"
|
|
1865
|
+
* onClick={() => filterByCategory('travel')}
|
|
1866
|
+
* >
|
|
1867
|
+
* Travel
|
|
1868
|
+
* </CategoryBadge>
|
|
1869
|
+
* ```
|
|
1870
|
+
*/])), base$c.border.radius.circle, base$c.fontWeight[3], semantic$e.motion.hover, base$c.border.width[1], function (props) {
|
|
1871
|
+
return props.$clickable && !props.$disabled && "\n &:hover {\n opacity: 0.85;\n transform: translateY(-1px);\n }\n \n &:active {\n transform: translateY(0);\n opacity: 0.95;\n }\n ";
|
|
1872
|
+
}, base$c.border.width[2], semantic$e.color.border.strong, base$c.spacing[1]);
|
|
1873
|
+
/**
|
|
1874
|
+
* CategoryBadge component for displaying transaction categories
|
|
1875
|
+
*
|
|
1876
|
+
* Supports 8 color options, 3 visual variants, optional icons, and interactive behavior.
|
|
1877
|
+
* Perfect for categorizing financial transactions or content.
|
|
1878
|
+
*
|
|
1879
|
+
* @example
|
|
1880
|
+
* ```tsx
|
|
1881
|
+
* <CategoryBadge color="orange" icon="restaurant">
|
|
1882
|
+
* Food & Dining
|
|
1883
|
+
* </CategoryBadge>
|
|
1884
|
+
*
|
|
1885
|
+
* <CategoryBadge
|
|
1886
|
+
* color="blue"
|
|
1887
|
+
* variant="outlined"
|
|
1888
|
+
* size="small"
|
|
1889
|
+
* onClick={() => filterByCategory('travel')}
|
|
1890
|
+
* >
|
|
1891
|
+
* Travel
|
|
1892
|
+
* </CategoryBadge>
|
|
1893
|
+
* ```
|
|
1894
|
+
*/
|
|
1895
|
+
var CategoryBadge = function CategoryBadge(_a) {
|
|
1896
|
+
var children = _a.children,
|
|
1897
|
+
_b = _a.color,
|
|
1898
|
+
color = _b === void 0 ? 'blue' : _b,
|
|
1899
|
+
_c = _a.variant,
|
|
1900
|
+
variant = _c === void 0 ? 'filled' : _c,
|
|
1901
|
+
_d = _a.size,
|
|
1902
|
+
size = _d === void 0 ? 'medium' : _d,
|
|
1903
|
+
icon = _a.icon,
|
|
1904
|
+
onClick = _a.onClick,
|
|
1905
|
+
_e = _a.disabled,
|
|
1906
|
+
disabled = _e === void 0 ? false : _e,
|
|
1907
|
+
dataTestId = _a["data-testid"],
|
|
1908
|
+
ariaLabel = _a["aria-label"];
|
|
1909
|
+
var hasClickHandler = Boolean(onClick);
|
|
1910
|
+
var isClickable = hasClickHandler && !disabled;
|
|
1911
|
+
var colorStyles = getColorStyles(color, variant);
|
|
1912
|
+
var sizeStyles = getSizeStyles$1(size);
|
|
1913
|
+
var cssProps = {
|
|
1914
|
+
'--category-badge-bg': colorStyles.backgroundColor,
|
|
1915
|
+
'--category-badge-color': colorStyles.color,
|
|
1916
|
+
'--category-badge-border': colorStyles.borderColor,
|
|
1917
|
+
'--category-badge-height': sizeStyles.height,
|
|
1918
|
+
'--category-badge-padding': sizeStyles.padding,
|
|
1919
|
+
'--category-badge-font': sizeStyles.font,
|
|
1920
|
+
'--category-badge-gap': sizeStyles.gap,
|
|
1921
|
+
'--category-badge-opacity': disabled ? '0.6' : '1',
|
|
1922
|
+
'--category-badge-cursor': disabled ? 'not-allowed' : isClickable ? 'pointer' : 'default'
|
|
1923
|
+
};
|
|
1924
|
+
var handleClick = function handleClick() {
|
|
1925
|
+
if (isClickable) {
|
|
1926
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
1927
|
+
}
|
|
1928
|
+
};
|
|
1929
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
1930
|
+
if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
|
|
1931
|
+
event.preventDefault();
|
|
1932
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
1933
|
+
}
|
|
1934
|
+
};
|
|
1935
|
+
return /*#__PURE__*/React.createElement(StyledCategoryBadge, {
|
|
1936
|
+
$color: color,
|
|
1937
|
+
$variant: variant,
|
|
1938
|
+
$size: size,
|
|
1939
|
+
$clickable: isClickable,
|
|
1940
|
+
$disabled: disabled,
|
|
1941
|
+
onClick: handleClick,
|
|
1942
|
+
onKeyDown: handleKeyDown,
|
|
1943
|
+
tabIndex: hasClickHandler ? 0 : undefined,
|
|
1944
|
+
role: hasClickHandler ? 'button' : undefined,
|
|
1945
|
+
"aria-label": ariaLabel,
|
|
1946
|
+
"aria-disabled": disabled,
|
|
1947
|
+
"data-testid": dataTestId,
|
|
1948
|
+
style: cssProps
|
|
1949
|
+
}, icon && /*#__PURE__*/React.createElement(Icon, {
|
|
1950
|
+
name: icon,
|
|
1951
|
+
size: sizeStyles.iconSize,
|
|
1952
|
+
"aria-hidden": "true"
|
|
1953
|
+
}), children);
|
|
1954
|
+
};
|
|
1955
|
+
CategoryBadge.displayName = 'CategoryBadge';
|
|
1956
|
+
var templateObject_1$C;
|
|
1702
1957
|
|
|
1703
1958
|
var chip = tokensData.component.chip;
|
|
1704
1959
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1759,14 +2014,14 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1759
2014
|
},
|
|
1760
2015
|
displayName: "ChipBase__BaseChipStyled",
|
|
1761
2016
|
componentId: "sc-moa6zc-0"
|
|
1762
|
-
})(templateObject_1$
|
|
2017
|
+
})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: 12px;\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: width ", ";\n \n /* Use CSS custom properties set by wrapper */\n background-color: var(--chip-bg-color);\n color: var(--chip-text-color);\n font: var(--chip-font);\n padding: var(--chip-padding);\n opacity: var(--chip-opacity, 1);\n cursor: var(--chip-cursor, default);\n \n &:hover {\n opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n }\n \n &:active {\n opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: 12px;\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: width ", ";\n \n /* Use CSS custom properties set by wrapper */\n background-color: var(--chip-bg-color);\n color: var(--chip-text-color);\n font: var(--chip-font);\n padding: var(--chip-padding);\n opacity: var(--chip-opacity, 1);\n cursor: var(--chip-cursor, default);\n \n &:hover {\n opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n }\n \n &:active {\n opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"
|
|
1763
2018
|
// Icon container for selected indicator or leading icons
|
|
1764
2019
|
])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1765
2020
|
// Icon container for selected indicator or leading icons
|
|
1766
2021
|
var IconContainer = styled.span.withConfig({
|
|
1767
2022
|
displayName: "ChipBase__IconContainer",
|
|
1768
2023
|
componentId: "sc-moa6zc-1"
|
|
1769
|
-
})(templateObject_2$
|
|
2024
|
+
})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n margin-right: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n margin-right: ", ";\n"
|
|
1770
2025
|
// Close button for dismissible chips
|
|
1771
2026
|
])), tokensData.semantic.spacing.layout.sm);
|
|
1772
2027
|
// Close button for dismissible chips
|
|
@@ -1776,7 +2031,7 @@ var CloseButton = styled.button.withConfig({
|
|
|
1776
2031
|
},
|
|
1777
2032
|
displayName: "ChipBase__CloseButton",
|
|
1778
2033
|
componentId: "sc-moa6zc-2"
|
|
1779
|
-
})(templateObject_3$
|
|
2034
|
+
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 0;\n cursor: ", ";\n opacity: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n opacity: 0.7;\n }\n \n &:active:not(:disabled) {\n opacity: 0.9;\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: 2px;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 0;\n cursor: ", ";\n opacity: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n opacity: 0.7;\n }\n \n &:active:not(:disabled) {\n opacity: 0.9;\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: 2px;\n }\n"
|
|
1780
2035
|
// Wrapper component that applies styles via CSS custom properties
|
|
1781
2036
|
])), tokensData.semantic.spacing.layout.sm, function (props) {
|
|
1782
2037
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
@@ -1811,7 +2066,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1811
2066
|
style: __assign(__assign({}, cssProps), style)
|
|
1812
2067
|
}, htmlProps), children);
|
|
1813
2068
|
};
|
|
1814
|
-
var templateObject_1$
|
|
2069
|
+
var templateObject_1$B, templateObject_2$p, templateObject_3$m;
|
|
1815
2070
|
|
|
1816
2071
|
React.createElement;
|
|
1817
2072
|
/**
|
|
@@ -2052,35 +2307,35 @@ var media$1 = {
|
|
|
2052
2307
|
|
|
2053
2308
|
React.createElement;
|
|
2054
2309
|
var spacing$3 = tokensData.semantic.spacing;
|
|
2055
|
-
var StyledContainer = styled.div.withConfig({
|
|
2310
|
+
var StyledContainer$2 = styled.div.withConfig({
|
|
2056
2311
|
displayName: "Container__StyledContainer",
|
|
2057
2312
|
componentId: "sc-17dbj6n-0"
|
|
2058
|
-
})(templateObject_1$
|
|
2313
|
+
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: ", ";\n padding-right: ", ";\n \n ", " {\n max-width: 640px;\n }\n \n ", " {\n max-width: 768px;\n }\n \n ", " {\n max-width: 1024px;\n }\n \n ", " {\n max-width: 1280px;\n }\n \n ", " {\n max-width: 1536px;\n }\n"], ["\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: ", ";\n padding-right: ", ";\n \n ", " {\n max-width: 640px;\n }\n \n ", " {\n max-width: 768px;\n }\n \n ", " {\n max-width: 1024px;\n }\n \n ", " {\n max-width: 1280px;\n }\n \n ", " {\n max-width: 1536px;\n }\n"])), spacing$3.layout['2xl'], spacing$3.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
|
|
2059
2314
|
var Container = function Container(_a) {
|
|
2060
2315
|
var children = _a.children,
|
|
2061
2316
|
props = __rest(_a, ["children"]);
|
|
2062
|
-
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
2317
|
+
return /*#__PURE__*/React.createElement(StyledContainer$2, props, children);
|
|
2063
2318
|
};
|
|
2064
|
-
var templateObject_1$
|
|
2319
|
+
var templateObject_1$A;
|
|
2065
2320
|
|
|
2066
2321
|
React.createElement;
|
|
2067
|
-
var base$
|
|
2322
|
+
var base$b = tokensData.base;
|
|
2068
2323
|
var PictureWrapper = styled.div.withConfig({
|
|
2069
2324
|
displayName: "Picture__PictureWrapper",
|
|
2070
2325
|
componentId: "sc-11d9tei-0"
|
|
2071
|
-
})(templateObject_1$
|
|
2326
|
+
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n margin: 0 auto;\n \n ", " {\n margin-left: 0;\n margin-right: 0;\n }\n"], ["\n margin: 0 auto;\n \n ", " {\n margin-left: 0;\n margin-right: 0;\n }\n"])), media$1.sm);
|
|
2072
2327
|
var ImageLink = styled.a.withConfig({
|
|
2073
2328
|
displayName: "Picture__ImageLink",
|
|
2074
2329
|
componentId: "sc-11d9tei-1"
|
|
2075
|
-
})(templateObject_2$
|
|
2330
|
+
})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: block;\n cursor: pointer;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"], ["\n display: block;\n cursor: pointer;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"])), base$b.duration.normal, base$b.easing.easeInOut);
|
|
2076
2331
|
var ImageButton = styled.button.withConfig({
|
|
2077
2332
|
displayName: "Picture__ImageButton",
|
|
2078
2333
|
componentId: "sc-11d9tei-2"
|
|
2079
|
-
})(templateObject_3$
|
|
2334
|
+
})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n display: block;\n width: 100%;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"], ["\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n display: block;\n width: 100%;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"])), base$b.duration.normal, base$b.easing.easeInOut);
|
|
2080
2335
|
var StyledImage = styled.img.withConfig({
|
|
2081
2336
|
displayName: "Picture__StyledImage",
|
|
2082
2337
|
componentId: "sc-11d9tei-3"
|
|
2083
|
-
})(templateObject_4$
|
|
2338
|
+
})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n width: 100%;\n height: auto;\n border-radius: ", ";\n display: block;\n"], ["\n width: 100%;\n height: auto;\n border-radius: ", ";\n display: block;\n"])), base$b.border.radius[2]);
|
|
2084
2339
|
var Picture = function Picture(_a) {
|
|
2085
2340
|
var title = _a.title,
|
|
2086
2341
|
src = _a.src,
|
|
@@ -2107,7 +2362,7 @@ var Picture = function Picture(_a) {
|
|
|
2107
2362
|
"aria-label": "Read more about ".concat(title)
|
|
2108
2363
|
}, image) : image);
|
|
2109
2364
|
};
|
|
2110
|
-
var templateObject_1$
|
|
2365
|
+
var templateObject_1$z, templateObject_2$o, templateObject_3$l, templateObject_4$h;
|
|
2111
2366
|
|
|
2112
2367
|
React.createElement;
|
|
2113
2368
|
var _a$4 = tokensData.semantic,
|
|
@@ -2116,19 +2371,55 @@ var _a$4 = tokensData.semantic,
|
|
|
2116
2371
|
var TimeStyled = styled.time.withConfig({
|
|
2117
2372
|
displayName: "DateFormatter__TimeStyled",
|
|
2118
2373
|
componentId: "sc-5464cc-0"
|
|
2119
|
-
})(templateObject_1$
|
|
2374
|
+
})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
2375
|
+
/**
|
|
2376
|
+
* Formats a date with smart relative/absolute logic
|
|
2377
|
+
*/])), typography$1.label, color$2.text.subdued);
|
|
2378
|
+
/**
|
|
2379
|
+
* Formats a date with smart relative/absolute logic
|
|
2380
|
+
*/
|
|
2381
|
+
var formatDateSmart = function formatDateSmart(date, customFormat) {
|
|
2382
|
+
// Relative labels for recent dates
|
|
2383
|
+
if (dateFns.isToday(date)) return 'Today';
|
|
2384
|
+
if (dateFns.isYesterday(date)) return 'Yesterday';
|
|
2385
|
+
// Show day name for dates within this week
|
|
2386
|
+
if (dateFns.isThisWeek(date, {
|
|
2387
|
+
weekStartsOn: 1
|
|
2388
|
+
})) {
|
|
2389
|
+
return dateFns.format(date, 'EEEE'); // "Monday", "Tuesday", etc.
|
|
2390
|
+
}
|
|
2391
|
+
// Fall back to custom format or default full date format
|
|
2392
|
+
return dateFns.format(date, customFormat || 'MMMM dd, yyyy');
|
|
2393
|
+
};
|
|
2120
2394
|
var DateFormatter = function DateFormatter(_a) {
|
|
2121
2395
|
var dateString = _a.dateString,
|
|
2122
|
-
|
|
2123
|
-
|
|
2396
|
+
formatString = _a.formatString,
|
|
2397
|
+
_b = _a.mode,
|
|
2398
|
+
mode = _b === void 0 ? 'absolute' : _b,
|
|
2124
2399
|
dataTestId = _a["data-testid"];
|
|
2125
2400
|
var date = dateFns.parseISO(dateString);
|
|
2401
|
+
var displayText;
|
|
2402
|
+
switch (mode) {
|
|
2403
|
+
case 'relative':
|
|
2404
|
+
// Always use relative labels (Today/Yesterday) or fall back to day name
|
|
2405
|
+
displayText = formatDateSmart(date, formatString);
|
|
2406
|
+
break;
|
|
2407
|
+
case 'smart':
|
|
2408
|
+
// Smart mode: relative for recent, absolute for older
|
|
2409
|
+
displayText = formatDateSmart(date, formatString);
|
|
2410
|
+
break;
|
|
2411
|
+
case 'absolute':
|
|
2412
|
+
default:
|
|
2413
|
+
// Always use the format string (default 'yyyy')
|
|
2414
|
+
displayText = dateFns.format(date, formatString || 'yyyy');
|
|
2415
|
+
break;
|
|
2416
|
+
}
|
|
2126
2417
|
return /*#__PURE__*/React.createElement(TimeStyled, {
|
|
2127
2418
|
dateTime: dateString,
|
|
2128
2419
|
"data-testid": dataTestId
|
|
2129
|
-
},
|
|
2420
|
+
}, displayText);
|
|
2130
2421
|
};
|
|
2131
|
-
var templateObject_1$
|
|
2422
|
+
var templateObject_1$y;
|
|
2132
2423
|
|
|
2133
2424
|
React.createElement;
|
|
2134
2425
|
var motion = tokensData.semantic.motion,
|
|
@@ -2139,7 +2430,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2139
2430
|
},
|
|
2140
2431
|
displayName: "IconButton__IconButtonStyled",
|
|
2141
2432
|
componentId: "sc-k8b14t-0"
|
|
2142
|
-
})(templateObject_1$
|
|
2433
|
+
})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n border-radius: ", ";\n transition: ", ";\n box-sizing: border-box;\n display: ", ";\n justify-content: ", ";\n align-items: ", ";\n height: max-content;\n cursor: pointer;\n position: relative;\n\n /* Size-specific dimensions from component tokens */\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n border: 1px solid;\n }\n\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n"], ["\n background-color: ", ";\n border: none;\n border-radius: ", ";\n transition: ", ";\n box-sizing: border-box;\n display: ", ";\n justify-content: ", ";\n align-items: ", ";\n height: max-content;\n cursor: pointer;\n position: relative;\n\n /* Size-specific dimensions from component tokens */\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n border: 1px solid;\n }\n\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n"])), function (_a) {
|
|
2143
2434
|
var $variant = _a.$variant;
|
|
2144
2435
|
switch ($variant) {
|
|
2145
2436
|
case 'primary':
|
|
@@ -2250,7 +2541,113 @@ var IconButton = function IconButton(_a) {
|
|
|
2250
2541
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2251
2542
|
}));
|
|
2252
2543
|
};
|
|
2253
|
-
var templateObject_1$
|
|
2544
|
+
var templateObject_1$x;
|
|
2545
|
+
|
|
2546
|
+
React.createElement;
|
|
2547
|
+
var StyledWrapper = styled.span.withConfig({
|
|
2548
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2549
|
+
return !prop.startsWith('$');
|
|
2550
|
+
},
|
|
2551
|
+
displayName: "MoneyDisplay__StyledWrapper",
|
|
2552
|
+
componentId: "sc-1mddej3-0"
|
|
2553
|
+
})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: inline-block;\n text-align: ", ";\n font-weight: ", ";\n"], ["\n display: inline-block;\n text-align: ", ";\n font-weight: ", ";\n"
|
|
2554
|
+
// Map size to Typography variant
|
|
2555
|
+
])), function (_a) {
|
|
2556
|
+
var $align = _a.$align;
|
|
2557
|
+
return $align;
|
|
2558
|
+
}, function (_a) {
|
|
2559
|
+
var $weight = _a.$weight;
|
|
2560
|
+
return $weight === 'regular' ? 400 : $weight === 'medium' ? 500 : 700;
|
|
2561
|
+
});
|
|
2562
|
+
// Map size to Typography variant
|
|
2563
|
+
var sizeToTypographyVariant = {
|
|
2564
|
+
small: 'caption',
|
|
2565
|
+
medium: 'body',
|
|
2566
|
+
large: 'h3',
|
|
2567
|
+
xlarge: 'h2'
|
|
2568
|
+
};
|
|
2569
|
+
// Map MoneyDisplay variant to Typography color
|
|
2570
|
+
var variantToTypographyColor = {
|
|
2571
|
+
"default": 'default',
|
|
2572
|
+
positive: 'success',
|
|
2573
|
+
// Green color for credits/income
|
|
2574
|
+
negative: 'error',
|
|
2575
|
+
// Red color for debits/expenses
|
|
2576
|
+
neutral: 'subdued' // Gray color for informational
|
|
2577
|
+
};
|
|
2578
|
+
/**
|
|
2579
|
+
* Generates aria-label with spelled out amount
|
|
2580
|
+
*/
|
|
2581
|
+
var generateAriaLabel = function generateAriaLabel(amount, currency, locale) {
|
|
2582
|
+
var _a, _b;
|
|
2583
|
+
var formatter = new Intl.NumberFormat(locale, {
|
|
2584
|
+
style: 'currency',
|
|
2585
|
+
currency: currency,
|
|
2586
|
+
minimumFractionDigits: 2,
|
|
2587
|
+
maximumFractionDigits: 2
|
|
2588
|
+
});
|
|
2589
|
+
// Get parts to spell out the amount
|
|
2590
|
+
var parts = formatter.formatToParts(Math.abs(amount));
|
|
2591
|
+
var integerPart = ((_a = parts.find(function (p) {
|
|
2592
|
+
return p.type === 'integer';
|
|
2593
|
+
})) === null || _a === void 0 ? void 0 : _a.value) || '0';
|
|
2594
|
+
var fractionPart = ((_b = parts.find(function (p) {
|
|
2595
|
+
return p.type === 'fraction';
|
|
2596
|
+
})) === null || _b === void 0 ? void 0 : _b.value) || '00';
|
|
2597
|
+
var sign = amount < 0 ? 'negative ' : '';
|
|
2598
|
+
return "".concat(sign).concat(integerPart, " dollars and ").concat(fractionPart, " cents");
|
|
2599
|
+
};
|
|
2600
|
+
var MoneyDisplay = function MoneyDisplay(_a) {
|
|
2601
|
+
var amount = _a.amount,
|
|
2602
|
+
_b = _a.currency,
|
|
2603
|
+
currency = _b === void 0 ? 'AUD' : _b,
|
|
2604
|
+
_c = _a.variant,
|
|
2605
|
+
variant = _c === void 0 ? 'default' : _c,
|
|
2606
|
+
_d = _a.showSign,
|
|
2607
|
+
showSign = _d === void 0 ? false : _d,
|
|
2608
|
+
_e = _a.size,
|
|
2609
|
+
size = _e === void 0 ? 'medium' : _e,
|
|
2610
|
+
_f = _a.weight,
|
|
2611
|
+
weight = _f === void 0 ? 'regular' : _f,
|
|
2612
|
+
_g = _a.locale,
|
|
2613
|
+
locale = _g === void 0 ? 'en-AU' : _g,
|
|
2614
|
+
_h = _a.align,
|
|
2615
|
+
align = _h === void 0 ? 'left' : _h,
|
|
2616
|
+
dataTestId = _a["data-testid"];
|
|
2617
|
+
// Format the number with Intl.NumberFormat
|
|
2618
|
+
var formatter = new Intl.NumberFormat(locale, {
|
|
2619
|
+
style: 'currency',
|
|
2620
|
+
currency: currency,
|
|
2621
|
+
minimumFractionDigits: 2,
|
|
2622
|
+
maximumFractionDigits: 2
|
|
2623
|
+
});
|
|
2624
|
+
var formattedAmount = formatter.format(Math.abs(amount));
|
|
2625
|
+
// Add sign if needed
|
|
2626
|
+
var displayText = formattedAmount;
|
|
2627
|
+
if (showSign && amount !== 0) {
|
|
2628
|
+
var signSymbol = amount > 0 ? '+' : '−'; // Using minus sign character, not hyphen
|
|
2629
|
+
displayText = signSymbol + formattedAmount;
|
|
2630
|
+
} else if (amount < 0 && !showSign) {
|
|
2631
|
+
// Still show negative sign even without showSign
|
|
2632
|
+
displayText = '−' + formattedAmount;
|
|
2633
|
+
}
|
|
2634
|
+
// Generate accessibility label
|
|
2635
|
+
var ariaLabel = generateAriaLabel(amount, currency, locale);
|
|
2636
|
+
// Get typography variant and color
|
|
2637
|
+
var typographyVariant = sizeToTypographyVariant[size];
|
|
2638
|
+
var typographyColor = variantToTypographyColor[variant];
|
|
2639
|
+
return /*#__PURE__*/React.createElement(StyledWrapper, {
|
|
2640
|
+
$align: align,
|
|
2641
|
+
$weight: weight,
|
|
2642
|
+
"aria-label": ariaLabel,
|
|
2643
|
+
"data-testid": dataTestId
|
|
2644
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
2645
|
+
variant: typographyVariant,
|
|
2646
|
+
color: typographyColor,
|
|
2647
|
+
as: "span"
|
|
2648
|
+
}, displayText));
|
|
2649
|
+
};
|
|
2650
|
+
var templateObject_1$w;
|
|
2254
2651
|
|
|
2255
2652
|
React.createElement;
|
|
2256
2653
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -2259,10 +2656,10 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
2259
2656
|
},
|
|
2260
2657
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2261
2658
|
componentId: "sc-1nco33q-0"
|
|
2262
|
-
})(templateObject_3$
|
|
2263
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_1$
|
|
2659
|
+
})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"])), tokensData.semantic.color.background.disabled, tokensData.base.border.radius[1], function (props) {
|
|
2660
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? tokensData.component.progressBar.sizes[props.$height].height : tokensData.component.progressBar.sizes.md.height);
|
|
2264
2661
|
}, function (props) {
|
|
2265
|
-
return props.$variant === 'vertical' && styled.css(templateObject_2$
|
|
2662
|
+
return props.$variant === 'vertical' && styled.css(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? tokensData.component.progressBar.sizes[props.$width].height : tokensData.component.progressBar.sizes.md.height);
|
|
2266
2663
|
});
|
|
2267
2664
|
var ProgressBarFill = styled.div.withConfig({
|
|
2268
2665
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2270,7 +2667,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2270
2667
|
},
|
|
2271
2668
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2272
2669
|
componentId: "sc-1nco33q-1"
|
|
2273
|
-
})(templateObject_7$
|
|
2670
|
+
})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), tokensData.semantic.motion.transition.normal, function (props) {
|
|
2274
2671
|
var backgroundColor;
|
|
2275
2672
|
switch (props.$color) {
|
|
2276
2673
|
case 'success':
|
|
@@ -2284,11 +2681,11 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2284
2681
|
backgroundColor = tokensData.semantic.color.background.interactive;
|
|
2285
2682
|
break;
|
|
2286
2683
|
}
|
|
2287
|
-
return styled.css(templateObject_4$
|
|
2684
|
+
return styled.css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2288
2685
|
}, function (props) {
|
|
2289
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_5$
|
|
2686
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2290
2687
|
}, function (props) {
|
|
2291
|
-
return props.$variant === 'vertical' && styled.css(templateObject_6$
|
|
2688
|
+
return props.$variant === 'vertical' && styled.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2292
2689
|
});
|
|
2293
2690
|
var ProgressBar = function ProgressBar(_a) {
|
|
2294
2691
|
var value = _a.value,
|
|
@@ -2314,16 +2711,16 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2314
2711
|
$color: color
|
|
2315
2712
|
}));
|
|
2316
2713
|
};
|
|
2317
|
-
var templateObject_1$
|
|
2714
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$c, templateObject_7$a;
|
|
2318
2715
|
|
|
2319
2716
|
React.createElement;
|
|
2320
|
-
var StyledDivider = styled.div.withConfig({
|
|
2717
|
+
var StyledDivider$1 = styled.div.withConfig({
|
|
2321
2718
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2322
2719
|
return !prop.startsWith('$');
|
|
2323
2720
|
},
|
|
2324
2721
|
displayName: "Divider__StyledDivider",
|
|
2325
2722
|
componentId: "sc-1l0c8ja-0"
|
|
2326
|
-
})(templateObject_1$
|
|
2723
|
+
})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n border: none;\n \n /* Apply orientation */\n ", "\n \n /* Apply variant styles */\n ", "\n \n /* Apply size styles (spacing) */\n ", "\n"], ["\n border: none;\n \n /* Apply orientation */\n ", "\n \n /* Apply variant styles */\n ", "\n \n /* Apply size styles (spacing) */\n ", "\n"
|
|
2327
2724
|
/**
|
|
2328
2725
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2329
2726
|
*
|
|
@@ -2427,7 +2824,7 @@ var Divider = function Divider(_a) {
|
|
|
2427
2824
|
_d = _a.orientation,
|
|
2428
2825
|
orientation = _d === void 0 ? 'horizontal' : _d,
|
|
2429
2826
|
dataTestId = _a["data-testid"];
|
|
2430
|
-
return /*#__PURE__*/React.createElement(StyledDivider, {
|
|
2827
|
+
return /*#__PURE__*/React.createElement(StyledDivider$1, {
|
|
2431
2828
|
$variant: variant,
|
|
2432
2829
|
$size: size,
|
|
2433
2830
|
$orientation: orientation,
|
|
@@ -2436,7 +2833,7 @@ var Divider = function Divider(_a) {
|
|
|
2436
2833
|
"aria-orientation": orientation
|
|
2437
2834
|
});
|
|
2438
2835
|
};
|
|
2439
|
-
var templateObject_1$
|
|
2836
|
+
var templateObject_1$u;
|
|
2440
2837
|
|
|
2441
2838
|
React.createElement;
|
|
2442
2839
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2445,7 +2842,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2445
2842
|
},
|
|
2446
2843
|
displayName: "Stack__StyledStack",
|
|
2447
2844
|
componentId: "sc-1ehkxgy-0"
|
|
2448
|
-
})(templateObject_1$
|
|
2845
|
+
})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: var(--stack-direction);\n align-items: var(--stack-align-items);\n justify-content: var(--stack-justify-content);\n gap: var(--stack-gap);\n flex-wrap: var(--stack-wrap);\n"], ["\n display: flex;\n flex-direction: var(--stack-direction);\n align-items: var(--stack-align-items);\n justify-content: var(--stack-justify-content);\n gap: var(--stack-gap);\n flex-wrap: var(--stack-wrap);\n"
|
|
2449
2846
|
// Helper function to convert gap prop to CSS value
|
|
2450
2847
|
])));
|
|
2451
2848
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2483,17 +2880,180 @@ var Stack = function Stack(_a) {
|
|
|
2483
2880
|
"data-testid": dataTestId
|
|
2484
2881
|
}, children);
|
|
2485
2882
|
};
|
|
2486
|
-
var templateObject_1$
|
|
2883
|
+
var templateObject_1$t;
|
|
2487
2884
|
|
|
2488
2885
|
React.createElement;
|
|
2489
|
-
var semantic$
|
|
2886
|
+
var semantic$d = tokensData.semantic,
|
|
2887
|
+
base$a = tokensData.base;
|
|
2888
|
+
var scaleIn = styled.keyframes(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n"], ["\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n"])));
|
|
2889
|
+
var getStatusConfig = function getStatusConfig(status) {
|
|
2890
|
+
var configs = {
|
|
2891
|
+
pending: {
|
|
2892
|
+
color: semantic$d.color.status.pending,
|
|
2893
|
+
bgColor: semantic$d.color.status['pending-bg'],
|
|
2894
|
+
icon: 'refresh',
|
|
2895
|
+
// Fallback until 'clock' icon is added
|
|
2896
|
+
label: 'Pending'
|
|
2897
|
+
},
|
|
2898
|
+
completed: {
|
|
2899
|
+
color: semantic$d.color.status.completed,
|
|
2900
|
+
bgColor: semantic$d.color.status['completed-bg'],
|
|
2901
|
+
icon: 'check',
|
|
2902
|
+
label: 'Completed'
|
|
2903
|
+
},
|
|
2904
|
+
failed: {
|
|
2905
|
+
color: semantic$d.color.status.failed,
|
|
2906
|
+
bgColor: semantic$d.color.status['failed-bg'],
|
|
2907
|
+
icon: 'close',
|
|
2908
|
+
label: 'Failed'
|
|
2909
|
+
},
|
|
2910
|
+
cancelled: {
|
|
2911
|
+
color: semantic$d.color.status.cancelled,
|
|
2912
|
+
bgColor: semantic$d.color.status['cancelled-bg'],
|
|
2913
|
+
icon: 'cancel',
|
|
2914
|
+
label: 'Cancelled'
|
|
2915
|
+
},
|
|
2916
|
+
processing: {
|
|
2917
|
+
color: semantic$d.color.status.processing,
|
|
2918
|
+
bgColor: semantic$d.color.status['processing-bg'],
|
|
2919
|
+
icon: 'refresh',
|
|
2920
|
+
label: 'Processing'
|
|
2921
|
+
},
|
|
2922
|
+
scheduled: {
|
|
2923
|
+
color: semantic$d.color.status.scheduled,
|
|
2924
|
+
bgColor: semantic$d.color.status['scheduled-bg'],
|
|
2925
|
+
icon: 'bell',
|
|
2926
|
+
// Fallback until 'calendar' icon is added
|
|
2927
|
+
label: 'Scheduled'
|
|
2928
|
+
}
|
|
2929
|
+
};
|
|
2930
|
+
return configs[status];
|
|
2931
|
+
};
|
|
2932
|
+
var getSizeStyles = function getSizeStyles(size) {
|
|
2933
|
+
if (size === 'small') {
|
|
2934
|
+
return {
|
|
2935
|
+
height: '20px',
|
|
2936
|
+
padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[2]),
|
|
2937
|
+
font: semantic$d.typography.caption,
|
|
2938
|
+
gap: base$a.spacing[1],
|
|
2939
|
+
iconSize: 'xs'
|
|
2940
|
+
};
|
|
2941
|
+
}
|
|
2942
|
+
// medium
|
|
2943
|
+
return {
|
|
2944
|
+
height: '24px',
|
|
2945
|
+
padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[3]),
|
|
2946
|
+
font: semantic$d.typography.small,
|
|
2947
|
+
gap: base$a.spacing[1],
|
|
2948
|
+
iconSize: 'sm'
|
|
2949
|
+
};
|
|
2950
|
+
};
|
|
2951
|
+
var StyledStatusBadge = styled.span.withConfig({
|
|
2952
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2953
|
+
return !prop.startsWith('$');
|
|
2954
|
+
},
|
|
2955
|
+
displayName: "StatusBadge__StyledStatusBadge",
|
|
2956
|
+
componentId: "sc-1paksgb-0"
|
|
2957
|
+
})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: ", ";\n white-space: nowrap;\n user-select: none;\n animation: ", " 0.2s ease-out;\n \n /* Apply CSS custom properties */\n background-color: var(--status-badge-bg);\n color: var(--status-badge-color);\n height: var(--status-badge-height);\n padding: var(--status-badge-padding);\n font: var(--status-badge-font);\n gap: var(--status-badge-gap);\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: ", ";\n white-space: nowrap;\n user-select: none;\n animation: ", " 0.2s ease-out;\n \n /* Apply CSS custom properties */\n background-color: var(--status-badge-bg);\n color: var(--status-badge-color);\n height: var(--status-badge-height);\n padding: var(--status-badge-padding);\n font: var(--status-badge-font);\n gap: var(--status-badge-gap);\n"])), base$a.border.radius.circle, base$a.fontWeight[3], scaleIn);
|
|
2958
|
+
var ScreenReaderOnly = styled.span.withConfig({
|
|
2959
|
+
displayName: "StatusBadge__ScreenReaderOnly",
|
|
2960
|
+
componentId: "sc-1paksgb-1"
|
|
2961
|
+
})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n"], ["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n"
|
|
2962
|
+
/**
|
|
2963
|
+
* StatusBadge component for displaying transaction or task status
|
|
2964
|
+
*
|
|
2965
|
+
* Displays status with appropriate color, icon, and supports live updates for screen readers.
|
|
2966
|
+
* Maps to 6 common status types with semantic color tokens.
|
|
2967
|
+
*
|
|
2968
|
+
* @example
|
|
2969
|
+
* ```tsx
|
|
2970
|
+
* <StatusBadge status="completed" />
|
|
2971
|
+
*
|
|
2972
|
+
* <StatusBadge
|
|
2973
|
+
* status="pending"
|
|
2974
|
+
* label="Awaiting approval"
|
|
2975
|
+
* size="small"
|
|
2976
|
+
* />
|
|
2977
|
+
*
|
|
2978
|
+
* <StatusBadge
|
|
2979
|
+
* status="failed"
|
|
2980
|
+
* showIcon={false}
|
|
2981
|
+
* liveRegion={true}
|
|
2982
|
+
* />
|
|
2983
|
+
* ```
|
|
2984
|
+
*/])));
|
|
2985
|
+
/**
|
|
2986
|
+
* StatusBadge component for displaying transaction or task status
|
|
2987
|
+
*
|
|
2988
|
+
* Displays status with appropriate color, icon, and supports live updates for screen readers.
|
|
2989
|
+
* Maps to 6 common status types with semantic color tokens.
|
|
2990
|
+
*
|
|
2991
|
+
* @example
|
|
2992
|
+
* ```tsx
|
|
2993
|
+
* <StatusBadge status="completed" />
|
|
2994
|
+
*
|
|
2995
|
+
* <StatusBadge
|
|
2996
|
+
* status="pending"
|
|
2997
|
+
* label="Awaiting approval"
|
|
2998
|
+
* size="small"
|
|
2999
|
+
* />
|
|
3000
|
+
*
|
|
3001
|
+
* <StatusBadge
|
|
3002
|
+
* status="failed"
|
|
3003
|
+
* showIcon={false}
|
|
3004
|
+
* liveRegion={true}
|
|
3005
|
+
* />
|
|
3006
|
+
* ```
|
|
3007
|
+
*/
|
|
3008
|
+
var StatusBadge = function StatusBadge(_a) {
|
|
3009
|
+
var status = _a.status,
|
|
3010
|
+
label = _a.label,
|
|
3011
|
+
_b = _a.size,
|
|
3012
|
+
size = _b === void 0 ? 'medium' : _b,
|
|
3013
|
+
_c = _a.showIcon,
|
|
3014
|
+
showIcon = _c === void 0 ? true : _c,
|
|
3015
|
+
_d = _a.liveRegion,
|
|
3016
|
+
liveRegion = _d === void 0 ? true : _d,
|
|
3017
|
+
dataTestId = _a["data-testid"],
|
|
3018
|
+
ariaLabel = _a["aria-label"];
|
|
3019
|
+
var statusConfig = getStatusConfig(status);
|
|
3020
|
+
var sizeStyles = getSizeStyles(size);
|
|
3021
|
+
var displayLabel = label || statusConfig.label;
|
|
3022
|
+
var cssProps = {
|
|
3023
|
+
'--status-badge-bg': statusConfig.bgColor,
|
|
3024
|
+
'--status-badge-color': statusConfig.color,
|
|
3025
|
+
'--status-badge-height': sizeStyles.height,
|
|
3026
|
+
'--status-badge-padding': sizeStyles.padding,
|
|
3027
|
+
'--status-badge-font': sizeStyles.font,
|
|
3028
|
+
'--status-badge-gap': sizeStyles.gap
|
|
3029
|
+
};
|
|
3030
|
+
return /*#__PURE__*/React.createElement(StyledStatusBadge, {
|
|
3031
|
+
$status: status,
|
|
3032
|
+
$size: size,
|
|
3033
|
+
role: "status",
|
|
3034
|
+
"aria-label": ariaLabel || "Status: ".concat(displayLabel),
|
|
3035
|
+
"aria-live": liveRegion ? 'polite' : undefined,
|
|
3036
|
+
"aria-atomic": liveRegion ? 'true' : undefined,
|
|
3037
|
+
"data-testid": dataTestId,
|
|
3038
|
+
style: cssProps
|
|
3039
|
+
}, showIcon && /*#__PURE__*/React.createElement(Icon, {
|
|
3040
|
+
name: statusConfig.icon,
|
|
3041
|
+
size: sizeStyles.iconSize,
|
|
3042
|
+
"aria-hidden": "true"
|
|
3043
|
+
}), displayLabel, /*#__PURE__*/React.createElement(ScreenReaderOnly, null, status, " status"));
|
|
3044
|
+
};
|
|
3045
|
+
StatusBadge.displayName = 'StatusBadge';
|
|
3046
|
+
var templateObject_1$s, templateObject_2$m, templateObject_3$j;
|
|
3047
|
+
|
|
3048
|
+
React.createElement;
|
|
3049
|
+
var semantic$c = tokensData.semantic;
|
|
2490
3050
|
var StyledTag = styled.span.withConfig({
|
|
2491
3051
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2492
3052
|
return !prop.startsWith('$');
|
|
2493
3053
|
},
|
|
2494
3054
|
displayName: "Tag__StyledTag",
|
|
2495
3055
|
componentId: "sc-lzfmti-0"
|
|
2496
|
-
})(templateObject_1$
|
|
3056
|
+
})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n user-select: none;\n white-space: nowrap;\n max-height: ", ";\n \n /* Size - fixed to small */\n padding: ", " ", ";\n font: ", ";\n \n /* Variant styles */\n background-color: ", ";\n \n color: ", ";\n \n border: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n user-select: none;\n white-space: nowrap;\n max-height: ", ";\n \n /* Size - fixed to small */\n padding: ", " ", ";\n font: ", ";\n \n /* Variant styles */\n background-color: ", ";\n \n color: ", ";\n \n border: ", ";\n"
|
|
2497
3057
|
/**
|
|
2498
3058
|
* Tag component for categorizing and labeling content
|
|
2499
3059
|
*
|
|
@@ -2503,33 +3063,33 @@ var StyledTag = styled.span.withConfig({
|
|
|
2503
3063
|
var $variant = _a.$variant;
|
|
2504
3064
|
switch ($variant) {
|
|
2505
3065
|
case 'interactive':
|
|
2506
|
-
return semantic$
|
|
3066
|
+
return semantic$c.color.background['interactive-subtle'];
|
|
2507
3067
|
case 'success':
|
|
2508
|
-
return semantic$
|
|
3068
|
+
return semantic$c.color.background['success-subtle'];
|
|
2509
3069
|
case 'warning':
|
|
2510
|
-
return semantic$
|
|
3070
|
+
return semantic$c.color.background['warning-subtle'];
|
|
2511
3071
|
case 'error':
|
|
2512
|
-
return semantic$
|
|
3072
|
+
return semantic$c.color.background['error-subtle'];
|
|
2513
3073
|
case 'emphasis':
|
|
2514
|
-
return semantic$
|
|
3074
|
+
return semantic$c.color.background.emphasis;
|
|
2515
3075
|
default:
|
|
2516
|
-
return semantic$
|
|
3076
|
+
return semantic$c.color.background.surface;
|
|
2517
3077
|
}
|
|
2518
3078
|
}, function (_a) {
|
|
2519
3079
|
var $variant = _a.$variant;
|
|
2520
3080
|
switch ($variant) {
|
|
2521
3081
|
case 'interactive':
|
|
2522
|
-
return semantic$
|
|
3082
|
+
return semantic$c.color.text.interactive;
|
|
2523
3083
|
case 'success':
|
|
2524
|
-
return semantic$
|
|
3084
|
+
return semantic$c.color.text.success;
|
|
2525
3085
|
case 'warning':
|
|
2526
|
-
return semantic$
|
|
3086
|
+
return semantic$c.color.text.warning;
|
|
2527
3087
|
case 'error':
|
|
2528
|
-
return semantic$
|
|
3088
|
+
return semantic$c.color.text.error;
|
|
2529
3089
|
case 'emphasis':
|
|
2530
|
-
return semantic$
|
|
3090
|
+
return semantic$c.color.text.inverse;
|
|
2531
3091
|
default:
|
|
2532
|
-
return semantic$
|
|
3092
|
+
return semantic$c.color.text["default"];
|
|
2533
3093
|
}
|
|
2534
3094
|
}, function (_a) {
|
|
2535
3095
|
var $variant = _a.$variant,
|
|
@@ -2537,17 +3097,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2537
3097
|
if (!$border) return 'none';
|
|
2538
3098
|
switch ($variant) {
|
|
2539
3099
|
case 'interactive':
|
|
2540
|
-
return "1px solid ".concat(semantic$
|
|
3100
|
+
return "1px solid ".concat(semantic$c.color.border.interactive);
|
|
2541
3101
|
case 'success':
|
|
2542
|
-
return "1px solid ".concat(semantic$
|
|
3102
|
+
return "1px solid ".concat(semantic$c.color.border.success);
|
|
2543
3103
|
case 'warning':
|
|
2544
|
-
return "1px solid ".concat(semantic$
|
|
3104
|
+
return "1px solid ".concat(semantic$c.color.border.warning);
|
|
2545
3105
|
case 'error':
|
|
2546
|
-
return "1px solid ".concat(semantic$
|
|
3106
|
+
return "1px solid ".concat(semantic$c.color.border.error);
|
|
2547
3107
|
case 'emphasis':
|
|
2548
|
-
return "1px solid ".concat(semantic$
|
|
3108
|
+
return "1px solid ".concat(semantic$c.color.background.emphasis);
|
|
2549
3109
|
default:
|
|
2550
|
-
return "1px solid ".concat(semantic$
|
|
3110
|
+
return "1px solid ".concat(semantic$c.color.border["default"]);
|
|
2551
3111
|
}
|
|
2552
3112
|
});
|
|
2553
3113
|
/**
|
|
@@ -2574,113 +3134,513 @@ var Tag = function Tag(_a) {
|
|
|
2574
3134
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
2575
3135
|
}, props), children);
|
|
2576
3136
|
};
|
|
2577
|
-
var templateObject_1$
|
|
3137
|
+
var templateObject_1$r;
|
|
2578
3138
|
|
|
2579
3139
|
React.createElement;
|
|
2580
|
-
var
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
3140
|
+
var StyledCard = styled.div.withConfig({
|
|
3141
|
+
displayName: "AccountCard__StyledCard",
|
|
3142
|
+
componentId: "sc-1erp7zn-0"
|
|
3143
|
+
})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n min-width: 300px;\n min-height: 200px;\n padding: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: all 0.2s ease;\n \n ", "\n"], ["\n min-width: 300px;\n min-height: 200px;\n padding: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: all 0.2s ease;\n \n ", "\n"])), tokensData.semantic.spacing.layout.lg, tokensData.semantic.color.background.surface, tokensData.semantic.color.border["default"], tokensData.base.border.radius[5], tokensData.base.shadow[3], function (_a) {
|
|
3144
|
+
var $clickable = _a.$clickable;
|
|
3145
|
+
return $clickable && "\n cursor: pointer;\n \n &:hover {\n box-shadow: ".concat(tokensData.base.shadow[4], ";\n transform: translateY(-2px);\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n outline-offset: 2px;\n }\n ");
|
|
3146
|
+
});
|
|
3147
|
+
var StyledHeader$2 = styled.div.withConfig({
|
|
3148
|
+
displayName: "AccountCard__StyledHeader",
|
|
3149
|
+
componentId: "sc-1erp7zn-1"
|
|
3150
|
+
})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.md);
|
|
3151
|
+
var StyledIconWrapper = styled.div.withConfig({
|
|
3152
|
+
displayName: "AccountCard__StyledIconWrapper",
|
|
3153
|
+
componentId: "sc-1erp7zn-2"
|
|
3154
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: ", ";\n color: ", ";\n"], ["\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: ", ";\n color: ", ";\n"])), tokensData.semantic.color.background.interactive, tokensData.base.border.radius[3], tokensData.semantic.color.icon.interactive);
|
|
3155
|
+
var StyledBalanceSection = styled.div.withConfig({
|
|
3156
|
+
displayName: "AccountCard__StyledBalanceSection",
|
|
3157
|
+
componentId: "sc-1erp7zn-3"
|
|
3158
|
+
})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.lg);
|
|
3159
|
+
var StyledTrendSection = styled.div.withConfig({
|
|
3160
|
+
displayName: "AccountCard__StyledTrendSection",
|
|
3161
|
+
componentId: "sc-1erp7zn-4"
|
|
3162
|
+
})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n margin-top: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n margin-top: ", ";\n"])), tokensData.semantic.spacing.layout.xs, tokensData.semantic.spacing.layout.sm);
|
|
3163
|
+
var StyledActions$1 = styled.div.withConfig({
|
|
3164
|
+
displayName: "AccountCard__StyledActions",
|
|
3165
|
+
componentId: "sc-1erp7zn-5"
|
|
3166
|
+
})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n margin-top: auto;\n \n & > * {\n flex: 1;\n }\n"], ["\n display: flex;\n gap: ", ";\n margin-top: auto;\n \n & > * {\n flex: 1;\n }\n"])), tokensData.semantic.spacing.layout.sm);
|
|
3167
|
+
var StyledStackWrapper = styled.div.withConfig({
|
|
3168
|
+
displayName: "AccountCard__StyledStackWrapper",
|
|
3169
|
+
componentId: "sc-1erp7zn-6"
|
|
3170
|
+
})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n height: 100%;\n min-height: 168px;\n"], ["\n height: 100%;\n min-height: 168px;\n"
|
|
3171
|
+
// Map account types to icon names (using placeholders)
|
|
3172
|
+
])));
|
|
3173
|
+
// Map account types to icon names (using placeholders)
|
|
3174
|
+
var accountTypeToIcon = {
|
|
3175
|
+
checking: 'paper',
|
|
3176
|
+
// Will use bank icon
|
|
3177
|
+
savings: 'star',
|
|
3178
|
+
// Will use piggyBank icon
|
|
3179
|
+
credit: 'paper',
|
|
3180
|
+
// Will use creditCard icon
|
|
3181
|
+
investment: 'star',
|
|
3182
|
+
// Will use chartLine icon
|
|
3183
|
+
loan: 'paper' // Will use document icon
|
|
2595
3184
|
};
|
|
2596
|
-
//
|
|
2597
|
-
var
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
success: 'success'
|
|
3185
|
+
// Map trend direction to icon and color
|
|
3186
|
+
var trendToIcon = {
|
|
3187
|
+
up: 'arrowUp',
|
|
3188
|
+
down: 'arrowDown',
|
|
3189
|
+
neutral: 'arrowRight'
|
|
2602
3190
|
};
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
var
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
var $variant = _a.$variant;
|
|
2620
|
-
switch ($variant) {
|
|
2621
|
-
case 'error':
|
|
2622
|
-
return "\n background-color: ".concat(semantic$7.color.background['error-subtle'], ";\n border-color: ").concat(semantic$7.color.border.error, ";\n color: ").concat(semantic$7.color.text.error, ";\n ");
|
|
2623
|
-
case 'warning':
|
|
2624
|
-
return "\n background-color: ".concat(semantic$7.color.background['warning-subtle'], ";\n border-color: ").concat(semantic$7.color.border.warning, ";\n color: ").concat(semantic$7.color.text.warning, ";\n ");
|
|
2625
|
-
case 'success':
|
|
2626
|
-
return "\n background-color: ".concat(semantic$7.color.background['success-subtle'], ";\n border-color: ").concat(semantic$7.color.border.success, ";\n color: ").concat(semantic$7.color.text.success, ";\n ");
|
|
2627
|
-
case 'info':
|
|
2628
|
-
default:
|
|
2629
|
-
return "\n background-color: ".concat(semantic$7.color.background['interactive-subtle'], ";\n border-color: ").concat(semantic$7.color.border.interactive, ";\n color: ").concat(semantic$7.color.text.interactive, ";\n ");
|
|
2630
|
-
}
|
|
2631
|
-
}, base$6.breakpoint.md, function (_a) {
|
|
2632
|
-
var $inline = _a.$inline;
|
|
2633
|
-
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.lg;
|
|
2634
|
-
});
|
|
2635
|
-
var StyledIconContainer$1 = styled.div.withConfig({
|
|
2636
|
-
displayName: "Alert__StyledIconContainer",
|
|
2637
|
-
componentId: "sc-18tq5d-1"
|
|
2638
|
-
})(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
2639
|
-
var StyledContent = styled.div.withConfig({
|
|
2640
|
-
displayName: "Alert__StyledContent",
|
|
2641
|
-
componentId: "sc-18tq5d-2"
|
|
2642
|
-
})(templateObject_3$b || (templateObject_3$b = __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$7.spacing.layout.xs);
|
|
2643
|
-
var StyledTitle = styled.span.withConfig({
|
|
2644
|
-
displayName: "Alert__StyledTitle",
|
|
2645
|
-
componentId: "sc-18tq5d-3"
|
|
2646
|
-
})(templateObject_4$a || (templateObject_4$a = __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$7.typography.h6);
|
|
2647
|
-
var StyledMessage = styled.span.withConfig({
|
|
2648
|
-
displayName: "Alert__StyledMessage",
|
|
2649
|
-
componentId: "sc-18tq5d-4"
|
|
2650
|
-
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font: ", ";\n\tline-height: 1.25;\n"], ["\n font: ", ";\n\tline-height: 1.25;\n"])), semantic$7.typography.body);
|
|
2651
|
-
var StyledActions = styled.div.withConfig({
|
|
2652
|
-
displayName: "Alert__StyledActions",
|
|
2653
|
-
componentId: "sc-18tq5d-5"
|
|
2654
|
-
})(templateObject_6$7 || (templateObject_6$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);
|
|
2655
|
-
var StyledDismissButton = styled(IconButton).withConfig({
|
|
2656
|
-
displayName: "Alert__StyledDismissButton",
|
|
2657
|
-
componentId: "sc-18tq5d-6"
|
|
2658
|
-
})(templateObject_7$5 || (templateObject_7$5 = __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$7.spacing.layout.xs);
|
|
2659
|
-
var Alert = function Alert(_a) {
|
|
2660
|
-
var _b = _a.variant,
|
|
2661
|
-
variant = _b === void 0 ? 'info' : _b,
|
|
2662
|
-
children = _a.children,
|
|
2663
|
-
title = _a.title,
|
|
2664
|
-
_c = _a.dismissible,
|
|
2665
|
-
dismissible = _c === void 0 ? false : _c,
|
|
2666
|
-
onDismiss = _a.onDismiss,
|
|
3191
|
+
/**
|
|
3192
|
+
* AccountCard component
|
|
3193
|
+
*
|
|
3194
|
+
* Displays account information in a card format with account type icon,
|
|
3195
|
+
* name, balance, optional trend indicator, and action buttons. Minimum
|
|
3196
|
+
* 300x200px with elevation and hover effects.
|
|
3197
|
+
*
|
|
3198
|
+
* Composes: Stack, Box, Icon, Typography, MoneyDisplay, Button
|
|
3199
|
+
*/
|
|
3200
|
+
var AccountCard = function AccountCard(_a) {
|
|
3201
|
+
var accountType = _a.accountType,
|
|
3202
|
+
accountName = _a.accountName,
|
|
3203
|
+
balance = _a.balance,
|
|
3204
|
+
accountNumber = _a.accountNumber,
|
|
3205
|
+
trend = _a.trend,
|
|
3206
|
+
trendValue = _a.trendValue,
|
|
2667
3207
|
action = _a.action,
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
dataTestId = _a["data-testid"]
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
var
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
}
|
|
3208
|
+
secondaryAction = _a.secondaryAction,
|
|
3209
|
+
_b = _a.currency,
|
|
3210
|
+
currency = _b === void 0 ? 'AUD' : _b,
|
|
3211
|
+
onClick = _a.onClick,
|
|
3212
|
+
dataTestId = _a["data-testid"];
|
|
3213
|
+
var isClickable = !!onClick;
|
|
3214
|
+
// Get account type icon
|
|
3215
|
+
var accountIcon = accountTypeToIcon[accountType];
|
|
3216
|
+
// Get trend icon and color
|
|
3217
|
+
var trendIcon = trend ? trendToIcon[trend] : undefined;
|
|
3218
|
+
var trendColor = trend === 'up' ? 'success' : trend === 'down' ? 'error' : 'subdued';
|
|
3219
|
+
var handleClick = function handleClick() {
|
|
3220
|
+
if (isClickable && onClick) {
|
|
3221
|
+
onClick();
|
|
3222
|
+
}
|
|
3223
|
+
};
|
|
3224
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
3225
|
+
if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
|
|
3226
|
+
e.preventDefault();
|
|
3227
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
3228
|
+
}
|
|
3229
|
+
};
|
|
3230
|
+
return /*#__PURE__*/React.createElement(StyledCard, {
|
|
3231
|
+
$clickable: isClickable,
|
|
3232
|
+
onClick: handleClick,
|
|
3233
|
+
onKeyDown: handleKeyDown,
|
|
3234
|
+
tabIndex: isClickable ? 0 : undefined,
|
|
3235
|
+
role: isClickable ? 'button' : 'article',
|
|
3236
|
+
"aria-label": isClickable ? "".concat(accountName, " account, balance ").concat(balance) : undefined,
|
|
3237
|
+
"data-testid": dataTestId
|
|
3238
|
+
}, /*#__PURE__*/React.createElement(StyledStackWrapper, null, /*#__PURE__*/React.createElement(Stack, {
|
|
3239
|
+
direction: "column",
|
|
3240
|
+
gap: "none"
|
|
3241
|
+
}, /*#__PURE__*/React.createElement(StyledHeader$2, null, /*#__PURE__*/React.createElement(Stack, {
|
|
3242
|
+
direction: "row",
|
|
3243
|
+
gap: "md",
|
|
3244
|
+
alignItems: "center"
|
|
3245
|
+
}, /*#__PURE__*/React.createElement(StyledIconWrapper, {
|
|
3246
|
+
"aria-label": "".concat(accountType, " account"),
|
|
3247
|
+
role: "img"
|
|
3248
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
3249
|
+
name: accountIcon,
|
|
3250
|
+
size: "md"
|
|
3251
|
+
})), /*#__PURE__*/React.createElement(Stack, {
|
|
3252
|
+
direction: "column",
|
|
3253
|
+
gap: "xs"
|
|
3254
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3255
|
+
variant: "h4"
|
|
3256
|
+
}, accountName), accountNumber && /*#__PURE__*/React.createElement(Typography, {
|
|
3257
|
+
variant: "caption",
|
|
3258
|
+
color: "subdued"
|
|
3259
|
+
}, "\u2022\u2022\u2022\u2022 ", accountNumber)))), /*#__PURE__*/React.createElement(StyledBalanceSection, null, /*#__PURE__*/React.createElement(Stack, {
|
|
3260
|
+
direction: "column",
|
|
3261
|
+
gap: "xs"
|
|
3262
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3263
|
+
variant: "caption",
|
|
3264
|
+
color: "subdued"
|
|
3265
|
+
}, "Balance"), /*#__PURE__*/React.createElement(MoneyDisplay, {
|
|
3266
|
+
amount: balance,
|
|
3267
|
+
currency: currency,
|
|
3268
|
+
size: "xlarge",
|
|
3269
|
+
weight: "bold",
|
|
3270
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-balance") : undefined
|
|
3271
|
+
})), trend && trendValue && /*#__PURE__*/React.createElement(StyledTrendSection, {
|
|
3272
|
+
"aria-label": "Trend ".concat(trend),
|
|
3273
|
+
role: "img"
|
|
3274
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
3275
|
+
name: trendIcon,
|
|
3276
|
+
size: "xs",
|
|
3277
|
+
iconColor: trendColor
|
|
3278
|
+
}), /*#__PURE__*/React.createElement(Typography, {
|
|
3279
|
+
variant: "caption",
|
|
3280
|
+
color: trendColor
|
|
3281
|
+
}, trendValue))), (action || secondaryAction) && /*#__PURE__*/React.createElement(StyledActions$1, null, action && /*#__PURE__*/React.createElement(Button, {
|
|
3282
|
+
onClick: function onClick(e) {
|
|
3283
|
+
e.stopPropagation();
|
|
3284
|
+
action.onClick();
|
|
3285
|
+
},
|
|
3286
|
+
variant: action.variant || 'primary',
|
|
3287
|
+
iconName: action.icon,
|
|
3288
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-action") : undefined
|
|
3289
|
+
}, action.label), secondaryAction && /*#__PURE__*/React.createElement(Button, {
|
|
3290
|
+
onClick: function onClick(e) {
|
|
3291
|
+
e.stopPropagation();
|
|
3292
|
+
secondaryAction.onClick();
|
|
3293
|
+
},
|
|
3294
|
+
variant: secondaryAction.variant || 'naked',
|
|
3295
|
+
iconName: secondaryAction.icon,
|
|
3296
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined
|
|
3297
|
+
}, secondaryAction.label)))));
|
|
3298
|
+
};
|
|
3299
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$c, templateObject_6$b, templateObject_7$9;
|
|
3300
|
+
|
|
3301
|
+
React.createElement;
|
|
3302
|
+
var semantic$b = tokensData.semantic,
|
|
3303
|
+
base$9 = tokensData.base;
|
|
3304
|
+
var slideUp = styled.keyframes(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"], ["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"])));
|
|
3305
|
+
var fadeIn$1 = styled.keyframes(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
3306
|
+
var StyledOverlay$1 = styled.div.withConfig({
|
|
3307
|
+
displayName: "ActionSheet__StyledOverlay",
|
|
3308
|
+
componentId: "sc-regbol-0"
|
|
3309
|
+
})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9999;\n animation: ", " 0.2s ease-out;\n"], ["\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9999;\n animation: ", " 0.2s ease-out;\n"])), fadeIn$1);
|
|
3310
|
+
var StyledActionSheet = styled.div.withConfig({
|
|
3311
|
+
displayName: "ActionSheet__StyledActionSheet",
|
|
3312
|
+
componentId: "sc-regbol-1"
|
|
3313
|
+
})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n box-shadow: ", ";\n max-height: 90vh;\n overflow-y: auto;\n z-index: 10000;\n animation: ", " 0.3s ease-out;\n"], ["\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n box-shadow: ", ";\n max-height: 90vh;\n overflow-y: auto;\n z-index: 10000;\n animation: ", " 0.3s ease-out;\n"])), semantic$b.color.background.subtle, base$9.border.radius[4], base$9.border.radius[4], base$9.shadow[4], slideUp);
|
|
3314
|
+
var StyledHeader$1 = styled.div.withConfig({
|
|
3315
|
+
displayName: "ActionSheet__StyledHeader",
|
|
3316
|
+
componentId: "sc-regbol-2"
|
|
3317
|
+
})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", " solid ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", " solid ", ";\n"])), base$9.spacing[4], base$9.spacing[4], base$9.spacing[3], base$9.border.width[1], semantic$b.color.border["default"]);
|
|
3318
|
+
var StyledHeaderContent = styled.div.withConfig({
|
|
3319
|
+
displayName: "ActionSheet__StyledHeaderContent",
|
|
3320
|
+
componentId: "sc-regbol-3"
|
|
3321
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
3322
|
+
var StyledCloseButton = styled.button.withConfig({
|
|
3323
|
+
displayName: "ActionSheet__StyledCloseButton",
|
|
3324
|
+
componentId: "sc-regbol-4"
|
|
3325
|
+
})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"])), base$9.spacing[2], semantic$b.color.icon.subdued, base$9.border.radius[2], semantic$b.motion.hover, base$9.spacing[2], semantic$b.color.icon["default"], semantic$b.color.background.surface, base$9.border.width[2], semantic$b.color.border.strong, base$9.spacing[1]);
|
|
3326
|
+
var StyledActionsList = styled.div.withConfig({
|
|
3327
|
+
displayName: "ActionSheet__StyledActionsList",
|
|
3328
|
+
componentId: "sc-regbol-5"
|
|
3329
|
+
})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n padding: ", " 0;\n"], ["\n padding: ", " 0;\n"])), base$9.spacing[2]);
|
|
3330
|
+
var StyledActionButton = styled.button.withConfig({
|
|
3331
|
+
displayName: "ActionSheet__StyledActionButton",
|
|
3332
|
+
componentId: "sc-regbol-6"
|
|
3333
|
+
})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n text-align: left;\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n \n &:active:not(:disabled) {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n text-align: left;\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n \n &:active:not(:disabled) {\n background-color: ", ";\n }\n"])), base$9.spacing[3], base$9.spacing[3], base$9.spacing[4], semantic$b.typography.body, semantic$b.motion.hover, function (props) {
|
|
3334
|
+
return props.$destructive && "\n color: ".concat(semantic$b.color.text.error, ";\n ");
|
|
3335
|
+
}, function (props) {
|
|
3336
|
+
return props.$disabled && "\n color: ".concat(semantic$b.color.text.disabled, ";\n cursor: not-allowed;\n ");
|
|
3337
|
+
}, semantic$b.color.background['interactive-subtle'], base$9.border.width[2], semantic$b.color.border.strong, base$9.spacing[1], semantic$b.color.background.surface);
|
|
3338
|
+
var StyledDivider = styled.div.withConfig({
|
|
3339
|
+
displayName: "ActionSheet__StyledDivider",
|
|
3340
|
+
componentId: "sc-regbol-7"
|
|
3341
|
+
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n height: ", ";\n background-color: ", ";\n margin: ", " ", ";\n"], ["\n height: ", ";\n background-color: ", ";\n margin: ", " ", ";\n"
|
|
3342
|
+
/**
|
|
3343
|
+
* ActionSheet component for bottom sheet modals
|
|
3344
|
+
*
|
|
3345
|
+
* Displays a modal action sheet that slides up from the bottom,
|
|
3346
|
+
* providing a list of actions for the user to choose from.
|
|
3347
|
+
* Includes focus trapping, keyboard navigation, and accessibility features.
|
|
3348
|
+
*
|
|
3349
|
+
* @example
|
|
3350
|
+
* ```tsx
|
|
3351
|
+
* const [isOpen, setIsOpen] = useState(false)
|
|
3352
|
+
*
|
|
3353
|
+
* <ActionSheet
|
|
3354
|
+
* isOpen={isOpen}
|
|
3355
|
+
* onClose={() => setIsOpen(false)}
|
|
3356
|
+
* title="Choose an action"
|
|
3357
|
+
* actions={[
|
|
3358
|
+
* {
|
|
3359
|
+
* id: 'edit',
|
|
3360
|
+
* label: 'Edit',
|
|
3361
|
+
* icon: 'edit',
|
|
3362
|
+
* onSelect: () => console.log('Edit')
|
|
3363
|
+
* },
|
|
3364
|
+
* {
|
|
3365
|
+
* id: 'delete',
|
|
3366
|
+
* label: 'Delete',
|
|
3367
|
+
* icon: 'trash',
|
|
3368
|
+
* destructive: true,
|
|
3369
|
+
* onSelect: () => console.log('Delete')
|
|
3370
|
+
* }
|
|
3371
|
+
* ]}
|
|
3372
|
+
* />
|
|
3373
|
+
* ```
|
|
3374
|
+
*/])), base$9.border.width[1], semantic$b.color.border["default"], base$9.spacing[2], base$9.spacing[4]);
|
|
3375
|
+
/**
|
|
3376
|
+
* ActionSheet component for bottom sheet modals
|
|
3377
|
+
*
|
|
3378
|
+
* Displays a modal action sheet that slides up from the bottom,
|
|
3379
|
+
* providing a list of actions for the user to choose from.
|
|
3380
|
+
* Includes focus trapping, keyboard navigation, and accessibility features.
|
|
3381
|
+
*
|
|
3382
|
+
* @example
|
|
3383
|
+
* ```tsx
|
|
3384
|
+
* const [isOpen, setIsOpen] = useState(false)
|
|
3385
|
+
*
|
|
3386
|
+
* <ActionSheet
|
|
3387
|
+
* isOpen={isOpen}
|
|
3388
|
+
* onClose={() => setIsOpen(false)}
|
|
3389
|
+
* title="Choose an action"
|
|
3390
|
+
* actions={[
|
|
3391
|
+
* {
|
|
3392
|
+
* id: 'edit',
|
|
3393
|
+
* label: 'Edit',
|
|
3394
|
+
* icon: 'edit',
|
|
3395
|
+
* onSelect: () => console.log('Edit')
|
|
3396
|
+
* },
|
|
3397
|
+
* {
|
|
3398
|
+
* id: 'delete',
|
|
3399
|
+
* label: 'Delete',
|
|
3400
|
+
* icon: 'trash',
|
|
3401
|
+
* destructive: true,
|
|
3402
|
+
* onSelect: () => console.log('Delete')
|
|
3403
|
+
* }
|
|
3404
|
+
* ]}
|
|
3405
|
+
* />
|
|
3406
|
+
* ```
|
|
3407
|
+
*/
|
|
3408
|
+
var ActionSheet = function ActionSheet(_a) {
|
|
3409
|
+
var isOpen = _a.isOpen,
|
|
3410
|
+
onClose = _a.onClose,
|
|
3411
|
+
title = _a.title,
|
|
3412
|
+
description = _a.description,
|
|
3413
|
+
actions = _a.actions,
|
|
3414
|
+
_b = _a.closeOnOverlayClick,
|
|
3415
|
+
closeOnOverlayClick = _b === void 0 ? true : _b,
|
|
3416
|
+
_c = _a.closeOnEscape,
|
|
3417
|
+
closeOnEscape = _c === void 0 ? true : _c,
|
|
3418
|
+
_d = _a.showCloseButton,
|
|
3419
|
+
showCloseButton = _d === void 0 ? true : _d,
|
|
3420
|
+
dataTestId = _a["data-testid"];
|
|
3421
|
+
var sheetRef = React.useRef(null);
|
|
3422
|
+
var previousActiveElement = React.useRef(null);
|
|
3423
|
+
// Store the element that had focus when sheet opened
|
|
3424
|
+
React.useEffect(function () {
|
|
3425
|
+
if (isOpen) {
|
|
3426
|
+
previousActiveElement.current = document.activeElement;
|
|
3427
|
+
}
|
|
3428
|
+
}, [isOpen]);
|
|
3429
|
+
// Focus management and escape key handling
|
|
3430
|
+
React.useEffect(function () {
|
|
3431
|
+
if (!isOpen) return;
|
|
3432
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
3433
|
+
if (e.key === 'Escape' && closeOnEscape) {
|
|
3434
|
+
e.preventDefault();
|
|
3435
|
+
onClose();
|
|
3436
|
+
}
|
|
3437
|
+
// Focus trap
|
|
3438
|
+
if (e.key === 'Tab' && sheetRef.current) {
|
|
3439
|
+
var focusableElements = sheetRef.current.querySelectorAll('button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])');
|
|
3440
|
+
var firstElement = focusableElements[0];
|
|
3441
|
+
var lastElement = focusableElements[focusableElements.length - 1];
|
|
3442
|
+
if (e.shiftKey && document.activeElement === firstElement) {
|
|
3443
|
+
e.preventDefault();
|
|
3444
|
+
lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
|
|
3445
|
+
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
|
3446
|
+
e.preventDefault();
|
|
3447
|
+
firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
|
|
3448
|
+
}
|
|
3449
|
+
}
|
|
3450
|
+
};
|
|
3451
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
3452
|
+
// Focus first focusable element
|
|
3453
|
+
requestAnimationFrame(function () {
|
|
3454
|
+
var _a;
|
|
3455
|
+
var firstButton = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled)');
|
|
3456
|
+
firstButton === null || firstButton === void 0 ? void 0 : firstButton.focus();
|
|
3457
|
+
});
|
|
3458
|
+
// Prevent body scroll
|
|
3459
|
+
var originalOverflow = document.body.style.overflow;
|
|
3460
|
+
document.body.style.overflow = 'hidden';
|
|
3461
|
+
return function () {
|
|
3462
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
3463
|
+
document.body.style.overflow = originalOverflow;
|
|
3464
|
+
// Return focus to previous element
|
|
3465
|
+
if (previousActiveElement.current) {
|
|
3466
|
+
previousActiveElement.current.focus();
|
|
3467
|
+
}
|
|
3468
|
+
};
|
|
3469
|
+
}, [isOpen, onClose, closeOnEscape]);
|
|
3470
|
+
var handleOverlayClick = function handleOverlayClick(e) {
|
|
3471
|
+
if (closeOnOverlayClick && e.target === e.currentTarget) {
|
|
3472
|
+
onClose();
|
|
3473
|
+
}
|
|
3474
|
+
};
|
|
3475
|
+
var handleActionClick = function handleActionClick(action) {
|
|
3476
|
+
if (!action.disabled) {
|
|
3477
|
+
action.onSelect();
|
|
3478
|
+
onClose();
|
|
3479
|
+
}
|
|
3480
|
+
};
|
|
3481
|
+
if (!isOpen) return null;
|
|
3482
|
+
// Find if there are any destructive actions to add divider
|
|
3483
|
+
var destructiveIndex = actions.findIndex(function (a) {
|
|
3484
|
+
return a.destructive;
|
|
3485
|
+
});
|
|
3486
|
+
var hasDestructive = destructiveIndex >= 0;
|
|
3487
|
+
return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOverlay$1, {
|
|
3488
|
+
onClick: handleOverlayClick
|
|
3489
|
+
}), /*#__PURE__*/React.createElement(StyledActionSheet, {
|
|
3490
|
+
ref: sheetRef,
|
|
3491
|
+
role: "dialog",
|
|
3492
|
+
"aria-modal": "true",
|
|
3493
|
+
"aria-labelledby": title ? 'action-sheet-title' : undefined,
|
|
3494
|
+
"aria-describedby": description ? 'action-sheet-description' : undefined,
|
|
3495
|
+
"data-testid": dataTestId
|
|
3496
|
+
}, (title || description || showCloseButton) && /*#__PURE__*/React.createElement(StyledHeader$1, null, /*#__PURE__*/React.createElement(StyledHeaderContent, null, /*#__PURE__*/React.createElement(Stack, {
|
|
3497
|
+
direction: "column",
|
|
3498
|
+
gap: description && title ? 'xs' : 'none'
|
|
3499
|
+
}, title && /*#__PURE__*/React.createElement("div", {
|
|
3500
|
+
id: "action-sheet-title"
|
|
3501
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3502
|
+
variant: "h3"
|
|
3503
|
+
}, title)), description && /*#__PURE__*/React.createElement("div", {
|
|
3504
|
+
id: "action-sheet-description"
|
|
3505
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3506
|
+
variant: "body",
|
|
3507
|
+
color: "subdued"
|
|
3508
|
+
}, description)))), showCloseButton && /*#__PURE__*/React.createElement(StyledCloseButton, {
|
|
3509
|
+
type: "button",
|
|
3510
|
+
onClick: onClose,
|
|
3511
|
+
"aria-label": "Close"
|
|
3512
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
3513
|
+
name: "close",
|
|
3514
|
+
size: "sm",
|
|
3515
|
+
iconColor: "subdued"
|
|
3516
|
+
}))), /*#__PURE__*/React.createElement(StyledActionsList, null, actions.map(function (action, index) {
|
|
3517
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
3518
|
+
key: action.id
|
|
3519
|
+
}, hasDestructive && index === destructiveIndex && index > 0 && /*#__PURE__*/React.createElement(StyledDivider, null), /*#__PURE__*/React.createElement(StyledActionButton, {
|
|
3520
|
+
type: "button",
|
|
3521
|
+
onClick: function onClick() {
|
|
3522
|
+
return handleActionClick(action);
|
|
3523
|
+
},
|
|
3524
|
+
disabled: action.disabled,
|
|
3525
|
+
$destructive: action.destructive || false,
|
|
3526
|
+
$disabled: action.disabled || false,
|
|
3527
|
+
"aria-label": action.label
|
|
3528
|
+
}, action.icon && /*#__PURE__*/React.createElement(Icon, {
|
|
3529
|
+
name: action.icon,
|
|
3530
|
+
size: "md",
|
|
3531
|
+
iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
|
|
3532
|
+
}), /*#__PURE__*/React.createElement(Typography, {
|
|
3533
|
+
variant: "body"
|
|
3534
|
+
}, action.label)));
|
|
3535
|
+
})))), document.body);
|
|
3536
|
+
};
|
|
3537
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$5, templateObject_9$3, templateObject_10$2;
|
|
3538
|
+
|
|
3539
|
+
React.createElement;
|
|
3540
|
+
var semantic$a = tokensData.semantic,
|
|
3541
|
+
base$8 = tokensData.base;
|
|
3542
|
+
// Default icons by variant
|
|
3543
|
+
var variantIcons = {
|
|
3544
|
+
error: 'crossCircle',
|
|
3545
|
+
warning: 'bell',
|
|
3546
|
+
info: 'info',
|
|
3547
|
+
success: 'checkRing'
|
|
3548
|
+
};
|
|
3549
|
+
// Icon colors by variant (using semantic icon color tokens)
|
|
3550
|
+
var variantIconColors = {
|
|
3551
|
+
error: 'error',
|
|
3552
|
+
warning: 'warning',
|
|
3553
|
+
info: 'interactive',
|
|
3554
|
+
success: 'success'
|
|
3555
|
+
};
|
|
3556
|
+
// Title colors by variant (using semantic text color tokens)
|
|
3557
|
+
var variantTitleColors = {
|
|
3558
|
+
error: 'error',
|
|
3559
|
+
warning: 'warning',
|
|
3560
|
+
info: 'interactive',
|
|
3561
|
+
success: 'success'
|
|
3562
|
+
};
|
|
3563
|
+
var StyledAlert = styled.div.withConfig({
|
|
3564
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3565
|
+
return !prop.startsWith('$');
|
|
3566
|
+
},
|
|
3567
|
+
displayName: "Alert__StyledAlert",
|
|
3568
|
+
componentId: "sc-18tq5d-0"
|
|
3569
|
+
})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: 1px solid;\n position: relative;\n width: 100%;\n \n /* Variant-specific colors */\n ", "\n \n /* Responsive adjustments */\n @media (min-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n align-items: ", ";\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: 1px solid;\n position: relative;\n width: 100%;\n \n /* Variant-specific colors */\n ", "\n \n /* Responsive adjustments */\n @media (min-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
3570
|
+
var $inline = _a.$inline;
|
|
3571
|
+
return $inline ? 'center' : 'flex-start';
|
|
3572
|
+
}, function (_a) {
|
|
3573
|
+
var $inline = _a.$inline;
|
|
3574
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
|
|
3575
|
+
}, function (_a) {
|
|
3576
|
+
var $inline = _a.$inline;
|
|
3577
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
|
|
3578
|
+
}, base$8.border.radius[2], function (_a) {
|
|
3579
|
+
var $variant = _a.$variant;
|
|
3580
|
+
switch ($variant) {
|
|
3581
|
+
case 'error':
|
|
3582
|
+
return "\n background-color: ".concat(semantic$a.color.background['error-subtle'], ";\n border-color: ").concat(semantic$a.color.border.error, ";\n color: ").concat(semantic$a.color.text.error, ";\n ");
|
|
3583
|
+
case 'warning':
|
|
3584
|
+
return "\n background-color: ".concat(semantic$a.color.background['warning-subtle'], ";\n border-color: ").concat(semantic$a.color.border.warning, ";\n color: ").concat(semantic$a.color.text.warning, ";\n ");
|
|
3585
|
+
case 'success':
|
|
3586
|
+
return "\n background-color: ".concat(semantic$a.color.background['success-subtle'], ";\n border-color: ").concat(semantic$a.color.border.success, ";\n color: ").concat(semantic$a.color.text.success, ";\n ");
|
|
3587
|
+
case 'info':
|
|
3588
|
+
default:
|
|
3589
|
+
return "\n background-color: ".concat(semantic$a.color.background['interactive-subtle'], ";\n border-color: ").concat(semantic$a.color.border.interactive, ";\n color: ").concat(semantic$a.color.text.interactive, ";\n ");
|
|
3590
|
+
}
|
|
3591
|
+
}, base$8.breakpoint.md, function (_a) {
|
|
3592
|
+
var $inline = _a.$inline;
|
|
3593
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.lg;
|
|
3594
|
+
});
|
|
3595
|
+
var StyledIconContainer$1 = styled.div.withConfig({
|
|
3596
|
+
displayName: "Alert__StyledIconContainer",
|
|
3597
|
+
componentId: "sc-18tq5d-1"
|
|
3598
|
+
})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n"])));
|
|
3599
|
+
var StyledContent$1 = styled.div.withConfig({
|
|
3600
|
+
displayName: "Alert__StyledContent",
|
|
3601
|
+
componentId: "sc-18tq5d-2"
|
|
3602
|
+
})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"])), semantic$a.spacing.layout.xs);
|
|
3603
|
+
var StyledTitle = styled.span.withConfig({
|
|
3604
|
+
displayName: "Alert__StyledTitle",
|
|
3605
|
+
componentId: "sc-18tq5d-3"
|
|
3606
|
+
})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font: ", ";\n font-weight: 600 !important;\n margin: 0;\n\tline-height: 1.125;\n"], ["\n font: ", ";\n font-weight: 600 !important;\n margin: 0;\n\tline-height: 1.125;\n"])), semantic$a.typography.h6);
|
|
3607
|
+
var StyledMessage = styled.span.withConfig({
|
|
3608
|
+
displayName: "Alert__StyledMessage",
|
|
3609
|
+
componentId: "sc-18tq5d-4"
|
|
3610
|
+
})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n font: ", ";\n\tline-height: 1.25;\n"], ["\n font: ", ";\n\tline-height: 1.25;\n"])), semantic$a.typography.body);
|
|
3611
|
+
var StyledActions = styled.div.withConfig({
|
|
3612
|
+
displayName: "Alert__StyledActions",
|
|
3613
|
+
componentId: "sc-18tq5d-5"
|
|
3614
|
+
})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"])), semantic$a.spacing.layout.sm);
|
|
3615
|
+
var StyledDismissButton = styled(IconButton).withConfig({
|
|
3616
|
+
displayName: "Alert__StyledDismissButton",
|
|
3617
|
+
componentId: "sc-18tq5d-6"
|
|
3618
|
+
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"], ["\n margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"])), semantic$a.spacing.layout.xs);
|
|
3619
|
+
var Alert = function Alert(_a) {
|
|
3620
|
+
var _b = _a.variant,
|
|
3621
|
+
variant = _b === void 0 ? 'info' : _b,
|
|
3622
|
+
children = _a.children,
|
|
3623
|
+
title = _a.title,
|
|
3624
|
+
_c = _a.dismissible,
|
|
3625
|
+
dismissible = _c === void 0 ? false : _c,
|
|
3626
|
+
onDismiss = _a.onDismiss,
|
|
3627
|
+
action = _a.action,
|
|
3628
|
+
_d = _a.inline,
|
|
3629
|
+
inline = _d === void 0 ? false : _d,
|
|
3630
|
+
_e = _a.ariaLive,
|
|
3631
|
+
ariaLive = _e === void 0 ? 'polite' : _e,
|
|
3632
|
+
dataTestId = _a["data-testid"],
|
|
3633
|
+
props = __rest(_a, ["variant", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
|
|
3634
|
+
var _f = React.useState(true),
|
|
3635
|
+
isVisible = _f[0],
|
|
3636
|
+
setIsVisible = _f[1];
|
|
3637
|
+
var handleDismiss = function handleDismiss() {
|
|
3638
|
+
setIsVisible(false);
|
|
3639
|
+
onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
|
|
3640
|
+
};
|
|
3641
|
+
if (!isVisible) {
|
|
3642
|
+
return null;
|
|
3643
|
+
}
|
|
2684
3644
|
// Get the icon for the current variant
|
|
2685
3645
|
var iconName = variantIcons[variant];
|
|
2686
3646
|
var alertIconColor = variantIconColors[variant];
|
|
@@ -2699,7 +3659,7 @@ var Alert = function Alert(_a) {
|
|
|
2699
3659
|
name: iconName,
|
|
2700
3660
|
size: "md",
|
|
2701
3661
|
iconColor: alertIconColor
|
|
2702
|
-
})), /*#__PURE__*/React.createElement(StyledContent, null, title && /*#__PURE__*/React.createElement(StyledTitle, {
|
|
3662
|
+
})), /*#__PURE__*/React.createElement(StyledContent$1, null, title && /*#__PURE__*/React.createElement(StyledTitle, {
|
|
2703
3663
|
role: "heading",
|
|
2704
3664
|
"aria-level": 6,
|
|
2705
3665
|
color: alertTitleColor
|
|
@@ -2713,18 +3673,18 @@ var Alert = function Alert(_a) {
|
|
|
2713
3673
|
})));
|
|
2714
3674
|
};
|
|
2715
3675
|
Alert.displayName = 'Alert';
|
|
2716
|
-
var templateObject_1$
|
|
3676
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7;
|
|
2717
3677
|
|
|
2718
3678
|
React.createElement;
|
|
2719
3679
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
2720
3680
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
2721
3681
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
2722
3682
|
componentId: "sc-7ouzg5-0"
|
|
2723
|
-
})(templateObject_1$
|
|
3683
|
+
})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"], ["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"])), ((_b$1 = (_a$3 = tokensData.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
|
|
2724
3684
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
2725
3685
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
2726
3686
|
componentId: "sc-7ouzg5-1"
|
|
2727
|
-
})(templateObject_2$
|
|
3687
|
+
})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n text-decoration: underline;\n color: ", ";\n }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', ((_h = (_g = tokensData.base) === null || _g === void 0 ? void 0 : _g.spacing) === null || _h === void 0 ? void 0 : _h['4']) || '1rem', ((_k = (_j = tokensData.base) === null || _j === void 0 ? void 0 : _j.spacing) === null || _k === void 0 ? void 0 : _k['4']) || '1rem', ((_m = (_l = tokensData.base) === null || _l === void 0 ? void 0 : _l.spacing) === null || _m === void 0 ? void 0 : _m['3']) || '0.75rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
|
|
2728
3688
|
var isInternalUrl = function isInternalUrl(url) {
|
|
2729
3689
|
return url.startsWith('/') && !url.startsWith('http');
|
|
2730
3690
|
};
|
|
@@ -2752,13 +3712,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
2752
3712
|
}, breadcrumb.label)));
|
|
2753
3713
|
}))));
|
|
2754
3714
|
};
|
|
2755
|
-
var templateObject_1$
|
|
3715
|
+
var templateObject_1$n, templateObject_2$i;
|
|
2756
3716
|
|
|
2757
3717
|
React.createElement;
|
|
2758
3718
|
var CardSmallStyled = styled.div.withConfig({
|
|
2759
3719
|
displayName: "CardSmall__CardSmallStyled",
|
|
2760
3720
|
componentId: "sc-jpcqvd-0"
|
|
2761
|
-
})(templateObject_1$
|
|
3721
|
+
})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n a {\n text-decoration: none;\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n width: 100%;\n height: auto;\n display: block;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n &:focus-within {\n outline: none;\n box-shadow: 0 0 0 2px ", ";\n }\n"], ["\n a {\n text-decoration: none;\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n width: 100%;\n height: auto;\n display: block;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n &:focus-within {\n outline: none;\n box-shadow: 0 0 0 2px ", ";\n }\n"])), tokensData.base.border.radius[2], tokensData.semantic.color.border.strong);
|
|
2762
3722
|
var CardSmall = function CardSmall(_a) {
|
|
2763
3723
|
var title = _a.title,
|
|
2764
3724
|
picture = _a.picture,
|
|
@@ -2800,14 +3760,14 @@ var CardSmall = function CardSmall(_a) {
|
|
|
2800
3760
|
"aria-label": title
|
|
2801
3761
|
}, content));
|
|
2802
3762
|
};
|
|
2803
|
-
var templateObject_1$
|
|
3763
|
+
var templateObject_1$m;
|
|
2804
3764
|
|
|
2805
3765
|
React.createElement;
|
|
2806
3766
|
var border$3 = tokensData.base.border;
|
|
2807
3767
|
var CardLargeStyled = styled.div.withConfig({
|
|
2808
3768
|
displayName: "CardLarge__CardLargeStyled",
|
|
2809
3769
|
componentId: "sc-1rfgdzl-0"
|
|
2810
|
-
})(templateObject_1$
|
|
3770
|
+
})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n max-width: 768px;\n\n a {\n text-decoration: none;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n width: 100%;\n }\n"], ["\n max-width: 768px;\n\n a {\n text-decoration: none;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n width: 100%;\n }\n"])), border$3.radius[6]);
|
|
2811
3771
|
var CardLarge = function CardLarge(_a) {
|
|
2812
3772
|
var title = _a.title,
|
|
2813
3773
|
excerpt = _a.excerpt,
|
|
@@ -2852,7 +3812,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
2852
3812
|
});
|
|
2853
3813
|
})))));
|
|
2854
3814
|
};
|
|
2855
|
-
var templateObject_1$
|
|
3815
|
+
var templateObject_1$l;
|
|
2856
3816
|
|
|
2857
3817
|
/**
|
|
2858
3818
|
* Hidden native checkbox input for accessibility
|
|
@@ -2864,7 +3824,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
2864
3824
|
},
|
|
2865
3825
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
2866
3826
|
componentId: "sc-1ddpctx-0"
|
|
2867
|
-
})(templateObject_1$
|
|
3827
|
+
})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n pointer-events: none;\n"], ["\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n pointer-events: none;\n"
|
|
2868
3828
|
/**
|
|
2869
3829
|
* Custom checkbox visual component
|
|
2870
3830
|
* 24px × 24px for 8px grid alignment
|
|
@@ -2881,7 +3841,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2881
3841
|
},
|
|
2882
3842
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2883
3843
|
componentId: "sc-1ddpctx-1"
|
|
2884
|
-
})(templateObject_2$
|
|
3844
|
+
})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n min-width: 20px;\n min-height: 20px;\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all 150ms ease-out;\n flex-shrink: 0;\n\n /* Hover state */\n ", ":not(:disabled):hover + & {\n border-color: ", ";\n }\n\n /* Focus state */\n ", ":focus-visible + & {\n outline: ", ";\n outline-offset: ", ";\n border-color: ", ";\n }\n\n /* Disabled state */\n ", "\n\n /* Checkmark icon */\n &::after {\n content: '';\n position: absolute;\n display: ", ";\n left: 6px;\n top: 3px;\n width: 4px;\n height: 8px;\n border: solid ", ";\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n\n /* Indeterminate icon (horizontal line) */\n &::before {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 8px;\n width: 10px;\n height: 2px;\n background-color: ", ";\n }\n"], ["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n min-width: 20px;\n min-height: 20px;\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all 150ms ease-out;\n flex-shrink: 0;\n\n /* Hover state */\n ", ":not(:disabled):hover + & {\n border-color: ", ";\n }\n\n /* Focus state */\n ", ":focus-visible + & {\n outline: ", ";\n outline-offset: ", ";\n border-color: ", ";\n }\n\n /* Disabled state */\n ", "\n\n /* Checkmark icon */\n &::after {\n content: '';\n position: absolute;\n display: ", ";\n left: 6px;\n top: 3px;\n width: 4px;\n height: 8px;\n border: solid ", ";\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n\n /* Indeterminate icon (horizontal line) */\n &::before {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 8px;\n width: 10px;\n height: 2px;\n background-color: ", ";\n }\n"
|
|
2885
3845
|
/**
|
|
2886
3846
|
* Container for checkbox with proper spacing and alignment
|
|
2887
3847
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -2914,7 +3874,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
2914
3874
|
},
|
|
2915
3875
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
2916
3876
|
componentId: "sc-1ddpctx-2"
|
|
2917
|
-
})(templateObject_3$
|
|
3877
|
+
})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 32px;\n flex-direction: ", ";\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 32px;\n flex-direction: ", ";\n user-select: none;\n"
|
|
2918
3878
|
/**
|
|
2919
3879
|
* Label text with proper typography
|
|
2920
3880
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -2931,20 +3891,20 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
2931
3891
|
},
|
|
2932
3892
|
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
2933
3893
|
componentId: "sc-1ddpctx-3"
|
|
2934
|
-
})(templateObject_4$
|
|
3894
|
+
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
2935
3895
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
2936
3896
|
});
|
|
2937
|
-
var templateObject_1$
|
|
3897
|
+
var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$c;
|
|
2938
3898
|
|
|
2939
3899
|
React.createElement;
|
|
2940
3900
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
2941
3901
|
displayName: "Checkbox__StyledFieldContainer",
|
|
2942
3902
|
componentId: "sc-vquz3v-0"
|
|
2943
|
-
})(templateObject_1$
|
|
3903
|
+
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"], ["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"])), tokensData.base.spacing[1]);
|
|
2944
3904
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
2945
3905
|
displayName: "Checkbox__StyledHelperText",
|
|
2946
3906
|
componentId: "sc-vquz3v-1"
|
|
2947
|
-
})(templateObject_2$
|
|
3907
|
+
})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-left: ", "; /* Align with label text after checkbox */\n display: block;\n"], ["\n font: ", ";\n color: ", ";\n margin-left: ", "; /* Align with label text after checkbox */\n display: block;\n"
|
|
2948
3908
|
/**
|
|
2949
3909
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2950
3910
|
*
|
|
@@ -3057,13 +4017,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
3057
4017
|
}, error));
|
|
3058
4018
|
});
|
|
3059
4019
|
Checkbox.displayName = 'Checkbox';
|
|
3060
|
-
var templateObject_1$
|
|
4020
|
+
var templateObject_1$j, templateObject_2$g;
|
|
3061
4021
|
|
|
3062
4022
|
React.createElement;
|
|
3063
4023
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
3064
4024
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
3065
4025
|
componentId: "sc-ae049w-0"
|
|
3066
|
-
})(templateObject_1$
|
|
4026
|
+
})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"], ["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"])));
|
|
3067
4027
|
var ChipGroup = function ChipGroup(_a) {
|
|
3068
4028
|
var labels = _a.labels,
|
|
3069
4029
|
_b = _a.variant,
|
|
@@ -3082,7 +4042,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
3082
4042
|
});
|
|
3083
4043
|
})));
|
|
3084
4044
|
};
|
|
3085
|
-
var templateObject_1$
|
|
4045
|
+
var templateObject_1$i;
|
|
3086
4046
|
|
|
3087
4047
|
React.createElement;
|
|
3088
4048
|
var _a$2 = tokensData.semantic,
|
|
@@ -3092,15 +4052,15 @@ var _a$2 = tokensData.semantic,
|
|
|
3092
4052
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
3093
4053
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
3094
4054
|
componentId: "sc-1p1t0kp-0"
|
|
3095
|
-
})(templateObject_1$
|
|
4055
|
+
})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n margin: ", " 0;\n position: relative;\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n margin: ", " 0;\n position: relative;\n"])), color$1.background.subtle, border$2.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$1.text["default"], spacing$2.layout.sm);
|
|
3096
4056
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
3097
4057
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
3098
4058
|
componentId: "sc-1p1t0kp-1"
|
|
3099
|
-
})(templateObject_2$
|
|
4059
|
+
})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n width: 100%;\n"], ["\n position: relative;\n display: inline-block;\n width: 100%;\n"])));
|
|
3100
4060
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
3101
4061
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
3102
4062
|
componentId: "sc-1p1t0kp-2"
|
|
3103
|
-
})(templateObject_3$
|
|
4063
|
+
})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n right: ", ";\n"], ["\n position: absolute;\n bottom: ", ";\n right: ", ";\n"])), spacing$2.layout.lg, spacing$2.layout.sm);
|
|
3104
4064
|
var CopyButton = function CopyButton(_a) {
|
|
3105
4065
|
var text = _a.text,
|
|
3106
4066
|
onCopy = _a.onCopy;
|
|
@@ -3177,7 +4137,201 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
3177
4137
|
onCopy: onCopy
|
|
3178
4138
|
}));
|
|
3179
4139
|
};
|
|
3180
|
-
var templateObject_1$
|
|
4140
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$e;
|
|
4141
|
+
|
|
4142
|
+
React.createElement;
|
|
4143
|
+
var StyledHeader = styled.div.withConfig({
|
|
4144
|
+
displayName: "DateGroup__StyledHeader",
|
|
4145
|
+
componentId: "sc-9nfm1f-0"
|
|
4146
|
+
})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n \n ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.sm, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], function (_a) {
|
|
4147
|
+
var $sticky = _a.$sticky;
|
|
4148
|
+
return $sticky && "\n position: sticky;\n top: 0;\n z-index: 10;\n box-shadow: ".concat(tokensData.base.shadow[2], ";\n ");
|
|
4149
|
+
});
|
|
4150
|
+
var StyledLeftSection = styled.div.withConfig({
|
|
4151
|
+
displayName: "DateGroup__StyledLeftSection",
|
|
4152
|
+
componentId: "sc-9nfm1f-1"
|
|
4153
|
+
})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
|
|
4154
|
+
var StyledRightSection = styled.div.withConfig({
|
|
4155
|
+
displayName: "DateGroup__StyledRightSection",
|
|
4156
|
+
componentId: "sc-9nfm1f-2"
|
|
4157
|
+
})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.md);
|
|
4158
|
+
var StyledContent = styled.div.withConfig({
|
|
4159
|
+
displayName: "DateGroup__StyledContent",
|
|
4160
|
+
componentId: "sc-9nfm1f-3"
|
|
4161
|
+
})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n /* Content area for children */\n"], ["\n /* Content area for children */\n"
|
|
4162
|
+
/**
|
|
4163
|
+
* DateGroup component
|
|
4164
|
+
*
|
|
4165
|
+
* Groups related content (typically transactions) under a formatted date header
|
|
4166
|
+
* with optional total amount and item count displays. Supports sticky headers
|
|
4167
|
+
* for scrolling lists.
|
|
4168
|
+
*
|
|
4169
|
+
* Composes: DateFormatter, MoneyDisplay, Stack, Typography
|
|
4170
|
+
*/])));
|
|
4171
|
+
/**
|
|
4172
|
+
* DateGroup component
|
|
4173
|
+
*
|
|
4174
|
+
* Groups related content (typically transactions) under a formatted date header
|
|
4175
|
+
* with optional total amount and item count displays. Supports sticky headers
|
|
4176
|
+
* for scrolling lists.
|
|
4177
|
+
*
|
|
4178
|
+
* Composes: DateFormatter, MoneyDisplay, Stack, Typography
|
|
4179
|
+
*/
|
|
4180
|
+
var DateGroup = function DateGroup(_a) {
|
|
4181
|
+
var date = _a.date,
|
|
4182
|
+
children = _a.children,
|
|
4183
|
+
_b = _a.format,
|
|
4184
|
+
format = _b === void 0 ? 'smart' : _b,
|
|
4185
|
+
_c = _a.showTotal,
|
|
4186
|
+
showTotal = _c === void 0 ? false : _c,
|
|
4187
|
+
totalAmount = _a.totalAmount,
|
|
4188
|
+
_d = _a.showCount,
|
|
4189
|
+
showCount = _d === void 0 ? false : _d,
|
|
4190
|
+
count = _a.count,
|
|
4191
|
+
_e = _a.sticky,
|
|
4192
|
+
sticky = _e === void 0 ? false : _e,
|
|
4193
|
+
_f = _a.currency,
|
|
4194
|
+
currency = _f === void 0 ? 'AUD' : _f,
|
|
4195
|
+
dataTestId = _a["data-testid"];
|
|
4196
|
+
// Determine total variant based on amount (positive = income, negative = expense)
|
|
4197
|
+
var totalVariant = totalAmount && totalAmount !== 0 ? totalAmount > 0 ? 'positive' : 'negative' : 'default';
|
|
4198
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
4199
|
+
"data-testid": dataTestId,
|
|
4200
|
+
role: "group",
|
|
4201
|
+
"aria-label": "Transactions for ".concat(date)
|
|
4202
|
+
}, /*#__PURE__*/React.createElement(StyledHeader, {
|
|
4203
|
+
$sticky: sticky,
|
|
4204
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-header") : undefined
|
|
4205
|
+
}, /*#__PURE__*/React.createElement(StyledLeftSection, null, /*#__PURE__*/React.createElement(DateFormatter, {
|
|
4206
|
+
dateString: typeof date === 'string' ? date : date.toISOString(),
|
|
4207
|
+
mode: format,
|
|
4208
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
|
|
4209
|
+
}), showCount && count !== undefined && /*#__PURE__*/React.createElement(Typography, {
|
|
4210
|
+
variant: "caption",
|
|
4211
|
+
color: "subdued",
|
|
4212
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-count") : undefined
|
|
4213
|
+
}, "(", count, " ", count === 1 ? 'item' : 'items', ")")), /*#__PURE__*/React.createElement(StyledRightSection, null, showTotal && totalAmount !== undefined && /*#__PURE__*/React.createElement(MoneyDisplay, {
|
|
4214
|
+
amount: totalAmount,
|
|
4215
|
+
currency: currency,
|
|
4216
|
+
variant: totalVariant,
|
|
4217
|
+
size: "small",
|
|
4218
|
+
weight: "medium",
|
|
4219
|
+
showSign: true,
|
|
4220
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-total") : undefined
|
|
4221
|
+
}))), /*#__PURE__*/React.createElement(StyledContent, {
|
|
4222
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-content") : undefined
|
|
4223
|
+
}, children));
|
|
4224
|
+
};
|
|
4225
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
4226
|
+
|
|
4227
|
+
React.createElement;
|
|
4228
|
+
var semantic$9 = tokensData.semantic;
|
|
4229
|
+
var StyledContainer$1 = styled.div.withConfig({
|
|
4230
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4231
|
+
return !prop.startsWith('$');
|
|
4232
|
+
},
|
|
4233
|
+
displayName: "EmptyState__StyledContainer",
|
|
4234
|
+
componentId: "sc-1u5hxh-0"
|
|
4235
|
+
})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: 400px;\n margin: 0 auto;\n padding: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: 400px;\n margin: 0 auto;\n padding: ", ";\n"])), function (_a) {
|
|
4236
|
+
var $size = _a.$size;
|
|
4237
|
+
return $size === 'small' ? semantic$9.spacing.layout['4xl'] : $size === 'large' ? semantic$9.spacing.layout['8xl'] : semantic$9.spacing.layout['6xl'];
|
|
4238
|
+
});
|
|
4239
|
+
var StyledIllustration = styled.div.withConfig({
|
|
4240
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4241
|
+
return !prop.startsWith('$');
|
|
4242
|
+
},
|
|
4243
|
+
displayName: "EmptyState__StyledIllustration",
|
|
4244
|
+
componentId: "sc-1u5hxh-1"
|
|
4245
|
+
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: ", ";\n color: ", ";\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: ", ";\n color: ", ";\n"])), function (_a) {
|
|
4246
|
+
var $size = _a.$size;
|
|
4247
|
+
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
4248
|
+
}, function (_a) {
|
|
4249
|
+
var $size = _a.$size;
|
|
4250
|
+
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
4251
|
+
}, semantic$9.spacing.layout['2xl'], function (_a) {
|
|
4252
|
+
var $variant = _a.$variant;
|
|
4253
|
+
return $variant === 'error' ? semantic$9.color.icon.error : $variant === 'success' ? semantic$9.color.icon.success : semantic$9.color.icon.subdued;
|
|
4254
|
+
});
|
|
4255
|
+
var StyledTextContainer = styled.div.withConfig({
|
|
4256
|
+
displayName: "EmptyState__StyledTextContainer",
|
|
4257
|
+
componentId: "sc-1u5hxh-2"
|
|
4258
|
+
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width: 360px;\n margin-bottom: ", ";\n"], ["\n max-width: 360px;\n margin-bottom: ", ";\n"
|
|
4259
|
+
// Map illustration type to icon name
|
|
4260
|
+
])), semantic$9.spacing.layout['2xl']);
|
|
4261
|
+
// Map illustration type to icon name
|
|
4262
|
+
var illustrationToIcon = {
|
|
4263
|
+
search: 'search',
|
|
4264
|
+
transactions: 'paper',
|
|
4265
|
+
// Placeholder - will use custom icon when available
|
|
4266
|
+
notifications: 'bell',
|
|
4267
|
+
empty: 'paper',
|
|
4268
|
+
error: 'crossCircle'
|
|
4269
|
+
};
|
|
4270
|
+
var EmptyState = function EmptyState(_a) {
|
|
4271
|
+
var _b = _a.illustration,
|
|
4272
|
+
illustration = _b === void 0 ? 'empty' : _b,
|
|
4273
|
+
customIllustration = _a.customIllustration,
|
|
4274
|
+
title = _a.title,
|
|
4275
|
+
description = _a.description,
|
|
4276
|
+
action = _a.action,
|
|
4277
|
+
secondaryAction = _a.secondaryAction,
|
|
4278
|
+
_c = _a.variant,
|
|
4279
|
+
variant = _c === void 0 ? 'default' : _c,
|
|
4280
|
+
_d = _a.size,
|
|
4281
|
+
size = _d === void 0 ? 'medium' : _d,
|
|
4282
|
+
dataTestId = _a["data-testid"];
|
|
4283
|
+
// Determine what to show for illustration
|
|
4284
|
+
var renderIllustration = function renderIllustration() {
|
|
4285
|
+
if (customIllustration) {
|
|
4286
|
+
return customIllustration;
|
|
4287
|
+
}
|
|
4288
|
+
if (illustration !== 'custom') {
|
|
4289
|
+
var iconName = illustrationToIcon[illustration];
|
|
4290
|
+
return /*#__PURE__*/React.createElement(Icon, {
|
|
4291
|
+
name: iconName,
|
|
4292
|
+
size: "2xl"
|
|
4293
|
+
});
|
|
4294
|
+
}
|
|
4295
|
+
return null;
|
|
4296
|
+
};
|
|
4297
|
+
return /*#__PURE__*/React.createElement(StyledContainer$1, {
|
|
4298
|
+
$size: size,
|
|
4299
|
+
"data-testid": dataTestId,
|
|
4300
|
+
role: "status",
|
|
4301
|
+
"aria-label": "Empty state: ".concat(title)
|
|
4302
|
+
}, /*#__PURE__*/React.createElement(StyledIllustration, {
|
|
4303
|
+
$size: size,
|
|
4304
|
+
$variant: variant,
|
|
4305
|
+
"aria-hidden": "true"
|
|
4306
|
+
}, renderIllustration()), /*#__PURE__*/React.createElement(StyledTextContainer, null, /*#__PURE__*/React.createElement(Typography, {
|
|
4307
|
+
variant: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3',
|
|
4308
|
+
color: variant === 'error' ? 'error' : 'default',
|
|
4309
|
+
as: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3'
|
|
4310
|
+
}, title), /*#__PURE__*/React.createElement("div", {
|
|
4311
|
+
style: {
|
|
4312
|
+
marginTop: semantic$9.spacing.layout.md
|
|
4313
|
+
}
|
|
4314
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
4315
|
+
variant: "body",
|
|
4316
|
+
color: "subdued"
|
|
4317
|
+
}, description))), (action || secondaryAction) && /*#__PURE__*/React.createElement(Box, {
|
|
4318
|
+
width: "100%",
|
|
4319
|
+
maxWidth: "300px"
|
|
4320
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
4321
|
+
direction: "column",
|
|
4322
|
+
gap: "sm"
|
|
4323
|
+
}, action && /*#__PURE__*/React.createElement(Button, {
|
|
4324
|
+
variant: action.variant || 'primary',
|
|
4325
|
+
onClick: action.onClick,
|
|
4326
|
+
iconName: action.icon,
|
|
4327
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-primary-action") : undefined
|
|
4328
|
+
}, action.label), secondaryAction && /*#__PURE__*/React.createElement(Button, {
|
|
4329
|
+
variant: "naked",
|
|
4330
|
+
onClick: secondaryAction.onClick,
|
|
4331
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined
|
|
4332
|
+
}, secondaryAction.label))));
|
|
4333
|
+
};
|
|
4334
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c;
|
|
3181
4335
|
|
|
3182
4336
|
React.createElement;
|
|
3183
4337
|
var _a$1 = tokensData.base,
|
|
@@ -3186,23 +4340,23 @@ var _a$1 = tokensData.base,
|
|
|
3186
4340
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
3187
4341
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
3188
4342
|
componentId: "sc-1mi4lso-0"
|
|
3189
|
-
})(templateObject_1$
|
|
4343
|
+
})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n a {\n text-decoration: none;\n }\n"], ["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n a {\n text-decoration: none;\n }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
|
|
3190
4344
|
var ImageWrapper = styled.div.withConfig({
|
|
3191
4345
|
displayName: "FeatureBlock__ImageWrapper",
|
|
3192
4346
|
componentId: "sc-1mi4lso-1"
|
|
3193
|
-
})(templateObject_2$
|
|
4347
|
+
})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n grid-column: span 12;\n\n @media (min-width: ", ") {\n grid-column: span 6;\n }\n"], ["\n grid-column: span 12;\n\n @media (min-width: ", ") {\n grid-column: span 6;\n }\n"])), tokensData.base.breakpoint.lg);
|
|
3194
4348
|
var ContentSection = styled.div.withConfig({
|
|
3195
4349
|
displayName: "FeatureBlock__ContentSection",
|
|
3196
4350
|
componentId: "sc-1mi4lso-2"
|
|
3197
|
-
})(templateObject_3$
|
|
4351
|
+
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n grid-column: span 12;\n margin-top: ", ";\n\n @media (min-width: ", ") {\n grid-column: span 6;\n margin-top: 0;\n padding-right: ", ";\n }\n\n @media (min-width: ", ") {\n padding-right: ", ";\n }\n"], ["\n grid-column: span 12;\n margin-top: ", ";\n\n @media (min-width: ", ") {\n grid-column: span 6;\n margin-top: 0;\n padding-right: ", ";\n }\n\n @media (min-width: ", ") {\n padding-right: ", ";\n }\n"])), spacing$1[6], tokensData.base.breakpoint.lg, spacing$1[8], tokensData.base.breakpoint.xl, spacing$1[24]);
|
|
3198
4352
|
var ButtonWrapper = styled.div.withConfig({
|
|
3199
4353
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
3200
4354
|
componentId: "sc-1mi4lso-3"
|
|
3201
|
-
})(templateObject_4$
|
|
4355
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
3202
4356
|
var ContentWrapper = styled.div.withConfig({
|
|
3203
4357
|
displayName: "FeatureBlock__ContentWrapper",
|
|
3204
4358
|
componentId: "sc-1mi4lso-4"
|
|
3205
|
-
})(templateObject_5$
|
|
4359
|
+
})(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n"])));
|
|
3206
4360
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
3207
4361
|
var title = _a.title,
|
|
3208
4362
|
excerpt = _a.excerpt,
|
|
@@ -3242,7 +4396,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
3242
4396
|
onClick: onReadMore
|
|
3243
4397
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
3244
4398
|
};
|
|
3245
|
-
var templateObject_1$
|
|
4399
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
|
|
3246
4400
|
|
|
3247
4401
|
React.createElement;
|
|
3248
4402
|
var _a = tokensData.base,
|
|
@@ -3257,14 +4411,14 @@ var _a = tokensData.base,
|
|
|
3257
4411
|
var DropdownContainer = styled.div.withConfig({
|
|
3258
4412
|
displayName: "Dropdown__DropdownContainer",
|
|
3259
4413
|
componentId: "sc-kz07c4-0"
|
|
3260
|
-
})(templateObject_1$
|
|
4414
|
+
})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
3261
4415
|
var DropdownTrigger = styled.button.withConfig({
|
|
3262
4416
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3263
4417
|
return !prop.startsWith('$');
|
|
3264
4418
|
},
|
|
3265
4419
|
displayName: "Dropdown__DropdownTrigger",
|
|
3266
4420
|
componentId: "sc-kz07c4-1"
|
|
3267
|
-
})(templateObject_2$
|
|
4421
|
+
})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor: ", ";\n }\n \n ", "\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor: ", ";\n }\n \n ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
|
|
3268
4422
|
var $hasError = _a.$hasError;
|
|
3269
4423
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
3270
4424
|
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
@@ -3284,7 +4438,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
3284
4438
|
},
|
|
3285
4439
|
displayName: "Dropdown__DropdownIcon",
|
|
3286
4440
|
componentId: "sc-kz07c4-2"
|
|
3287
|
-
})(templateObject_3$
|
|
4441
|
+
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-left: ", ";\n transition: transform 0.15s ease;\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n margin-left: ", ";\n transition: transform 0.15s ease;\n \n ", "\n"])), spacing[2], function (_a) {
|
|
3288
4442
|
var $isOpen = _a.$isOpen;
|
|
3289
4443
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
3290
4444
|
});
|
|
@@ -3294,7 +4448,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
3294
4448
|
},
|
|
3295
4449
|
displayName: "Dropdown__DropdownMenu",
|
|
3296
4450
|
componentId: "sc-kz07c4-3"
|
|
3297
|
-
})(templateObject_4$
|
|
4451
|
+
})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"])), zIndex[3], input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, shadow[3], spacing[1], function (_a) {
|
|
3298
4452
|
var $isOpen = _a.$isOpen;
|
|
3299
4453
|
return $isOpen ? 1 : 0;
|
|
3300
4454
|
}, function (_a) {
|
|
@@ -3310,7 +4464,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3310
4464
|
},
|
|
3311
4465
|
displayName: "Dropdown__DropdownOption",
|
|
3312
4466
|
componentId: "sc-kz07c4-4"
|
|
3313
|
-
})(templateObject_5$
|
|
4467
|
+
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color 0.15s ease;\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"], ["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color 0.15s ease;\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"])), input$1["default"].paddingY, input$1["default"].paddingX, function (_a) {
|
|
3314
4468
|
var $isSelected = _a.$isSelected,
|
|
3315
4469
|
$isFocused = _a.$isFocused;
|
|
3316
4470
|
if ($isFocused) return color.background.surface;
|
|
@@ -3320,7 +4474,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3320
4474
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
3321
4475
|
displayName: "Dropdown__StyledHelperText",
|
|
3322
4476
|
componentId: "sc-kz07c4-5"
|
|
3323
|
-
})(templateObject_6$
|
|
4477
|
+
})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography.caption, function (_a) {
|
|
3324
4478
|
var $hasError = _a.$hasError;
|
|
3325
4479
|
return $hasError ? color.text.error : color.text.subdued;
|
|
3326
4480
|
}, spacing[2]);
|
|
@@ -3487,19 +4641,19 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3487
4641
|
id: helperId
|
|
3488
4642
|
}, helperText));
|
|
3489
4643
|
};
|
|
3490
|
-
var templateObject_1$
|
|
4644
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$8;
|
|
3491
4645
|
|
|
3492
4646
|
React.createElement;
|
|
3493
|
-
var semantic$
|
|
4647
|
+
var semantic$8 = tokensData.semantic;
|
|
3494
4648
|
var StyledList = styled.ul.withConfig({
|
|
3495
4649
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3496
4650
|
return !prop.startsWith('$');
|
|
3497
4651
|
},
|
|
3498
4652
|
displayName: "List__StyledList",
|
|
3499
4653
|
componentId: "sc-1irksg5-0"
|
|
3500
|
-
})(templateObject_1$
|
|
4654
|
+
})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n \n /* Divider styles */\n ", "\n"], ["\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n \n /* Divider styles */\n ", "\n"])), function (_a) {
|
|
3501
4655
|
var $dividers = _a.$dividers;
|
|
3502
|
-
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$
|
|
4656
|
+
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$8.color.border["default"], ";\n }\n ");
|
|
3503
4657
|
});
|
|
3504
4658
|
var List = function List(_a) {
|
|
3505
4659
|
var children = _a.children,
|
|
@@ -3519,23 +4673,23 @@ var List = function List(_a) {
|
|
|
3519
4673
|
}, props), children);
|
|
3520
4674
|
};
|
|
3521
4675
|
List.displayName = 'List';
|
|
3522
|
-
var templateObject_1$
|
|
4676
|
+
var templateObject_1$c;
|
|
3523
4677
|
|
|
3524
4678
|
React.createElement;
|
|
3525
|
-
var semantic$
|
|
3526
|
-
base$
|
|
4679
|
+
var semantic$7 = tokensData.semantic,
|
|
4680
|
+
base$7 = tokensData.base;
|
|
3527
4681
|
var StyledListItem = styled.li.withConfig({
|
|
3528
4682
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3529
4683
|
return !prop.startsWith('$');
|
|
3530
4684
|
},
|
|
3531
4685
|
displayName: "ListItem__StyledListItem",
|
|
3532
4686
|
componentId: "sc-1wzzt21-0"
|
|
3533
|
-
})(templateObject_1$
|
|
4687
|
+
})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n"])), function (_a) {
|
|
3534
4688
|
var $interactive = _a.$interactive;
|
|
3535
4689
|
return $interactive && 'user-select: none;';
|
|
3536
4690
|
}, function (_a) {
|
|
3537
4691
|
var $disabled = _a.$disabled;
|
|
3538
|
-
return $disabled && "\n opacity: ".concat(base$
|
|
4692
|
+
return $disabled && "\n opacity: ".concat(base$7.opacity[50], ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
3539
4693
|
});
|
|
3540
4694
|
var StyledItemContent = styled.div.withConfig({
|
|
3541
4695
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3543,12 +4697,12 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
3543
4697
|
},
|
|
3544
4698
|
displayName: "ListItem__StyledItemContent",
|
|
3545
4699
|
componentId: "sc-1wzzt21-1"
|
|
3546
|
-
})(templateObject_2$
|
|
4700
|
+
})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color 150ms ease;\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"], ["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color 150ms ease;\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"])), semantic$7.spacing.layout.md, function (_a) {
|
|
3547
4701
|
var $spacing = _a.$spacing;
|
|
3548
|
-
return $spacing === 'compact' ? "".concat(semantic$
|
|
3549
|
-
}, base$
|
|
4702
|
+
return $spacing === 'compact' ? "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.md) : "".concat(semantic$7.spacing.layout.md, " ").concat(semantic$7.spacing.layout.lg);
|
|
4703
|
+
}, base$7.border.radius[2], function (_a) {
|
|
3550
4704
|
var $selected = _a.$selected;
|
|
3551
|
-
return $selected ? semantic$
|
|
4705
|
+
return $selected ? semantic$7.color.background['interactive-subtle'] : 'transparent';
|
|
3552
4706
|
}, function (_a) {
|
|
3553
4707
|
var $interactive = _a.$interactive,
|
|
3554
4708
|
$disabled = _a.$disabled;
|
|
@@ -3560,26 +4714,26 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
3560
4714
|
$disabled = _a.$disabled,
|
|
3561
4715
|
$selected = _a.$selected;
|
|
3562
4716
|
return !$disabled && $interactive && "\n &:hover {\n background-color: ".concat($selected ? tokensData.component.button.variants.secondary.backgroundColor : tokensData.component.button.variants.secondary.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat(tokensData.component.button.variants.naked.backgroundColor, ";\n }\n ");
|
|
3563
|
-
}, semantic$
|
|
4717
|
+
}, semantic$7.color.border.interactive);
|
|
3564
4718
|
var StyledIconContainer = styled.div.withConfig({
|
|
3565
4719
|
displayName: "ListItem__StyledIconContainer",
|
|
3566
4720
|
componentId: "sc-1wzzt21-2"
|
|
3567
|
-
})(templateObject_3$
|
|
4721
|
+
})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n"])));
|
|
3568
4722
|
var StyledTextContent = styled.div.withConfig({
|
|
3569
4723
|
displayName: "ListItem__StyledTextContent",
|
|
3570
4724
|
componentId: "sc-1wzzt21-3"
|
|
3571
|
-
})(templateObject_4$
|
|
4725
|
+
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"])), semantic$7.spacing.layout.xs);
|
|
3572
4726
|
var StyledRightContent = styled.div.withConfig({
|
|
3573
4727
|
displayName: "ListItem__StyledRightContent",
|
|
3574
4728
|
componentId: "sc-1wzzt21-4"
|
|
3575
|
-
})(templateObject_5$
|
|
4729
|
+
})(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"])), semantic$7.spacing.layout.sm);
|
|
3576
4730
|
var StyledChevronIcon = styled.div.withConfig({
|
|
3577
4731
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3578
4732
|
return !prop.startsWith('$');
|
|
3579
4733
|
},
|
|
3580
4734
|
displayName: "ListItem__StyledChevronIcon",
|
|
3581
4735
|
componentId: "sc-1wzzt21-5"
|
|
3582
|
-
})(templateObject_6$
|
|
4736
|
+
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"])), semantic$7.color.icon.subdued, function (_a) {
|
|
3583
4737
|
var $expanded = _a.$expanded;
|
|
3584
4738
|
return $expanded ? '180deg' : '0deg';
|
|
3585
4739
|
});
|
|
@@ -3589,7 +4743,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
3589
4743
|
},
|
|
3590
4744
|
displayName: "ListItem__StyledExpandedContent",
|
|
3591
4745
|
componentId: "sc-1wzzt21-6"
|
|
3592
|
-
})(templateObject_7$
|
|
4746
|
+
})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"], ["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"])), function (_a) {
|
|
3593
4747
|
var $expanded = _a.$expanded;
|
|
3594
4748
|
return $expanded ? '1000px' : '0';
|
|
3595
4749
|
}, function (_a) {
|
|
@@ -3598,7 +4752,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
3598
4752
|
}, function (_a) {
|
|
3599
4753
|
var $expanded = _a.$expanded,
|
|
3600
4754
|
$spacing = _a.$spacing;
|
|
3601
|
-
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$
|
|
4755
|
+
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.md, " ").concat(semantic$7.spacing.layout.sm, " 48px") : "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.lg, " ").concat(semantic$7.spacing.layout.md, " 60px"), ";\n background-color: ").concat(semantic$7.color.background['subtle'], ";\n border-radius: ").concat(base$7.border.radius[2], ";\n margin: 0 ").concat($spacing === 'compact' ? semantic$7.spacing.layout.md : semantic$7.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md, ";\n ");
|
|
3602
4756
|
});
|
|
3603
4757
|
var ListItem = function ListItem(_a) {
|
|
3604
4758
|
var primary = _a.primary,
|
|
@@ -3684,7 +4838,7 @@ var ListItem = function ListItem(_a) {
|
|
|
3684
4838
|
}, children));
|
|
3685
4839
|
};
|
|
3686
4840
|
ListItem.displayName = 'ListItem';
|
|
3687
|
-
var templateObject_1$
|
|
4841
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$7, templateObject_7$6;
|
|
3688
4842
|
|
|
3689
4843
|
var input = tokensData.component.input;
|
|
3690
4844
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -3693,7 +4847,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
3693
4847
|
},
|
|
3694
4848
|
displayName: "InputBase__StyledInputBase",
|
|
3695
4849
|
componentId: "sc-1bpf4e8-0"
|
|
3696
|
-
})(templateObject_1$
|
|
4850
|
+
})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: ", ";\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"], ["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: ", ";\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"
|
|
3697
4851
|
/**
|
|
3698
4852
|
* Base styled textarea with shared styling
|
|
3699
4853
|
*/])), input["default"].font, function (_a) {
|
|
@@ -3724,40 +4878,40 @@ var StyledTextAreaBase = styled.textarea.withConfig({
|
|
|
3724
4878
|
},
|
|
3725
4879
|
displayName: "InputBase__StyledTextAreaBase",
|
|
3726
4880
|
componentId: "sc-1bpf4e8-1"
|
|
3727
|
-
})(templateObject_2$
|
|
3728
|
-
var templateObject_1$
|
|
4881
|
+
})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"], ["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"])), StyledInputBase);
|
|
4882
|
+
var templateObject_1$a, templateObject_2$9;
|
|
3729
4883
|
|
|
3730
4884
|
React.createElement;
|
|
3731
|
-
var semantic$
|
|
3732
|
-
base$
|
|
4885
|
+
var semantic$6 = tokensData.semantic,
|
|
4886
|
+
base$6 = tokensData.base;
|
|
3733
4887
|
var StyledFieldContainer$2 = styled.div.withConfig({
|
|
3734
4888
|
displayName: "NumberInput__StyledFieldContainer",
|
|
3735
4889
|
componentId: "sc-qotc3w-0"
|
|
3736
|
-
})(templateObject_1$
|
|
4890
|
+
})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base$6.spacing[2]);
|
|
3737
4891
|
var StyledLabel$3 = styled.label.withConfig({
|
|
3738
4892
|
displayName: "NumberInput__StyledLabel",
|
|
3739
4893
|
componentId: "sc-qotc3w-1"
|
|
3740
|
-
})(templateObject_2$
|
|
4894
|
+
})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"])), base$6.spacing[1], semantic$6.typography.label, semantic$6.color.text["default"], semantic$6.color.text.disabled);
|
|
3741
4895
|
var StyledRequiredIndicator$2 = styled.span.withConfig({
|
|
3742
4896
|
displayName: "NumberInput__StyledRequiredIndicator",
|
|
3743
4897
|
componentId: "sc-qotc3w-2"
|
|
3744
|
-
})(templateObject_3$
|
|
3745
|
-
var StyledInputWrapper$
|
|
4898
|
+
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$6.color.text.error, base$6.fontWeight[5]);
|
|
4899
|
+
var StyledInputWrapper$2 = styled.div.withConfig({
|
|
3746
4900
|
displayName: "NumberInput__StyledInputWrapper",
|
|
3747
4901
|
componentId: "sc-qotc3w-3"
|
|
3748
|
-
})(templateObject_4$
|
|
4902
|
+
})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n"])));
|
|
3749
4903
|
var StyledNumberInput = styled(StyledInputBase).withConfig({
|
|
3750
4904
|
displayName: "NumberInput__StyledNumberInput",
|
|
3751
4905
|
componentId: "sc-qotc3w-4"
|
|
3752
|
-
})(templateObject_5$
|
|
4906
|
+
})(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"], ["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"])), base$6.spacing[10]);
|
|
3753
4907
|
var StyledStepperContainer = styled.div.withConfig({
|
|
3754
4908
|
displayName: "NumberInput__StyledStepperContainer",
|
|
3755
4909
|
componentId: "sc-qotc3w-5"
|
|
3756
|
-
})(templateObject_6$
|
|
4910
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"], ["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"])), base$6.spacing[2], base$6.spacing[2]);
|
|
3757
4911
|
var StyledHelperText$2 = styled.div.withConfig({
|
|
3758
4912
|
displayName: "NumberInput__StyledHelperText",
|
|
3759
4913
|
componentId: "sc-qotc3w-6"
|
|
3760
|
-
})(templateObject_7$
|
|
4914
|
+
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
3761
4915
|
/**
|
|
3762
4916
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
3763
4917
|
*
|
|
@@ -3780,9 +4934,9 @@ var StyledHelperText$2 = styled.div.withConfig({
|
|
|
3780
4934
|
* onChange={(newValue) => setValue(newValue)}
|
|
3781
4935
|
* />
|
|
3782
4936
|
* ```
|
|
3783
|
-
*/])), semantic$
|
|
4937
|
+
*/])), semantic$6.typography.small, function (_a) {
|
|
3784
4938
|
var $isError = _a.$isError;
|
|
3785
|
-
return $isError ? semantic$
|
|
4939
|
+
return $isError ? semantic$6.color.text.error : semantic$6.color.text.subdued;
|
|
3786
4940
|
});
|
|
3787
4941
|
/**
|
|
3788
4942
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
@@ -3923,7 +5077,7 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
3923
5077
|
"data-disabled": disabled
|
|
3924
5078
|
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$2, {
|
|
3925
5079
|
"aria-label": "required"
|
|
3926
|
-
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$
|
|
5080
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$2, null, /*#__PURE__*/React.createElement(StyledNumberInput, _extends({
|
|
3927
5081
|
ref: ref,
|
|
3928
5082
|
id: id,
|
|
3929
5083
|
type: "text",
|
|
@@ -3972,7 +5126,7 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
3972
5126
|
}, error || helperText));
|
|
3973
5127
|
});
|
|
3974
5128
|
NumberInput.displayName = 'NumberInput';
|
|
3975
|
-
var templateObject_1$
|
|
5129
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$7, templateObject_5$6, templateObject_6$6, templateObject_7$5;
|
|
3976
5130
|
|
|
3977
5131
|
React.createElement;
|
|
3978
5132
|
var PageTitleStyled = styled.div.withConfig({
|
|
@@ -3981,7 +5135,7 @@ var PageTitleStyled = styled.div.withConfig({
|
|
|
3981
5135
|
},
|
|
3982
5136
|
displayName: "PageTitle__PageTitleStyled",
|
|
3983
5137
|
componentId: "sc-16h256f-0"
|
|
3984
|
-
})(templateObject_1$
|
|
5138
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
|
|
3985
5139
|
var $hasBackButton = _a.$hasBackButton;
|
|
3986
5140
|
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
3987
5141
|
});
|
|
@@ -4008,38 +5162,38 @@ var PageTitle = function PageTitle(_a) {
|
|
|
4008
5162
|
color: "subdued"
|
|
4009
5163
|
}, subtitle)));
|
|
4010
5164
|
};
|
|
4011
|
-
var templateObject_1$
|
|
5165
|
+
var templateObject_1$8;
|
|
4012
5166
|
|
|
4013
5167
|
React.createElement;
|
|
4014
|
-
var semantic$
|
|
4015
|
-
base$
|
|
5168
|
+
var semantic$5 = tokensData.semantic,
|
|
5169
|
+
base$5 = tokensData.base;
|
|
4016
5170
|
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
4017
5171
|
displayName: "PasswordField__StyledFieldContainer",
|
|
4018
5172
|
componentId: "sc-1p15zk0-0"
|
|
4019
|
-
})(templateObject_1$
|
|
5173
|
+
})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base$5.spacing[2]);
|
|
4020
5174
|
var StyledLabel$2 = styled.label.withConfig({
|
|
4021
5175
|
displayName: "PasswordField__StyledLabel",
|
|
4022
5176
|
componentId: "sc-1p15zk0-1"
|
|
4023
|
-
})(templateObject_2$
|
|
5177
|
+
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"])), base$5.spacing[1], semantic$5.typography.label, semantic$5.color.text["default"], semantic$5.color.text.disabled);
|
|
4024
5178
|
var StyledRequiredIndicator$1 = styled.span.withConfig({
|
|
4025
5179
|
displayName: "PasswordField__StyledRequiredIndicator",
|
|
4026
5180
|
componentId: "sc-1p15zk0-2"
|
|
4027
|
-
})(templateObject_3$
|
|
5181
|
+
})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$5.color.text.error, base$5.fontWeight[5]);
|
|
4028
5182
|
var StyledHelperText$1 = styled.div.withConfig({
|
|
4029
5183
|
displayName: "PasswordField__StyledHelperText",
|
|
4030
5184
|
componentId: "sc-1p15zk0-3"
|
|
4031
|
-
})(templateObject_4$
|
|
5185
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), semantic$5.typography.caption, function (_a) {
|
|
4032
5186
|
var $hasError = _a.$hasError;
|
|
4033
|
-
return $hasError ? semantic$
|
|
5187
|
+
return $hasError ? semantic$5.color.text.error : semantic$5.color.text.subdued;
|
|
4034
5188
|
});
|
|
4035
|
-
var StyledInputWrapper = styled.div.withConfig({
|
|
5189
|
+
var StyledInputWrapper$1 = styled.div.withConfig({
|
|
4036
5190
|
displayName: "PasswordField__StyledInputWrapper",
|
|
4037
5191
|
componentId: "sc-1p15zk0-4"
|
|
4038
|
-
})(templateObject_5$
|
|
5192
|
+
})(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
4039
5193
|
var StyledToggleButton = styled.div.withConfig({
|
|
4040
5194
|
displayName: "PasswordField__StyledToggleButton",
|
|
4041
5195
|
componentId: "sc-1p15zk0-5"
|
|
4042
|
-
})(templateObject_6$
|
|
5196
|
+
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n"], ["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n"
|
|
4043
5197
|
/**
|
|
4044
5198
|
* PasswordField component for secure password input with visibility toggle
|
|
4045
5199
|
*
|
|
@@ -4051,7 +5205,7 @@ var StyledToggleButton = styled.div.withConfig({
|
|
|
4051
5205
|
* required
|
|
4052
5206
|
* />
|
|
4053
5207
|
* ```
|
|
4054
|
-
*/])), base$
|
|
5208
|
+
*/])), base$5.spacing[2]);
|
|
4055
5209
|
/**
|
|
4056
5210
|
* PasswordField component for secure password input with visibility toggle
|
|
4057
5211
|
*
|
|
@@ -4097,7 +5251,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
4097
5251
|
"data-disabled": disabled
|
|
4098
5252
|
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$1, {
|
|
4099
5253
|
"aria-label": "required"
|
|
4100
|
-
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper, null, /*#__PURE__*/React.createElement(StyledInputBase, _extends({
|
|
5254
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$1, null, /*#__PURE__*/React.createElement(StyledInputBase, _extends({
|
|
4101
5255
|
ref: ref,
|
|
4102
5256
|
id: id,
|
|
4103
5257
|
type: showPassword ? 'text' : 'password',
|
|
@@ -4132,27 +5286,364 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
4132
5286
|
}, helperText));
|
|
4133
5287
|
});
|
|
4134
5288
|
PasswordField.displayName = 'PasswordField';
|
|
4135
|
-
var templateObject_1$
|
|
5289
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$5;
|
|
4136
5290
|
|
|
4137
5291
|
React.createElement;
|
|
4138
|
-
var semantic$
|
|
4139
|
-
base$
|
|
5292
|
+
var semantic$4 = tokensData.semantic,
|
|
5293
|
+
base$4 = tokensData.base;
|
|
5294
|
+
var StyledSearchContainer = styled.div.withConfig({
|
|
5295
|
+
displayName: "SearchField__StyledSearchContainer",
|
|
5296
|
+
componentId: "sc-qhz9i8-0"
|
|
5297
|
+
})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
5298
|
+
var StyledInputWrapper = styled.div.withConfig({
|
|
5299
|
+
displayName: "SearchField__StyledInputWrapper",
|
|
5300
|
+
componentId: "sc-qhz9i8-1"
|
|
5301
|
+
})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], semantic$4.color.background.subtle, base$4.border.width[1], semantic$4.color.border["default"], base$4.border.radius[3], semantic$4.motion.hover, function (props) {
|
|
5302
|
+
return props.$isFocused && "\n border-color: ".concat(semantic$4.color.border.interactive, ";\n box-shadow: 0 0 0 ").concat(base$4.border.width[2], " ").concat(semantic$4.color.background['interactive-subtle'], ";\n ");
|
|
5303
|
+
}, function (props) {
|
|
5304
|
+
return props.$disabled && "\n background-color: ".concat(semantic$4.color.background.disabled, ";\n cursor: not-allowed;\n ");
|
|
5305
|
+
}, semantic$4.color.border.strong);
|
|
5306
|
+
var StyledInput = styled.input.withConfig({
|
|
5307
|
+
displayName: "SearchField__StyledInput",
|
|
5308
|
+
componentId: "sc-qhz9i8-2"
|
|
5309
|
+
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n \n &::placeholder {\n color: ", ";\n }\n \n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n flex: 1;\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n \n &::placeholder {\n color: ", ";\n }\n \n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"])), semantic$4.typography.body, semantic$4.color.text["default"], semantic$4.color.text.subdued, semantic$4.color.text.disabled);
|
|
5310
|
+
var StyledClearButton = styled.button.withConfig({
|
|
5311
|
+
displayName: "SearchField__StyledClearButton",
|
|
5312
|
+
componentId: "sc-qhz9i8-3"
|
|
5313
|
+
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"])), base$4.spacing[1], semantic$4.color.icon.subdued, base$4.border.radius[2], semantic$4.motion.hover, semantic$4.color.icon["default"], semantic$4.color.background.surface, base$4.border.width[2], semantic$4.color.border.strong, base$4.spacing[1]);
|
|
5314
|
+
var StyledSuggestionsList = styled.ul.withConfig({
|
|
5315
|
+
displayName: "SearchField__StyledSuggestionsList",
|
|
5316
|
+
componentId: "sc-qhz9i8-4"
|
|
5317
|
+
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: 300px;\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: 1000;\n"], ["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: 300px;\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: 1000;\n"])), base$4.spacing[1], semantic$4.color.background.subtle, base$4.border.width[1], semantic$4.color.border["default"], base$4.border.radius[3], base$4.shadow[3], base$4.spacing[1]);
|
|
5318
|
+
var StyledSuggestionItem = styled.li.withConfig({
|
|
5319
|
+
displayName: "SearchField__StyledSuggestionItem",
|
|
5320
|
+
componentId: "sc-qhz9i8-5"
|
|
5321
|
+
})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n &:hover {\n background-color: ", ";\n }\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n &:hover {\n background-color: ", ";\n }\n \n ", "\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], semantic$4.motion.hover, function (props) {
|
|
5322
|
+
return props.$isHighlighted && "\n background-color: ".concat(semantic$4.color.background['interactive-subtle'], ";\n ");
|
|
5323
|
+
}, semantic$4.color.background['interactive-subtle'], function (props) {
|
|
5324
|
+
return props.$isRecent && "\n color: ".concat(semantic$4.color.text.subdued, ";\n ");
|
|
5325
|
+
});
|
|
5326
|
+
var StyledSectionHeader = styled.div.withConfig({
|
|
5327
|
+
displayName: "SearchField__StyledSectionHeader",
|
|
5328
|
+
componentId: "sc-qhz9i8-6"
|
|
5329
|
+
})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"], ["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.caption, semantic$4.color.text.subdued, base$4.letterSpacing[4]);
|
|
5330
|
+
var StyledClearRecent = styled.button.withConfig({
|
|
5331
|
+
displayName: "SearchField__StyledClearRecent",
|
|
5332
|
+
componentId: "sc-qhz9i8-7"
|
|
5333
|
+
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n cursor: pointer;\n width: 100%;\n text-align: left;\n transition: ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n"], ["\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n cursor: pointer;\n width: 100%;\n text-align: left;\n transition: ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.small, semantic$4.color.text.interactive, semantic$4.motion.hover, semantic$4.color.background['interactive-subtle'], base$4.border.width[2], semantic$4.color.border.strong, base$4.spacing[1]);
|
|
5334
|
+
var debounce = function debounce(func, wait) {
|
|
5335
|
+
var timeout = null;
|
|
5336
|
+
return function () {
|
|
5337
|
+
var args = [];
|
|
5338
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
5339
|
+
args[_i] = arguments[_i];
|
|
5340
|
+
}
|
|
5341
|
+
if (timeout) clearTimeout(timeout);
|
|
5342
|
+
timeout = setTimeout(function () {
|
|
5343
|
+
return func.apply(void 0, args);
|
|
5344
|
+
}, wait);
|
|
5345
|
+
};
|
|
5346
|
+
};
|
|
5347
|
+
/**
|
|
5348
|
+
* SearchField component with autocomplete and recent searches
|
|
5349
|
+
*
|
|
5350
|
+
* Provides intelligent search with debouncing, keyboard navigation,
|
|
5351
|
+
* suggestions, and recent search history. Fully accessible with ARIA.
|
|
5352
|
+
*
|
|
5353
|
+
* @example
|
|
5354
|
+
* ```tsx
|
|
5355
|
+
* const [search, setSearch] = useState('')
|
|
5356
|
+
* const [suggestions] = useState([
|
|
5357
|
+
* { id: '1', label: 'Apple', category: 'Fruit' },
|
|
5358
|
+
* { id: '2', label: 'Banana', category: 'Fruit' }
|
|
5359
|
+
* ])
|
|
5360
|
+
*
|
|
5361
|
+
* <SearchField
|
|
5362
|
+
* value={search}
|
|
5363
|
+
* onChange={setSearch}
|
|
5364
|
+
* suggestions={suggestions}
|
|
5365
|
+
* recentSearches={['coffee', 'tea']}
|
|
5366
|
+
* onSuggestionSelect={(item) => console.log('Selected:', item)}
|
|
5367
|
+
* />
|
|
5368
|
+
* ```
|
|
5369
|
+
*/
|
|
5370
|
+
var SearchField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
5371
|
+
var value = _a.value,
|
|
5372
|
+
onChange = _a.onChange,
|
|
5373
|
+
_b = _a.suggestions,
|
|
5374
|
+
suggestions = _b === void 0 ? [] : _b,
|
|
5375
|
+
_c = _a.showRecentSearches,
|
|
5376
|
+
showRecentSearches = _c === void 0 ? true : _c,
|
|
5377
|
+
_d = _a.recentSearches,
|
|
5378
|
+
recentSearches = _d === void 0 ? [] : _d,
|
|
5379
|
+
onSuggestionSelect = _a.onSuggestionSelect,
|
|
5380
|
+
onClearRecentSearches = _a.onClearRecentSearches,
|
|
5381
|
+
_e = _a.debounceMs,
|
|
5382
|
+
debounceMs = _e === void 0 ? 300 : _e,
|
|
5383
|
+
_f = _a.placeholder,
|
|
5384
|
+
placeholder = _f === void 0 ? 'Search...' : _f,
|
|
5385
|
+
_g = _a.disabled,
|
|
5386
|
+
disabled = _g === void 0 ? false : _g,
|
|
5387
|
+
_h = _a.loading,
|
|
5388
|
+
loading = _h === void 0 ? false : _h,
|
|
5389
|
+
_j = _a["aria-label"],
|
|
5390
|
+
ariaLabel = _j === void 0 ? 'Search' : _j,
|
|
5391
|
+
dataTestId = _a["data-testid"],
|
|
5392
|
+
inputProps = __rest(_a, ["value", "onChange", "suggestions", "showRecentSearches", "recentSearches", "onSuggestionSelect", "onClearRecentSearches", "debounceMs", "placeholder", "disabled", "loading", 'aria-label', 'data-testid']);
|
|
5393
|
+
var _k = React.useState(false),
|
|
5394
|
+
isFocused = _k[0],
|
|
5395
|
+
setIsFocused = _k[1];
|
|
5396
|
+
var _l = React.useState(false),
|
|
5397
|
+
showSuggestions = _l[0],
|
|
5398
|
+
setShowSuggestions = _l[1];
|
|
5399
|
+
var _m = React.useState(-1),
|
|
5400
|
+
highlightedIndex = _m[0],
|
|
5401
|
+
setHighlightedIndex = _m[1];
|
|
5402
|
+
var _o = React.useState(value);
|
|
5403
|
+
_o[0];
|
|
5404
|
+
var setDebouncedValue = _o[1];
|
|
5405
|
+
var inputRef = React.useRef(null);
|
|
5406
|
+
var listRef = React.useRef(null);
|
|
5407
|
+
// Combine refs
|
|
5408
|
+
React.useEffect(function () {
|
|
5409
|
+
if (ref) {
|
|
5410
|
+
if (typeof ref === 'function') {
|
|
5411
|
+
ref(inputRef.current);
|
|
5412
|
+
} else {
|
|
5413
|
+
ref.current = inputRef.current;
|
|
5414
|
+
}
|
|
5415
|
+
}
|
|
5416
|
+
}, [ref]);
|
|
5417
|
+
// Debounced search
|
|
5418
|
+
var debouncedOnChange = React.useMemo(function () {
|
|
5419
|
+
return debounce(function (newValue) {
|
|
5420
|
+
setDebouncedValue(newValue);
|
|
5421
|
+
}, debounceMs);
|
|
5422
|
+
}, [debounceMs]);
|
|
5423
|
+
React.useEffect(function () {
|
|
5424
|
+
debouncedOnChange(value);
|
|
5425
|
+
}, [value, debouncedOnChange]);
|
|
5426
|
+
// Combined list of suggestions and recent searches
|
|
5427
|
+
var displayItems = React.useMemo(function () {
|
|
5428
|
+
var items = [];
|
|
5429
|
+
if (value.trim()) {
|
|
5430
|
+
// Show matching suggestions
|
|
5431
|
+
suggestions.forEach(function (s) {
|
|
5432
|
+
return items.push({
|
|
5433
|
+
type: 'suggestion',
|
|
5434
|
+
data: s
|
|
5435
|
+
});
|
|
5436
|
+
});
|
|
5437
|
+
} else if (showRecentSearches && recentSearches.length > 0) {
|
|
5438
|
+
// Show recent searches when empty
|
|
5439
|
+
recentSearches.forEach(function (r) {
|
|
5440
|
+
return items.push({
|
|
5441
|
+
type: 'recent',
|
|
5442
|
+
data: r
|
|
5443
|
+
});
|
|
5444
|
+
});
|
|
5445
|
+
if (onClearRecentSearches) {
|
|
5446
|
+
items.push({
|
|
5447
|
+
type: 'clear',
|
|
5448
|
+
data: 'clear'
|
|
5449
|
+
});
|
|
5450
|
+
}
|
|
5451
|
+
}
|
|
5452
|
+
return items;
|
|
5453
|
+
}, [value, suggestions, recentSearches, showRecentSearches, onClearRecentSearches]);
|
|
5454
|
+
var handleInputChange = function handleInputChange(e) {
|
|
5455
|
+
var newValue = e.target.value;
|
|
5456
|
+
onChange(newValue);
|
|
5457
|
+
setShowSuggestions(true);
|
|
5458
|
+
setHighlightedIndex(-1);
|
|
5459
|
+
};
|
|
5460
|
+
var handleFocus = function handleFocus(e) {
|
|
5461
|
+
var _a;
|
|
5462
|
+
setIsFocused(true);
|
|
5463
|
+
setShowSuggestions(true);
|
|
5464
|
+
(_a = inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
|
|
5465
|
+
};
|
|
5466
|
+
var handleBlur = function handleBlur(e) {
|
|
5467
|
+
var _a;
|
|
5468
|
+
// Delay to allow click events on suggestions
|
|
5469
|
+
setTimeout(function () {
|
|
5470
|
+
setIsFocused(false);
|
|
5471
|
+
setShowSuggestions(false);
|
|
5472
|
+
setHighlightedIndex(-1);
|
|
5473
|
+
}, 200);
|
|
5474
|
+
(_a = inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
|
|
5475
|
+
};
|
|
5476
|
+
var handleSuggestionClick = function handleSuggestionClick(item) {
|
|
5477
|
+
var _a;
|
|
5478
|
+
if (item.type === 'clear') {
|
|
5479
|
+
onClearRecentSearches === null || onClearRecentSearches === void 0 ? void 0 : onClearRecentSearches();
|
|
5480
|
+
return;
|
|
5481
|
+
}
|
|
5482
|
+
var suggestion = item.data;
|
|
5483
|
+
if (typeof suggestion === 'string') {
|
|
5484
|
+
onChange(suggestion);
|
|
5485
|
+
onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(suggestion);
|
|
5486
|
+
} else {
|
|
5487
|
+
onChange(suggestion.label);
|
|
5488
|
+
onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(suggestion);
|
|
5489
|
+
}
|
|
5490
|
+
setShowSuggestions(false);
|
|
5491
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
5492
|
+
};
|
|
5493
|
+
var handleClear = function handleClear() {
|
|
5494
|
+
var _a;
|
|
5495
|
+
onChange('');
|
|
5496
|
+
setShowSuggestions(false);
|
|
5497
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
5498
|
+
};
|
|
5499
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
5500
|
+
var _a;
|
|
5501
|
+
if (!showSuggestions || displayItems.length === 0) return;
|
|
5502
|
+
switch (e.key) {
|
|
5503
|
+
case 'ArrowDown':
|
|
5504
|
+
e.preventDefault();
|
|
5505
|
+
setHighlightedIndex(function (prev) {
|
|
5506
|
+
return prev < displayItems.length - 1 ? prev + 1 : prev;
|
|
5507
|
+
});
|
|
5508
|
+
break;
|
|
5509
|
+
case 'ArrowUp':
|
|
5510
|
+
e.preventDefault();
|
|
5511
|
+
setHighlightedIndex(function (prev) {
|
|
5512
|
+
return prev > 0 ? prev - 1 : -1;
|
|
5513
|
+
});
|
|
5514
|
+
break;
|
|
5515
|
+
case 'Enter':
|
|
5516
|
+
e.preventDefault();
|
|
5517
|
+
if (highlightedIndex >= 0 && highlightedIndex < displayItems.length) {
|
|
5518
|
+
handleSuggestionClick(displayItems[highlightedIndex]);
|
|
5519
|
+
}
|
|
5520
|
+
break;
|
|
5521
|
+
case 'Escape':
|
|
5522
|
+
e.preventDefault();
|
|
5523
|
+
setShowSuggestions(false);
|
|
5524
|
+
setHighlightedIndex(-1);
|
|
5525
|
+
break;
|
|
5526
|
+
}
|
|
5527
|
+
(_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
|
|
5528
|
+
};
|
|
5529
|
+
// Scroll highlighted item into view
|
|
5530
|
+
React.useEffect(function () {
|
|
5531
|
+
var _a;
|
|
5532
|
+
if (highlightedIndex >= 0 && listRef.current) {
|
|
5533
|
+
var items = listRef.current.querySelectorAll('li');
|
|
5534
|
+
(_a = items[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
5535
|
+
block: 'nearest'
|
|
5536
|
+
});
|
|
5537
|
+
}
|
|
5538
|
+
}, [highlightedIndex]);
|
|
5539
|
+
var showClearButton = value.length > 0 && !disabled;
|
|
5540
|
+
var hasItems = displayItems.length > 0;
|
|
5541
|
+
return /*#__PURE__*/React.createElement(StyledSearchContainer, {
|
|
5542
|
+
$isFocused: isFocused,
|
|
5543
|
+
$disabled: disabled,
|
|
5544
|
+
"data-testid": dataTestId
|
|
5545
|
+
}, /*#__PURE__*/React.createElement(StyledInputWrapper, {
|
|
5546
|
+
$isFocused: isFocused,
|
|
5547
|
+
$disabled: disabled
|
|
5548
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
5549
|
+
name: "search",
|
|
5550
|
+
size: "sm",
|
|
5551
|
+
iconColor: "subdued",
|
|
5552
|
+
"aria-hidden": "true"
|
|
5553
|
+
}), /*#__PURE__*/React.createElement(StyledInput, _extends({
|
|
5554
|
+
ref: inputRef,
|
|
5555
|
+
type: "text",
|
|
5556
|
+
value: value,
|
|
5557
|
+
onChange: handleInputChange,
|
|
5558
|
+
onFocus: handleFocus,
|
|
5559
|
+
onBlur: handleBlur,
|
|
5560
|
+
onKeyDown: handleKeyDown,
|
|
5561
|
+
placeholder: placeholder,
|
|
5562
|
+
disabled: disabled,
|
|
5563
|
+
"aria-label": ariaLabel,
|
|
5564
|
+
"aria-autocomplete": "list",
|
|
5565
|
+
"aria-controls": showSuggestions && hasItems ? 'search-suggestions' : undefined,
|
|
5566
|
+
"aria-expanded": showSuggestions && hasItems,
|
|
5567
|
+
"aria-activedescendant": highlightedIndex >= 0 ? "suggestion-".concat(highlightedIndex) : undefined,
|
|
5568
|
+
role: "combobox"
|
|
5569
|
+
}, inputProps)), loading && /*#__PURE__*/React.createElement(Icon, {
|
|
5570
|
+
name: "refresh",
|
|
5571
|
+
size: "sm",
|
|
5572
|
+
iconColor: "subdued",
|
|
5573
|
+
"aria-label": "Loading"
|
|
5574
|
+
}), showClearButton && /*#__PURE__*/React.createElement(StyledClearButton, {
|
|
5575
|
+
type: "button",
|
|
5576
|
+
onClick: handleClear,
|
|
5577
|
+
"aria-label": "Clear search",
|
|
5578
|
+
tabIndex: -1
|
|
5579
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
5580
|
+
name: "close",
|
|
5581
|
+
size: "xs"
|
|
5582
|
+
}))), showSuggestions && hasItems && /*#__PURE__*/React.createElement(StyledSuggestionsList, {
|
|
5583
|
+
ref: listRef,
|
|
5584
|
+
id: "search-suggestions",
|
|
5585
|
+
role: "listbox"
|
|
5586
|
+
}, !value.trim() && showRecentSearches && recentSearches.length > 0 && /*#__PURE__*/React.createElement(StyledSectionHeader, null, "Recent Searches"), displayItems.map(function (item, index) {
|
|
5587
|
+
if (item.type === 'clear') {
|
|
5588
|
+
return /*#__PURE__*/React.createElement(StyledClearRecent, {
|
|
5589
|
+
key: "clear",
|
|
5590
|
+
type: "button",
|
|
5591
|
+
onClick: function onClick() {
|
|
5592
|
+
return handleSuggestionClick(item);
|
|
5593
|
+
}
|
|
5594
|
+
}, "Clear recent searches");
|
|
5595
|
+
}
|
|
5596
|
+
var suggestion = item.data;
|
|
5597
|
+
var isString = typeof suggestion === 'string';
|
|
5598
|
+
var label = isString ? suggestion : suggestion.label;
|
|
5599
|
+
var description = !isString ? suggestion.description : undefined;
|
|
5600
|
+
return /*#__PURE__*/React.createElement(StyledSuggestionItem, {
|
|
5601
|
+
key: isString ? suggestion : suggestion.id,
|
|
5602
|
+
id: "suggestion-".concat(index),
|
|
5603
|
+
role: "option",
|
|
5604
|
+
"aria-selected": index === highlightedIndex,
|
|
5605
|
+
$isHighlighted: index === highlightedIndex,
|
|
5606
|
+
$isRecent: item.type === 'recent',
|
|
5607
|
+
onClick: function onClick() {
|
|
5608
|
+
return handleSuggestionClick(item);
|
|
5609
|
+
}
|
|
5610
|
+
}, item.type === 'recent' && /*#__PURE__*/React.createElement(Icon, {
|
|
5611
|
+
name: "refresh",
|
|
5612
|
+
size: "xs",
|
|
5613
|
+
"aria-hidden": "true"
|
|
5614
|
+
}), /*#__PURE__*/React.createElement(Stack, {
|
|
5615
|
+
direction: "column",
|
|
5616
|
+
gap: "none"
|
|
5617
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
5618
|
+
variant: "body"
|
|
5619
|
+
}, label), description && /*#__PURE__*/React.createElement(Typography, {
|
|
5620
|
+
variant: "caption",
|
|
5621
|
+
color: "subdued"
|
|
5622
|
+
}, description)));
|
|
5623
|
+
})));
|
|
5624
|
+
});
|
|
5625
|
+
SearchField.displayName = 'SearchField';
|
|
5626
|
+
var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4;
|
|
5627
|
+
|
|
5628
|
+
React.createElement;
|
|
5629
|
+
var semantic$3 = tokensData.semantic,
|
|
5630
|
+
base$3 = tokensData.base;
|
|
4140
5631
|
// Fade in animation for overlay
|
|
4141
|
-
var fadeIn = styled.keyframes(templateObject_1$
|
|
5632
|
+
var fadeIn = styled.keyframes(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"
|
|
4142
5633
|
// Slide animations for each position
|
|
4143
5634
|
])));
|
|
4144
5635
|
// Slide animations for each position
|
|
4145
|
-
var slideInRight = styled.keyframes(templateObject_2$
|
|
4146
|
-
var slideInLeft = styled.keyframes(templateObject_3$
|
|
4147
|
-
var slideInTop = styled.keyframes(templateObject_4$
|
|
4148
|
-
var slideInBottom = styled.keyframes(templateObject_5$
|
|
5636
|
+
var slideInRight = styled.keyframes(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n"], ["\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n"])));
|
|
5637
|
+
var slideInLeft = styled.keyframes(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n"], ["\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n"])));
|
|
5638
|
+
var slideInTop = styled.keyframes(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n"], ["\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n"])));
|
|
5639
|
+
var slideInBottom = styled.keyframes(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"], ["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"])));
|
|
4149
5640
|
var StyledOverlay = styled.div.withConfig({
|
|
4150
5641
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4151
5642
|
return !prop.startsWith('$');
|
|
4152
5643
|
},
|
|
4153
5644
|
displayName: "Sheet__StyledOverlay",
|
|
4154
5645
|
componentId: "sc-8abisx-0"
|
|
4155
|
-
})(templateObject_7$
|
|
5646
|
+
})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n ", "\n display: ", ";\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n ", "\n display: ", ";\n"])), styled.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["animation: ", " 200ms ease-in-out;"], ["animation: ", " 200ms ease-in-out;"])), fadeIn), function (_a) {
|
|
4156
5647
|
var $isOpen = _a.$isOpen;
|
|
4157
5648
|
return $isOpen ? 'block' : 'none';
|
|
4158
5649
|
});
|
|
@@ -4162,25 +5653,25 @@ var StyledSheet = styled.div.withConfig({
|
|
|
4162
5653
|
},
|
|
4163
5654
|
displayName: "Sheet__StyledSheet",
|
|
4164
5655
|
componentId: "sc-8abisx-1"
|
|
4165
|
-
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"], ["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), semantic$
|
|
5656
|
+
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"], ["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), semantic$3.color.background["default"], base$3.shadow[4], function (_a) {
|
|
4166
5657
|
var $position = _a.$position,
|
|
4167
5658
|
$variant = _a.$variant,
|
|
4168
5659
|
$width = _a.$width,
|
|
4169
5660
|
$height = _a.$height;
|
|
4170
5661
|
var isDrawer = $variant === 'drawer';
|
|
4171
|
-
var margin = isDrawer ? base$
|
|
4172
|
-
var borderRadius = isDrawer ? base$
|
|
5662
|
+
var margin = isDrawer ? base$3.spacing[4] : '0';
|
|
5663
|
+
var borderRadius = isDrawer ? base$3.border.radius[3] : '0';
|
|
4173
5664
|
switch ($position) {
|
|
4174
5665
|
case 'right':
|
|
4175
|
-
return styled.css(templateObject_8$
|
|
5666
|
+
return styled.css(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n top: ", ";\n right: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: ", " 0 0 ", ";\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n right: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: ", " 0 0 ", ";\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $width, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInRight);
|
|
4176
5667
|
case 'left':
|
|
4177
|
-
return styled.css(templateObject_9$
|
|
5668
|
+
return styled.css(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: 0 ", " ", " 0;\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n left: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: 0 ", " ", " 0;\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $width, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInLeft);
|
|
4178
5669
|
case 'top':
|
|
4179
|
-
return styled.css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$
|
|
5670
|
+
return styled.css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInTop);
|
|
4180
5671
|
case 'bottom':
|
|
4181
|
-
return styled.css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "], ["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$
|
|
5672
|
+
return styled.css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "], ["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInBottom);
|
|
4182
5673
|
}
|
|
4183
|
-
}, base$
|
|
5674
|
+
}, base$3.spacing[2], semantic$3.color.background.subtle, semantic$3.color.border["default"], base$3.border.radius.circle, semantic$3.color.border.strong);
|
|
4184
5675
|
var StyledSheetContent = styled.div.withConfig({
|
|
4185
5676
|
displayName: "Sheet__StyledSheetContent",
|
|
4186
5677
|
componentId: "sc-8abisx-2"
|
|
@@ -4210,7 +5701,7 @@ var StyledSheetContent = styled.div.withConfig({
|
|
|
4210
5701
|
* <h2>Mobile Menu</h2>
|
|
4211
5702
|
* </Sheet>
|
|
4212
5703
|
* ```
|
|
4213
|
-
*/])), base$
|
|
5704
|
+
*/])), base$3.spacing[6]);
|
|
4214
5705
|
/**
|
|
4215
5706
|
* Sheet component for side panels and drawers
|
|
4216
5707
|
*
|
|
@@ -4333,70 +5824,70 @@ var Sheet = function Sheet(_a) {
|
|
|
4333
5824
|
}, /*#__PURE__*/React.createElement(StyledSheetContent, null, children)));
|
|
4334
5825
|
};
|
|
4335
5826
|
Sheet.displayName = 'Sheet';
|
|
4336
|
-
var templateObject_1$
|
|
5827
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
|
|
4337
5828
|
|
|
4338
5829
|
React.createElement;
|
|
4339
|
-
var semantic$
|
|
4340
|
-
base$
|
|
5830
|
+
var semantic$2 = tokensData.semantic,
|
|
5831
|
+
base$2 = tokensData.base;
|
|
4341
5832
|
var StyledSliderContainer = styled.div.withConfig({
|
|
4342
5833
|
displayName: "Slider__StyledSliderContainer",
|
|
4343
5834
|
componentId: "sc-6mh2d4-0"
|
|
4344
|
-
})(templateObject_1$
|
|
5835
|
+
})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap:0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap:0;\n width: 100%;\n"])));
|
|
4345
5836
|
var StyledLabel$1 = styled.label.withConfig({
|
|
4346
5837
|
displayName: "Slider__StyledLabel",
|
|
4347
5838
|
componentId: "sc-6mh2d4-1"
|
|
4348
|
-
})(templateObject_2$
|
|
5839
|
+
})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"])), semantic$2.typography.label, function (_a) {
|
|
4349
5840
|
var $disabled = _a.$disabled;
|
|
4350
|
-
return $disabled ? semantic$
|
|
4351
|
-
}, semantic$
|
|
5841
|
+
return $disabled ? semantic$2.color.text.disabled : semantic$2.color.text["default"];
|
|
5842
|
+
}, semantic$2.spacing.layout.lg);
|
|
4352
5843
|
var StyledSliderTrackContainer = styled.div.withConfig({
|
|
4353
5844
|
displayName: "Slider__StyledSliderTrackContainer",
|
|
4354
5845
|
componentId: "sc-6mh2d4-2"
|
|
4355
|
-
})(templateObject_3$
|
|
5846
|
+
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"])), base$2.spacing[10]);
|
|
4356
5847
|
var StyledTrack = styled.div.withConfig({
|
|
4357
5848
|
displayName: "Slider__StyledTrack",
|
|
4358
5849
|
componentId: "sc-6mh2d4-3"
|
|
4359
|
-
})(templateObject_4$
|
|
5850
|
+
})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n cursor: ", ";\n"], ["\n position: relative;\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n cursor: ", ";\n"])), base$2.spacing[1], function (_a) {
|
|
4360
5851
|
var $disabled = _a.$disabled;
|
|
4361
|
-
return $disabled ? semantic$
|
|
4362
|
-
}, base$
|
|
5852
|
+
return $disabled ? semantic$2.color.background.disabled : semantic$2.color.border["default"];
|
|
5853
|
+
}, base$2.border.radius.circle, function (_a) {
|
|
4363
5854
|
var $disabled = _a.$disabled;
|
|
4364
5855
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
4365
5856
|
});
|
|
4366
5857
|
var StyledTrackFill = styled.div.withConfig({
|
|
4367
5858
|
displayName: "Slider__StyledTrackFill",
|
|
4368
5859
|
componentId: "sc-6mh2d4-4"
|
|
4369
|
-
})(templateObject_5$
|
|
5860
|
+
})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"], ["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"])), function (_a) {
|
|
4370
5861
|
var $disabled = _a.$disabled;
|
|
4371
|
-
return $disabled ? semantic$
|
|
4372
|
-
}, base$
|
|
5862
|
+
return $disabled ? semantic$2.color.border["default"] : semantic$2.color.background.emphasis;
|
|
5863
|
+
}, base$2.border.radius.circle);
|
|
4373
5864
|
var StyledThumb = styled.div.withConfig({
|
|
4374
5865
|
displayName: "Slider__StyledThumb",
|
|
4375
5866
|
componentId: "sc-6mh2d4-5"
|
|
4376
|
-
})(templateObject_6$
|
|
5867
|
+
})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"], ["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"])), base$2.spacing[5], base$2.spacing[5], semantic$2.spacing.layout.sm, function (_a) {
|
|
4377
5868
|
var $disabled = _a.$disabled;
|
|
4378
|
-
return $disabled ? semantic$
|
|
4379
|
-
}, base$
|
|
5869
|
+
return $disabled ? semantic$2.color.background.disabled : semantic$2.color.background.subtle;
|
|
5870
|
+
}, base$2.border.width[2], function (_a) {
|
|
4380
5871
|
var $disabled = _a.$disabled;
|
|
4381
|
-
return $disabled ? semantic$
|
|
4382
|
-
}, base$
|
|
5872
|
+
return $disabled ? semantic$2.color.border["default"] : semantic$2.color.background.emphasis;
|
|
5873
|
+
}, base$2.border.radius.circle, function (_a) {
|
|
4383
5874
|
var $disabled = _a.$disabled;
|
|
4384
5875
|
return $disabled ? 'not-allowed' : 'grab';
|
|
4385
|
-
}, semantic$
|
|
5876
|
+
}, semantic$2.motion.transition.fast, base$2.shadow[2], base$2.shadow[3], base$2.border.width[2], semantic$2.color.border.interactive, base$2.spacing[1], function (_a) {
|
|
4386
5877
|
var $active = _a.$active;
|
|
4387
|
-
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(base$
|
|
5878
|
+
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(base$2.shadow[4], ";\n ");
|
|
4388
5879
|
});
|
|
4389
5880
|
var StyledValueLabel = styled.div.withConfig({
|
|
4390
5881
|
displayName: "Slider__StyledValueLabel",
|
|
4391
5882
|
componentId: "sc-6mh2d4-6"
|
|
4392
|
-
})(templateObject_7$
|
|
5883
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"], ["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"])), base$2.spacing[8], semantic$2.spacing.layout.sm, base$2.spacing[1], base$2.spacing[2], semantic$2.color.background.emphasis, semantic$2.color.text.inverse, semantic$2.typography.caption, base$2.border.radius[2], function (_a) {
|
|
4393
5884
|
var $disabled = _a.$disabled;
|
|
4394
|
-
return $disabled ? base$
|
|
4395
|
-
}, base$
|
|
5885
|
+
return $disabled ? base$2.opacity[50] : base$2.opacity[100];
|
|
5886
|
+
}, base$2.spacing[1], base$2.spacing[1], base$2.spacing[1], semantic$2.color.background.emphasis);
|
|
4396
5887
|
var StyledMinMaxLabels = styled.div.withConfig({
|
|
4397
5888
|
displayName: "Slider__StyledMinMaxLabels",
|
|
4398
5889
|
componentId: "sc-6mh2d4-7"
|
|
4399
|
-
})(templateObject_8$
|
|
5890
|
+
})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"
|
|
4400
5891
|
/**
|
|
4401
5892
|
* Slider component for single value or range selection
|
|
4402
5893
|
*
|
|
@@ -4420,7 +5911,7 @@ var StyledMinMaxLabels = styled.div.withConfig({
|
|
|
4420
5911
|
* onRangeChange={(values) => console.log(values)}
|
|
4421
5912
|
* />
|
|
4422
5913
|
* ```
|
|
4423
|
-
*/])), semantic$
|
|
5914
|
+
*/])), semantic$2.typography.body, semantic$2.color.text.subdued, base$2.spacing[1]);
|
|
4424
5915
|
/**
|
|
4425
5916
|
* Slider component for single value or range selection
|
|
4426
5917
|
*
|
|
@@ -4721,7 +6212,225 @@ var Slider = function Slider(_a) {
|
|
|
4721
6212
|
}, formatValue(currentValue))))), /*#__PURE__*/React.createElement(StyledMinMaxLabels, null, /*#__PURE__*/React.createElement("span", null, formatValue(min)), /*#__PURE__*/React.createElement("span", null, formatValue(max))));
|
|
4722
6213
|
};
|
|
4723
6214
|
Slider.displayName = 'Slider';
|
|
4724
|
-
var templateObject_1$
|
|
6215
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
6216
|
+
|
|
6217
|
+
React.createElement;
|
|
6218
|
+
var semantic$1 = tokensData.semantic,
|
|
6219
|
+
base$1 = tokensData.base;
|
|
6220
|
+
var StyledTabList = styled.div.withConfig({
|
|
6221
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6222
|
+
return !prop.startsWith('$');
|
|
6223
|
+
},
|
|
6224
|
+
displayName: "TabBar__StyledTabList",
|
|
6225
|
+
componentId: "sc-1g9ib0y-0"
|
|
6226
|
+
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n border-bottom: ", ";\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n \n &::-webkit-scrollbar {\n height: 4px;\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n border-bottom: ", ";\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n \n &::-webkit-scrollbar {\n height: 4px;\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n"])), function (props) {
|
|
6227
|
+
return props.$variant === 'pills' ? base$1.spacing[2] : '0';
|
|
6228
|
+
}, function (props) {
|
|
6229
|
+
return props.$variant === 'underline' ? "".concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border.subtle) : 'none';
|
|
6230
|
+
}, semantic$1.color.background.subtle, semantic$1.color.border["default"], base$1.border.radius[2]);
|
|
6231
|
+
var StyledTab = styled.button.withConfig({
|
|
6232
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6233
|
+
return !prop.startsWith('$');
|
|
6234
|
+
},
|
|
6235
|
+
displayName: "TabBar__StyledTab",
|
|
6236
|
+
componentId: "sc-1g9ib0y-1"
|
|
6237
|
+
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /* Variant-specific styles */\n ", "\n \n /* Disabled state */\n opacity: ", ";\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n z-index: 1;\n }\n \n /* Active/pressed state */\n &:active:not(:disabled) {\n transform: translateY(1px);\n }\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /* Variant-specific styles */\n ", "\n \n /* Disabled state */\n opacity: ", ";\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n z-index: 1;\n }\n \n /* Active/pressed state */\n &:active:not(:disabled) {\n transform: translateY(1px);\n }\n"])), base$1.spacing[2], base$1.spacing[3], base$1.spacing[4], semantic$1.typography.button2, function (props) {
|
|
6238
|
+
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
6239
|
+
}, semantic$1.motion.hover, function (props) {
|
|
6240
|
+
if (props.$variant === 'pills') {
|
|
6241
|
+
return "\n border-radius: ".concat(base$1.border.radius.circle, ";\n background-color: ").concat(props.$isActive ? semantic$1.color.background.interactive : semantic$1.color.background.subtle, ";\n color: ").concat(props.$isActive ? semantic$1.color.text.inverse : semantic$1.color.text["default"], ";\n \n &:hover:not(:disabled) {\n background-color: ").concat(props.$isActive ? semantic$1.color.background['interactive-hover'] : semantic$1.color.background.surface, ";\n }\n ");
|
|
6242
|
+
}
|
|
6243
|
+
if (props.$variant === 'underline') {
|
|
6244
|
+
return "\n color: ".concat(props.$isActive ? semantic$1.color.text.interactive : semantic$1.color.text.subdued, ";\n \n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n height: ").concat(base$1.border.width[2], ";\n background-color: ").concat(props.$isActive ? semantic$1.color.background.interactive : 'transparent', ";\n transition: ").concat(semantic$1.motion.hover, ";\n }\n \n &:hover:not(:disabled) {\n color: ").concat(semantic$1.color.text.interactive, ";\n }\n ");
|
|
6245
|
+
}
|
|
6246
|
+
// default variant
|
|
6247
|
+
return "\n border-radius: ".concat(base$1.border.radius[2], " ").concat(base$1.border.radius[2], " 0 0;\n background-color: ").concat(props.$isActive ? semantic$1.color.background.subtle : semantic$1.color.background["default"], ";\n color: ").concat(props.$isActive ? semantic$1.color.text["default"] : semantic$1.color.text.subdued, ";\n border: ").concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border["default"], ";\n border-bottom: ").concat(props.$isActive ? 'none' : "".concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border["default"]), ";\n margin-bottom: ").concat(props.$isActive ? '-1px' : '0', ";\n \n &:hover:not(:disabled) {\n background-color: ").concat(semantic$1.color.background.surface, ";\n color: ").concat(semantic$1.color.text["default"], ";\n }\n ");
|
|
6248
|
+
}, function (props) {
|
|
6249
|
+
return props.$disabled ? '0.5' : '1';
|
|
6250
|
+
}, base$1.border.width[2], semantic$1.color.border.strong, base$1.spacing[1]);
|
|
6251
|
+
var StyledBadge = styled.span.withConfig({
|
|
6252
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6253
|
+
return !prop.startsWith('$');
|
|
6254
|
+
},
|
|
6255
|
+
displayName: "TabBar__StyledBadge",
|
|
6256
|
+
componentId: "sc-1g9ib0y-2"
|
|
6257
|
+
})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 ", ";\n font: ", ";\n font-weight: ", ";\n border-radius: ", ";\n background-color: ", ";\n color: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 ", ";\n font: ", ";\n font-weight: ", ";\n border-radius: ", ";\n background-color: ", ";\n color: ", ";\n"
|
|
6258
|
+
/**
|
|
6259
|
+
* TabBar component for tabbed navigation
|
|
6260
|
+
*
|
|
6261
|
+
* Provides accessible tab navigation with 3 visual variants, keyboard support,
|
|
6262
|
+
* and optional badge counts. Follows ARIA tablist pattern.
|
|
6263
|
+
*
|
|
6264
|
+
* @example
|
|
6265
|
+
* ```tsx
|
|
6266
|
+
* const [activeTab, setActiveTab] = useState('all')
|
|
6267
|
+
*
|
|
6268
|
+
* <TabBar
|
|
6269
|
+
* tabs={[
|
|
6270
|
+
* { id: 'all', label: 'All', badge: 42 },
|
|
6271
|
+
* { id: 'pending', label: 'Pending', badge: 5 },
|
|
6272
|
+
* { id: 'completed', label: 'Completed' }
|
|
6273
|
+
* ]}
|
|
6274
|
+
* activeTab={activeTab}
|
|
6275
|
+
* onTabChange={setActiveTab}
|
|
6276
|
+
* variant="pills"
|
|
6277
|
+
* />
|
|
6278
|
+
* ```
|
|
6279
|
+
*/])), base$1.spacing[1], semantic$1.typography.caption, base$1.fontWeight[5], base$1.border.radius.circle, function (props) {
|
|
6280
|
+
if (props.$variant === 'pills') {
|
|
6281
|
+
return props.$isActive ? 'rgba(255, 255, 255, 0.2)' : semantic$1.color.background.interactive;
|
|
6282
|
+
}
|
|
6283
|
+
return semantic$1.color.background.interactive;
|
|
6284
|
+
}, function (props) {
|
|
6285
|
+
return props.$variant === 'pills' && props.$isActive ? semantic$1.color.text.inverse : semantic$1.color.text.inverse;
|
|
6286
|
+
});
|
|
6287
|
+
/**
|
|
6288
|
+
* TabBar component for tabbed navigation
|
|
6289
|
+
*
|
|
6290
|
+
* Provides accessible tab navigation with 3 visual variants, keyboard support,
|
|
6291
|
+
* and optional badge counts. Follows ARIA tablist pattern.
|
|
6292
|
+
*
|
|
6293
|
+
* @example
|
|
6294
|
+
* ```tsx
|
|
6295
|
+
* const [activeTab, setActiveTab] = useState('all')
|
|
6296
|
+
*
|
|
6297
|
+
* <TabBar
|
|
6298
|
+
* tabs={[
|
|
6299
|
+
* { id: 'all', label: 'All', badge: 42 },
|
|
6300
|
+
* { id: 'pending', label: 'Pending', badge: 5 },
|
|
6301
|
+
* { id: 'completed', label: 'Completed' }
|
|
6302
|
+
* ]}
|
|
6303
|
+
* activeTab={activeTab}
|
|
6304
|
+
* onTabChange={setActiveTab}
|
|
6305
|
+
* variant="pills"
|
|
6306
|
+
* />
|
|
6307
|
+
* ```
|
|
6308
|
+
*/
|
|
6309
|
+
var TabBar = function TabBar(_a) {
|
|
6310
|
+
var tabs = _a.tabs,
|
|
6311
|
+
activeTab = _a.activeTab,
|
|
6312
|
+
onTabChange = _a.onTabChange,
|
|
6313
|
+
_b = _a.variant,
|
|
6314
|
+
variant = _b === void 0 ? 'default' : _b,
|
|
6315
|
+
_c = _a["aria-label"],
|
|
6316
|
+
ariaLabel = _c === void 0 ? 'Tab navigation' : _c,
|
|
6317
|
+
dataTestId = _a["data-testid"];
|
|
6318
|
+
var tabRefs = React.useRef([]);
|
|
6319
|
+
var _d = React.useState(function () {
|
|
6320
|
+
return tabs.findIndex(function (tab) {
|
|
6321
|
+
return tab.id === activeTab;
|
|
6322
|
+
});
|
|
6323
|
+
}),
|
|
6324
|
+
focusedIndex = _d[0],
|
|
6325
|
+
setFocusedIndex = _d[1];
|
|
6326
|
+
// Update focused index when active tab changes externally
|
|
6327
|
+
React.useEffect(function () {
|
|
6328
|
+
var newIndex = tabs.findIndex(function (tab) {
|
|
6329
|
+
return tab.id === activeTab;
|
|
6330
|
+
});
|
|
6331
|
+
if (newIndex !== -1) {
|
|
6332
|
+
setFocusedIndex(newIndex);
|
|
6333
|
+
}
|
|
6334
|
+
}, [activeTab, tabs]);
|
|
6335
|
+
var handleTabClick = function handleTabClick(tab, index) {
|
|
6336
|
+
if (!tab.disabled) {
|
|
6337
|
+
onTabChange(tab.id);
|
|
6338
|
+
setFocusedIndex(index);
|
|
6339
|
+
}
|
|
6340
|
+
};
|
|
6341
|
+
var handleKeyDown = function handleKeyDown(event, index) {
|
|
6342
|
+
var _a;
|
|
6343
|
+
var newIndex = index;
|
|
6344
|
+
switch (event.key) {
|
|
6345
|
+
case 'ArrowLeft':
|
|
6346
|
+
event.preventDefault();
|
|
6347
|
+
// Find previous non-disabled tab
|
|
6348
|
+
newIndex = index - 1;
|
|
6349
|
+
while (newIndex >= 0 && tabs[newIndex].disabled) {
|
|
6350
|
+
newIndex--;
|
|
6351
|
+
}
|
|
6352
|
+
if (newIndex < 0) {
|
|
6353
|
+
// Wrap to last non-disabled tab
|
|
6354
|
+
newIndex = tabs.length - 1;
|
|
6355
|
+
while (newIndex > index && tabs[newIndex].disabled) {
|
|
6356
|
+
newIndex--;
|
|
6357
|
+
}
|
|
6358
|
+
}
|
|
6359
|
+
break;
|
|
6360
|
+
case 'ArrowRight':
|
|
6361
|
+
event.preventDefault();
|
|
6362
|
+
// Find next non-disabled tab
|
|
6363
|
+
newIndex = index + 1;
|
|
6364
|
+
while (newIndex < tabs.length && tabs[newIndex].disabled) {
|
|
6365
|
+
newIndex++;
|
|
6366
|
+
}
|
|
6367
|
+
if (newIndex >= tabs.length) {
|
|
6368
|
+
// Wrap to first non-disabled tab
|
|
6369
|
+
newIndex = 0;
|
|
6370
|
+
while (newIndex < index && tabs[newIndex].disabled) {
|
|
6371
|
+
newIndex++;
|
|
6372
|
+
}
|
|
6373
|
+
}
|
|
6374
|
+
break;
|
|
6375
|
+
case 'Home':
|
|
6376
|
+
event.preventDefault();
|
|
6377
|
+
// Focus first non-disabled tab
|
|
6378
|
+
newIndex = 0;
|
|
6379
|
+
while (newIndex < tabs.length && tabs[newIndex].disabled) {
|
|
6380
|
+
newIndex++;
|
|
6381
|
+
}
|
|
6382
|
+
break;
|
|
6383
|
+
case 'End':
|
|
6384
|
+
event.preventDefault();
|
|
6385
|
+
// Focus last non-disabled tab
|
|
6386
|
+
newIndex = tabs.length - 1;
|
|
6387
|
+
while (newIndex >= 0 && tabs[newIndex].disabled) {
|
|
6388
|
+
newIndex--;
|
|
6389
|
+
}
|
|
6390
|
+
break;
|
|
6391
|
+
default:
|
|
6392
|
+
return;
|
|
6393
|
+
}
|
|
6394
|
+
if (newIndex !== index && newIndex >= 0 && newIndex < tabs.length) {
|
|
6395
|
+
setFocusedIndex(newIndex);
|
|
6396
|
+
(_a = tabRefs.current[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6397
|
+
}
|
|
6398
|
+
};
|
|
6399
|
+
return /*#__PURE__*/React.createElement(StyledTabList, {
|
|
6400
|
+
$variant: variant,
|
|
6401
|
+
role: "tablist",
|
|
6402
|
+
"aria-label": ariaLabel,
|
|
6403
|
+
"data-testid": dataTestId
|
|
6404
|
+
}, tabs.map(function (tab, index) {
|
|
6405
|
+
return /*#__PURE__*/React.createElement(StyledTab, {
|
|
6406
|
+
key: tab.id,
|
|
6407
|
+
ref: function ref(el) {
|
|
6408
|
+
tabRefs.current[index] = el;
|
|
6409
|
+
},
|
|
6410
|
+
$variant: variant,
|
|
6411
|
+
$isActive: tab.id === activeTab,
|
|
6412
|
+
$disabled: tab.disabled || false,
|
|
6413
|
+
role: "tab",
|
|
6414
|
+
"aria-selected": tab.id === activeTab,
|
|
6415
|
+
"aria-disabled": tab.disabled || false,
|
|
6416
|
+
tabIndex: index === focusedIndex ? 0 : -1,
|
|
6417
|
+
disabled: tab.disabled,
|
|
6418
|
+
onClick: function onClick() {
|
|
6419
|
+
return handleTabClick(tab, index);
|
|
6420
|
+
},
|
|
6421
|
+
onKeyDown: function onKeyDown(e) {
|
|
6422
|
+
return handleKeyDown(e, index);
|
|
6423
|
+
},
|
|
6424
|
+
"data-testid": "".concat(dataTestId, "-tab-").concat(tab.id)
|
|
6425
|
+
}, tab.label, typeof tab.badge === 'number' && tab.badge > 0 && /*#__PURE__*/React.createElement(StyledBadge, {
|
|
6426
|
+
$variant: variant,
|
|
6427
|
+
$isActive: tab.id === activeTab,
|
|
6428
|
+
"aria-label": "".concat(tab.badge, " items")
|
|
6429
|
+
}, tab.badge > 99 ? '99+' : tab.badge));
|
|
6430
|
+
}));
|
|
6431
|
+
};
|
|
6432
|
+
TabBar.displayName = 'TabBar';
|
|
6433
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
4725
6434
|
|
|
4726
6435
|
React.createElement;
|
|
4727
6436
|
var semantic = tokensData.semantic,
|
|
@@ -4729,19 +6438,19 @@ var semantic = tokensData.semantic,
|
|
|
4729
6438
|
var StyledFieldContainer = styled.div.withConfig({
|
|
4730
6439
|
displayName: "TextField__StyledFieldContainer",
|
|
4731
6440
|
componentId: "sc-1ys3b0-0"
|
|
4732
|
-
})(templateObject_1$
|
|
6441
|
+
})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base.spacing[2]);
|
|
4733
6442
|
var StyledLabel = styled.label.withConfig({
|
|
4734
6443
|
displayName: "TextField__StyledLabel",
|
|
4735
6444
|
componentId: "sc-1ys3b0-1"
|
|
4736
|
-
})(templateObject_2$
|
|
6445
|
+
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"])), base.spacing[1], semantic.typography.label, semantic.color.text["default"], semantic.color.text.disabled);
|
|
4737
6446
|
var StyledRequiredIndicator = styled.span.withConfig({
|
|
4738
6447
|
displayName: "TextField__StyledRequiredIndicator",
|
|
4739
6448
|
componentId: "sc-1ys3b0-2"
|
|
4740
|
-
})(templateObject_3$
|
|
6449
|
+
})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic.color.text.error, base.fontWeight[5]);
|
|
4741
6450
|
var StyledHelperText = styled.div.withConfig({
|
|
4742
6451
|
displayName: "TextField__StyledHelperText",
|
|
4743
6452
|
componentId: "sc-1ys3b0-3"
|
|
4744
|
-
})(templateObject_4$
|
|
6453
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
4745
6454
|
/**
|
|
4746
6455
|
* TextField component for text input with label, helper text, and error states
|
|
4747
6456
|
*
|
|
@@ -4820,7 +6529,177 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
4820
6529
|
}, helperText));
|
|
4821
6530
|
});
|
|
4822
6531
|
TextField.displayName = 'TextField';
|
|
4823
|
-
var templateObject_1$
|
|
6532
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2;
|
|
6533
|
+
|
|
6534
|
+
React.createElement;
|
|
6535
|
+
var StyledContainer = styled.div.withConfig({
|
|
6536
|
+
displayName: "TransactionListItem__StyledContainer",
|
|
6537
|
+
componentId: "sc-7yunm0-0"
|
|
6538
|
+
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-height: 72px;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n gap: ", ";\n transition: background-color 0.2s ease;\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n min-height: 72px;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n gap: ", ";\n transition: background-color 0.2s ease;\n \n ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.md, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], tokensData.semantic.spacing.layout.md, function (_a) {
|
|
6539
|
+
var $clickable = _a.$clickable;
|
|
6540
|
+
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(tokensData.semantic.color.background['interactive-hover'], ";\n }\n \n &:active {\n background-color: ").concat(tokensData.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n outline-offset: -2px;\n }\n ");
|
|
6541
|
+
});
|
|
6542
|
+
var StyledAvatarSection = styled.div.withConfig({
|
|
6543
|
+
displayName: "TransactionListItem__StyledAvatarSection",
|
|
6544
|
+
componentId: "sc-7yunm0-1"
|
|
6545
|
+
})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n flex-shrink: 0;\n"], ["\n flex-shrink: 0;\n"])));
|
|
6546
|
+
var StyledMainContent = styled.div.withConfig({
|
|
6547
|
+
displayName: "TransactionListItem__StyledMainContent",
|
|
6548
|
+
componentId: "sc-7yunm0-2"
|
|
6549
|
+
})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: ", ";\n"], ["\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.xs);
|
|
6550
|
+
var StyledTopRow = styled.div.withConfig({
|
|
6551
|
+
displayName: "TransactionListItem__StyledTopRow",
|
|
6552
|
+
componentId: "sc-7yunm0-3"
|
|
6553
|
+
})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
|
|
6554
|
+
var StyledMerchantSection = styled.div.withConfig({
|
|
6555
|
+
displayName: "TransactionListItem__StyledMerchantSection",
|
|
6556
|
+
componentId: "sc-7yunm0-4"
|
|
6557
|
+
})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n min-width: 0;\n flex: 1;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n min-width: 0;\n flex: 1;\n"])), tokensData.semantic.spacing.layout.xs);
|
|
6558
|
+
var StyledBottomRow = styled.div.withConfig({
|
|
6559
|
+
displayName: "TransactionListItem__StyledBottomRow",
|
|
6560
|
+
componentId: "sc-7yunm0-5"
|
|
6561
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
|
|
6562
|
+
var StyledMetadata = styled.div.withConfig({
|
|
6563
|
+
displayName: "TransactionListItem__StyledMetadata",
|
|
6564
|
+
componentId: "sc-7yunm0-6"
|
|
6565
|
+
})(templateObject_7$1 || (templateObject_7$1 = __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);
|
|
6566
|
+
var StyledIconIndicator = styled.div.withConfig({
|
|
6567
|
+
displayName: "TransactionListItem__StyledIconIndicator",
|
|
6568
|
+
componentId: "sc-7yunm0-7"
|
|
6569
|
+
})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n color: ", ";\n"])), tokensData.semantic.spacing.layout.xs, tokensData.semantic.color.icon.subdued);
|
|
6570
|
+
var StyledTruncatedText = styled.span.withConfig({
|
|
6571
|
+
displayName: "TransactionListItem__StyledTruncatedText",
|
|
6572
|
+
componentId: "sc-7yunm0-8"
|
|
6573
|
+
})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"
|
|
6574
|
+
// Map categories to icon names (using placeholders until custom icons available)
|
|
6575
|
+
])));
|
|
6576
|
+
// Map categories to icon names (using placeholders until custom icons available)
|
|
6577
|
+
var categoryToIcon = {
|
|
6578
|
+
shopping: 'paper',
|
|
6579
|
+
// Will use shopping bag icon
|
|
6580
|
+
dining: 'paper',
|
|
6581
|
+
// Will use restaurant icon
|
|
6582
|
+
transport: 'paper',
|
|
6583
|
+
// Will use car icon
|
|
6584
|
+
entertainment: 'star',
|
|
6585
|
+
// Will use ticket icon
|
|
6586
|
+
bills: 'paper',
|
|
6587
|
+
// Will use document icon
|
|
6588
|
+
other: 'paper'
|
|
6589
|
+
};
|
|
6590
|
+
// Map status to badge variant
|
|
6591
|
+
var statusToBadgeVariant = {
|
|
6592
|
+
completed: 'success',
|
|
6593
|
+
pending: 'warning',
|
|
6594
|
+
failed: 'error'
|
|
6595
|
+
};
|
|
6596
|
+
/**
|
|
6597
|
+
* TransactionListItem component
|
|
6598
|
+
*
|
|
6599
|
+
* Displays a single transaction in a list with merchant info, amount, date,
|
|
6600
|
+
* status, and optional metadata (category, receipt, notes). Minimum height 72px
|
|
6601
|
+
* with interactive states for clickable items.
|
|
6602
|
+
*
|
|
6603
|
+
* Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
|
|
6604
|
+
*/
|
|
6605
|
+
var TransactionListItem = function TransactionListItem(_a) {
|
|
6606
|
+
var merchant = _a.merchant,
|
|
6607
|
+
amount = _a.amount,
|
|
6608
|
+
date = _a.date,
|
|
6609
|
+
_b = _a.status,
|
|
6610
|
+
status = _b === void 0 ? 'completed' : _b,
|
|
6611
|
+
category = _a.category,
|
|
6612
|
+
merchantLogo = _a.merchantLogo,
|
|
6613
|
+
description = _a.description,
|
|
6614
|
+
_c = _a.hasReceipt,
|
|
6615
|
+
hasReceipt = _c === void 0 ? false : _c,
|
|
6616
|
+
_d = _a.hasNote,
|
|
6617
|
+
hasNote = _d === void 0 ? false : _d,
|
|
6618
|
+
_e = _a.currency,
|
|
6619
|
+
currency = _e === void 0 ? 'AUD' : _e,
|
|
6620
|
+
onClick = _a.onClick,
|
|
6621
|
+
dataTestId = _a["data-testid"];
|
|
6622
|
+
var isClickable = !!onClick;
|
|
6623
|
+
// Determine amount variant
|
|
6624
|
+
var amountVariant = amount > 0 ? 'positive' : amount < 0 ? 'negative' : 'default';
|
|
6625
|
+
// Get category icon
|
|
6626
|
+
var categoryIcon = category ? categoryToIcon[category] : undefined;
|
|
6627
|
+
// Get badge variant from status
|
|
6628
|
+
var badgeVariant = statusToBadgeVariant[status];
|
|
6629
|
+
var handleClick = function handleClick() {
|
|
6630
|
+
if (isClickable && onClick) {
|
|
6631
|
+
onClick();
|
|
6632
|
+
}
|
|
6633
|
+
};
|
|
6634
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
6635
|
+
if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
|
|
6636
|
+
e.preventDefault();
|
|
6637
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
6638
|
+
}
|
|
6639
|
+
};
|
|
6640
|
+
return /*#__PURE__*/React.createElement(StyledContainer, {
|
|
6641
|
+
$clickable: isClickable,
|
|
6642
|
+
onClick: handleClick,
|
|
6643
|
+
onKeyDown: handleKeyDown,
|
|
6644
|
+
tabIndex: isClickable ? 0 : undefined,
|
|
6645
|
+
role: isClickable ? 'button' : undefined,
|
|
6646
|
+
"aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)) : undefined,
|
|
6647
|
+
"data-testid": dataTestId
|
|
6648
|
+
}, /*#__PURE__*/React.createElement(StyledAvatarSection, null, status === 'pending' ? /*#__PURE__*/React.createElement(Badge, {
|
|
6649
|
+
variant: badgeVariant,
|
|
6650
|
+
dot: true,
|
|
6651
|
+
"aria-label": "Pending transaction"
|
|
6652
|
+
}, /*#__PURE__*/React.createElement(Avatar, {
|
|
6653
|
+
name: merchant,
|
|
6654
|
+
picture: merchantLogo,
|
|
6655
|
+
size: "md"
|
|
6656
|
+
})) : /*#__PURE__*/React.createElement(Avatar, {
|
|
6657
|
+
name: merchant,
|
|
6658
|
+
picture: merchantLogo,
|
|
6659
|
+
size: "md"
|
|
6660
|
+
})), /*#__PURE__*/React.createElement(StyledMainContent, null, /*#__PURE__*/React.createElement(StyledTopRow, null, /*#__PURE__*/React.createElement(StyledMerchantSection, null, categoryIcon && /*#__PURE__*/React.createElement("span", {
|
|
6661
|
+
"aria-label": "Category: ".concat(category),
|
|
6662
|
+
role: "img"
|
|
6663
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
6664
|
+
name: categoryIcon,
|
|
6665
|
+
size: "sm",
|
|
6666
|
+
iconColor: "subdued"
|
|
6667
|
+
})), /*#__PURE__*/React.createElement(StyledTruncatedText, null, /*#__PURE__*/React.createElement(Typography, {
|
|
6668
|
+
variant: "body"
|
|
6669
|
+
}, merchant)), status === 'failed' && /*#__PURE__*/React.createElement(Badge, {
|
|
6670
|
+
variant: "error",
|
|
6671
|
+
dot: true,
|
|
6672
|
+
"aria-label": "Failed transaction"
|
|
6673
|
+
}, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement(MoneyDisplay, {
|
|
6674
|
+
amount: amount,
|
|
6675
|
+
currency: currency,
|
|
6676
|
+
variant: amountVariant,
|
|
6677
|
+
size: "medium",
|
|
6678
|
+
weight: "medium",
|
|
6679
|
+
showSign: true,
|
|
6680
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-amount") : undefined
|
|
6681
|
+
})), /*#__PURE__*/React.createElement(StyledBottomRow, null, /*#__PURE__*/React.createElement(StyledMetadata, null, /*#__PURE__*/React.createElement(DateFormatter, {
|
|
6682
|
+
dateString: typeof date === 'string' ? date : date.toISOString(),
|
|
6683
|
+
mode: "smart",
|
|
6684
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
|
|
6685
|
+
}), description && /*#__PURE__*/React.createElement(StyledTruncatedText, null, /*#__PURE__*/React.createElement(Typography, {
|
|
6686
|
+
variant: "caption",
|
|
6687
|
+
color: "subdued"
|
|
6688
|
+
}, "\u2022 ", description))), (hasReceipt || hasNote) && /*#__PURE__*/React.createElement(StyledIconIndicator, null, hasReceipt && /*#__PURE__*/React.createElement("span", {
|
|
6689
|
+
"aria-label": "Has receipt",
|
|
6690
|
+
role: "img"
|
|
6691
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
6692
|
+
name: "fileDocSearch",
|
|
6693
|
+
size: "xs"
|
|
6694
|
+
})), hasNote && /*#__PURE__*/React.createElement("span", {
|
|
6695
|
+
"aria-label": "Has note",
|
|
6696
|
+
role: "img"
|
|
6697
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
6698
|
+
name: "paper",
|
|
6699
|
+
size: "xs"
|
|
6700
|
+
}))))));
|
|
6701
|
+
};
|
|
6702
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1;
|
|
4824
6703
|
|
|
4825
6704
|
React.createElement;
|
|
4826
6705
|
// Breakpoints using base tokens
|
|
@@ -5025,6 +6904,8 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
5025
6904
|
// Main design system exports
|
|
5026
6905
|
var tokens = tokensData;
|
|
5027
6906
|
|
|
6907
|
+
exports.AccountCard = AccountCard;
|
|
6908
|
+
exports.ActionSheet = ActionSheet;
|
|
5028
6909
|
exports.Alert = Alert;
|
|
5029
6910
|
exports.Avatar = Avatar;
|
|
5030
6911
|
exports.Badge = Badge;
|
|
@@ -5034,14 +6915,17 @@ exports.Breadcrumbs = Breadcrumbs;
|
|
|
5034
6915
|
exports.Button = Button;
|
|
5035
6916
|
exports.CardLarge = CardLarge;
|
|
5036
6917
|
exports.CardSmall = CardSmall;
|
|
6918
|
+
exports.CategoryBadge = CategoryBadge;
|
|
5037
6919
|
exports.Checkbox = Checkbox;
|
|
5038
6920
|
exports.Chip = Chip;
|
|
5039
6921
|
exports.ChipGroup = ChipGroup;
|
|
5040
6922
|
exports.CodeBlock = CodeBlock;
|
|
5041
6923
|
exports.Container = Container;
|
|
5042
6924
|
exports.DateFormatter = DateFormatter;
|
|
6925
|
+
exports.DateGroup = DateGroup;
|
|
5043
6926
|
exports.Divider = Divider;
|
|
5044
6927
|
exports.Dropdown = Dropdown;
|
|
6928
|
+
exports.EmptyState = EmptyState;
|
|
5045
6929
|
exports.FeatureBlock = FeatureBlock;
|
|
5046
6930
|
exports.FilterChip = FilterChip;
|
|
5047
6931
|
exports.Grid = Grid;
|
|
@@ -5051,19 +6935,24 @@ exports.IconButton = IconButton;
|
|
|
5051
6935
|
exports.LegacyChip = LegacyChip;
|
|
5052
6936
|
exports.List = List;
|
|
5053
6937
|
exports.ListItem = ListItem;
|
|
6938
|
+
exports.MoneyDisplay = MoneyDisplay;
|
|
5054
6939
|
exports.NumberInput = NumberInput;
|
|
5055
6940
|
exports.PageTitle = PageTitle;
|
|
5056
6941
|
exports.PasswordField = PasswordField;
|
|
5057
6942
|
exports.Picture = Picture;
|
|
5058
6943
|
exports.ProgressBar = ProgressBar;
|
|
5059
6944
|
exports.ResponsiveGrid = ResponsiveGrid;
|
|
6945
|
+
exports.SearchField = SearchField;
|
|
5060
6946
|
exports.Sheet = Sheet;
|
|
5061
6947
|
exports.Slider = Slider;
|
|
5062
6948
|
exports.Stack = Stack;
|
|
6949
|
+
exports.StatusBadge = StatusBadge;
|
|
5063
6950
|
exports.StyledInputBase = StyledInputBase;
|
|
5064
6951
|
exports.StyledTextAreaBase = StyledTextAreaBase;
|
|
6952
|
+
exports.TabBar = TabBar;
|
|
5065
6953
|
exports.Tag = Tag;
|
|
5066
6954
|
exports.TextField = TextField;
|
|
6955
|
+
exports.TransactionListItem = TransactionListItem;
|
|
5067
6956
|
exports.Typography = Typography;
|
|
5068
6957
|
exports.iconsData = iconsData;
|
|
5069
6958
|
exports.tokens = tokens;
|