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