@common-origin/design-system 1.9.8 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/molecules/ArtCard/ArtCard.d.ts +12 -0
- package/dist/components/molecules/ArtCard/index.d.ts +1 -0
- package/dist/components/molecules/DesignCard/DesignCard.d.ts +13 -0
- package/dist/components/molecules/DesignCard/index.d.ts +1 -0
- package/dist/components/molecules/ReleaseCard/ReleaseCard.d.ts +9 -0
- package/dist/components/molecules/ReleaseCard/index.d.ts +1 -0
- package/dist/components/molecules/TextField/InputBase.d.ts +19 -0
- package/dist/components/molecules/TextField/TextField.d.ts +56 -0
- package/dist/components/molecules/TextField/index.d.ts +4 -0
- package/dist/components/molecules/index.d.ts +1 -0
- package/dist/index.d.ts +40 -0
- package/dist/index.esm.js +283 -103
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +284 -101
- package/dist/index.js.map +1 -1
- package/dist/styles/icons.json +98 -0
- package/dist/styles/tokens.json +673 -0
- package/dist/tokens/index.esm.js +43 -3
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +43 -3
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/tokens.d.ts +40 -0
- package/package.json +2 -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$2 = {
|
|
106
106
|
border: {
|
|
107
107
|
radius: {
|
|
108
108
|
"1": "0.125rem",
|
|
@@ -447,7 +447,7 @@ var component = {
|
|
|
447
447
|
textColor: "#212529",
|
|
448
448
|
borderRadius: "0.25rem",
|
|
449
449
|
padding: "0.25rem 0.5rem",
|
|
450
|
-
font: "
|
|
450
|
+
font: "500 0.875rem/1.25rem 'Inter', sans-serif"
|
|
451
451
|
},
|
|
452
452
|
variants: {
|
|
453
453
|
emphasis: {
|
|
@@ -470,7 +470,7 @@ var component = {
|
|
|
470
470
|
},
|
|
471
471
|
medium: {
|
|
472
472
|
padding: "0.25rem 0.5rem",
|
|
473
|
-
font: "
|
|
473
|
+
font: "500 0.875rem/1.25rem 'Inter', sans-serif"
|
|
474
474
|
},
|
|
475
475
|
large: {
|
|
476
476
|
padding: "0.5rem 0.75rem",
|
|
@@ -595,9 +595,49 @@ var component = {
|
|
|
595
595
|
}
|
|
596
596
|
}
|
|
597
597
|
},
|
|
598
|
+
input: {
|
|
599
|
+
"default": {
|
|
600
|
+
backgroundColor: "#ffffff",
|
|
601
|
+
textColor: "#212529",
|
|
602
|
+
borderColor: "#dee2e6",
|
|
603
|
+
borderRadius: "0.25rem",
|
|
604
|
+
borderWidth: "0.0625rem",
|
|
605
|
+
paddingY: "11px",
|
|
606
|
+
paddingX: "1rem",
|
|
607
|
+
font: "400 1rem/1.5rem 'Inter', sans-serif"
|
|
608
|
+
},
|
|
609
|
+
placeholder: {
|
|
610
|
+
textColor: "#adb5bd"
|
|
611
|
+
},
|
|
612
|
+
hover: {
|
|
613
|
+
borderColor: "#343a40"
|
|
614
|
+
},
|
|
615
|
+
focus: {
|
|
616
|
+
borderColor: "#343a40",
|
|
617
|
+
outline: "0.125rem solid #343a40",
|
|
618
|
+
outlineOffset: "2px"
|
|
619
|
+
},
|
|
620
|
+
error: {
|
|
621
|
+
borderColor: "#D31510",
|
|
622
|
+
focus: {
|
|
623
|
+
borderColor: "#D31510",
|
|
624
|
+
outline: "0.125rem solid #343a40",
|
|
625
|
+
outlineOffset: "2px"
|
|
626
|
+
},
|
|
627
|
+
hover: {
|
|
628
|
+
borderColor: "#D31510"
|
|
629
|
+
}
|
|
630
|
+
},
|
|
631
|
+
disabled: {
|
|
632
|
+
backgroundColor: "#dee2e6",
|
|
633
|
+
textColor: "#adb5bd",
|
|
634
|
+
borderColor: "#dee2e6",
|
|
635
|
+
cursor: "not-allowed"
|
|
636
|
+
}
|
|
637
|
+
},
|
|
598
638
|
$ref: "./component/index.json"
|
|
599
639
|
};
|
|
600
|
-
var semantic$
|
|
640
|
+
var semantic$3 = {
|
|
601
641
|
border: {
|
|
602
642
|
"default": "0.0625rem solid #e9ecef",
|
|
603
643
|
subtle: "0.0625rem solid #dee2e6",
|
|
@@ -718,7 +758,7 @@ var semantic$2 = {
|
|
|
718
758
|
button1: "500 1rem/1.5rem 'Inter', sans-serif",
|
|
719
759
|
button2: "500 0.875rem/1.5rem 'Inter', sans-serif",
|
|
720
760
|
button3: "500 0.75rem/1rem 'Inter', sans-serif",
|
|
721
|
-
label: "
|
|
761
|
+
label: "500 0.875rem/1.25rem 'Inter', sans-serif",
|
|
722
762
|
breadcrumb: "400 0.75rem/1.125rem 'Inter', sans-serif"
|
|
723
763
|
},
|
|
724
764
|
motion: {
|
|
@@ -734,9 +774,9 @@ var semantic$2 = {
|
|
|
734
774
|
$ref: "./semantic/index.json"
|
|
735
775
|
};
|
|
736
776
|
var tokensData = {
|
|
737
|
-
base: base$
|
|
777
|
+
base: base$2,
|
|
738
778
|
component: component,
|
|
739
|
-
semantic: semantic$
|
|
779
|
+
semantic: semantic$3
|
|
740
780
|
};
|
|
741
781
|
|
|
742
782
|
React.createElement;
|
|
@@ -746,7 +786,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
746
786
|
},
|
|
747
787
|
displayName: "Avatar__AvatarContainer",
|
|
748
788
|
componentId: "sc-ezn4ax-0"
|
|
749
|
-
})(templateObject_1$
|
|
789
|
+
})(templateObject_1$p || (templateObject_1$p = __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) {
|
|
750
790
|
var $size = _a.$size;
|
|
751
791
|
return tokensData.semantic.size.avatar[$size];
|
|
752
792
|
}, function (_a) {
|
|
@@ -759,14 +799,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
759
799
|
},
|
|
760
800
|
displayName: "Avatar__AvatarImage",
|
|
761
801
|
componentId: "sc-ezn4ax-1"
|
|
762
|
-
})(templateObject_2$
|
|
802
|
+
})(templateObject_2$d || (templateObject_2$d = __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);
|
|
763
803
|
var AvatarInitials = styled.span.withConfig({
|
|
764
804
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
765
805
|
return !prop.startsWith('$');
|
|
766
806
|
},
|
|
767
807
|
displayName: "Avatar__AvatarInitials",
|
|
768
808
|
componentId: "sc-ezn4ax-2"
|
|
769
|
-
})(templateObject_3$
|
|
809
|
+
})(templateObject_3$a || (templateObject_3$a = __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"
|
|
770
810
|
// Helper function to get initials from name
|
|
771
811
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
772
812
|
var $size = _a.$size;
|
|
@@ -829,7 +869,7 @@ var Avatar = function Avatar(_a) {
|
|
|
829
869
|
"aria-hidden": "true"
|
|
830
870
|
}, initials));
|
|
831
871
|
};
|
|
832
|
-
var templateObject_1$
|
|
872
|
+
var templateObject_1$p, templateObject_2$d, templateObject_3$a;
|
|
833
873
|
|
|
834
874
|
React.createElement;
|
|
835
875
|
var _a$5 = tokensData.semantic,
|
|
@@ -897,7 +937,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
897
937
|
},
|
|
898
938
|
displayName: "Typography__StyledTypography",
|
|
899
939
|
componentId: "sc-17mqo4k-0"
|
|
900
|
-
})(templateObject_1$
|
|
940
|
+
})(templateObject_1$o || (templateObject_1$o = __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"
|
|
901
941
|
/**
|
|
902
942
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
903
943
|
*
|
|
@@ -964,23 +1004,23 @@ var Typography = function Typography(_a) {
|
|
|
964
1004
|
"data-testid": dataTestId
|
|
965
1005
|
}, children);
|
|
966
1006
|
};
|
|
967
|
-
var templateObject_1$
|
|
1007
|
+
var templateObject_1$o;
|
|
968
1008
|
|
|
969
1009
|
React.createElement;
|
|
970
1010
|
var color$3 = tokensData.semantic.color;
|
|
971
1011
|
tokensData.base.shadow;
|
|
972
|
-
var scaleIn = styled.keyframes(templateObject_1$
|
|
1012
|
+
var scaleIn = styled.keyframes(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
973
1013
|
var BadgeWrapper = styled.span.withConfig({
|
|
974
1014
|
displayName: "Badge__BadgeWrapper",
|
|
975
1015
|
componentId: "sc-tjz4pp-0"
|
|
976
|
-
})(templateObject_2$
|
|
1016
|
+
})(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
977
1017
|
var BadgeIndicator = styled.span.withConfig({
|
|
978
1018
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
979
1019
|
return !prop.startsWith('$');
|
|
980
1020
|
},
|
|
981
1021
|
displayName: "Badge__BadgeIndicator",
|
|
982
1022
|
componentId: "sc-tjz4pp-1"
|
|
983
|
-
})(templateObject_3$
|
|
1023
|
+
})(templateObject_3$9 || (templateObject_3$9 = __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) {
|
|
984
1024
|
return props.$isVisible ? 'flex' : 'none';
|
|
985
1025
|
}, function (props) {
|
|
986
1026
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1005,7 +1045,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1005
1045
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
1006
1046
|
displayName: "Badge__ScreenReaderOnly",
|
|
1007
1047
|
componentId: "sc-tjz4pp-2"
|
|
1008
|
-
})(templateObject_4$
|
|
1048
|
+
})(templateObject_4$7 || (templateObject_4$7 = __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"])));
|
|
1009
1049
|
var Badge = function Badge(_a) {
|
|
1010
1050
|
var children = _a.children,
|
|
1011
1051
|
_b = _a.count,
|
|
@@ -1036,7 +1076,7 @@ var Badge = function Badge(_a) {
|
|
|
1036
1076
|
color: "inverse"
|
|
1037
1077
|
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
|
|
1038
1078
|
};
|
|
1039
|
-
var templateObject_1$
|
|
1079
|
+
var templateObject_1$n, templateObject_2$c, templateObject_3$9, templateObject_4$7;
|
|
1040
1080
|
|
|
1041
1081
|
React.createElement;
|
|
1042
1082
|
var StyledBox = styled.div.withConfig({
|
|
@@ -1048,13 +1088,13 @@ var StyledBox = styled.div.withConfig({
|
|
|
1048
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"
|
|
1049
1089
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1050
1090
|
])), function (props) {
|
|
1051
|
-
return props.$display && styled.css(templateObject_1$
|
|
1091
|
+
return props.$display && styled.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1052
1092
|
}, function (props) {
|
|
1053
|
-
return props.$flexDirection && styled.css(templateObject_2$
|
|
1093
|
+
return props.$flexDirection && styled.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1054
1094
|
}, function (props) {
|
|
1055
|
-
return props.$justifyContent && styled.css(templateObject_3$
|
|
1095
|
+
return props.$justifyContent && styled.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1056
1096
|
}, function (props) {
|
|
1057
|
-
return props.$alignItems && styled.css(templateObject_4$
|
|
1097
|
+
return props.$alignItems && styled.css(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1058
1098
|
}, function (props) {
|
|
1059
1099
|
return props.$flexWrap && styled.css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1060
1100
|
}, function (props) {
|
|
@@ -1238,7 +1278,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1238
1278
|
}, rest), children);
|
|
1239
1279
|
};
|
|
1240
1280
|
var Box = BoxTransform;
|
|
1241
|
-
var templateObject_1$
|
|
1281
|
+
var templateObject_1$m, templateObject_2$b, templateObject_3$8, templateObject_4$6, templateObject_5$4, templateObject_6$2, templateObject_7$2, templateObject_8$1, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, 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;
|
|
1242
1282
|
|
|
1243
1283
|
var add = {
|
|
1244
1284
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1369,7 +1409,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1369
1409
|
},
|
|
1370
1410
|
displayName: "Icon__IconStyled",
|
|
1371
1411
|
componentId: "sc-1105czq-0"
|
|
1372
|
-
})(templateObject_1$
|
|
1412
|
+
})(templateObject_1$l || (templateObject_1$l = __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) {
|
|
1373
1413
|
var $size = _a.$size;
|
|
1374
1414
|
return tokensData.semantic.size.icon[$size];
|
|
1375
1415
|
}, function (_a) {
|
|
@@ -1433,13 +1473,13 @@ var Icon = function Icon(_a) {
|
|
|
1433
1473
|
d: iconData.path
|
|
1434
1474
|
})));
|
|
1435
1475
|
};
|
|
1436
|
-
var templateObject_1$
|
|
1476
|
+
var templateObject_1$l;
|
|
1437
1477
|
|
|
1438
1478
|
React.createElement;
|
|
1439
1479
|
var button = tokensData.component.button,
|
|
1440
|
-
semantic$
|
|
1480
|
+
semantic$2 = tokensData.semantic;
|
|
1441
1481
|
// Base styles shared between button and link
|
|
1442
|
-
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$
|
|
1482
|
+
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$2.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");
|
|
1443
1483
|
// Dynamic variant styles using component tokens
|
|
1444
1484
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1445
1485
|
var $variant = _a.$variant;
|
|
@@ -1465,14 +1505,14 @@ var StyledButton = styled.button.withConfig({
|
|
|
1465
1505
|
},
|
|
1466
1506
|
displayName: "Button__StyledButton",
|
|
1467
1507
|
componentId: "sc-1eiuum9-0"
|
|
1468
|
-
})(templateObject_1$
|
|
1508
|
+
})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1469
1509
|
var StyledLink = styled.a.withConfig({
|
|
1470
1510
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1471
1511
|
return !prop.startsWith('$');
|
|
1472
1512
|
},
|
|
1473
1513
|
displayName: "Button__StyledLink",
|
|
1474
1514
|
componentId: "sc-1eiuum9-1"
|
|
1475
|
-
})(templateObject_2$
|
|
1515
|
+
})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1476
1516
|
// Helper function to get icon size based on button size
|
|
1477
1517
|
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1478
1518
|
// Helper function to get icon size based on button size
|
|
@@ -1565,7 +1605,7 @@ var Button = function Button(_a) {
|
|
|
1565
1605
|
"data-testid": dataTestId
|
|
1566
1606
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1567
1607
|
};
|
|
1568
|
-
var templateObject_1$
|
|
1608
|
+
var templateObject_1$k, templateObject_2$a;
|
|
1569
1609
|
|
|
1570
1610
|
var chip = tokensData.component.chip;
|
|
1571
1611
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1626,14 +1666,14 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1626
1666
|
},
|
|
1627
1667
|
displayName: "ChipBase__BaseChipStyled",
|
|
1628
1668
|
componentId: "sc-moa6zc-0"
|
|
1629
|
-
})(templateObject_1$
|
|
1669
|
+
})(templateObject_1$j || (templateObject_1$j = __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"
|
|
1630
1670
|
// Icon container for selected indicator or leading icons
|
|
1631
1671
|
])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1632
1672
|
// Icon container for selected indicator or leading icons
|
|
1633
1673
|
var IconContainer = styled.span.withConfig({
|
|
1634
1674
|
displayName: "ChipBase__IconContainer",
|
|
1635
1675
|
componentId: "sc-moa6zc-1"
|
|
1636
|
-
})(templateObject_2$
|
|
1676
|
+
})(templateObject_2$9 || (templateObject_2$9 = __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"
|
|
1637
1677
|
// Close button for dismissible chips
|
|
1638
1678
|
])), tokensData.semantic.spacing.layout.sm);
|
|
1639
1679
|
// Close button for dismissible chips
|
|
@@ -1643,7 +1683,7 @@ var CloseButton = styled.button.withConfig({
|
|
|
1643
1683
|
},
|
|
1644
1684
|
displayName: "ChipBase__CloseButton",
|
|
1645
1685
|
componentId: "sc-moa6zc-2"
|
|
1646
|
-
})(templateObject_3$
|
|
1686
|
+
})(templateObject_3$7 || (templateObject_3$7 = __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"
|
|
1647
1687
|
// Wrapper component that applies styles via CSS custom properties
|
|
1648
1688
|
])), tokensData.semantic.spacing.layout.sm, function (props) {
|
|
1649
1689
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
@@ -1678,7 +1718,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1678
1718
|
style: __assign(__assign({}, cssProps), style)
|
|
1679
1719
|
}, htmlProps), children);
|
|
1680
1720
|
};
|
|
1681
|
-
var templateObject_1$
|
|
1721
|
+
var templateObject_1$j, templateObject_2$9, templateObject_3$7;
|
|
1682
1722
|
|
|
1683
1723
|
React.createElement;
|
|
1684
1724
|
/**
|
|
@@ -1922,32 +1962,32 @@ var spacing$3 = tokensData.semantic.spacing;
|
|
|
1922
1962
|
var StyledContainer = styled.div.withConfig({
|
|
1923
1963
|
displayName: "Container__StyledContainer",
|
|
1924
1964
|
componentId: "sc-17dbj6n-0"
|
|
1925
|
-
})(templateObject_1$
|
|
1965
|
+
})(templateObject_1$i || (templateObject_1$i = __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']);
|
|
1926
1966
|
var Container = function Container(_a) {
|
|
1927
1967
|
var children = _a.children,
|
|
1928
1968
|
props = __rest(_a, ["children"]);
|
|
1929
1969
|
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
1930
1970
|
};
|
|
1931
|
-
var templateObject_1$
|
|
1971
|
+
var templateObject_1$i;
|
|
1932
1972
|
|
|
1933
1973
|
React.createElement;
|
|
1934
|
-
var base = tokensData.base;
|
|
1974
|
+
var base$1 = tokensData.base;
|
|
1935
1975
|
var PictureWrapper = styled.div.withConfig({
|
|
1936
1976
|
displayName: "Picture__PictureWrapper",
|
|
1937
1977
|
componentId: "sc-11d9tei-0"
|
|
1938
|
-
})(templateObject_1$
|
|
1978
|
+
})(templateObject_1$h || (templateObject_1$h = __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);
|
|
1939
1979
|
var ImageLink = styled.a.withConfig({
|
|
1940
1980
|
displayName: "Picture__ImageLink",
|
|
1941
1981
|
componentId: "sc-11d9tei-1"
|
|
1942
|
-
})(templateObject_2$
|
|
1982
|
+
})(templateObject_2$8 || (templateObject_2$8 = __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$1.duration.normal, base$1.easing.easeInOut);
|
|
1943
1983
|
var ImageButton = styled.button.withConfig({
|
|
1944
1984
|
displayName: "Picture__ImageButton",
|
|
1945
1985
|
componentId: "sc-11d9tei-2"
|
|
1946
|
-
})(templateObject_3$
|
|
1986
|
+
})(templateObject_3$6 || (templateObject_3$6 = __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$1.duration.normal, base$1.easing.easeInOut);
|
|
1947
1987
|
var StyledImage = styled.img.withConfig({
|
|
1948
1988
|
displayName: "Picture__StyledImage",
|
|
1949
1989
|
componentId: "sc-11d9tei-3"
|
|
1950
|
-
})(templateObject_4$
|
|
1990
|
+
})(templateObject_4$5 || (templateObject_4$5 = __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$1.border.radius[2]);
|
|
1951
1991
|
var Picture = function Picture(_a) {
|
|
1952
1992
|
var title = _a.title,
|
|
1953
1993
|
src = _a.src,
|
|
@@ -1974,7 +2014,7 @@ var Picture = function Picture(_a) {
|
|
|
1974
2014
|
"aria-label": "Read more about ".concat(title)
|
|
1975
2015
|
}, image) : image);
|
|
1976
2016
|
};
|
|
1977
|
-
var templateObject_1$
|
|
2017
|
+
var templateObject_1$h, templateObject_2$8, templateObject_3$6, templateObject_4$5;
|
|
1978
2018
|
|
|
1979
2019
|
React.createElement;
|
|
1980
2020
|
var _a$4 = tokensData.semantic,
|
|
@@ -1983,7 +2023,7 @@ var _a$4 = tokensData.semantic,
|
|
|
1983
2023
|
var TimeStyled = styled.time.withConfig({
|
|
1984
2024
|
displayName: "DateFormatter__TimeStyled",
|
|
1985
2025
|
componentId: "sc-5464cc-0"
|
|
1986
|
-
})(templateObject_1$
|
|
2026
|
+
})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography$1.label, color$2.text.subdued);
|
|
1987
2027
|
var DateFormatter = function DateFormatter(_a) {
|
|
1988
2028
|
var dateString = _a.dateString,
|
|
1989
2029
|
_b = _a.formatString,
|
|
@@ -1995,7 +2035,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
1995
2035
|
"data-testid": dataTestId
|
|
1996
2036
|
}, dateFns.format(date, formatString));
|
|
1997
2037
|
};
|
|
1998
|
-
var templateObject_1$
|
|
2038
|
+
var templateObject_1$g;
|
|
1999
2039
|
|
|
2000
2040
|
React.createElement;
|
|
2001
2041
|
var motion = tokensData.semantic.motion,
|
|
@@ -2006,7 +2046,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2006
2046
|
},
|
|
2007
2047
|
displayName: "IconButton__IconButtonStyled",
|
|
2008
2048
|
componentId: "sc-k8b14t-0"
|
|
2009
|
-
})(templateObject_1$
|
|
2049
|
+
})(templateObject_1$f || (templateObject_1$f = __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) {
|
|
2010
2050
|
var $variant = _a.$variant;
|
|
2011
2051
|
switch ($variant) {
|
|
2012
2052
|
case 'primary':
|
|
@@ -2117,7 +2157,7 @@ var IconButton = function IconButton(_a) {
|
|
|
2117
2157
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2118
2158
|
}));
|
|
2119
2159
|
};
|
|
2120
|
-
var templateObject_1$
|
|
2160
|
+
var templateObject_1$f;
|
|
2121
2161
|
|
|
2122
2162
|
React.createElement;
|
|
2123
2163
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -2126,10 +2166,10 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
2126
2166
|
},
|
|
2127
2167
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2128
2168
|
componentId: "sc-1nco33q-0"
|
|
2129
|
-
})(templateObject_3$
|
|
2130
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_1$
|
|
2169
|
+
})(templateObject_3$5 || (templateObject_3$5 = __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) {
|
|
2170
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_1$e || (templateObject_1$e = __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);
|
|
2131
2171
|
}, function (props) {
|
|
2132
|
-
return props.$variant === 'vertical' && styled.css(templateObject_2$
|
|
2172
|
+
return props.$variant === 'vertical' && styled.css(templateObject_2$7 || (templateObject_2$7 = __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);
|
|
2133
2173
|
});
|
|
2134
2174
|
var ProgressBarFill = styled.div.withConfig({
|
|
2135
2175
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2151,7 +2191,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2151
2191
|
backgroundColor = tokensData.semantic.color.background.interactive;
|
|
2152
2192
|
break;
|
|
2153
2193
|
}
|
|
2154
|
-
return styled.css(templateObject_4$
|
|
2194
|
+
return styled.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2155
2195
|
}, function (props) {
|
|
2156
2196
|
return props.$variant === 'horizontal' && styled.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2157
2197
|
}, function (props) {
|
|
@@ -2181,7 +2221,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2181
2221
|
$color: color
|
|
2182
2222
|
}));
|
|
2183
2223
|
};
|
|
2184
|
-
var templateObject_1$
|
|
2224
|
+
var templateObject_1$e, templateObject_2$7, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$1, templateObject_7$1;
|
|
2185
2225
|
|
|
2186
2226
|
React.createElement;
|
|
2187
2227
|
var StyledDivider = styled.div.withConfig({
|
|
@@ -2190,7 +2230,7 @@ var StyledDivider = styled.div.withConfig({
|
|
|
2190
2230
|
},
|
|
2191
2231
|
displayName: "Divider__StyledDivider",
|
|
2192
2232
|
componentId: "sc-1l0c8ja-0"
|
|
2193
|
-
})(templateObject_1$
|
|
2233
|
+
})(templateObject_1$d || (templateObject_1$d = __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"
|
|
2194
2234
|
/**
|
|
2195
2235
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2196
2236
|
*
|
|
@@ -2303,7 +2343,7 @@ var Divider = function Divider(_a) {
|
|
|
2303
2343
|
"aria-orientation": orientation
|
|
2304
2344
|
});
|
|
2305
2345
|
};
|
|
2306
|
-
var templateObject_1$
|
|
2346
|
+
var templateObject_1$d;
|
|
2307
2347
|
|
|
2308
2348
|
React.createElement;
|
|
2309
2349
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2312,7 +2352,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2312
2352
|
},
|
|
2313
2353
|
displayName: "Stack__StyledStack",
|
|
2314
2354
|
componentId: "sc-1ehkxgy-0"
|
|
2315
|
-
})(templateObject_1$
|
|
2355
|
+
})(templateObject_1$c || (templateObject_1$c = __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"
|
|
2316
2356
|
// Helper function to convert gap prop to CSS value
|
|
2317
2357
|
])));
|
|
2318
2358
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2350,17 +2390,17 @@ var Stack = function Stack(_a) {
|
|
|
2350
2390
|
"data-testid": dataTestId
|
|
2351
2391
|
}, children);
|
|
2352
2392
|
};
|
|
2353
|
-
var templateObject_1$
|
|
2393
|
+
var templateObject_1$c;
|
|
2354
2394
|
|
|
2355
2395
|
React.createElement;
|
|
2356
|
-
var semantic = tokensData.semantic;
|
|
2396
|
+
var semantic$1 = tokensData.semantic;
|
|
2357
2397
|
var StyledTag = styled.span.withConfig({
|
|
2358
2398
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2359
2399
|
return !prop.startsWith('$');
|
|
2360
2400
|
},
|
|
2361
2401
|
displayName: "Tag__StyledTag",
|
|
2362
2402
|
componentId: "sc-lzfmti-0"
|
|
2363
|
-
})(templateObject_1$
|
|
2403
|
+
})(templateObject_1$b || (templateObject_1$b = __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"
|
|
2364
2404
|
/**
|
|
2365
2405
|
* Tag component for categorizing and labeling content
|
|
2366
2406
|
*
|
|
@@ -2370,33 +2410,33 @@ var StyledTag = styled.span.withConfig({
|
|
|
2370
2410
|
var $variant = _a.$variant;
|
|
2371
2411
|
switch ($variant) {
|
|
2372
2412
|
case 'interactive':
|
|
2373
|
-
return semantic.color.background['interactive-subtle'];
|
|
2413
|
+
return semantic$1.color.background['interactive-subtle'];
|
|
2374
2414
|
case 'success':
|
|
2375
|
-
return semantic.color.background['success-subtle'];
|
|
2415
|
+
return semantic$1.color.background['success-subtle'];
|
|
2376
2416
|
case 'warning':
|
|
2377
|
-
return semantic.color.background['warning-subtle'];
|
|
2417
|
+
return semantic$1.color.background['warning-subtle'];
|
|
2378
2418
|
case 'error':
|
|
2379
|
-
return semantic.color.background['error-subtle'];
|
|
2419
|
+
return semantic$1.color.background['error-subtle'];
|
|
2380
2420
|
case 'emphasis':
|
|
2381
|
-
return semantic.color.background.emphasis;
|
|
2421
|
+
return semantic$1.color.background.emphasis;
|
|
2382
2422
|
default:
|
|
2383
|
-
return semantic.color.background.surface;
|
|
2423
|
+
return semantic$1.color.background.surface;
|
|
2384
2424
|
}
|
|
2385
2425
|
}, function (_a) {
|
|
2386
2426
|
var $variant = _a.$variant;
|
|
2387
2427
|
switch ($variant) {
|
|
2388
2428
|
case 'interactive':
|
|
2389
|
-
return semantic.color.text.interactive;
|
|
2429
|
+
return semantic$1.color.text.interactive;
|
|
2390
2430
|
case 'success':
|
|
2391
|
-
return semantic.color.text.success;
|
|
2431
|
+
return semantic$1.color.text.success;
|
|
2392
2432
|
case 'warning':
|
|
2393
|
-
return semantic.color.text.warning;
|
|
2433
|
+
return semantic$1.color.text.warning;
|
|
2394
2434
|
case 'error':
|
|
2395
|
-
return semantic.color.text.error;
|
|
2435
|
+
return semantic$1.color.text.error;
|
|
2396
2436
|
case 'emphasis':
|
|
2397
|
-
return semantic.color.text.inverse;
|
|
2437
|
+
return semantic$1.color.text.inverse;
|
|
2398
2438
|
default:
|
|
2399
|
-
return semantic.color.text["default"];
|
|
2439
|
+
return semantic$1.color.text["default"];
|
|
2400
2440
|
}
|
|
2401
2441
|
}, function (_a) {
|
|
2402
2442
|
var $variant = _a.$variant,
|
|
@@ -2404,17 +2444,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2404
2444
|
if (!$border) return 'none';
|
|
2405
2445
|
switch ($variant) {
|
|
2406
2446
|
case 'interactive':
|
|
2407
|
-
return "1px solid ".concat(semantic.color.border.interactive);
|
|
2447
|
+
return "1px solid ".concat(semantic$1.color.border.interactive);
|
|
2408
2448
|
case 'success':
|
|
2409
|
-
return "1px solid ".concat(semantic.color.border.success);
|
|
2449
|
+
return "1px solid ".concat(semantic$1.color.border.success);
|
|
2410
2450
|
case 'warning':
|
|
2411
|
-
return "1px solid ".concat(semantic.color.border.warning);
|
|
2451
|
+
return "1px solid ".concat(semantic$1.color.border.warning);
|
|
2412
2452
|
case 'error':
|
|
2413
|
-
return "1px solid ".concat(semantic.color.border.error);
|
|
2453
|
+
return "1px solid ".concat(semantic$1.color.border.error);
|
|
2414
2454
|
case 'emphasis':
|
|
2415
|
-
return "1px solid ".concat(semantic.color.background.emphasis);
|
|
2455
|
+
return "1px solid ".concat(semantic$1.color.background.emphasis);
|
|
2416
2456
|
default:
|
|
2417
|
-
return "1px solid ".concat(semantic.color.border["default"]);
|
|
2457
|
+
return "1px solid ".concat(semantic$1.color.border["default"]);
|
|
2418
2458
|
}
|
|
2419
2459
|
});
|
|
2420
2460
|
/**
|
|
@@ -2441,18 +2481,18 @@ var Tag = function Tag(_a) {
|
|
|
2441
2481
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
2442
2482
|
}, props), children);
|
|
2443
2483
|
};
|
|
2444
|
-
var templateObject_1$
|
|
2484
|
+
var templateObject_1$b;
|
|
2445
2485
|
|
|
2446
2486
|
React.createElement;
|
|
2447
2487
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
2448
2488
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
2449
2489
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
2450
2490
|
componentId: "sc-7ouzg5-0"
|
|
2451
|
-
})(templateObject_1$
|
|
2491
|
+
})(templateObject_1$a || (templateObject_1$a = __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');
|
|
2452
2492
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
2453
2493
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
2454
2494
|
componentId: "sc-7ouzg5-1"
|
|
2455
|
-
})(templateObject_2$
|
|
2495
|
+
})(templateObject_2$6 || (templateObject_2$6 = __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"]);
|
|
2456
2496
|
var isInternalUrl = function isInternalUrl(url) {
|
|
2457
2497
|
return url.startsWith('/') && !url.startsWith('http');
|
|
2458
2498
|
};
|
|
@@ -2478,13 +2518,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
2478
2518
|
}, breadcrumb.label)));
|
|
2479
2519
|
}))));
|
|
2480
2520
|
};
|
|
2481
|
-
var templateObject_1$
|
|
2521
|
+
var templateObject_1$a, templateObject_2$6;
|
|
2482
2522
|
|
|
2483
2523
|
React.createElement;
|
|
2484
2524
|
var CardSmallStyled = styled.div.withConfig({
|
|
2485
2525
|
displayName: "CardSmall__CardSmallStyled",
|
|
2486
2526
|
componentId: "sc-jpcqvd-0"
|
|
2487
|
-
})(templateObject_1$
|
|
2527
|
+
})(templateObject_1$9 || (templateObject_1$9 = __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);
|
|
2488
2528
|
var CardSmall = function CardSmall(_a) {
|
|
2489
2529
|
var title = _a.title,
|
|
2490
2530
|
picture = _a.picture,
|
|
@@ -2521,14 +2561,14 @@ var CardSmall = function CardSmall(_a) {
|
|
|
2521
2561
|
color: "subdued"
|
|
2522
2562
|
}, meta))))));
|
|
2523
2563
|
};
|
|
2524
|
-
var templateObject_1$
|
|
2564
|
+
var templateObject_1$9;
|
|
2525
2565
|
|
|
2526
2566
|
React.createElement;
|
|
2527
2567
|
var border$3 = tokensData.base.border;
|
|
2528
2568
|
var CardLargeStyled = styled.div.withConfig({
|
|
2529
2569
|
displayName: "CardLarge__CardLargeStyled",
|
|
2530
2570
|
componentId: "sc-1rfgdzl-0"
|
|
2531
|
-
})(templateObject_1$
|
|
2571
|
+
})(templateObject_1$8 || (templateObject_1$8 = __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]);
|
|
2532
2572
|
var CardLarge = function CardLarge(_a) {
|
|
2533
2573
|
var title = _a.title,
|
|
2534
2574
|
excerpt = _a.excerpt,
|
|
@@ -2573,13 +2613,13 @@ var CardLarge = function CardLarge(_a) {
|
|
|
2573
2613
|
});
|
|
2574
2614
|
})))));
|
|
2575
2615
|
};
|
|
2576
|
-
var templateObject_1$
|
|
2616
|
+
var templateObject_1$8;
|
|
2577
2617
|
|
|
2578
2618
|
React.createElement;
|
|
2579
2619
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
2580
2620
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
2581
2621
|
componentId: "sc-ae049w-0"
|
|
2582
|
-
})(templateObject_1$
|
|
2622
|
+
})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"], ["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"])));
|
|
2583
2623
|
var ChipGroup = function ChipGroup(_a) {
|
|
2584
2624
|
var labels = _a.labels,
|
|
2585
2625
|
_b = _a.variant,
|
|
@@ -2598,7 +2638,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
2598
2638
|
});
|
|
2599
2639
|
})));
|
|
2600
2640
|
};
|
|
2601
|
-
var templateObject_1$
|
|
2641
|
+
var templateObject_1$7;
|
|
2602
2642
|
|
|
2603
2643
|
React.createElement;
|
|
2604
2644
|
var _a$2 = tokensData.semantic,
|
|
@@ -2608,15 +2648,15 @@ var _a$2 = tokensData.semantic,
|
|
|
2608
2648
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
2609
2649
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
2610
2650
|
componentId: "sc-1p1t0kp-0"
|
|
2611
|
-
})(templateObject_1$
|
|
2651
|
+
})(templateObject_1$6 || (templateObject_1$6 = __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);
|
|
2612
2652
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
2613
2653
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
2614
2654
|
componentId: "sc-1p1t0kp-1"
|
|
2615
|
-
})(templateObject_2$
|
|
2655
|
+
})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n width: 100%;\n"], ["\n position: relative;\n display: inline-block;\n width: 100%;\n"])));
|
|
2616
2656
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
2617
2657
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
2618
2658
|
componentId: "sc-1p1t0kp-2"
|
|
2619
|
-
})(templateObject_3$
|
|
2659
|
+
})(templateObject_3$4 || (templateObject_3$4 = __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);
|
|
2620
2660
|
var CopyButton = function CopyButton(_a) {
|
|
2621
2661
|
var text = _a.text,
|
|
2622
2662
|
onCopy = _a.onCopy;
|
|
@@ -2693,7 +2733,7 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
2693
2733
|
onCopy: onCopy
|
|
2694
2734
|
}));
|
|
2695
2735
|
};
|
|
2696
|
-
var templateObject_1$
|
|
2736
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4;
|
|
2697
2737
|
|
|
2698
2738
|
React.createElement;
|
|
2699
2739
|
var _a$1 = tokensData.base,
|
|
@@ -2702,19 +2742,19 @@ var _a$1 = tokensData.base,
|
|
|
2702
2742
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
2703
2743
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
2704
2744
|
componentId: "sc-1mi4lso-0"
|
|
2705
|
-
})(templateObject_1$
|
|
2745
|
+
})(templateObject_1$5 || (templateObject_1$5 = __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]);
|
|
2706
2746
|
var ImageWrapper = styled.div.withConfig({
|
|
2707
2747
|
displayName: "FeatureBlock__ImageWrapper",
|
|
2708
2748
|
componentId: "sc-1mi4lso-1"
|
|
2709
|
-
})(templateObject_2$
|
|
2749
|
+
})(templateObject_2$4 || (templateObject_2$4 = __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);
|
|
2710
2750
|
var ContentSection = styled.div.withConfig({
|
|
2711
2751
|
displayName: "FeatureBlock__ContentSection",
|
|
2712
2752
|
componentId: "sc-1mi4lso-2"
|
|
2713
|
-
})(templateObject_3$
|
|
2753
|
+
})(templateObject_3$3 || (templateObject_3$3 = __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]);
|
|
2714
2754
|
var ButtonWrapper = styled.div.withConfig({
|
|
2715
2755
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
2716
2756
|
componentId: "sc-1mi4lso-3"
|
|
2717
|
-
})(templateObject_4$
|
|
2757
|
+
})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
2718
2758
|
var ContentWrapper = styled.div.withConfig({
|
|
2719
2759
|
displayName: "FeatureBlock__ContentWrapper",
|
|
2720
2760
|
componentId: "sc-1mi4lso-4"
|
|
@@ -2758,7 +2798,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
2758
2798
|
onClick: onReadMore
|
|
2759
2799
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
2760
2800
|
};
|
|
2761
|
-
var templateObject_1$
|
|
2801
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2;
|
|
2762
2802
|
|
|
2763
2803
|
React.createElement;
|
|
2764
2804
|
var _a = tokensData.base,
|
|
@@ -2772,14 +2812,14 @@ var _a = tokensData.base,
|
|
|
2772
2812
|
var DropdownContainer = styled.div.withConfig({
|
|
2773
2813
|
displayName: "Dropdown__DropdownContainer",
|
|
2774
2814
|
componentId: "sc-kz07c4-0"
|
|
2775
|
-
})(templateObject_1$
|
|
2815
|
+
})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
2776
2816
|
var DropdownTrigger = styled.button.withConfig({
|
|
2777
2817
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2778
2818
|
return !prop.startsWith('$');
|
|
2779
2819
|
},
|
|
2780
2820
|
displayName: "Dropdown__DropdownTrigger",
|
|
2781
2821
|
componentId: "sc-kz07c4-1"
|
|
2782
|
-
})(templateObject_2$
|
|
2822
|
+
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: ", ";\n border-color: ", ";\n }\n \n &:focus {\n outline: ", ";\n outline-offset: 2px;\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n border-color: ", ";\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: ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: all 0.15s ease;\n \n &:hover {\n background-color: ", ";\n border-color: ", ";\n }\n \n &:focus {\n outline: ", ";\n outline-offset: 2px;\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n border-color: ", ";\n }\n \n ", "\n"])), spacing[3], spacing[4], color.background["default"], border["default"], tokensData.base.border.radius[2], typography.body, color.text["default"], color.background.surface, color.border.strong, tokensData.semantic.border.focus, color.background.disabled, color.text.disabled, color.border.subtle, function (_a) {
|
|
2783
2823
|
var $isOpen = _a.$isOpen;
|
|
2784
2824
|
return $isOpen && "\n background-color: ".concat(color.background.surface, ";\n border-color: ").concat(color.border.strong, ";\n ");
|
|
2785
2825
|
});
|
|
@@ -2789,7 +2829,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
2789
2829
|
},
|
|
2790
2830
|
displayName: "Dropdown__DropdownIcon",
|
|
2791
2831
|
componentId: "sc-kz07c4-2"
|
|
2792
|
-
})(templateObject_3$
|
|
2832
|
+
})(templateObject_3$2 || (templateObject_3$2 = __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) {
|
|
2793
2833
|
var $isOpen = _a.$isOpen;
|
|
2794
2834
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
2795
2835
|
});
|
|
@@ -2799,7 +2839,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
2799
2839
|
},
|
|
2800
2840
|
displayName: "Dropdown__DropdownMenu",
|
|
2801
2841
|
componentId: "sc-kz07c4-3"
|
|
2802
|
-
})(templateObject_4$
|
|
2842
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", ";\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: ", ";\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], color.background["default"], border["default"], tokensData.base.border.radius[2], shadow[3], spacing[1], function (_a) {
|
|
2803
2843
|
var $isOpen = _a.$isOpen;
|
|
2804
2844
|
return $isOpen ? 1 : 0;
|
|
2805
2845
|
}, function (_a) {
|
|
@@ -2969,7 +3009,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
2969
3009
|
}, option.label);
|
|
2970
3010
|
})));
|
|
2971
3011
|
};
|
|
2972
|
-
var templateObject_1$
|
|
3012
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$1;
|
|
2973
3013
|
|
|
2974
3014
|
React.createElement;
|
|
2975
3015
|
var PageTitleStyled = styled.div.withConfig({
|
|
@@ -2978,7 +3018,7 @@ var PageTitleStyled = styled.div.withConfig({
|
|
|
2978
3018
|
},
|
|
2979
3019
|
displayName: "PageTitle__PageTitleStyled",
|
|
2980
3020
|
componentId: "sc-16h256f-0"
|
|
2981
|
-
})(templateObject_1$
|
|
3021
|
+
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
|
|
2982
3022
|
var $hasBackButton = _a.$hasBackButton;
|
|
2983
3023
|
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
2984
3024
|
});
|
|
@@ -3005,7 +3045,147 @@ var PageTitle = function PageTitle(_a) {
|
|
|
3005
3045
|
color: "subdued"
|
|
3006
3046
|
}, subtitle)));
|
|
3007
3047
|
};
|
|
3008
|
-
var templateObject_1$
|
|
3048
|
+
var templateObject_1$3;
|
|
3049
|
+
|
|
3050
|
+
var input = tokensData.component.input;
|
|
3051
|
+
var StyledInputBase = styled.input.withConfig({
|
|
3052
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3053
|
+
return !prop.startsWith('$');
|
|
3054
|
+
},
|
|
3055
|
+
displayName: "InputBase__StyledInputBase",
|
|
3056
|
+
componentId: "sc-1bpf4e8-0"
|
|
3057
|
+
})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: ", ";\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"], ["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: ", ";\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"
|
|
3058
|
+
/**
|
|
3059
|
+
* Base styled textarea with shared styling
|
|
3060
|
+
*/])), input["default"].font, function (_a) {
|
|
3061
|
+
var $disabled = _a.$disabled;
|
|
3062
|
+
return $disabled ? input.disabled.textColor : input["default"].textColor;
|
|
3063
|
+
}, input["default"].paddingY, input["default"].paddingX, function (_a) {
|
|
3064
|
+
var $disabled = _a.$disabled;
|
|
3065
|
+
return $disabled ? input.disabled.backgroundColor : input["default"].backgroundColor;
|
|
3066
|
+
}, input["default"].borderWidth, function (_a) {
|
|
3067
|
+
var $hasError = _a.$hasError,
|
|
3068
|
+
$disabled = _a.$disabled;
|
|
3069
|
+
if ($disabled) return input.disabled.borderColor;
|
|
3070
|
+
if ($hasError) return input.error.borderColor;
|
|
3071
|
+
return input["default"].borderColor;
|
|
3072
|
+
}, input["default"].borderRadius, input.placeholder.textColor, function (_a) {
|
|
3073
|
+
var $hasError = _a.$hasError;
|
|
3074
|
+
return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
|
|
3075
|
+
}, input.focus.outline, input.focus.outlineOffset, function (_a) {
|
|
3076
|
+
var $hasError = _a.$hasError;
|
|
3077
|
+
return $hasError ? input.error.hover.borderColor : input.hover.borderColor;
|
|
3078
|
+
}, input.disabled.cursor);
|
|
3079
|
+
/**
|
|
3080
|
+
* Base styled textarea with shared styling
|
|
3081
|
+
*/
|
|
3082
|
+
var StyledTextAreaBase = styled.textarea.withConfig({
|
|
3083
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3084
|
+
return !prop.startsWith('$');
|
|
3085
|
+
},
|
|
3086
|
+
displayName: "InputBase__StyledTextAreaBase",
|
|
3087
|
+
componentId: "sc-1bpf4e8-1"
|
|
3088
|
+
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"], ["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"])), StyledInputBase);
|
|
3089
|
+
var templateObject_1$2, templateObject_2$2;
|
|
3090
|
+
|
|
3091
|
+
React.createElement;
|
|
3092
|
+
var semantic = tokensData.semantic,
|
|
3093
|
+
base = tokensData.base;
|
|
3094
|
+
var StyledFieldContainer = styled.div.withConfig({
|
|
3095
|
+
displayName: "TextField__StyledFieldContainer",
|
|
3096
|
+
componentId: "sc-1ys3b0-0"
|
|
3097
|
+
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base.spacing[2]);
|
|
3098
|
+
var StyledLabel = styled.label.withConfig({
|
|
3099
|
+
displayName: "TextField__StyledLabel",
|
|
3100
|
+
componentId: "sc-1ys3b0-1"
|
|
3101
|
+
})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"])), base.spacing[1], semantic.typography.label, semantic.color.text["default"], semantic.color.text.disabled);
|
|
3102
|
+
var StyledRequiredIndicator = styled.span.withConfig({
|
|
3103
|
+
displayName: "TextField__StyledRequiredIndicator",
|
|
3104
|
+
componentId: "sc-1ys3b0-2"
|
|
3105
|
+
})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic.color.text.error, base.fontWeight[5]);
|
|
3106
|
+
var StyledHelperText = styled.div.withConfig({
|
|
3107
|
+
displayName: "TextField__StyledHelperText",
|
|
3108
|
+
componentId: "sc-1ys3b0-3"
|
|
3109
|
+
})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
3110
|
+
/**
|
|
3111
|
+
* TextField component for text input with label, helper text, and error states
|
|
3112
|
+
*
|
|
3113
|
+
* @example
|
|
3114
|
+
* ```tsx
|
|
3115
|
+
* <TextField
|
|
3116
|
+
* label="Email"
|
|
3117
|
+
* type="email"
|
|
3118
|
+
* helperText="We'll never share your email"
|
|
3119
|
+
* required
|
|
3120
|
+
* />
|
|
3121
|
+
* ```
|
|
3122
|
+
*/])), semantic.typography.caption, function (_a) {
|
|
3123
|
+
var $hasError = _a.$hasError;
|
|
3124
|
+
return $hasError ? semantic.color.text.error : semantic.color.text.subdued;
|
|
3125
|
+
});
|
|
3126
|
+
/**
|
|
3127
|
+
* TextField component for text input with label, helper text, and error states
|
|
3128
|
+
*
|
|
3129
|
+
* @example
|
|
3130
|
+
* ```tsx
|
|
3131
|
+
* <TextField
|
|
3132
|
+
* label="Email"
|
|
3133
|
+
* type="email"
|
|
3134
|
+
* helperText="We'll never share your email"
|
|
3135
|
+
* required
|
|
3136
|
+
* />
|
|
3137
|
+
* ```
|
|
3138
|
+
*/
|
|
3139
|
+
var TextField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
3140
|
+
var label = _a.label,
|
|
3141
|
+
helperText = _a.helperText,
|
|
3142
|
+
error = _a.error,
|
|
3143
|
+
_b = _a.required,
|
|
3144
|
+
required = _b === void 0 ? false : _b,
|
|
3145
|
+
_c = _a.disabled,
|
|
3146
|
+
disabled = _c === void 0 ? false : _c,
|
|
3147
|
+
_d = _a.type,
|
|
3148
|
+
type = _d === void 0 ? 'text' : _d,
|
|
3149
|
+
providedId = _a.id,
|
|
3150
|
+
dataTestId = _a["data-testid"],
|
|
3151
|
+
inputProps = __rest(_a, ["label", "helperText", "error", "required", "disabled", "type", "id", 'data-testid']);
|
|
3152
|
+
// Generate unique ID if not provided
|
|
3153
|
+
var generatedId = React.useId();
|
|
3154
|
+
var id = providedId || generatedId;
|
|
3155
|
+
// IDs for ARIA relationships
|
|
3156
|
+
var errorId = error ? "".concat(id, "-error") : undefined;
|
|
3157
|
+
var helperId = helperText && !error ? "".concat(id, "-helper") : undefined;
|
|
3158
|
+
var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
|
|
3159
|
+
var hasError = Boolean(error);
|
|
3160
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer, {
|
|
3161
|
+
"data-testid": dataTestId
|
|
3162
|
+
}, label && /*#__PURE__*/React.createElement(StyledLabel, {
|
|
3163
|
+
htmlFor: id,
|
|
3164
|
+
"data-disabled": disabled
|
|
3165
|
+
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator, {
|
|
3166
|
+
"aria-label": "required"
|
|
3167
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputBase, _extends({
|
|
3168
|
+
ref: ref,
|
|
3169
|
+
id: id,
|
|
3170
|
+
type: type,
|
|
3171
|
+
disabled: disabled,
|
|
3172
|
+
required: required,
|
|
3173
|
+
"aria-required": required,
|
|
3174
|
+
"aria-invalid": hasError,
|
|
3175
|
+
"aria-describedby": describedBy,
|
|
3176
|
+
$hasError: hasError,
|
|
3177
|
+
$disabled: disabled
|
|
3178
|
+
}, inputProps)), error && /*#__PURE__*/React.createElement(StyledHelperText, {
|
|
3179
|
+
id: errorId,
|
|
3180
|
+
role: "alert",
|
|
3181
|
+
"aria-live": "polite",
|
|
3182
|
+
$hasError: true
|
|
3183
|
+
}, error), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText, {
|
|
3184
|
+
id: helperId
|
|
3185
|
+
}, helperText));
|
|
3186
|
+
});
|
|
3187
|
+
TextField.displayName = 'TextField';
|
|
3188
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
|
|
3009
3189
|
|
|
3010
3190
|
React.createElement;
|
|
3011
3191
|
// Breakpoints using base tokens
|
|
@@ -3237,7 +3417,10 @@ exports.Picture = Picture;
|
|
|
3237
3417
|
exports.ProgressBar = ProgressBar;
|
|
3238
3418
|
exports.ResponsiveGrid = ResponsiveGrid;
|
|
3239
3419
|
exports.Stack = Stack;
|
|
3420
|
+
exports.StyledInputBase = StyledInputBase;
|
|
3421
|
+
exports.StyledTextAreaBase = StyledTextAreaBase;
|
|
3240
3422
|
exports.Tag = Tag;
|
|
3423
|
+
exports.TextField = TextField;
|
|
3241
3424
|
exports.Typography = Typography;
|
|
3242
3425
|
exports.iconsData = iconsData;
|
|
3243
3426
|
exports.tokens = tokens;
|