@common-origin/design-system 1.13.0 → 1.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/molecules/Sheet/Sheet.d.ts +96 -0
- package/dist/components/molecules/Sheet/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +1 -0
- package/dist/index.esm.js +349 -148
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +349 -147
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -100,7 +100,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
100
100
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
101
101
|
};
|
|
102
102
|
|
|
103
|
-
var base$
|
|
103
|
+
var base$6 = {
|
|
104
104
|
border: {
|
|
105
105
|
radius: {
|
|
106
106
|
"1": "0.125rem",
|
|
@@ -635,7 +635,7 @@ var component = {
|
|
|
635
635
|
},
|
|
636
636
|
$ref: "./component/index.json"
|
|
637
637
|
};
|
|
638
|
-
var semantic$
|
|
638
|
+
var semantic$7 = {
|
|
639
639
|
border: {
|
|
640
640
|
"default": "0.0625rem solid #e9ecef",
|
|
641
641
|
subtle: "0.0625rem solid #dee2e6",
|
|
@@ -772,9 +772,9 @@ var semantic$6 = {
|
|
|
772
772
|
$ref: "./semantic/index.json"
|
|
773
773
|
};
|
|
774
774
|
var tokensData = {
|
|
775
|
-
base: base$
|
|
775
|
+
base: base$6,
|
|
776
776
|
component: component,
|
|
777
|
-
semantic: semantic$
|
|
777
|
+
semantic: semantic$7
|
|
778
778
|
};
|
|
779
779
|
|
|
780
780
|
React.createElement;
|
|
@@ -784,7 +784,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
784
784
|
},
|
|
785
785
|
displayName: "Avatar__AvatarContainer",
|
|
786
786
|
componentId: "sc-ezn4ax-0"
|
|
787
|
-
})(templateObject_1$
|
|
787
|
+
})(templateObject_1$v || (templateObject_1$v = __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) {
|
|
788
788
|
var $size = _a.$size;
|
|
789
789
|
return tokensData.semantic.size.avatar[$size];
|
|
790
790
|
}, function (_a) {
|
|
@@ -797,14 +797,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
797
797
|
},
|
|
798
798
|
displayName: "Avatar__AvatarImage",
|
|
799
799
|
componentId: "sc-ezn4ax-1"
|
|
800
|
-
})(templateObject_2$
|
|
800
|
+
})(templateObject_2$j || (templateObject_2$j = __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);
|
|
801
801
|
var AvatarInitials = styled.span.withConfig({
|
|
802
802
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
803
803
|
return !prop.startsWith('$');
|
|
804
804
|
},
|
|
805
805
|
displayName: "Avatar__AvatarInitials",
|
|
806
806
|
componentId: "sc-ezn4ax-2"
|
|
807
|
-
})(templateObject_3$
|
|
807
|
+
})(templateObject_3$f || (templateObject_3$f = __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"
|
|
808
808
|
// Helper function to get initials from name
|
|
809
809
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
810
810
|
var $size = _a.$size;
|
|
@@ -867,7 +867,7 @@ var Avatar = function Avatar(_a) {
|
|
|
867
867
|
"aria-hidden": "true"
|
|
868
868
|
}, initials));
|
|
869
869
|
};
|
|
870
|
-
var templateObject_1$
|
|
870
|
+
var templateObject_1$v, templateObject_2$j, templateObject_3$f;
|
|
871
871
|
|
|
872
872
|
React.createElement;
|
|
873
873
|
var _a$5 = tokensData.semantic,
|
|
@@ -935,7 +935,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
935
935
|
},
|
|
936
936
|
displayName: "Typography__StyledTypography",
|
|
937
937
|
componentId: "sc-17mqo4k-0"
|
|
938
|
-
})(templateObject_1$
|
|
938
|
+
})(templateObject_1$u || (templateObject_1$u = __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"
|
|
939
939
|
/**
|
|
940
940
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
941
941
|
*
|
|
@@ -1002,23 +1002,23 @@ var Typography = function Typography(_a) {
|
|
|
1002
1002
|
"data-testid": dataTestId
|
|
1003
1003
|
}, children);
|
|
1004
1004
|
};
|
|
1005
|
-
var templateObject_1$
|
|
1005
|
+
var templateObject_1$u;
|
|
1006
1006
|
|
|
1007
1007
|
React.createElement;
|
|
1008
1008
|
var color$3 = tokensData.semantic.color;
|
|
1009
1009
|
tokensData.base.shadow;
|
|
1010
|
-
var scaleIn = keyframes(templateObject_1$
|
|
1010
|
+
var scaleIn = keyframes(templateObject_1$t || (templateObject_1$t = __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"])));
|
|
1011
1011
|
var BadgeWrapper = styled.span.withConfig({
|
|
1012
1012
|
displayName: "Badge__BadgeWrapper",
|
|
1013
1013
|
componentId: "sc-tjz4pp-0"
|
|
1014
|
-
})(templateObject_2$
|
|
1014
|
+
})(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
1015
1015
|
var BadgeIndicator = styled.span.withConfig({
|
|
1016
1016
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1017
1017
|
return !prop.startsWith('$');
|
|
1018
1018
|
},
|
|
1019
1019
|
displayName: "Badge__BadgeIndicator",
|
|
1020
1020
|
componentId: "sc-tjz4pp-1"
|
|
1021
|
-
})(templateObject_3$
|
|
1021
|
+
})(templateObject_3$e || (templateObject_3$e = __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) {
|
|
1022
1022
|
return props.$isVisible ? 'flex' : 'none';
|
|
1023
1023
|
}, function (props) {
|
|
1024
1024
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1043,7 +1043,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1043
1043
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
1044
1044
|
displayName: "Badge__ScreenReaderOnly",
|
|
1045
1045
|
componentId: "sc-tjz4pp-2"
|
|
1046
|
-
})(templateObject_4$
|
|
1046
|
+
})(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
1047
1047
|
var Badge = function Badge(_a) {
|
|
1048
1048
|
var children = _a.children,
|
|
1049
1049
|
_b = _a.count,
|
|
@@ -1074,7 +1074,7 @@ var Badge = function Badge(_a) {
|
|
|
1074
1074
|
color: "inverse"
|
|
1075
1075
|
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
|
|
1076
1076
|
};
|
|
1077
|
-
var templateObject_1$
|
|
1077
|
+
var templateObject_1$t, templateObject_2$i, templateObject_3$e, templateObject_4$c;
|
|
1078
1078
|
|
|
1079
1079
|
React.createElement;
|
|
1080
1080
|
var StyledBox = styled.div.withConfig({
|
|
@@ -1086,31 +1086,31 @@ var StyledBox = styled.div.withConfig({
|
|
|
1086
1086
|
})(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"
|
|
1087
1087
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1088
1088
|
])), function (props) {
|
|
1089
|
-
return props.$display && css(templateObject_1$
|
|
1089
|
+
return props.$display && css(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1090
1090
|
}, function (props) {
|
|
1091
|
-
return props.$flexDirection && css(templateObject_2$
|
|
1091
|
+
return props.$flexDirection && css(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1092
1092
|
}, function (props) {
|
|
1093
|
-
return props.$justifyContent && css(templateObject_3$
|
|
1093
|
+
return props.$justifyContent && css(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1094
1094
|
}, function (props) {
|
|
1095
|
-
return props.$alignItems && css(templateObject_4$
|
|
1095
|
+
return props.$alignItems && css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1096
1096
|
}, function (props) {
|
|
1097
|
-
return props.$flexWrap && css(templateObject_5$
|
|
1097
|
+
return props.$flexWrap && css(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1098
1098
|
}, function (props) {
|
|
1099
|
-
return props.$gap && css(templateObject_6$
|
|
1099
|
+
return props.$gap && css(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1100
1100
|
}, function (props) {
|
|
1101
|
-
return props.$m && css(templateObject_7$
|
|
1101
|
+
return props.$m && css(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1102
1102
|
}, function (props) {
|
|
1103
|
-
return props.$mt && css(templateObject_8$
|
|
1103
|
+
return props.$mt && css(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1104
1104
|
}, function (props) {
|
|
1105
|
-
return props.$mr && css(templateObject_9$
|
|
1105
|
+
return props.$mr && css(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
|
|
1106
1106
|
}, function (props) {
|
|
1107
|
-
return props.$mb && css(templateObject_10$
|
|
1107
|
+
return props.$mb && css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
|
|
1108
1108
|
}, function (props) {
|
|
1109
|
-
return props.$ml && css(templateObject_11$
|
|
1109
|
+
return props.$ml && css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
|
|
1110
1110
|
}, function (props) {
|
|
1111
|
-
return props.$mx && css(templateObject_12$
|
|
1111
|
+
return props.$mx && css(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n "], ["\n margin-left: ", ";\n margin-right: ", ";\n "])), tokensData.semantic.spacing.layout[props.$mx], tokensData.semantic.spacing.layout[props.$mx]);
|
|
1112
1112
|
}, function (props) {
|
|
1113
|
-
return props.$my && css(templateObject_13$
|
|
1113
|
+
return props.$my && css(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), tokensData.semantic.spacing.layout[props.$my], tokensData.semantic.spacing.layout[props.$my]);
|
|
1114
1114
|
}, function (props) {
|
|
1115
1115
|
return props.$p && css(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensData.semantic.spacing.layout[props.$p]);
|
|
1116
1116
|
}, function (props) {
|
|
@@ -1276,7 +1276,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1276
1276
|
}, rest), children);
|
|
1277
1277
|
};
|
|
1278
1278
|
var Box = BoxTransform;
|
|
1279
|
-
var templateObject_1$
|
|
1279
|
+
var templateObject_1$s, templateObject_2$h, templateObject_3$d, templateObject_4$b, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$3, templateObject_9$2, 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;
|
|
1280
1280
|
|
|
1281
1281
|
var add = {
|
|
1282
1282
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1427,7 +1427,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1427
1427
|
},
|
|
1428
1428
|
displayName: "Icon__IconStyled",
|
|
1429
1429
|
componentId: "sc-1105czq-0"
|
|
1430
|
-
})(templateObject_1$
|
|
1430
|
+
})(templateObject_1$r || (templateObject_1$r = __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) {
|
|
1431
1431
|
var $size = _a.$size;
|
|
1432
1432
|
return tokensData.semantic.size.icon[$size];
|
|
1433
1433
|
}, function (_a) {
|
|
@@ -1491,13 +1491,13 @@ var Icon = function Icon(_a) {
|
|
|
1491
1491
|
d: iconData.path
|
|
1492
1492
|
})));
|
|
1493
1493
|
};
|
|
1494
|
-
var templateObject_1$
|
|
1494
|
+
var templateObject_1$r;
|
|
1495
1495
|
|
|
1496
1496
|
React.createElement;
|
|
1497
1497
|
var button = tokensData.component.button,
|
|
1498
|
-
semantic$
|
|
1498
|
+
semantic$6 = tokensData.semantic;
|
|
1499
1499
|
// Base styles shared between button and link
|
|
1500
|
-
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$
|
|
1500
|
+
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$6.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");
|
|
1501
1501
|
// Dynamic variant styles using component tokens
|
|
1502
1502
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1503
1503
|
var $variant = _a.$variant;
|
|
@@ -1523,14 +1523,14 @@ var StyledButton = styled.button.withConfig({
|
|
|
1523
1523
|
},
|
|
1524
1524
|
displayName: "Button__StyledButton",
|
|
1525
1525
|
componentId: "sc-1eiuum9-0"
|
|
1526
|
-
})(templateObject_1$
|
|
1526
|
+
})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1527
1527
|
var StyledLink = styled.a.withConfig({
|
|
1528
1528
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1529
1529
|
return !prop.startsWith('$');
|
|
1530
1530
|
},
|
|
1531
1531
|
displayName: "Button__StyledLink",
|
|
1532
1532
|
componentId: "sc-1eiuum9-1"
|
|
1533
|
-
})(templateObject_2$
|
|
1533
|
+
})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1534
1534
|
// Helper function to get icon size based on button size
|
|
1535
1535
|
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1536
1536
|
// Helper function to get icon size based on button size
|
|
@@ -1623,7 +1623,7 @@ var Button = function Button(_a) {
|
|
|
1623
1623
|
"data-testid": dataTestId
|
|
1624
1624
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1625
1625
|
};
|
|
1626
|
-
var templateObject_1$
|
|
1626
|
+
var templateObject_1$q, templateObject_2$g;
|
|
1627
1627
|
|
|
1628
1628
|
var chip = tokensData.component.chip;
|
|
1629
1629
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1684,14 +1684,14 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1684
1684
|
},
|
|
1685
1685
|
displayName: "ChipBase__BaseChipStyled",
|
|
1686
1686
|
componentId: "sc-moa6zc-0"
|
|
1687
|
-
})(templateObject_1$
|
|
1687
|
+
})(templateObject_1$p || (templateObject_1$p = __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"
|
|
1688
1688
|
// Icon container for selected indicator or leading icons
|
|
1689
1689
|
])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1690
1690
|
// Icon container for selected indicator or leading icons
|
|
1691
1691
|
var IconContainer = styled.span.withConfig({
|
|
1692
1692
|
displayName: "ChipBase__IconContainer",
|
|
1693
1693
|
componentId: "sc-moa6zc-1"
|
|
1694
|
-
})(templateObject_2$
|
|
1694
|
+
})(templateObject_2$f || (templateObject_2$f = __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"
|
|
1695
1695
|
// Close button for dismissible chips
|
|
1696
1696
|
])), tokensData.semantic.spacing.layout.sm);
|
|
1697
1697
|
// Close button for dismissible chips
|
|
@@ -1701,7 +1701,7 @@ var CloseButton = styled.button.withConfig({
|
|
|
1701
1701
|
},
|
|
1702
1702
|
displayName: "ChipBase__CloseButton",
|
|
1703
1703
|
componentId: "sc-moa6zc-2"
|
|
1704
|
-
})(templateObject_3$
|
|
1704
|
+
})(templateObject_3$c || (templateObject_3$c = __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"
|
|
1705
1705
|
// Wrapper component that applies styles via CSS custom properties
|
|
1706
1706
|
])), tokensData.semantic.spacing.layout.sm, function (props) {
|
|
1707
1707
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
@@ -1736,7 +1736,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1736
1736
|
style: __assign(__assign({}, cssProps), style)
|
|
1737
1737
|
}, htmlProps), children);
|
|
1738
1738
|
};
|
|
1739
|
-
var templateObject_1$
|
|
1739
|
+
var templateObject_1$p, templateObject_2$f, templateObject_3$c;
|
|
1740
1740
|
|
|
1741
1741
|
React.createElement;
|
|
1742
1742
|
/**
|
|
@@ -1980,32 +1980,32 @@ var spacing$3 = tokensData.semantic.spacing;
|
|
|
1980
1980
|
var StyledContainer = styled.div.withConfig({
|
|
1981
1981
|
displayName: "Container__StyledContainer",
|
|
1982
1982
|
componentId: "sc-17dbj6n-0"
|
|
1983
|
-
})(templateObject_1$
|
|
1983
|
+
})(templateObject_1$o || (templateObject_1$o = __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']);
|
|
1984
1984
|
var Container = function Container(_a) {
|
|
1985
1985
|
var children = _a.children,
|
|
1986
1986
|
props = __rest(_a, ["children"]);
|
|
1987
1987
|
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
1988
1988
|
};
|
|
1989
|
-
var templateObject_1$
|
|
1989
|
+
var templateObject_1$o;
|
|
1990
1990
|
|
|
1991
1991
|
React.createElement;
|
|
1992
|
-
var base$
|
|
1992
|
+
var base$5 = tokensData.base;
|
|
1993
1993
|
var PictureWrapper = styled.div.withConfig({
|
|
1994
1994
|
displayName: "Picture__PictureWrapper",
|
|
1995
1995
|
componentId: "sc-11d9tei-0"
|
|
1996
|
-
})(templateObject_1$
|
|
1996
|
+
})(templateObject_1$n || (templateObject_1$n = __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);
|
|
1997
1997
|
var ImageLink = styled.a.withConfig({
|
|
1998
1998
|
displayName: "Picture__ImageLink",
|
|
1999
1999
|
componentId: "sc-11d9tei-1"
|
|
2000
|
-
})(templateObject_2$
|
|
2000
|
+
})(templateObject_2$e || (templateObject_2$e = __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$5.duration.normal, base$5.easing.easeInOut);
|
|
2001
2001
|
var ImageButton = styled.button.withConfig({
|
|
2002
2002
|
displayName: "Picture__ImageButton",
|
|
2003
2003
|
componentId: "sc-11d9tei-2"
|
|
2004
|
-
})(templateObject_3$
|
|
2004
|
+
})(templateObject_3$b || (templateObject_3$b = __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$5.duration.normal, base$5.easing.easeInOut);
|
|
2005
2005
|
var StyledImage = styled.img.withConfig({
|
|
2006
2006
|
displayName: "Picture__StyledImage",
|
|
2007
2007
|
componentId: "sc-11d9tei-3"
|
|
2008
|
-
})(templateObject_4$
|
|
2008
|
+
})(templateObject_4$a || (templateObject_4$a = __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$5.border.radius[2]);
|
|
2009
2009
|
var Picture = function Picture(_a) {
|
|
2010
2010
|
var title = _a.title,
|
|
2011
2011
|
src = _a.src,
|
|
@@ -2032,7 +2032,7 @@ var Picture = function Picture(_a) {
|
|
|
2032
2032
|
"aria-label": "Read more about ".concat(title)
|
|
2033
2033
|
}, image) : image);
|
|
2034
2034
|
};
|
|
2035
|
-
var templateObject_1$
|
|
2035
|
+
var templateObject_1$n, templateObject_2$e, templateObject_3$b, templateObject_4$a;
|
|
2036
2036
|
|
|
2037
2037
|
React.createElement;
|
|
2038
2038
|
var _a$4 = tokensData.semantic,
|
|
@@ -2041,7 +2041,7 @@ var _a$4 = tokensData.semantic,
|
|
|
2041
2041
|
var TimeStyled = styled.time.withConfig({
|
|
2042
2042
|
displayName: "DateFormatter__TimeStyled",
|
|
2043
2043
|
componentId: "sc-5464cc-0"
|
|
2044
|
-
})(templateObject_1$
|
|
2044
|
+
})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography$1.label, color$2.text.subdued);
|
|
2045
2045
|
var DateFormatter = function DateFormatter(_a) {
|
|
2046
2046
|
var dateString = _a.dateString,
|
|
2047
2047
|
_b = _a.formatString,
|
|
@@ -2053,7 +2053,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
2053
2053
|
"data-testid": dataTestId
|
|
2054
2054
|
}, format(date, formatString));
|
|
2055
2055
|
};
|
|
2056
|
-
var templateObject_1$
|
|
2056
|
+
var templateObject_1$m;
|
|
2057
2057
|
|
|
2058
2058
|
React.createElement;
|
|
2059
2059
|
var motion = tokensData.semantic.motion,
|
|
@@ -2064,7 +2064,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2064
2064
|
},
|
|
2065
2065
|
displayName: "IconButton__IconButtonStyled",
|
|
2066
2066
|
componentId: "sc-k8b14t-0"
|
|
2067
|
-
})(templateObject_1$
|
|
2067
|
+
})(templateObject_1$l || (templateObject_1$l = __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) {
|
|
2068
2068
|
var $variant = _a.$variant;
|
|
2069
2069
|
switch ($variant) {
|
|
2070
2070
|
case 'primary':
|
|
@@ -2175,7 +2175,7 @@ var IconButton = function IconButton(_a) {
|
|
|
2175
2175
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2176
2176
|
}));
|
|
2177
2177
|
};
|
|
2178
|
-
var templateObject_1$
|
|
2178
|
+
var templateObject_1$l;
|
|
2179
2179
|
|
|
2180
2180
|
React.createElement;
|
|
2181
2181
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -2184,10 +2184,10 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
2184
2184
|
},
|
|
2185
2185
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2186
2186
|
componentId: "sc-1nco33q-0"
|
|
2187
|
-
})(templateObject_3$
|
|
2188
|
-
return props.$variant === 'horizontal' && css(templateObject_1$
|
|
2187
|
+
})(templateObject_3$a || (templateObject_3$a = __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) {
|
|
2188
|
+
return props.$variant === 'horizontal' && css(templateObject_1$k || (templateObject_1$k = __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);
|
|
2189
2189
|
}, function (props) {
|
|
2190
|
-
return props.$variant === 'vertical' && css(templateObject_2$
|
|
2190
|
+
return props.$variant === 'vertical' && css(templateObject_2$d || (templateObject_2$d = __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);
|
|
2191
2191
|
});
|
|
2192
2192
|
var ProgressBarFill = styled.div.withConfig({
|
|
2193
2193
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2195,7 +2195,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2195
2195
|
},
|
|
2196
2196
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2197
2197
|
componentId: "sc-1nco33q-1"
|
|
2198
|
-
})(templateObject_7$
|
|
2198
|
+
})(templateObject_7$4 || (templateObject_7$4 = __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) {
|
|
2199
2199
|
var backgroundColor;
|
|
2200
2200
|
switch (props.$color) {
|
|
2201
2201
|
case 'success':
|
|
@@ -2209,11 +2209,11 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2209
2209
|
backgroundColor = tokensData.semantic.color.background.interactive;
|
|
2210
2210
|
break;
|
|
2211
2211
|
}
|
|
2212
|
-
return css(templateObject_4$
|
|
2212
|
+
return css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2213
2213
|
}, function (props) {
|
|
2214
|
-
return props.$variant === 'horizontal' && css(templateObject_5$
|
|
2214
|
+
return props.$variant === 'horizontal' && css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2215
2215
|
}, function (props) {
|
|
2216
|
-
return props.$variant === 'vertical' && css(templateObject_6$
|
|
2216
|
+
return props.$variant === 'vertical' && css(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2217
2217
|
});
|
|
2218
2218
|
var ProgressBar = function ProgressBar(_a) {
|
|
2219
2219
|
var value = _a.value,
|
|
@@ -2239,7 +2239,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2239
2239
|
$color: color
|
|
2240
2240
|
}));
|
|
2241
2241
|
};
|
|
2242
|
-
var templateObject_1$
|
|
2242
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$a, templateObject_4$9, templateObject_5$7, templateObject_6$6, templateObject_7$4;
|
|
2243
2243
|
|
|
2244
2244
|
React.createElement;
|
|
2245
2245
|
var StyledDivider = styled.div.withConfig({
|
|
@@ -2248,7 +2248,7 @@ var StyledDivider = styled.div.withConfig({
|
|
|
2248
2248
|
},
|
|
2249
2249
|
displayName: "Divider__StyledDivider",
|
|
2250
2250
|
componentId: "sc-1l0c8ja-0"
|
|
2251
|
-
})(templateObject_1$
|
|
2251
|
+
})(templateObject_1$j || (templateObject_1$j = __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"
|
|
2252
2252
|
/**
|
|
2253
2253
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2254
2254
|
*
|
|
@@ -2361,7 +2361,7 @@ var Divider = function Divider(_a) {
|
|
|
2361
2361
|
"aria-orientation": orientation
|
|
2362
2362
|
});
|
|
2363
2363
|
};
|
|
2364
|
-
var templateObject_1$
|
|
2364
|
+
var templateObject_1$j;
|
|
2365
2365
|
|
|
2366
2366
|
React.createElement;
|
|
2367
2367
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2370,7 +2370,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2370
2370
|
},
|
|
2371
2371
|
displayName: "Stack__StyledStack",
|
|
2372
2372
|
componentId: "sc-1ehkxgy-0"
|
|
2373
|
-
})(templateObject_1$
|
|
2373
|
+
})(templateObject_1$i || (templateObject_1$i = __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"
|
|
2374
2374
|
// Helper function to convert gap prop to CSS value
|
|
2375
2375
|
])));
|
|
2376
2376
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2408,17 +2408,17 @@ var Stack = function Stack(_a) {
|
|
|
2408
2408
|
"data-testid": dataTestId
|
|
2409
2409
|
}, children);
|
|
2410
2410
|
};
|
|
2411
|
-
var templateObject_1$
|
|
2411
|
+
var templateObject_1$i;
|
|
2412
2412
|
|
|
2413
2413
|
React.createElement;
|
|
2414
|
-
var semantic$
|
|
2414
|
+
var semantic$5 = tokensData.semantic;
|
|
2415
2415
|
var StyledTag = styled.span.withConfig({
|
|
2416
2416
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2417
2417
|
return !prop.startsWith('$');
|
|
2418
2418
|
},
|
|
2419
2419
|
displayName: "Tag__StyledTag",
|
|
2420
2420
|
componentId: "sc-lzfmti-0"
|
|
2421
|
-
})(templateObject_1$
|
|
2421
|
+
})(templateObject_1$h || (templateObject_1$h = __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"
|
|
2422
2422
|
/**
|
|
2423
2423
|
* Tag component for categorizing and labeling content
|
|
2424
2424
|
*
|
|
@@ -2428,33 +2428,33 @@ var StyledTag = styled.span.withConfig({
|
|
|
2428
2428
|
var $variant = _a.$variant;
|
|
2429
2429
|
switch ($variant) {
|
|
2430
2430
|
case 'interactive':
|
|
2431
|
-
return semantic$
|
|
2431
|
+
return semantic$5.color.background['interactive-subtle'];
|
|
2432
2432
|
case 'success':
|
|
2433
|
-
return semantic$
|
|
2433
|
+
return semantic$5.color.background['success-subtle'];
|
|
2434
2434
|
case 'warning':
|
|
2435
|
-
return semantic$
|
|
2435
|
+
return semantic$5.color.background['warning-subtle'];
|
|
2436
2436
|
case 'error':
|
|
2437
|
-
return semantic$
|
|
2437
|
+
return semantic$5.color.background['error-subtle'];
|
|
2438
2438
|
case 'emphasis':
|
|
2439
|
-
return semantic$
|
|
2439
|
+
return semantic$5.color.background.emphasis;
|
|
2440
2440
|
default:
|
|
2441
|
-
return semantic$
|
|
2441
|
+
return semantic$5.color.background.surface;
|
|
2442
2442
|
}
|
|
2443
2443
|
}, function (_a) {
|
|
2444
2444
|
var $variant = _a.$variant;
|
|
2445
2445
|
switch ($variant) {
|
|
2446
2446
|
case 'interactive':
|
|
2447
|
-
return semantic$
|
|
2447
|
+
return semantic$5.color.text.interactive;
|
|
2448
2448
|
case 'success':
|
|
2449
|
-
return semantic$
|
|
2449
|
+
return semantic$5.color.text.success;
|
|
2450
2450
|
case 'warning':
|
|
2451
|
-
return semantic$
|
|
2451
|
+
return semantic$5.color.text.warning;
|
|
2452
2452
|
case 'error':
|
|
2453
|
-
return semantic$
|
|
2453
|
+
return semantic$5.color.text.error;
|
|
2454
2454
|
case 'emphasis':
|
|
2455
|
-
return semantic$
|
|
2455
|
+
return semantic$5.color.text.inverse;
|
|
2456
2456
|
default:
|
|
2457
|
-
return semantic$
|
|
2457
|
+
return semantic$5.color.text["default"];
|
|
2458
2458
|
}
|
|
2459
2459
|
}, function (_a) {
|
|
2460
2460
|
var $variant = _a.$variant,
|
|
@@ -2462,17 +2462,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2462
2462
|
if (!$border) return 'none';
|
|
2463
2463
|
switch ($variant) {
|
|
2464
2464
|
case 'interactive':
|
|
2465
|
-
return "1px solid ".concat(semantic$
|
|
2465
|
+
return "1px solid ".concat(semantic$5.color.border.interactive);
|
|
2466
2466
|
case 'success':
|
|
2467
|
-
return "1px solid ".concat(semantic$
|
|
2467
|
+
return "1px solid ".concat(semantic$5.color.border.success);
|
|
2468
2468
|
case 'warning':
|
|
2469
|
-
return "1px solid ".concat(semantic$
|
|
2469
|
+
return "1px solid ".concat(semantic$5.color.border.warning);
|
|
2470
2470
|
case 'error':
|
|
2471
|
-
return "1px solid ".concat(semantic$
|
|
2471
|
+
return "1px solid ".concat(semantic$5.color.border.error);
|
|
2472
2472
|
case 'emphasis':
|
|
2473
|
-
return "1px solid ".concat(semantic$
|
|
2473
|
+
return "1px solid ".concat(semantic$5.color.background.emphasis);
|
|
2474
2474
|
default:
|
|
2475
|
-
return "1px solid ".concat(semantic$
|
|
2475
|
+
return "1px solid ".concat(semantic$5.color.border["default"]);
|
|
2476
2476
|
}
|
|
2477
2477
|
});
|
|
2478
2478
|
/**
|
|
@@ -2499,18 +2499,18 @@ var Tag = function Tag(_a) {
|
|
|
2499
2499
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
2500
2500
|
}, props), children);
|
|
2501
2501
|
};
|
|
2502
|
-
var templateObject_1$
|
|
2502
|
+
var templateObject_1$h;
|
|
2503
2503
|
|
|
2504
2504
|
React.createElement;
|
|
2505
2505
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
2506
2506
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
2507
2507
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
2508
2508
|
componentId: "sc-7ouzg5-0"
|
|
2509
|
-
})(templateObject_1$
|
|
2509
|
+
})(templateObject_1$g || (templateObject_1$g = __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');
|
|
2510
2510
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
2511
2511
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
2512
2512
|
componentId: "sc-7ouzg5-1"
|
|
2513
|
-
})(templateObject_2$
|
|
2513
|
+
})(templateObject_2$c || (templateObject_2$c = __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"]);
|
|
2514
2514
|
var isInternalUrl = function isInternalUrl(url) {
|
|
2515
2515
|
return url.startsWith('/') && !url.startsWith('http');
|
|
2516
2516
|
};
|
|
@@ -2536,13 +2536,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
2536
2536
|
}, breadcrumb.label)));
|
|
2537
2537
|
}))));
|
|
2538
2538
|
};
|
|
2539
|
-
var templateObject_1$
|
|
2539
|
+
var templateObject_1$g, templateObject_2$c;
|
|
2540
2540
|
|
|
2541
2541
|
React.createElement;
|
|
2542
2542
|
var CardSmallStyled = styled.div.withConfig({
|
|
2543
2543
|
displayName: "CardSmall__CardSmallStyled",
|
|
2544
2544
|
componentId: "sc-jpcqvd-0"
|
|
2545
|
-
})(templateObject_1$
|
|
2545
|
+
})(templateObject_1$f || (templateObject_1$f = __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);
|
|
2546
2546
|
var CardSmall = function CardSmall(_a) {
|
|
2547
2547
|
var title = _a.title,
|
|
2548
2548
|
picture = _a.picture,
|
|
@@ -2579,14 +2579,14 @@ var CardSmall = function CardSmall(_a) {
|
|
|
2579
2579
|
color: "subdued"
|
|
2580
2580
|
}, meta))))));
|
|
2581
2581
|
};
|
|
2582
|
-
var templateObject_1$
|
|
2582
|
+
var templateObject_1$f;
|
|
2583
2583
|
|
|
2584
2584
|
React.createElement;
|
|
2585
2585
|
var border$3 = tokensData.base.border;
|
|
2586
2586
|
var CardLargeStyled = styled.div.withConfig({
|
|
2587
2587
|
displayName: "CardLarge__CardLargeStyled",
|
|
2588
2588
|
componentId: "sc-1rfgdzl-0"
|
|
2589
|
-
})(templateObject_1$
|
|
2589
|
+
})(templateObject_1$e || (templateObject_1$e = __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]);
|
|
2590
2590
|
var CardLarge = function CardLarge(_a) {
|
|
2591
2591
|
var title = _a.title,
|
|
2592
2592
|
excerpt = _a.excerpt,
|
|
@@ -2631,7 +2631,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
2631
2631
|
});
|
|
2632
2632
|
})))));
|
|
2633
2633
|
};
|
|
2634
|
-
var templateObject_1$
|
|
2634
|
+
var templateObject_1$e;
|
|
2635
2635
|
|
|
2636
2636
|
/**
|
|
2637
2637
|
* Hidden native checkbox input for accessibility
|
|
@@ -2643,7 +2643,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
2643
2643
|
},
|
|
2644
2644
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
2645
2645
|
componentId: "sc-1ddpctx-0"
|
|
2646
|
-
})(templateObject_1$
|
|
2646
|
+
})(templateObject_1$d || (templateObject_1$d = __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"
|
|
2647
2647
|
/**
|
|
2648
2648
|
* Custom checkbox visual component
|
|
2649
2649
|
* 24px × 24px for 8px grid alignment
|
|
@@ -2660,7 +2660,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2660
2660
|
},
|
|
2661
2661
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2662
2662
|
componentId: "sc-1ddpctx-1"
|
|
2663
|
-
})(templateObject_2$
|
|
2663
|
+
})(templateObject_2$b || (templateObject_2$b = __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"
|
|
2664
2664
|
/**
|
|
2665
2665
|
* Container for checkbox with proper spacing and alignment
|
|
2666
2666
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -2693,7 +2693,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
2693
2693
|
},
|
|
2694
2694
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
2695
2695
|
componentId: "sc-1ddpctx-2"
|
|
2696
|
-
})(templateObject_3$
|
|
2696
|
+
})(templateObject_3$9 || (templateObject_3$9 = __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"
|
|
2697
2697
|
/**
|
|
2698
2698
|
* Label text with proper typography
|
|
2699
2699
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -2710,20 +2710,20 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
2710
2710
|
},
|
|
2711
2711
|
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
2712
2712
|
componentId: "sc-1ddpctx-3"
|
|
2713
|
-
})(templateObject_4$
|
|
2713
|
+
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
2714
2714
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
2715
2715
|
});
|
|
2716
|
-
var templateObject_1$
|
|
2716
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$9, templateObject_4$8;
|
|
2717
2717
|
|
|
2718
2718
|
React.createElement;
|
|
2719
2719
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
2720
2720
|
displayName: "Checkbox__StyledFieldContainer",
|
|
2721
2721
|
componentId: "sc-vquz3v-0"
|
|
2722
|
-
})(templateObject_1$
|
|
2722
|
+
})(templateObject_1$c || (templateObject_1$c = __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]);
|
|
2723
2723
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
2724
2724
|
displayName: "Checkbox__StyledHelperText",
|
|
2725
2725
|
componentId: "sc-vquz3v-1"
|
|
2726
|
-
})(templateObject_2$
|
|
2726
|
+
})(templateObject_2$a || (templateObject_2$a = __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"
|
|
2727
2727
|
/**
|
|
2728
2728
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2729
2729
|
*
|
|
@@ -2836,13 +2836,13 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
2836
2836
|
}, error));
|
|
2837
2837
|
});
|
|
2838
2838
|
Checkbox.displayName = 'Checkbox';
|
|
2839
|
-
var templateObject_1$
|
|
2839
|
+
var templateObject_1$c, templateObject_2$a;
|
|
2840
2840
|
|
|
2841
2841
|
React.createElement;
|
|
2842
2842
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
2843
2843
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
2844
2844
|
componentId: "sc-ae049w-0"
|
|
2845
|
-
})(templateObject_1$
|
|
2845
|
+
})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"], ["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"])));
|
|
2846
2846
|
var ChipGroup = function ChipGroup(_a) {
|
|
2847
2847
|
var labels = _a.labels,
|
|
2848
2848
|
_b = _a.variant,
|
|
@@ -2861,7 +2861,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
2861
2861
|
});
|
|
2862
2862
|
})));
|
|
2863
2863
|
};
|
|
2864
|
-
var templateObject_1$
|
|
2864
|
+
var templateObject_1$b;
|
|
2865
2865
|
|
|
2866
2866
|
React.createElement;
|
|
2867
2867
|
var _a$2 = tokensData.semantic,
|
|
@@ -2871,15 +2871,15 @@ var _a$2 = tokensData.semantic,
|
|
|
2871
2871
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
2872
2872
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
2873
2873
|
componentId: "sc-1p1t0kp-0"
|
|
2874
|
-
})(templateObject_1$
|
|
2874
|
+
})(templateObject_1$a || (templateObject_1$a = __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);
|
|
2875
2875
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
2876
2876
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
2877
2877
|
componentId: "sc-1p1t0kp-1"
|
|
2878
|
-
})(templateObject_2$
|
|
2878
|
+
})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n width: 100%;\n"], ["\n position: relative;\n display: inline-block;\n width: 100%;\n"])));
|
|
2879
2879
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
2880
2880
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
2881
2881
|
componentId: "sc-1p1t0kp-2"
|
|
2882
|
-
})(templateObject_3$
|
|
2882
|
+
})(templateObject_3$8 || (templateObject_3$8 = __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);
|
|
2883
2883
|
var CopyButton = function CopyButton(_a) {
|
|
2884
2884
|
var text = _a.text,
|
|
2885
2885
|
onCopy = _a.onCopy;
|
|
@@ -2956,7 +2956,7 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
2956
2956
|
onCopy: onCopy
|
|
2957
2957
|
}));
|
|
2958
2958
|
};
|
|
2959
|
-
var templateObject_1$
|
|
2959
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$8;
|
|
2960
2960
|
|
|
2961
2961
|
React.createElement;
|
|
2962
2962
|
var _a$1 = tokensData.base,
|
|
@@ -2965,23 +2965,23 @@ var _a$1 = tokensData.base,
|
|
|
2965
2965
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
2966
2966
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
2967
2967
|
componentId: "sc-1mi4lso-0"
|
|
2968
|
-
})(templateObject_1$
|
|
2968
|
+
})(templateObject_1$9 || (templateObject_1$9 = __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]);
|
|
2969
2969
|
var ImageWrapper = styled.div.withConfig({
|
|
2970
2970
|
displayName: "FeatureBlock__ImageWrapper",
|
|
2971
2971
|
componentId: "sc-1mi4lso-1"
|
|
2972
|
-
})(templateObject_2$
|
|
2972
|
+
})(templateObject_2$8 || (templateObject_2$8 = __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);
|
|
2973
2973
|
var ContentSection = styled.div.withConfig({
|
|
2974
2974
|
displayName: "FeatureBlock__ContentSection",
|
|
2975
2975
|
componentId: "sc-1mi4lso-2"
|
|
2976
|
-
})(templateObject_3$
|
|
2976
|
+
})(templateObject_3$7 || (templateObject_3$7 = __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]);
|
|
2977
2977
|
var ButtonWrapper = styled.div.withConfig({
|
|
2978
2978
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
2979
2979
|
componentId: "sc-1mi4lso-3"
|
|
2980
|
-
})(templateObject_4$
|
|
2980
|
+
})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
2981
2981
|
var ContentWrapper = styled.div.withConfig({
|
|
2982
2982
|
displayName: "FeatureBlock__ContentWrapper",
|
|
2983
2983
|
componentId: "sc-1mi4lso-4"
|
|
2984
|
-
})(templateObject_5$
|
|
2984
|
+
})(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
2985
2985
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
2986
2986
|
var title = _a.title,
|
|
2987
2987
|
excerpt = _a.excerpt,
|
|
@@ -3021,7 +3021,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
3021
3021
|
onClick: onReadMore
|
|
3022
3022
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
3023
3023
|
};
|
|
3024
|
-
var templateObject_1$
|
|
3024
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$7, templateObject_5$6;
|
|
3025
3025
|
|
|
3026
3026
|
React.createElement;
|
|
3027
3027
|
var _a = tokensData.base,
|
|
@@ -3036,14 +3036,14 @@ var _a = tokensData.base,
|
|
|
3036
3036
|
var DropdownContainer = styled.div.withConfig({
|
|
3037
3037
|
displayName: "Dropdown__DropdownContainer",
|
|
3038
3038
|
componentId: "sc-kz07c4-0"
|
|
3039
|
-
})(templateObject_1$
|
|
3039
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
3040
3040
|
var DropdownTrigger = styled.button.withConfig({
|
|
3041
3041
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3042
3042
|
return !prop.startsWith('$');
|
|
3043
3043
|
},
|
|
3044
3044
|
displayName: "Dropdown__DropdownTrigger",
|
|
3045
3045
|
componentId: "sc-kz07c4-1"
|
|
3046
|
-
})(templateObject_2$
|
|
3046
|
+
})(templateObject_2$7 || (templateObject_2$7 = __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) {
|
|
3047
3047
|
var $hasError = _a.$hasError;
|
|
3048
3048
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
3049
3049
|
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
@@ -3063,7 +3063,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
3063
3063
|
},
|
|
3064
3064
|
displayName: "Dropdown__DropdownIcon",
|
|
3065
3065
|
componentId: "sc-kz07c4-2"
|
|
3066
|
-
})(templateObject_3$
|
|
3066
|
+
})(templateObject_3$6 || (templateObject_3$6 = __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) {
|
|
3067
3067
|
var $isOpen = _a.$isOpen;
|
|
3068
3068
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
3069
3069
|
});
|
|
@@ -3073,7 +3073,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
3073
3073
|
},
|
|
3074
3074
|
displayName: "Dropdown__DropdownMenu",
|
|
3075
3075
|
componentId: "sc-kz07c4-3"
|
|
3076
|
-
})(templateObject_4$
|
|
3076
|
+
})(templateObject_4$6 || (templateObject_4$6 = __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) {
|
|
3077
3077
|
var $isOpen = _a.$isOpen;
|
|
3078
3078
|
return $isOpen ? 1 : 0;
|
|
3079
3079
|
}, function (_a) {
|
|
@@ -3089,7 +3089,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3089
3089
|
},
|
|
3090
3090
|
displayName: "Dropdown__DropdownOption",
|
|
3091
3091
|
componentId: "sc-kz07c4-4"
|
|
3092
|
-
})(templateObject_5$
|
|
3092
|
+
})(templateObject_5$5 || (templateObject_5$5 = __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) {
|
|
3093
3093
|
var $isSelected = _a.$isSelected,
|
|
3094
3094
|
$isFocused = _a.$isFocused;
|
|
3095
3095
|
if ($isFocused) return color.background.surface;
|
|
@@ -3099,7 +3099,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3099
3099
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
3100
3100
|
displayName: "Dropdown__StyledHelperText",
|
|
3101
3101
|
componentId: "sc-kz07c4-5"
|
|
3102
|
-
})(templateObject_6$
|
|
3102
|
+
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography.caption, function (_a) {
|
|
3103
3103
|
var $hasError = _a.$hasError;
|
|
3104
3104
|
return $hasError ? color.text.error : color.text.subdued;
|
|
3105
3105
|
}, spacing[2]);
|
|
@@ -3266,7 +3266,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3266
3266
|
id: helperId
|
|
3267
3267
|
}, helperText));
|
|
3268
3268
|
};
|
|
3269
|
-
var templateObject_1$
|
|
3269
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$6, templateObject_4$6, templateObject_5$5, templateObject_6$5;
|
|
3270
3270
|
|
|
3271
3271
|
var input = tokensData.component.input;
|
|
3272
3272
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -3275,7 +3275,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
3275
3275
|
},
|
|
3276
3276
|
displayName: "InputBase__StyledInputBase",
|
|
3277
3277
|
componentId: "sc-1bpf4e8-0"
|
|
3278
|
-
})(templateObject_1$
|
|
3278
|
+
})(templateObject_1$7 || (templateObject_1$7 = __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"
|
|
3279
3279
|
/**
|
|
3280
3280
|
* Base styled textarea with shared styling
|
|
3281
3281
|
*/])), input["default"].font, function (_a) {
|
|
@@ -3306,40 +3306,40 @@ var StyledTextAreaBase = styled.textarea.withConfig({
|
|
|
3306
3306
|
},
|
|
3307
3307
|
displayName: "InputBase__StyledTextAreaBase",
|
|
3308
3308
|
componentId: "sc-1bpf4e8-1"
|
|
3309
|
-
})(templateObject_2$
|
|
3310
|
-
var templateObject_1$
|
|
3309
|
+
})(templateObject_2$6 || (templateObject_2$6 = __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);
|
|
3310
|
+
var templateObject_1$7, templateObject_2$6;
|
|
3311
3311
|
|
|
3312
3312
|
React.createElement;
|
|
3313
|
-
var semantic$
|
|
3314
|
-
base$
|
|
3313
|
+
var semantic$4 = tokensData.semantic,
|
|
3314
|
+
base$4 = tokensData.base;
|
|
3315
3315
|
var StyledFieldContainer$2 = styled.div.withConfig({
|
|
3316
3316
|
displayName: "NumberInput__StyledFieldContainer",
|
|
3317
3317
|
componentId: "sc-qotc3w-0"
|
|
3318
|
-
})(templateObject_1$
|
|
3318
|
+
})(templateObject_1$6 || (templateObject_1$6 = __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]);
|
|
3319
3319
|
var StyledLabel$3 = styled.label.withConfig({
|
|
3320
3320
|
displayName: "NumberInput__StyledLabel",
|
|
3321
3321
|
componentId: "sc-qotc3w-1"
|
|
3322
|
-
})(templateObject_2$
|
|
3322
|
+
})(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$4.spacing[1], semantic$4.typography.label, semantic$4.color.text["default"], semantic$4.color.text.disabled);
|
|
3323
3323
|
var StyledRequiredIndicator$2 = styled.span.withConfig({
|
|
3324
3324
|
displayName: "NumberInput__StyledRequiredIndicator",
|
|
3325
3325
|
componentId: "sc-qotc3w-2"
|
|
3326
|
-
})(templateObject_3$
|
|
3326
|
+
})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$4.color.text.error, base$4.fontWeight[5]);
|
|
3327
3327
|
var StyledInputWrapper$1 = styled.div.withConfig({
|
|
3328
3328
|
displayName: "NumberInput__StyledInputWrapper",
|
|
3329
3329
|
componentId: "sc-qotc3w-3"
|
|
3330
|
-
})(templateObject_4$
|
|
3330
|
+
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n"])));
|
|
3331
3331
|
var StyledNumberInput = styled(StyledInputBase).withConfig({
|
|
3332
3332
|
displayName: "NumberInput__StyledNumberInput",
|
|
3333
3333
|
componentId: "sc-qotc3w-4"
|
|
3334
|
-
})(templateObject_5$
|
|
3334
|
+
})(templateObject_5$4 || (templateObject_5$4 = __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]);
|
|
3335
3335
|
var StyledStepperContainer = styled.div.withConfig({
|
|
3336
3336
|
displayName: "NumberInput__StyledStepperContainer",
|
|
3337
3337
|
componentId: "sc-qotc3w-5"
|
|
3338
|
-
})(templateObject_6$
|
|
3338
|
+
})(templateObject_6$4 || (templateObject_6$4 = __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]);
|
|
3339
3339
|
var StyledHelperText$2 = styled.div.withConfig({
|
|
3340
3340
|
displayName: "NumberInput__StyledHelperText",
|
|
3341
3341
|
componentId: "sc-qotc3w-6"
|
|
3342
|
-
})(templateObject_7$
|
|
3342
|
+
})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
3343
3343
|
/**
|
|
3344
3344
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
3345
3345
|
*
|
|
@@ -3362,9 +3362,9 @@ var StyledHelperText$2 = styled.div.withConfig({
|
|
|
3362
3362
|
* onChange={(newValue) => setValue(newValue)}
|
|
3363
3363
|
* />
|
|
3364
3364
|
* ```
|
|
3365
|
-
*/])), semantic$
|
|
3365
|
+
*/])), semantic$4.typography.small, function (_a) {
|
|
3366
3366
|
var $isError = _a.$isError;
|
|
3367
|
-
return $isError ? semantic$
|
|
3367
|
+
return $isError ? semantic$4.color.text.error : semantic$4.color.text.subdued;
|
|
3368
3368
|
});
|
|
3369
3369
|
/**
|
|
3370
3370
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
@@ -3554,7 +3554,7 @@ var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
3554
3554
|
}, error || helperText));
|
|
3555
3555
|
});
|
|
3556
3556
|
NumberInput.displayName = 'NumberInput';
|
|
3557
|
-
var templateObject_1$
|
|
3557
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$5, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$3;
|
|
3558
3558
|
|
|
3559
3559
|
React.createElement;
|
|
3560
3560
|
var PageTitleStyled = styled.div.withConfig({
|
|
@@ -3563,7 +3563,7 @@ var PageTitleStyled = styled.div.withConfig({
|
|
|
3563
3563
|
},
|
|
3564
3564
|
displayName: "PageTitle__PageTitleStyled",
|
|
3565
3565
|
componentId: "sc-16h256f-0"
|
|
3566
|
-
})(templateObject_1$
|
|
3566
|
+
})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
|
|
3567
3567
|
var $hasBackButton = _a.$hasBackButton;
|
|
3568
3568
|
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
3569
3569
|
});
|
|
@@ -3590,38 +3590,38 @@ var PageTitle = function PageTitle(_a) {
|
|
|
3590
3590
|
color: "subdued"
|
|
3591
3591
|
}, subtitle)));
|
|
3592
3592
|
};
|
|
3593
|
-
var templateObject_1$
|
|
3593
|
+
var templateObject_1$5;
|
|
3594
3594
|
|
|
3595
3595
|
React.createElement;
|
|
3596
|
-
var semantic$
|
|
3597
|
-
base$
|
|
3596
|
+
var semantic$3 = tokensData.semantic,
|
|
3597
|
+
base$3 = tokensData.base;
|
|
3598
3598
|
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
3599
3599
|
displayName: "PasswordField__StyledFieldContainer",
|
|
3600
3600
|
componentId: "sc-1p15zk0-0"
|
|
3601
|
-
})(templateObject_1$
|
|
3601
|
+
})(templateObject_1$4 || (templateObject_1$4 = __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]);
|
|
3602
3602
|
var StyledLabel$2 = styled.label.withConfig({
|
|
3603
3603
|
displayName: "PasswordField__StyledLabel",
|
|
3604
3604
|
componentId: "sc-1p15zk0-1"
|
|
3605
|
-
})(templateObject_2$
|
|
3605
|
+
})(templateObject_2$4 || (templateObject_2$4 = __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);
|
|
3606
3606
|
var StyledRequiredIndicator$1 = styled.span.withConfig({
|
|
3607
3607
|
displayName: "PasswordField__StyledRequiredIndicator",
|
|
3608
3608
|
componentId: "sc-1p15zk0-2"
|
|
3609
|
-
})(templateObject_3$
|
|
3609
|
+
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$3.color.text.error, base$3.fontWeight[5]);
|
|
3610
3610
|
var StyledHelperText$1 = styled.div.withConfig({
|
|
3611
3611
|
displayName: "PasswordField__StyledHelperText",
|
|
3612
3612
|
componentId: "sc-1p15zk0-3"
|
|
3613
|
-
})(templateObject_4$
|
|
3613
|
+
})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), semantic$3.typography.caption, function (_a) {
|
|
3614
3614
|
var $hasError = _a.$hasError;
|
|
3615
|
-
return $hasError ? semantic$
|
|
3615
|
+
return $hasError ? semantic$3.color.text.error : semantic$3.color.text.subdued;
|
|
3616
3616
|
});
|
|
3617
3617
|
var StyledInputWrapper = styled.div.withConfig({
|
|
3618
3618
|
displayName: "PasswordField__StyledInputWrapper",
|
|
3619
3619
|
componentId: "sc-1p15zk0-4"
|
|
3620
|
-
})(templateObject_5$
|
|
3620
|
+
})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
3621
3621
|
var StyledToggleButton = styled.div.withConfig({
|
|
3622
3622
|
displayName: "PasswordField__StyledToggleButton",
|
|
3623
3623
|
componentId: "sc-1p15zk0-5"
|
|
3624
|
-
})(templateObject_6$
|
|
3624
|
+
})(templateObject_6$3 || (templateObject_6$3 = __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"
|
|
3625
3625
|
/**
|
|
3626
3626
|
* PasswordField component for secure password input with visibility toggle
|
|
3627
3627
|
*
|
|
@@ -3633,7 +3633,7 @@ var StyledToggleButton = styled.div.withConfig({
|
|
|
3633
3633
|
* required
|
|
3634
3634
|
* />
|
|
3635
3635
|
* ```
|
|
3636
|
-
*/])), base$
|
|
3636
|
+
*/])), base$3.spacing[2]);
|
|
3637
3637
|
/**
|
|
3638
3638
|
* PasswordField component for secure password input with visibility toggle
|
|
3639
3639
|
*
|
|
@@ -3714,7 +3714,208 @@ var PasswordField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
3714
3714
|
}, helperText));
|
|
3715
3715
|
});
|
|
3716
3716
|
PasswordField.displayName = 'PasswordField';
|
|
3717
|
-
var templateObject_1$
|
|
3717
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$4, templateObject_5$3, templateObject_6$3;
|
|
3718
|
+
|
|
3719
|
+
React.createElement;
|
|
3720
|
+
var semantic$2 = tokensData.semantic,
|
|
3721
|
+
base$2 = tokensData.base;
|
|
3722
|
+
// Fade in animation for overlay
|
|
3723
|
+
var fadeIn = keyframes(templateObject_1$3 || (templateObject_1$3 = __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"
|
|
3724
|
+
// Slide animations for each position
|
|
3725
|
+
])));
|
|
3726
|
+
// Slide animations for each position
|
|
3727
|
+
var slideInRight = keyframes(templateObject_2$3 || (templateObject_2$3 = __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"])));
|
|
3728
|
+
var slideInLeft = keyframes(templateObject_3$3 || (templateObject_3$3 = __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"])));
|
|
3729
|
+
var slideInTop = keyframes(templateObject_4$3 || (templateObject_4$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"])));
|
|
3730
|
+
var slideInBottom = keyframes(templateObject_5$2 || (templateObject_5$2 = __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"])));
|
|
3731
|
+
var StyledOverlay = styled.div.withConfig({
|
|
3732
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3733
|
+
return !prop.startsWith('$');
|
|
3734
|
+
},
|
|
3735
|
+
displayName: "Sheet__StyledOverlay",
|
|
3736
|
+
componentId: "sc-8abisx-0"
|
|
3737
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n ", "\n display: ", ";\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n ", "\n display: ", ";\n"])), css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["animation: ", " 200ms ease-in-out;"], ["animation: ", " 200ms ease-in-out;"])), fadeIn), function (_a) {
|
|
3738
|
+
var $isOpen = _a.$isOpen;
|
|
3739
|
+
return $isOpen ? 'block' : 'none';
|
|
3740
|
+
});
|
|
3741
|
+
var StyledSheet = styled.div.withConfig({
|
|
3742
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3743
|
+
return !prop.startsWith('$');
|
|
3744
|
+
},
|
|
3745
|
+
displayName: "Sheet__StyledSheet",
|
|
3746
|
+
componentId: "sc-8abisx-1"
|
|
3747
|
+
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"], ["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), semantic$2.color.background["default"], base$2.shadow[4], function (_a) {
|
|
3748
|
+
var $position = _a.$position,
|
|
3749
|
+
$variant = _a.$variant,
|
|
3750
|
+
$width = _a.$width,
|
|
3751
|
+
$height = _a.$height;
|
|
3752
|
+
var isDrawer = $variant === 'drawer';
|
|
3753
|
+
var margin = isDrawer ? base$2.spacing[4] : '0';
|
|
3754
|
+
var borderRadius = isDrawer ? base$2.border.radius[3] : '0';
|
|
3755
|
+
switch ($position) {
|
|
3756
|
+
case 'right':
|
|
3757
|
+
return css(templateObject_8$2 || (templateObject_8$2 = __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);
|
|
3758
|
+
case 'left':
|
|
3759
|
+
return css(templateObject_9$1 || (templateObject_9$1 = __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);
|
|
3760
|
+
case 'top':
|
|
3761
|
+
return css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$2.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInTop);
|
|
3762
|
+
case 'bottom':
|
|
3763
|
+
return css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "], ["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$2.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInBottom);
|
|
3764
|
+
}
|
|
3765
|
+
}, base$2.spacing[2], semantic$2.color.background.subtle, semantic$2.color.border["default"], base$2.border.radius.circle, semantic$2.color.border.strong);
|
|
3766
|
+
var StyledSheetContent = styled.div.withConfig({
|
|
3767
|
+
displayName: "Sheet__StyledSheetContent",
|
|
3768
|
+
componentId: "sc-8abisx-2"
|
|
3769
|
+
})(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n padding: ", ";\n min-height: 100%;\n"], ["\n padding: ", ";\n min-height: 100%;\n"
|
|
3770
|
+
/**
|
|
3771
|
+
* Sheet component for side panels and drawers
|
|
3772
|
+
*
|
|
3773
|
+
* Provides a sliding panel that appears from any edge of the screen.
|
|
3774
|
+
* Can be used for navigation menus, filters, forms, or additional content.
|
|
3775
|
+
*
|
|
3776
|
+
* @example
|
|
3777
|
+
* ```tsx
|
|
3778
|
+
* // Right-positioned sheet (default)
|
|
3779
|
+
* <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
|
|
3780
|
+
* <h2>Sheet Content</h2>
|
|
3781
|
+
* <p>Your content here</p>
|
|
3782
|
+
* </Sheet>
|
|
3783
|
+
*
|
|
3784
|
+
* // Drawer variant from bottom
|
|
3785
|
+
* <Sheet
|
|
3786
|
+
* isOpen={isOpen}
|
|
3787
|
+
* onClose={() => setIsOpen(false)}
|
|
3788
|
+
* position="bottom"
|
|
3789
|
+
* variant="drawer"
|
|
3790
|
+
* height="60vh"
|
|
3791
|
+
* >
|
|
3792
|
+
* <h2>Mobile Menu</h2>
|
|
3793
|
+
* </Sheet>
|
|
3794
|
+
* ```
|
|
3795
|
+
*/])), base$2.spacing[6]);
|
|
3796
|
+
/**
|
|
3797
|
+
* Sheet component for side panels and drawers
|
|
3798
|
+
*
|
|
3799
|
+
* Provides a sliding panel that appears from any edge of the screen.
|
|
3800
|
+
* Can be used for navigation menus, filters, forms, or additional content.
|
|
3801
|
+
*
|
|
3802
|
+
* @example
|
|
3803
|
+
* ```tsx
|
|
3804
|
+
* // Right-positioned sheet (default)
|
|
3805
|
+
* <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
|
|
3806
|
+
* <h2>Sheet Content</h2>
|
|
3807
|
+
* <p>Your content here</p>
|
|
3808
|
+
* </Sheet>
|
|
3809
|
+
*
|
|
3810
|
+
* // Drawer variant from bottom
|
|
3811
|
+
* <Sheet
|
|
3812
|
+
* isOpen={isOpen}
|
|
3813
|
+
* onClose={() => setIsOpen(false)}
|
|
3814
|
+
* position="bottom"
|
|
3815
|
+
* variant="drawer"
|
|
3816
|
+
* height="60vh"
|
|
3817
|
+
* >
|
|
3818
|
+
* <h2>Mobile Menu</h2>
|
|
3819
|
+
* </Sheet>
|
|
3820
|
+
* ```
|
|
3821
|
+
*/
|
|
3822
|
+
var Sheet = function Sheet(_a) {
|
|
3823
|
+
var isOpen = _a.isOpen,
|
|
3824
|
+
onClose = _a.onClose,
|
|
3825
|
+
_b = _a.position,
|
|
3826
|
+
position = _b === void 0 ? 'right' : _b,
|
|
3827
|
+
_c = _a.variant,
|
|
3828
|
+
variant = _c === void 0 ? 'sheet' : _c,
|
|
3829
|
+
_d = _a.width,
|
|
3830
|
+
width = _d === void 0 ? '400px' : _d,
|
|
3831
|
+
_e = _a.height,
|
|
3832
|
+
height = _e === void 0 ? '400px' : _e,
|
|
3833
|
+
children = _a.children,
|
|
3834
|
+
_f = _a.closeOnOverlayClick,
|
|
3835
|
+
closeOnOverlayClick = _f === void 0 ? true : _f,
|
|
3836
|
+
_g = _a.closeOnEscape,
|
|
3837
|
+
closeOnEscape = _g === void 0 ? true : _g,
|
|
3838
|
+
title = _a.title,
|
|
3839
|
+
dataTestId = _a["data-testid"],
|
|
3840
|
+
ariaLabel = _a["aria-label"],
|
|
3841
|
+
ariaDescribedBy = _a["aria-describedby"];
|
|
3842
|
+
var sheetRef = useRef(null);
|
|
3843
|
+
var previousFocusRef = useRef(null);
|
|
3844
|
+
// Focus management
|
|
3845
|
+
useEffect(function () {
|
|
3846
|
+
if (isOpen) {
|
|
3847
|
+
// Store previous focus
|
|
3848
|
+
previousFocusRef.current = document.activeElement;
|
|
3849
|
+
// Focus sheet
|
|
3850
|
+
setTimeout(function () {
|
|
3851
|
+
var _a;
|
|
3852
|
+
(_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
3853
|
+
}, 100); // Small delay to allow animation to start
|
|
3854
|
+
// Prevent body scroll
|
|
3855
|
+
document.body.style.overflow = 'hidden';
|
|
3856
|
+
} else {
|
|
3857
|
+
// Restore previous focus
|
|
3858
|
+
if (previousFocusRef.current) {
|
|
3859
|
+
previousFocusRef.current.focus();
|
|
3860
|
+
}
|
|
3861
|
+
// Restore body scroll
|
|
3862
|
+
document.body.style.overflow = '';
|
|
3863
|
+
}
|
|
3864
|
+
return function () {
|
|
3865
|
+
document.body.style.overflow = '';
|
|
3866
|
+
};
|
|
3867
|
+
}, [isOpen]);
|
|
3868
|
+
// Keyboard handling
|
|
3869
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
3870
|
+
var _a;
|
|
3871
|
+
if (closeOnEscape && event.key === 'Escape') {
|
|
3872
|
+
event.preventDefault();
|
|
3873
|
+
onClose();
|
|
3874
|
+
}
|
|
3875
|
+
// Focus trap
|
|
3876
|
+
if (event.key === 'Tab') {
|
|
3877
|
+
var focusableElements = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
3878
|
+
if (!focusableElements || focusableElements.length === 0) return;
|
|
3879
|
+
var firstElement = focusableElements[0];
|
|
3880
|
+
var lastElement = focusableElements[focusableElements.length - 1];
|
|
3881
|
+
if (event.shiftKey && document.activeElement === firstElement) {
|
|
3882
|
+
event.preventDefault();
|
|
3883
|
+
lastElement.focus();
|
|
3884
|
+
} else if (!event.shiftKey && document.activeElement === lastElement) {
|
|
3885
|
+
event.preventDefault();
|
|
3886
|
+
firstElement.focus();
|
|
3887
|
+
}
|
|
3888
|
+
}
|
|
3889
|
+
};
|
|
3890
|
+
// Overlay click handling
|
|
3891
|
+
var handleOverlayClick = function handleOverlayClick(event) {
|
|
3892
|
+
if (closeOnOverlayClick && event.target === event.currentTarget) {
|
|
3893
|
+
onClose();
|
|
3894
|
+
}
|
|
3895
|
+
};
|
|
3896
|
+
if (!isOpen) return null;
|
|
3897
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOverlay, {
|
|
3898
|
+
$isOpen: isOpen,
|
|
3899
|
+
onClick: handleOverlayClick,
|
|
3900
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'sheet-overlay'
|
|
3901
|
+
}), /*#__PURE__*/React.createElement(StyledSheet, {
|
|
3902
|
+
ref: sheetRef,
|
|
3903
|
+
role: "dialog",
|
|
3904
|
+
"aria-modal": "true",
|
|
3905
|
+
"aria-label": ariaLabel || title || 'Sheet dialog',
|
|
3906
|
+
"aria-describedby": ariaDescribedBy,
|
|
3907
|
+
tabIndex: -1,
|
|
3908
|
+
$position: position,
|
|
3909
|
+
$variant: variant,
|
|
3910
|
+
$width: width,
|
|
3911
|
+
$height: height,
|
|
3912
|
+
$isOpen: isOpen,
|
|
3913
|
+
onKeyDown: handleKeyDown,
|
|
3914
|
+
"data-testid": dataTestId
|
|
3915
|
+
}, /*#__PURE__*/React.createElement(StyledSheetContent, null, children)));
|
|
3916
|
+
};
|
|
3917
|
+
Sheet.displayName = 'Sheet';
|
|
3918
|
+
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, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
|
|
3718
3919
|
|
|
3719
3920
|
React.createElement;
|
|
3720
3921
|
var semantic$1 = tokensData.semantic,
|
|
@@ -4406,5 +4607,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
4406
4607
|
// Main design system exports
|
|
4407
4608
|
var tokens = tokensData;
|
|
4408
4609
|
|
|
4409
|
-
export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, Slider, Stack, StyledInputBase, StyledTextAreaBase, Tag, TextField, Typography, iconsData, tokens };
|
|
4610
|
+
export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, Sheet, Slider, Stack, StyledInputBase, StyledTextAreaBase, Tag, TextField, Typography, iconsData, tokens };
|
|
4410
4611
|
//# sourceMappingURL=index.esm.js.map
|