@common-origin/design-system 2.8.2 → 2.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/molecules/AccountCard/AccountCard.d.ts +2 -2
- package/dist/components/molecules/Modal/Modal.d.ts +65 -0
- package/dist/components/molecules/Modal/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +1 -0
- package/dist/index.esm.js +560 -354
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +560 -353
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -101,7 +101,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
101
101
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
102
102
|
};
|
|
103
103
|
|
|
104
|
-
var base$
|
|
104
|
+
var base$d = {
|
|
105
105
|
border: {
|
|
106
106
|
radius: {
|
|
107
107
|
"1": "0.125rem",
|
|
@@ -753,7 +753,7 @@ var component$3 = {
|
|
|
753
753
|
},
|
|
754
754
|
$ref: "./component/index.json"
|
|
755
755
|
};
|
|
756
|
-
var semantic$
|
|
756
|
+
var semantic$k = {
|
|
757
757
|
elevation: {
|
|
758
758
|
none: "none",
|
|
759
759
|
inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
|
|
@@ -957,44 +957,44 @@ var semantic$j = {
|
|
|
957
957
|
$ref: "./semantic/index.json"
|
|
958
958
|
};
|
|
959
959
|
var tokensData = {
|
|
960
|
-
base: base$
|
|
960
|
+
base: base$d,
|
|
961
961
|
component: component$3,
|
|
962
|
-
semantic: semantic$
|
|
962
|
+
semantic: semantic$k
|
|
963
963
|
};
|
|
964
964
|
|
|
965
965
|
// Destructure tokens
|
|
966
|
-
var semantic$
|
|
967
|
-
var color$a = semantic$
|
|
968
|
-
size$1 = semantic$
|
|
969
|
-
border$a = semantic$
|
|
970
|
-
var radius$
|
|
966
|
+
var semantic$j = tokensData.semantic;
|
|
967
|
+
var color$a = semantic$j.color,
|
|
968
|
+
size$1 = semantic$j.size,
|
|
969
|
+
border$a = semantic$j.border;
|
|
970
|
+
var radius$5 = border$a.radius;
|
|
971
971
|
var AvatarContainer = styled.div.withConfig({
|
|
972
972
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
973
973
|
return !prop.startsWith('$');
|
|
974
974
|
},
|
|
975
975
|
displayName: "Avatar__AvatarContainer",
|
|
976
976
|
componentId: "sc-ezn4ax-0"
|
|
977
|
-
})(templateObject_1$
|
|
977
|
+
})(templateObject_1$K || (templateObject_1$K = __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) {
|
|
978
978
|
var $size = _a.$size;
|
|
979
979
|
return size$1.avatar[$size];
|
|
980
980
|
}, function (_a) {
|
|
981
981
|
var $size = _a.$size;
|
|
982
982
|
return size$1.avatar[$size];
|
|
983
|
-
}, radius$
|
|
983
|
+
}, radius$5.circle, color$a.background.surface);
|
|
984
984
|
var AvatarImage = styled.img.withConfig({
|
|
985
985
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
986
986
|
return !prop.startsWith('$');
|
|
987
987
|
},
|
|
988
988
|
displayName: "Avatar__AvatarImage",
|
|
989
989
|
componentId: "sc-ezn4ax-1"
|
|
990
|
-
})(templateObject_2$
|
|
990
|
+
})(templateObject_2$v || (templateObject_2$v = __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"])), radius$5.circle);
|
|
991
991
|
var AvatarInitials = styled.span.withConfig({
|
|
992
992
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
993
993
|
return !prop.startsWith('$');
|
|
994
994
|
},
|
|
995
995
|
displayName: "Avatar__AvatarInitials",
|
|
996
996
|
componentId: "sc-ezn4ax-2"
|
|
997
|
-
})(templateObject_3$
|
|
997
|
+
})(templateObject_3$s || (templateObject_3$s = __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"
|
|
998
998
|
// Helper function to get initials from name
|
|
999
999
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
1000
1000
|
var $size = _a.$size;
|
|
@@ -1060,7 +1060,7 @@ var Avatar = function Avatar(_a) {
|
|
|
1060
1060
|
})
|
|
1061
1061
|
}));
|
|
1062
1062
|
};
|
|
1063
|
-
var templateObject_1$
|
|
1063
|
+
var templateObject_1$K, templateObject_2$v, templateObject_3$s;
|
|
1064
1064
|
|
|
1065
1065
|
var _a$8 = tokensData.semantic,
|
|
1066
1066
|
typography$5 = _a$8.typography,
|
|
@@ -1127,7 +1127,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
1127
1127
|
},
|
|
1128
1128
|
displayName: "Typography__StyledTypography",
|
|
1129
1129
|
componentId: "sc-17mqo4k-0"
|
|
1130
|
-
})(templateObject_1$
|
|
1130
|
+
})(templateObject_1$J || (templateObject_1$J = __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"
|
|
1131
1131
|
/**
|
|
1132
1132
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
1133
1133
|
*
|
|
@@ -1195,24 +1195,24 @@ var Typography = function Typography(_a) {
|
|
|
1195
1195
|
children: children
|
|
1196
1196
|
});
|
|
1197
1197
|
};
|
|
1198
|
-
var templateObject_1$
|
|
1198
|
+
var templateObject_1$J;
|
|
1199
1199
|
|
|
1200
|
-
var semantic$
|
|
1201
|
-
var color$8 = semantic$
|
|
1202
|
-
border$9 = semantic$
|
|
1203
|
-
var radius$
|
|
1204
|
-
var scaleIn$
|
|
1200
|
+
var semantic$i = tokensData.semantic;
|
|
1201
|
+
var color$8 = semantic$i.color,
|
|
1202
|
+
border$9 = semantic$i.border;
|
|
1203
|
+
var radius$4 = border$9.radius;
|
|
1204
|
+
var scaleIn$2 = keyframes(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
1205
1205
|
var BadgeWrapper = styled.span.withConfig({
|
|
1206
1206
|
displayName: "Badge__BadgeWrapper",
|
|
1207
1207
|
componentId: "sc-tjz4pp-0"
|
|
1208
|
-
})(templateObject_2$
|
|
1208
|
+
})(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
1209
1209
|
var BadgeIndicator = styled.span.withConfig({
|
|
1210
1210
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1211
1211
|
return !prop.startsWith('$');
|
|
1212
1212
|
},
|
|
1213
1213
|
displayName: "Badge__BadgeIndicator",
|
|
1214
1214
|
componentId: "sc-tjz4pp-1"
|
|
1215
|
-
})(templateObject_3$
|
|
1215
|
+
})(templateObject_3$r || (templateObject_3$r = __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) {
|
|
1216
1216
|
return props.$isVisible ? 'flex' : 'none';
|
|
1217
1217
|
}, function (props) {
|
|
1218
1218
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1220,7 +1220,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1220
1220
|
return props.$isDot ? '8px' : '16px';
|
|
1221
1221
|
}, function (props) {
|
|
1222
1222
|
return props.$isDot ? '0' : '0 4px';
|
|
1223
|
-
}, radius$
|
|
1223
|
+
}, radius$4.circle, color$8.background["default"], scaleIn$2, function (props) {
|
|
1224
1224
|
switch (props.$variant) {
|
|
1225
1225
|
case 'primary':
|
|
1226
1226
|
return "\n background-color: ".concat(color$8.background.interactive, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
@@ -1237,7 +1237,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1237
1237
|
var ScreenReaderOnly$1 = styled.span.withConfig({
|
|
1238
1238
|
displayName: "Badge__ScreenReaderOnly",
|
|
1239
1239
|
componentId: "sc-tjz4pp-2"
|
|
1240
|
-
})(templateObject_4$
|
|
1240
|
+
})(templateObject_4$m || (templateObject_4$m = __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"])));
|
|
1241
1241
|
var Badge = function Badge(_a) {
|
|
1242
1242
|
var children = _a.children,
|
|
1243
1243
|
_b = _a.count,
|
|
@@ -1273,7 +1273,7 @@ var Badge = function Badge(_a) {
|
|
|
1273
1273
|
})]
|
|
1274
1274
|
});
|
|
1275
1275
|
};
|
|
1276
|
-
var templateObject_1$
|
|
1276
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$r, templateObject_4$m;
|
|
1277
1277
|
|
|
1278
1278
|
var StyledBox = styled.div.withConfig({
|
|
1279
1279
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1284,23 +1284,23 @@ var StyledBox = styled.div.withConfig({
|
|
|
1284
1284
|
})(templateObject_49 || (templateObject_49 = __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 // Elevation (shadow)\n ", "\n \n // Cursor\n ", "\n \n // Transition\n ", "\n \n // Hover states\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 // Elevation (shadow)\n ", "\n \n // Cursor\n ", "\n \n // Transition\n ", "\n \n // Hover states\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"
|
|
1285
1285
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1286
1286
|
])), function (props) {
|
|
1287
|
-
return props.$display && css(templateObject_1$
|
|
1287
|
+
return props.$display && css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1288
1288
|
}, function (props) {
|
|
1289
|
-
return props.$flexDirection && css(templateObject_2$
|
|
1289
|
+
return props.$flexDirection && css(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1290
1290
|
}, function (props) {
|
|
1291
|
-
return props.$justifyContent && css(templateObject_3$
|
|
1291
|
+
return props.$justifyContent && css(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1292
1292
|
}, function (props) {
|
|
1293
|
-
return props.$alignItems && css(templateObject_4$
|
|
1293
|
+
return props.$alignItems && css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1294
1294
|
}, function (props) {
|
|
1295
|
-
return props.$flexWrap && css(templateObject_5$
|
|
1295
|
+
return props.$flexWrap && css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1296
1296
|
}, function (props) {
|
|
1297
1297
|
return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1298
1298
|
}, function (props) {
|
|
1299
|
-
return props.$m && css(templateObject_7$
|
|
1299
|
+
return props.$m && css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1300
1300
|
}, function (props) {
|
|
1301
|
-
return props.$mt && css(templateObject_8$
|
|
1301
|
+
return props.$mt && css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1302
1302
|
}, function (props) {
|
|
1303
|
-
return props.$mr && css(templateObject_9$
|
|
1303
|
+
return props.$mr && css(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
|
|
1304
1304
|
}, function (props) {
|
|
1305
1305
|
return props.$mb && css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
|
|
1306
1306
|
}, function (props) {
|
|
@@ -1508,7 +1508,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1508
1508
|
}));
|
|
1509
1509
|
};
|
|
1510
1510
|
var Box = BoxTransform;
|
|
1511
|
-
var templateObject_1$
|
|
1511
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$b, templateObject_8$7, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, 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, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
|
|
1512
1512
|
|
|
1513
1513
|
var add = {
|
|
1514
1514
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -2228,7 +2228,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
2228
2228
|
},
|
|
2229
2229
|
displayName: "Icon__IconStyled",
|
|
2230
2230
|
componentId: "sc-1105czq-0"
|
|
2231
|
-
})(templateObject_1$
|
|
2231
|
+
})(templateObject_1$G || (templateObject_1$G = __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) {
|
|
2232
2232
|
var $size = _a.$size;
|
|
2233
2233
|
return tokensData.semantic.size.icon[$size];
|
|
2234
2234
|
}, function (_a) {
|
|
@@ -2294,12 +2294,12 @@ var Icon = function Icon(_a) {
|
|
|
2294
2294
|
})
|
|
2295
2295
|
});
|
|
2296
2296
|
};
|
|
2297
|
-
var templateObject_1$
|
|
2297
|
+
var templateObject_1$G;
|
|
2298
2298
|
|
|
2299
2299
|
var button$1 = tokensData.component.button,
|
|
2300
|
-
semantic$
|
|
2300
|
+
semantic$h = tokensData.semantic;
|
|
2301
2301
|
// Base styles shared between button and link
|
|
2302
|
-
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$
|
|
2302
|
+
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$h.motion.hover, ";\n white-space: nowrap;\n user-select: none;\n \n &:focus {\n outline: ").concat(button$1.focus.outline, ";\n outline-offset: ").concat(button$1.focus.outlineOffset, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n");
|
|
2303
2303
|
// Dynamic variant styles using component tokens
|
|
2304
2304
|
var getVariantStyles$1 = function getVariantStyles(_a) {
|
|
2305
2305
|
var $variant = _a.$variant;
|
|
@@ -2368,14 +2368,14 @@ var StyledButton = styled.button.withConfig({
|
|
|
2368
2368
|
},
|
|
2369
2369
|
displayName: "Button__StyledButton",
|
|
2370
2370
|
componentId: "sc-1eiuum9-0"
|
|
2371
|
-
})(templateObject_1$
|
|
2371
|
+
})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
|
|
2372
2372
|
var StyledLink = styled.a.withConfig({
|
|
2373
2373
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2374
2374
|
return !prop.startsWith('$');
|
|
2375
2375
|
},
|
|
2376
2376
|
displayName: "Button__StyledLink",
|
|
2377
2377
|
componentId: "sc-1eiuum9-1"
|
|
2378
|
-
})(templateObject_2$
|
|
2378
|
+
})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
2379
2379
|
// Helper function to get icon size based on button size
|
|
2380
2380
|
])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
|
|
2381
2381
|
// Helper function to get icon size based on button size
|
|
@@ -2476,24 +2476,24 @@ var Button = function Button(_a) {
|
|
|
2476
2476
|
children: renderButtonContent(children, iconName, size)
|
|
2477
2477
|
}));
|
|
2478
2478
|
};
|
|
2479
|
-
var templateObject_1$
|
|
2479
|
+
var templateObject_1$F, templateObject_2$s;
|
|
2480
2480
|
|
|
2481
|
-
var semantic$
|
|
2482
|
-
base$
|
|
2483
|
-
var color$7 = semantic$
|
|
2484
|
-
typography$4 = semantic$
|
|
2485
|
-
border$8 = semantic$
|
|
2486
|
-
spacing$7 = semantic$
|
|
2481
|
+
var semantic$g = tokensData.semantic,
|
|
2482
|
+
base$c = tokensData.base;
|
|
2483
|
+
var color$7 = semantic$g.color,
|
|
2484
|
+
typography$4 = semantic$g.typography,
|
|
2485
|
+
border$8 = semantic$g.border,
|
|
2486
|
+
spacing$7 = semantic$g.spacing;
|
|
2487
2487
|
var category = color$7.category;
|
|
2488
|
-
var radius$
|
|
2489
|
-
var layout$
|
|
2488
|
+
var radius$3 = border$8.radius;
|
|
2489
|
+
var layout$4 = spacing$7.layout;
|
|
2490
2490
|
var StyledCategoryBadge = styled.span.withConfig({
|
|
2491
2491
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2492
2492
|
return !prop.startsWith('$');
|
|
2493
2493
|
},
|
|
2494
2494
|
displayName: "CategoryBadge__StyledCategoryBadge",
|
|
2495
2495
|
componentId: "sc-17aslpn-0"
|
|
2496
|
-
})(templateObject_1$
|
|
2496
|
+
})(templateObject_1$E || (templateObject_1$E = __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 border-style: solid;\n border-width: ", ";\n \n /* Size styles */\n height: ", ";\n padding: ", ";\n font: ", ";\n gap: ", ";\n \n /* Variant + Color styles */\n background-color: ", ";\n \n color: ", ";\n \n border-color: ", ";\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 border-style: solid;\n border-width: ", ";\n \n /* Size styles */\n height: ", ";\n padding: ", ";\n font: ", ";\n gap: ", ";\n \n /* Variant + Color styles */\n background-color: ", ";\n \n color: ", ";\n \n border-color: ", ";\n"
|
|
2497
2497
|
/**
|
|
2498
2498
|
* CategoryBadge component for displaying transaction categories
|
|
2499
2499
|
*
|
|
@@ -2511,16 +2511,16 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
2511
2511
|
* Travel
|
|
2512
2512
|
* </CategoryBadge>
|
|
2513
2513
|
* ```
|
|
2514
|
-
*/])), radius$
|
|
2514
|
+
*/])), radius$3.circle, base$c.fontWeight[3], base$c.border.width[1], function (_a) {
|
|
2515
2515
|
var $size = _a.$size;
|
|
2516
2516
|
return $size === 'small' ? '24px' : '32px';
|
|
2517
2517
|
}, function (_a) {
|
|
2518
2518
|
var $size = _a.$size;
|
|
2519
|
-
return $size === 'small' ? "".concat(layout$
|
|
2519
|
+
return $size === 'small' ? "".concat(layout$4.xs, " ").concat(layout$4.sm) : "".concat(layout$4.sm, " ").concat(layout$4.md);
|
|
2520
2520
|
}, function (_a) {
|
|
2521
2521
|
var $size = _a.$size;
|
|
2522
2522
|
return $size === 'small' ? typography$4.caption : typography$4.small;
|
|
2523
|
-
}, layout$
|
|
2523
|
+
}, layout$4.xs, function (_a) {
|
|
2524
2524
|
var $color = _a.$color,
|
|
2525
2525
|
$variant = _a.$variant;
|
|
2526
2526
|
if ($variant === 'filled') {
|
|
@@ -2591,7 +2591,7 @@ var CategoryBadge = function CategoryBadge(_a) {
|
|
|
2591
2591
|
});
|
|
2592
2592
|
};
|
|
2593
2593
|
CategoryBadge.displayName = 'CategoryBadge';
|
|
2594
|
-
var templateObject_1$
|
|
2594
|
+
var templateObject_1$E;
|
|
2595
2595
|
|
|
2596
2596
|
var chip = tokensData.component.chip;
|
|
2597
2597
|
// Helper function to get variant styles matching Button's approach
|
|
@@ -2635,7 +2635,7 @@ var StyledChip = styled.span.withConfig({
|
|
|
2635
2635
|
},
|
|
2636
2636
|
displayName: "ChipBase__StyledChip",
|
|
2637
2637
|
componentId: "sc-moa6zc-0"
|
|
2638
|
-
})(templateObject_1$
|
|
2638
|
+
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: ", ";\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: ", ";\n cursor: ", ";\n \n ", "\n ", "\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\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: ", ";\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: ", ";\n cursor: ", ";\n \n ", "\n ", "\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"
|
|
2639
2639
|
// Icon container for selected indicator or leading icons
|
|
2640
2640
|
])), chip["default"].borderRadius, tokensData.semantic.motion.hover, function (props) {
|
|
2641
2641
|
return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
|
|
@@ -2644,7 +2644,7 @@ var StyledChip = styled.span.withConfig({
|
|
|
2644
2644
|
var IconContainer = styled.span.withConfig({
|
|
2645
2645
|
displayName: "ChipBase__IconContainer",
|
|
2646
2646
|
componentId: "sc-moa6zc-1"
|
|
2647
|
-
})(templateObject_2$
|
|
2647
|
+
})(templateObject_2$r || (templateObject_2$r = __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"
|
|
2648
2648
|
// Close button for dismissible chips
|
|
2649
2649
|
])), tokensData.semantic.spacing.layout.xs);
|
|
2650
2650
|
// Close button for dismissible chips
|
|
@@ -2654,10 +2654,10 @@ var CloseButton = styled.button.withConfig({
|
|
|
2654
2654
|
},
|
|
2655
2655
|
displayName: "ChipBase__CloseButton",
|
|
2656
2656
|
componentId: "sc-moa6zc-2"
|
|
2657
|
-
})(templateObject_3$
|
|
2657
|
+
})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 2px;\n border-radius: ", ";\n cursor: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n background-color: rgba(0, 0, 0, 0.1);\n }\n \n &:active:not(:disabled) {\n background-color: rgba(0, 0, 0, 0.15);\n }\n \n &:disabled {\n color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n border-radius: ", ";\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: 2px;\n border-radius: ", ";\n cursor: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n background-color: rgba(0, 0, 0, 0.1);\n }\n \n &:active:not(:disabled) {\n background-color: rgba(0, 0, 0, 0.15);\n }\n \n &:disabled {\n color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n border-radius: ", ";\n }\n"])), tokensData.semantic.spacing.layout.sm, tokensData.semantic.border.radius.xs, function (props) {
|
|
2658
2658
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
2659
2659
|
}, tokensData.semantic.motion.hover, tokensData.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
|
|
2660
|
-
var templateObject_1$
|
|
2660
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$p;
|
|
2661
2661
|
|
|
2662
2662
|
/**
|
|
2663
2663
|
* Chip - Compact element for displaying tags, categories, and labels
|
|
@@ -2907,7 +2907,7 @@ var spacing$6 = tokensData.semantic.spacing;
|
|
|
2907
2907
|
var StyledContainer$2 = styled.div.withConfig({
|
|
2908
2908
|
displayName: "Container__StyledContainer",
|
|
2909
2909
|
componentId: "sc-17dbj6n-0"
|
|
2910
|
-
})(templateObject_1$
|
|
2910
|
+
})(templateObject_1$C || (templateObject_1$C = __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$6.layout['2xl'], spacing$6.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
|
|
2911
2911
|
var Container$1 = function Container(_a) {
|
|
2912
2912
|
var children = _a.children,
|
|
2913
2913
|
props = __rest(_a, ["children"]);
|
|
@@ -2915,25 +2915,25 @@ var Container$1 = function Container(_a) {
|
|
|
2915
2915
|
children: children
|
|
2916
2916
|
}));
|
|
2917
2917
|
};
|
|
2918
|
-
var templateObject_1$
|
|
2918
|
+
var templateObject_1$C;
|
|
2919
2919
|
|
|
2920
|
-
var base$
|
|
2920
|
+
var base$b = tokensData.base;
|
|
2921
2921
|
var PictureWrapper = styled.div.withConfig({
|
|
2922
2922
|
displayName: "Picture__PictureWrapper",
|
|
2923
2923
|
componentId: "sc-11d9tei-0"
|
|
2924
|
-
})(templateObject_1$
|
|
2924
|
+
})(templateObject_1$B || (templateObject_1$B = __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);
|
|
2925
2925
|
var ImageLink = styled.a.withConfig({
|
|
2926
2926
|
displayName: "Picture__ImageLink",
|
|
2927
2927
|
componentId: "sc-11d9tei-1"
|
|
2928
|
-
})(templateObject_2$
|
|
2928
|
+
})(templateObject_2$q || (templateObject_2$q = __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);
|
|
2929
2929
|
var ImageButton = styled.button.withConfig({
|
|
2930
2930
|
displayName: "Picture__ImageButton",
|
|
2931
2931
|
componentId: "sc-11d9tei-2"
|
|
2932
|
-
})(templateObject_3$
|
|
2932
|
+
})(templateObject_3$o || (templateObject_3$o = __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);
|
|
2933
2933
|
var StyledImage = styled.img.withConfig({
|
|
2934
2934
|
displayName: "Picture__StyledImage",
|
|
2935
2935
|
componentId: "sc-11d9tei-3"
|
|
2936
|
-
})(templateObject_4$
|
|
2936
|
+
})(templateObject_4$k || (templateObject_4$k = __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]);
|
|
2937
2937
|
var Picture = function Picture(_a) {
|
|
2938
2938
|
var title = _a.title,
|
|
2939
2939
|
src = _a.src,
|
|
@@ -2963,7 +2963,7 @@ var Picture = function Picture(_a) {
|
|
|
2963
2963
|
}) : image
|
|
2964
2964
|
});
|
|
2965
2965
|
};
|
|
2966
|
-
var templateObject_1$
|
|
2966
|
+
var templateObject_1$B, templateObject_2$q, templateObject_3$o, templateObject_4$k;
|
|
2967
2967
|
|
|
2968
2968
|
var _a$7 = tokensData.semantic,
|
|
2969
2969
|
typography$3 = _a$7.typography,
|
|
@@ -2971,7 +2971,7 @@ var _a$7 = tokensData.semantic,
|
|
|
2971
2971
|
var TimeStyled = styled.time.withConfig({
|
|
2972
2972
|
displayName: "DateFormatter__TimeStyled",
|
|
2973
2973
|
componentId: "sc-5464cc-0"
|
|
2974
|
-
})(templateObject_1$
|
|
2974
|
+
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
2975
2975
|
/**
|
|
2976
2976
|
* Formats a date with smart relative/absolute logic
|
|
2977
2977
|
*/])), typography$3.label, color$6.text.subdued);
|
|
@@ -3020,7 +3020,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
3020
3020
|
children: displayText
|
|
3021
3021
|
});
|
|
3022
3022
|
};
|
|
3023
|
-
var templateObject_1$
|
|
3023
|
+
var templateObject_1$A;
|
|
3024
3024
|
|
|
3025
3025
|
var motion$2 = tokensData.semantic.motion,
|
|
3026
3026
|
_a$6 = tokensData.component,
|
|
@@ -3032,7 +3032,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
3032
3032
|
},
|
|
3033
3033
|
displayName: "IconButton__IconButtonStyled",
|
|
3034
3034
|
componentId: "sc-k8b14t-0"
|
|
3035
|
-
})(templateObject_1$
|
|
3035
|
+
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n background-color: ", ";\n 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:not(:disabled) {\n background-color: ", ";\n }\n\n &:active:not(:disabled) {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n 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 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:not(:disabled) {\n background-color: ", ";\n }\n\n &:active:not(:disabled) {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n 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) {
|
|
3036
3036
|
var $variant = _a.$variant;
|
|
3037
3037
|
switch ($variant) {
|
|
3038
3038
|
case 'primary':
|
|
@@ -3140,7 +3140,7 @@ var IconButton = function IconButton(_a) {
|
|
|
3140
3140
|
})
|
|
3141
3141
|
}));
|
|
3142
3142
|
};
|
|
3143
|
-
var templateObject_1$
|
|
3143
|
+
var templateObject_1$z;
|
|
3144
3144
|
|
|
3145
3145
|
var StyledWrapper = styled.span.withConfig({
|
|
3146
3146
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3148,7 +3148,7 @@ var StyledWrapper = styled.span.withConfig({
|
|
|
3148
3148
|
},
|
|
3149
3149
|
displayName: "MoneyDisplay__StyledWrapper",
|
|
3150
3150
|
componentId: "sc-1mddej3-0"
|
|
3151
|
-
})(templateObject_1$
|
|
3151
|
+
})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n text-align: ", ";\n font-weight: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n text-align: ", ";\n font-weight: ", ";\n"
|
|
3152
3152
|
// Map size to Typography variant
|
|
3153
3153
|
])), function (_a) {
|
|
3154
3154
|
var $align = _a.$align;
|
|
@@ -3251,28 +3251,28 @@ var MoneyDisplay = function MoneyDisplay(_a) {
|
|
|
3251
3251
|
})]
|
|
3252
3252
|
});
|
|
3253
3253
|
};
|
|
3254
|
-
var templateObject_1$
|
|
3254
|
+
var templateObject_1$y;
|
|
3255
3255
|
|
|
3256
3256
|
// Destructure tokens
|
|
3257
|
-
var semantic$
|
|
3258
|
-
var _a$5 = __assign(__assign({}, semantic$
|
|
3257
|
+
var semantic$f = tokensData.semantic;
|
|
3258
|
+
var _a$5 = __assign(__assign({}, semantic$f), {
|
|
3259
3259
|
component: tokensData.component
|
|
3260
3260
|
}),
|
|
3261
3261
|
color$5 = _a$5.color,
|
|
3262
3262
|
border$7 = _a$5.border,
|
|
3263
3263
|
motion$1 = _a$5.motion,
|
|
3264
3264
|
component$2 = _a$5.component;
|
|
3265
|
-
var radius$
|
|
3265
|
+
var radius$2 = border$7.radius;
|
|
3266
3266
|
var ProgressBarContainer = styled.div.withConfig({
|
|
3267
3267
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3268
3268
|
return !prop.startsWith('$');
|
|
3269
3269
|
},
|
|
3270
3270
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
3271
3271
|
componentId: "sc-1nco33q-0"
|
|
3272
|
-
})(templateObject_3$
|
|
3273
|
-
return props.$variant === 'horizontal' && css(templateObject_1$
|
|
3272
|
+
})(templateObject_3$n || (templateObject_3$n = __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"])), color$5.background.disabled, radius$2.xs, function (props) {
|
|
3273
|
+
return props.$variant === 'horizontal' && css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
|
|
3274
3274
|
}, function (props) {
|
|
3275
|
-
return props.$variant === 'vertical' && css(templateObject_2$
|
|
3275
|
+
return props.$variant === 'vertical' && css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
|
|
3276
3276
|
});
|
|
3277
3277
|
var ProgressBarFill = styled.div.withConfig({
|
|
3278
3278
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3280,7 +3280,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
3280
3280
|
},
|
|
3281
3281
|
displayName: "ProgressBar__ProgressBarFill",
|
|
3282
3282
|
componentId: "sc-1nco33q-1"
|
|
3283
|
-
})(templateObject_7$
|
|
3283
|
+
})(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"])), motion$1.transition.normal, function (props) {
|
|
3284
3284
|
var backgroundColor;
|
|
3285
3285
|
switch (props.$color) {
|
|
3286
3286
|
case 'success':
|
|
@@ -3294,9 +3294,9 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
3294
3294
|
backgroundColor = color$5.background.interactive;
|
|
3295
3295
|
break;
|
|
3296
3296
|
}
|
|
3297
|
-
return css(templateObject_4$
|
|
3297
|
+
return css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
3298
3298
|
}, function (props) {
|
|
3299
|
-
return props.$variant === 'horizontal' && css(templateObject_5$
|
|
3299
|
+
return props.$variant === 'horizontal' && css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
3300
3300
|
}, function (props) {
|
|
3301
3301
|
return props.$variant === 'vertical' && css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
3302
3302
|
});
|
|
@@ -3325,7 +3325,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
3325
3325
|
})
|
|
3326
3326
|
});
|
|
3327
3327
|
};
|
|
3328
|
-
var templateObject_1$
|
|
3328
|
+
var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$f, templateObject_6$c, templateObject_7$a;
|
|
3329
3329
|
|
|
3330
3330
|
// Destructure tokens for cleaner access
|
|
3331
3331
|
var separatorTokens = tokensData.component.separator;
|
|
@@ -3336,7 +3336,7 @@ var StyledDivider = styled.div.withConfig({
|
|
|
3336
3336
|
},
|
|
3337
3337
|
displayName: "Divider__StyledDivider",
|
|
3338
3338
|
componentId: "sc-1l0c8ja-0"
|
|
3339
|
-
})(templateObject_1$
|
|
3339
|
+
})(templateObject_1$w || (templateObject_1$w = __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"
|
|
3340
3340
|
/**
|
|
3341
3341
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
3342
3342
|
*
|
|
@@ -3449,7 +3449,7 @@ var Divider = function Divider(_a) {
|
|
|
3449
3449
|
"aria-orientation": orientation
|
|
3450
3450
|
});
|
|
3451
3451
|
};
|
|
3452
|
-
var templateObject_1$
|
|
3452
|
+
var templateObject_1$w;
|
|
3453
3453
|
|
|
3454
3454
|
var StyledStack = styled.div.withConfig({
|
|
3455
3455
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3457,7 +3457,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
3457
3457
|
},
|
|
3458
3458
|
displayName: "Stack__StyledStack",
|
|
3459
3459
|
componentId: "sc-1ehkxgy-0"
|
|
3460
|
-
})(templateObject_1$
|
|
3460
|
+
})(templateObject_1$v || (templateObject_1$v = __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"
|
|
3461
3461
|
// Helper function to convert gap prop to CSS value
|
|
3462
3462
|
])));
|
|
3463
3463
|
// Helper function to convert gap prop to CSS value
|
|
@@ -3496,15 +3496,15 @@ var Stack = function Stack(_a) {
|
|
|
3496
3496
|
children: children
|
|
3497
3497
|
});
|
|
3498
3498
|
};
|
|
3499
|
-
var templateObject_1$
|
|
3499
|
+
var templateObject_1$v;
|
|
3500
3500
|
|
|
3501
3501
|
// Destructure tokens for cleaner access
|
|
3502
3502
|
var statusColors = tokensData.semantic.color.status;
|
|
3503
3503
|
var spacing$5 = tokensData.semantic.spacing.layout;
|
|
3504
|
-
var radius$
|
|
3504
|
+
var radius$1 = tokensData.semantic.border.radius;
|
|
3505
3505
|
var transition = tokensData.semantic.motion.transition;
|
|
3506
3506
|
var typography$2 = tokensData.semantic.typography;
|
|
3507
|
-
var scaleIn = keyframes(templateObject_1$
|
|
3507
|
+
var scaleIn$1 = keyframes(templateObject_1$u || (templateObject_1$u = __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"])));
|
|
3508
3508
|
var getStatusConfig = function getStatusConfig(status) {
|
|
3509
3509
|
var configs = {
|
|
3510
3510
|
pending: {
|
|
@@ -3571,7 +3571,7 @@ var StyledStatusBadge = styled.span.withConfig({
|
|
|
3571
3571
|
},
|
|
3572
3572
|
displayName: "StatusBadge__StyledStatusBadge",
|
|
3573
3573
|
componentId: "sc-1paksgb-0"
|
|
3574
|
-
})(templateObject_2$
|
|
3574
|
+
})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: 500;\n white-space: nowrap;\n user-select: none;\n animation: ", " 0.2s ease-out;\n transition: ", ";\n \n /* Size styles */\n ", "\n \n /* Status color styles */\n ", "\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: 500;\n white-space: nowrap;\n user-select: none;\n animation: ", " 0.2s ease-out;\n transition: ", ";\n \n /* Size styles */\n ", "\n \n /* Status color styles */\n ", "\n"])), radius$1.circle, scaleIn$1, transition.fast, function (_a) {
|
|
3575
3575
|
var $size = _a.$size;
|
|
3576
3576
|
var size = sizeConfig[$size];
|
|
3577
3577
|
return "\n height: ".concat(size.height, ";\n padding: ").concat(size.padding, ";\n font: ").concat(size.font, ";\n gap: ").concat(size.gap, ";\n ");
|
|
@@ -3583,7 +3583,7 @@ var StyledStatusBadge = styled.span.withConfig({
|
|
|
3583
3583
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
3584
3584
|
displayName: "StatusBadge__ScreenReaderOnly",
|
|
3585
3585
|
componentId: "sc-1paksgb-1"
|
|
3586
|
-
})(templateObject_3$
|
|
3586
|
+
})(templateObject_3$m || (templateObject_3$m = __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"
|
|
3587
3587
|
/**
|
|
3588
3588
|
* StatusBadge component for displaying transaction or task status
|
|
3589
3589
|
*
|
|
@@ -3663,29 +3663,29 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
3663
3663
|
});
|
|
3664
3664
|
};
|
|
3665
3665
|
StatusBadge.displayName = 'StatusBadge';
|
|
3666
|
-
var templateObject_1$
|
|
3666
|
+
var templateObject_1$u, templateObject_2$o, templateObject_3$m;
|
|
3667
3667
|
|
|
3668
|
-
var semantic$
|
|
3669
|
-
var color$4 = semantic$
|
|
3670
|
-
spacing$4 = semantic$
|
|
3671
|
-
border$6 = semantic$
|
|
3672
|
-
typography$1 = semantic$
|
|
3673
|
-
size = semantic$
|
|
3674
|
-
var layout$
|
|
3675
|
-
var radius
|
|
3668
|
+
var semantic$e = tokensData.semantic;
|
|
3669
|
+
var color$4 = semantic$e.color,
|
|
3670
|
+
spacing$4 = semantic$e.spacing,
|
|
3671
|
+
border$6 = semantic$e.border,
|
|
3672
|
+
typography$1 = semantic$e.typography,
|
|
3673
|
+
size = semantic$e.size;
|
|
3674
|
+
var layout$3 = spacing$4.layout;
|
|
3675
|
+
var radius = border$6.radius;
|
|
3676
3676
|
var StyledTag = styled.span.withConfig({
|
|
3677
3677
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3678
3678
|
return !prop.startsWith('$');
|
|
3679
3679
|
},
|
|
3680
3680
|
displayName: "Tag__StyledTag",
|
|
3681
3681
|
componentId: "sc-lzfmti-0"
|
|
3682
|
-
})(templateObject_1$
|
|
3682
|
+
})(templateObject_1$t || (templateObject_1$t = __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"
|
|
3683
3683
|
/**
|
|
3684
3684
|
* Tag component for categorizing and labeling content
|
|
3685
3685
|
*
|
|
3686
3686
|
* A static, non-interactive label used to categorize elements or objects in the UI.
|
|
3687
3687
|
* Tags help users quickly identify and understand content classification.
|
|
3688
|
-
*/])), radius
|
|
3688
|
+
*/])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, typography$1.button3, function (_a) {
|
|
3689
3689
|
var $variant = _a.$variant;
|
|
3690
3690
|
switch ($variant) {
|
|
3691
3691
|
case 'interactive':
|
|
@@ -3762,61 +3762,45 @@ var Tag = function Tag(_a) {
|
|
|
3762
3762
|
children: children
|
|
3763
3763
|
}));
|
|
3764
3764
|
};
|
|
3765
|
-
var templateObject_1$
|
|
3765
|
+
var templateObject_1$t;
|
|
3766
3766
|
|
|
3767
3767
|
// Destructure tokens for cleaner access
|
|
3768
|
-
var semantic$
|
|
3769
|
-
var
|
|
3770
|
-
|
|
3771
|
-
border$5 = semantic$c.border;
|
|
3772
|
-
var layout$1 = spacing$3.layout;
|
|
3773
|
-
var background = color$3.background,
|
|
3774
|
-
icon = color$3.icon;
|
|
3775
|
-
var radius = border$5.radius;
|
|
3776
|
-
var StyledHeader$2 = styled.div.withConfig({
|
|
3777
|
-
displayName: "AccountCard__StyledHeader",
|
|
3778
|
-
componentId: "sc-1erp7zn-0"
|
|
3779
|
-
})(templateObject_1$r || (templateObject_1$r = __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"])), layout$1.md);
|
|
3780
|
-
var StyledIconWrapper = styled.div.withConfig({
|
|
3781
|
-
displayName: "AccountCard__StyledIconWrapper",
|
|
3782
|
-
componentId: "sc-1erp7zn-1"
|
|
3783
|
-
})(templateObject_2$m || (templateObject_2$m = __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"])), background.inverse, radius.md, icon.interactive);
|
|
3768
|
+
var semantic$d = tokensData.semantic;
|
|
3769
|
+
var spacing$3 = semantic$d.spacing;
|
|
3770
|
+
var layout$2 = spacing$3.layout;
|
|
3784
3771
|
var StyledBalanceSection = styled.div.withConfig({
|
|
3785
3772
|
displayName: "AccountCard__StyledBalanceSection",
|
|
3786
|
-
componentId: "sc-1erp7zn-
|
|
3787
|
-
})(
|
|
3773
|
+
componentId: "sc-1erp7zn-0"
|
|
3774
|
+
})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), layout$2.lg);
|
|
3788
3775
|
var StyledTrendSection = styled.div.withConfig({
|
|
3789
3776
|
displayName: "AccountCard__StyledTrendSection",
|
|
3790
|
-
componentId: "sc-1erp7zn-
|
|
3791
|
-
})(
|
|
3792
|
-
|
|
3777
|
+
componentId: "sc-1erp7zn-1"
|
|
3778
|
+
})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), layout$2.xs);
|
|
3779
|
+
styled.div.withConfig({
|
|
3793
3780
|
displayName: "AccountCard__StyledActions",
|
|
3794
|
-
componentId: "sc-1erp7zn-
|
|
3795
|
-
})(
|
|
3781
|
+
componentId: "sc-1erp7zn-2"
|
|
3782
|
+
})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n margin-top: auto;\n"], ["\n display: flex;\n gap: ", ";\n margin-top: auto;\n"])), layout$2.sm);
|
|
3796
3783
|
var StyledStackWrapper = styled.div.withConfig({
|
|
3797
3784
|
displayName: "AccountCard__StyledStackWrapper",
|
|
3798
|
-
componentId: "sc-1erp7zn-
|
|
3799
|
-
})(
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
savings: 'star',
|
|
3807
|
-
// Will use piggyBank icon
|
|
3808
|
-
credit: 'paper',
|
|
3809
|
-
// Will use creditCard icon
|
|
3810
|
-
investment: 'star',
|
|
3811
|
-
// Will use chartLine icon
|
|
3812
|
-
loan: 'paper' // Will use document icon
|
|
3813
|
-
};
|
|
3785
|
+
componentId: "sc-1erp7zn-3"
|
|
3786
|
+
})(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
3787
|
+
var StyledHeaderWrapper = styled.div.withConfig({
|
|
3788
|
+
displayName: "AccountCard__StyledHeaderWrapper",
|
|
3789
|
+
componentId: "sc-1erp7zn-4"
|
|
3790
|
+
})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n min-height: 48px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: ", ";\n\n & > span {\n margin-top: -", ";\n }\n"], ["\n min-height: 48px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: ", ";\n\n & > span {\n margin-top: -", ";\n }\n"
|
|
3791
|
+
// Map trend direction to icon and color
|
|
3792
|
+
])), layout$2.none, layout$2.xs);
|
|
3814
3793
|
// Map trend direction to icon and color
|
|
3815
3794
|
var trendToIcon = {
|
|
3816
3795
|
up: 'arrowUp',
|
|
3817
3796
|
down: 'arrowDown',
|
|
3818
3797
|
neutral: 'arrowRight'
|
|
3819
3798
|
};
|
|
3799
|
+
var trendToColor = {
|
|
3800
|
+
up: 'green',
|
|
3801
|
+
down: 'red',
|
|
3802
|
+
neutral: 'blue'
|
|
3803
|
+
};
|
|
3820
3804
|
/**
|
|
3821
3805
|
* AccountCard component
|
|
3822
3806
|
*
|
|
@@ -3824,11 +3808,10 @@ var trendToIcon = {
|
|
|
3824
3808
|
* name, balance, optional trend indicator, and action buttons. Minimum
|
|
3825
3809
|
* 300x200px with elevation and hover effects.
|
|
3826
3810
|
*
|
|
3827
|
-
* Composes: Stack, Box,
|
|
3811
|
+
* Composes: Stack, Box, Avatar, Typography, MoneyDisplay, Button
|
|
3828
3812
|
*/
|
|
3829
3813
|
var AccountCard = function AccountCard(_a) {
|
|
3830
|
-
var
|
|
3831
|
-
accountName = _a.accountName,
|
|
3814
|
+
var accountName = _a.accountName,
|
|
3832
3815
|
balance = _a.balance,
|
|
3833
3816
|
accountNumber = _a.accountNumber,
|
|
3834
3817
|
trend = _a.trend,
|
|
@@ -3840,11 +3823,9 @@ var AccountCard = function AccountCard(_a) {
|
|
|
3840
3823
|
onClick = _a.onClick,
|
|
3841
3824
|
dataTestId = _a["data-testid"];
|
|
3842
3825
|
var isClickable = !!onClick;
|
|
3843
|
-
// Get account type icon
|
|
3844
|
-
var accountIcon = accountTypeToIcon[accountType];
|
|
3845
3826
|
// Get trend icon and color
|
|
3846
3827
|
var trendIcon = trend ? trendToIcon[trend] : undefined;
|
|
3847
|
-
var trendColor = trend
|
|
3828
|
+
var trendColor = trend ? trendToColor[trend] : undefined;
|
|
3848
3829
|
var handleClick = function handleClick() {
|
|
3849
3830
|
if (isClickable && onClick) {
|
|
3850
3831
|
onClick();
|
|
@@ -3858,9 +3839,8 @@ var AccountCard = function AccountCard(_a) {
|
|
|
3858
3839
|
};
|
|
3859
3840
|
return jsx(Box, {
|
|
3860
3841
|
minWidth: "300px",
|
|
3861
|
-
minHeight: "200px",
|
|
3862
3842
|
p: "lg",
|
|
3863
|
-
bg: "
|
|
3843
|
+
bg: "subtle",
|
|
3864
3844
|
border: "default",
|
|
3865
3845
|
borderRadius: "xl",
|
|
3866
3846
|
transition: "all 0.2s ease",
|
|
@@ -3875,64 +3855,75 @@ var AccountCard = function AccountCard(_a) {
|
|
|
3875
3855
|
"data-testid": dataTestId,
|
|
3876
3856
|
children: jsx(StyledStackWrapper, {
|
|
3877
3857
|
children: jsxs(Stack, {
|
|
3878
|
-
direction: "
|
|
3879
|
-
|
|
3880
|
-
children: [
|
|
3881
|
-
|
|
3882
|
-
|
|
3858
|
+
direction: "row",
|
|
3859
|
+
justifyContent: "space-between",
|
|
3860
|
+
children: [jsxs(Stack, {
|
|
3861
|
+
direction: "row",
|
|
3862
|
+
gap: "md",
|
|
3863
|
+
children: [jsx(Avatar, {
|
|
3864
|
+
name: accountName,
|
|
3865
|
+
size: "lg",
|
|
3866
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-avatar") : undefined
|
|
3867
|
+
}), jsxs(Stack, {
|
|
3868
|
+
direction: "column",
|
|
3869
|
+
justifyContent: "space-between",
|
|
3870
|
+
alignItems: "stretch",
|
|
3883
3871
|
gap: "md",
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
-
children:
|
|
3889
|
-
|
|
3890
|
-
|
|
3891
|
-
|
|
3872
|
+
children: [jsx(Stack, {
|
|
3873
|
+
direction: "row",
|
|
3874
|
+
gap: "md",
|
|
3875
|
+
alignItems: "center",
|
|
3876
|
+
children: jsxs(StyledHeaderWrapper, {
|
|
3877
|
+
children: [jsx(Typography, {
|
|
3878
|
+
variant: "h4",
|
|
3879
|
+
children: accountName
|
|
3880
|
+
}), accountNumber && jsxs(Typography, {
|
|
3881
|
+
variant: "small",
|
|
3882
|
+
color: "subdued",
|
|
3883
|
+
children: ["\u2022\u2022\u2022\u2022 ", accountNumber]
|
|
3884
|
+
})]
|
|
3885
|
+
})
|
|
3886
|
+
}), jsx(StyledBalanceSection, {
|
|
3887
|
+
children: jsxs(Stack, {
|
|
3888
|
+
direction: "row",
|
|
3889
|
+
gap: "sm",
|
|
3890
|
+
children: [jsx(MoneyDisplay, {
|
|
3891
|
+
amount: balance,
|
|
3892
|
+
currency: currency,
|
|
3893
|
+
size: "medium",
|
|
3894
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-balance") : undefined
|
|
3895
|
+
}), jsx(Typography, {
|
|
3896
|
+
color: "subdued",
|
|
3897
|
+
children: "Available"
|
|
3898
|
+
}), trend && trendValue && jsx(StyledTrendSection, {
|
|
3899
|
+
"aria-label": "Trend ".concat(trend),
|
|
3900
|
+
role: "img",
|
|
3901
|
+
children: jsx(CategoryBadge, {
|
|
3902
|
+
size: "small",
|
|
3903
|
+
icon: trendIcon,
|
|
3904
|
+
color: trendColor,
|
|
3905
|
+
variant: "minimal",
|
|
3906
|
+
children: trendValue
|
|
3907
|
+
})
|
|
3908
|
+
})]
|
|
3892
3909
|
})
|
|
3893
|
-
}), jsxs(Stack, {
|
|
3894
|
-
direction: "column",
|
|
3895
|
-
gap: "none",
|
|
3896
|
-
children: [jsx(Typography, {
|
|
3897
|
-
variant: "h4",
|
|
3898
|
-
children: accountName
|
|
3899
|
-
}), accountNumber && jsxs(Typography, {
|
|
3900
|
-
variant: "caption",
|
|
3901
|
-
color: "subdued",
|
|
3902
|
-
children: ["\u2022\u2022\u2022\u2022 ", accountNumber]
|
|
3903
|
-
})]
|
|
3904
|
-
})]
|
|
3905
|
-
})
|
|
3906
|
-
}), jsxs(StyledBalanceSection, {
|
|
3907
|
-
children: [jsxs(Stack, {
|
|
3908
|
-
direction: "column",
|
|
3909
|
-
gap: "xs",
|
|
3910
|
-
children: [jsx(Typography, {
|
|
3911
|
-
variant: "caption",
|
|
3912
|
-
color: "subdued",
|
|
3913
|
-
children: "Balance"
|
|
3914
|
-
}), jsx(MoneyDisplay, {
|
|
3915
|
-
amount: balance,
|
|
3916
|
-
currency: currency,
|
|
3917
|
-
size: "xlarge",
|
|
3918
|
-
weight: "bold",
|
|
3919
|
-
"data-testid": dataTestId ? "".concat(dataTestId, "-balance") : undefined
|
|
3920
|
-
})]
|
|
3921
|
-
}), trend && trendValue && jsxs(StyledTrendSection, {
|
|
3922
|
-
"aria-label": "Trend ".concat(trend),
|
|
3923
|
-
role: "img",
|
|
3924
|
-
children: [jsx(Icon, {
|
|
3925
|
-
name: trendIcon,
|
|
3926
|
-
size: "xs",
|
|
3927
|
-
iconColor: trendColor
|
|
3928
|
-
}), jsx(Typography, {
|
|
3929
|
-
variant: "caption",
|
|
3930
|
-
color: trendColor,
|
|
3931
|
-
children: trendValue
|
|
3932
3910
|
})]
|
|
3933
3911
|
})]
|
|
3934
|
-
}), (action || secondaryAction) && jsxs(
|
|
3935
|
-
|
|
3912
|
+
}), (action || secondaryAction) && jsxs(Stack, {
|
|
3913
|
+
direction: "row",
|
|
3914
|
+
gap: "sm",
|
|
3915
|
+
justifyContent: "flex-end",
|
|
3916
|
+
children: [secondaryAction && jsx(Button, {
|
|
3917
|
+
onClick: function onClick(e) {
|
|
3918
|
+
e.stopPropagation();
|
|
3919
|
+
secondaryAction.onClick();
|
|
3920
|
+
},
|
|
3921
|
+
variant: secondaryAction.variant || 'secondary',
|
|
3922
|
+
iconName: secondaryAction.icon,
|
|
3923
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined,
|
|
3924
|
+
size: "small",
|
|
3925
|
+
children: secondaryAction.label
|
|
3926
|
+
}), action && jsx(Button, {
|
|
3936
3927
|
onClick: function onClick(e) {
|
|
3937
3928
|
e.stopPropagation();
|
|
3938
3929
|
action.onClick();
|
|
@@ -3940,42 +3931,34 @@ var AccountCard = function AccountCard(_a) {
|
|
|
3940
3931
|
variant: action.variant || 'primary',
|
|
3941
3932
|
iconName: action.icon,
|
|
3942
3933
|
"data-testid": dataTestId ? "".concat(dataTestId, "-action") : undefined,
|
|
3934
|
+
size: "small",
|
|
3943
3935
|
children: action.label
|
|
3944
|
-
}), secondaryAction && jsx(Button, {
|
|
3945
|
-
onClick: function onClick(e) {
|
|
3946
|
-
e.stopPropagation();
|
|
3947
|
-
secondaryAction.onClick();
|
|
3948
|
-
},
|
|
3949
|
-
variant: secondaryAction.variant || 'naked',
|
|
3950
|
-
iconName: secondaryAction.icon,
|
|
3951
|
-
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined,
|
|
3952
|
-
children: secondaryAction.label
|
|
3953
3936
|
})]
|
|
3954
3937
|
})]
|
|
3955
3938
|
})
|
|
3956
3939
|
})
|
|
3957
3940
|
});
|
|
3958
3941
|
};
|
|
3959
|
-
var templateObject_1$
|
|
3942
|
+
var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$e;
|
|
3960
3943
|
|
|
3961
|
-
var semantic$
|
|
3962
|
-
base$
|
|
3944
|
+
var semantic$c = tokensData.semantic,
|
|
3945
|
+
base$a = tokensData.base;
|
|
3963
3946
|
var StyledListItem = styled.li.withConfig({
|
|
3964
3947
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3965
3948
|
return !prop.startsWith('$');
|
|
3966
3949
|
},
|
|
3967
3950
|
displayName: "ListItem__StyledListItem",
|
|
3968
3951
|
componentId: "sc-1wzzt21-0"
|
|
3969
|
-
})(templateObject_1$
|
|
3952
|
+
})(templateObject_1$r || (templateObject_1$r = __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 /* Destructive state - apply error color to text */\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 \n /* Destructive state - apply error color to text */\n ", "\n"])), function (_a) {
|
|
3970
3953
|
var $interactive = _a.$interactive;
|
|
3971
3954
|
return $interactive && 'user-select: none;';
|
|
3972
3955
|
}, function (_a) {
|
|
3973
3956
|
var $disabled = _a.$disabled;
|
|
3974
|
-
return $disabled && "\n opacity: ".concat(base$
|
|
3957
|
+
return $disabled && "\n opacity: ".concat(base$a.opacity[50], ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
3975
3958
|
}, function (_a) {
|
|
3976
3959
|
var $destructive = _a.$destructive,
|
|
3977
3960
|
$disabled = _a.$disabled;
|
|
3978
|
-
return $destructive && !$disabled && "\n color: ".concat(semantic$
|
|
3961
|
+
return $destructive && !$disabled && "\n color: ".concat(semantic$c.color.text.error, ";\n ");
|
|
3979
3962
|
});
|
|
3980
3963
|
var StyledItemContent = styled.div.withConfig({
|
|
3981
3964
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3983,12 +3966,12 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
3983
3966
|
},
|
|
3984
3967
|
displayName: "ListItem__StyledItemContent",
|
|
3985
3968
|
componentId: "sc-1wzzt21-1"
|
|
3986
|
-
})(templateObject_2$
|
|
3969
|
+
})(templateObject_2$m || (templateObject_2$m = __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$c.spacing.layout.md, function (_a) {
|
|
3987
3970
|
var $spacing = _a.$spacing;
|
|
3988
|
-
return $spacing === 'compact' ? "".concat(semantic$
|
|
3989
|
-
}, base$
|
|
3971
|
+
return $spacing === 'compact' ? "".concat(semantic$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.md) : "".concat(semantic$c.spacing.layout.md, " ").concat(semantic$c.spacing.layout.lg);
|
|
3972
|
+
}, base$a.border.radius[2], function (_a) {
|
|
3990
3973
|
var $selected = _a.$selected;
|
|
3991
|
-
return $selected ? semantic$
|
|
3974
|
+
return $selected ? semantic$c.color.background['interactive-subtle'] : 'transparent';
|
|
3992
3975
|
}, function (_a) {
|
|
3993
3976
|
var $interactive = _a.$interactive,
|
|
3994
3977
|
$disabled = _a.$disabled;
|
|
@@ -4000,26 +3983,26 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
4000
3983
|
$disabled = _a.$disabled,
|
|
4001
3984
|
$selected = _a.$selected;
|
|
4002
3985
|
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 ");
|
|
4003
|
-
}, semantic$
|
|
3986
|
+
}, semantic$c.color.border.interactive);
|
|
4004
3987
|
var StyledIconContainer$1 = styled.div.withConfig({
|
|
4005
3988
|
displayName: "ListItem__StyledIconContainer",
|
|
4006
3989
|
componentId: "sc-1wzzt21-2"
|
|
4007
|
-
})(templateObject_3$
|
|
3990
|
+
})(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
4008
3991
|
var StyledTextContent = styled.div.withConfig({
|
|
4009
3992
|
displayName: "ListItem__StyledTextContent",
|
|
4010
3993
|
componentId: "sc-1wzzt21-3"
|
|
4011
|
-
})(templateObject_4$
|
|
3994
|
+
})(templateObject_4$h || (templateObject_4$h = __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$c.spacing.layout.xs);
|
|
4012
3995
|
var StyledRightContent = styled.div.withConfig({
|
|
4013
3996
|
displayName: "ListItem__StyledRightContent",
|
|
4014
3997
|
componentId: "sc-1wzzt21-4"
|
|
4015
|
-
})(templateObject_5$
|
|
3998
|
+
})(templateObject_5$d || (templateObject_5$d = __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$c.spacing.layout.sm);
|
|
4016
3999
|
var StyledChevronIcon = styled.div.withConfig({
|
|
4017
4000
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4018
4001
|
return !prop.startsWith('$');
|
|
4019
4002
|
},
|
|
4020
4003
|
displayName: "ListItem__StyledChevronIcon",
|
|
4021
4004
|
componentId: "sc-1wzzt21-5"
|
|
4022
|
-
})(templateObject_6$
|
|
4005
|
+
})(templateObject_6$b || (templateObject_6$b = __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$c.color.icon.subdued, function (_a) {
|
|
4023
4006
|
var $expanded = _a.$expanded;
|
|
4024
4007
|
return $expanded ? '180deg' : '0deg';
|
|
4025
4008
|
});
|
|
@@ -4029,7 +4012,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
4029
4012
|
},
|
|
4030
4013
|
displayName: "ListItem__StyledExpandedContent",
|
|
4031
4014
|
componentId: "sc-1wzzt21-6"
|
|
4032
|
-
})(templateObject_7$
|
|
4015
|
+
})(templateObject_7$9 || (templateObject_7$9 = __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) {
|
|
4033
4016
|
var $expanded = _a.$expanded;
|
|
4034
4017
|
return $expanded ? '1000px' : '0';
|
|
4035
4018
|
}, function (_a) {
|
|
@@ -4038,7 +4021,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
4038
4021
|
}, function (_a) {
|
|
4039
4022
|
var $expanded = _a.$expanded,
|
|
4040
4023
|
$spacing = _a.$spacing;
|
|
4041
|
-
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$
|
|
4024
|
+
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.md, " ").concat(semantic$c.spacing.layout.sm, " 48px") : "".concat(semantic$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.lg, " ").concat(semantic$c.spacing.layout.md, " 60px"), ";\n background-color: ").concat(semantic$c.color.background['subtle'], ";\n border-radius: ").concat(base$a.border.radius[2], ";\n margin: 0 ").concat($spacing === 'compact' ? semantic$c.spacing.layout.md : semantic$c.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$c.spacing.layout.sm : semantic$c.spacing.layout.md, ";\n ");
|
|
4042
4025
|
});
|
|
4043
4026
|
var ListItem = function ListItem(_a) {
|
|
4044
4027
|
var primary = _a.primary,
|
|
@@ -4151,40 +4134,40 @@ var ListItem = function ListItem(_a) {
|
|
|
4151
4134
|
}));
|
|
4152
4135
|
};
|
|
4153
4136
|
ListItem.displayName = 'ListItem';
|
|
4154
|
-
var templateObject_1$
|
|
4137
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$9;
|
|
4155
4138
|
|
|
4156
4139
|
var _a$4 = tokensData.semantic,
|
|
4157
|
-
color$
|
|
4158
|
-
border$
|
|
4159
|
-
layout = _a$4.spacing.layout,
|
|
4140
|
+
color$3 = _a$4.color,
|
|
4141
|
+
border$5 = _a$4.border,
|
|
4142
|
+
layout$1 = _a$4.spacing.layout,
|
|
4160
4143
|
motion = _a$4.motion,
|
|
4161
|
-
elevation = _a$4.elevation;
|
|
4162
|
-
var slideUp = keyframes(templateObject_1$
|
|
4163
|
-
var fadeIn$
|
|
4164
|
-
var StyledOverlay$
|
|
4144
|
+
elevation$1 = _a$4.elevation;
|
|
4145
|
+
var slideUp = keyframes(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
4146
|
+
var fadeIn$2 = keyframes(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
4147
|
+
var StyledOverlay$2 = styled.div.withConfig({
|
|
4165
4148
|
displayName: "ActionSheet__StyledOverlay",
|
|
4166
4149
|
componentId: "sc-regbol-0"
|
|
4167
|
-
})(templateObject_3$
|
|
4150
|
+
})(templateObject_3$j || (templateObject_3$j = __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$2);
|
|
4168
4151
|
var StyledActionSheet = styled.div.withConfig({
|
|
4169
4152
|
displayName: "ActionSheet__StyledActionSheet",
|
|
4170
4153
|
componentId: "sc-regbol-1"
|
|
4171
|
-
})(templateObject_4$
|
|
4172
|
-
var StyledHeader$
|
|
4154
|
+
})(templateObject_4$g || (templateObject_4$g = __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"])), color$3.background.subtle, border$5.radius.lg, border$5.radius.lg, elevation$1.overlay, slideUp);
|
|
4155
|
+
var StyledHeader$2 = styled.div.withConfig({
|
|
4173
4156
|
displayName: "ActionSheet__StyledHeader",
|
|
4174
4157
|
componentId: "sc-regbol-2"
|
|
4175
|
-
})(templateObject_5$
|
|
4158
|
+
})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", ";\n"])), layout$1.lg, layout$1.lg, layout$1.md, border$5["default"]);
|
|
4176
4159
|
var StyledHeaderContent = styled.div.withConfig({
|
|
4177
4160
|
displayName: "ActionSheet__StyledHeaderContent",
|
|
4178
4161
|
componentId: "sc-regbol-3"
|
|
4179
|
-
})(templateObject_6$
|
|
4162
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
4180
4163
|
var StyledCloseButton = styled.button.withConfig({
|
|
4181
4164
|
displayName: "ActionSheet__StyledCloseButton",
|
|
4182
4165
|
componentId: "sc-regbol-4"
|
|
4183
|
-
})(templateObject_7$
|
|
4166
|
+
})(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: ", ";\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: ", ";\n outline-offset: ", ";\n }\n"])), layout$1.sm, color$3.icon.subdued, border$5.radius.sm, motion.hover, layout$1.sm, color$3.icon["default"], color$3.background.surface, border$5.focus, layout$1.xs);
|
|
4184
4167
|
var StyledActionsList = styled.ul.withConfig({
|
|
4185
4168
|
displayName: "ActionSheet__StyledActionsList",
|
|
4186
4169
|
componentId: "sc-regbol-5"
|
|
4187
|
-
})(templateObject_8$
|
|
4170
|
+
})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n padding: ", " ", ";\n margin: 0;\n list-style: none;\n"], ["\n padding: ", " ", ";\n margin: 0;\n list-style: none;\n"
|
|
4188
4171
|
/**
|
|
4189
4172
|
* ActionSheet component for bottom sheet modals
|
|
4190
4173
|
*
|
|
@@ -4217,7 +4200,7 @@ var StyledActionsList = styled.ul.withConfig({
|
|
|
4217
4200
|
* ]}
|
|
4218
4201
|
* />
|
|
4219
4202
|
* ```
|
|
4220
|
-
*/])), layout.sm, layout.md);
|
|
4203
|
+
*/])), layout$1.sm, layout$1.md);
|
|
4221
4204
|
/**
|
|
4222
4205
|
* ActionSheet component for bottom sheet modals
|
|
4223
4206
|
*
|
|
@@ -4331,7 +4314,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
4331
4314
|
});
|
|
4332
4315
|
var hasDestructive = destructiveIndex >= 0;
|
|
4333
4316
|
return /*#__PURE__*/createPortal(jsxs(Fragment, {
|
|
4334
|
-
children: [jsx(StyledOverlay$
|
|
4317
|
+
children: [jsx(StyledOverlay$2, {
|
|
4335
4318
|
onClick: handleOverlayClick
|
|
4336
4319
|
}), jsxs(StyledActionSheet, {
|
|
4337
4320
|
ref: sheetRef,
|
|
@@ -4340,7 +4323,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
4340
4323
|
"aria-labelledby": title ? 'action-sheet-title' : undefined,
|
|
4341
4324
|
"aria-describedby": description ? 'action-sheet-description' : undefined,
|
|
4342
4325
|
"data-testid": dataTestId,
|
|
4343
|
-
children: [(title || description || showCloseButton) && jsxs(StyledHeader$
|
|
4326
|
+
children: [(title || description || showCloseButton) && jsxs(StyledHeader$2, {
|
|
4344
4327
|
children: [jsx(StyledHeaderContent, {
|
|
4345
4328
|
children: jsxs(Stack, {
|
|
4346
4329
|
direction: "column",
|
|
@@ -4396,7 +4379,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
4396
4379
|
})]
|
|
4397
4380
|
}), document.body);
|
|
4398
4381
|
};
|
|
4399
|
-
var templateObject_1$
|
|
4382
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8, templateObject_8$6;
|
|
4400
4383
|
|
|
4401
4384
|
function detectSpeechRecognitionConstructor(targetWindow) {
|
|
4402
4385
|
if (!targetWindow) return null;
|
|
@@ -4496,69 +4479,69 @@ function agentInputStateTransition(currentState, event) {
|
|
|
4496
4479
|
}
|
|
4497
4480
|
}
|
|
4498
4481
|
|
|
4499
|
-
var semantic$
|
|
4500
|
-
base$
|
|
4482
|
+
var semantic$b = tokensData.semantic,
|
|
4483
|
+
base$9 = tokensData.base,
|
|
4501
4484
|
component$1 = tokensData.component;
|
|
4502
4485
|
var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
|
|
4503
4486
|
var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
|
|
4504
4487
|
var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
|
|
4505
|
-
var rotateRing = keyframes(templateObject_1$
|
|
4488
|
+
var rotateRing = keyframes(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"], ["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"])));
|
|
4506
4489
|
var Container = styled.div.withConfig({
|
|
4507
4490
|
displayName: "AgentInput__Container",
|
|
4508
4491
|
componentId: "sc-fhl996-0"
|
|
4509
|
-
})(templateObject_2$
|
|
4492
|
+
})(templateObject_2$k || (templateObject_2$k = __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$9.spacing[2]);
|
|
4510
4493
|
var ControlsRow = styled.div.withConfig({
|
|
4511
4494
|
displayName: "AgentInput__ControlsRow",
|
|
4512
4495
|
componentId: "sc-fhl996-1"
|
|
4513
|
-
})(templateObject_3$
|
|
4496
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4514
4497
|
var InputShell = styled.div.withConfig({
|
|
4515
4498
|
displayName: "AgentInput__InputShell",
|
|
4516
4499
|
componentId: "sc-fhl996-2"
|
|
4517
|
-
})(templateObject_4$
|
|
4500
|
+
})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", " ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n\n &:focus-within {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n\n &[data-disabled='true'] {\n background-color: ", ";\n border-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", " ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n\n &:focus-within {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n\n &[data-disabled='true'] {\n background-color: ", ";\n border-color: ", ";\n }\n"])), base$9.spacing[2], semantic$b.spacing.layout.xs, semantic$b.spacing.layout.sm, semantic$b.spacing.layout.xs, component$1.input["default"].paddingX, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$b.border.radius['3xl'], semantic$b.elevation.raised, component$1.input.focus.borderColor, component$1.input.focus.outline, component$1.input.focus.outlineOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
|
|
4518
4501
|
var Input = styled.input.withConfig({
|
|
4519
4502
|
displayName: "AgentInput__Input",
|
|
4520
4503
|
componentId: "sc-fhl996-3"
|
|
4521
|
-
})(templateObject_5$
|
|
4504
|
+
})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n min-height: ", ";\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 min-width: 0;\n min-height: ", ";\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"])), base$9.spacing[12], semantic$b.typography.body, semantic$b.color.text["default"], semantic$b.color.text.subdued, semantic$b.color.text.disabled);
|
|
4522
4505
|
var InputActions = styled.div.withConfig({
|
|
4523
4506
|
displayName: "AgentInput__InputActions",
|
|
4524
4507
|
componentId: "sc-fhl996-4"
|
|
4525
|
-
})(templateObject_6$
|
|
4508
|
+
})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"])), semantic$b.spacing.layout.sm);
|
|
4526
4509
|
var CircularActionIconButton = styled(IconButton).withConfig({
|
|
4527
4510
|
displayName: "AgentInput__CircularActionIconButton",
|
|
4528
4511
|
componentId: "sc-fhl996-5"
|
|
4529
|
-
})(templateObject_7$
|
|
4512
|
+
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$b.border.radius.circle);
|
|
4530
4513
|
var InputWrapper = styled.div.withConfig({
|
|
4531
4514
|
displayName: "AgentInput__InputWrapper",
|
|
4532
4515
|
componentId: "sc-fhl996-6"
|
|
4533
|
-
})(templateObject_8$
|
|
4516
|
+
})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n"], ["\n flex: 1;\n min-width: 0;\n"])));
|
|
4534
4517
|
var MicButtonWrapper = styled.div.withConfig({
|
|
4535
4518
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4536
4519
|
return !prop.startsWith('$');
|
|
4537
4520
|
},
|
|
4538
4521
|
displayName: "AgentInput__MicButtonWrapper",
|
|
4539
4522
|
componentId: "sc-fhl996-7"
|
|
4540
|
-
})(templateObject_9$
|
|
4523
|
+
})(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n border-radius: ", ";\n\n & > button {\n position: relative;\n z-index: 1;\n }\n"], ["\n position: relative;\n display: inline-flex;\n border-radius: ", ";\n\n & > button {\n position: relative;\n z-index: 1;\n }\n"])), semantic$b.border.radius.circle);
|
|
4541
4524
|
var MicListeningRing = styled.span.withConfig({
|
|
4542
4525
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4543
4526
|
return !prop.startsWith('$');
|
|
4544
4527
|
},
|
|
4545
4528
|
displayName: "AgentInput__MicListeningRing",
|
|
4546
4529
|
componentId: "sc-fhl996-8"
|
|
4547
|
-
})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"], ["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"])), base$
|
|
4530
|
+
})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"], ["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"])), base$9.border.width[2], base$9.spacing[1], component$1.iconButton.focus.outlineOffset, semantic$b.border.radius.circle, semantic$b.color.background['interactive-subtle'], semantic$b.color.background.interactive, semantic$b.color.background['interactive-hover'], semantic$b.color.background.interactive, semantic$b.color.background['interactive-subtle'], function (_a) {
|
|
4548
4531
|
var $reducedMotion = _a.$reducedMotion;
|
|
4549
4532
|
return !$reducedMotion && css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n animation: ", " 1300ms linear infinite;\n "], ["\n animation: ", " 1300ms linear infinite;\n "])), rotateRing);
|
|
4550
4533
|
});
|
|
4551
4534
|
var StatusRow = styled.div.withConfig({
|
|
4552
4535
|
displayName: "AgentInput__StatusRow",
|
|
4553
4536
|
componentId: "sc-fhl996-9"
|
|
4554
|
-
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"])), base$
|
|
4537
|
+
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"])), base$9.spacing[3], base$9.spacing[6]);
|
|
4555
4538
|
var StatusText = styled.div.withConfig({
|
|
4556
4539
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4557
4540
|
return !prop.startsWith('$');
|
|
4558
4541
|
},
|
|
4559
4542
|
displayName: "AgentInput__StatusText",
|
|
4560
4543
|
componentId: "sc-fhl996-10"
|
|
4561
|
-
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$
|
|
4544
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$b.spacing.layout.xl);
|
|
4562
4545
|
var StatusAnnouncement = styled.div.withConfig({
|
|
4563
4546
|
displayName: "AgentInput__StatusAnnouncement",
|
|
4564
4547
|
componentId: "sc-fhl996-11"
|
|
@@ -4566,14 +4549,14 @@ var StatusAnnouncement = styled.div.withConfig({
|
|
|
4566
4549
|
var MeterContainer = styled.div.withConfig({
|
|
4567
4550
|
displayName: "AgentInput__MeterContainer",
|
|
4568
4551
|
componentId: "sc-fhl996-12"
|
|
4569
|
-
})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"], ["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"])), base$
|
|
4552
|
+
})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"], ["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"])), base$9.spacing[1], base$9.spacing[4]);
|
|
4570
4553
|
var MeterBar = styled.div.withConfig({
|
|
4571
4554
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4572
4555
|
return !prop.startsWith('$');
|
|
4573
4556
|
},
|
|
4574
4557
|
displayName: "AgentInput__MeterBar",
|
|
4575
4558
|
componentId: "sc-fhl996-13"
|
|
4576
|
-
})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"], ["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"])), base$
|
|
4559
|
+
})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"], ["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"])), base$9.spacing[1], base$9.border.radius[1], semantic$b.color.background.interactive, function (_a) {
|
|
4577
4560
|
var $height = _a.$height;
|
|
4578
4561
|
return "".concat($height * 100, "%");
|
|
4579
4562
|
});
|
|
@@ -5209,10 +5192,10 @@ var AgentInput = function AgentInput(_a) {
|
|
|
5209
5192
|
})]
|
|
5210
5193
|
});
|
|
5211
5194
|
};
|
|
5212
|
-
var templateObject_1$
|
|
5195
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1;
|
|
5213
5196
|
|
|
5214
|
-
var semantic$
|
|
5215
|
-
base$
|
|
5197
|
+
var semantic$a = tokensData.semantic,
|
|
5198
|
+
base$8 = tokensData.base;
|
|
5216
5199
|
// Default icons by variant
|
|
5217
5200
|
var variantIcons = {
|
|
5218
5201
|
error: 'crossCircle',
|
|
@@ -5240,56 +5223,56 @@ var StyledAlert = styled.div.withConfig({
|
|
|
5240
5223
|
},
|
|
5241
5224
|
displayName: "Alert__StyledAlert",
|
|
5242
5225
|
componentId: "sc-18tq5d-0"
|
|
5243
|
-
})(templateObject_1$
|
|
5226
|
+
})(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) {
|
|
5244
5227
|
var $inline = _a.$inline;
|
|
5245
5228
|
return $inline ? 'center' : 'flex-start';
|
|
5246
5229
|
}, function (_a) {
|
|
5247
5230
|
var $inline = _a.$inline;
|
|
5248
|
-
return $inline ? semantic$
|
|
5231
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
|
|
5249
5232
|
}, function (_a) {
|
|
5250
5233
|
var $inline = _a.$inline;
|
|
5251
|
-
return $inline ? semantic$
|
|
5252
|
-
}, base$
|
|
5234
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
|
|
5235
|
+
}, base$8.border.radius[2], function (_a) {
|
|
5253
5236
|
var $variant = _a.$variant;
|
|
5254
5237
|
switch ($variant) {
|
|
5255
5238
|
case 'error':
|
|
5256
|
-
return "\n background-color: ".concat(semantic$
|
|
5239
|
+
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 ");
|
|
5257
5240
|
case 'warning':
|
|
5258
|
-
return "\n background-color: ".concat(semantic$
|
|
5241
|
+
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 ");
|
|
5259
5242
|
case 'success':
|
|
5260
|
-
return "\n background-color: ".concat(semantic$
|
|
5243
|
+
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 ");
|
|
5261
5244
|
case 'info':
|
|
5262
5245
|
default:
|
|
5263
|
-
return "\n background-color: ".concat(semantic$
|
|
5246
|
+
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 ");
|
|
5264
5247
|
}
|
|
5265
|
-
}, base$
|
|
5248
|
+
}, base$8.breakpoint.md, function (_a) {
|
|
5266
5249
|
var $inline = _a.$inline;
|
|
5267
|
-
return $inline ? semantic$
|
|
5250
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.lg;
|
|
5268
5251
|
});
|
|
5269
5252
|
var StyledIconContainer = styled.div.withConfig({
|
|
5270
5253
|
displayName: "Alert__StyledIconContainer",
|
|
5271
5254
|
componentId: "sc-18tq5d-1"
|
|
5272
|
-
})(templateObject_2$
|
|
5255
|
+
})(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"])));
|
|
5273
5256
|
var StyledContent$1 = styled.div.withConfig({
|
|
5274
5257
|
displayName: "Alert__StyledContent",
|
|
5275
5258
|
componentId: "sc-18tq5d-2"
|
|
5276
|
-
})(templateObject_3$
|
|
5259
|
+
})(templateObject_3$h || (templateObject_3$h = __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);
|
|
5277
5260
|
var StyledTitle = styled.span.withConfig({
|
|
5278
5261
|
displayName: "Alert__StyledTitle",
|
|
5279
5262
|
componentId: "sc-18tq5d-3"
|
|
5280
|
-
})(templateObject_4$
|
|
5263
|
+
})(templateObject_4$e || (templateObject_4$e = __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);
|
|
5281
5264
|
var StyledMessage = styled.span.withConfig({
|
|
5282
5265
|
displayName: "Alert__StyledMessage",
|
|
5283
5266
|
componentId: "sc-18tq5d-4"
|
|
5284
|
-
})(templateObject_5$
|
|
5267
|
+
})(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);
|
|
5285
5268
|
var StyledActions = styled.div.withConfig({
|
|
5286
5269
|
displayName: "Alert__StyledActions",
|
|
5287
5270
|
componentId: "sc-18tq5d-5"
|
|
5288
|
-
})(templateObject_6$
|
|
5271
|
+
})(templateObject_6$8 || (templateObject_6$8 = __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);
|
|
5289
5272
|
var StyledDismissButton = styled(IconButton).withConfig({
|
|
5290
5273
|
displayName: "Alert__StyledDismissButton",
|
|
5291
5274
|
componentId: "sc-18tq5d-6"
|
|
5292
|
-
})(templateObject_7$
|
|
5275
|
+
})(templateObject_7$6 || (templateObject_7$6 = __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);
|
|
5293
5276
|
var Alert = function Alert(_a) {
|
|
5294
5277
|
var _b = _a.variant,
|
|
5295
5278
|
variant = _b === void 0 ? 'info' : _b,
|
|
@@ -5357,21 +5340,21 @@ var Alert = function Alert(_a) {
|
|
|
5357
5340
|
}));
|
|
5358
5341
|
};
|
|
5359
5342
|
Alert.displayName = 'Alert';
|
|
5360
|
-
var templateObject_1$
|
|
5343
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6;
|
|
5361
5344
|
|
|
5362
5345
|
var _a$3, _b$1, _c, _d, _e, _f;
|
|
5363
5346
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
5364
5347
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
5365
5348
|
componentId: "sc-7ouzg5-0"
|
|
5366
|
-
})(templateObject_1$
|
|
5349
|
+
})(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');
|
|
5367
5350
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
5368
5351
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
5369
5352
|
componentId: "sc-7ouzg5-1"
|
|
5370
|
-
})(templateObject_2$
|
|
5353
|
+
})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n text-transform: uppercase;\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", ";\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 display: inline-flex;\n align-items: center;\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n text-transform: uppercase;\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", ";\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 display: inline-flex;\n align-items: center;\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', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
|
|
5371
5354
|
var BreadcrumbSeparator = styled.span.withConfig({
|
|
5372
5355
|
displayName: "Breadcrumbs__BreadcrumbSeparator",
|
|
5373
5356
|
componentId: "sc-7ouzg5-2"
|
|
5374
|
-
})(templateObject_3$
|
|
5357
|
+
})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n opacity: 0.5;\n"], ["\n display: inline-flex;\n align-items: center;\n opacity: 0.5;\n"])));
|
|
5375
5358
|
var isInternalUrl = function isInternalUrl(url) {
|
|
5376
5359
|
return url.startsWith('/') && !url.startsWith('http');
|
|
5377
5360
|
};
|
|
@@ -5419,12 +5402,12 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
5419
5402
|
})
|
|
5420
5403
|
});
|
|
5421
5404
|
};
|
|
5422
|
-
var templateObject_1$
|
|
5405
|
+
var templateObject_1$n, templateObject_2$i, templateObject_3$g;
|
|
5423
5406
|
|
|
5424
5407
|
var CardSmallStyled = styled.div.withConfig({
|
|
5425
5408
|
displayName: "CardSmall__CardSmallStyled",
|
|
5426
5409
|
componentId: "sc-jpcqvd-0"
|
|
5427
|
-
})(templateObject_1$
|
|
5410
|
+
})(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);
|
|
5428
5411
|
var CardSmall = function CardSmall(_a) {
|
|
5429
5412
|
var title = _a.title,
|
|
5430
5413
|
picture = _a.picture,
|
|
@@ -5476,13 +5459,13 @@ var CardSmall = function CardSmall(_a) {
|
|
|
5476
5459
|
})
|
|
5477
5460
|
});
|
|
5478
5461
|
};
|
|
5479
|
-
var templateObject_1$
|
|
5462
|
+
var templateObject_1$m;
|
|
5480
5463
|
|
|
5481
|
-
var border$
|
|
5464
|
+
var border$4 = tokensData.base.border;
|
|
5482
5465
|
var CardLargeStyled = styled.div.withConfig({
|
|
5483
5466
|
displayName: "CardLarge__CardLargeStyled",
|
|
5484
5467
|
componentId: "sc-1rfgdzl-0"
|
|
5485
|
-
})(templateObject_1$
|
|
5468
|
+
})(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$4.radius[6]);
|
|
5486
5469
|
var CardLarge = function CardLarge(_a) {
|
|
5487
5470
|
var title = _a.title,
|
|
5488
5471
|
excerpt = _a.excerpt,
|
|
@@ -5535,7 +5518,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
5535
5518
|
})
|
|
5536
5519
|
});
|
|
5537
5520
|
};
|
|
5538
|
-
var templateObject_1$
|
|
5521
|
+
var templateObject_1$l;
|
|
5539
5522
|
|
|
5540
5523
|
/**
|
|
5541
5524
|
* Hidden native checkbox input for accessibility
|
|
@@ -5547,7 +5530,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
5547
5530
|
},
|
|
5548
5531
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
5549
5532
|
componentId: "sc-1ddpctx-0"
|
|
5550
|
-
})(templateObject_1$
|
|
5533
|
+
})(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"
|
|
5551
5534
|
/**
|
|
5552
5535
|
* Custom checkbox visual component
|
|
5553
5536
|
* 24px × 24px for 8px grid alignment
|
|
@@ -5564,7 +5547,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
5564
5547
|
},
|
|
5565
5548
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
5566
5549
|
componentId: "sc-1ddpctx-1"
|
|
5567
|
-
})(templateObject_2$
|
|
5550
|
+
})(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"
|
|
5568
5551
|
/**
|
|
5569
5552
|
* Container for checkbox with proper spacing and alignment
|
|
5570
5553
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -5597,7 +5580,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
5597
5580
|
},
|
|
5598
5581
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
5599
5582
|
componentId: "sc-1ddpctx-2"
|
|
5600
|
-
})(templateObject_3$
|
|
5583
|
+
})(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"
|
|
5601
5584
|
/**
|
|
5602
5585
|
* Label text with proper typography
|
|
5603
5586
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -5614,19 +5597,19 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
5614
5597
|
},
|
|
5615
5598
|
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
5616
5599
|
componentId: "sc-1ddpctx-3"
|
|
5617
|
-
})(templateObject_4$
|
|
5600
|
+
})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
5618
5601
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
5619
5602
|
});
|
|
5620
|
-
var templateObject_1$
|
|
5603
|
+
var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$d;
|
|
5621
5604
|
|
|
5622
5605
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
5623
5606
|
displayName: "Checkbox__StyledFieldContainer",
|
|
5624
5607
|
componentId: "sc-vquz3v-0"
|
|
5625
|
-
})(templateObject_1$
|
|
5608
|
+
})(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]);
|
|
5626
5609
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
5627
5610
|
displayName: "Checkbox__StyledHelperText",
|
|
5628
5611
|
componentId: "sc-vquz3v-1"
|
|
5629
|
-
})(templateObject_2$
|
|
5612
|
+
})(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"
|
|
5630
5613
|
/**
|
|
5631
5614
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
5632
5615
|
*
|
|
@@ -5745,12 +5728,12 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
5745
5728
|
});
|
|
5746
5729
|
});
|
|
5747
5730
|
Checkbox.displayName = 'Checkbox';
|
|
5748
|
-
var templateObject_1$
|
|
5731
|
+
var templateObject_1$j, templateObject_2$g;
|
|
5749
5732
|
|
|
5750
5733
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
5751
5734
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
5752
5735
|
componentId: "sc-ae049w-0"
|
|
5753
|
-
})(templateObject_1$
|
|
5736
|
+
})(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"])));
|
|
5754
5737
|
var ChipGroup = function ChipGroup(_a) {
|
|
5755
5738
|
var labels = _a.labels,
|
|
5756
5739
|
_b = _a.variant,
|
|
@@ -5770,17 +5753,17 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
5770
5753
|
})
|
|
5771
5754
|
});
|
|
5772
5755
|
};
|
|
5773
|
-
var templateObject_1$
|
|
5756
|
+
var templateObject_1$i;
|
|
5774
5757
|
|
|
5775
5758
|
var _a$2 = tokensData.semantic,
|
|
5776
|
-
color$
|
|
5777
|
-
border$
|
|
5759
|
+
color$2 = _a$2.color,
|
|
5760
|
+
border$3 = _a$2.border,
|
|
5778
5761
|
spacing$2 = _a$2.spacing;
|
|
5779
5762
|
_a$2.motion;
|
|
5780
5763
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
5781
5764
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
5782
5765
|
componentId: "sc-1p1t0kp-0"
|
|
5783
|
-
})(templateObject_1$
|
|
5766
|
+
})(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 overflow-y: ", ";\n margin: ", " 0;\n position: relative;\n transition: max-height 300ms ease-in-out;\n \n ", "\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 overflow-y: ", ";\n margin: ", " 0;\n position: relative;\n transition: max-height 300ms ease-in-out;\n \n ", "\n"])), color$2.background.subtle, border$3.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$2.text["default"], function (_a) {
|
|
5784
5767
|
var $isExpanded = _a.$isExpanded,
|
|
5785
5768
|
$needsExpansion = _a.$needsExpansion;
|
|
5786
5769
|
return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
|
|
@@ -5796,17 +5779,17 @@ var StyledCodeBlock = styled.pre.withConfig({
|
|
|
5796
5779
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
5797
5780
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
5798
5781
|
componentId: "sc-1p1t0kp-1"
|
|
5799
|
-
})(templateObject_2$
|
|
5782
|
+
})(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"])));
|
|
5800
5783
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
5801
5784
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
5802
5785
|
componentId: "sc-1p1t0kp-2"
|
|
5803
|
-
})(templateObject_3$
|
|
5786
|
+
})(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);
|
|
5804
5787
|
var ExpandButtonWrapper = styled.div.withConfig({
|
|
5805
5788
|
displayName: "CodeBlock__ExpandButtonWrapper",
|
|
5806
5789
|
componentId: "sc-1p1t0kp-3"
|
|
5807
|
-
})(templateObject_4$
|
|
5790
|
+
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n padding: ", " 0;\n position: absolute;\n bottom: 1px;\n left: 1px;\n right: 1px;\n width: calc(100% - 2px);\n margin-bottom: ", ";\n border-radius: ", ";\n transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n \n ", "\n"], ["\n display: flex;\n justify-content: center;\n padding: ", " 0;\n position: absolute;\n bottom: 1px;\n left: 1px;\n right: 1px;\n width: calc(100% - 2px);\n margin-bottom: ", ";\n border-radius: ", ";\n transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n \n ", "\n"])), spacing$2.layout.sm, spacing$2.layout.sm, tokensData.base.border.radius[2], function (_a) {
|
|
5808
5791
|
var $hasGradient = _a.$hasGradient;
|
|
5809
|
-
return $hasGradient ? "\n margin-top: -".concat(spacing$2.layout['4xl'], ";\n padding-top: ").concat(spacing$2.layout['4xl'], ";\n background: linear-gradient(\n to bottom,\n transparent 0%,\n ").concat(color$
|
|
5792
|
+
return $hasGradient ? "\n margin-top: -".concat(spacing$2.layout['4xl'], ";\n padding-top: ").concat(spacing$2.layout['4xl'], ";\n background: linear-gradient(\n to bottom,\n transparent 0%,\n ").concat(color$2.background.subtle, " 60%\n );\n ") : "\n background: transparent;\n ";
|
|
5810
5793
|
});
|
|
5811
5794
|
var CopyButton = function CopyButton(_a) {
|
|
5812
5795
|
var text = _a.text,
|
|
@@ -5962,27 +5945,27 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
5962
5945
|
})]
|
|
5963
5946
|
});
|
|
5964
5947
|
};
|
|
5965
|
-
var templateObject_1$
|
|
5948
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c;
|
|
5966
5949
|
|
|
5967
|
-
var StyledHeader = styled.div.withConfig({
|
|
5950
|
+
var StyledHeader$1 = styled.div.withConfig({
|
|
5968
5951
|
displayName: "DateGroup__StyledHeader",
|
|
5969
5952
|
componentId: "sc-9nfm1f-0"
|
|
5970
|
-
})(templateObject_1$
|
|
5953
|
+
})(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) {
|
|
5971
5954
|
var $sticky = _a.$sticky;
|
|
5972
5955
|
return $sticky && "\n position: sticky;\n top: 0;\n z-index: 10;\n box-shadow: ".concat(tokensData.base.shadow[2], ";\n ");
|
|
5973
5956
|
});
|
|
5974
5957
|
var StyledLeftSection = styled.div.withConfig({
|
|
5975
5958
|
displayName: "DateGroup__StyledLeftSection",
|
|
5976
5959
|
componentId: "sc-9nfm1f-1"
|
|
5977
|
-
})(templateObject_2$
|
|
5960
|
+
})(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);
|
|
5978
5961
|
var StyledRightSection = styled.div.withConfig({
|
|
5979
5962
|
displayName: "DateGroup__StyledRightSection",
|
|
5980
5963
|
componentId: "sc-9nfm1f-2"
|
|
5981
|
-
})(templateObject_3$
|
|
5964
|
+
})(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);
|
|
5982
5965
|
var StyledContent = styled.div.withConfig({
|
|
5983
5966
|
displayName: "DateGroup__StyledContent",
|
|
5984
5967
|
componentId: "sc-9nfm1f-3"
|
|
5985
|
-
})(templateObject_4$
|
|
5968
|
+
})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n /* Content area for children */\n"], ["\n /* Content area for children */\n"
|
|
5986
5969
|
/**
|
|
5987
5970
|
* DateGroup component
|
|
5988
5971
|
*
|
|
@@ -6023,7 +6006,7 @@ var DateGroup = function DateGroup(_a) {
|
|
|
6023
6006
|
"data-testid": dataTestId,
|
|
6024
6007
|
role: "group",
|
|
6025
6008
|
"aria-label": "Transactions for ".concat(date),
|
|
6026
|
-
children: [jsxs(StyledHeader, {
|
|
6009
|
+
children: [jsxs(StyledHeader$1, {
|
|
6027
6010
|
"$sticky": sticky,
|
|
6028
6011
|
"data-testid": dataTestId ? "".concat(dataTestId, "-header") : undefined,
|
|
6029
6012
|
children: [jsxs(StyledLeftSection, {
|
|
@@ -6054,18 +6037,18 @@ var DateGroup = function DateGroup(_a) {
|
|
|
6054
6037
|
})]
|
|
6055
6038
|
});
|
|
6056
6039
|
};
|
|
6057
|
-
var templateObject_1$
|
|
6040
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
6058
6041
|
|
|
6059
|
-
var semantic$
|
|
6042
|
+
var semantic$9 = tokensData.semantic;
|
|
6060
6043
|
var StyledContainer$1 = styled.div.withConfig({
|
|
6061
6044
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6062
6045
|
return !prop.startsWith('$');
|
|
6063
6046
|
},
|
|
6064
6047
|
displayName: "EmptyState__StyledContainer",
|
|
6065
6048
|
componentId: "sc-1u5hxh-0"
|
|
6066
|
-
})(templateObject_1$
|
|
6049
|
+
})(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) {
|
|
6067
6050
|
var $size = _a.$size;
|
|
6068
|
-
return $size === 'small' ? semantic$
|
|
6051
|
+
return $size === 'small' ? semantic$9.spacing.layout['4xl'] : $size === 'large' ? semantic$9.spacing.layout['8xl'] : semantic$9.spacing.layout['6xl'];
|
|
6069
6052
|
});
|
|
6070
6053
|
var StyledIllustration = styled.div.withConfig({
|
|
6071
6054
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -6073,22 +6056,22 @@ var StyledIllustration = styled.div.withConfig({
|
|
|
6073
6056
|
},
|
|
6074
6057
|
displayName: "EmptyState__StyledIllustration",
|
|
6075
6058
|
componentId: "sc-1u5hxh-1"
|
|
6076
|
-
})(templateObject_2$
|
|
6059
|
+
})(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) {
|
|
6077
6060
|
var $size = _a.$size;
|
|
6078
6061
|
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
6079
6062
|
}, function (_a) {
|
|
6080
6063
|
var $size = _a.$size;
|
|
6081
6064
|
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
6082
|
-
}, semantic$
|
|
6065
|
+
}, semantic$9.spacing.layout['2xl'], function (_a) {
|
|
6083
6066
|
var $variant = _a.$variant;
|
|
6084
|
-
return $variant === 'error' ? semantic$
|
|
6067
|
+
return $variant === 'error' ? semantic$9.color.icon.error : $variant === 'success' ? semantic$9.color.icon.success : semantic$9.color.icon.subdued;
|
|
6085
6068
|
});
|
|
6086
6069
|
var StyledTextContainer = styled.div.withConfig({
|
|
6087
6070
|
displayName: "EmptyState__StyledTextContainer",
|
|
6088
6071
|
componentId: "sc-1u5hxh-2"
|
|
6089
|
-
})(templateObject_3$
|
|
6072
|
+
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width: 360px;\n margin-bottom: ", ";\n"], ["\n max-width: 360px;\n margin-bottom: ", ";\n"
|
|
6090
6073
|
// Map illustration type to icon name
|
|
6091
|
-
])), semantic$
|
|
6074
|
+
])), semantic$9.spacing.layout['2xl']);
|
|
6092
6075
|
// Map illustration type to icon name
|
|
6093
6076
|
var illustrationToIcon = {
|
|
6094
6077
|
search: 'search',
|
|
@@ -6143,7 +6126,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
6143
6126
|
children: title
|
|
6144
6127
|
}), jsx("div", {
|
|
6145
6128
|
style: {
|
|
6146
|
-
marginTop: semantic$
|
|
6129
|
+
marginTop: semantic$9.spacing.layout.md
|
|
6147
6130
|
},
|
|
6148
6131
|
children: jsx(Typography, {
|
|
6149
6132
|
variant: "body",
|
|
@@ -6173,31 +6156,31 @@ var EmptyState = function EmptyState(_a) {
|
|
|
6173
6156
|
})]
|
|
6174
6157
|
});
|
|
6175
6158
|
};
|
|
6176
|
-
var templateObject_1$
|
|
6159
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c;
|
|
6177
6160
|
|
|
6178
6161
|
var _a$1 = tokensData.base,
|
|
6179
6162
|
spacing$1 = _a$1.spacing,
|
|
6180
|
-
border$
|
|
6163
|
+
border$2 = _a$1.border;
|
|
6181
6164
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
6182
6165
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
6183
6166
|
componentId: "sc-1mi4lso-0"
|
|
6184
|
-
})(templateObject_1$
|
|
6167
|
+
})(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$2.radius[6]);
|
|
6185
6168
|
var ImageWrapper = styled.div.withConfig({
|
|
6186
6169
|
displayName: "FeatureBlock__ImageWrapper",
|
|
6187
6170
|
componentId: "sc-1mi4lso-1"
|
|
6188
|
-
})(templateObject_2$
|
|
6171
|
+
})(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);
|
|
6189
6172
|
var ContentSection = styled.div.withConfig({
|
|
6190
6173
|
displayName: "FeatureBlock__ContentSection",
|
|
6191
6174
|
componentId: "sc-1mi4lso-2"
|
|
6192
|
-
})(templateObject_3$
|
|
6175
|
+
})(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]);
|
|
6193
6176
|
var ButtonWrapper = styled.div.withConfig({
|
|
6194
6177
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
6195
6178
|
componentId: "sc-1mi4lso-3"
|
|
6196
|
-
})(templateObject_4$
|
|
6179
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
6197
6180
|
var ContentWrapper = styled.div.withConfig({
|
|
6198
6181
|
displayName: "FeatureBlock__ContentWrapper",
|
|
6199
6182
|
componentId: "sc-1mi4lso-4"
|
|
6200
|
-
})(templateObject_5$
|
|
6183
|
+
})(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"])));
|
|
6201
6184
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
6202
6185
|
var title = _a.title,
|
|
6203
6186
|
excerpt = _a.excerpt,
|
|
@@ -6254,28 +6237,28 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
6254
6237
|
}), jsx(Divider, {})]
|
|
6255
6238
|
});
|
|
6256
6239
|
};
|
|
6257
|
-
var templateObject_1$
|
|
6240
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
|
|
6258
6241
|
|
|
6259
6242
|
var _a = tokensData.base,
|
|
6260
6243
|
spacing = _a.spacing,
|
|
6261
6244
|
shadow = _a.shadow,
|
|
6262
6245
|
zIndex = _a.zIndex,
|
|
6263
6246
|
_b = tokensData.semantic,
|
|
6264
|
-
color = _b.color,
|
|
6247
|
+
color$1 = _b.color,
|
|
6265
6248
|
typography = _b.typography,
|
|
6266
|
-
border = _b.border,
|
|
6249
|
+
border$1 = _b.border,
|
|
6267
6250
|
input$1 = tokensData.component.input;
|
|
6268
6251
|
var DropdownContainer = styled.div.withConfig({
|
|
6269
6252
|
displayName: "Dropdown__DropdownContainer",
|
|
6270
6253
|
componentId: "sc-kz07c4-0"
|
|
6271
|
-
})(templateObject_1$
|
|
6254
|
+
})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
6272
6255
|
var DropdownTrigger = styled.button.withConfig({
|
|
6273
6256
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6274
6257
|
return !prop.startsWith('$');
|
|
6275
6258
|
},
|
|
6276
6259
|
displayName: "Dropdown__DropdownTrigger",
|
|
6277
6260
|
componentId: "sc-kz07c4-1"
|
|
6278
|
-
})(templateObject_2$
|
|
6261
|
+
})(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) {
|
|
6279
6262
|
var $hasError = _a.$hasError;
|
|
6280
6263
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
6281
6264
|
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
@@ -6295,7 +6278,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
6295
6278
|
},
|
|
6296
6279
|
displayName: "Dropdown__DropdownIcon",
|
|
6297
6280
|
componentId: "sc-kz07c4-2"
|
|
6298
|
-
})(templateObject_3$
|
|
6281
|
+
})(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) {
|
|
6299
6282
|
var $isOpen = _a.$isOpen;
|
|
6300
6283
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
6301
6284
|
});
|
|
@@ -6305,7 +6288,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
6305
6288
|
},
|
|
6306
6289
|
displayName: "Dropdown__DropdownMenu",
|
|
6307
6290
|
componentId: "sc-kz07c4-3"
|
|
6308
|
-
})(templateObject_4$
|
|
6291
|
+
})(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) {
|
|
6309
6292
|
var $isOpen = _a.$isOpen;
|
|
6310
6293
|
return $isOpen ? 1 : 0;
|
|
6311
6294
|
}, function (_a) {
|
|
@@ -6321,19 +6304,19 @@ var DropdownOption = styled.button.withConfig({
|
|
|
6321
6304
|
},
|
|
6322
6305
|
displayName: "Dropdown__DropdownOption",
|
|
6323
6306
|
componentId: "sc-kz07c4-4"
|
|
6324
|
-
})(templateObject_5$
|
|
6307
|
+
})(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) {
|
|
6325
6308
|
var $isSelected = _a.$isSelected,
|
|
6326
6309
|
$isFocused = _a.$isFocused;
|
|
6327
|
-
if ($isFocused) return color.background.surface;
|
|
6328
|
-
if ($isSelected) return color.background.surface;
|
|
6310
|
+
if ($isFocused) return color$1.background.surface;
|
|
6311
|
+
if ($isSelected) return color$1.background.surface;
|
|
6329
6312
|
return 'transparent';
|
|
6330
|
-
}, input$1["default"].font, input$1["default"].textColor, color.background.surface, color.background.surface, border.subtle);
|
|
6313
|
+
}, input$1["default"].font, input$1["default"].textColor, color$1.background.surface, color$1.background.surface, border$1.subtle);
|
|
6331
6314
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
6332
6315
|
displayName: "Dropdown__StyledHelperText",
|
|
6333
6316
|
componentId: "sc-kz07c4-5"
|
|
6334
|
-
})(templateObject_6$
|
|
6317
|
+
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography.caption, function (_a) {
|
|
6335
6318
|
var $hasError = _a.$hasError;
|
|
6336
|
-
return $hasError ? color.text.error : color.text.subdued;
|
|
6319
|
+
return $hasError ? color$1.text.error : color$1.text.subdued;
|
|
6337
6320
|
}, spacing[2]);
|
|
6338
6321
|
var Dropdown = function Dropdown(_a) {
|
|
6339
6322
|
var options = _a.options,
|
|
@@ -6508,18 +6491,18 @@ var Dropdown = function Dropdown(_a) {
|
|
|
6508
6491
|
})]
|
|
6509
6492
|
});
|
|
6510
6493
|
};
|
|
6511
|
-
var templateObject_1$
|
|
6494
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
|
|
6512
6495
|
|
|
6513
|
-
var semantic$
|
|
6496
|
+
var semantic$8 = tokensData.semantic;
|
|
6514
6497
|
var StyledList = styled.ul.withConfig({
|
|
6515
6498
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6516
6499
|
return !prop.startsWith('$');
|
|
6517
6500
|
},
|
|
6518
6501
|
displayName: "List__StyledList",
|
|
6519
6502
|
componentId: "sc-1irksg5-0"
|
|
6520
|
-
})(templateObject_1$
|
|
6503
|
+
})(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) {
|
|
6521
6504
|
var $dividers = _a.$dividers;
|
|
6522
|
-
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$
|
|
6505
|
+
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$8.color.border["default"], ";\n }\n ");
|
|
6523
6506
|
});
|
|
6524
6507
|
var List = function List(_a) {
|
|
6525
6508
|
var children = _a.children,
|
|
@@ -6541,7 +6524,230 @@ var List = function List(_a) {
|
|
|
6541
6524
|
}));
|
|
6542
6525
|
};
|
|
6543
6526
|
List.displayName = 'List';
|
|
6544
|
-
var templateObject_1$
|
|
6527
|
+
var templateObject_1$c;
|
|
6528
|
+
|
|
6529
|
+
var semantic$7 = tokensData.semantic,
|
|
6530
|
+
base$7 = tokensData.base;
|
|
6531
|
+
var layout = semantic$7.spacing.layout,
|
|
6532
|
+
color = semantic$7.color,
|
|
6533
|
+
border = semantic$7.border,
|
|
6534
|
+
elevation = semantic$7.elevation;
|
|
6535
|
+
semantic$7.motion;
|
|
6536
|
+
// ---------------------------------------------------------------------------
|
|
6537
|
+
// Size map
|
|
6538
|
+
// ---------------------------------------------------------------------------
|
|
6539
|
+
var sizeToWidth = {
|
|
6540
|
+
small: '400px',
|
|
6541
|
+
medium: '560px',
|
|
6542
|
+
large: '720px'
|
|
6543
|
+
};
|
|
6544
|
+
// ---------------------------------------------------------------------------
|
|
6545
|
+
// Animations
|
|
6546
|
+
// ---------------------------------------------------------------------------
|
|
6547
|
+
var fadeIn$1 = keyframes(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n from { opacity: 0; }\n to { opacity: 1; }\n"], ["\n from { opacity: 0; }\n to { opacity: 1; }\n"])));
|
|
6548
|
+
var scaleIn = keyframes(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n"], ["\n from {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n"
|
|
6549
|
+
// ---------------------------------------------------------------------------
|
|
6550
|
+
// Styled components
|
|
6551
|
+
// ---------------------------------------------------------------------------
|
|
6552
|
+
])));
|
|
6553
|
+
// ---------------------------------------------------------------------------
|
|
6554
|
+
// Styled components
|
|
6555
|
+
// ---------------------------------------------------------------------------
|
|
6556
|
+
var StyledOverlay$1 = styled.div.withConfig({
|
|
6557
|
+
displayName: "Modal__StyledOverlay",
|
|
6558
|
+
componentId: "sc-1d3g5gh-0"
|
|
6559
|
+
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9999;\n ", "\n"], ["\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9999;\n ", "\n"])), css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["animation: ", " 200ms ease-out;"], ["animation: ", " 200ms ease-out;"])), fadeIn$1));
|
|
6560
|
+
var StyledDialog = styled.div.withConfig({
|
|
6561
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6562
|
+
return !prop.startsWith('$');
|
|
6563
|
+
},
|
|
6564
|
+
displayName: "Modal__StyledDialog",
|
|
6565
|
+
componentId: "sc-1d3g5gh-1"
|
|
6566
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(1);\n z-index: 10000;\n\n width: ", ";\n max-width: calc(100vw - ", " * 2);\n max-height: calc(100vh - ", " * 2);\n\n display: flex;\n flex-direction: column;\n\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n overflow: hidden;\n\n ", "\n\n /* Auto-fullscreen below md breakpoint (768px) */\n @media (max-width: ", ") {\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n border-radius: 0;\n top: 0;\n left: 0;\n transform: none;\n animation: ", " 200ms ease-out;\n }\n\n &:focus {\n outline: none;\n }\n"], ["\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(1);\n z-index: 10000;\n\n width: ", ";\n max-width: calc(100vw - ", " * 2);\n max-height: calc(100vh - ", " * 2);\n\n display: flex;\n flex-direction: column;\n\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n overflow: hidden;\n\n ", "\n\n /* Auto-fullscreen below md breakpoint (768px) */\n @media (max-width: ", ") {\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n border-radius: 0;\n top: 0;\n left: 0;\n transform: none;\n animation: ", " 200ms ease-out;\n }\n\n &:focus {\n outline: none;\n }\n"])), function (_a) {
|
|
6567
|
+
var $width = _a.$width;
|
|
6568
|
+
return $width;
|
|
6569
|
+
}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " 200ms ease-out;"], ["animation: ", " 200ms ease-out;"])), scaleIn), base$7.breakpoint.md, fadeIn$1);
|
|
6570
|
+
var StyledHeader = styled.div.withConfig({
|
|
6571
|
+
displayName: "Modal__StyledHeader",
|
|
6572
|
+
componentId: "sc-1d3g5gh-2"
|
|
6573
|
+
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", " 0;\n flex-shrink: 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", " 0;\n flex-shrink: 0;\n"])), layout.lg, layout.lg);
|
|
6574
|
+
var StyledBody = styled.div.withConfig({
|
|
6575
|
+
displayName: "Modal__StyledBody",
|
|
6576
|
+
componentId: "sc-1d3g5gh-3"
|
|
6577
|
+
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n flex: 1 1 auto;\n overflow-y: auto;\n padding: ", " ", ";\n\n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"], ["\n flex: 1 1 auto;\n overflow-y: auto;\n padding: ", " ", ";\n\n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), layout.md, layout.lg, base$7.spacing[2], color.background.surface, color.border["default"], border.radius.circle, color.border.strong);
|
|
6578
|
+
var StyledFooter = styled.div.withConfig({
|
|
6579
|
+
displayName: "Modal__StyledFooter",
|
|
6580
|
+
componentId: "sc-1d3g5gh-4"
|
|
6581
|
+
})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n gap: ", ";\n padding: 0 ", " ", ";\n flex-shrink: 0;\n"], ["\n display: flex;\n justify-content: flex-end;\n gap: ", ";\n padding: 0 ", " ", ";\n flex-shrink: 0;\n"
|
|
6582
|
+
// ---------------------------------------------------------------------------
|
|
6583
|
+
// Component
|
|
6584
|
+
// ---------------------------------------------------------------------------
|
|
6585
|
+
/**
|
|
6586
|
+
* Modal component
|
|
6587
|
+
*
|
|
6588
|
+
* A centred dialog overlay with a title, close button (IconButton), scrollable
|
|
6589
|
+
* body content, and an optional footer with structured action buttons.
|
|
6590
|
+
*
|
|
6591
|
+
* - Renders via `createPortal` to avoid z-index / overflow issues.
|
|
6592
|
+
* - Auto-fullscreen on viewports narrower than 768 px.
|
|
6593
|
+
* - Focus trap, Escape-to-close, overlay-click-to-close.
|
|
6594
|
+
* - Locks body scroll while open.
|
|
6595
|
+
*
|
|
6596
|
+
* Composes: IconButton, Button, Typography, Stack, Divider
|
|
6597
|
+
*/])), layout.sm, layout.lg, layout.lg);
|
|
6598
|
+
// ---------------------------------------------------------------------------
|
|
6599
|
+
// Component
|
|
6600
|
+
// ---------------------------------------------------------------------------
|
|
6601
|
+
/**
|
|
6602
|
+
* Modal component
|
|
6603
|
+
*
|
|
6604
|
+
* A centred dialog overlay with a title, close button (IconButton), scrollable
|
|
6605
|
+
* body content, and an optional footer with structured action buttons.
|
|
6606
|
+
*
|
|
6607
|
+
* - Renders via `createPortal` to avoid z-index / overflow issues.
|
|
6608
|
+
* - Auto-fullscreen on viewports narrower than 768 px.
|
|
6609
|
+
* - Focus trap, Escape-to-close, overlay-click-to-close.
|
|
6610
|
+
* - Locks body scroll while open.
|
|
6611
|
+
*
|
|
6612
|
+
* Composes: IconButton, Button, Typography, Stack, Divider
|
|
6613
|
+
*/
|
|
6614
|
+
var Modal = function Modal(_a) {
|
|
6615
|
+
var isOpen = _a.isOpen,
|
|
6616
|
+
onClose = _a.onClose,
|
|
6617
|
+
title = _a.title,
|
|
6618
|
+
children = _a.children,
|
|
6619
|
+
_b = _a.size,
|
|
6620
|
+
size = _b === void 0 ? 'medium' : _b,
|
|
6621
|
+
actions = _a.actions,
|
|
6622
|
+
_c = _a.closeOnOverlayClick,
|
|
6623
|
+
closeOnOverlayClick = _c === void 0 ? true : _c,
|
|
6624
|
+
_d = _a.closeOnEscape,
|
|
6625
|
+
closeOnEscape = _d === void 0 ? true : _d,
|
|
6626
|
+
dataTestId = _a["data-testid"],
|
|
6627
|
+
ariaLabel = _a["aria-label"],
|
|
6628
|
+
ariaDescribedBy = _a["aria-describedby"];
|
|
6629
|
+
var dialogRef = useRef(null);
|
|
6630
|
+
var previousFocusRef = useRef(null);
|
|
6631
|
+
// -----------------------------------------------------------------------
|
|
6632
|
+
// Focus & scroll-lock management
|
|
6633
|
+
// -----------------------------------------------------------------------
|
|
6634
|
+
useEffect(function () {
|
|
6635
|
+
var _a;
|
|
6636
|
+
if (isOpen) {
|
|
6637
|
+
previousFocusRef.current = document.activeElement;
|
|
6638
|
+
// Short delay so the animation can start before we shift focus
|
|
6639
|
+
var timer_1 = setTimeout(function () {
|
|
6640
|
+
var _a;
|
|
6641
|
+
return (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6642
|
+
}, 100);
|
|
6643
|
+
document.body.style.overflow = 'hidden';
|
|
6644
|
+
return function () {
|
|
6645
|
+
clearTimeout(timer_1);
|
|
6646
|
+
};
|
|
6647
|
+
} else {
|
|
6648
|
+
(_a = previousFocusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6649
|
+
document.body.style.overflow = '';
|
|
6650
|
+
}
|
|
6651
|
+
return function () {
|
|
6652
|
+
document.body.style.overflow = '';
|
|
6653
|
+
};
|
|
6654
|
+
}, [isOpen]);
|
|
6655
|
+
// -----------------------------------------------------------------------
|
|
6656
|
+
// Keyboard handling (Escape + focus trap)
|
|
6657
|
+
// -----------------------------------------------------------------------
|
|
6658
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
6659
|
+
var _a;
|
|
6660
|
+
if (closeOnEscape && event.key === 'Escape') {
|
|
6661
|
+
event.preventDefault();
|
|
6662
|
+
onClose();
|
|
6663
|
+
}
|
|
6664
|
+
if (event.key === 'Tab') {
|
|
6665
|
+
var focusableElements = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
6666
|
+
if (!focusableElements || focusableElements.length === 0) return;
|
|
6667
|
+
var first = focusableElements[0];
|
|
6668
|
+
var last = focusableElements[focusableElements.length - 1];
|
|
6669
|
+
if (event.shiftKey && document.activeElement === first) {
|
|
6670
|
+
event.preventDefault();
|
|
6671
|
+
last.focus();
|
|
6672
|
+
} else if (!event.shiftKey && document.activeElement === last) {
|
|
6673
|
+
event.preventDefault();
|
|
6674
|
+
first.focus();
|
|
6675
|
+
}
|
|
6676
|
+
}
|
|
6677
|
+
};
|
|
6678
|
+
// -----------------------------------------------------------------------
|
|
6679
|
+
// Overlay click
|
|
6680
|
+
// -----------------------------------------------------------------------
|
|
6681
|
+
var handleOverlayClick = function handleOverlayClick(event) {
|
|
6682
|
+
if (closeOnOverlayClick && event.target === event.currentTarget) {
|
|
6683
|
+
onClose();
|
|
6684
|
+
}
|
|
6685
|
+
};
|
|
6686
|
+
// -----------------------------------------------------------------------
|
|
6687
|
+
// Render
|
|
6688
|
+
// -----------------------------------------------------------------------
|
|
6689
|
+
if (!isOpen) return null;
|
|
6690
|
+
var titleId = dataTestId ? "".concat(dataTestId, "-title") : 'modal-title';
|
|
6691
|
+
var width = sizeToWidth[size];
|
|
6692
|
+
var modal = jsxs(Fragment, {
|
|
6693
|
+
children: [jsx(StyledOverlay$1, {
|
|
6694
|
+
onClick: handleOverlayClick,
|
|
6695
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'modal-overlay'
|
|
6696
|
+
}), jsxs(StyledDialog, {
|
|
6697
|
+
ref: dialogRef,
|
|
6698
|
+
role: "dialog",
|
|
6699
|
+
"aria-modal": "true",
|
|
6700
|
+
"aria-label": ariaLabel || title,
|
|
6701
|
+
"aria-labelledby": titleId,
|
|
6702
|
+
"aria-describedby": ariaDescribedBy,
|
|
6703
|
+
tabIndex: -1,
|
|
6704
|
+
"$width": width,
|
|
6705
|
+
onKeyDown: handleKeyDown,
|
|
6706
|
+
"data-testid": dataTestId,
|
|
6707
|
+
children: [jsxs(StyledHeader, {
|
|
6708
|
+
children: [jsx("span", {
|
|
6709
|
+
id: titleId,
|
|
6710
|
+
children: jsx(Typography, {
|
|
6711
|
+
variant: "h3",
|
|
6712
|
+
children: title
|
|
6713
|
+
})
|
|
6714
|
+
}), jsx(IconButton, {
|
|
6715
|
+
variant: "naked",
|
|
6716
|
+
iconName: "close",
|
|
6717
|
+
"aria-label": "Close modal",
|
|
6718
|
+
onClick: onClose,
|
|
6719
|
+
size: "medium",
|
|
6720
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-close") : 'modal-close'
|
|
6721
|
+
})]
|
|
6722
|
+
}), jsx(Divider, {
|
|
6723
|
+
size: "small"
|
|
6724
|
+
}), jsx(StyledBody, {
|
|
6725
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-body") : 'modal-body',
|
|
6726
|
+
children: children
|
|
6727
|
+
}), actions && actions.length > 0 && jsxs(Fragment, {
|
|
6728
|
+
children: [jsx(Divider, {
|
|
6729
|
+
size: "small"
|
|
6730
|
+
}), jsx(StyledFooter, {
|
|
6731
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-footer") : 'modal-footer',
|
|
6732
|
+
children: actions.map(function (action, index) {
|
|
6733
|
+
return jsx(Button, {
|
|
6734
|
+
onClick: action.onClick,
|
|
6735
|
+
variant: action.variant || 'secondary',
|
|
6736
|
+
iconName: action.icon,
|
|
6737
|
+
disabled: action.disabled,
|
|
6738
|
+
size: "medium",
|
|
6739
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-action-").concat(index) : "modal-action-".concat(index),
|
|
6740
|
+
children: action.label
|
|
6741
|
+
}, "".concat(action.label, "-").concat(index));
|
|
6742
|
+
})
|
|
6743
|
+
})]
|
|
6744
|
+
})]
|
|
6745
|
+
})]
|
|
6746
|
+
});
|
|
6747
|
+
return /*#__PURE__*/createPortal(modal, document.body);
|
|
6748
|
+
};
|
|
6749
|
+
Modal.displayName = 'Modal';
|
|
6750
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3;
|
|
6545
6751
|
|
|
6546
6752
|
var input = tokensData.component.input;
|
|
6547
6753
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -8691,5 +8897,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
8691
8897
|
// Main design system exports
|
|
8692
8898
|
var tokens = tokensData;
|
|
8693
8899
|
|
|
8694
|
-
export { AccountCard, ActionSheet, AgentInput, Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, CategoryBadge, Checkbox, Chip, ChipGroup, CodeBlock, Container$1 as Container, DateFormatter, DateGroup, Divider, Dropdown, EmptyState, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, MoneyDisplay, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, SearchField, Sheet, Slider, Stack, StatusBadge, StyledInputBase, StyledTextAreaBase, TabBar, Tag, TextField, TransactionListItem, Typography, iconsData, tokens };
|
|
8900
|
+
export { AccountCard, ActionSheet, AgentInput, Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, CategoryBadge, Checkbox, Chip, ChipGroup, CodeBlock, Container$1 as Container, DateFormatter, DateGroup, Divider, Dropdown, EmptyState, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, Modal, MoneyDisplay, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, SearchField, Sheet, Slider, Stack, StatusBadge, StyledInputBase, StyledTextAreaBase, TabBar, Tag, TextField, TransactionListItem, Typography, iconsData, tokens };
|
|
8695
8901
|
//# sourceMappingURL=index.esm.js.map
|