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