@common-origin/design-system 1.14.0 → 1.15.2
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/Alert/Alert.d.ts +54 -0
- package/dist/components/molecules/Alert/index.d.ts +1 -0
- package/dist/components/molecules/List/List.d.ts +29 -0
- package/dist/components/molecules/List/ListItem.d.ts +73 -0
- package/dist/components/molecules/List/index.d.ts +4 -0
- package/dist/components/molecules/index.d.ts +2 -0
- package/dist/index.esm.js +518 -136
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +520 -135
- package/dist/index.js.map +1 -1
- package/dist/lib/errorReporting.d.ts +24 -0
- package/dist/page-components/ErrorBoundaries.d.ts +16 -0
- package/dist/page-components/ErrorBoundary.d.ts +20 -0
- package/dist/page-components/Footer/Footer.d.ts +8 -0
- package/dist/page-components/Footer/index.d.ts +1 -0
- package/dist/page-components/HeroBanner/HeroBanner.d.ts +10 -0
- package/dist/page-components/HeroBanner/index.d.ts +1 -0
- package/dist/page-components/Meta.d.ts +2 -0
- package/dist/page-components/Navigation.d.ts +2 -0
- package/dist/page-components/PageLayout.d.ts +7 -0
- package/dist/page-components/index.d.ts +8 -0
- package/dist/styles/icons.json +144 -112
- package/dist/types/icons.d.ts +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$8 = {
|
|
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$a = {
|
|
641
641
|
border: {
|
|
642
642
|
"default": "0.0625rem solid #e9ecef",
|
|
643
643
|
subtle: "0.0625rem solid #dee2e6",
|
|
@@ -774,9 +774,9 @@ var semantic$7 = {
|
|
|
774
774
|
$ref: "./semantic/index.json"
|
|
775
775
|
};
|
|
776
776
|
var tokensData = {
|
|
777
|
-
base: base$
|
|
777
|
+
base: base$8,
|
|
778
778
|
component: component,
|
|
779
|
-
semantic: semantic$
|
|
779
|
+
semantic: semantic$a
|
|
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$y || (templateObject_1$y = __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$l || (templateObject_2$l = __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$i || (templateObject_3$i = __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$y, templateObject_2$l, templateObject_3$i;
|
|
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$x || (templateObject_1$x = __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$x;
|
|
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$w || (templateObject_1$w = __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$k || (templateObject_2$k = __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$h || (templateObject_3$h = __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$e || (templateObject_4$e = __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$w, templateObject_2$k, templateObject_3$h, templateObject_4$e;
|
|
1080
1080
|
|
|
1081
1081
|
React.createElement;
|
|
1082
1082
|
var StyledBox = styled.div.withConfig({
|
|
@@ -1088,19 +1088,19 @@ 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$v || (templateObject_1$v = __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$j || (templateObject_2$j = __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$g || (templateObject_3$g = __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$d || (templateObject_4$d = __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$a || (templateObject_5$a = __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$9 || (templateObject_6$9 = __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$7 || (templateObject_7$7 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1104
1104
|
}, function (props) {
|
|
1105
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) {
|
|
@@ -1278,12 +1278,16 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1278
1278
|
}, rest), children);
|
|
1279
1279
|
};
|
|
1280
1280
|
var Box = BoxTransform;
|
|
1281
|
-
var templateObject_1$
|
|
1281
|
+
var templateObject_1$v, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, 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",
|
|
1285
1285
|
name: "add"
|
|
1286
1286
|
};
|
|
1287
|
+
var addRing = {
|
|
1288
|
+
path: "M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z M11 8H13V16H11V8Z M8 11V13H16V11H8Z",
|
|
1289
|
+
name: "addRing"
|
|
1290
|
+
};
|
|
1287
1291
|
var arrowDown = {
|
|
1288
1292
|
path: "m18.707 9.707-1.414-1.414L12 13.586 6.707 8.293 5.293 9.707 12 16.414l6.707-6.707Z",
|
|
1289
1293
|
name: "arrowDown"
|
|
@@ -1300,6 +1304,10 @@ var arrowRight = {
|
|
|
1300
1304
|
path: "M8.29297 6.70703L13.5859 12L8.29297 17.293L9.70703 18.707L16.4141 12L9.70703 5.29297L8.29297 6.70703Z",
|
|
1301
1305
|
name: "arrowRight"
|
|
1302
1306
|
};
|
|
1307
|
+
var bell = {
|
|
1308
|
+
path: "M12.0001 2C15.3561 2 18.1753 4.52384 18.546 7.85938L18.7979 10.125C18.8012 10.1546 18.8024 10.1676 18.8038 10.1797C18.9166 11.1628 19.2372 12.1106 19.7432 12.9609C19.7494 12.9714 19.7553 12.9824 19.7706 13.0078L20.3487 13.9707C20.5997 14.3891 20.829 14.7681 20.9795 15.0879C21.1276 15.4024 21.2852 15.8285 21.209 16.3115C21.1337 16.789 20.8882 17.2229 20.5176 17.5332C20.1426 17.8471 19.6956 17.931 19.3497 17.9658C18.998 18.0012 18.5554 18 18.0674 18H5.93268C5.44476 18 5.00211 18.0012 4.65045 17.9658C4.30456 17.931 3.85755 17.8471 3.48248 17.5332C3.1119 17.2229 2.86641 16.789 2.79107 16.3115C2.7149 15.8285 2.87247 15.4024 3.02057 15.0879C3.17116 14.7681 3.40038 14.3891 3.65143 13.9707L4.22955 13.0078C4.24481 12.9824 4.25068 12.9714 4.25689 12.9609C4.76296 12.1106 5.08348 11.1628 5.19635 10.1797C5.19773 10.1676 5.19892 10.1546 5.20221 10.125L5.45416 7.85938C5.82477 4.52384 8.644 2 12.0001 2ZM12.0001 4C9.6631 4 7.69954 5.75741 7.44146 8.08008L7.18951 10.3457C7.18638 10.3739 7.18457 10.3907 7.18268 10.4072C7.03761 11.6714 6.62638 12.8909 5.97564 13.9844C5.96724 13.9985 5.95885 14.013 5.94439 14.0371L5.36627 15C5.09277 15.4558 4.92766 15.7334 4.83014 15.9404C4.82533 15.9506 4.82155 15.9606 4.81744 15.9697C4.82787 15.971 4.83877 15.9744 4.85064 15.9756C5.07838 15.9985 5.40111 16 5.93268 16H18.0674C18.599 16 18.9217 15.9985 19.1495 15.9756C19.161 15.9744 19.1716 15.9709 19.1817 15.9697C19.1776 15.9607 19.1747 15.9505 19.17 15.9404C19.0725 15.7334 18.9074 15.4558 18.6338 15L18.0557 14.0371C18.0413 14.013 18.0329 13.9985 18.0245 13.9844C17.3737 12.8909 16.9625 11.6714 16.8174 10.4072C16.8155 10.3907 16.8137 10.3739 16.8106 10.3457L16.5587 8.08008C16.3006 5.75741 14.337 4 12.0001 4Z M12.0001 22C10.9897 22 10.0894 21.4972 9.419 20.7256C8.75348 19.9595 8.31404 18.9367 8.11822 17.8408C8.0211 17.2971 8.38314 16.7778 8.92682 16.6807C9.47038 16.5837 9.98987 16.9457 10.087 17.4893C10.233 18.3066 10.5467 18.9742 10.9288 19.4141C11.3063 19.8486 11.6896 20 12.0001 20C12.3106 20 12.6938 19.8486 13.0713 19.4141C13.4535 18.9742 13.7671 18.3066 13.9131 17.4893C14.0102 16.9457 14.5297 16.5837 15.0733 16.6807C15.617 16.7778 15.979 17.2971 15.8819 17.8408C15.6861 18.9367 15.2466 19.9595 14.5811 20.7256C13.9108 21.4972 13.0104 22 12.0001 22Z",
|
|
1309
|
+
name: "bell"
|
|
1310
|
+
};
|
|
1303
1311
|
var back = {
|
|
1304
1312
|
path: "m5 12-.707-.707-.707.707.707.707L5 12Zm12 1a1 1 0 1 0 0-2v2ZM8.293 7.293l-4 4 1.414 1.414 4-4-1.414-1.414Zm-4 5.414 4 4 1.414-1.414-4-4-1.414 1.414ZM5 13h12v-2H5v2Z",
|
|
1305
1313
|
name: "back"
|
|
@@ -1320,10 +1328,18 @@ var check = {
|
|
|
1320
1328
|
path: "M9.16699 18.375L4.40039 14.7998L5.59961 13.2002L8.83301 15.625L17.2256 5.36719L18.7744 6.63281L9.16699 18.375Z",
|
|
1321
1329
|
name: "check"
|
|
1322
1330
|
};
|
|
1331
|
+
var checkRing = {
|
|
1332
|
+
path: "M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z M11.0674 16.4814L7.29297 12.707L8.70703 11.293L10.9326 13.5176L15.2314 8.35937L16.7686 9.64062L11.0674 16.4814Z",
|
|
1333
|
+
name: "checkRing"
|
|
1334
|
+
};
|
|
1323
1335
|
var close = {
|
|
1324
1336
|
path: "M19.4141 6L13.4141 12L19.4141 18L18 19.4141L12 13.4141L6 19.4141L4.58594 18L10.5859 12L4.58594 6L6 4.58594L12 10.5859L18 4.58594L19.4141 6Z",
|
|
1325
1337
|
name: "close"
|
|
1326
1338
|
};
|
|
1339
|
+
var crossCircle = {
|
|
1340
|
+
path: "M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z M14.293 8.2925L15.7073 9.70672L9.7072 15.7068L8.29299 14.2926L14.293 8.2925Z M9.70706 8.29284L8.29284 9.70706L14.2929 15.7071L15.7071 14.2929L9.70706 8.29284Z",
|
|
1341
|
+
name: "crossCircle"
|
|
1342
|
+
};
|
|
1327
1343
|
var directionRight = {
|
|
1328
1344
|
path: "M20 12L20.7071 11.2929L21.4142 12L20.7071 12.7071L20 12ZM5 13C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11V13ZM14 6L14.7071 5.29289L20.7071 11.2929L20 12L19.2929 12.7071L13.2929 6.70711L14 6ZM20 12L20.7071 12.7071L14.7071 18.7071L14 18L13.2929 17.2929L19.2929 11.2929L20 12ZM20 12V13H5V12V11H20V12Z",
|
|
1329
1345
|
name: "directionRight"
|
|
@@ -1332,6 +1348,14 @@ var filter = {
|
|
|
1332
1348
|
path: "M20 7C20.5523 7 21 7.44771 21 8C21 8.55228 20.5523 9 20 9H11C10.4477 9 10 8.55228 10 8C10 7.44772 10.4477 7 11 7L20 7Z M14 15C14.5523 15 15 15.4477 15 16C15 16.5523 14.5523 17 14 17L4 17C3.44772 17 3 16.5523 3 16C3 15.4477 3.44772 15 4 15L14 15Z M7 10C8.10457 10 9 9.10457 9 8C9 6.89543 8.10457 6 7 6C5.89543 6 5 6.89543 5 8C5 9.10457 5.89543 10 7 10ZM7 12C4.79086 12 3 10.2091 3 8C3 5.79086 4.79086 4 7 4C9.20914 4 11 5.79086 11 8C11 10.2091 9.20914 12 7 12Z M17 18C18.1046 18 19 17.1046 19 16C19 14.8954 18.1046 14 17 14C15.8954 14 15 14.8954 15 16C15 17.1046 15.8954 18 17 18ZM17 20C14.7909 20 13 18.2091 13 16C13 13.7909 14.7909 12 17 12C19.2091 12 21 13.7909 21 16C21 18.2091 19.2091 20 17 20Z",
|
|
1333
1349
|
name: "filter"
|
|
1334
1350
|
};
|
|
1351
|
+
var info = {
|
|
1352
|
+
path: "M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z M12.5 7.5C12.5 7.77614 12.2761 8 12 8C11.7239 8 11.5 7.77614 11.5 7.5C11.5 7.22386 11.7239 7 12 7C12.2761 7 12.5 7.22386 12.5 7.5Z M11 7.5C11 6.94772 11.4477 6.5 12 6.5C12.5523 6.5 13 6.94772 13 7.5C13 8.05228 12.5523 8.5 12 8.5C11.4477 8.5 11 8.05228 11 7.5Z M13 10V17H11V10H13Z",
|
|
1353
|
+
name: "info"
|
|
1354
|
+
};
|
|
1355
|
+
var lamp = {
|
|
1356
|
+
path: "M17 10C17 7.23858 14.7614 5 12 5C9.23858 5 7 7.23858 7 10C7 11.6358 7.78448 13.0881 9.00195 14.002C9.20009 14.1507 9.44705 14.3272 9.63086 14.5303L9.70605 14.6191L9.82812 14.7979C9.93635 14.9783 10.0057 15.1588 10.0645 15.3008C10.5964 16.586 10.9052 17.9546 10.9795 19.3486C11.6384 19.587 12.3606 19.5868 13.0195 19.3486C13.0936 17.9549 13.4029 16.586 13.9346 15.3008C14.0128 15.1115 14.1108 14.8541 14.293 14.6191L14.3682 14.5303C14.552 14.3271 14.7989 14.1507 14.9971 14.002C16.215 13.0881 17 11.636 17 10ZM19 10C19 12.2922 17.8968 14.3264 16.1973 15.6016C16.0466 15.7146 15.9587 15.7812 15.8965 15.832C15.887 15.8398 15.8793 15.8462 15.873 15.8516C15.8655 15.8676 15.856 15.8906 15.8418 15.9238C15.8254 15.9623 15.8066 16.0066 15.7822 16.0654C15.2949 17.2435 15.0287 18.5048 15.002 19.7852C14.9914 20.2889 14.7081 20.7641 14.2363 21C12.8287 21.7038 11.1713 21.7038 9.76367 21C9.29185 20.7641 9.00862 20.2889 8.99805 19.7852C8.9712 18.5049 8.70449 17.2438 8.2168 16.0654C8.19246 16.0066 8.17364 15.9622 8.15723 15.9238C8.14292 15.8904 8.13257 15.8676 8.125 15.8516C8.11886 15.8463 8.1117 15.8395 8.10254 15.832C8.04038 15.7812 7.95236 15.7146 7.80176 15.6016C6.10253 14.3262 5 12.2918 5 10C5 6.13401 8.13401 3 12 3C15.866 3 19 6.13401 19 10Z M15.5481 16.8311C13.4007 18.2665 10.5998 18.2665 8.45239 16.8311L9.56372 15.1689C11.0384 16.1546 12.9621 16.1546 14.4368 15.1689L15.5481 16.8311Z",
|
|
1357
|
+
name: "lamp"
|
|
1358
|
+
};
|
|
1335
1359
|
var menu = {
|
|
1336
1360
|
path: "M4 7a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 5a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm0 5a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z",
|
|
1337
1361
|
name: "menu"
|
|
@@ -1364,6 +1388,10 @@ var link = {
|
|
|
1364
1388
|
path: "M10 7C10.5523 7 11 7.44772 11 8C11 8.55228 10.5523 9 10 9H7C5.34315 9 4 10.3431 4 12C4 13.6569 5.34315 15 7 15H10C10.5523 15 11 15.4477 11 16C11 16.5523 10.5523 17 10 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H10Z M17 7C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17H14C13.4477 17 13 16.5523 13 16C13 15.4477 13.4477 15 14 15H17C18.6569 15 20 13.6569 20 12C20 10.3431 18.6569 9 17 9H14C13.4477 9 13 8.55228 13 8C13 7.44772 13.4477 7 14 7H17Z M16 11C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11H16Z",
|
|
1365
1389
|
name: "link"
|
|
1366
1390
|
};
|
|
1391
|
+
var remove = {
|
|
1392
|
+
path: "M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z M16.5 11V13H7.5V11H16.5Z",
|
|
1393
|
+
name: "remove"
|
|
1394
|
+
};
|
|
1367
1395
|
var star = {
|
|
1368
1396
|
path: "M12.1694 2.69385C12.9932 2.77396 13.4716 3.43132 13.7543 3.92432C14.0789 4.49022 14.4038 5.30605 14.7846 6.25537L14.8207 6.34619C15.0505 6.91906 15.1961 7.27937 15.3344 7.54248C15.4618 7.78468 15.545 7.86702 15.6088 7.91455C15.6727 7.96207 15.7762 8.01756 16.0454 8.06982C16.3371 8.12644 16.723 8.16226 17.3374 8.21729L17.5532 8.23682C18.4922 8.32092 19.3095 8.39132 19.9086 8.53271C20.4448 8.65928 21.1605 8.92163 21.4799 9.64404L21.5385 9.79443L21.5825 9.94971C21.7646 10.7185 21.3522 11.3598 21.0014 11.7847C20.6095 12.2594 20.0015 12.8094 19.3041 13.4438L18.8217 13.8833C18.4435 14.2274 18.2065 14.4438 18.0385 14.6255C17.8832 14.7936 17.8357 14.8811 17.812 14.9419C17.7962 14.9823 17.7833 15.0238 17.7729 15.0659C17.7573 15.1293 17.7457 15.2284 17.7758 15.4556C17.8084 15.7009 17.877 16.014 17.9877 16.5132L18.0541 16.814C18.2456 17.6769 18.4083 18.4052 18.4711 18.9624C18.5264 19.4519 18.5632 20.1921 18.0688 20.7427C17.8119 21.0287 17.4777 21.2343 17.1069 21.3354C16.393 21.5302 15.7481 21.166 15.3354 20.897C14.8658 20.5908 14.2881 20.1183 13.603 19.5601C13.1257 19.1711 12.8201 18.924 12.5707 18.7573C12.3364 18.6006 12.226 18.5671 12.1577 18.5562C12.0532 18.5395 11.9467 18.5395 11.8422 18.5562C11.7738 18.5671 11.6635 18.6006 11.4291 18.7573C11.1799 18.924 10.8752 19.1712 10.3979 19.5601C9.7126 20.1185 9.13421 20.5907 8.6645 20.897C8.2518 21.166 7.60685 21.5302 6.89301 21.3354C6.52221 21.2343 6.18793 21.0286 5.9311 20.7427C5.43682 20.1921 5.47353 19.4519 5.52876 18.9624C5.59163 18.4052 5.75429 17.6769 5.94575 16.814L6.01313 16.5132C6.12388 16.014 6.19251 15.7009 6.22505 15.4556C6.25517 15.2284 6.24262 15.1293 6.227 15.0659C6.21659 15.0238 6.20372 14.9823 6.18794 14.9419C6.16419 14.8811 6.11677 14.7936 5.96137 14.6255C5.79337 14.4437 5.55643 14.2274 5.17817 13.8833L4.69575 13.4438C3.9984 12.8094 3.39042 12.2594 2.99848 11.7847C2.62437 11.3315 2.17967 10.632 2.46137 9.79443L2.51997 9.64404C2.83942 8.92145 3.55601 8.65926 4.09223 8.53271C4.69142 8.39138 5.50869 8.32091 6.4477 8.23682L6.66255 8.21729C7.27717 8.16224 7.66376 8.12647 7.95551 8.06982C8.22431 8.01759 8.32719 7.96204 8.39106 7.91455C8.45493 7.86704 8.53808 7.78477 8.66548 7.54248C8.80378 7.27937 8.94936 6.91906 9.17915 6.34619L9.21528 6.25537C9.59606 5.3061 9.92105 4.49022 10.2456 3.92432C10.5472 3.39847 11.0719 2.68604 12.0004 2.68604L12.1694 2.69385ZM11.9809 4.91943C11.7432 5.334 11.4773 5.98839 11.0717 6.99951L11.0356 7.09131C10.8211 7.62611 10.633 8.09725 10.436 8.47217C10.2282 8.86755 9.97336 9.23085 9.58442 9.52002C9.19552 9.80914 8.77481 9.94855 8.33637 10.0337C7.9205 10.1144 7.41442 10.1581 6.84028 10.2095L6.62544 10.229C5.61908 10.3191 4.97689 10.3795 4.55122 10.48C4.54116 10.4824 4.53136 10.4845 4.52192 10.4868C4.52814 10.4945 4.53377 10.5031 4.54048 10.5112C4.81896 10.8485 5.29492 11.2843 6.04243 11.9644L6.52387 12.4038C6.87706 12.7251 7.18977 13.008 7.43012 13.2681C7.68276 13.5414 7.90359 13.8383 8.05024 14.2134C8.0979 14.3353 8.13804 14.4603 8.16938 14.5874C8.2658 14.9786 8.25641 15.3491 8.20747 15.7183C8.16092 16.0693 8.06871 16.4806 7.96528 16.9468L7.89887 17.2466C7.69668 18.1579 7.5641 18.7614 7.51606 19.187C7.5133 19.2115 7.51318 19.2347 7.51118 19.2563C7.52986 19.2447 7.55171 19.2349 7.5727 19.2212C7.9315 18.9872 8.41071 18.5988 9.13423 18.0093C9.58206 17.6444 9.97081 17.3257 10.3168 17.0942C10.6777 16.8529 11.0642 16.6555 11.5268 16.5815C11.8402 16.5315 12.1597 16.5315 12.4731 16.5815C12.9358 16.6554 13.3222 16.8529 13.6831 17.0942C14.0291 17.3256 14.4178 17.6444 14.8657 18.0093C15.5891 18.5988 16.0684 18.9872 16.4272 19.2212C16.4479 19.2347 16.4693 19.2448 16.4877 19.2563C16.4857 19.2348 16.4866 19.2115 16.4838 19.187C16.4358 18.7614 16.3042 18.1579 16.102 17.2466L16.0346 16.9468C15.9312 16.4806 15.839 16.0693 15.7924 15.7183C15.7435 15.3491 15.7341 14.9786 15.8305 14.5874C15.8619 14.4603 15.902 14.3353 15.9497 14.2134C16.0963 13.8383 16.3172 13.5414 16.5698 13.2681C16.8101 13.0081 17.1228 12.7251 17.476 12.4038L17.9584 11.9644C18.7057 11.2845 19.181 10.8485 19.4594 10.5112C19.466 10.5033 19.4709 10.4944 19.477 10.4868C19.4679 10.4846 19.4584 10.4823 19.4487 10.48C19.023 10.3795 18.3808 10.3191 17.3745 10.229L17.1596 10.2095C16.5855 10.1581 16.0794 10.1144 15.6635 10.0337C15.2251 9.94854 14.8043 9.80913 14.4155 9.52002C14.0266 9.23086 13.7717 8.86753 13.5639 8.47217C13.3669 8.09725 13.1788 7.62609 12.9643 7.09131L12.9282 6.99951C12.5226 5.98836 12.2567 5.33399 12.019 4.91943C12.0127 4.90849 12.0054 4.89835 11.9995 4.88818C11.9936 4.89819 11.9871 4.90868 11.9809 4.91943Z",
|
|
1369
1397
|
name: "star"
|
|
@@ -1376,36 +1404,46 @@ var table = {
|
|
|
1376
1404
|
path: "M20 10H16V19H19C19.4995 19 19.7737 18.9982 19.9639 18.9727C19.9662 18.9724 19.9685 18.971 19.9707 18.9707C19.971 18.9685 19.9724 18.9662 19.9727 18.9639C19.9982 18.7737 20 18.4995 20 18V10ZM22 18C22 18.4431 22.0018 18.876 21.9541 19.2305C21.9026 19.6137 21.7773 20.0509 21.4141 20.4141C21.0509 20.7773 20.6137 20.9026 20.2305 20.9541C19.876 21.0018 19.4431 21 19 21H14V8.00001H22V18Z M10 8.00001V21H5.00001C4.55687 21 4.12397 21.0018 3.76954 20.9541C3.38634 20.9026 2.94916 20.7773 2.58595 20.4141C2.22273 20.0509 2.09743 19.6137 2.04591 19.2305C1.99825 18.876 2.00001 18.4431 2.00001 18V8.00001H10ZM4.00001 18C4.00001 18.4995 4.00181 18.7737 4.02735 18.9639C4.02766 18.9661 4.02803 18.9685 4.02833 18.9707C4.03085 18.9711 4.03351 18.9723 4.03614 18.9727C4.22633 18.9982 4.50051 19 5.00001 19H8.00001V10H4.00001V18Z M16 8.00001V21H8.00001V8.00001H16ZM10 19H14V10H10V19Z M20 6.00001C20 5.50051 19.9982 5.22633 19.9727 5.03614C19.9723 5.03351 19.9711 5.03085 19.9707 5.02833C19.9685 5.02803 19.9661 5.02766 19.9639 5.02735C19.7737 5.00181 19.4995 5.00001 19 5.00001H5.00001C4.50051 5.00001 4.22633 5.00181 4.03614 5.02735C4.03355 5.0277 4.03081 5.02798 4.02833 5.02833C4.02798 5.03081 4.0277 5.03355 4.02735 5.03614C4.00181 5.22633 4.00001 5.50051 4.00001 6.00001V8.00001H20V6.00001ZM22 10H2.00001V6.00001C2.00001 5.55687 1.99825 5.12397 2.04591 4.76954C2.09743 4.38634 2.22273 3.94916 2.58595 3.58595C2.94916 3.22273 3.38634 3.09743 3.76954 3.04591C4.12397 2.99825 4.55687 3.00001 5.00001 3.00001H19C19.4431 3.00001 19.876 2.99825 20.2305 3.04591C20.6137 3.09743 21.0509 3.22273 21.4141 3.58595C21.7773 3.94916 21.9026 4.38634 21.9541 4.76954C22.0018 5.12397 22 5.55687 22 6.00001V10Z",
|
|
1377
1405
|
name: "table"
|
|
1378
1406
|
};
|
|
1407
|
+
var trash = {
|
|
1408
|
+
path: "M9 12C9 11.4477 9.44771 11 10 11C10.5523 11 11 11.4477 11 12L11 15C11 15.5523 10.5523 16 10 16C9.44772 16 9 15.5523 9 15L9 12Z M13 12C13 11.4477 13.4477 11 14 11C14.5523 11 15 11.4477 15 12V15C15 15.5523 14.5523 16 14 16C13.4477 16 13 15.5523 13 15V12Z M17 10C17 9.54786 16.9996 9.15869 17.0215 8.83789C17.0406 8.55751 17.0827 8.278 17.1768 8H6.82324C6.91733 8.278 6.95939 8.55751 6.97852 8.83789C7.00039 9.15869 7 9.54786 7 10V16C7 16.9711 7.00227 17.599 7.06445 18.0615C7.12277 18.4951 7.21686 18.6309 7.29297 18.707C7.36908 18.7831 7.50493 18.8772 7.93848 18.9355C8.40098 18.9977 9.02892 19 10 19H14C14.9711 19 15.599 18.9977 16.0615 18.9355C16.4951 18.8772 16.6309 18.7831 16.707 18.707C16.7831 18.6309 16.8772 18.4951 16.9355 18.0615C16.9977 17.599 17 16.9711 17 16V10ZM19 16C19 16.9145 19.0022 17.7014 18.918 18.3281C18.8298 18.9835 18.6307 19.6115 18.1211 20.1211C17.6115 20.6307 16.9835 20.8298 16.3281 20.918C15.7014 21.0022 14.9145 21 14 21H10C9.08546 21 8.29862 21.0022 7.67188 20.918C7.01647 20.8298 6.38849 20.6307 5.87891 20.1211C5.36933 19.6115 5.17018 18.9835 5.08203 18.3281C4.99777 17.7014 5 16.9145 5 16V10C5 9.52038 4.99957 9.21061 4.9834 8.97363C4.96784 8.74572 4.94106 8.65879 4.92383 8.61719C4.82234 8.37226 4.62774 8.17766 4.38281 8.07617C4.34121 8.05894 4.25428 8.03216 4.02637 8.0166C3.78939 8.00043 3.47962 8 3 8V6H21V8C20.5204 8 20.2106 8.00043 19.9736 8.0166C19.7457 8.03216 19.6588 8.05894 19.6172 8.07617C19.3723 8.17766 19.1777 8.37226 19.0762 8.61719C19.0589 8.65879 19.0322 8.74572 19.0166 8.97363C19.0004 9.21061 19 9.52038 19 10V16Z M12 2C11.5108 2 11.0177 2.03976 10.5937 2.12109C10.3819 2.16174 10.1742 2.21485 9.98633 2.28516C9.8583 2.33307 9.69562 2.4053 9.53906 2.51562L9.38574 2.63965L9.31445 2.71289C8.9808 3.09432 8.98378 3.67419 9.33691 4.05273C9.69215 4.43348 10.2748 4.47444 10.6787 4.16211C10.6813 4.16109 10.6843 4.16036 10.6875 4.15918C10.7409 4.13922 10.8334 4.1113 10.9707 4.08496C11.2453 4.03228 11.6087 4 12 4C12.3913 4 12.7547 4.03228 13.0293 4.08496C13.1666 4.1113 13.2591 4.13922 13.3125 4.15918C13.316 4.16049 13.3194 4.161 13.3223 4.16211C13.7262 4.47393 14.308 4.43328 14.6631 4.05273C15.0397 3.64899 15.0178 3.01642 14.6143 2.63965L14.4609 2.51562C14.3044 2.4053 14.1417 2.33307 14.0137 2.28516C13.8258 2.21485 13.6181 2.16174 13.4062 2.12109C12.9823 2.03976 12.4892 2 12 2Z",
|
|
1409
|
+
name: "trash"
|
|
1410
|
+
};
|
|
1379
1411
|
var userBox = {
|
|
1380
1412
|
path: "M12 6C14.2091 6 16 7.79086 16 10C16 12.2091 14.2091 14 12 14C9.79086 14 8 12.2091 8 10C8 7.79086 9.79086 6 12 6ZM12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8Z M14 2C17.7712 2 19.6566 2.0003 20.8281 3.17188C21.9997 4.34345 22 6.22876 22 10V14C22 17.7712 21.9997 19.6566 20.8281 20.8281C19.803 21.8533 18.2315 21.982 15.3281 21.998L14 22H10L8.67188 21.998C5.8719 21.9826 4.31033 21.8625 3.2832 20.9346L3.17188 20.8281C2.14675 19.803 2.01797 18.2315 2.00195 15.3281L2 14V10C2 6.34627 2 4.46248 3.06543 3.2832L3.17188 3.17188C4.34345 2.0003 6.22876 2 10 2H14ZM12 18C10.8577 18 9.76263 18.3153 8.88574 18.876C8.39459 19.1901 7.99492 19.5688 7.69043 19.9834C8.33459 19.9972 9.09233 20 10 20H14C14.9072 20 15.6646 19.9971 16.3086 19.9834C16.0041 19.5689 15.6052 19.19 15.1143 18.876C14.2374 18.3153 13.1423 18 12 18ZM10 4C8.05784 4 6.80197 4.00454 5.87695 4.12891C5.00986 4.24554 4.73816 4.43372 4.58594 4.58594C4.43372 4.73816 4.24554 5.00986 4.12891 5.87695C4.00454 6.80197 4 8.05784 4 10V14C4 15.9422 4.00454 17.198 4.12891 18.123C4.24554 18.9901 4.43372 19.2618 4.58594 19.4141C4.71234 19.5405 4.92163 19.6893 5.48535 19.8037C5.96679 18.7505 6.77822 17.8493 7.80859 17.1904C9.02742 16.4111 10.5007 16 12 16C13.4993 16 14.9726 16.4111 16.1914 17.1904C17.2217 17.8492 18.0322 18.7507 18.5137 19.8037C19.0781 19.6893 19.2876 19.5405 19.4141 19.4141C19.5663 19.2618 19.7545 18.9901 19.8711 18.123C19.9955 17.198 20 15.9422 20 14V10C20 8.05784 19.9955 6.80197 19.8711 5.87695C19.7545 5.00986 19.5663 4.73816 19.4141 4.58594C19.2618 4.43372 18.9901 4.24554 18.123 4.12891C17.198 4.00454 15.9422 4 14 4H10Z",
|
|
1381
1413
|
name: "userBox"
|
|
1382
1414
|
};
|
|
1383
|
-
var
|
|
1384
|
-
path: "
|
|
1415
|
+
var view = {
|
|
1416
|
+
path: "M14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14V16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16V14C13.1046 14 14 13.1046 14 12Z M12 5C14.1099 5 16.0058 5.92745 17.5088 7.00879C19.0197 8.09584 20.2201 9.40055 20.96 10.2988C21.2757 10.6822 21.7705 11.2107 21.7705 12C21.7705 12.7893 21.2757 13.3178 20.96 13.7012C20.2201 14.5995 19.0197 15.9042 17.5088 16.9912C16.0058 18.0726 14.1099 19 12 19C9.89011 19 7.99424 18.0726 6.49121 16.9912C4.98027 15.9042 3.77991 14.5995 3.04004 13.7012C2.74394 13.3417 2.29068 12.8546 2.23535 12.1445L2.22949 12L2.23535 11.8555C2.29068 11.1454 2.74394 10.6583 3.04004 10.2988C3.77991 9.40055 4.98027 8.09584 6.49121 7.00879C7.99424 5.92745 9.89011 5 12 5ZM12 7C10.4742 7 8.9862 7.67808 7.65918 8.63281C6.34015 9.58184 5.26417 10.7445 4.58398 11.5703C4.48426 11.6914 4.40937 11.7817 4.34766 11.8613C4.29914 11.924 4.26934 11.9686 4.24902 12C4.26934 12.0314 4.29914 12.076 4.34766 12.1387C4.40937 12.2183 4.48426 12.3086 4.58398 12.4297C5.26417 13.2555 6.34015 14.4182 7.65918 15.3672C8.9862 16.3219 10.4742 17 12 17C13.5258 17 15.0138 16.3219 16.3408 15.3672C17.6599 14.4182 18.7358 13.2555 19.416 12.4297C19.5157 12.3086 19.5906 12.2183 19.6523 12.1387C19.7006 12.0763 19.7297 12.0314 19.75 12C19.7297 11.9686 19.7006 11.9237 19.6523 11.8613C19.5906 11.7817 19.5157 11.6914 19.416 11.5703C18.7358 10.7445 17.6599 9.58184 16.3408 8.63281C15.0138 7.67808 13.5258 7 12 7Z",
|
|
1385
1417
|
name: "eye"
|
|
1386
1418
|
};
|
|
1387
|
-
var
|
|
1388
|
-
path: "
|
|
1419
|
+
var viewHide = {
|
|
1420
|
+
path: "M10.1416 11.2627C10.051 11.491 10 11.7394 10 12C10 13.1046 10.8954 14 12 14C12.2604 14 12.5082 13.9479 12.7363 13.8574L14.2109 15.332C13.5774 15.7532 12.8178 16 12 16C9.79087 16 8.00001 14.2091 8.00001 12C8.00001 11.1821 8.2457 10.4217 8.667 9.78809L10.1416 11.2627Z M12 8C14.2091 8 16 9.79086 16 12C16 12.2736 15.9723 12.5407 15.9199 12.7988L11.2002 8.0791C11.4586 8.02668 11.7262 8 12 8Z M7.57446 8.69531C6.29436 9.63256 5.24972 10.7623 4.58423 11.5703C4.48455 11.6913 4.40959 11.7817 4.3479 11.8613C4.29944 11.9239 4.26958 11.9686 4.24927 12C4.26958 12.0314 4.29944 12.0761 4.3479 12.1387C4.40959 12.2183 4.48455 12.3087 4.58423 12.4297C5.26442 13.2555 6.34045 14.4182 7.65942 15.3672C8.9864 16.3219 10.4745 17 12.0002 17C13.0478 17 14.077 16.6793 15.0491 16.1699L16.5178 17.6387C15.2048 18.4171 13.6701 18.9999 12.0002 19C9.89043 19 7.99446 18.0725 6.49146 16.9912C4.98058 15.9042 3.78016 14.5994 3.04028 13.7012C2.74418 13.3417 2.29093 12.8546 2.2356 12.1445L2.22974 12L2.2356 11.8555C2.29093 11.1454 2.74418 10.6583 3.04028 10.2988C3.72269 9.47032 4.79658 8.29591 6.14478 7.26562L7.57446 8.69531Z M12.0002 5C14.11 5.00007 16.0061 5.92749 17.509 7.00879C19.0199 8.09582 20.2204 9.40058 20.9602 10.2988C21.276 10.6822 21.7708 11.2108 21.7708 12C21.7708 12.7892 21.276 13.3178 20.9602 13.7012C20.4735 14.2921 19.7851 15.0563 18.9426 15.8213L17.5266 14.4053C18.3066 13.7056 18.954 12.991 19.4163 12.4297C19.5159 12.3087 19.5909 12.2183 19.6526 12.1387C19.7008 12.0764 19.7299 12.0314 19.7502 12C19.7299 11.9686 19.7008 11.9236 19.6526 11.8613C19.5909 11.7817 19.5159 11.6913 19.4163 11.5703C18.7361 10.7445 17.66 9.58182 16.3411 8.63281C15.0141 7.67813 13.526 7.00007 12.0002 7C11.4494 7 10.9036 7.08922 10.3684 7.24707L8.80688 5.68555C9.79067 5.26876 10.8646 5 12.0002 5Z M21.707 17.293L20.293 18.707L4.29298 2.70703L5.70704 1.29297L21.707 17.293Z",
|
|
1389
1421
|
name: "eyeSlash"
|
|
1390
1422
|
};
|
|
1391
1423
|
var iconsData = {
|
|
1392
1424
|
add: add,
|
|
1425
|
+
addRing: addRing,
|
|
1393
1426
|
arrowDown: arrowDown,
|
|
1394
1427
|
arrowUp: arrowUp,
|
|
1395
1428
|
arrowLeft: arrowLeft,
|
|
1396
1429
|
arrowRight: arrowRight,
|
|
1430
|
+
bell: bell,
|
|
1397
1431
|
back: back,
|
|
1398
1432
|
caret: caret,
|
|
1399
1433
|
caretDown: caretDown,
|
|
1400
1434
|
caretUp: caretUp,
|
|
1401
1435
|
check: check,
|
|
1436
|
+
checkRing: checkRing,
|
|
1402
1437
|
close: close,
|
|
1438
|
+
crossCircle: crossCircle,
|
|
1403
1439
|
directionRight: directionRight,
|
|
1404
1440
|
"export": {
|
|
1405
1441
|
path: "M7.70703 10.707L11 7.41406L11 14C11 14.5523 11.4477 15 12 15C12.5523 15 13 14.5523 13 14V7.41406L16.293 10.707L17.707 9.29297L12 3.58594L6.29297 9.29297L7.70703 10.707Z M4 17V16H6V17C6 17.5523 6.44772 18 7 18H17C17.5523 18 18 17.5523 18 17V16H20V17C20 18.6051 18.7394 19.9158 17.1543 19.9961L17 20H7C5.34315 20 4 18.6569 4 17Z",
|
|
1406
1442
|
name: "export"
|
|
1407
1443
|
},
|
|
1408
1444
|
filter: filter,
|
|
1445
|
+
info: info,
|
|
1446
|
+
lamp: lamp,
|
|
1409
1447
|
menu: menu,
|
|
1410
1448
|
pause: pause,
|
|
1411
1449
|
play: play,
|
|
@@ -1414,12 +1452,14 @@ var iconsData = {
|
|
|
1414
1452
|
message: message,
|
|
1415
1453
|
copy: copy,
|
|
1416
1454
|
link: link,
|
|
1455
|
+
remove: remove,
|
|
1417
1456
|
star: star,
|
|
1418
1457
|
starFilled: starFilled,
|
|
1419
1458
|
table: table,
|
|
1459
|
+
trash: trash,
|
|
1420
1460
|
userBox: userBox,
|
|
1421
|
-
|
|
1422
|
-
|
|
1461
|
+
view: view,
|
|
1462
|
+
viewHide: viewHide
|
|
1423
1463
|
};
|
|
1424
1464
|
|
|
1425
1465
|
React.createElement;
|
|
@@ -1429,7 +1469,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1429
1469
|
},
|
|
1430
1470
|
displayName: "Icon__IconStyled",
|
|
1431
1471
|
componentId: "sc-1105czq-0"
|
|
1432
|
-
})(templateObject_1$
|
|
1472
|
+
})(templateObject_1$u || (templateObject_1$u = __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
1473
|
var $size = _a.$size;
|
|
1434
1474
|
return tokensData.semantic.size.icon[$size];
|
|
1435
1475
|
}, function (_a) {
|
|
@@ -1493,13 +1533,13 @@ var Icon = function Icon(_a) {
|
|
|
1493
1533
|
d: iconData.path
|
|
1494
1534
|
})));
|
|
1495
1535
|
};
|
|
1496
|
-
var templateObject_1$
|
|
1536
|
+
var templateObject_1$u;
|
|
1497
1537
|
|
|
1498
1538
|
React.createElement;
|
|
1499
1539
|
var button = tokensData.component.button,
|
|
1500
|
-
semantic$
|
|
1540
|
+
semantic$9 = tokensData.semantic;
|
|
1501
1541
|
// 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$
|
|
1542
|
+
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$9.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
1543
|
// Dynamic variant styles using component tokens
|
|
1504
1544
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1505
1545
|
var $variant = _a.$variant;
|
|
@@ -1525,14 +1565,24 @@ var StyledButton = styled.button.withConfig({
|
|
|
1525
1565
|
},
|
|
1526
1566
|
displayName: "Button__StyledButton",
|
|
1527
1567
|
componentId: "sc-1eiuum9-0"
|
|
1528
|
-
})(templateObject_1$
|
|
1568
|
+
})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1529
1569
|
var StyledLink = styled.a.withConfig({
|
|
1530
1570
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1531
1571
|
return !prop.startsWith('$');
|
|
1532
1572
|
},
|
|
1533
1573
|
displayName: "Button__StyledLink",
|
|
1534
1574
|
componentId: "sc-1eiuum9-1"
|
|
1535
|
-
})(templateObject_2$
|
|
1575
|
+
})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1576
|
+
// Styled Next.js Link component (modern API without legacyBehavior)
|
|
1577
|
+
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1578
|
+
// Styled Next.js Link component (modern API without legacyBehavior)
|
|
1579
|
+
var StyledNextLink = styled(Link).withConfig({
|
|
1580
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1581
|
+
return !prop.startsWith('$');
|
|
1582
|
+
},
|
|
1583
|
+
displayName: "Button__StyledNextLink",
|
|
1584
|
+
componentId: "sc-1eiuum9-2"
|
|
1585
|
+
})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1536
1586
|
// Helper function to get icon size based on button size
|
|
1537
1587
|
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1538
1588
|
// Helper function to get icon size based on button size
|
|
@@ -1571,18 +1621,14 @@ var Button = function Button(_a) {
|
|
|
1571
1621
|
iconName = _a.iconName,
|
|
1572
1622
|
dataTestId = _a["data-testid"],
|
|
1573
1623
|
rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", 'data-testid']);
|
|
1574
|
-
// For internal links, use Next.js Link
|
|
1624
|
+
// For internal links, use Next.js Link (modern API without legacyBehavior)
|
|
1575
1625
|
if (purpose === 'link' && url && !url.startsWith('http') && !target) {
|
|
1576
|
-
|
|
1577
|
-
return /*#__PURE__*/React.createElement(Link, {
|
|
1626
|
+
return /*#__PURE__*/React.createElement(StyledNextLink, {
|
|
1578
1627
|
href: url,
|
|
1579
|
-
passHref: true,
|
|
1580
|
-
legacyBehavior: true
|
|
1581
|
-
}, /*#__PURE__*/React.createElement(StyledLink, _extends({
|
|
1582
1628
|
$variant: variant,
|
|
1583
1629
|
$size: size,
|
|
1584
1630
|
"data-testid": dataTestId
|
|
1585
|
-
},
|
|
1631
|
+
}, renderButtonContent(children, iconName, size));
|
|
1586
1632
|
}
|
|
1587
1633
|
// For external links or links with target
|
|
1588
1634
|
if (purpose === 'link' && url) {
|
|
@@ -1625,7 +1671,7 @@ var Button = function Button(_a) {
|
|
|
1625
1671
|
"data-testid": dataTestId
|
|
1626
1672
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1627
1673
|
};
|
|
1628
|
-
var templateObject_1$
|
|
1674
|
+
var templateObject_1$t, templateObject_2$i, templateObject_3$f;
|
|
1629
1675
|
|
|
1630
1676
|
var chip = tokensData.component.chip;
|
|
1631
1677
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1686,14 +1732,14 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1686
1732
|
},
|
|
1687
1733
|
displayName: "ChipBase__BaseChipStyled",
|
|
1688
1734
|
componentId: "sc-moa6zc-0"
|
|
1689
|
-
})(templateObject_1$
|
|
1735
|
+
})(templateObject_1$s || (templateObject_1$s = __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
1736
|
// Icon container for selected indicator or leading icons
|
|
1691
1737
|
])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1692
1738
|
// Icon container for selected indicator or leading icons
|
|
1693
1739
|
var IconContainer = styled.span.withConfig({
|
|
1694
1740
|
displayName: "ChipBase__IconContainer",
|
|
1695
1741
|
componentId: "sc-moa6zc-1"
|
|
1696
|
-
})(templateObject_2$
|
|
1742
|
+
})(templateObject_2$h || (templateObject_2$h = __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
1743
|
// Close button for dismissible chips
|
|
1698
1744
|
])), tokensData.semantic.spacing.layout.sm);
|
|
1699
1745
|
// Close button for dismissible chips
|
|
@@ -1703,7 +1749,7 @@ var CloseButton = styled.button.withConfig({
|
|
|
1703
1749
|
},
|
|
1704
1750
|
displayName: "ChipBase__CloseButton",
|
|
1705
1751
|
componentId: "sc-moa6zc-2"
|
|
1706
|
-
})(templateObject_3$
|
|
1752
|
+
})(templateObject_3$e || (templateObject_3$e = __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
1753
|
// Wrapper component that applies styles via CSS custom properties
|
|
1708
1754
|
])), tokensData.semantic.spacing.layout.sm, function (props) {
|
|
1709
1755
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
@@ -1738,7 +1784,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1738
1784
|
style: __assign(__assign({}, cssProps), style)
|
|
1739
1785
|
}, htmlProps), children);
|
|
1740
1786
|
};
|
|
1741
|
-
var templateObject_1$
|
|
1787
|
+
var templateObject_1$s, templateObject_2$h, templateObject_3$e;
|
|
1742
1788
|
|
|
1743
1789
|
React.createElement;
|
|
1744
1790
|
/**
|
|
@@ -1982,32 +2028,32 @@ var spacing$3 = tokensData.semantic.spacing;
|
|
|
1982
2028
|
var StyledContainer = styled.div.withConfig({
|
|
1983
2029
|
displayName: "Container__StyledContainer",
|
|
1984
2030
|
componentId: "sc-17dbj6n-0"
|
|
1985
|
-
})(templateObject_1$
|
|
2031
|
+
})(templateObject_1$r || (templateObject_1$r = __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
2032
|
var Container = function Container(_a) {
|
|
1987
2033
|
var children = _a.children,
|
|
1988
2034
|
props = __rest(_a, ["children"]);
|
|
1989
2035
|
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
1990
2036
|
};
|
|
1991
|
-
var templateObject_1$
|
|
2037
|
+
var templateObject_1$r;
|
|
1992
2038
|
|
|
1993
2039
|
React.createElement;
|
|
1994
|
-
var base$
|
|
2040
|
+
var base$7 = tokensData.base;
|
|
1995
2041
|
var PictureWrapper = styled.div.withConfig({
|
|
1996
2042
|
displayName: "Picture__PictureWrapper",
|
|
1997
2043
|
componentId: "sc-11d9tei-0"
|
|
1998
|
-
})(templateObject_1$
|
|
2044
|
+
})(templateObject_1$q || (templateObject_1$q = __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
2045
|
var ImageLink = styled.a.withConfig({
|
|
2000
2046
|
displayName: "Picture__ImageLink",
|
|
2001
2047
|
componentId: "sc-11d9tei-1"
|
|
2002
|
-
})(templateObject_2$
|
|
2048
|
+
})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: block;\n cursor: pointer;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"], ["\n display: block;\n cursor: pointer;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"])), base$7.duration.normal, base$7.easing.easeInOut);
|
|
2003
2049
|
var ImageButton = styled.button.withConfig({
|
|
2004
2050
|
displayName: "Picture__ImageButton",
|
|
2005
2051
|
componentId: "sc-11d9tei-2"
|
|
2006
|
-
})(templateObject_3$
|
|
2052
|
+
})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n display: block;\n width: 100%;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"], ["\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n display: block;\n width: 100%;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"])), base$7.duration.normal, base$7.easing.easeInOut);
|
|
2007
2053
|
var StyledImage = styled.img.withConfig({
|
|
2008
2054
|
displayName: "Picture__StyledImage",
|
|
2009
2055
|
componentId: "sc-11d9tei-3"
|
|
2010
|
-
})(templateObject_4$
|
|
2056
|
+
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n width: 100%;\n height: auto;\n border-radius: ", ";\n display: block;\n"], ["\n width: 100%;\n height: auto;\n border-radius: ", ";\n display: block;\n"])), base$7.border.radius[2]);
|
|
2011
2057
|
var Picture = function Picture(_a) {
|
|
2012
2058
|
var title = _a.title,
|
|
2013
2059
|
src = _a.src,
|
|
@@ -2034,7 +2080,7 @@ var Picture = function Picture(_a) {
|
|
|
2034
2080
|
"aria-label": "Read more about ".concat(title)
|
|
2035
2081
|
}, image) : image);
|
|
2036
2082
|
};
|
|
2037
|
-
var templateObject_1$
|
|
2083
|
+
var templateObject_1$q, templateObject_2$g, templateObject_3$d, templateObject_4$c;
|
|
2038
2084
|
|
|
2039
2085
|
React.createElement;
|
|
2040
2086
|
var _a$4 = tokensData.semantic,
|
|
@@ -2043,7 +2089,7 @@ var _a$4 = tokensData.semantic,
|
|
|
2043
2089
|
var TimeStyled = styled.time.withConfig({
|
|
2044
2090
|
displayName: "DateFormatter__TimeStyled",
|
|
2045
2091
|
componentId: "sc-5464cc-0"
|
|
2046
|
-
})(templateObject_1$
|
|
2092
|
+
})(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography$1.label, color$2.text.subdued);
|
|
2047
2093
|
var DateFormatter = function DateFormatter(_a) {
|
|
2048
2094
|
var dateString = _a.dateString,
|
|
2049
2095
|
_b = _a.formatString,
|
|
@@ -2055,7 +2101,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
2055
2101
|
"data-testid": dataTestId
|
|
2056
2102
|
}, dateFns.format(date, formatString));
|
|
2057
2103
|
};
|
|
2058
|
-
var templateObject_1$
|
|
2104
|
+
var templateObject_1$p;
|
|
2059
2105
|
|
|
2060
2106
|
React.createElement;
|
|
2061
2107
|
var motion = tokensData.semantic.motion,
|
|
@@ -2066,7 +2112,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2066
2112
|
},
|
|
2067
2113
|
displayName: "IconButton__IconButtonStyled",
|
|
2068
2114
|
componentId: "sc-k8b14t-0"
|
|
2069
|
-
})(templateObject_1$
|
|
2115
|
+
})(templateObject_1$o || (templateObject_1$o = __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
2116
|
var $variant = _a.$variant;
|
|
2071
2117
|
switch ($variant) {
|
|
2072
2118
|
case 'primary':
|
|
@@ -2177,7 +2223,7 @@ var IconButton = function IconButton(_a) {
|
|
|
2177
2223
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2178
2224
|
}));
|
|
2179
2225
|
};
|
|
2180
|
-
var templateObject_1$
|
|
2226
|
+
var templateObject_1$o;
|
|
2181
2227
|
|
|
2182
2228
|
React.createElement;
|
|
2183
2229
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -2186,10 +2232,10 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
2186
2232
|
},
|
|
2187
2233
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2188
2234
|
componentId: "sc-1nco33q-0"
|
|
2189
|
-
})(templateObject_3$
|
|
2190
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_1$
|
|
2235
|
+
})(templateObject_3$c || (templateObject_3$c = __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) {
|
|
2236
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_1$n || (templateObject_1$n = __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
2237
|
}, function (props) {
|
|
2192
|
-
return props.$variant === 'vertical' && styled.css(templateObject_2$
|
|
2238
|
+
return props.$variant === 'vertical' && styled.css(templateObject_2$f || (templateObject_2$f = __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
2239
|
});
|
|
2194
2240
|
var ProgressBarFill = styled.div.withConfig({
|
|
2195
2241
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2197,7 +2243,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2197
2243
|
},
|
|
2198
2244
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2199
2245
|
componentId: "sc-1nco33q-1"
|
|
2200
|
-
})(templateObject_7$
|
|
2246
|
+
})(templateObject_7$6 || (templateObject_7$6 = __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
2247
|
var backgroundColor;
|
|
2202
2248
|
switch (props.$color) {
|
|
2203
2249
|
case 'success':
|
|
@@ -2211,11 +2257,11 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2211
2257
|
backgroundColor = tokensData.semantic.color.background.interactive;
|
|
2212
2258
|
break;
|
|
2213
2259
|
}
|
|
2214
|
-
return styled.css(templateObject_4$
|
|
2260
|
+
return styled.css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2215
2261
|
}, function (props) {
|
|
2216
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_5$
|
|
2262
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2217
2263
|
}, function (props) {
|
|
2218
|
-
return props.$variant === 'vertical' && styled.css(templateObject_6$
|
|
2264
|
+
return props.$variant === 'vertical' && styled.css(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2219
2265
|
});
|
|
2220
2266
|
var ProgressBar = function ProgressBar(_a) {
|
|
2221
2267
|
var value = _a.value,
|
|
@@ -2241,7 +2287,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2241
2287
|
$color: color
|
|
2242
2288
|
}));
|
|
2243
2289
|
};
|
|
2244
|
-
var templateObject_1$
|
|
2290
|
+
var templateObject_1$n, templateObject_2$f, templateObject_3$c, templateObject_4$b, templateObject_5$9, templateObject_6$8, templateObject_7$6;
|
|
2245
2291
|
|
|
2246
2292
|
React.createElement;
|
|
2247
2293
|
var StyledDivider = styled.div.withConfig({
|
|
@@ -2250,7 +2296,7 @@ var StyledDivider = styled.div.withConfig({
|
|
|
2250
2296
|
},
|
|
2251
2297
|
displayName: "Divider__StyledDivider",
|
|
2252
2298
|
componentId: "sc-1l0c8ja-0"
|
|
2253
|
-
})(templateObject_1$
|
|
2299
|
+
})(templateObject_1$m || (templateObject_1$m = __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
2300
|
/**
|
|
2255
2301
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2256
2302
|
*
|
|
@@ -2363,7 +2409,7 @@ var Divider = function Divider(_a) {
|
|
|
2363
2409
|
"aria-orientation": orientation
|
|
2364
2410
|
});
|
|
2365
2411
|
};
|
|
2366
|
-
var templateObject_1$
|
|
2412
|
+
var templateObject_1$m;
|
|
2367
2413
|
|
|
2368
2414
|
React.createElement;
|
|
2369
2415
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2372,7 +2418,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2372
2418
|
},
|
|
2373
2419
|
displayName: "Stack__StyledStack",
|
|
2374
2420
|
componentId: "sc-1ehkxgy-0"
|
|
2375
|
-
})(templateObject_1$
|
|
2421
|
+
})(templateObject_1$l || (templateObject_1$l = __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
2422
|
// Helper function to convert gap prop to CSS value
|
|
2377
2423
|
])));
|
|
2378
2424
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2410,17 +2456,17 @@ var Stack = function Stack(_a) {
|
|
|
2410
2456
|
"data-testid": dataTestId
|
|
2411
2457
|
}, children);
|
|
2412
2458
|
};
|
|
2413
|
-
var templateObject_1$
|
|
2459
|
+
var templateObject_1$l;
|
|
2414
2460
|
|
|
2415
2461
|
React.createElement;
|
|
2416
|
-
var semantic$
|
|
2462
|
+
var semantic$8 = tokensData.semantic;
|
|
2417
2463
|
var StyledTag = styled.span.withConfig({
|
|
2418
2464
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2419
2465
|
return !prop.startsWith('$');
|
|
2420
2466
|
},
|
|
2421
2467
|
displayName: "Tag__StyledTag",
|
|
2422
2468
|
componentId: "sc-lzfmti-0"
|
|
2423
|
-
})(templateObject_1$
|
|
2469
|
+
})(templateObject_1$k || (templateObject_1$k = __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
2470
|
/**
|
|
2425
2471
|
* Tag component for categorizing and labeling content
|
|
2426
2472
|
*
|
|
@@ -2430,33 +2476,33 @@ var StyledTag = styled.span.withConfig({
|
|
|
2430
2476
|
var $variant = _a.$variant;
|
|
2431
2477
|
switch ($variant) {
|
|
2432
2478
|
case 'interactive':
|
|
2433
|
-
return semantic$
|
|
2479
|
+
return semantic$8.color.background['interactive-subtle'];
|
|
2434
2480
|
case 'success':
|
|
2435
|
-
return semantic$
|
|
2481
|
+
return semantic$8.color.background['success-subtle'];
|
|
2436
2482
|
case 'warning':
|
|
2437
|
-
return semantic$
|
|
2483
|
+
return semantic$8.color.background['warning-subtle'];
|
|
2438
2484
|
case 'error':
|
|
2439
|
-
return semantic$
|
|
2485
|
+
return semantic$8.color.background['error-subtle'];
|
|
2440
2486
|
case 'emphasis':
|
|
2441
|
-
return semantic$
|
|
2487
|
+
return semantic$8.color.background.emphasis;
|
|
2442
2488
|
default:
|
|
2443
|
-
return semantic$
|
|
2489
|
+
return semantic$8.color.background.surface;
|
|
2444
2490
|
}
|
|
2445
2491
|
}, function (_a) {
|
|
2446
2492
|
var $variant = _a.$variant;
|
|
2447
2493
|
switch ($variant) {
|
|
2448
2494
|
case 'interactive':
|
|
2449
|
-
return semantic$
|
|
2495
|
+
return semantic$8.color.text.interactive;
|
|
2450
2496
|
case 'success':
|
|
2451
|
-
return semantic$
|
|
2497
|
+
return semantic$8.color.text.success;
|
|
2452
2498
|
case 'warning':
|
|
2453
|
-
return semantic$
|
|
2499
|
+
return semantic$8.color.text.warning;
|
|
2454
2500
|
case 'error':
|
|
2455
|
-
return semantic$
|
|
2501
|
+
return semantic$8.color.text.error;
|
|
2456
2502
|
case 'emphasis':
|
|
2457
|
-
return semantic$
|
|
2503
|
+
return semantic$8.color.text.inverse;
|
|
2458
2504
|
default:
|
|
2459
|
-
return semantic$
|
|
2505
|
+
return semantic$8.color.text["default"];
|
|
2460
2506
|
}
|
|
2461
2507
|
}, function (_a) {
|
|
2462
2508
|
var $variant = _a.$variant,
|
|
@@ -2464,17 +2510,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2464
2510
|
if (!$border) return 'none';
|
|
2465
2511
|
switch ($variant) {
|
|
2466
2512
|
case 'interactive':
|
|
2467
|
-
return "1px solid ".concat(semantic$
|
|
2513
|
+
return "1px solid ".concat(semantic$8.color.border.interactive);
|
|
2468
2514
|
case 'success':
|
|
2469
|
-
return "1px solid ".concat(semantic$
|
|
2515
|
+
return "1px solid ".concat(semantic$8.color.border.success);
|
|
2470
2516
|
case 'warning':
|
|
2471
|
-
return "1px solid ".concat(semantic$
|
|
2517
|
+
return "1px solid ".concat(semantic$8.color.border.warning);
|
|
2472
2518
|
case 'error':
|
|
2473
|
-
return "1px solid ".concat(semantic$
|
|
2519
|
+
return "1px solid ".concat(semantic$8.color.border.error);
|
|
2474
2520
|
case 'emphasis':
|
|
2475
|
-
return "1px solid ".concat(semantic$
|
|
2521
|
+
return "1px solid ".concat(semantic$8.color.background.emphasis);
|
|
2476
2522
|
default:
|
|
2477
|
-
return "1px solid ".concat(semantic$
|
|
2523
|
+
return "1px solid ".concat(semantic$8.color.border["default"]);
|
|
2478
2524
|
}
|
|
2479
2525
|
});
|
|
2480
2526
|
/**
|
|
@@ -2501,18 +2547,157 @@ var Tag = function Tag(_a) {
|
|
|
2501
2547
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
2502
2548
|
}, props), children);
|
|
2503
2549
|
};
|
|
2504
|
-
var templateObject_1$
|
|
2550
|
+
var templateObject_1$k;
|
|
2551
|
+
|
|
2552
|
+
React.createElement;
|
|
2553
|
+
var semantic$7 = tokensData.semantic,
|
|
2554
|
+
base$6 = tokensData.base;
|
|
2555
|
+
// Default icons by variant
|
|
2556
|
+
var variantIcons = {
|
|
2557
|
+
error: 'crossCircle',
|
|
2558
|
+
warning: 'bell',
|
|
2559
|
+
info: 'info',
|
|
2560
|
+
success: 'checkRing'
|
|
2561
|
+
};
|
|
2562
|
+
// Icon colors by variant (using semantic icon color tokens)
|
|
2563
|
+
var variantIconColors = {
|
|
2564
|
+
error: 'error',
|
|
2565
|
+
warning: 'warning',
|
|
2566
|
+
info: 'interactive',
|
|
2567
|
+
success: 'success'
|
|
2568
|
+
};
|
|
2569
|
+
// Title colors by variant (using semantic text color tokens)
|
|
2570
|
+
var variantTitleColors = {
|
|
2571
|
+
error: 'error',
|
|
2572
|
+
warning: 'warning',
|
|
2573
|
+
info: 'interactive',
|
|
2574
|
+
success: 'success'
|
|
2575
|
+
};
|
|
2576
|
+
var StyledAlert = styled.div.withConfig({
|
|
2577
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2578
|
+
return !prop.startsWith('$');
|
|
2579
|
+
},
|
|
2580
|
+
displayName: "Alert__StyledAlert",
|
|
2581
|
+
componentId: "sc-18tq5d-0"
|
|
2582
|
+
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: 1px solid;\n position: relative;\n width: 100%;\n \n /* Variant-specific colors */\n ", "\n \n /* Responsive adjustments */\n @media (min-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n align-items: ", ";\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: 1px solid;\n position: relative;\n width: 100%;\n \n /* Variant-specific colors */\n ", "\n \n /* Responsive adjustments */\n @media (min-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
|
|
2583
|
+
var $inline = _a.$inline;
|
|
2584
|
+
return $inline ? 'center' : 'flex-start';
|
|
2585
|
+
}, function (_a) {
|
|
2586
|
+
var $inline = _a.$inline;
|
|
2587
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
|
|
2588
|
+
}, function (_a) {
|
|
2589
|
+
var $inline = _a.$inline;
|
|
2590
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
|
|
2591
|
+
}, base$6.border.radius[2], function (_a) {
|
|
2592
|
+
var $variant = _a.$variant;
|
|
2593
|
+
switch ($variant) {
|
|
2594
|
+
case 'error':
|
|
2595
|
+
return "\n background-color: ".concat(semantic$7.color.background['error-subtle'], ";\n border-color: ").concat(semantic$7.color.border.error, ";\n color: ").concat(semantic$7.color.text.error, ";\n ");
|
|
2596
|
+
case 'warning':
|
|
2597
|
+
return "\n background-color: ".concat(semantic$7.color.background['warning-subtle'], ";\n border-color: ").concat(semantic$7.color.border.warning, ";\n color: ").concat(semantic$7.color.text.warning, ";\n ");
|
|
2598
|
+
case 'success':
|
|
2599
|
+
return "\n background-color: ".concat(semantic$7.color.background['success-subtle'], ";\n border-color: ").concat(semantic$7.color.border.success, ";\n color: ").concat(semantic$7.color.text.success, ";\n ");
|
|
2600
|
+
case 'info':
|
|
2601
|
+
default:
|
|
2602
|
+
return "\n background-color: ".concat(semantic$7.color.background['interactive-subtle'], ";\n border-color: ").concat(semantic$7.color.border.interactive, ";\n color: ").concat(semantic$7.color.text.interactive, ";\n ");
|
|
2603
|
+
}
|
|
2604
|
+
}, base$6.breakpoint.md, function (_a) {
|
|
2605
|
+
var $inline = _a.$inline;
|
|
2606
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.lg;
|
|
2607
|
+
});
|
|
2608
|
+
var StyledIconContainer$1 = styled.div.withConfig({
|
|
2609
|
+
displayName: "Alert__StyledIconContainer",
|
|
2610
|
+
componentId: "sc-18tq5d-1"
|
|
2611
|
+
})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n"])));
|
|
2612
|
+
var StyledContent = styled.div.withConfig({
|
|
2613
|
+
displayName: "Alert__StyledContent",
|
|
2614
|
+
componentId: "sc-18tq5d-2"
|
|
2615
|
+
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"])), semantic$7.spacing.layout.xs);
|
|
2616
|
+
var StyledTitle = styled.span.withConfig({
|
|
2617
|
+
displayName: "Alert__StyledTitle",
|
|
2618
|
+
componentId: "sc-18tq5d-3"
|
|
2619
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font: ", ";\n font-weight: 600 !important;\n margin: 0;\n\tline-height: 1.125;\n"], ["\n font: ", ";\n font-weight: 600 !important;\n margin: 0;\n\tline-height: 1.125;\n"])), semantic$7.typography.h6);
|
|
2620
|
+
var StyledMessage = styled.span.withConfig({
|
|
2621
|
+
displayName: "Alert__StyledMessage",
|
|
2622
|
+
componentId: "sc-18tq5d-4"
|
|
2623
|
+
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font: ", ";\n\tline-height: 1.25;\n"], ["\n font: ", ";\n\tline-height: 1.25;\n"])), semantic$7.typography.body);
|
|
2624
|
+
var StyledActions = styled.div.withConfig({
|
|
2625
|
+
displayName: "Alert__StyledActions",
|
|
2626
|
+
componentId: "sc-18tq5d-5"
|
|
2627
|
+
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"])), semantic$7.spacing.layout.sm);
|
|
2628
|
+
var StyledDismissButton = styled(IconButton).withConfig({
|
|
2629
|
+
displayName: "Alert__StyledDismissButton",
|
|
2630
|
+
componentId: "sc-18tq5d-6"
|
|
2631
|
+
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"], ["\n margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"])), semantic$7.spacing.layout.xs);
|
|
2632
|
+
var Alert = function Alert(_a) {
|
|
2633
|
+
var _b = _a.variant,
|
|
2634
|
+
variant = _b === void 0 ? 'info' : _b,
|
|
2635
|
+
children = _a.children,
|
|
2636
|
+
title = _a.title,
|
|
2637
|
+
_c = _a.dismissible,
|
|
2638
|
+
dismissible = _c === void 0 ? false : _c,
|
|
2639
|
+
onDismiss = _a.onDismiss,
|
|
2640
|
+
action = _a.action,
|
|
2641
|
+
_d = _a.inline,
|
|
2642
|
+
inline = _d === void 0 ? false : _d,
|
|
2643
|
+
_e = _a.ariaLive,
|
|
2644
|
+
ariaLive = _e === void 0 ? 'polite' : _e,
|
|
2645
|
+
dataTestId = _a["data-testid"],
|
|
2646
|
+
props = __rest(_a, ["variant", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
|
|
2647
|
+
var _f = React.useState(true),
|
|
2648
|
+
isVisible = _f[0],
|
|
2649
|
+
setIsVisible = _f[1];
|
|
2650
|
+
var handleDismiss = function handleDismiss() {
|
|
2651
|
+
setIsVisible(false);
|
|
2652
|
+
onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
|
|
2653
|
+
};
|
|
2654
|
+
if (!isVisible) {
|
|
2655
|
+
return null;
|
|
2656
|
+
}
|
|
2657
|
+
// Get the icon for the current variant
|
|
2658
|
+
var iconName = variantIcons[variant];
|
|
2659
|
+
var alertIconColor = variantIconColors[variant];
|
|
2660
|
+
var alertTitleColor = variantTitleColors[variant];
|
|
2661
|
+
// Determine ARIA role based on variant and aria-live
|
|
2662
|
+
var role = variant === 'error' ? 'alert' : 'status';
|
|
2663
|
+
return /*#__PURE__*/React.createElement(StyledAlert, _extends({
|
|
2664
|
+
role: role,
|
|
2665
|
+
"aria-live": ariaLive,
|
|
2666
|
+
$variant: variant,
|
|
2667
|
+
$inline: inline,
|
|
2668
|
+
"data-testid": dataTestId
|
|
2669
|
+
}, props), /*#__PURE__*/React.createElement(StyledIconContainer$1, {
|
|
2670
|
+
"aria-hidden": "true"
|
|
2671
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
2672
|
+
name: iconName,
|
|
2673
|
+
size: "md",
|
|
2674
|
+
iconColor: alertIconColor
|
|
2675
|
+
})), /*#__PURE__*/React.createElement(StyledContent, null, title && /*#__PURE__*/React.createElement(StyledTitle, {
|
|
2676
|
+
role: "heading",
|
|
2677
|
+
"aria-level": 6,
|
|
2678
|
+
color: alertTitleColor
|
|
2679
|
+
}, title), /*#__PURE__*/React.createElement(StyledMessage, null, children)), (action || dismissible) && /*#__PURE__*/React.createElement(StyledActions, null, action, dismissible && /*#__PURE__*/React.createElement(StyledDismissButton, {
|
|
2680
|
+
iconName: "close",
|
|
2681
|
+
size: "small",
|
|
2682
|
+
variant: "naked",
|
|
2683
|
+
onClick: handleDismiss,
|
|
2684
|
+
"aria-label": "Dismiss alert",
|
|
2685
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-dismiss") : undefined
|
|
2686
|
+
})));
|
|
2687
|
+
};
|
|
2688
|
+
Alert.displayName = 'Alert';
|
|
2689
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$b, templateObject_4$a, templateObject_5$8, templateObject_6$7, templateObject_7$5;
|
|
2505
2690
|
|
|
2506
2691
|
React.createElement;
|
|
2507
2692
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
2508
2693
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
2509
2694
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
2510
2695
|
componentId: "sc-7ouzg5-0"
|
|
2511
|
-
})(templateObject_1$
|
|
2696
|
+
})(templateObject_1$i || (templateObject_1$i = __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
2697
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
2513
2698
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
2514
2699
|
componentId: "sc-7ouzg5-1"
|
|
2515
|
-
})(templateObject_2$
|
|
2700
|
+
})(templateObject_2$d || (templateObject_2$d = __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
2701
|
var isInternalUrl = function isInternalUrl(url) {
|
|
2517
2702
|
return url.startsWith('/') && !url.startsWith('http');
|
|
2518
2703
|
};
|
|
@@ -2538,13 +2723,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
2538
2723
|
}, breadcrumb.label)));
|
|
2539
2724
|
}))));
|
|
2540
2725
|
};
|
|
2541
|
-
var templateObject_1$
|
|
2726
|
+
var templateObject_1$i, templateObject_2$d;
|
|
2542
2727
|
|
|
2543
2728
|
React.createElement;
|
|
2544
2729
|
var CardSmallStyled = styled.div.withConfig({
|
|
2545
2730
|
displayName: "CardSmall__CardSmallStyled",
|
|
2546
2731
|
componentId: "sc-jpcqvd-0"
|
|
2547
|
-
})(templateObject_1$
|
|
2732
|
+
})(templateObject_1$h || (templateObject_1$h = __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
2733
|
var CardSmall = function CardSmall(_a) {
|
|
2549
2734
|
var title = _a.title,
|
|
2550
2735
|
picture = _a.picture,
|
|
@@ -2581,14 +2766,14 @@ var CardSmall = function CardSmall(_a) {
|
|
|
2581
2766
|
color: "subdued"
|
|
2582
2767
|
}, meta))))));
|
|
2583
2768
|
};
|
|
2584
|
-
var templateObject_1$
|
|
2769
|
+
var templateObject_1$h;
|
|
2585
2770
|
|
|
2586
2771
|
React.createElement;
|
|
2587
2772
|
var border$3 = tokensData.base.border;
|
|
2588
2773
|
var CardLargeStyled = styled.div.withConfig({
|
|
2589
2774
|
displayName: "CardLarge__CardLargeStyled",
|
|
2590
2775
|
componentId: "sc-1rfgdzl-0"
|
|
2591
|
-
})(templateObject_1$
|
|
2776
|
+
})(templateObject_1$g || (templateObject_1$g = __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
2777
|
var CardLarge = function CardLarge(_a) {
|
|
2593
2778
|
var title = _a.title,
|
|
2594
2779
|
excerpt = _a.excerpt,
|
|
@@ -2633,7 +2818,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
2633
2818
|
});
|
|
2634
2819
|
})))));
|
|
2635
2820
|
};
|
|
2636
|
-
var templateObject_1$
|
|
2821
|
+
var templateObject_1$g;
|
|
2637
2822
|
|
|
2638
2823
|
/**
|
|
2639
2824
|
* Hidden native checkbox input for accessibility
|
|
@@ -2645,7 +2830,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
2645
2830
|
},
|
|
2646
2831
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
2647
2832
|
componentId: "sc-1ddpctx-0"
|
|
2648
|
-
})(templateObject_1$
|
|
2833
|
+
})(templateObject_1$f || (templateObject_1$f = __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
2834
|
/**
|
|
2650
2835
|
* Custom checkbox visual component
|
|
2651
2836
|
* 24px × 24px for 8px grid alignment
|
|
@@ -2662,7 +2847,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2662
2847
|
},
|
|
2663
2848
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2664
2849
|
componentId: "sc-1ddpctx-1"
|
|
2665
|
-
})(templateObject_2$
|
|
2850
|
+
})(templateObject_2$c || (templateObject_2$c = __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
2851
|
/**
|
|
2667
2852
|
* Container for checkbox with proper spacing and alignment
|
|
2668
2853
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -2695,7 +2880,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
2695
2880
|
},
|
|
2696
2881
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
2697
2882
|
componentId: "sc-1ddpctx-2"
|
|
2698
|
-
})(templateObject_3$
|
|
2883
|
+
})(templateObject_3$a || (templateObject_3$a = __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
2884
|
/**
|
|
2700
2885
|
* Label text with proper typography
|
|
2701
2886
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -2712,20 +2897,20 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
2712
2897
|
},
|
|
2713
2898
|
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
2714
2899
|
componentId: "sc-1ddpctx-3"
|
|
2715
|
-
})(templateObject_4$
|
|
2900
|
+
})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
2716
2901
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
2717
2902
|
});
|
|
2718
|
-
var templateObject_1$
|
|
2903
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$a, templateObject_4$9;
|
|
2719
2904
|
|
|
2720
2905
|
React.createElement;
|
|
2721
2906
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
2722
2907
|
displayName: "Checkbox__StyledFieldContainer",
|
|
2723
2908
|
componentId: "sc-vquz3v-0"
|
|
2724
|
-
})(templateObject_1$
|
|
2909
|
+
})(templateObject_1$e || (templateObject_1$e = __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
2910
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
2726
2911
|
displayName: "Checkbox__StyledHelperText",
|
|
2727
2912
|
componentId: "sc-vquz3v-1"
|
|
2728
|
-
})(templateObject_2$
|
|
2913
|
+
})(templateObject_2$b || (templateObject_2$b = __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
2914
|
/**
|
|
2730
2915
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2731
2916
|
*
|
|
@@ -2838,13 +3023,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
2838
3023
|
}, error));
|
|
2839
3024
|
});
|
|
2840
3025
|
Checkbox.displayName = 'Checkbox';
|
|
2841
|
-
var templateObject_1$
|
|
3026
|
+
var templateObject_1$e, templateObject_2$b;
|
|
2842
3027
|
|
|
2843
3028
|
React.createElement;
|
|
2844
3029
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
2845
3030
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
2846
3031
|
componentId: "sc-ae049w-0"
|
|
2847
|
-
})(templateObject_1$
|
|
3032
|
+
})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"], ["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"])));
|
|
2848
3033
|
var ChipGroup = function ChipGroup(_a) {
|
|
2849
3034
|
var labels = _a.labels,
|
|
2850
3035
|
_b = _a.variant,
|
|
@@ -2863,7 +3048,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
2863
3048
|
});
|
|
2864
3049
|
})));
|
|
2865
3050
|
};
|
|
2866
|
-
var templateObject_1$
|
|
3051
|
+
var templateObject_1$d;
|
|
2867
3052
|
|
|
2868
3053
|
React.createElement;
|
|
2869
3054
|
var _a$2 = tokensData.semantic,
|
|
@@ -2873,15 +3058,15 @@ var _a$2 = tokensData.semantic,
|
|
|
2873
3058
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
2874
3059
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
2875
3060
|
componentId: "sc-1p1t0kp-0"
|
|
2876
|
-
})(templateObject_1$
|
|
3061
|
+
})(templateObject_1$c || (templateObject_1$c = __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
3062
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
2878
3063
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
2879
3064
|
componentId: "sc-1p1t0kp-1"
|
|
2880
|
-
})(templateObject_2$
|
|
3065
|
+
})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n width: 100%;\n"], ["\n position: relative;\n display: inline-block;\n width: 100%;\n"])));
|
|
2881
3066
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
2882
3067
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
2883
3068
|
componentId: "sc-1p1t0kp-2"
|
|
2884
|
-
})(templateObject_3$
|
|
3069
|
+
})(templateObject_3$9 || (templateObject_3$9 = __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
3070
|
var CopyButton = function CopyButton(_a) {
|
|
2886
3071
|
var text = _a.text,
|
|
2887
3072
|
onCopy = _a.onCopy;
|
|
@@ -2958,7 +3143,7 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
2958
3143
|
onCopy: onCopy
|
|
2959
3144
|
}));
|
|
2960
3145
|
};
|
|
2961
|
-
var templateObject_1$
|
|
3146
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9;
|
|
2962
3147
|
|
|
2963
3148
|
React.createElement;
|
|
2964
3149
|
var _a$1 = tokensData.base,
|
|
@@ -2967,23 +3152,23 @@ var _a$1 = tokensData.base,
|
|
|
2967
3152
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
2968
3153
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
2969
3154
|
componentId: "sc-1mi4lso-0"
|
|
2970
|
-
})(templateObject_1$
|
|
3155
|
+
})(templateObject_1$b || (templateObject_1$b = __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
3156
|
var ImageWrapper = styled.div.withConfig({
|
|
2972
3157
|
displayName: "FeatureBlock__ImageWrapper",
|
|
2973
3158
|
componentId: "sc-1mi4lso-1"
|
|
2974
|
-
})(templateObject_2$
|
|
3159
|
+
})(templateObject_2$9 || (templateObject_2$9 = __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
3160
|
var ContentSection = styled.div.withConfig({
|
|
2976
3161
|
displayName: "FeatureBlock__ContentSection",
|
|
2977
3162
|
componentId: "sc-1mi4lso-2"
|
|
2978
|
-
})(templateObject_3$
|
|
3163
|
+
})(templateObject_3$8 || (templateObject_3$8 = __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
3164
|
var ButtonWrapper = styled.div.withConfig({
|
|
2980
3165
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
2981
3166
|
componentId: "sc-1mi4lso-3"
|
|
2982
|
-
})(templateObject_4$
|
|
3167
|
+
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
2983
3168
|
var ContentWrapper = styled.div.withConfig({
|
|
2984
3169
|
displayName: "FeatureBlock__ContentWrapper",
|
|
2985
3170
|
componentId: "sc-1mi4lso-4"
|
|
2986
|
-
})(templateObject_5$
|
|
3171
|
+
})(templateObject_5$7 || (templateObject_5$7 = __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
3172
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
2988
3173
|
var title = _a.title,
|
|
2989
3174
|
excerpt = _a.excerpt,
|
|
@@ -3023,7 +3208,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
3023
3208
|
onClick: onReadMore
|
|
3024
3209
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
3025
3210
|
};
|
|
3026
|
-
var templateObject_1$
|
|
3211
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$8, templateObject_5$7;
|
|
3027
3212
|
|
|
3028
3213
|
React.createElement;
|
|
3029
3214
|
var _a = tokensData.base,
|
|
@@ -3038,14 +3223,14 @@ var _a = tokensData.base,
|
|
|
3038
3223
|
var DropdownContainer = styled.div.withConfig({
|
|
3039
3224
|
displayName: "Dropdown__DropdownContainer",
|
|
3040
3225
|
componentId: "sc-kz07c4-0"
|
|
3041
|
-
})(templateObject_1$
|
|
3226
|
+
})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
3042
3227
|
var DropdownTrigger = styled.button.withConfig({
|
|
3043
3228
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3044
3229
|
return !prop.startsWith('$');
|
|
3045
3230
|
},
|
|
3046
3231
|
displayName: "Dropdown__DropdownTrigger",
|
|
3047
3232
|
componentId: "sc-kz07c4-1"
|
|
3048
|
-
})(templateObject_2$
|
|
3233
|
+
})(templateObject_2$8 || (templateObject_2$8 = __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
3234
|
var $hasError = _a.$hasError;
|
|
3050
3235
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
3051
3236
|
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
@@ -3065,7 +3250,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
3065
3250
|
},
|
|
3066
3251
|
displayName: "Dropdown__DropdownIcon",
|
|
3067
3252
|
componentId: "sc-kz07c4-2"
|
|
3068
|
-
})(templateObject_3$
|
|
3253
|
+
})(templateObject_3$7 || (templateObject_3$7 = __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
3254
|
var $isOpen = _a.$isOpen;
|
|
3070
3255
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
3071
3256
|
});
|
|
@@ -3075,7 +3260,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
3075
3260
|
},
|
|
3076
3261
|
displayName: "Dropdown__DropdownMenu",
|
|
3077
3262
|
componentId: "sc-kz07c4-3"
|
|
3078
|
-
})(templateObject_4$
|
|
3263
|
+
})(templateObject_4$7 || (templateObject_4$7 = __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
3264
|
var $isOpen = _a.$isOpen;
|
|
3080
3265
|
return $isOpen ? 1 : 0;
|
|
3081
3266
|
}, function (_a) {
|
|
@@ -3091,7 +3276,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3091
3276
|
},
|
|
3092
3277
|
displayName: "Dropdown__DropdownOption",
|
|
3093
3278
|
componentId: "sc-kz07c4-4"
|
|
3094
|
-
})(templateObject_5$
|
|
3279
|
+
})(templateObject_5$6 || (templateObject_5$6 = __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
3280
|
var $isSelected = _a.$isSelected,
|
|
3096
3281
|
$isFocused = _a.$isFocused;
|
|
3097
3282
|
if ($isFocused) return color.background.surface;
|
|
@@ -3101,7 +3286,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3101
3286
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
3102
3287
|
displayName: "Dropdown__StyledHelperText",
|
|
3103
3288
|
componentId: "sc-kz07c4-5"
|
|
3104
|
-
})(templateObject_6$
|
|
3289
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography.caption, function (_a) {
|
|
3105
3290
|
var $hasError = _a.$hasError;
|
|
3106
3291
|
return $hasError ? color.text.error : color.text.subdued;
|
|
3107
3292
|
}, spacing[2]);
|
|
@@ -3268,7 +3453,204 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3268
3453
|
id: helperId
|
|
3269
3454
|
}, helperText));
|
|
3270
3455
|
};
|
|
3271
|
-
var templateObject_1$
|
|
3456
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$7, templateObject_4$7, templateObject_5$6, templateObject_6$6;
|
|
3457
|
+
|
|
3458
|
+
React.createElement;
|
|
3459
|
+
var semantic$6 = tokensData.semantic;
|
|
3460
|
+
var StyledList = styled.ul.withConfig({
|
|
3461
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3462
|
+
return !prop.startsWith('$');
|
|
3463
|
+
},
|
|
3464
|
+
displayName: "List__StyledList",
|
|
3465
|
+
componentId: "sc-1irksg5-0"
|
|
3466
|
+
})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n \n /* Divider styles */\n ", "\n"], ["\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n \n /* Divider styles */\n ", "\n"])), function (_a) {
|
|
3467
|
+
var $dividers = _a.$dividers;
|
|
3468
|
+
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$6.color.border["default"], ";\n }\n ");
|
|
3469
|
+
});
|
|
3470
|
+
var List = function List(_a) {
|
|
3471
|
+
var children = _a.children,
|
|
3472
|
+
_b = _a.dividers,
|
|
3473
|
+
dividers = _b === void 0 ? true : _b,
|
|
3474
|
+
_c = _a.spacing,
|
|
3475
|
+
spacing = _c === void 0 ? 'comfortable' : _c,
|
|
3476
|
+
className = _a.className,
|
|
3477
|
+
dataTestId = _a["data-testid"],
|
|
3478
|
+
props = __rest(_a, ["children", "dividers", "spacing", "className", 'data-testid']);
|
|
3479
|
+
return /*#__PURE__*/React.createElement(StyledList, _extends({
|
|
3480
|
+
$dividers: dividers,
|
|
3481
|
+
$spacing: spacing,
|
|
3482
|
+
className: className,
|
|
3483
|
+
"data-testid": dataTestId,
|
|
3484
|
+
role: "list"
|
|
3485
|
+
}, props), children);
|
|
3486
|
+
};
|
|
3487
|
+
List.displayName = 'List';
|
|
3488
|
+
var templateObject_1$9;
|
|
3489
|
+
|
|
3490
|
+
React.createElement;
|
|
3491
|
+
var semantic$5 = tokensData.semantic,
|
|
3492
|
+
base$5 = tokensData.base;
|
|
3493
|
+
var StyledListItem = styled.li.withConfig({
|
|
3494
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3495
|
+
return !prop.startsWith('$');
|
|
3496
|
+
},
|
|
3497
|
+
displayName: "ListItem__StyledListItem",
|
|
3498
|
+
componentId: "sc-1wzzt21-0"
|
|
3499
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n"])), function (_a) {
|
|
3500
|
+
var $interactive = _a.$interactive;
|
|
3501
|
+
return $interactive && 'user-select: none;';
|
|
3502
|
+
}, function (_a) {
|
|
3503
|
+
var $disabled = _a.$disabled;
|
|
3504
|
+
return $disabled && "\n opacity: ".concat(base$5.opacity[50], ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
3505
|
+
});
|
|
3506
|
+
var StyledItemContent = styled.div.withConfig({
|
|
3507
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3508
|
+
return !prop.startsWith('$');
|
|
3509
|
+
},
|
|
3510
|
+
displayName: "ListItem__StyledItemContent",
|
|
3511
|
+
componentId: "sc-1wzzt21-1"
|
|
3512
|
+
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color 150ms ease;\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"], ["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color 150ms ease;\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"])), semantic$5.spacing.layout.md, function (_a) {
|
|
3513
|
+
var $spacing = _a.$spacing;
|
|
3514
|
+
return $spacing === 'compact' ? "".concat(semantic$5.spacing.layout.sm, " ").concat(semantic$5.spacing.layout.md) : "".concat(semantic$5.spacing.layout.md, " ").concat(semantic$5.spacing.layout.lg);
|
|
3515
|
+
}, base$5.border.radius[2], function (_a) {
|
|
3516
|
+
var $selected = _a.$selected;
|
|
3517
|
+
return $selected ? semantic$5.color.background['interactive-subtle'] : 'transparent';
|
|
3518
|
+
}, function (_a) {
|
|
3519
|
+
var $interactive = _a.$interactive,
|
|
3520
|
+
$disabled = _a.$disabled;
|
|
3521
|
+
if ($disabled) return 'not-allowed';
|
|
3522
|
+
if ($interactive) return 'pointer';
|
|
3523
|
+
return 'default';
|
|
3524
|
+
}, function (_a) {
|
|
3525
|
+
var $interactive = _a.$interactive,
|
|
3526
|
+
$disabled = _a.$disabled,
|
|
3527
|
+
$selected = _a.$selected;
|
|
3528
|
+
return !$disabled && $interactive && "\n &:hover {\n background-color: ".concat($selected ? tokensData.component.button.variants.secondary.backgroundColor : tokensData.component.button.variants.secondary.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat(tokensData.component.button.variants.naked.backgroundColor, ";\n }\n ");
|
|
3529
|
+
}, semantic$5.color.border.interactive);
|
|
3530
|
+
var StyledIconContainer = styled.div.withConfig({
|
|
3531
|
+
displayName: "ListItem__StyledIconContainer",
|
|
3532
|
+
componentId: "sc-1wzzt21-2"
|
|
3533
|
+
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n"])));
|
|
3534
|
+
var StyledTextContent = styled.div.withConfig({
|
|
3535
|
+
displayName: "ListItem__StyledTextContent",
|
|
3536
|
+
componentId: "sc-1wzzt21-3"
|
|
3537
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"])), semantic$5.spacing.layout.xs);
|
|
3538
|
+
var StyledRightContent = styled.div.withConfig({
|
|
3539
|
+
displayName: "ListItem__StyledRightContent",
|
|
3540
|
+
componentId: "sc-1wzzt21-4"
|
|
3541
|
+
})(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"])), semantic$5.spacing.layout.sm);
|
|
3542
|
+
var StyledChevronIcon = styled.div.withConfig({
|
|
3543
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3544
|
+
return !prop.startsWith('$');
|
|
3545
|
+
},
|
|
3546
|
+
displayName: "ListItem__StyledChevronIcon",
|
|
3547
|
+
componentId: "sc-1wzzt21-5"
|
|
3548
|
+
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"])), semantic$5.color.icon.subdued, function (_a) {
|
|
3549
|
+
var $expanded = _a.$expanded;
|
|
3550
|
+
return $expanded ? '180deg' : '0deg';
|
|
3551
|
+
});
|
|
3552
|
+
var StyledExpandedContent = styled.div.withConfig({
|
|
3553
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3554
|
+
return !prop.startsWith('$');
|
|
3555
|
+
},
|
|
3556
|
+
displayName: "ListItem__StyledExpandedContent",
|
|
3557
|
+
componentId: "sc-1wzzt21-6"
|
|
3558
|
+
})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"], ["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"])), function (_a) {
|
|
3559
|
+
var $expanded = _a.$expanded;
|
|
3560
|
+
return $expanded ? '1000px' : '0';
|
|
3561
|
+
}, function (_a) {
|
|
3562
|
+
var $expanded = _a.$expanded;
|
|
3563
|
+
return $expanded ? '1' : '0';
|
|
3564
|
+
}, function (_a) {
|
|
3565
|
+
var $expanded = _a.$expanded,
|
|
3566
|
+
$spacing = _a.$spacing;
|
|
3567
|
+
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$5.spacing.layout.sm, " ").concat(semantic$5.spacing.layout.md, " ").concat(semantic$5.spacing.layout.sm, " 48px") : "".concat(semantic$5.spacing.layout.sm, " ").concat(semantic$5.spacing.layout.lg, " ").concat(semantic$5.spacing.layout.md, " 60px"), ";\n background-color: ").concat(semantic$5.color.background['subtle'], ";\n border-radius: ").concat(base$5.border.radius[2], ";\n margin: 0 ").concat($spacing === 'compact' ? semantic$5.spacing.layout.md : semantic$5.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$5.spacing.layout.sm : semantic$5.spacing.layout.md, ";\n ");
|
|
3568
|
+
});
|
|
3569
|
+
var ListItem = function ListItem(_a) {
|
|
3570
|
+
var primary = _a.primary,
|
|
3571
|
+
secondary = _a.secondary,
|
|
3572
|
+
badge = _a.badge,
|
|
3573
|
+
icon = _a.icon,
|
|
3574
|
+
_b = _a.expandable,
|
|
3575
|
+
expandable = _b === void 0 ? false : _b,
|
|
3576
|
+
_c = _a.expanded,
|
|
3577
|
+
expanded = _c === void 0 ? false : _c,
|
|
3578
|
+
onToggle = _a.onToggle,
|
|
3579
|
+
_d = _a.interactive,
|
|
3580
|
+
interactive = _d === void 0 ? false : _d,
|
|
3581
|
+
onClick = _a.onClick,
|
|
3582
|
+
_e = _a.disabled,
|
|
3583
|
+
disabled = _e === void 0 ? false : _e,
|
|
3584
|
+
_f = _a.selected,
|
|
3585
|
+
selected = _f === void 0 ? false : _f,
|
|
3586
|
+
_g = _a.spacing,
|
|
3587
|
+
spacing = _g === void 0 ? 'comfortable' : _g,
|
|
3588
|
+
children = _a.children,
|
|
3589
|
+
className = _a.className,
|
|
3590
|
+
dataTestId = _a["data-testid"],
|
|
3591
|
+
props = __rest(_a, ["primary", "secondary", "badge", "icon", "expandable", "expanded", "onToggle", "interactive", "onClick", "disabled", "selected", "spacing", "children", "className", 'data-testid']);
|
|
3592
|
+
var isInteractive = interactive || expandable;
|
|
3593
|
+
var role = isInteractive ? 'button' : undefined;
|
|
3594
|
+
var ariaExpanded = expandable ? expanded : undefined;
|
|
3595
|
+
var ariaDisabled = disabled ? true : undefined;
|
|
3596
|
+
var ariaCurrent = selected ? 'true' : undefined;
|
|
3597
|
+
var handleClick = function handleClick() {
|
|
3598
|
+
if (disabled) return;
|
|
3599
|
+
if (expandable && onToggle) {
|
|
3600
|
+
onToggle();
|
|
3601
|
+
} else if (onClick) {
|
|
3602
|
+
onClick();
|
|
3603
|
+
}
|
|
3604
|
+
};
|
|
3605
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
3606
|
+
if (disabled) return;
|
|
3607
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
3608
|
+
event.preventDefault();
|
|
3609
|
+
handleClick();
|
|
3610
|
+
}
|
|
3611
|
+
};
|
|
3612
|
+
return /*#__PURE__*/React.createElement(StyledListItem, _extends({
|
|
3613
|
+
$interactive: isInteractive,
|
|
3614
|
+
$disabled: disabled,
|
|
3615
|
+
$selected: selected,
|
|
3616
|
+
$spacing: spacing,
|
|
3617
|
+
className: className,
|
|
3618
|
+
"data-testid": dataTestId,
|
|
3619
|
+
role: "listitem"
|
|
3620
|
+
}, props), /*#__PURE__*/React.createElement(StyledItemContent, {
|
|
3621
|
+
$interactive: isInteractive,
|
|
3622
|
+
$disabled: disabled,
|
|
3623
|
+
$selected: selected,
|
|
3624
|
+
$spacing: spacing,
|
|
3625
|
+
role: role,
|
|
3626
|
+
"aria-expanded": ariaExpanded,
|
|
3627
|
+
"aria-disabled": ariaDisabled,
|
|
3628
|
+
"aria-current": ariaCurrent,
|
|
3629
|
+
tabIndex: isInteractive && !disabled ? 0 : undefined,
|
|
3630
|
+
onClick: handleClick,
|
|
3631
|
+
onKeyDown: handleKeyDown
|
|
3632
|
+
}, icon && /*#__PURE__*/React.createElement(StyledIconContainer, {
|
|
3633
|
+
"aria-hidden": "true"
|
|
3634
|
+
}, icon), /*#__PURE__*/React.createElement(StyledTextContent, null, /*#__PURE__*/React.createElement(Typography, {
|
|
3635
|
+
variant: "body",
|
|
3636
|
+
color: "default"
|
|
3637
|
+
}, primary), secondary && /*#__PURE__*/React.createElement(Typography, {
|
|
3638
|
+
variant: "small",
|
|
3639
|
+
color: "subdued"
|
|
3640
|
+
}, secondary)), /*#__PURE__*/React.createElement(StyledRightContent, null, badge, expandable && /*#__PURE__*/React.createElement(StyledChevronIcon, {
|
|
3641
|
+
$expanded: expanded,
|
|
3642
|
+
"aria-hidden": "true"
|
|
3643
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
3644
|
+
name: "caretDown",
|
|
3645
|
+
size: "sm"
|
|
3646
|
+
})))), expandable && children && /*#__PURE__*/React.createElement(StyledExpandedContent, {
|
|
3647
|
+
$spacing: spacing,
|
|
3648
|
+
$expanded: expanded,
|
|
3649
|
+
"aria-hidden": !expanded
|
|
3650
|
+
}, children));
|
|
3651
|
+
};
|
|
3652
|
+
ListItem.displayName = 'ListItem';
|
|
3653
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$6, templateObject_4$6, templateObject_5$5, templateObject_6$5, templateObject_7$4;
|
|
3272
3654
|
|
|
3273
3655
|
var input = tokensData.component.input;
|
|
3274
3656
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -3699,7 +4081,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
3699
4081
|
}, inputProps)), showToggle && /*#__PURE__*/React.createElement(StyledToggleButton, null, /*#__PURE__*/React.createElement(IconButton, {
|
|
3700
4082
|
variant: "naked",
|
|
3701
4083
|
size: "small",
|
|
3702
|
-
iconName: showPassword ? '
|
|
4084
|
+
iconName: showPassword ? 'viewHide' : 'view',
|
|
3703
4085
|
onClick: togglePasswordVisibility,
|
|
3704
4086
|
disabled: disabled,
|
|
3705
4087
|
"aria-label": showPassword ? 'Hide password' : 'Show password',
|
|
@@ -3925,14 +4307,14 @@ var semantic$1 = tokensData.semantic,
|
|
|
3925
4307
|
var StyledSliderContainer = styled.div.withConfig({
|
|
3926
4308
|
displayName: "Slider__StyledSliderContainer",
|
|
3927
4309
|
componentId: "sc-6mh2d4-0"
|
|
3928
|
-
})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap:
|
|
4310
|
+
})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap:0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap:0;\n width: 100%;\n"])));
|
|
3929
4311
|
var StyledLabel$1 = styled.label.withConfig({
|
|
3930
4312
|
displayName: "Slider__StyledLabel",
|
|
3931
4313
|
componentId: "sc-6mh2d4-1"
|
|
3932
|
-
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), semantic$1.typography.label, function (_a) {
|
|
4314
|
+
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"])), semantic$1.typography.label, function (_a) {
|
|
3933
4315
|
var $disabled = _a.$disabled;
|
|
3934
4316
|
return $disabled ? semantic$1.color.text.disabled : semantic$1.color.text["default"];
|
|
3935
|
-
});
|
|
4317
|
+
}, semantic$1.spacing.layout.lg);
|
|
3936
4318
|
var StyledSliderTrackContainer = styled.div.withConfig({
|
|
3937
4319
|
displayName: "Slider__StyledSliderTrackContainer",
|
|
3938
4320
|
componentId: "sc-6mh2d4-2"
|
|
@@ -3952,17 +4334,17 @@ var StyledTrackFill = styled.div.withConfig({
|
|
|
3952
4334
|
componentId: "sc-6mh2d4-4"
|
|
3953
4335
|
})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"], ["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"])), function (_a) {
|
|
3954
4336
|
var $disabled = _a.$disabled;
|
|
3955
|
-
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.
|
|
4337
|
+
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
|
|
3956
4338
|
}, base$1.border.radius.circle);
|
|
3957
4339
|
var StyledThumb = styled.div.withConfig({
|
|
3958
4340
|
displayName: "Slider__StyledThumb",
|
|
3959
4341
|
componentId: "sc-6mh2d4-5"
|
|
3960
|
-
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"], ["\n position: absolute;\n width: ", ";\n height: ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"])), base$1.spacing[5], base$1.spacing[5], function (_a) {
|
|
4342
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"], ["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"])), base$1.spacing[5], base$1.spacing[5], semantic$1.spacing.layout.sm, function (_a) {
|
|
3961
4343
|
var $disabled = _a.$disabled;
|
|
3962
4344
|
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
|
|
3963
4345
|
}, base$1.border.width[2], function (_a) {
|
|
3964
4346
|
var $disabled = _a.$disabled;
|
|
3965
|
-
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.
|
|
4347
|
+
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
|
|
3966
4348
|
}, base$1.border.radius.circle, function (_a) {
|
|
3967
4349
|
var $disabled = _a.$disabled;
|
|
3968
4350
|
return $disabled ? 'not-allowed' : 'grab';
|
|
@@ -3973,7 +4355,7 @@ var StyledThumb = styled.div.withConfig({
|
|
|
3973
4355
|
var StyledValueLabel = styled.div.withConfig({
|
|
3974
4356
|
displayName: "Slider__StyledValueLabel",
|
|
3975
4357
|
componentId: "sc-6mh2d4-6"
|
|
3976
|
-
})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n position: absolute;\n top: -", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"], ["\n position: absolute;\n top: -", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"])), base$1.spacing[8], base$1.spacing[1], base$1.spacing[2], semantic$1.color.background.emphasis, semantic$1.color.text.inverse, semantic$1.typography.caption, base$1.border.radius[2], function (_a) {
|
|
4358
|
+
})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"], ["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"])), base$1.spacing[8], semantic$1.spacing.layout.sm, base$1.spacing[1], base$1.spacing[2], semantic$1.color.background.emphasis, semantic$1.color.text.inverse, semantic$1.typography.caption, base$1.border.radius[2], function (_a) {
|
|
3977
4359
|
var $disabled = _a.$disabled;
|
|
3978
4360
|
return $disabled ? base$1.opacity[50] : base$1.opacity[100];
|
|
3979
4361
|
}, base$1.spacing[1], base$1.spacing[1], base$1.spacing[1], semantic$1.color.background.emphasis);
|
|
@@ -4004,7 +4386,7 @@ var StyledMinMaxLabels = styled.div.withConfig({
|
|
|
4004
4386
|
* onRangeChange={(values) => console.log(values)}
|
|
4005
4387
|
* />
|
|
4006
4388
|
* ```
|
|
4007
|
-
*/])), semantic$1.typography.
|
|
4389
|
+
*/])), semantic$1.typography.body, semantic$1.color.text.subdued, base$1.spacing[1]);
|
|
4008
4390
|
/**
|
|
4009
4391
|
* Slider component for single value or range selection
|
|
4010
4392
|
*
|
|
@@ -4609,6 +4991,7 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
4609
4991
|
// Main design system exports
|
|
4610
4992
|
var tokens = tokensData;
|
|
4611
4993
|
|
|
4994
|
+
exports.Alert = Alert;
|
|
4612
4995
|
exports.Avatar = Avatar;
|
|
4613
4996
|
exports.Badge = Badge;
|
|
4614
4997
|
exports.BooleanChip = BooleanChip;
|
|
@@ -4632,6 +5015,8 @@ exports.GridCol = GridCol;
|
|
|
4632
5015
|
exports.Icon = Icon;
|
|
4633
5016
|
exports.IconButton = IconButton;
|
|
4634
5017
|
exports.LegacyChip = LegacyChip;
|
|
5018
|
+
exports.List = List;
|
|
5019
|
+
exports.ListItem = ListItem;
|
|
4635
5020
|
exports.NumberInput = NumberInput;
|
|
4636
5021
|
exports.PageTitle = PageTitle;
|
|
4637
5022
|
exports.PasswordField = PasswordField;
|