@common-origin/design-system 2.0.1 → 2.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Chip/shared/ChipBase.d.ts +1 -1
- package/dist/components/atoms/Chip/shared/utils.d.ts +1 -1
- package/dist/components/atoms/DateFormatter/DateFormatter.d.ts +3 -0
- package/dist/components/atoms/MoneyDisplay/MoneyDisplay.d.ts +26 -0
- package/dist/components/atoms/MoneyDisplay/index.d.ts +2 -0
- package/dist/components/atoms/index.d.ts +1 -0
- package/dist/components/molecules/AccountCard/AccountCard.d.ts +44 -0
- package/dist/components/molecules/AccountCard/index.d.ts +2 -0
- package/dist/components/molecules/Checkbox/SelectableInputBase.d.ts +1 -2
- package/dist/components/molecules/DateGroup/DateGroup.d.ts +34 -0
- package/dist/components/molecules/DateGroup/index.d.ts +2 -0
- package/dist/components/molecules/EmptyState/EmptyState.d.ts +32 -0
- package/dist/components/molecules/EmptyState/index.d.ts +2 -0
- package/dist/components/molecules/TextField/InputBase.d.ts +0 -1
- package/dist/components/molecules/TransactionListItem/TransactionListItem.d.ts +39 -0
- package/dist/components/molecules/TransactionListItem/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +4 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.esm.js +866 -190
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +869 -188
- package/dist/index.js.map +1 -1
- package/dist/styles/tokens.json +8 -0
- package/dist/tokens/index.esm.js +8 -0
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +8 -0
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/tokens.d.ts +8 -0
- package/package.json +3 -3
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useState, forwardRef, useId, useRef, useEffect, useCallback } from 'react';
|
|
2
2
|
import styled, { keyframes, css } from 'styled-components';
|
|
3
|
-
import { parseISO, format } from 'date-fns';
|
|
3
|
+
import { parseISO, format, isToday, isYesterday, isThisWeek } from 'date-fns';
|
|
4
4
|
|
|
5
5
|
function _extends() {
|
|
6
6
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
@@ -634,7 +634,7 @@ var component = {
|
|
|
634
634
|
},
|
|
635
635
|
$ref: "./component/index.json"
|
|
636
636
|
};
|
|
637
|
-
var semantic$
|
|
637
|
+
var semantic$b = {
|
|
638
638
|
border: {
|
|
639
639
|
"default": "0.0625rem solid #e9ecef",
|
|
640
640
|
subtle: "0.0625rem solid #dee2e6",
|
|
@@ -737,6 +737,14 @@ var semantic$a = {
|
|
|
737
737
|
error: "#D31510",
|
|
738
738
|
success: "#007A4D",
|
|
739
739
|
warning: "#B14C00"
|
|
740
|
+
},
|
|
741
|
+
financial: {
|
|
742
|
+
credit: "#15A46E",
|
|
743
|
+
"credit-hover": "#008F5D",
|
|
744
|
+
debit: "#D31510",
|
|
745
|
+
"debit-hover": "#B40000",
|
|
746
|
+
pending: "#F68511",
|
|
747
|
+
neutral: "#6c757d"
|
|
740
748
|
}
|
|
741
749
|
},
|
|
742
750
|
typography: {
|
|
@@ -773,7 +781,7 @@ var semantic$a = {
|
|
|
773
781
|
var tokensData = {
|
|
774
782
|
base: base$8,
|
|
775
783
|
component: component,
|
|
776
|
-
semantic: semantic$
|
|
784
|
+
semantic: semantic$b
|
|
777
785
|
};
|
|
778
786
|
|
|
779
787
|
React.createElement;
|
|
@@ -783,7 +791,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
783
791
|
},
|
|
784
792
|
displayName: "Avatar__AvatarContainer",
|
|
785
793
|
componentId: "sc-ezn4ax-0"
|
|
786
|
-
})(templateObject_1$
|
|
794
|
+
})(templateObject_1$D || (templateObject_1$D = __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) {
|
|
787
795
|
var $size = _a.$size;
|
|
788
796
|
return tokensData.semantic.size.avatar[$size];
|
|
789
797
|
}, function (_a) {
|
|
@@ -796,14 +804,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
796
804
|
},
|
|
797
805
|
displayName: "Avatar__AvatarImage",
|
|
798
806
|
componentId: "sc-ezn4ax-1"
|
|
799
|
-
})(templateObject_2$
|
|
807
|
+
})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"])), tokensData.base.border.radius.circle);
|
|
800
808
|
var AvatarInitials = styled.span.withConfig({
|
|
801
809
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
802
810
|
return !prop.startsWith('$');
|
|
803
811
|
},
|
|
804
812
|
displayName: "Avatar__AvatarInitials",
|
|
805
813
|
componentId: "sc-ezn4ax-2"
|
|
806
|
-
})(templateObject_3$
|
|
814
|
+
})(templateObject_3$l || (templateObject_3$l = __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"
|
|
807
815
|
// Helper function to get initials from name
|
|
808
816
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
809
817
|
var $size = _a.$size;
|
|
@@ -866,7 +874,7 @@ var Avatar = function Avatar(_a) {
|
|
|
866
874
|
"aria-hidden": "true"
|
|
867
875
|
}, initials));
|
|
868
876
|
};
|
|
869
|
-
var templateObject_1$
|
|
877
|
+
var templateObject_1$D, templateObject_2$p, templateObject_3$l;
|
|
870
878
|
|
|
871
879
|
React.createElement;
|
|
872
880
|
var _a$5 = tokensData.semantic,
|
|
@@ -934,7 +942,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
934
942
|
},
|
|
935
943
|
displayName: "Typography__StyledTypography",
|
|
936
944
|
componentId: "sc-17mqo4k-0"
|
|
937
|
-
})(templateObject_1$
|
|
945
|
+
})(templateObject_1$C || (templateObject_1$C = __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"
|
|
938
946
|
/**
|
|
939
947
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
940
948
|
*
|
|
@@ -1001,23 +1009,23 @@ var Typography = function Typography(_a) {
|
|
|
1001
1009
|
"data-testid": dataTestId
|
|
1002
1010
|
}, children);
|
|
1003
1011
|
};
|
|
1004
|
-
var templateObject_1$
|
|
1012
|
+
var templateObject_1$C;
|
|
1005
1013
|
|
|
1006
1014
|
React.createElement;
|
|
1007
1015
|
var color$3 = tokensData.semantic.color;
|
|
1008
1016
|
tokensData.base.shadow;
|
|
1009
|
-
var scaleIn = keyframes(templateObject_1$
|
|
1017
|
+
var scaleIn = keyframes(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
1010
1018
|
var BadgeWrapper = styled.span.withConfig({
|
|
1011
1019
|
displayName: "Badge__BadgeWrapper",
|
|
1012
1020
|
componentId: "sc-tjz4pp-0"
|
|
1013
|
-
})(templateObject_2$
|
|
1021
|
+
})(templateObject_2$o || (templateObject_2$o = __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"])));
|
|
1014
1022
|
var BadgeIndicator = styled.span.withConfig({
|
|
1015
1023
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1016
1024
|
return !prop.startsWith('$');
|
|
1017
1025
|
},
|
|
1018
1026
|
displayName: "Badge__BadgeIndicator",
|
|
1019
1027
|
componentId: "sc-tjz4pp-1"
|
|
1020
|
-
})(templateObject_3$
|
|
1028
|
+
})(templateObject_3$k || (templateObject_3$k = __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) {
|
|
1021
1029
|
return props.$isVisible ? 'flex' : 'none';
|
|
1022
1030
|
}, function (props) {
|
|
1023
1031
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1042,7 +1050,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1042
1050
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
1043
1051
|
displayName: "Badge__ScreenReaderOnly",
|
|
1044
1052
|
componentId: "sc-tjz4pp-2"
|
|
1045
|
-
})(templateObject_4$
|
|
1053
|
+
})(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
1046
1054
|
var Badge = function Badge(_a) {
|
|
1047
1055
|
var children = _a.children,
|
|
1048
1056
|
_b = _a.count,
|
|
@@ -1073,7 +1081,7 @@ var Badge = function Badge(_a) {
|
|
|
1073
1081
|
color: "inverse"
|
|
1074
1082
|
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
|
|
1075
1083
|
};
|
|
1076
|
-
var templateObject_1$
|
|
1084
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$k, templateObject_4$h;
|
|
1077
1085
|
|
|
1078
1086
|
React.createElement;
|
|
1079
1087
|
var StyledBox = styled.div.withConfig({
|
|
@@ -1085,23 +1093,23 @@ var StyledBox = styled.div.withConfig({
|
|
|
1085
1093
|
})(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"], ["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"
|
|
1086
1094
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1087
1095
|
])), function (props) {
|
|
1088
|
-
return props.$display && css(templateObject_1$
|
|
1096
|
+
return props.$display && css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1089
1097
|
}, function (props) {
|
|
1090
|
-
return props.$flexDirection && css(templateObject_2$
|
|
1098
|
+
return props.$flexDirection && css(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1091
1099
|
}, function (props) {
|
|
1092
|
-
return props.$justifyContent && css(templateObject_3$
|
|
1100
|
+
return props.$justifyContent && css(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1093
1101
|
}, function (props) {
|
|
1094
|
-
return props.$alignItems && css(templateObject_4$
|
|
1102
|
+
return props.$alignItems && css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1095
1103
|
}, function (props) {
|
|
1096
|
-
return props.$flexWrap && css(templateObject_5$
|
|
1104
|
+
return props.$flexWrap && css(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1097
1105
|
}, function (props) {
|
|
1098
|
-
return props.$gap && css(templateObject_6$
|
|
1106
|
+
return props.$gap && css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1099
1107
|
}, function (props) {
|
|
1100
|
-
return props.$m && css(templateObject_7$
|
|
1108
|
+
return props.$m && css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1101
1109
|
}, function (props) {
|
|
1102
|
-
return props.$mt && css(templateObject_8$
|
|
1110
|
+
return props.$mt && css(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1103
1111
|
}, function (props) {
|
|
1104
|
-
return props.$mr && css(templateObject_9$
|
|
1112
|
+
return props.$mr && css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
|
|
1105
1113
|
}, function (props) {
|
|
1106
1114
|
return props.$mb && css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
|
|
1107
1115
|
}, function (props) {
|
|
@@ -1275,7 +1283,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1275
1283
|
}, rest), children);
|
|
1276
1284
|
};
|
|
1277
1285
|
var Box = BoxTransform;
|
|
1278
|
-
var templateObject_1$
|
|
1286
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$b, templateObject_7$9, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43;
|
|
1279
1287
|
|
|
1280
1288
|
var add = {
|
|
1281
1289
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1501,7 +1509,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1501
1509
|
},
|
|
1502
1510
|
displayName: "Icon__IconStyled",
|
|
1503
1511
|
componentId: "sc-1105czq-0"
|
|
1504
|
-
})(templateObject_1$
|
|
1512
|
+
})(templateObject_1$z || (templateObject_1$z = __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) {
|
|
1505
1513
|
var $size = _a.$size;
|
|
1506
1514
|
return tokensData.semantic.size.icon[$size];
|
|
1507
1515
|
}, function (_a) {
|
|
@@ -1565,13 +1573,13 @@ var Icon = function Icon(_a) {
|
|
|
1565
1573
|
d: iconData.path
|
|
1566
1574
|
})));
|
|
1567
1575
|
};
|
|
1568
|
-
var templateObject_1$
|
|
1576
|
+
var templateObject_1$z;
|
|
1569
1577
|
|
|
1570
1578
|
React.createElement;
|
|
1571
1579
|
var button = tokensData.component.button,
|
|
1572
|
-
semantic$
|
|
1580
|
+
semantic$a = tokensData.semantic;
|
|
1573
1581
|
// Base styles shared between button and link
|
|
1574
|
-
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$
|
|
1582
|
+
var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(tokensData.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic$a.motion.hover, ";\n white-space: nowrap;\n user-select: none;\n \n &:focus {\n outline: ").concat(button.focus.outline, ";\n outline-offset: ").concat(button.focus.outlineOffset, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n");
|
|
1575
1583
|
// Dynamic variant styles using component tokens
|
|
1576
1584
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1577
1585
|
var $variant = _a.$variant;
|
|
@@ -1597,14 +1605,14 @@ var StyledButton = styled.button.withConfig({
|
|
|
1597
1605
|
},
|
|
1598
1606
|
displayName: "Button__StyledButton",
|
|
1599
1607
|
componentId: "sc-1eiuum9-0"
|
|
1600
|
-
})(templateObject_1$
|
|
1608
|
+
})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1601
1609
|
var StyledLink = styled.a.withConfig({
|
|
1602
1610
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1603
1611
|
return !prop.startsWith('$');
|
|
1604
1612
|
},
|
|
1605
1613
|
displayName: "Button__StyledLink",
|
|
1606
1614
|
componentId: "sc-1eiuum9-1"
|
|
1607
|
-
})(templateObject_2$
|
|
1615
|
+
})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1608
1616
|
// Helper function to get icon size based on button size
|
|
1609
1617
|
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1610
1618
|
// Helper function to get icon size based on button size
|
|
@@ -1696,7 +1704,7 @@ var Button = function Button(_a) {
|
|
|
1696
1704
|
"data-testid": dataTestId
|
|
1697
1705
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1698
1706
|
};
|
|
1699
|
-
var templateObject_1$
|
|
1707
|
+
var templateObject_1$y, templateObject_2$m;
|
|
1700
1708
|
|
|
1701
1709
|
var chip = tokensData.component.chip;
|
|
1702
1710
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1757,14 +1765,14 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1757
1765
|
},
|
|
1758
1766
|
displayName: "ChipBase__BaseChipStyled",
|
|
1759
1767
|
componentId: "sc-moa6zc-0"
|
|
1760
|
-
})(templateObject_1$
|
|
1768
|
+
})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: 12px;\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: width ", ";\n \n /* Use CSS custom properties set by wrapper */\n background-color: var(--chip-bg-color);\n color: var(--chip-text-color);\n font: var(--chip-font);\n padding: var(--chip-padding);\n opacity: var(--chip-opacity, 1);\n cursor: var(--chip-cursor, default);\n \n &:hover {\n opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n }\n \n &:active {\n opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: 12px;\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: width ", ";\n \n /* Use CSS custom properties set by wrapper */\n background-color: var(--chip-bg-color);\n color: var(--chip-text-color);\n font: var(--chip-font);\n padding: var(--chip-padding);\n opacity: var(--chip-opacity, 1);\n cursor: var(--chip-cursor, default);\n \n &:hover {\n opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n }\n \n &:active {\n opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"
|
|
1761
1769
|
// Icon container for selected indicator or leading icons
|
|
1762
1770
|
])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1763
1771
|
// Icon container for selected indicator or leading icons
|
|
1764
1772
|
var IconContainer = styled.span.withConfig({
|
|
1765
1773
|
displayName: "ChipBase__IconContainer",
|
|
1766
1774
|
componentId: "sc-moa6zc-1"
|
|
1767
|
-
})(templateObject_2$
|
|
1775
|
+
})(templateObject_2$l || (templateObject_2$l = __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"
|
|
1768
1776
|
// Close button for dismissible chips
|
|
1769
1777
|
])), tokensData.semantic.spacing.layout.sm);
|
|
1770
1778
|
// Close button for dismissible chips
|
|
@@ -1774,7 +1782,7 @@ var CloseButton = styled.button.withConfig({
|
|
|
1774
1782
|
},
|
|
1775
1783
|
displayName: "ChipBase__CloseButton",
|
|
1776
1784
|
componentId: "sc-moa6zc-2"
|
|
1777
|
-
})(templateObject_3$
|
|
1785
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 0;\n cursor: ", ";\n opacity: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n opacity: 0.7;\n }\n \n &:active:not(:disabled) {\n opacity: 0.9;\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: 2px;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 0;\n cursor: ", ";\n opacity: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n opacity: 0.7;\n }\n \n &:active:not(:disabled) {\n opacity: 0.9;\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: 2px;\n }\n"
|
|
1778
1786
|
// Wrapper component that applies styles via CSS custom properties
|
|
1779
1787
|
])), tokensData.semantic.spacing.layout.sm, function (props) {
|
|
1780
1788
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
@@ -1809,7 +1817,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1809
1817
|
style: __assign(__assign({}, cssProps), style)
|
|
1810
1818
|
}, htmlProps), children);
|
|
1811
1819
|
};
|
|
1812
|
-
var templateObject_1$
|
|
1820
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$i;
|
|
1813
1821
|
|
|
1814
1822
|
React.createElement;
|
|
1815
1823
|
/**
|
|
@@ -2050,35 +2058,35 @@ var media$1 = {
|
|
|
2050
2058
|
|
|
2051
2059
|
React.createElement;
|
|
2052
2060
|
var spacing$3 = tokensData.semantic.spacing;
|
|
2053
|
-
var StyledContainer = styled.div.withConfig({
|
|
2061
|
+
var StyledContainer$2 = styled.div.withConfig({
|
|
2054
2062
|
displayName: "Container__StyledContainer",
|
|
2055
2063
|
componentId: "sc-17dbj6n-0"
|
|
2056
|
-
})(templateObject_1$
|
|
2064
|
+
})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: ", ";\n padding-right: ", ";\n \n ", " {\n max-width: 640px;\n }\n \n ", " {\n max-width: 768px;\n }\n \n ", " {\n max-width: 1024px;\n }\n \n ", " {\n max-width: 1280px;\n }\n \n ", " {\n max-width: 1536px;\n }\n"], ["\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: ", ";\n padding-right: ", ";\n \n ", " {\n max-width: 640px;\n }\n \n ", " {\n max-width: 768px;\n }\n \n ", " {\n max-width: 1024px;\n }\n \n ", " {\n max-width: 1280px;\n }\n \n ", " {\n max-width: 1536px;\n }\n"])), spacing$3.layout['2xl'], spacing$3.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
|
|
2057
2065
|
var Container = function Container(_a) {
|
|
2058
2066
|
var children = _a.children,
|
|
2059
2067
|
props = __rest(_a, ["children"]);
|
|
2060
|
-
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
2068
|
+
return /*#__PURE__*/React.createElement(StyledContainer$2, props, children);
|
|
2061
2069
|
};
|
|
2062
|
-
var templateObject_1$
|
|
2070
|
+
var templateObject_1$w;
|
|
2063
2071
|
|
|
2064
2072
|
React.createElement;
|
|
2065
2073
|
var base$7 = tokensData.base;
|
|
2066
2074
|
var PictureWrapper = styled.div.withConfig({
|
|
2067
2075
|
displayName: "Picture__PictureWrapper",
|
|
2068
2076
|
componentId: "sc-11d9tei-0"
|
|
2069
|
-
})(templateObject_1$
|
|
2077
|
+
})(templateObject_1$v || (templateObject_1$v = __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);
|
|
2070
2078
|
var ImageLink = styled.a.withConfig({
|
|
2071
2079
|
displayName: "Picture__ImageLink",
|
|
2072
2080
|
componentId: "sc-11d9tei-1"
|
|
2073
|
-
})(templateObject_2$
|
|
2081
|
+
})(templateObject_2$k || (templateObject_2$k = __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$7.duration.normal, base$7.easing.easeInOut);
|
|
2074
2082
|
var ImageButton = styled.button.withConfig({
|
|
2075
2083
|
displayName: "Picture__ImageButton",
|
|
2076
2084
|
componentId: "sc-11d9tei-2"
|
|
2077
|
-
})(templateObject_3$
|
|
2085
|
+
})(templateObject_3$h || (templateObject_3$h = __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$7.duration.normal, base$7.easing.easeInOut);
|
|
2078
2086
|
var StyledImage = styled.img.withConfig({
|
|
2079
2087
|
displayName: "Picture__StyledImage",
|
|
2080
2088
|
componentId: "sc-11d9tei-3"
|
|
2081
|
-
})(templateObject_4$
|
|
2089
|
+
})(templateObject_4$f || (templateObject_4$f = __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$7.border.radius[2]);
|
|
2082
2090
|
var Picture = function Picture(_a) {
|
|
2083
2091
|
var title = _a.title,
|
|
2084
2092
|
src = _a.src,
|
|
@@ -2105,7 +2113,7 @@ var Picture = function Picture(_a) {
|
|
|
2105
2113
|
"aria-label": "Read more about ".concat(title)
|
|
2106
2114
|
}, image) : image);
|
|
2107
2115
|
};
|
|
2108
|
-
var templateObject_1$
|
|
2116
|
+
var templateObject_1$v, templateObject_2$k, templateObject_3$h, templateObject_4$f;
|
|
2109
2117
|
|
|
2110
2118
|
React.createElement;
|
|
2111
2119
|
var _a$4 = tokensData.semantic,
|
|
@@ -2114,19 +2122,55 @@ var _a$4 = tokensData.semantic,
|
|
|
2114
2122
|
var TimeStyled = styled.time.withConfig({
|
|
2115
2123
|
displayName: "DateFormatter__TimeStyled",
|
|
2116
2124
|
componentId: "sc-5464cc-0"
|
|
2117
|
-
})(templateObject_1$
|
|
2125
|
+
})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
2126
|
+
/**
|
|
2127
|
+
* Formats a date with smart relative/absolute logic
|
|
2128
|
+
*/])), typography$1.label, color$2.text.subdued);
|
|
2129
|
+
/**
|
|
2130
|
+
* Formats a date with smart relative/absolute logic
|
|
2131
|
+
*/
|
|
2132
|
+
var formatDateSmart = function formatDateSmart(date, customFormat) {
|
|
2133
|
+
// Relative labels for recent dates
|
|
2134
|
+
if (isToday(date)) return 'Today';
|
|
2135
|
+
if (isYesterday(date)) return 'Yesterday';
|
|
2136
|
+
// Show day name for dates within this week
|
|
2137
|
+
if (isThisWeek(date, {
|
|
2138
|
+
weekStartsOn: 1
|
|
2139
|
+
})) {
|
|
2140
|
+
return format(date, 'EEEE'); // "Monday", "Tuesday", etc.
|
|
2141
|
+
}
|
|
2142
|
+
// Fall back to custom format or default full date format
|
|
2143
|
+
return format(date, customFormat || 'MMMM dd, yyyy');
|
|
2144
|
+
};
|
|
2118
2145
|
var DateFormatter = function DateFormatter(_a) {
|
|
2119
2146
|
var dateString = _a.dateString,
|
|
2120
|
-
|
|
2121
|
-
|
|
2147
|
+
formatString = _a.formatString,
|
|
2148
|
+
_b = _a.mode,
|
|
2149
|
+
mode = _b === void 0 ? 'absolute' : _b,
|
|
2122
2150
|
dataTestId = _a["data-testid"];
|
|
2123
2151
|
var date = parseISO(dateString);
|
|
2152
|
+
var displayText;
|
|
2153
|
+
switch (mode) {
|
|
2154
|
+
case 'relative':
|
|
2155
|
+
// Always use relative labels (Today/Yesterday) or fall back to day name
|
|
2156
|
+
displayText = formatDateSmart(date, formatString);
|
|
2157
|
+
break;
|
|
2158
|
+
case 'smart':
|
|
2159
|
+
// Smart mode: relative for recent, absolute for older
|
|
2160
|
+
displayText = formatDateSmart(date, formatString);
|
|
2161
|
+
break;
|
|
2162
|
+
case 'absolute':
|
|
2163
|
+
default:
|
|
2164
|
+
// Always use the format string (default 'yyyy')
|
|
2165
|
+
displayText = format(date, formatString || 'yyyy');
|
|
2166
|
+
break;
|
|
2167
|
+
}
|
|
2124
2168
|
return /*#__PURE__*/React.createElement(TimeStyled, {
|
|
2125
2169
|
dateTime: dateString,
|
|
2126
2170
|
"data-testid": dataTestId
|
|
2127
|
-
},
|
|
2171
|
+
}, displayText);
|
|
2128
2172
|
};
|
|
2129
|
-
var templateObject_1$
|
|
2173
|
+
var templateObject_1$u;
|
|
2130
2174
|
|
|
2131
2175
|
React.createElement;
|
|
2132
2176
|
var motion = tokensData.semantic.motion,
|
|
@@ -2137,7 +2181,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2137
2181
|
},
|
|
2138
2182
|
displayName: "IconButton__IconButtonStyled",
|
|
2139
2183
|
componentId: "sc-k8b14t-0"
|
|
2140
|
-
})(templateObject_1$
|
|
2184
|
+
})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n border-radius: ", ";\n transition: ", ";\n box-sizing: border-box;\n display: ", ";\n justify-content: ", ";\n align-items: ", ";\n height: max-content;\n cursor: pointer;\n position: relative;\n\n /* Size-specific dimensions from component tokens */\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n border: 1px solid;\n }\n\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n"], ["\n background-color: ", ";\n border: none;\n border-radius: ", ";\n transition: ", ";\n box-sizing: border-box;\n display: ", ";\n justify-content: ", ";\n align-items: ", ";\n height: max-content;\n cursor: pointer;\n position: relative;\n\n /* Size-specific dimensions from component tokens */\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n cursor: not-allowed;\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n border: 1px solid;\n }\n\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n"])), function (_a) {
|
|
2141
2185
|
var $variant = _a.$variant;
|
|
2142
2186
|
switch ($variant) {
|
|
2143
2187
|
case 'primary':
|
|
@@ -2248,7 +2292,113 @@ var IconButton = function IconButton(_a) {
|
|
|
2248
2292
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2249
2293
|
}));
|
|
2250
2294
|
};
|
|
2251
|
-
var templateObject_1$
|
|
2295
|
+
var templateObject_1$t;
|
|
2296
|
+
|
|
2297
|
+
React.createElement;
|
|
2298
|
+
var StyledWrapper = styled.span.withConfig({
|
|
2299
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2300
|
+
return !prop.startsWith('$');
|
|
2301
|
+
},
|
|
2302
|
+
displayName: "MoneyDisplay__StyledWrapper",
|
|
2303
|
+
componentId: "sc-1mddej3-0"
|
|
2304
|
+
})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: inline-block;\n text-align: ", ";\n font-weight: ", ";\n"], ["\n display: inline-block;\n text-align: ", ";\n font-weight: ", ";\n"
|
|
2305
|
+
// Map size to Typography variant
|
|
2306
|
+
])), function (_a) {
|
|
2307
|
+
var $align = _a.$align;
|
|
2308
|
+
return $align;
|
|
2309
|
+
}, function (_a) {
|
|
2310
|
+
var $weight = _a.$weight;
|
|
2311
|
+
return $weight === 'regular' ? 400 : $weight === 'medium' ? 500 : 700;
|
|
2312
|
+
});
|
|
2313
|
+
// Map size to Typography variant
|
|
2314
|
+
var sizeToTypographyVariant = {
|
|
2315
|
+
small: 'caption',
|
|
2316
|
+
medium: 'body',
|
|
2317
|
+
large: 'h3',
|
|
2318
|
+
xlarge: 'h2'
|
|
2319
|
+
};
|
|
2320
|
+
// Map MoneyDisplay variant to Typography color
|
|
2321
|
+
var variantToTypographyColor = {
|
|
2322
|
+
"default": 'default',
|
|
2323
|
+
positive: 'success',
|
|
2324
|
+
// Green color for credits/income
|
|
2325
|
+
negative: 'error',
|
|
2326
|
+
// Red color for debits/expenses
|
|
2327
|
+
neutral: 'subdued' // Gray color for informational
|
|
2328
|
+
};
|
|
2329
|
+
/**
|
|
2330
|
+
* Generates aria-label with spelled out amount
|
|
2331
|
+
*/
|
|
2332
|
+
var generateAriaLabel = function generateAriaLabel(amount, currency, locale) {
|
|
2333
|
+
var _a, _b;
|
|
2334
|
+
var formatter = new Intl.NumberFormat(locale, {
|
|
2335
|
+
style: 'currency',
|
|
2336
|
+
currency: currency,
|
|
2337
|
+
minimumFractionDigits: 2,
|
|
2338
|
+
maximumFractionDigits: 2
|
|
2339
|
+
});
|
|
2340
|
+
// Get parts to spell out the amount
|
|
2341
|
+
var parts = formatter.formatToParts(Math.abs(amount));
|
|
2342
|
+
var integerPart = ((_a = parts.find(function (p) {
|
|
2343
|
+
return p.type === 'integer';
|
|
2344
|
+
})) === null || _a === void 0 ? void 0 : _a.value) || '0';
|
|
2345
|
+
var fractionPart = ((_b = parts.find(function (p) {
|
|
2346
|
+
return p.type === 'fraction';
|
|
2347
|
+
})) === null || _b === void 0 ? void 0 : _b.value) || '00';
|
|
2348
|
+
var sign = amount < 0 ? 'negative ' : '';
|
|
2349
|
+
return "".concat(sign).concat(integerPart, " dollars and ").concat(fractionPart, " cents");
|
|
2350
|
+
};
|
|
2351
|
+
var MoneyDisplay = function MoneyDisplay(_a) {
|
|
2352
|
+
var amount = _a.amount,
|
|
2353
|
+
_b = _a.currency,
|
|
2354
|
+
currency = _b === void 0 ? 'AUD' : _b,
|
|
2355
|
+
_c = _a.variant,
|
|
2356
|
+
variant = _c === void 0 ? 'default' : _c,
|
|
2357
|
+
_d = _a.showSign,
|
|
2358
|
+
showSign = _d === void 0 ? false : _d,
|
|
2359
|
+
_e = _a.size,
|
|
2360
|
+
size = _e === void 0 ? 'medium' : _e,
|
|
2361
|
+
_f = _a.weight,
|
|
2362
|
+
weight = _f === void 0 ? 'regular' : _f,
|
|
2363
|
+
_g = _a.locale,
|
|
2364
|
+
locale = _g === void 0 ? 'en-AU' : _g,
|
|
2365
|
+
_h = _a.align,
|
|
2366
|
+
align = _h === void 0 ? 'left' : _h,
|
|
2367
|
+
dataTestId = _a["data-testid"];
|
|
2368
|
+
// Format the number with Intl.NumberFormat
|
|
2369
|
+
var formatter = new Intl.NumberFormat(locale, {
|
|
2370
|
+
style: 'currency',
|
|
2371
|
+
currency: currency,
|
|
2372
|
+
minimumFractionDigits: 2,
|
|
2373
|
+
maximumFractionDigits: 2
|
|
2374
|
+
});
|
|
2375
|
+
var formattedAmount = formatter.format(Math.abs(amount));
|
|
2376
|
+
// Add sign if needed
|
|
2377
|
+
var displayText = formattedAmount;
|
|
2378
|
+
if (showSign && amount !== 0) {
|
|
2379
|
+
var signSymbol = amount > 0 ? '+' : '−'; // Using minus sign character, not hyphen
|
|
2380
|
+
displayText = signSymbol + formattedAmount;
|
|
2381
|
+
} else if (amount < 0 && !showSign) {
|
|
2382
|
+
// Still show negative sign even without showSign
|
|
2383
|
+
displayText = '−' + formattedAmount;
|
|
2384
|
+
}
|
|
2385
|
+
// Generate accessibility label
|
|
2386
|
+
var ariaLabel = generateAriaLabel(amount, currency, locale);
|
|
2387
|
+
// Get typography variant and color
|
|
2388
|
+
var typographyVariant = sizeToTypographyVariant[size];
|
|
2389
|
+
var typographyColor = variantToTypographyColor[variant];
|
|
2390
|
+
return /*#__PURE__*/React.createElement(StyledWrapper, {
|
|
2391
|
+
$align: align,
|
|
2392
|
+
$weight: weight,
|
|
2393
|
+
"aria-label": ariaLabel,
|
|
2394
|
+
"data-testid": dataTestId
|
|
2395
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
2396
|
+
variant: typographyVariant,
|
|
2397
|
+
color: typographyColor,
|
|
2398
|
+
as: "span"
|
|
2399
|
+
}, displayText));
|
|
2400
|
+
};
|
|
2401
|
+
var templateObject_1$s;
|
|
2252
2402
|
|
|
2253
2403
|
React.createElement;
|
|
2254
2404
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -2257,10 +2407,10 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
2257
2407
|
},
|
|
2258
2408
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2259
2409
|
componentId: "sc-1nco33q-0"
|
|
2260
|
-
})(templateObject_3$
|
|
2261
|
-
return props.$variant === 'horizontal' && css(templateObject_1$
|
|
2410
|
+
})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"])), tokensData.semantic.color.background.disabled, tokensData.base.border.radius[1], function (props) {
|
|
2411
|
+
return props.$variant === 'horizontal' && css(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? tokensData.component.progressBar.sizes[props.$height].height : tokensData.component.progressBar.sizes.md.height);
|
|
2262
2412
|
}, function (props) {
|
|
2263
|
-
return props.$variant === 'vertical' && css(templateObject_2$
|
|
2413
|
+
return props.$variant === 'vertical' && css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? tokensData.component.progressBar.sizes[props.$width].height : tokensData.component.progressBar.sizes.md.height);
|
|
2264
2414
|
});
|
|
2265
2415
|
var ProgressBarFill = styled.div.withConfig({
|
|
2266
2416
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2268,7 +2418,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2268
2418
|
},
|
|
2269
2419
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2270
2420
|
componentId: "sc-1nco33q-1"
|
|
2271
|
-
})(templateObject_7$
|
|
2421
|
+
})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), tokensData.semantic.motion.transition.normal, function (props) {
|
|
2272
2422
|
var backgroundColor;
|
|
2273
2423
|
switch (props.$color) {
|
|
2274
2424
|
case 'success':
|
|
@@ -2282,11 +2432,11 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2282
2432
|
backgroundColor = tokensData.semantic.color.background.interactive;
|
|
2283
2433
|
break;
|
|
2284
2434
|
}
|
|
2285
|
-
return css(templateObject_4$
|
|
2435
|
+
return css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2286
2436
|
}, function (props) {
|
|
2287
|
-
return props.$variant === 'horizontal' && css(templateObject_5$
|
|
2437
|
+
return props.$variant === 'horizontal' && css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2288
2438
|
}, function (props) {
|
|
2289
|
-
return props.$variant === 'vertical' && css(templateObject_6$
|
|
2439
|
+
return props.$variant === 'vertical' && css(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2290
2440
|
});
|
|
2291
2441
|
var ProgressBar = function ProgressBar(_a) {
|
|
2292
2442
|
var value = _a.value,
|
|
@@ -2312,7 +2462,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2312
2462
|
$color: color
|
|
2313
2463
|
}));
|
|
2314
2464
|
};
|
|
2315
|
-
var templateObject_1$
|
|
2465
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$g, templateObject_4$e, templateObject_5$b, templateObject_6$a, templateObject_7$8;
|
|
2316
2466
|
|
|
2317
2467
|
React.createElement;
|
|
2318
2468
|
var StyledDivider = styled.div.withConfig({
|
|
@@ -2321,7 +2471,7 @@ var StyledDivider = styled.div.withConfig({
|
|
|
2321
2471
|
},
|
|
2322
2472
|
displayName: "Divider__StyledDivider",
|
|
2323
2473
|
componentId: "sc-1l0c8ja-0"
|
|
2324
|
-
})(templateObject_1$
|
|
2474
|
+
})(templateObject_1$q || (templateObject_1$q = __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"
|
|
2325
2475
|
/**
|
|
2326
2476
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2327
2477
|
*
|
|
@@ -2434,7 +2584,7 @@ var Divider = function Divider(_a) {
|
|
|
2434
2584
|
"aria-orientation": orientation
|
|
2435
2585
|
});
|
|
2436
2586
|
};
|
|
2437
|
-
var templateObject_1$
|
|
2587
|
+
var templateObject_1$q;
|
|
2438
2588
|
|
|
2439
2589
|
React.createElement;
|
|
2440
2590
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2443,7 +2593,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2443
2593
|
},
|
|
2444
2594
|
displayName: "Stack__StyledStack",
|
|
2445
2595
|
componentId: "sc-1ehkxgy-0"
|
|
2446
|
-
})(templateObject_1$
|
|
2596
|
+
})(templateObject_1$p || (templateObject_1$p = __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"
|
|
2447
2597
|
// Helper function to convert gap prop to CSS value
|
|
2448
2598
|
])));
|
|
2449
2599
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2481,17 +2631,17 @@ var Stack = function Stack(_a) {
|
|
|
2481
2631
|
"data-testid": dataTestId
|
|
2482
2632
|
}, children);
|
|
2483
2633
|
};
|
|
2484
|
-
var templateObject_1$
|
|
2634
|
+
var templateObject_1$p;
|
|
2485
2635
|
|
|
2486
2636
|
React.createElement;
|
|
2487
|
-
var semantic$
|
|
2637
|
+
var semantic$9 = tokensData.semantic;
|
|
2488
2638
|
var StyledTag = styled.span.withConfig({
|
|
2489
2639
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2490
2640
|
return !prop.startsWith('$');
|
|
2491
2641
|
},
|
|
2492
2642
|
displayName: "Tag__StyledTag",
|
|
2493
2643
|
componentId: "sc-lzfmti-0"
|
|
2494
|
-
})(templateObject_1$
|
|
2644
|
+
})(templateObject_1$o || (templateObject_1$o = __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"
|
|
2495
2645
|
/**
|
|
2496
2646
|
* Tag component for categorizing and labeling content
|
|
2497
2647
|
*
|
|
@@ -2501,33 +2651,33 @@ var StyledTag = styled.span.withConfig({
|
|
|
2501
2651
|
var $variant = _a.$variant;
|
|
2502
2652
|
switch ($variant) {
|
|
2503
2653
|
case 'interactive':
|
|
2504
|
-
return semantic$
|
|
2654
|
+
return semantic$9.color.background['interactive-subtle'];
|
|
2505
2655
|
case 'success':
|
|
2506
|
-
return semantic$
|
|
2656
|
+
return semantic$9.color.background['success-subtle'];
|
|
2507
2657
|
case 'warning':
|
|
2508
|
-
return semantic$
|
|
2658
|
+
return semantic$9.color.background['warning-subtle'];
|
|
2509
2659
|
case 'error':
|
|
2510
|
-
return semantic$
|
|
2660
|
+
return semantic$9.color.background['error-subtle'];
|
|
2511
2661
|
case 'emphasis':
|
|
2512
|
-
return semantic$
|
|
2662
|
+
return semantic$9.color.background.emphasis;
|
|
2513
2663
|
default:
|
|
2514
|
-
return semantic$
|
|
2664
|
+
return semantic$9.color.background.surface;
|
|
2515
2665
|
}
|
|
2516
2666
|
}, function (_a) {
|
|
2517
2667
|
var $variant = _a.$variant;
|
|
2518
2668
|
switch ($variant) {
|
|
2519
2669
|
case 'interactive':
|
|
2520
|
-
return semantic$
|
|
2670
|
+
return semantic$9.color.text.interactive;
|
|
2521
2671
|
case 'success':
|
|
2522
|
-
return semantic$
|
|
2672
|
+
return semantic$9.color.text.success;
|
|
2523
2673
|
case 'warning':
|
|
2524
|
-
return semantic$
|
|
2674
|
+
return semantic$9.color.text.warning;
|
|
2525
2675
|
case 'error':
|
|
2526
|
-
return semantic$
|
|
2676
|
+
return semantic$9.color.text.error;
|
|
2527
2677
|
case 'emphasis':
|
|
2528
|
-
return semantic$
|
|
2678
|
+
return semantic$9.color.text.inverse;
|
|
2529
2679
|
default:
|
|
2530
|
-
return semantic$
|
|
2680
|
+
return semantic$9.color.text["default"];
|
|
2531
2681
|
}
|
|
2532
2682
|
}, function (_a) {
|
|
2533
2683
|
var $variant = _a.$variant,
|
|
@@ -2535,17 +2685,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2535
2685
|
if (!$border) return 'none';
|
|
2536
2686
|
switch ($variant) {
|
|
2537
2687
|
case 'interactive':
|
|
2538
|
-
return "1px solid ".concat(semantic$
|
|
2688
|
+
return "1px solid ".concat(semantic$9.color.border.interactive);
|
|
2539
2689
|
case 'success':
|
|
2540
|
-
return "1px solid ".concat(semantic$
|
|
2690
|
+
return "1px solid ".concat(semantic$9.color.border.success);
|
|
2541
2691
|
case 'warning':
|
|
2542
|
-
return "1px solid ".concat(semantic$
|
|
2692
|
+
return "1px solid ".concat(semantic$9.color.border.warning);
|
|
2543
2693
|
case 'error':
|
|
2544
|
-
return "1px solid ".concat(semantic$
|
|
2694
|
+
return "1px solid ".concat(semantic$9.color.border.error);
|
|
2545
2695
|
case 'emphasis':
|
|
2546
|
-
return "1px solid ".concat(semantic$
|
|
2696
|
+
return "1px solid ".concat(semantic$9.color.background.emphasis);
|
|
2547
2697
|
default:
|
|
2548
|
-
return "1px solid ".concat(semantic$
|
|
2698
|
+
return "1px solid ".concat(semantic$9.color.border["default"]);
|
|
2549
2699
|
}
|
|
2550
2700
|
});
|
|
2551
2701
|
/**
|
|
@@ -2572,10 +2722,172 @@ var Tag = function Tag(_a) {
|
|
|
2572
2722
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
2573
2723
|
}, props), children);
|
|
2574
2724
|
};
|
|
2575
|
-
var templateObject_1$
|
|
2725
|
+
var templateObject_1$o;
|
|
2726
|
+
|
|
2727
|
+
React.createElement;
|
|
2728
|
+
var StyledCard = styled.div.withConfig({
|
|
2729
|
+
displayName: "AccountCard__StyledCard",
|
|
2730
|
+
componentId: "sc-1erp7zn-0"
|
|
2731
|
+
})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n min-width: 300px;\n min-height: 200px;\n padding: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: all 0.2s ease;\n \n ", "\n"], ["\n min-width: 300px;\n min-height: 200px;\n padding: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: all 0.2s ease;\n \n ", "\n"])), tokensData.semantic.spacing.layout.lg, tokensData.semantic.color.background.surface, tokensData.semantic.color.border["default"], tokensData.base.border.radius[5], tokensData.base.shadow[3], function (_a) {
|
|
2732
|
+
var $clickable = _a.$clickable;
|
|
2733
|
+
return $clickable && "\n cursor: pointer;\n \n &:hover {\n box-shadow: ".concat(tokensData.base.shadow[4], ";\n transform: translateY(-2px);\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n outline-offset: 2px;\n }\n ");
|
|
2734
|
+
});
|
|
2735
|
+
var StyledHeader$1 = styled.div.withConfig({
|
|
2736
|
+
displayName: "AccountCard__StyledHeader",
|
|
2737
|
+
componentId: "sc-1erp7zn-1"
|
|
2738
|
+
})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.md);
|
|
2739
|
+
var StyledIconWrapper = styled.div.withConfig({
|
|
2740
|
+
displayName: "AccountCard__StyledIconWrapper",
|
|
2741
|
+
componentId: "sc-1erp7zn-2"
|
|
2742
|
+
})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: ", ";\n color: ", ";\n"], ["\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: ", ";\n color: ", ";\n"])), tokensData.semantic.color.background.interactive, tokensData.base.border.radius[3], tokensData.semantic.color.icon.interactive);
|
|
2743
|
+
var StyledBalanceSection = styled.div.withConfig({
|
|
2744
|
+
displayName: "AccountCard__StyledBalanceSection",
|
|
2745
|
+
componentId: "sc-1erp7zn-3"
|
|
2746
|
+
})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.lg);
|
|
2747
|
+
var StyledTrendSection = styled.div.withConfig({
|
|
2748
|
+
displayName: "AccountCard__StyledTrendSection",
|
|
2749
|
+
componentId: "sc-1erp7zn-4"
|
|
2750
|
+
})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n margin-top: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n margin-top: ", ";\n"])), tokensData.semantic.spacing.layout.xs, tokensData.semantic.spacing.layout.sm);
|
|
2751
|
+
var StyledActions$1 = styled.div.withConfig({
|
|
2752
|
+
displayName: "AccountCard__StyledActions",
|
|
2753
|
+
componentId: "sc-1erp7zn-5"
|
|
2754
|
+
})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n margin-top: auto;\n \n & > * {\n flex: 1;\n }\n"], ["\n display: flex;\n gap: ", ";\n margin-top: auto;\n \n & > * {\n flex: 1;\n }\n"])), tokensData.semantic.spacing.layout.sm);
|
|
2755
|
+
var StyledStackWrapper = styled.div.withConfig({
|
|
2756
|
+
displayName: "AccountCard__StyledStackWrapper",
|
|
2757
|
+
componentId: "sc-1erp7zn-6"
|
|
2758
|
+
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n height: 100%;\n min-height: 168px;\n"], ["\n height: 100%;\n min-height: 168px;\n"
|
|
2759
|
+
// Map account types to icon names (using placeholders)
|
|
2760
|
+
])));
|
|
2761
|
+
// Map account types to icon names (using placeholders)
|
|
2762
|
+
var accountTypeToIcon = {
|
|
2763
|
+
checking: 'paper',
|
|
2764
|
+
// Will use bank icon
|
|
2765
|
+
savings: 'star',
|
|
2766
|
+
// Will use piggyBank icon
|
|
2767
|
+
credit: 'paper',
|
|
2768
|
+
// Will use creditCard icon
|
|
2769
|
+
investment: 'star',
|
|
2770
|
+
// Will use chartLine icon
|
|
2771
|
+
loan: 'paper' // Will use document icon
|
|
2772
|
+
};
|
|
2773
|
+
// Map trend direction to icon and color
|
|
2774
|
+
var trendToIcon = {
|
|
2775
|
+
up: 'arrowUp',
|
|
2776
|
+
down: 'arrowDown',
|
|
2777
|
+
neutral: 'arrowRight'
|
|
2778
|
+
};
|
|
2779
|
+
/**
|
|
2780
|
+
* AccountCard component
|
|
2781
|
+
*
|
|
2782
|
+
* Displays account information in a card format with account type icon,
|
|
2783
|
+
* name, balance, optional trend indicator, and action buttons. Minimum
|
|
2784
|
+
* 300x200px with elevation and hover effects.
|
|
2785
|
+
*
|
|
2786
|
+
* Composes: Stack, Box, Icon, Typography, MoneyDisplay, Button
|
|
2787
|
+
*/
|
|
2788
|
+
var AccountCard = function AccountCard(_a) {
|
|
2789
|
+
var accountType = _a.accountType,
|
|
2790
|
+
accountName = _a.accountName,
|
|
2791
|
+
balance = _a.balance,
|
|
2792
|
+
accountNumber = _a.accountNumber,
|
|
2793
|
+
trend = _a.trend,
|
|
2794
|
+
trendValue = _a.trendValue,
|
|
2795
|
+
action = _a.action,
|
|
2796
|
+
secondaryAction = _a.secondaryAction,
|
|
2797
|
+
_b = _a.currency,
|
|
2798
|
+
currency = _b === void 0 ? 'AUD' : _b,
|
|
2799
|
+
onClick = _a.onClick,
|
|
2800
|
+
dataTestId = _a["data-testid"];
|
|
2801
|
+
var isClickable = !!onClick;
|
|
2802
|
+
// Get account type icon
|
|
2803
|
+
var accountIcon = accountTypeToIcon[accountType];
|
|
2804
|
+
// Get trend icon and color
|
|
2805
|
+
var trendIcon = trend ? trendToIcon[trend] : undefined;
|
|
2806
|
+
var trendColor = trend === 'up' ? 'success' : trend === 'down' ? 'error' : 'subdued';
|
|
2807
|
+
var handleClick = function handleClick() {
|
|
2808
|
+
if (isClickable && onClick) {
|
|
2809
|
+
onClick();
|
|
2810
|
+
}
|
|
2811
|
+
};
|
|
2812
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
2813
|
+
if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
|
|
2814
|
+
e.preventDefault();
|
|
2815
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
2816
|
+
}
|
|
2817
|
+
};
|
|
2818
|
+
return /*#__PURE__*/React.createElement(StyledCard, {
|
|
2819
|
+
$clickable: isClickable,
|
|
2820
|
+
onClick: handleClick,
|
|
2821
|
+
onKeyDown: handleKeyDown,
|
|
2822
|
+
tabIndex: isClickable ? 0 : undefined,
|
|
2823
|
+
role: isClickable ? 'button' : 'article',
|
|
2824
|
+
"aria-label": isClickable ? "".concat(accountName, " account, balance ").concat(balance) : undefined,
|
|
2825
|
+
"data-testid": dataTestId
|
|
2826
|
+
}, /*#__PURE__*/React.createElement(StyledStackWrapper, null, /*#__PURE__*/React.createElement(Stack, {
|
|
2827
|
+
direction: "column",
|
|
2828
|
+
gap: "none"
|
|
2829
|
+
}, /*#__PURE__*/React.createElement(StyledHeader$1, null, /*#__PURE__*/React.createElement(Stack, {
|
|
2830
|
+
direction: "row",
|
|
2831
|
+
gap: "md",
|
|
2832
|
+
alignItems: "center"
|
|
2833
|
+
}, /*#__PURE__*/React.createElement(StyledIconWrapper, {
|
|
2834
|
+
"aria-label": "".concat(accountType, " account"),
|
|
2835
|
+
role: "img"
|
|
2836
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
2837
|
+
name: accountIcon,
|
|
2838
|
+
size: "md"
|
|
2839
|
+
})), /*#__PURE__*/React.createElement(Stack, {
|
|
2840
|
+
direction: "column",
|
|
2841
|
+
gap: "xs"
|
|
2842
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
2843
|
+
variant: "h4"
|
|
2844
|
+
}, accountName), accountNumber && /*#__PURE__*/React.createElement(Typography, {
|
|
2845
|
+
variant: "caption",
|
|
2846
|
+
color: "subdued"
|
|
2847
|
+
}, "\u2022\u2022\u2022\u2022 ", accountNumber)))), /*#__PURE__*/React.createElement(StyledBalanceSection, null, /*#__PURE__*/React.createElement(Stack, {
|
|
2848
|
+
direction: "column",
|
|
2849
|
+
gap: "xs"
|
|
2850
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
2851
|
+
variant: "caption",
|
|
2852
|
+
color: "subdued"
|
|
2853
|
+
}, "Balance"), /*#__PURE__*/React.createElement(MoneyDisplay, {
|
|
2854
|
+
amount: balance,
|
|
2855
|
+
currency: currency,
|
|
2856
|
+
size: "xlarge",
|
|
2857
|
+
weight: "bold",
|
|
2858
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-balance") : undefined
|
|
2859
|
+
})), trend && trendValue && /*#__PURE__*/React.createElement(StyledTrendSection, {
|
|
2860
|
+
"aria-label": "Trend ".concat(trend),
|
|
2861
|
+
role: "img"
|
|
2862
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
2863
|
+
name: trendIcon,
|
|
2864
|
+
size: "xs",
|
|
2865
|
+
iconColor: trendColor
|
|
2866
|
+
}), /*#__PURE__*/React.createElement(Typography, {
|
|
2867
|
+
variant: "caption",
|
|
2868
|
+
color: trendColor
|
|
2869
|
+
}, trendValue))), (action || secondaryAction) && /*#__PURE__*/React.createElement(StyledActions$1, null, action && /*#__PURE__*/React.createElement(Button, {
|
|
2870
|
+
onClick: function onClick(e) {
|
|
2871
|
+
e.stopPropagation();
|
|
2872
|
+
action.onClick();
|
|
2873
|
+
},
|
|
2874
|
+
variant: action.variant || 'primary',
|
|
2875
|
+
iconName: action.icon,
|
|
2876
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-action") : undefined
|
|
2877
|
+
}, action.label), secondaryAction && /*#__PURE__*/React.createElement(Button, {
|
|
2878
|
+
onClick: function onClick(e) {
|
|
2879
|
+
e.stopPropagation();
|
|
2880
|
+
secondaryAction.onClick();
|
|
2881
|
+
},
|
|
2882
|
+
variant: secondaryAction.variant || 'naked',
|
|
2883
|
+
iconName: secondaryAction.icon,
|
|
2884
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined
|
|
2885
|
+
}, secondaryAction.label)))));
|
|
2886
|
+
};
|
|
2887
|
+
var templateObject_1$n, templateObject_2$i, templateObject_3$f, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7;
|
|
2576
2888
|
|
|
2577
2889
|
React.createElement;
|
|
2578
|
-
var semantic$
|
|
2890
|
+
var semantic$8 = tokensData.semantic,
|
|
2579
2891
|
base$6 = tokensData.base;
|
|
2580
2892
|
// Default icons by variant
|
|
2581
2893
|
var variantIcons = {
|
|
@@ -2604,56 +2916,56 @@ var StyledAlert = styled.div.withConfig({
|
|
|
2604
2916
|
},
|
|
2605
2917
|
displayName: "Alert__StyledAlert",
|
|
2606
2918
|
componentId: "sc-18tq5d-0"
|
|
2607
|
-
})(templateObject_1$
|
|
2919
|
+
})(templateObject_1$m || (templateObject_1$m = __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) {
|
|
2608
2920
|
var $inline = _a.$inline;
|
|
2609
2921
|
return $inline ? 'center' : 'flex-start';
|
|
2610
2922
|
}, function (_a) {
|
|
2611
2923
|
var $inline = _a.$inline;
|
|
2612
|
-
return $inline ? semantic$
|
|
2924
|
+
return $inline ? semantic$8.spacing.layout.sm : semantic$8.spacing.layout.md;
|
|
2613
2925
|
}, function (_a) {
|
|
2614
2926
|
var $inline = _a.$inline;
|
|
2615
|
-
return $inline ? semantic$
|
|
2927
|
+
return $inline ? semantic$8.spacing.layout.sm : semantic$8.spacing.layout.md;
|
|
2616
2928
|
}, base$6.border.radius[2], function (_a) {
|
|
2617
2929
|
var $variant = _a.$variant;
|
|
2618
2930
|
switch ($variant) {
|
|
2619
2931
|
case 'error':
|
|
2620
|
-
return "\n background-color: ".concat(semantic$
|
|
2932
|
+
return "\n background-color: ".concat(semantic$8.color.background['error-subtle'], ";\n border-color: ").concat(semantic$8.color.border.error, ";\n color: ").concat(semantic$8.color.text.error, ";\n ");
|
|
2621
2933
|
case 'warning':
|
|
2622
|
-
return "\n background-color: ".concat(semantic$
|
|
2934
|
+
return "\n background-color: ".concat(semantic$8.color.background['warning-subtle'], ";\n border-color: ").concat(semantic$8.color.border.warning, ";\n color: ").concat(semantic$8.color.text.warning, ";\n ");
|
|
2623
2935
|
case 'success':
|
|
2624
|
-
return "\n background-color: ".concat(semantic$
|
|
2936
|
+
return "\n background-color: ".concat(semantic$8.color.background['success-subtle'], ";\n border-color: ").concat(semantic$8.color.border.success, ";\n color: ").concat(semantic$8.color.text.success, ";\n ");
|
|
2625
2937
|
case 'info':
|
|
2626
2938
|
default:
|
|
2627
|
-
return "\n background-color: ".concat(semantic$
|
|
2939
|
+
return "\n background-color: ".concat(semantic$8.color.background['interactive-subtle'], ";\n border-color: ").concat(semantic$8.color.border.interactive, ";\n color: ").concat(semantic$8.color.text.interactive, ";\n ");
|
|
2628
2940
|
}
|
|
2629
2941
|
}, base$6.breakpoint.md, function (_a) {
|
|
2630
2942
|
var $inline = _a.$inline;
|
|
2631
|
-
return $inline ? semantic$
|
|
2943
|
+
return $inline ? semantic$8.spacing.layout.sm : semantic$8.spacing.layout.lg;
|
|
2632
2944
|
});
|
|
2633
2945
|
var StyledIconContainer$1 = styled.div.withConfig({
|
|
2634
2946
|
displayName: "Alert__StyledIconContainer",
|
|
2635
2947
|
componentId: "sc-18tq5d-1"
|
|
2636
|
-
})(templateObject_2$
|
|
2637
|
-
var StyledContent = styled.div.withConfig({
|
|
2948
|
+
})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n"])));
|
|
2949
|
+
var StyledContent$1 = styled.div.withConfig({
|
|
2638
2950
|
displayName: "Alert__StyledContent",
|
|
2639
2951
|
componentId: "sc-18tq5d-2"
|
|
2640
|
-
})(templateObject_3$
|
|
2952
|
+
})(templateObject_3$e || (templateObject_3$e = __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$8.spacing.layout.xs);
|
|
2641
2953
|
var StyledTitle = styled.span.withConfig({
|
|
2642
2954
|
displayName: "Alert__StyledTitle",
|
|
2643
2955
|
componentId: "sc-18tq5d-3"
|
|
2644
|
-
})(templateObject_4$
|
|
2956
|
+
})(templateObject_4$c || (templateObject_4$c = __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$8.typography.h6);
|
|
2645
2957
|
var StyledMessage = styled.span.withConfig({
|
|
2646
2958
|
displayName: "Alert__StyledMessage",
|
|
2647
2959
|
componentId: "sc-18tq5d-4"
|
|
2648
|
-
})(templateObject_5$
|
|
2960
|
+
})(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n font: ", ";\n\tline-height: 1.25;\n"], ["\n font: ", ";\n\tline-height: 1.25;\n"])), semantic$8.typography.body);
|
|
2649
2961
|
var StyledActions = styled.div.withConfig({
|
|
2650
2962
|
displayName: "Alert__StyledActions",
|
|
2651
2963
|
componentId: "sc-18tq5d-5"
|
|
2652
|
-
})(templateObject_6$
|
|
2964
|
+
})(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$8.spacing.layout.sm);
|
|
2653
2965
|
var StyledDismissButton = styled(IconButton).withConfig({
|
|
2654
2966
|
displayName: "Alert__StyledDismissButton",
|
|
2655
2967
|
componentId: "sc-18tq5d-6"
|
|
2656
|
-
})(templateObject_7$
|
|
2968
|
+
})(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$8.spacing.layout.xs);
|
|
2657
2969
|
var Alert = function Alert(_a) {
|
|
2658
2970
|
var _b = _a.variant,
|
|
2659
2971
|
variant = _b === void 0 ? 'info' : _b,
|
|
@@ -2697,7 +3009,7 @@ var Alert = function Alert(_a) {
|
|
|
2697
3009
|
name: iconName,
|
|
2698
3010
|
size: "md",
|
|
2699
3011
|
iconColor: alertIconColor
|
|
2700
|
-
})), /*#__PURE__*/React.createElement(StyledContent, null, title && /*#__PURE__*/React.createElement(StyledTitle, {
|
|
3012
|
+
})), /*#__PURE__*/React.createElement(StyledContent$1, null, title && /*#__PURE__*/React.createElement(StyledTitle, {
|
|
2701
3013
|
role: "heading",
|
|
2702
3014
|
"aria-level": 6,
|
|
2703
3015
|
color: alertTitleColor
|
|
@@ -2711,18 +3023,18 @@ var Alert = function Alert(_a) {
|
|
|
2711
3023
|
})));
|
|
2712
3024
|
};
|
|
2713
3025
|
Alert.displayName = 'Alert';
|
|
2714
|
-
var templateObject_1$
|
|
3026
|
+
var templateObject_1$m, templateObject_2$h, templateObject_3$e, templateObject_4$c, templateObject_5$9, templateObject_6$8, templateObject_7$6;
|
|
2715
3027
|
|
|
2716
3028
|
React.createElement;
|
|
2717
3029
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
2718
3030
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
2719
3031
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
2720
3032
|
componentId: "sc-7ouzg5-0"
|
|
2721
|
-
})(templateObject_1$
|
|
3033
|
+
})(templateObject_1$l || (templateObject_1$l = __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');
|
|
2722
3034
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
2723
3035
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
2724
3036
|
componentId: "sc-7ouzg5-1"
|
|
2725
|
-
})(templateObject_2$
|
|
3037
|
+
})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n text-decoration: underline;\n color: ", ";\n }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', ((_h = (_g = tokensData.base) === null || _g === void 0 ? void 0 : _g.spacing) === null || _h === void 0 ? void 0 : _h['4']) || '1rem', ((_k = (_j = tokensData.base) === null || _j === void 0 ? void 0 : _j.spacing) === null || _k === void 0 ? void 0 : _k['4']) || '1rem', ((_m = (_l = tokensData.base) === null || _l === void 0 ? void 0 : _l.spacing) === null || _m === void 0 ? void 0 : _m['3']) || '0.75rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
|
|
2726
3038
|
var isInternalUrl = function isInternalUrl(url) {
|
|
2727
3039
|
return url.startsWith('/') && !url.startsWith('http');
|
|
2728
3040
|
};
|
|
@@ -2750,13 +3062,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
2750
3062
|
}, breadcrumb.label)));
|
|
2751
3063
|
}))));
|
|
2752
3064
|
};
|
|
2753
|
-
var templateObject_1$
|
|
3065
|
+
var templateObject_1$l, templateObject_2$g;
|
|
2754
3066
|
|
|
2755
3067
|
React.createElement;
|
|
2756
3068
|
var CardSmallStyled = styled.div.withConfig({
|
|
2757
3069
|
displayName: "CardSmall__CardSmallStyled",
|
|
2758
3070
|
componentId: "sc-jpcqvd-0"
|
|
2759
|
-
})(templateObject_1$
|
|
3071
|
+
})(templateObject_1$k || (templateObject_1$k = __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);
|
|
2760
3072
|
var CardSmall = function CardSmall(_a) {
|
|
2761
3073
|
var title = _a.title,
|
|
2762
3074
|
picture = _a.picture,
|
|
@@ -2798,14 +3110,14 @@ var CardSmall = function CardSmall(_a) {
|
|
|
2798
3110
|
"aria-label": title
|
|
2799
3111
|
}, content));
|
|
2800
3112
|
};
|
|
2801
|
-
var templateObject_1$
|
|
3113
|
+
var templateObject_1$k;
|
|
2802
3114
|
|
|
2803
3115
|
React.createElement;
|
|
2804
3116
|
var border$3 = tokensData.base.border;
|
|
2805
3117
|
var CardLargeStyled = styled.div.withConfig({
|
|
2806
3118
|
displayName: "CardLarge__CardLargeStyled",
|
|
2807
3119
|
componentId: "sc-1rfgdzl-0"
|
|
2808
|
-
})(templateObject_1$
|
|
3120
|
+
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n max-width: 768px;\n\n a {\n text-decoration: none;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n width: 100%;\n }\n"], ["\n max-width: 768px;\n\n a {\n text-decoration: none;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n width: 100%;\n }\n"])), border$3.radius[6]);
|
|
2809
3121
|
var CardLarge = function CardLarge(_a) {
|
|
2810
3122
|
var title = _a.title,
|
|
2811
3123
|
excerpt = _a.excerpt,
|
|
@@ -2850,7 +3162,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
2850
3162
|
});
|
|
2851
3163
|
})))));
|
|
2852
3164
|
};
|
|
2853
|
-
var templateObject_1$
|
|
3165
|
+
var templateObject_1$j;
|
|
2854
3166
|
|
|
2855
3167
|
/**
|
|
2856
3168
|
* Hidden native checkbox input for accessibility
|
|
@@ -2862,7 +3174,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
2862
3174
|
},
|
|
2863
3175
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
2864
3176
|
componentId: "sc-1ddpctx-0"
|
|
2865
|
-
})(templateObject_1$
|
|
3177
|
+
})(templateObject_1$i || (templateObject_1$i = __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"
|
|
2866
3178
|
/**
|
|
2867
3179
|
* Custom checkbox visual component
|
|
2868
3180
|
* 24px × 24px for 8px grid alignment
|
|
@@ -2879,7 +3191,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2879
3191
|
},
|
|
2880
3192
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2881
3193
|
componentId: "sc-1ddpctx-1"
|
|
2882
|
-
})(templateObject_2$
|
|
3194
|
+
})(templateObject_2$f || (templateObject_2$f = __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"
|
|
2883
3195
|
/**
|
|
2884
3196
|
* Container for checkbox with proper spacing and alignment
|
|
2885
3197
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -2912,7 +3224,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
2912
3224
|
},
|
|
2913
3225
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
2914
3226
|
componentId: "sc-1ddpctx-2"
|
|
2915
|
-
})(templateObject_3$
|
|
3227
|
+
})(templateObject_3$d || (templateObject_3$d = __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"
|
|
2916
3228
|
/**
|
|
2917
3229
|
* Label text with proper typography
|
|
2918
3230
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -2929,20 +3241,20 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
2929
3241
|
},
|
|
2930
3242
|
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
2931
3243
|
componentId: "sc-1ddpctx-3"
|
|
2932
|
-
})(templateObject_4$
|
|
3244
|
+
})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
2933
3245
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
2934
3246
|
});
|
|
2935
|
-
var templateObject_1$
|
|
3247
|
+
var templateObject_1$i, templateObject_2$f, templateObject_3$d, templateObject_4$b;
|
|
2936
3248
|
|
|
2937
3249
|
React.createElement;
|
|
2938
3250
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
2939
3251
|
displayName: "Checkbox__StyledFieldContainer",
|
|
2940
3252
|
componentId: "sc-vquz3v-0"
|
|
2941
|
-
})(templateObject_1$
|
|
3253
|
+
})(templateObject_1$h || (templateObject_1$h = __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]);
|
|
2942
3254
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
2943
3255
|
displayName: "Checkbox__StyledHelperText",
|
|
2944
3256
|
componentId: "sc-vquz3v-1"
|
|
2945
|
-
})(templateObject_2$
|
|
3257
|
+
})(templateObject_2$e || (templateObject_2$e = __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"
|
|
2946
3258
|
/**
|
|
2947
3259
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2948
3260
|
*
|
|
@@ -3055,13 +3367,13 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
3055
3367
|
}, error));
|
|
3056
3368
|
});
|
|
3057
3369
|
Checkbox.displayName = 'Checkbox';
|
|
3058
|
-
var templateObject_1$
|
|
3370
|
+
var templateObject_1$h, templateObject_2$e;
|
|
3059
3371
|
|
|
3060
3372
|
React.createElement;
|
|
3061
3373
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
3062
3374
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
3063
3375
|
componentId: "sc-ae049w-0"
|
|
3064
|
-
})(templateObject_1$
|
|
3376
|
+
})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"], ["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"])));
|
|
3065
3377
|
var ChipGroup = function ChipGroup(_a) {
|
|
3066
3378
|
var labels = _a.labels,
|
|
3067
3379
|
_b = _a.variant,
|
|
@@ -3080,7 +3392,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
3080
3392
|
});
|
|
3081
3393
|
})));
|
|
3082
3394
|
};
|
|
3083
|
-
var templateObject_1$
|
|
3395
|
+
var templateObject_1$g;
|
|
3084
3396
|
|
|
3085
3397
|
React.createElement;
|
|
3086
3398
|
var _a$2 = tokensData.semantic,
|
|
@@ -3090,15 +3402,15 @@ var _a$2 = tokensData.semantic,
|
|
|
3090
3402
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
3091
3403
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
3092
3404
|
componentId: "sc-1p1t0kp-0"
|
|
3093
|
-
})(templateObject_1$
|
|
3405
|
+
})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n margin: ", " 0;\n position: relative;\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n margin: ", " 0;\n position: relative;\n"])), color$1.background.subtle, border$2.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$1.text["default"], spacing$2.layout.sm);
|
|
3094
3406
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
3095
3407
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
3096
3408
|
componentId: "sc-1p1t0kp-1"
|
|
3097
|
-
})(templateObject_2$
|
|
3409
|
+
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n width: 100%;\n"], ["\n position: relative;\n display: inline-block;\n width: 100%;\n"])));
|
|
3098
3410
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
3099
3411
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
3100
3412
|
componentId: "sc-1p1t0kp-2"
|
|
3101
|
-
})(templateObject_3$
|
|
3413
|
+
})(templateObject_3$c || (templateObject_3$c = __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);
|
|
3102
3414
|
var CopyButton = function CopyButton(_a) {
|
|
3103
3415
|
var text = _a.text,
|
|
3104
3416
|
onCopy = _a.onCopy;
|
|
@@ -3175,7 +3487,201 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
3175
3487
|
onCopy: onCopy
|
|
3176
3488
|
}));
|
|
3177
3489
|
};
|
|
3178
|
-
var templateObject_1$
|
|
3490
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c;
|
|
3491
|
+
|
|
3492
|
+
React.createElement;
|
|
3493
|
+
var StyledHeader = styled.div.withConfig({
|
|
3494
|
+
displayName: "DateGroup__StyledHeader",
|
|
3495
|
+
componentId: "sc-9nfm1f-0"
|
|
3496
|
+
})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n \n ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.sm, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], function (_a) {
|
|
3497
|
+
var $sticky = _a.$sticky;
|
|
3498
|
+
return $sticky && "\n position: sticky;\n top: 0;\n z-index: 10;\n box-shadow: ".concat(tokensData.base.shadow[2], ";\n ");
|
|
3499
|
+
});
|
|
3500
|
+
var StyledLeftSection = styled.div.withConfig({
|
|
3501
|
+
displayName: "DateGroup__StyledLeftSection",
|
|
3502
|
+
componentId: "sc-9nfm1f-1"
|
|
3503
|
+
})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
|
|
3504
|
+
var StyledRightSection = styled.div.withConfig({
|
|
3505
|
+
displayName: "DateGroup__StyledRightSection",
|
|
3506
|
+
componentId: "sc-9nfm1f-2"
|
|
3507
|
+
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.md);
|
|
3508
|
+
var StyledContent = styled.div.withConfig({
|
|
3509
|
+
displayName: "DateGroup__StyledContent",
|
|
3510
|
+
componentId: "sc-9nfm1f-3"
|
|
3511
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n /* Content area for children */\n"], ["\n /* Content area for children */\n"
|
|
3512
|
+
/**
|
|
3513
|
+
* DateGroup component
|
|
3514
|
+
*
|
|
3515
|
+
* Groups related content (typically transactions) under a formatted date header
|
|
3516
|
+
* with optional total amount and item count displays. Supports sticky headers
|
|
3517
|
+
* for scrolling lists.
|
|
3518
|
+
*
|
|
3519
|
+
* Composes: DateFormatter, MoneyDisplay, Stack, Typography
|
|
3520
|
+
*/])));
|
|
3521
|
+
/**
|
|
3522
|
+
* DateGroup component
|
|
3523
|
+
*
|
|
3524
|
+
* Groups related content (typically transactions) under a formatted date header
|
|
3525
|
+
* with optional total amount and item count displays. Supports sticky headers
|
|
3526
|
+
* for scrolling lists.
|
|
3527
|
+
*
|
|
3528
|
+
* Composes: DateFormatter, MoneyDisplay, Stack, Typography
|
|
3529
|
+
*/
|
|
3530
|
+
var DateGroup = function DateGroup(_a) {
|
|
3531
|
+
var date = _a.date,
|
|
3532
|
+
children = _a.children,
|
|
3533
|
+
_b = _a.format,
|
|
3534
|
+
format = _b === void 0 ? 'smart' : _b,
|
|
3535
|
+
_c = _a.showTotal,
|
|
3536
|
+
showTotal = _c === void 0 ? false : _c,
|
|
3537
|
+
totalAmount = _a.totalAmount,
|
|
3538
|
+
_d = _a.showCount,
|
|
3539
|
+
showCount = _d === void 0 ? false : _d,
|
|
3540
|
+
count = _a.count,
|
|
3541
|
+
_e = _a.sticky,
|
|
3542
|
+
sticky = _e === void 0 ? false : _e,
|
|
3543
|
+
_f = _a.currency,
|
|
3544
|
+
currency = _f === void 0 ? 'AUD' : _f,
|
|
3545
|
+
dataTestId = _a["data-testid"];
|
|
3546
|
+
// Determine total variant based on amount (positive = income, negative = expense)
|
|
3547
|
+
var totalVariant = totalAmount && totalAmount !== 0 ? totalAmount > 0 ? 'positive' : 'negative' : 'default';
|
|
3548
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
3549
|
+
"data-testid": dataTestId,
|
|
3550
|
+
role: "group",
|
|
3551
|
+
"aria-label": "Transactions for ".concat(date)
|
|
3552
|
+
}, /*#__PURE__*/React.createElement(StyledHeader, {
|
|
3553
|
+
$sticky: sticky,
|
|
3554
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-header") : undefined
|
|
3555
|
+
}, /*#__PURE__*/React.createElement(StyledLeftSection, null, /*#__PURE__*/React.createElement(DateFormatter, {
|
|
3556
|
+
dateString: typeof date === 'string' ? date : date.toISOString(),
|
|
3557
|
+
mode: format,
|
|
3558
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
|
|
3559
|
+
}), showCount && count !== undefined && /*#__PURE__*/React.createElement(Typography, {
|
|
3560
|
+
variant: "caption",
|
|
3561
|
+
color: "subdued",
|
|
3562
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-count") : undefined
|
|
3563
|
+
}, "(", count, " ", count === 1 ? 'item' : 'items', ")")), /*#__PURE__*/React.createElement(StyledRightSection, null, showTotal && totalAmount !== undefined && /*#__PURE__*/React.createElement(MoneyDisplay, {
|
|
3564
|
+
amount: totalAmount,
|
|
3565
|
+
currency: currency,
|
|
3566
|
+
variant: totalVariant,
|
|
3567
|
+
size: "small",
|
|
3568
|
+
weight: "medium",
|
|
3569
|
+
showSign: true,
|
|
3570
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-total") : undefined
|
|
3571
|
+
}))), /*#__PURE__*/React.createElement(StyledContent, {
|
|
3572
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-content") : undefined
|
|
3573
|
+
}, children));
|
|
3574
|
+
};
|
|
3575
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a;
|
|
3576
|
+
|
|
3577
|
+
React.createElement;
|
|
3578
|
+
var semantic$7 = tokensData.semantic;
|
|
3579
|
+
var StyledContainer$1 = styled.div.withConfig({
|
|
3580
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3581
|
+
return !prop.startsWith('$');
|
|
3582
|
+
},
|
|
3583
|
+
displayName: "EmptyState__StyledContainer",
|
|
3584
|
+
componentId: "sc-1u5hxh-0"
|
|
3585
|
+
})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: 400px;\n margin: 0 auto;\n padding: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: 400px;\n margin: 0 auto;\n padding: ", ";\n"])), function (_a) {
|
|
3586
|
+
var $size = _a.$size;
|
|
3587
|
+
return $size === 'small' ? semantic$7.spacing.layout['4xl'] : $size === 'large' ? semantic$7.spacing.layout['8xl'] : semantic$7.spacing.layout['6xl'];
|
|
3588
|
+
});
|
|
3589
|
+
var StyledIllustration = styled.div.withConfig({
|
|
3590
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3591
|
+
return !prop.startsWith('$');
|
|
3592
|
+
},
|
|
3593
|
+
displayName: "EmptyState__StyledIllustration",
|
|
3594
|
+
componentId: "sc-1u5hxh-1"
|
|
3595
|
+
})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: ", ";\n color: ", ";\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: ", ";\n color: ", ";\n"])), function (_a) {
|
|
3596
|
+
var $size = _a.$size;
|
|
3597
|
+
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
3598
|
+
}, function (_a) {
|
|
3599
|
+
var $size = _a.$size;
|
|
3600
|
+
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
3601
|
+
}, semantic$7.spacing.layout['2xl'], function (_a) {
|
|
3602
|
+
var $variant = _a.$variant;
|
|
3603
|
+
return $variant === 'error' ? semantic$7.color.icon.error : $variant === 'success' ? semantic$7.color.icon.success : semantic$7.color.icon.subdued;
|
|
3604
|
+
});
|
|
3605
|
+
var StyledTextContainer = styled.div.withConfig({
|
|
3606
|
+
displayName: "EmptyState__StyledTextContainer",
|
|
3607
|
+
componentId: "sc-1u5hxh-2"
|
|
3608
|
+
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n max-width: 360px;\n margin-bottom: ", ";\n"], ["\n max-width: 360px;\n margin-bottom: ", ";\n"
|
|
3609
|
+
// Map illustration type to icon name
|
|
3610
|
+
])), semantic$7.spacing.layout['2xl']);
|
|
3611
|
+
// Map illustration type to icon name
|
|
3612
|
+
var illustrationToIcon = {
|
|
3613
|
+
search: 'search',
|
|
3614
|
+
transactions: 'paper',
|
|
3615
|
+
// Placeholder - will use custom icon when available
|
|
3616
|
+
notifications: 'bell',
|
|
3617
|
+
empty: 'paper',
|
|
3618
|
+
error: 'crossCircle'
|
|
3619
|
+
};
|
|
3620
|
+
var EmptyState = function EmptyState(_a) {
|
|
3621
|
+
var _b = _a.illustration,
|
|
3622
|
+
illustration = _b === void 0 ? 'empty' : _b,
|
|
3623
|
+
customIllustration = _a.customIllustration,
|
|
3624
|
+
title = _a.title,
|
|
3625
|
+
description = _a.description,
|
|
3626
|
+
action = _a.action,
|
|
3627
|
+
secondaryAction = _a.secondaryAction,
|
|
3628
|
+
_c = _a.variant,
|
|
3629
|
+
variant = _c === void 0 ? 'default' : _c,
|
|
3630
|
+
_d = _a.size,
|
|
3631
|
+
size = _d === void 0 ? 'medium' : _d,
|
|
3632
|
+
dataTestId = _a["data-testid"];
|
|
3633
|
+
// Determine what to show for illustration
|
|
3634
|
+
var renderIllustration = function renderIllustration() {
|
|
3635
|
+
if (customIllustration) {
|
|
3636
|
+
return customIllustration;
|
|
3637
|
+
}
|
|
3638
|
+
if (illustration !== 'custom') {
|
|
3639
|
+
var iconName = illustrationToIcon[illustration];
|
|
3640
|
+
return /*#__PURE__*/React.createElement(Icon, {
|
|
3641
|
+
name: iconName,
|
|
3642
|
+
size: "2xl"
|
|
3643
|
+
});
|
|
3644
|
+
}
|
|
3645
|
+
return null;
|
|
3646
|
+
};
|
|
3647
|
+
return /*#__PURE__*/React.createElement(StyledContainer$1, {
|
|
3648
|
+
$size: size,
|
|
3649
|
+
"data-testid": dataTestId,
|
|
3650
|
+
role: "status",
|
|
3651
|
+
"aria-label": "Empty state: ".concat(title)
|
|
3652
|
+
}, /*#__PURE__*/React.createElement(StyledIllustration, {
|
|
3653
|
+
$size: size,
|
|
3654
|
+
$variant: variant,
|
|
3655
|
+
"aria-hidden": "true"
|
|
3656
|
+
}, renderIllustration()), /*#__PURE__*/React.createElement(StyledTextContainer, null, /*#__PURE__*/React.createElement(Typography, {
|
|
3657
|
+
variant: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3',
|
|
3658
|
+
color: variant === 'error' ? 'error' : 'default',
|
|
3659
|
+
as: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3'
|
|
3660
|
+
}, title), /*#__PURE__*/React.createElement("div", {
|
|
3661
|
+
style: {
|
|
3662
|
+
marginTop: semantic$7.spacing.layout.md
|
|
3663
|
+
}
|
|
3664
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3665
|
+
variant: "body",
|
|
3666
|
+
color: "subdued"
|
|
3667
|
+
}, description))), (action || secondaryAction) && /*#__PURE__*/React.createElement(Box, {
|
|
3668
|
+
width: "100%",
|
|
3669
|
+
maxWidth: "300px"
|
|
3670
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
3671
|
+
direction: "column",
|
|
3672
|
+
gap: "sm"
|
|
3673
|
+
}, action && /*#__PURE__*/React.createElement(Button, {
|
|
3674
|
+
variant: action.variant || 'primary',
|
|
3675
|
+
onClick: action.onClick,
|
|
3676
|
+
iconName: action.icon,
|
|
3677
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-primary-action") : undefined
|
|
3678
|
+
}, action.label), secondaryAction && /*#__PURE__*/React.createElement(Button, {
|
|
3679
|
+
variant: "naked",
|
|
3680
|
+
onClick: secondaryAction.onClick,
|
|
3681
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined
|
|
3682
|
+
}, secondaryAction.label))));
|
|
3683
|
+
};
|
|
3684
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a;
|
|
3179
3685
|
|
|
3180
3686
|
React.createElement;
|
|
3181
3687
|
var _a$1 = tokensData.base,
|
|
@@ -3184,23 +3690,23 @@ var _a$1 = tokensData.base,
|
|
|
3184
3690
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
3185
3691
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
3186
3692
|
componentId: "sc-1mi4lso-0"
|
|
3187
|
-
})(templateObject_1$
|
|
3693
|
+
})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n a {\n text-decoration: none;\n }\n"], ["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n a {\n text-decoration: none;\n }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
|
|
3188
3694
|
var ImageWrapper = styled.div.withConfig({
|
|
3189
3695
|
displayName: "FeatureBlock__ImageWrapper",
|
|
3190
3696
|
componentId: "sc-1mi4lso-1"
|
|
3191
|
-
})(templateObject_2$
|
|
3697
|
+
})(templateObject_2$a || (templateObject_2$a = __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);
|
|
3192
3698
|
var ContentSection = styled.div.withConfig({
|
|
3193
3699
|
displayName: "FeatureBlock__ContentSection",
|
|
3194
3700
|
componentId: "sc-1mi4lso-2"
|
|
3195
|
-
})(templateObject_3$
|
|
3701
|
+
})(templateObject_3$9 || (templateObject_3$9 = __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]);
|
|
3196
3702
|
var ButtonWrapper = styled.div.withConfig({
|
|
3197
3703
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
3198
3704
|
componentId: "sc-1mi4lso-3"
|
|
3199
|
-
})(templateObject_4$
|
|
3705
|
+
})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
3200
3706
|
var ContentWrapper = styled.div.withConfig({
|
|
3201
3707
|
displayName: "FeatureBlock__ContentWrapper",
|
|
3202
3708
|
componentId: "sc-1mi4lso-4"
|
|
3203
|
-
})(templateObject_5$
|
|
3709
|
+
})(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
3204
3710
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
3205
3711
|
var title = _a.title,
|
|
3206
3712
|
excerpt = _a.excerpt,
|
|
@@ -3240,7 +3746,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
3240
3746
|
onClick: onReadMore
|
|
3241
3747
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
3242
3748
|
};
|
|
3243
|
-
var templateObject_1$
|
|
3749
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$9, templateObject_5$8;
|
|
3244
3750
|
|
|
3245
3751
|
React.createElement;
|
|
3246
3752
|
var _a = tokensData.base,
|
|
@@ -3255,14 +3761,14 @@ var _a = tokensData.base,
|
|
|
3255
3761
|
var DropdownContainer = styled.div.withConfig({
|
|
3256
3762
|
displayName: "Dropdown__DropdownContainer",
|
|
3257
3763
|
componentId: "sc-kz07c4-0"
|
|
3258
|
-
})(templateObject_1$
|
|
3764
|
+
})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
3259
3765
|
var DropdownTrigger = styled.button.withConfig({
|
|
3260
3766
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3261
3767
|
return !prop.startsWith('$');
|
|
3262
3768
|
},
|
|
3263
3769
|
displayName: "Dropdown__DropdownTrigger",
|
|
3264
3770
|
componentId: "sc-kz07c4-1"
|
|
3265
|
-
})(templateObject_2$
|
|
3771
|
+
})(templateObject_2$9 || (templateObject_2$9 = __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) {
|
|
3266
3772
|
var $hasError = _a.$hasError;
|
|
3267
3773
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
3268
3774
|
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
@@ -3282,7 +3788,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
3282
3788
|
},
|
|
3283
3789
|
displayName: "Dropdown__DropdownIcon",
|
|
3284
3790
|
componentId: "sc-kz07c4-2"
|
|
3285
|
-
})(templateObject_3$
|
|
3791
|
+
})(templateObject_3$8 || (templateObject_3$8 = __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) {
|
|
3286
3792
|
var $isOpen = _a.$isOpen;
|
|
3287
3793
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
3288
3794
|
});
|
|
@@ -3292,7 +3798,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
3292
3798
|
},
|
|
3293
3799
|
displayName: "Dropdown__DropdownMenu",
|
|
3294
3800
|
componentId: "sc-kz07c4-3"
|
|
3295
|
-
})(templateObject_4$
|
|
3801
|
+
})(templateObject_4$8 || (templateObject_4$8 = __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) {
|
|
3296
3802
|
var $isOpen = _a.$isOpen;
|
|
3297
3803
|
return $isOpen ? 1 : 0;
|
|
3298
3804
|
}, function (_a) {
|
|
@@ -3308,7 +3814,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3308
3814
|
},
|
|
3309
3815
|
displayName: "Dropdown__DropdownOption",
|
|
3310
3816
|
componentId: "sc-kz07c4-4"
|
|
3311
|
-
})(templateObject_5$
|
|
3817
|
+
})(templateObject_5$7 || (templateObject_5$7 = __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) {
|
|
3312
3818
|
var $isSelected = _a.$isSelected,
|
|
3313
3819
|
$isFocused = _a.$isFocused;
|
|
3314
3820
|
if ($isFocused) return color.background.surface;
|
|
@@ -3318,7 +3824,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3318
3824
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
3319
3825
|
displayName: "Dropdown__StyledHelperText",
|
|
3320
3826
|
componentId: "sc-kz07c4-5"
|
|
3321
|
-
})(templateObject_6$
|
|
3827
|
+
})(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) {
|
|
3322
3828
|
var $hasError = _a.$hasError;
|
|
3323
3829
|
return $hasError ? color.text.error : color.text.subdued;
|
|
3324
3830
|
}, spacing[2]);
|
|
@@ -3485,7 +3991,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3485
3991
|
id: helperId
|
|
3486
3992
|
}, helperText));
|
|
3487
3993
|
};
|
|
3488
|
-
var templateObject_1$
|
|
3994
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$8, templateObject_5$7, templateObject_6$7;
|
|
3489
3995
|
|
|
3490
3996
|
React.createElement;
|
|
3491
3997
|
var semantic$6 = tokensData.semantic;
|
|
@@ -3495,7 +4001,7 @@ var StyledList = styled.ul.withConfig({
|
|
|
3495
4001
|
},
|
|
3496
4002
|
displayName: "List__StyledList",
|
|
3497
4003
|
componentId: "sc-1irksg5-0"
|
|
3498
|
-
})(templateObject_1$
|
|
4004
|
+
})(templateObject_1$a || (templateObject_1$a = __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) {
|
|
3499
4005
|
var $dividers = _a.$dividers;
|
|
3500
4006
|
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$6.color.border["default"], ";\n }\n ");
|
|
3501
4007
|
});
|
|
@@ -3517,7 +4023,7 @@ var List = function List(_a) {
|
|
|
3517
4023
|
}, props), children);
|
|
3518
4024
|
};
|
|
3519
4025
|
List.displayName = 'List';
|
|
3520
|
-
var templateObject_1$
|
|
4026
|
+
var templateObject_1$a;
|
|
3521
4027
|
|
|
3522
4028
|
React.createElement;
|
|
3523
4029
|
var semantic$5 = tokensData.semantic,
|
|
@@ -3528,7 +4034,7 @@ var StyledListItem = styled.li.withConfig({
|
|
|
3528
4034
|
},
|
|
3529
4035
|
displayName: "ListItem__StyledListItem",
|
|
3530
4036
|
componentId: "sc-1wzzt21-0"
|
|
3531
|
-
})(templateObject_1$
|
|
4037
|
+
})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n"])), function (_a) {
|
|
3532
4038
|
var $interactive = _a.$interactive;
|
|
3533
4039
|
return $interactive && 'user-select: none;';
|
|
3534
4040
|
}, function (_a) {
|
|
@@ -3541,7 +4047,7 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
3541
4047
|
},
|
|
3542
4048
|
displayName: "ListItem__StyledItemContent",
|
|
3543
4049
|
componentId: "sc-1wzzt21-1"
|
|
3544
|
-
})(templateObject_2$
|
|
4050
|
+
})(templateObject_2$8 || (templateObject_2$8 = __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$5.spacing.layout.md, function (_a) {
|
|
3545
4051
|
var $spacing = _a.$spacing;
|
|
3546
4052
|
return $spacing === 'compact' ? "".concat(semantic$5.spacing.layout.sm, " ").concat(semantic$5.spacing.layout.md) : "".concat(semantic$5.spacing.layout.md, " ").concat(semantic$5.spacing.layout.lg);
|
|
3547
4053
|
}, base$5.border.radius[2], function (_a) {
|
|
@@ -3562,22 +4068,22 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
3562
4068
|
var StyledIconContainer = styled.div.withConfig({
|
|
3563
4069
|
displayName: "ListItem__StyledIconContainer",
|
|
3564
4070
|
componentId: "sc-1wzzt21-2"
|
|
3565
|
-
})(templateObject_3$
|
|
4071
|
+
})(templateObject_3$7 || (templateObject_3$7 = __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"])));
|
|
3566
4072
|
var StyledTextContent = styled.div.withConfig({
|
|
3567
4073
|
displayName: "ListItem__StyledTextContent",
|
|
3568
4074
|
componentId: "sc-1wzzt21-3"
|
|
3569
|
-
})(templateObject_4$
|
|
4075
|
+
})(templateObject_4$7 || (templateObject_4$7 = __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$5.spacing.layout.xs);
|
|
3570
4076
|
var StyledRightContent = styled.div.withConfig({
|
|
3571
4077
|
displayName: "ListItem__StyledRightContent",
|
|
3572
4078
|
componentId: "sc-1wzzt21-4"
|
|
3573
|
-
})(templateObject_5$
|
|
4079
|
+
})(templateObject_5$6 || (templateObject_5$6 = __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$5.spacing.layout.sm);
|
|
3574
4080
|
var StyledChevronIcon = styled.div.withConfig({
|
|
3575
4081
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3576
4082
|
return !prop.startsWith('$');
|
|
3577
4083
|
},
|
|
3578
4084
|
displayName: "ListItem__StyledChevronIcon",
|
|
3579
4085
|
componentId: "sc-1wzzt21-5"
|
|
3580
|
-
})(templateObject_6$
|
|
4086
|
+
})(templateObject_6$6 || (templateObject_6$6 = __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$5.color.icon.subdued, function (_a) {
|
|
3581
4087
|
var $expanded = _a.$expanded;
|
|
3582
4088
|
return $expanded ? '180deg' : '0deg';
|
|
3583
4089
|
});
|
|
@@ -3587,7 +4093,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
3587
4093
|
},
|
|
3588
4094
|
displayName: "ListItem__StyledExpandedContent",
|
|
3589
4095
|
componentId: "sc-1wzzt21-6"
|
|
3590
|
-
})(templateObject_7$
|
|
4096
|
+
})(templateObject_7$5 || (templateObject_7$5 = __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) {
|
|
3591
4097
|
var $expanded = _a.$expanded;
|
|
3592
4098
|
return $expanded ? '1000px' : '0';
|
|
3593
4099
|
}, function (_a) {
|
|
@@ -3682,7 +4188,7 @@ var ListItem = function ListItem(_a) {
|
|
|
3682
4188
|
}, children));
|
|
3683
4189
|
};
|
|
3684
4190
|
ListItem.displayName = 'ListItem';
|
|
3685
|
-
var templateObject_1$
|
|
4191
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$7, templateObject_5$6, templateObject_6$6, templateObject_7$5;
|
|
3686
4192
|
|
|
3687
4193
|
var input = tokensData.component.input;
|
|
3688
4194
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -3691,7 +4197,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
3691
4197
|
},
|
|
3692
4198
|
displayName: "InputBase__StyledInputBase",
|
|
3693
4199
|
componentId: "sc-1bpf4e8-0"
|
|
3694
|
-
})(templateObject_1$
|
|
4200
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: ", ";\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"], ["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: ", ";\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"
|
|
3695
4201
|
/**
|
|
3696
4202
|
* Base styled textarea with shared styling
|
|
3697
4203
|
*/])), input["default"].font, function (_a) {
|
|
@@ -3722,8 +4228,8 @@ var StyledTextAreaBase = styled.textarea.withConfig({
|
|
|
3722
4228
|
},
|
|
3723
4229
|
displayName: "InputBase__StyledTextAreaBase",
|
|
3724
4230
|
componentId: "sc-1bpf4e8-1"
|
|
3725
|
-
})(templateObject_2$
|
|
3726
|
-
var templateObject_1$
|
|
4231
|
+
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"], ["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"])), StyledInputBase);
|
|
4232
|
+
var templateObject_1$8, templateObject_2$7;
|
|
3727
4233
|
|
|
3728
4234
|
React.createElement;
|
|
3729
4235
|
var semantic$4 = tokensData.semantic,
|
|
@@ -3731,31 +4237,31 @@ var semantic$4 = tokensData.semantic,
|
|
|
3731
4237
|
var StyledFieldContainer$2 = styled.div.withConfig({
|
|
3732
4238
|
displayName: "NumberInput__StyledFieldContainer",
|
|
3733
4239
|
componentId: "sc-qotc3w-0"
|
|
3734
|
-
})(templateObject_1$
|
|
4240
|
+
})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base$4.spacing[2]);
|
|
3735
4241
|
var StyledLabel$3 = styled.label.withConfig({
|
|
3736
4242
|
displayName: "NumberInput__StyledLabel",
|
|
3737
4243
|
componentId: "sc-qotc3w-1"
|
|
3738
|
-
})(templateObject_2$
|
|
4244
|
+
})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"])), base$4.spacing[1], semantic$4.typography.label, semantic$4.color.text["default"], semantic$4.color.text.disabled);
|
|
3739
4245
|
var StyledRequiredIndicator$2 = styled.span.withConfig({
|
|
3740
4246
|
displayName: "NumberInput__StyledRequiredIndicator",
|
|
3741
4247
|
componentId: "sc-qotc3w-2"
|
|
3742
|
-
})(templateObject_3$
|
|
4248
|
+
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$4.color.text.error, base$4.fontWeight[5]);
|
|
3743
4249
|
var StyledInputWrapper$1 = styled.div.withConfig({
|
|
3744
4250
|
displayName: "NumberInput__StyledInputWrapper",
|
|
3745
4251
|
componentId: "sc-qotc3w-3"
|
|
3746
|
-
})(templateObject_4$
|
|
4252
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n"])));
|
|
3747
4253
|
var StyledNumberInput = styled(StyledInputBase).withConfig({
|
|
3748
4254
|
displayName: "NumberInput__StyledNumberInput",
|
|
3749
4255
|
componentId: "sc-qotc3w-4"
|
|
3750
|
-
})(templateObject_5$
|
|
4256
|
+
})(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"], ["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"])), base$4.spacing[10]);
|
|
3751
4257
|
var StyledStepperContainer = styled.div.withConfig({
|
|
3752
4258
|
displayName: "NumberInput__StyledStepperContainer",
|
|
3753
4259
|
componentId: "sc-qotc3w-5"
|
|
3754
|
-
})(templateObject_6$
|
|
4260
|
+
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"], ["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"])), base$4.spacing[2], base$4.spacing[2]);
|
|
3755
4261
|
var StyledHelperText$2 = styled.div.withConfig({
|
|
3756
4262
|
displayName: "NumberInput__StyledHelperText",
|
|
3757
4263
|
componentId: "sc-qotc3w-6"
|
|
3758
|
-
})(templateObject_7$
|
|
4264
|
+
})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
3759
4265
|
/**
|
|
3760
4266
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
3761
4267
|
*
|
|
@@ -3970,7 +4476,7 @@ var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
3970
4476
|
}, error || helperText));
|
|
3971
4477
|
});
|
|
3972
4478
|
NumberInput.displayName = 'NumberInput';
|
|
3973
|
-
var templateObject_1$
|
|
4479
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$6, templateObject_5$5, templateObject_6$5, templateObject_7$4;
|
|
3974
4480
|
|
|
3975
4481
|
React.createElement;
|
|
3976
4482
|
var PageTitleStyled = styled.div.withConfig({
|
|
@@ -3979,7 +4485,7 @@ var PageTitleStyled = styled.div.withConfig({
|
|
|
3979
4485
|
},
|
|
3980
4486
|
displayName: "PageTitle__PageTitleStyled",
|
|
3981
4487
|
componentId: "sc-16h256f-0"
|
|
3982
|
-
})(templateObject_1$
|
|
4488
|
+
})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
|
|
3983
4489
|
var $hasBackButton = _a.$hasBackButton;
|
|
3984
4490
|
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
3985
4491
|
});
|
|
@@ -4006,7 +4512,7 @@ var PageTitle = function PageTitle(_a) {
|
|
|
4006
4512
|
color: "subdued"
|
|
4007
4513
|
}, subtitle)));
|
|
4008
4514
|
};
|
|
4009
|
-
var templateObject_1$
|
|
4515
|
+
var templateObject_1$6;
|
|
4010
4516
|
|
|
4011
4517
|
React.createElement;
|
|
4012
4518
|
var semantic$3 = tokensData.semantic,
|
|
@@ -4014,30 +4520,30 @@ var semantic$3 = tokensData.semantic,
|
|
|
4014
4520
|
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
4015
4521
|
displayName: "PasswordField__StyledFieldContainer",
|
|
4016
4522
|
componentId: "sc-1p15zk0-0"
|
|
4017
|
-
})(templateObject_1$
|
|
4523
|
+
})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base$3.spacing[2]);
|
|
4018
4524
|
var StyledLabel$2 = styled.label.withConfig({
|
|
4019
4525
|
displayName: "PasswordField__StyledLabel",
|
|
4020
4526
|
componentId: "sc-1p15zk0-1"
|
|
4021
|
-
})(templateObject_2$
|
|
4527
|
+
})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"])), base$3.spacing[1], semantic$3.typography.label, semantic$3.color.text["default"], semantic$3.color.text.disabled);
|
|
4022
4528
|
var StyledRequiredIndicator$1 = styled.span.withConfig({
|
|
4023
4529
|
displayName: "PasswordField__StyledRequiredIndicator",
|
|
4024
4530
|
componentId: "sc-1p15zk0-2"
|
|
4025
|
-
})(templateObject_3$
|
|
4531
|
+
})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$3.color.text.error, base$3.fontWeight[5]);
|
|
4026
4532
|
var StyledHelperText$1 = styled.div.withConfig({
|
|
4027
4533
|
displayName: "PasswordField__StyledHelperText",
|
|
4028
4534
|
componentId: "sc-1p15zk0-3"
|
|
4029
|
-
})(templateObject_4$
|
|
4535
|
+
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), semantic$3.typography.caption, function (_a) {
|
|
4030
4536
|
var $hasError = _a.$hasError;
|
|
4031
4537
|
return $hasError ? semantic$3.color.text.error : semantic$3.color.text.subdued;
|
|
4032
4538
|
});
|
|
4033
4539
|
var StyledInputWrapper = styled.div.withConfig({
|
|
4034
4540
|
displayName: "PasswordField__StyledInputWrapper",
|
|
4035
4541
|
componentId: "sc-1p15zk0-4"
|
|
4036
|
-
})(templateObject_5$
|
|
4542
|
+
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
4037
4543
|
var StyledToggleButton = styled.div.withConfig({
|
|
4038
4544
|
displayName: "PasswordField__StyledToggleButton",
|
|
4039
4545
|
componentId: "sc-1p15zk0-5"
|
|
4040
|
-
})(templateObject_6$
|
|
4546
|
+
})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n"], ["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n"
|
|
4041
4547
|
/**
|
|
4042
4548
|
* PasswordField component for secure password input with visibility toggle
|
|
4043
4549
|
*
|
|
@@ -4130,27 +4636,27 @@ var PasswordField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
4130
4636
|
}, helperText));
|
|
4131
4637
|
});
|
|
4132
4638
|
PasswordField.displayName = 'PasswordField';
|
|
4133
|
-
var templateObject_1$
|
|
4639
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$5, templateObject_5$4, templateObject_6$4;
|
|
4134
4640
|
|
|
4135
4641
|
React.createElement;
|
|
4136
4642
|
var semantic$2 = tokensData.semantic,
|
|
4137
4643
|
base$2 = tokensData.base;
|
|
4138
4644
|
// Fade in animation for overlay
|
|
4139
|
-
var fadeIn = keyframes(templateObject_1$
|
|
4645
|
+
var fadeIn = keyframes(templateObject_1$4 || (templateObject_1$4 = __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"
|
|
4140
4646
|
// Slide animations for each position
|
|
4141
4647
|
])));
|
|
4142
4648
|
// Slide animations for each position
|
|
4143
|
-
var slideInRight = keyframes(templateObject_2$
|
|
4144
|
-
var slideInLeft = keyframes(templateObject_3$
|
|
4145
|
-
var slideInTop = keyframes(templateObject_4$
|
|
4146
|
-
var slideInBottom = keyframes(templateObject_5$
|
|
4649
|
+
var slideInRight = keyframes(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n"], ["\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n"])));
|
|
4650
|
+
var slideInLeft = keyframes(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n"], ["\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n"])));
|
|
4651
|
+
var slideInTop = keyframes(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n"], ["\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n"])));
|
|
4652
|
+
var slideInBottom = keyframes(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"], ["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"])));
|
|
4147
4653
|
var StyledOverlay = styled.div.withConfig({
|
|
4148
4654
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4149
4655
|
return !prop.startsWith('$');
|
|
4150
4656
|
},
|
|
4151
4657
|
displayName: "Sheet__StyledOverlay",
|
|
4152
4658
|
componentId: "sc-8abisx-0"
|
|
4153
|
-
})(templateObject_7$
|
|
4659
|
+
})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n ", "\n display: ", ";\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n ", "\n display: ", ";\n"])), css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["animation: ", " 200ms ease-in-out;"], ["animation: ", " 200ms ease-in-out;"])), fadeIn), function (_a) {
|
|
4154
4660
|
var $isOpen = _a.$isOpen;
|
|
4155
4661
|
return $isOpen ? 'block' : 'none';
|
|
4156
4662
|
});
|
|
@@ -4170,9 +4676,9 @@ var StyledSheet = styled.div.withConfig({
|
|
|
4170
4676
|
var borderRadius = isDrawer ? base$2.border.radius[3] : '0';
|
|
4171
4677
|
switch ($position) {
|
|
4172
4678
|
case 'right':
|
|
4173
|
-
return css(templateObject_8$
|
|
4679
|
+
return css(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n top: ", ";\n right: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: ", " 0 0 ", ";\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n right: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: ", " 0 0 ", ";\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $width, isDrawer ? "".concat(base$2.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInRight);
|
|
4174
4680
|
case 'left':
|
|
4175
|
-
return css(templateObject_9$
|
|
4681
|
+
return css(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: 0 ", " ", " 0;\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n left: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: 0 ", " ", " 0;\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $width, isDrawer ? "".concat(base$2.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInLeft);
|
|
4176
4682
|
case 'top':
|
|
4177
4683
|
return css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$2.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInTop);
|
|
4178
4684
|
case 'bottom':
|
|
@@ -4331,7 +4837,7 @@ var Sheet = function Sheet(_a) {
|
|
|
4331
4837
|
}, /*#__PURE__*/React.createElement(StyledSheetContent, null, children)));
|
|
4332
4838
|
};
|
|
4333
4839
|
Sheet.displayName = 'Sheet';
|
|
4334
|
-
var templateObject_1$
|
|
4840
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
|
|
4335
4841
|
|
|
4336
4842
|
React.createElement;
|
|
4337
4843
|
var semantic$1 = tokensData.semantic,
|
|
@@ -4339,22 +4845,22 @@ var semantic$1 = tokensData.semantic,
|
|
|
4339
4845
|
var StyledSliderContainer = styled.div.withConfig({
|
|
4340
4846
|
displayName: "Slider__StyledSliderContainer",
|
|
4341
4847
|
componentId: "sc-6mh2d4-0"
|
|
4342
|
-
})(templateObject_1$
|
|
4848
|
+
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap:0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap:0;\n width: 100%;\n"])));
|
|
4343
4849
|
var StyledLabel$1 = styled.label.withConfig({
|
|
4344
4850
|
displayName: "Slider__StyledLabel",
|
|
4345
4851
|
componentId: "sc-6mh2d4-1"
|
|
4346
|
-
})(templateObject_2$
|
|
4852
|
+
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"])), semantic$1.typography.label, function (_a) {
|
|
4347
4853
|
var $disabled = _a.$disabled;
|
|
4348
4854
|
return $disabled ? semantic$1.color.text.disabled : semantic$1.color.text["default"];
|
|
4349
4855
|
}, semantic$1.spacing.layout.lg);
|
|
4350
4856
|
var StyledSliderTrackContainer = styled.div.withConfig({
|
|
4351
4857
|
displayName: "Slider__StyledSliderTrackContainer",
|
|
4352
4858
|
componentId: "sc-6mh2d4-2"
|
|
4353
|
-
})(templateObject_3$
|
|
4859
|
+
})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"])), base$1.spacing[10]);
|
|
4354
4860
|
var StyledTrack = styled.div.withConfig({
|
|
4355
4861
|
displayName: "Slider__StyledTrack",
|
|
4356
4862
|
componentId: "sc-6mh2d4-3"
|
|
4357
|
-
})(templateObject_4$
|
|
4863
|
+
})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n cursor: ", ";\n"], ["\n position: relative;\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n cursor: ", ";\n"])), base$1.spacing[1], function (_a) {
|
|
4358
4864
|
var $disabled = _a.$disabled;
|
|
4359
4865
|
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.border["default"];
|
|
4360
4866
|
}, base$1.border.radius.circle, function (_a) {
|
|
@@ -4364,14 +4870,14 @@ var StyledTrack = styled.div.withConfig({
|
|
|
4364
4870
|
var StyledTrackFill = styled.div.withConfig({
|
|
4365
4871
|
displayName: "Slider__StyledTrackFill",
|
|
4366
4872
|
componentId: "sc-6mh2d4-4"
|
|
4367
|
-
})(templateObject_5$
|
|
4873
|
+
})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"], ["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"])), function (_a) {
|
|
4368
4874
|
var $disabled = _a.$disabled;
|
|
4369
4875
|
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
|
|
4370
4876
|
}, base$1.border.radius.circle);
|
|
4371
4877
|
var StyledThumb = styled.div.withConfig({
|
|
4372
4878
|
displayName: "Slider__StyledThumb",
|
|
4373
4879
|
componentId: "sc-6mh2d4-5"
|
|
4374
|
-
})(templateObject_6$
|
|
4880
|
+
})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"], ["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"])), base$1.spacing[5], base$1.spacing[5], semantic$1.spacing.layout.sm, function (_a) {
|
|
4375
4881
|
var $disabled = _a.$disabled;
|
|
4376
4882
|
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
|
|
4377
4883
|
}, base$1.border.width[2], function (_a) {
|
|
@@ -4387,14 +4893,14 @@ var StyledThumb = styled.div.withConfig({
|
|
|
4387
4893
|
var StyledValueLabel = styled.div.withConfig({
|
|
4388
4894
|
displayName: "Slider__StyledValueLabel",
|
|
4389
4895
|
componentId: "sc-6mh2d4-6"
|
|
4390
|
-
})(templateObject_7$
|
|
4896
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"], ["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"])), base$1.spacing[8], semantic$1.spacing.layout.sm, base$1.spacing[1], base$1.spacing[2], semantic$1.color.background.emphasis, semantic$1.color.text.inverse, semantic$1.typography.caption, base$1.border.radius[2], function (_a) {
|
|
4391
4897
|
var $disabled = _a.$disabled;
|
|
4392
4898
|
return $disabled ? base$1.opacity[50] : base$1.opacity[100];
|
|
4393
4899
|
}, base$1.spacing[1], base$1.spacing[1], base$1.spacing[1], semantic$1.color.background.emphasis);
|
|
4394
4900
|
var StyledMinMaxLabels = styled.div.withConfig({
|
|
4395
4901
|
displayName: "Slider__StyledMinMaxLabels",
|
|
4396
4902
|
componentId: "sc-6mh2d4-7"
|
|
4397
|
-
})(templateObject_8$
|
|
4903
|
+
})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"
|
|
4398
4904
|
/**
|
|
4399
4905
|
* Slider component for single value or range selection
|
|
4400
4906
|
*
|
|
@@ -4719,7 +5225,7 @@ var Slider = function Slider(_a) {
|
|
|
4719
5225
|
}, formatValue(currentValue))))), /*#__PURE__*/React.createElement(StyledMinMaxLabels, null, /*#__PURE__*/React.createElement("span", null, formatValue(min)), /*#__PURE__*/React.createElement("span", null, formatValue(max))));
|
|
4720
5226
|
};
|
|
4721
5227
|
Slider.displayName = 'Slider';
|
|
4722
|
-
var templateObject_1$
|
|
5228
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
4723
5229
|
|
|
4724
5230
|
React.createElement;
|
|
4725
5231
|
var semantic = tokensData.semantic,
|
|
@@ -4727,19 +5233,19 @@ var semantic = tokensData.semantic,
|
|
|
4727
5233
|
var StyledFieldContainer = styled.div.withConfig({
|
|
4728
5234
|
displayName: "TextField__StyledFieldContainer",
|
|
4729
5235
|
componentId: "sc-1ys3b0-0"
|
|
4730
|
-
})(templateObject_1$
|
|
5236
|
+
})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base.spacing[2]);
|
|
4731
5237
|
var StyledLabel = styled.label.withConfig({
|
|
4732
5238
|
displayName: "TextField__StyledLabel",
|
|
4733
5239
|
componentId: "sc-1ys3b0-1"
|
|
4734
|
-
})(templateObject_2$
|
|
5240
|
+
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"])), base.spacing[1], semantic.typography.label, semantic.color.text["default"], semantic.color.text.disabled);
|
|
4735
5241
|
var StyledRequiredIndicator = styled.span.withConfig({
|
|
4736
5242
|
displayName: "TextField__StyledRequiredIndicator",
|
|
4737
5243
|
componentId: "sc-1ys3b0-2"
|
|
4738
|
-
})(templateObject_3$
|
|
5244
|
+
})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic.color.text.error, base.fontWeight[5]);
|
|
4739
5245
|
var StyledHelperText = styled.div.withConfig({
|
|
4740
5246
|
displayName: "TextField__StyledHelperText",
|
|
4741
5247
|
componentId: "sc-1ys3b0-3"
|
|
4742
|
-
})(templateObject_4$
|
|
5248
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
4743
5249
|
/**
|
|
4744
5250
|
* TextField component for text input with label, helper text, and error states
|
|
4745
5251
|
*
|
|
@@ -4818,7 +5324,177 @@ var TextField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
4818
5324
|
}, helperText));
|
|
4819
5325
|
});
|
|
4820
5326
|
TextField.displayName = 'TextField';
|
|
4821
|
-
var templateObject_1$
|
|
5327
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2;
|
|
5328
|
+
|
|
5329
|
+
React.createElement;
|
|
5330
|
+
var StyledContainer = styled.div.withConfig({
|
|
5331
|
+
displayName: "TransactionListItem__StyledContainer",
|
|
5332
|
+
componentId: "sc-7yunm0-0"
|
|
5333
|
+
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-height: 72px;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n gap: ", ";\n transition: background-color 0.2s ease;\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n min-height: 72px;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n gap: ", ";\n transition: background-color 0.2s ease;\n \n ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.md, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], tokensData.semantic.spacing.layout.md, function (_a) {
|
|
5334
|
+
var $clickable = _a.$clickable;
|
|
5335
|
+
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(tokensData.semantic.color.background['interactive-hover'], ";\n }\n \n &:active {\n background-color: ").concat(tokensData.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n outline-offset: -2px;\n }\n ");
|
|
5336
|
+
});
|
|
5337
|
+
var StyledAvatarSection = styled.div.withConfig({
|
|
5338
|
+
displayName: "TransactionListItem__StyledAvatarSection",
|
|
5339
|
+
componentId: "sc-7yunm0-1"
|
|
5340
|
+
})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n flex-shrink: 0;\n"], ["\n flex-shrink: 0;\n"])));
|
|
5341
|
+
var StyledMainContent = styled.div.withConfig({
|
|
5342
|
+
displayName: "TransactionListItem__StyledMainContent",
|
|
5343
|
+
componentId: "sc-7yunm0-2"
|
|
5344
|
+
})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: ", ";\n"], ["\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.xs);
|
|
5345
|
+
var StyledTopRow = styled.div.withConfig({
|
|
5346
|
+
displayName: "TransactionListItem__StyledTopRow",
|
|
5347
|
+
componentId: "sc-7yunm0-3"
|
|
5348
|
+
})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
|
|
5349
|
+
var StyledMerchantSection = styled.div.withConfig({
|
|
5350
|
+
displayName: "TransactionListItem__StyledMerchantSection",
|
|
5351
|
+
componentId: "sc-7yunm0-4"
|
|
5352
|
+
})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n min-width: 0;\n flex: 1;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n min-width: 0;\n flex: 1;\n"])), tokensData.semantic.spacing.layout.xs);
|
|
5353
|
+
var StyledBottomRow = styled.div.withConfig({
|
|
5354
|
+
displayName: "TransactionListItem__StyledBottomRow",
|
|
5355
|
+
componentId: "sc-7yunm0-5"
|
|
5356
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
|
|
5357
|
+
var StyledMetadata = styled.div.withConfig({
|
|
5358
|
+
displayName: "TransactionListItem__StyledMetadata",
|
|
5359
|
+
componentId: "sc-7yunm0-6"
|
|
5360
|
+
})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
|
|
5361
|
+
var StyledIconIndicator = styled.div.withConfig({
|
|
5362
|
+
displayName: "TransactionListItem__StyledIconIndicator",
|
|
5363
|
+
componentId: "sc-7yunm0-7"
|
|
5364
|
+
})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n color: ", ";\n"])), tokensData.semantic.spacing.layout.xs, tokensData.semantic.color.icon.subdued);
|
|
5365
|
+
var StyledTruncatedText = styled.span.withConfig({
|
|
5366
|
+
displayName: "TransactionListItem__StyledTruncatedText",
|
|
5367
|
+
componentId: "sc-7yunm0-8"
|
|
5368
|
+
})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"
|
|
5369
|
+
// Map categories to icon names (using placeholders until custom icons available)
|
|
5370
|
+
])));
|
|
5371
|
+
// Map categories to icon names (using placeholders until custom icons available)
|
|
5372
|
+
var categoryToIcon = {
|
|
5373
|
+
shopping: 'paper',
|
|
5374
|
+
// Will use shopping bag icon
|
|
5375
|
+
dining: 'paper',
|
|
5376
|
+
// Will use restaurant icon
|
|
5377
|
+
transport: 'paper',
|
|
5378
|
+
// Will use car icon
|
|
5379
|
+
entertainment: 'star',
|
|
5380
|
+
// Will use ticket icon
|
|
5381
|
+
bills: 'paper',
|
|
5382
|
+
// Will use document icon
|
|
5383
|
+
other: 'paper'
|
|
5384
|
+
};
|
|
5385
|
+
// Map status to badge variant
|
|
5386
|
+
var statusToBadgeVariant = {
|
|
5387
|
+
completed: 'success',
|
|
5388
|
+
pending: 'warning',
|
|
5389
|
+
failed: 'error'
|
|
5390
|
+
};
|
|
5391
|
+
/**
|
|
5392
|
+
* TransactionListItem component
|
|
5393
|
+
*
|
|
5394
|
+
* Displays a single transaction in a list with merchant info, amount, date,
|
|
5395
|
+
* status, and optional metadata (category, receipt, notes). Minimum height 72px
|
|
5396
|
+
* with interactive states for clickable items.
|
|
5397
|
+
*
|
|
5398
|
+
* Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
|
|
5399
|
+
*/
|
|
5400
|
+
var TransactionListItem = function TransactionListItem(_a) {
|
|
5401
|
+
var merchant = _a.merchant,
|
|
5402
|
+
amount = _a.amount,
|
|
5403
|
+
date = _a.date,
|
|
5404
|
+
_b = _a.status,
|
|
5405
|
+
status = _b === void 0 ? 'completed' : _b,
|
|
5406
|
+
category = _a.category,
|
|
5407
|
+
merchantLogo = _a.merchantLogo,
|
|
5408
|
+
description = _a.description,
|
|
5409
|
+
_c = _a.hasReceipt,
|
|
5410
|
+
hasReceipt = _c === void 0 ? false : _c,
|
|
5411
|
+
_d = _a.hasNote,
|
|
5412
|
+
hasNote = _d === void 0 ? false : _d,
|
|
5413
|
+
_e = _a.currency,
|
|
5414
|
+
currency = _e === void 0 ? 'AUD' : _e,
|
|
5415
|
+
onClick = _a.onClick,
|
|
5416
|
+
dataTestId = _a["data-testid"];
|
|
5417
|
+
var isClickable = !!onClick;
|
|
5418
|
+
// Determine amount variant
|
|
5419
|
+
var amountVariant = amount > 0 ? 'positive' : amount < 0 ? 'negative' : 'default';
|
|
5420
|
+
// Get category icon
|
|
5421
|
+
var categoryIcon = category ? categoryToIcon[category] : undefined;
|
|
5422
|
+
// Get badge variant from status
|
|
5423
|
+
var badgeVariant = statusToBadgeVariant[status];
|
|
5424
|
+
var handleClick = function handleClick() {
|
|
5425
|
+
if (isClickable && onClick) {
|
|
5426
|
+
onClick();
|
|
5427
|
+
}
|
|
5428
|
+
};
|
|
5429
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
5430
|
+
if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
|
|
5431
|
+
e.preventDefault();
|
|
5432
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
5433
|
+
}
|
|
5434
|
+
};
|
|
5435
|
+
return /*#__PURE__*/React.createElement(StyledContainer, {
|
|
5436
|
+
$clickable: isClickable,
|
|
5437
|
+
onClick: handleClick,
|
|
5438
|
+
onKeyDown: handleKeyDown,
|
|
5439
|
+
tabIndex: isClickable ? 0 : undefined,
|
|
5440
|
+
role: isClickable ? 'button' : undefined,
|
|
5441
|
+
"aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)) : undefined,
|
|
5442
|
+
"data-testid": dataTestId
|
|
5443
|
+
}, /*#__PURE__*/React.createElement(StyledAvatarSection, null, status === 'pending' ? /*#__PURE__*/React.createElement(Badge, {
|
|
5444
|
+
variant: badgeVariant,
|
|
5445
|
+
dot: true,
|
|
5446
|
+
"aria-label": "Pending transaction"
|
|
5447
|
+
}, /*#__PURE__*/React.createElement(Avatar, {
|
|
5448
|
+
name: merchant,
|
|
5449
|
+
picture: merchantLogo,
|
|
5450
|
+
size: "md"
|
|
5451
|
+
})) : /*#__PURE__*/React.createElement(Avatar, {
|
|
5452
|
+
name: merchant,
|
|
5453
|
+
picture: merchantLogo,
|
|
5454
|
+
size: "md"
|
|
5455
|
+
})), /*#__PURE__*/React.createElement(StyledMainContent, null, /*#__PURE__*/React.createElement(StyledTopRow, null, /*#__PURE__*/React.createElement(StyledMerchantSection, null, categoryIcon && /*#__PURE__*/React.createElement("span", {
|
|
5456
|
+
"aria-label": "Category: ".concat(category),
|
|
5457
|
+
role: "img"
|
|
5458
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
5459
|
+
name: categoryIcon,
|
|
5460
|
+
size: "sm",
|
|
5461
|
+
iconColor: "subdued"
|
|
5462
|
+
})), /*#__PURE__*/React.createElement(StyledTruncatedText, null, /*#__PURE__*/React.createElement(Typography, {
|
|
5463
|
+
variant: "body"
|
|
5464
|
+
}, merchant)), status === 'failed' && /*#__PURE__*/React.createElement(Badge, {
|
|
5465
|
+
variant: "error",
|
|
5466
|
+
dot: true,
|
|
5467
|
+
"aria-label": "Failed transaction"
|
|
5468
|
+
}, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement(MoneyDisplay, {
|
|
5469
|
+
amount: amount,
|
|
5470
|
+
currency: currency,
|
|
5471
|
+
variant: amountVariant,
|
|
5472
|
+
size: "medium",
|
|
5473
|
+
weight: "medium",
|
|
5474
|
+
showSign: true,
|
|
5475
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-amount") : undefined
|
|
5476
|
+
})), /*#__PURE__*/React.createElement(StyledBottomRow, null, /*#__PURE__*/React.createElement(StyledMetadata, null, /*#__PURE__*/React.createElement(DateFormatter, {
|
|
5477
|
+
dateString: typeof date === 'string' ? date : date.toISOString(),
|
|
5478
|
+
mode: "smart",
|
|
5479
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
|
|
5480
|
+
}), description && /*#__PURE__*/React.createElement(StyledTruncatedText, null, /*#__PURE__*/React.createElement(Typography, {
|
|
5481
|
+
variant: "caption",
|
|
5482
|
+
color: "subdued"
|
|
5483
|
+
}, "\u2022 ", description))), (hasReceipt || hasNote) && /*#__PURE__*/React.createElement(StyledIconIndicator, null, hasReceipt && /*#__PURE__*/React.createElement("span", {
|
|
5484
|
+
"aria-label": "Has receipt",
|
|
5485
|
+
role: "img"
|
|
5486
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
5487
|
+
name: "fileDocSearch",
|
|
5488
|
+
size: "xs"
|
|
5489
|
+
})), hasNote && /*#__PURE__*/React.createElement("span", {
|
|
5490
|
+
"aria-label": "Has note",
|
|
5491
|
+
role: "img"
|
|
5492
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
5493
|
+
name: "paper",
|
|
5494
|
+
size: "xs"
|
|
5495
|
+
}))))));
|
|
5496
|
+
};
|
|
5497
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1;
|
|
4822
5498
|
|
|
4823
5499
|
React.createElement;
|
|
4824
5500
|
// Breakpoints using base tokens
|
|
@@ -5023,5 +5699,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
5023
5699
|
// Main design system exports
|
|
5024
5700
|
var tokens = tokensData;
|
|
5025
5701
|
|
|
5026
|
-
export { Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, Sheet, Slider, Stack, StyledInputBase, StyledTextAreaBase, Tag, TextField, Typography, iconsData, tokens };
|
|
5702
|
+
export { AccountCard, Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DateGroup, Divider, Dropdown, EmptyState, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, MoneyDisplay, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, Sheet, Slider, Stack, StyledInputBase, StyledTextAreaBase, Tag, TextField, TransactionListItem, Typography, iconsData, tokens };
|
|
5027
5703
|
//# sourceMappingURL=index.esm.js.map
|