@common-origin/design-system 1.9.9 → 1.11.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/Checkbox/Checkbox.d.ts +64 -0
- package/dist/components/molecules/Checkbox/SelectableInputBase.d.ts +33 -0
- package/dist/components/molecules/Checkbox/index.d.ts +3 -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 +2 -0
- package/dist/index.d.ts +40 -0
- package/dist/index.esm.js +488 -103
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +490 -101
- package/dist/index.js.map +1 -1
- package/dist/styles/tokens.json +43 -3
- 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 +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$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$r || (templateObject_1$r = __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$f || (templateObject_2$f = __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$b || (templateObject_3$b = __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$r, templateObject_2$f, templateObject_3$b;
|
|
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$q || (templateObject_1$q = __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$q;
|
|
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$p || (templateObject_1$p = __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$e || (templateObject_2$e = __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$a || (templateObject_3$a = __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$8 || (templateObject_4$8 = __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$p, templateObject_2$e, templateObject_3$a, templateObject_4$8;
|
|
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$o || (templateObject_1$o = __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$d || (templateObject_2$d = __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$9 || (templateObject_3$9 = __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$7 || (templateObject_4$7 = __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$o, templateObject_2$d, templateObject_3$9, templateObject_4$7, 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$n || (templateObject_1$n = __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$n;
|
|
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$m || (templateObject_1$m = __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$c || (templateObject_2$c = __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$m, templateObject_2$c;
|
|
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$l || (templateObject_1$l = __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$b || (templateObject_2$b = __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$8 || (templateObject_3$8 = __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$l, templateObject_2$b, templateObject_3$8;
|
|
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$k || (templateObject_1$k = __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$k;
|
|
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$j || (templateObject_1$j = __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$a || (templateObject_2$a = __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$7 || (templateObject_3$7 = __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$6 || (templateObject_4$6 = __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$j, templateObject_2$a, templateObject_3$7, templateObject_4$6;
|
|
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$i || (templateObject_1$i = __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$i;
|
|
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$h || (templateObject_1$h = __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$h;
|
|
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$6 || (templateObject_3$6 = __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$g || (templateObject_1$g = __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$9 || (templateObject_2$9 = __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$5 || (templateObject_4$5 = __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$g, templateObject_2$9, templateObject_3$6, templateObject_4$5, 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$f || (templateObject_1$f = __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$f;
|
|
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$e || (templateObject_1$e = __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$e;
|
|
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$d || (templateObject_1$d = __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$d;
|
|
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$c || (templateObject_1$c = __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$8 || (templateObject_2$8 = __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$c, templateObject_2$8;
|
|
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$b || (templateObject_1$b = __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$b;
|
|
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$a || (templateObject_1$a = __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,218 @@ var CardLarge = function CardLarge(_a) {
|
|
|
2573
2613
|
});
|
|
2574
2614
|
})))));
|
|
2575
2615
|
};
|
|
2576
|
-
var templateObject_1$
|
|
2616
|
+
var templateObject_1$a;
|
|
2617
|
+
|
|
2618
|
+
/**
|
|
2619
|
+
* Hidden native checkbox input for accessibility
|
|
2620
|
+
* Maintains keyboard navigation and screen reader support
|
|
2621
|
+
*/
|
|
2622
|
+
var HiddenCheckboxInput = styled.input.withConfig({
|
|
2623
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2624
|
+
return !prop.startsWith('$');
|
|
2625
|
+
},
|
|
2626
|
+
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
2627
|
+
componentId: "sc-1ddpctx-0"
|
|
2628
|
+
})(templateObject_1$9 || (templateObject_1$9 = __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"
|
|
2629
|
+
/**
|
|
2630
|
+
* Custom checkbox visual component
|
|
2631
|
+
* 24px × 24px for 8px grid alignment
|
|
2632
|
+
* Uses component.input.* tokens for consistency with TextField
|
|
2633
|
+
*/])));
|
|
2634
|
+
/**
|
|
2635
|
+
* Custom checkbox visual component
|
|
2636
|
+
* 24px × 24px for 8px grid alignment
|
|
2637
|
+
* Uses component.input.* tokens for consistency with TextField
|
|
2638
|
+
*/
|
|
2639
|
+
var StyledCheckbox = styled.span.withConfig({
|
|
2640
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2641
|
+
return !prop.startsWith('$');
|
|
2642
|
+
},
|
|
2643
|
+
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2644
|
+
componentId: "sc-1ddpctx-1"
|
|
2645
|
+
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n min-width: 24px;\n min-height: 24px;\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: 7px;\n top: 3px;\n width: 6px;\n height: 11px;\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: 10px;\n width: 14px;\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: 24px;\n height: 24px;\n min-width: 24px;\n min-height: 24px;\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: 7px;\n top: 3px;\n width: 6px;\n height: 11px;\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: 10px;\n width: 14px;\n height: 2px;\n background-color: ", ";\n }\n"
|
|
2646
|
+
/**
|
|
2647
|
+
* Container for checkbox with proper spacing and alignment
|
|
2648
|
+
* 48px min-height for touch target (8px grid aligned)
|
|
2649
|
+
*/])), tokensData.component.input["default"].borderRadius, tokensData.component.input["default"].borderWidth, function (props) {
|
|
2650
|
+
return props.$checked || props.$indeterminate ? tokensData.semantic.color.background.interactive : tokensData.component.input["default"].backgroundColor;
|
|
2651
|
+
}, function (props) {
|
|
2652
|
+
if (props.$state === 'error') return tokensData.component.input.error.borderColor;
|
|
2653
|
+
if (props.$checked || props.$indeterminate) return tokensData.semantic.color.background.interactive;
|
|
2654
|
+
return tokensData.component.input["default"].borderColor;
|
|
2655
|
+
}, function (props) {
|
|
2656
|
+
return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
|
|
2657
|
+
}, HiddenCheckboxInput, function (props) {
|
|
2658
|
+
return props.$state === 'error' ? tokensData.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensData.semantic.color.background.interactive : tokensData.component.input.hover.borderColor;
|
|
2659
|
+
}, HiddenCheckboxInput, tokensData.component.input.focus.outline, tokensData.component.input.focus.outlineOffset, function (props) {
|
|
2660
|
+
return props.$state === 'error' ? tokensData.component.input.error.focus.borderColor : tokensData.component.input.focus.borderColor;
|
|
2661
|
+
}, function (props) {
|
|
2662
|
+
return props.$state === 'disabled' && "\n background-color: ".concat(tokensData.component.input.disabled.backgroundColor, ";\n border-color: ").concat(tokensData.component.input.disabled.borderColor, ";\n opacity: 0.6;\n ");
|
|
2663
|
+
}, function (props) {
|
|
2664
|
+
return props.$checked ? 'block' : 'none';
|
|
2665
|
+
}, tokensData.semantic.color.text.inverse, function (props) {
|
|
2666
|
+
return props.$indeterminate ? 'block' : 'none';
|
|
2667
|
+
}, tokensData.semantic.color.text.inverse);
|
|
2668
|
+
/**
|
|
2669
|
+
* Container for checkbox with proper spacing and alignment
|
|
2670
|
+
* 48px min-height for touch target (8px grid aligned)
|
|
2671
|
+
*/
|
|
2672
|
+
var StyledCheckboxContainer = styled.label.withConfig({
|
|
2673
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2674
|
+
return !prop.startsWith('$');
|
|
2675
|
+
},
|
|
2676
|
+
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
2677
|
+
componentId: "sc-1ddpctx-2"
|
|
2678
|
+
})(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 48px;\n flex-direction: ", ";\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 48px;\n flex-direction: ", ";\n user-select: none;\n"
|
|
2679
|
+
/**
|
|
2680
|
+
* Label text with proper typography
|
|
2681
|
+
*/])), tokensData.base.spacing[3], function (props) {
|
|
2682
|
+
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
2683
|
+
}, function (props) {
|
|
2684
|
+
return props.$labelPosition === 'left' ? 'row-reverse' : 'row';
|
|
2685
|
+
});
|
|
2686
|
+
/**
|
|
2687
|
+
* Label text with proper typography
|
|
2688
|
+
*/
|
|
2689
|
+
var StyledCheckboxLabel = styled.span.withConfig({
|
|
2690
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2691
|
+
return !prop.startsWith('$');
|
|
2692
|
+
},
|
|
2693
|
+
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
2694
|
+
componentId: "sc-1ddpctx-3"
|
|
2695
|
+
})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
2696
|
+
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
2697
|
+
});
|
|
2698
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$5, templateObject_4$4;
|
|
2699
|
+
|
|
2700
|
+
React.createElement;
|
|
2701
|
+
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
2702
|
+
displayName: "Checkbox__StyledFieldContainer",
|
|
2703
|
+
componentId: "sc-vquz3v-0"
|
|
2704
|
+
})(templateObject_1$8 || (templateObject_1$8 = __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]);
|
|
2705
|
+
var StyledHelperText$1 = styled.span.withConfig({
|
|
2706
|
+
displayName: "Checkbox__StyledHelperText",
|
|
2707
|
+
componentId: "sc-vquz3v-1"
|
|
2708
|
+
})(templateObject_2$6 || (templateObject_2$6 = __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"
|
|
2709
|
+
/**
|
|
2710
|
+
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2711
|
+
*
|
|
2712
|
+
* Features:
|
|
2713
|
+
* - Custom styled checkbox with clear visual states
|
|
2714
|
+
* - Integrated label with configurable positioning
|
|
2715
|
+
* - Helper text and error messaging
|
|
2716
|
+
* - Indeterminate state support
|
|
2717
|
+
* - Full keyboard navigation (Space to toggle)
|
|
2718
|
+
* - ARIA attributes for screen readers
|
|
2719
|
+
* - 8px grid aligned (48px touch target)
|
|
2720
|
+
*
|
|
2721
|
+
* @example
|
|
2722
|
+
* ```tsx
|
|
2723
|
+
* <Checkbox
|
|
2724
|
+
* label="Accept terms and conditions"
|
|
2725
|
+
* checked={accepted}
|
|
2726
|
+
* onChange={(e) => setAccepted(e.target.checked)}
|
|
2727
|
+
* required
|
|
2728
|
+
* />
|
|
2729
|
+
* ```
|
|
2730
|
+
*/])), tokensData.semantic.typography.small, function (props) {
|
|
2731
|
+
return props.$error ? tokensData.semantic.color.text.error : tokensData.semantic.color.text.subdued;
|
|
2732
|
+
}, tokensData.base.spacing[9]);
|
|
2733
|
+
/**
|
|
2734
|
+
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2735
|
+
*
|
|
2736
|
+
* Features:
|
|
2737
|
+
* - Custom styled checkbox with clear visual states
|
|
2738
|
+
* - Integrated label with configurable positioning
|
|
2739
|
+
* - Helper text and error messaging
|
|
2740
|
+
* - Indeterminate state support
|
|
2741
|
+
* - Full keyboard navigation (Space to toggle)
|
|
2742
|
+
* - ARIA attributes for screen readers
|
|
2743
|
+
* - 8px grid aligned (48px touch target)
|
|
2744
|
+
*
|
|
2745
|
+
* @example
|
|
2746
|
+
* ```tsx
|
|
2747
|
+
* <Checkbox
|
|
2748
|
+
* label="Accept terms and conditions"
|
|
2749
|
+
* checked={accepted}
|
|
2750
|
+
* onChange={(e) => setAccepted(e.target.checked)}
|
|
2751
|
+
* required
|
|
2752
|
+
* />
|
|
2753
|
+
* ```
|
|
2754
|
+
*/
|
|
2755
|
+
var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
2756
|
+
var label = _a.label,
|
|
2757
|
+
_b = _a.checked,
|
|
2758
|
+
checked = _b === void 0 ? false : _b,
|
|
2759
|
+
_c = _a.indeterminate,
|
|
2760
|
+
indeterminate = _c === void 0 ? false : _c,
|
|
2761
|
+
_d = _a.labelPosition,
|
|
2762
|
+
labelPosition = _d === void 0 ? 'right' : _d,
|
|
2763
|
+
helperText = _a.helperText,
|
|
2764
|
+
error = _a.error,
|
|
2765
|
+
_e = _a.disabled,
|
|
2766
|
+
disabled = _e === void 0 ? false : _e,
|
|
2767
|
+
onChange = _a.onChange,
|
|
2768
|
+
providedId = _a.id,
|
|
2769
|
+
ariaDescribedby = _a["aria-describedby"],
|
|
2770
|
+
rest = __rest(_a, ["label", "checked", "indeterminate", "labelPosition", "helperText", "error", "disabled", "onChange", "id", 'aria-describedby']);
|
|
2771
|
+
var generatedId = React.useId();
|
|
2772
|
+
var id = providedId || generatedId;
|
|
2773
|
+
var helperTextId = "".concat(id, "-helper-text");
|
|
2774
|
+
var errorId = "".concat(id, "-error");
|
|
2775
|
+
// Determine the state for styling
|
|
2776
|
+
var state = disabled ? 'disabled' : error ? 'error' : 'default';
|
|
2777
|
+
// Set up ARIA describedby
|
|
2778
|
+
var describedBy = [ariaDescribedby, helperText ? helperTextId : undefined, error ? errorId : undefined].filter(Boolean).join(' ');
|
|
2779
|
+
// Update indeterminate property on the input element
|
|
2780
|
+
var inputRef = React.useRef(null);
|
|
2781
|
+
React.useImperativeHandle(ref, function () {
|
|
2782
|
+
return inputRef.current;
|
|
2783
|
+
});
|
|
2784
|
+
React.useEffect(function () {
|
|
2785
|
+
if (inputRef.current) {
|
|
2786
|
+
inputRef.current.indeterminate = indeterminate;
|
|
2787
|
+
}
|
|
2788
|
+
}, [indeterminate]);
|
|
2789
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer$1, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, {
|
|
2790
|
+
$disabled: disabled,
|
|
2791
|
+
$labelPosition: labelPosition
|
|
2792
|
+
}, /*#__PURE__*/React.createElement(HiddenCheckboxInput, _extends({
|
|
2793
|
+
ref: inputRef,
|
|
2794
|
+
type: "checkbox",
|
|
2795
|
+
id: id,
|
|
2796
|
+
checked: checked,
|
|
2797
|
+
disabled: disabled,
|
|
2798
|
+
onChange: onChange,
|
|
2799
|
+
"aria-describedby": describedBy || undefined,
|
|
2800
|
+
"aria-invalid": error ? true : undefined,
|
|
2801
|
+
$state: state,
|
|
2802
|
+
$checked: checked,
|
|
2803
|
+
$indeterminate: indeterminate
|
|
2804
|
+
}, rest)), /*#__PURE__*/React.createElement(StyledCheckbox, {
|
|
2805
|
+
$state: state,
|
|
2806
|
+
$checked: checked,
|
|
2807
|
+
$indeterminate: indeterminate,
|
|
2808
|
+
"aria-hidden": "true"
|
|
2809
|
+
}), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
|
|
2810
|
+
$disabled: disabled
|
|
2811
|
+
}, label)), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$1, {
|
|
2812
|
+
id: helperTextId
|
|
2813
|
+
}, helperText), error && /*#__PURE__*/React.createElement(StyledHelperText$1, {
|
|
2814
|
+
id: errorId,
|
|
2815
|
+
$error: true,
|
|
2816
|
+
role: "alert",
|
|
2817
|
+
"aria-live": "polite"
|
|
2818
|
+
}, error));
|
|
2819
|
+
});
|
|
2820
|
+
Checkbox.displayName = 'Checkbox';
|
|
2821
|
+
var templateObject_1$8, templateObject_2$6;
|
|
2577
2822
|
|
|
2578
2823
|
React.createElement;
|
|
2579
2824
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
2580
2825
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
2581
2826
|
componentId: "sc-ae049w-0"
|
|
2582
|
-
})(templateObject_1$
|
|
2827
|
+
})(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
2828
|
var ChipGroup = function ChipGroup(_a) {
|
|
2584
2829
|
var labels = _a.labels,
|
|
2585
2830
|
_b = _a.variant,
|
|
@@ -2598,7 +2843,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
2598
2843
|
});
|
|
2599
2844
|
})));
|
|
2600
2845
|
};
|
|
2601
|
-
var templateObject_1$
|
|
2846
|
+
var templateObject_1$7;
|
|
2602
2847
|
|
|
2603
2848
|
React.createElement;
|
|
2604
2849
|
var _a$2 = tokensData.semantic,
|
|
@@ -2608,15 +2853,15 @@ var _a$2 = tokensData.semantic,
|
|
|
2608
2853
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
2609
2854
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
2610
2855
|
componentId: "sc-1p1t0kp-0"
|
|
2611
|
-
})(templateObject_1$
|
|
2856
|
+
})(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
2857
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
2613
2858
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
2614
2859
|
componentId: "sc-1p1t0kp-1"
|
|
2615
|
-
})(templateObject_2$
|
|
2860
|
+
})(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
2861
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
2617
2862
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
2618
2863
|
componentId: "sc-1p1t0kp-2"
|
|
2619
|
-
})(templateObject_3$
|
|
2864
|
+
})(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
2865
|
var CopyButton = function CopyButton(_a) {
|
|
2621
2866
|
var text = _a.text,
|
|
2622
2867
|
onCopy = _a.onCopy;
|
|
@@ -2693,7 +2938,7 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
2693
2938
|
onCopy: onCopy
|
|
2694
2939
|
}));
|
|
2695
2940
|
};
|
|
2696
|
-
var templateObject_1$
|
|
2941
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4;
|
|
2697
2942
|
|
|
2698
2943
|
React.createElement;
|
|
2699
2944
|
var _a$1 = tokensData.base,
|
|
@@ -2702,19 +2947,19 @@ var _a$1 = tokensData.base,
|
|
|
2702
2947
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
2703
2948
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
2704
2949
|
componentId: "sc-1mi4lso-0"
|
|
2705
|
-
})(templateObject_1$
|
|
2950
|
+
})(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
2951
|
var ImageWrapper = styled.div.withConfig({
|
|
2707
2952
|
displayName: "FeatureBlock__ImageWrapper",
|
|
2708
2953
|
componentId: "sc-1mi4lso-1"
|
|
2709
|
-
})(templateObject_2$
|
|
2954
|
+
})(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
2955
|
var ContentSection = styled.div.withConfig({
|
|
2711
2956
|
displayName: "FeatureBlock__ContentSection",
|
|
2712
2957
|
componentId: "sc-1mi4lso-2"
|
|
2713
|
-
})(templateObject_3$
|
|
2958
|
+
})(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
2959
|
var ButtonWrapper = styled.div.withConfig({
|
|
2715
2960
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
2716
2961
|
componentId: "sc-1mi4lso-3"
|
|
2717
|
-
})(templateObject_4$
|
|
2962
|
+
})(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
2963
|
var ContentWrapper = styled.div.withConfig({
|
|
2719
2964
|
displayName: "FeatureBlock__ContentWrapper",
|
|
2720
2965
|
componentId: "sc-1mi4lso-4"
|
|
@@ -2758,7 +3003,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
2758
3003
|
onClick: onReadMore
|
|
2759
3004
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
2760
3005
|
};
|
|
2761
|
-
var templateObject_1$
|
|
3006
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2;
|
|
2762
3007
|
|
|
2763
3008
|
React.createElement;
|
|
2764
3009
|
var _a = tokensData.base,
|
|
@@ -2772,14 +3017,14 @@ var _a = tokensData.base,
|
|
|
2772
3017
|
var DropdownContainer = styled.div.withConfig({
|
|
2773
3018
|
displayName: "Dropdown__DropdownContainer",
|
|
2774
3019
|
componentId: "sc-kz07c4-0"
|
|
2775
|
-
})(templateObject_1$
|
|
3020
|
+
})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
2776
3021
|
var DropdownTrigger = styled.button.withConfig({
|
|
2777
3022
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2778
3023
|
return !prop.startsWith('$');
|
|
2779
3024
|
},
|
|
2780
3025
|
displayName: "Dropdown__DropdownTrigger",
|
|
2781
3026
|
componentId: "sc-kz07c4-1"
|
|
2782
|
-
})(templateObject_2$
|
|
3027
|
+
})(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
3028
|
var $isOpen = _a.$isOpen;
|
|
2784
3029
|
return $isOpen && "\n background-color: ".concat(color.background.surface, ";\n border-color: ").concat(color.border.strong, ";\n ");
|
|
2785
3030
|
});
|
|
@@ -2789,7 +3034,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
2789
3034
|
},
|
|
2790
3035
|
displayName: "Dropdown__DropdownIcon",
|
|
2791
3036
|
componentId: "sc-kz07c4-2"
|
|
2792
|
-
})(templateObject_3$
|
|
3037
|
+
})(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
3038
|
var $isOpen = _a.$isOpen;
|
|
2794
3039
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
2795
3040
|
});
|
|
@@ -2799,7 +3044,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
2799
3044
|
},
|
|
2800
3045
|
displayName: "Dropdown__DropdownMenu",
|
|
2801
3046
|
componentId: "sc-kz07c4-3"
|
|
2802
|
-
})(templateObject_4$
|
|
3047
|
+
})(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
3048
|
var $isOpen = _a.$isOpen;
|
|
2804
3049
|
return $isOpen ? 1 : 0;
|
|
2805
3050
|
}, function (_a) {
|
|
@@ -2969,7 +3214,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
2969
3214
|
}, option.label);
|
|
2970
3215
|
})));
|
|
2971
3216
|
};
|
|
2972
|
-
var templateObject_1$
|
|
3217
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$1;
|
|
2973
3218
|
|
|
2974
3219
|
React.createElement;
|
|
2975
3220
|
var PageTitleStyled = styled.div.withConfig({
|
|
@@ -2978,7 +3223,7 @@ var PageTitleStyled = styled.div.withConfig({
|
|
|
2978
3223
|
},
|
|
2979
3224
|
displayName: "PageTitle__PageTitleStyled",
|
|
2980
3225
|
componentId: "sc-16h256f-0"
|
|
2981
|
-
})(templateObject_1$
|
|
3226
|
+
})(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
3227
|
var $hasBackButton = _a.$hasBackButton;
|
|
2983
3228
|
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
2984
3229
|
});
|
|
@@ -3005,7 +3250,147 @@ var PageTitle = function PageTitle(_a) {
|
|
|
3005
3250
|
color: "subdued"
|
|
3006
3251
|
}, subtitle)));
|
|
3007
3252
|
};
|
|
3008
|
-
var templateObject_1$
|
|
3253
|
+
var templateObject_1$3;
|
|
3254
|
+
|
|
3255
|
+
var input = tokensData.component.input;
|
|
3256
|
+
var StyledInputBase = styled.input.withConfig({
|
|
3257
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3258
|
+
return !prop.startsWith('$');
|
|
3259
|
+
},
|
|
3260
|
+
displayName: "InputBase__StyledInputBase",
|
|
3261
|
+
componentId: "sc-1bpf4e8-0"
|
|
3262
|
+
})(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"
|
|
3263
|
+
/**
|
|
3264
|
+
* Base styled textarea with shared styling
|
|
3265
|
+
*/])), input["default"].font, function (_a) {
|
|
3266
|
+
var $disabled = _a.$disabled;
|
|
3267
|
+
return $disabled ? input.disabled.textColor : input["default"].textColor;
|
|
3268
|
+
}, input["default"].paddingY, input["default"].paddingX, function (_a) {
|
|
3269
|
+
var $disabled = _a.$disabled;
|
|
3270
|
+
return $disabled ? input.disabled.backgroundColor : input["default"].backgroundColor;
|
|
3271
|
+
}, input["default"].borderWidth, function (_a) {
|
|
3272
|
+
var $hasError = _a.$hasError,
|
|
3273
|
+
$disabled = _a.$disabled;
|
|
3274
|
+
if ($disabled) return input.disabled.borderColor;
|
|
3275
|
+
if ($hasError) return input.error.borderColor;
|
|
3276
|
+
return input["default"].borderColor;
|
|
3277
|
+
}, input["default"].borderRadius, input.placeholder.textColor, function (_a) {
|
|
3278
|
+
var $hasError = _a.$hasError;
|
|
3279
|
+
return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
|
|
3280
|
+
}, input.focus.outline, input.focus.outlineOffset, function (_a) {
|
|
3281
|
+
var $hasError = _a.$hasError;
|
|
3282
|
+
return $hasError ? input.error.hover.borderColor : input.hover.borderColor;
|
|
3283
|
+
}, input.disabled.cursor);
|
|
3284
|
+
/**
|
|
3285
|
+
* Base styled textarea with shared styling
|
|
3286
|
+
*/
|
|
3287
|
+
var StyledTextAreaBase = styled.textarea.withConfig({
|
|
3288
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3289
|
+
return !prop.startsWith('$');
|
|
3290
|
+
},
|
|
3291
|
+
displayName: "InputBase__StyledTextAreaBase",
|
|
3292
|
+
componentId: "sc-1bpf4e8-1"
|
|
3293
|
+
})(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);
|
|
3294
|
+
var templateObject_1$2, templateObject_2$2;
|
|
3295
|
+
|
|
3296
|
+
React.createElement;
|
|
3297
|
+
var semantic = tokensData.semantic,
|
|
3298
|
+
base = tokensData.base;
|
|
3299
|
+
var StyledFieldContainer = styled.div.withConfig({
|
|
3300
|
+
displayName: "TextField__StyledFieldContainer",
|
|
3301
|
+
componentId: "sc-1ys3b0-0"
|
|
3302
|
+
})(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]);
|
|
3303
|
+
var StyledLabel = styled.label.withConfig({
|
|
3304
|
+
displayName: "TextField__StyledLabel",
|
|
3305
|
+
componentId: "sc-1ys3b0-1"
|
|
3306
|
+
})(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);
|
|
3307
|
+
var StyledRequiredIndicator = styled.span.withConfig({
|
|
3308
|
+
displayName: "TextField__StyledRequiredIndicator",
|
|
3309
|
+
componentId: "sc-1ys3b0-2"
|
|
3310
|
+
})(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]);
|
|
3311
|
+
var StyledHelperText = styled.div.withConfig({
|
|
3312
|
+
displayName: "TextField__StyledHelperText",
|
|
3313
|
+
componentId: "sc-1ys3b0-3"
|
|
3314
|
+
})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
3315
|
+
/**
|
|
3316
|
+
* TextField component for text input with label, helper text, and error states
|
|
3317
|
+
*
|
|
3318
|
+
* @example
|
|
3319
|
+
* ```tsx
|
|
3320
|
+
* <TextField
|
|
3321
|
+
* label="Email"
|
|
3322
|
+
* type="email"
|
|
3323
|
+
* helperText="We'll never share your email"
|
|
3324
|
+
* required
|
|
3325
|
+
* />
|
|
3326
|
+
* ```
|
|
3327
|
+
*/])), semantic.typography.caption, function (_a) {
|
|
3328
|
+
var $hasError = _a.$hasError;
|
|
3329
|
+
return $hasError ? semantic.color.text.error : semantic.color.text.subdued;
|
|
3330
|
+
});
|
|
3331
|
+
/**
|
|
3332
|
+
* TextField component for text input with label, helper text, and error states
|
|
3333
|
+
*
|
|
3334
|
+
* @example
|
|
3335
|
+
* ```tsx
|
|
3336
|
+
* <TextField
|
|
3337
|
+
* label="Email"
|
|
3338
|
+
* type="email"
|
|
3339
|
+
* helperText="We'll never share your email"
|
|
3340
|
+
* required
|
|
3341
|
+
* />
|
|
3342
|
+
* ```
|
|
3343
|
+
*/
|
|
3344
|
+
var TextField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
3345
|
+
var label = _a.label,
|
|
3346
|
+
helperText = _a.helperText,
|
|
3347
|
+
error = _a.error,
|
|
3348
|
+
_b = _a.required,
|
|
3349
|
+
required = _b === void 0 ? false : _b,
|
|
3350
|
+
_c = _a.disabled,
|
|
3351
|
+
disabled = _c === void 0 ? false : _c,
|
|
3352
|
+
_d = _a.type,
|
|
3353
|
+
type = _d === void 0 ? 'text' : _d,
|
|
3354
|
+
providedId = _a.id,
|
|
3355
|
+
dataTestId = _a["data-testid"],
|
|
3356
|
+
inputProps = __rest(_a, ["label", "helperText", "error", "required", "disabled", "type", "id", 'data-testid']);
|
|
3357
|
+
// Generate unique ID if not provided
|
|
3358
|
+
var generatedId = React.useId();
|
|
3359
|
+
var id = providedId || generatedId;
|
|
3360
|
+
// IDs for ARIA relationships
|
|
3361
|
+
var errorId = error ? "".concat(id, "-error") : undefined;
|
|
3362
|
+
var helperId = helperText && !error ? "".concat(id, "-helper") : undefined;
|
|
3363
|
+
var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
|
|
3364
|
+
var hasError = Boolean(error);
|
|
3365
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer, {
|
|
3366
|
+
"data-testid": dataTestId
|
|
3367
|
+
}, label && /*#__PURE__*/React.createElement(StyledLabel, {
|
|
3368
|
+
htmlFor: id,
|
|
3369
|
+
"data-disabled": disabled
|
|
3370
|
+
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator, {
|
|
3371
|
+
"aria-label": "required"
|
|
3372
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputBase, _extends({
|
|
3373
|
+
ref: ref,
|
|
3374
|
+
id: id,
|
|
3375
|
+
type: type,
|
|
3376
|
+
disabled: disabled,
|
|
3377
|
+
required: required,
|
|
3378
|
+
"aria-required": required,
|
|
3379
|
+
"aria-invalid": hasError,
|
|
3380
|
+
"aria-describedby": describedBy,
|
|
3381
|
+
$hasError: hasError,
|
|
3382
|
+
$disabled: disabled
|
|
3383
|
+
}, inputProps)), error && /*#__PURE__*/React.createElement(StyledHelperText, {
|
|
3384
|
+
id: errorId,
|
|
3385
|
+
role: "alert",
|
|
3386
|
+
"aria-live": "polite",
|
|
3387
|
+
$hasError: true
|
|
3388
|
+
}, error), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText, {
|
|
3389
|
+
id: helperId
|
|
3390
|
+
}, helperText));
|
|
3391
|
+
});
|
|
3392
|
+
TextField.displayName = 'TextField';
|
|
3393
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
|
|
3009
3394
|
|
|
3010
3395
|
React.createElement;
|
|
3011
3396
|
// Breakpoints using base tokens
|
|
@@ -3218,6 +3603,7 @@ exports.Breadcrumbs = Breadcrumbs;
|
|
|
3218
3603
|
exports.Button = Button;
|
|
3219
3604
|
exports.CardLarge = CardLarge;
|
|
3220
3605
|
exports.CardSmall = CardSmall;
|
|
3606
|
+
exports.Checkbox = Checkbox;
|
|
3221
3607
|
exports.Chip = Chip;
|
|
3222
3608
|
exports.ChipGroup = ChipGroup;
|
|
3223
3609
|
exports.CodeBlock = CodeBlock;
|
|
@@ -3237,7 +3623,10 @@ exports.Picture = Picture;
|
|
|
3237
3623
|
exports.ProgressBar = ProgressBar;
|
|
3238
3624
|
exports.ResponsiveGrid = ResponsiveGrid;
|
|
3239
3625
|
exports.Stack = Stack;
|
|
3626
|
+
exports.StyledInputBase = StyledInputBase;
|
|
3627
|
+
exports.StyledTextAreaBase = StyledTextAreaBase;
|
|
3240
3628
|
exports.Tag = Tag;
|
|
3629
|
+
exports.TextField = TextField;
|
|
3241
3630
|
exports.Typography = Typography;
|
|
3242
3631
|
exports.iconsData = iconsData;
|
|
3243
3632
|
exports.tokens = tokens;
|