@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.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useRef, useEffect } from 'react';
|
|
1
|
+
import React, { useState, forwardRef, useId, useRef, useEffect } from 'react';
|
|
2
2
|
import styled, { keyframes, css } from 'styled-components';
|
|
3
3
|
import Link from 'next/link';
|
|
4
4
|
import { parseISO, format } from 'date-fns';
|
|
@@ -100,7 +100,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
100
100
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
101
101
|
};
|
|
102
102
|
|
|
103
|
-
var base$
|
|
103
|
+
var base$2 = {
|
|
104
104
|
border: {
|
|
105
105
|
radius: {
|
|
106
106
|
"1": "0.125rem",
|
|
@@ -445,7 +445,7 @@ var component = {
|
|
|
445
445
|
textColor: "#212529",
|
|
446
446
|
borderRadius: "0.25rem",
|
|
447
447
|
padding: "0.25rem 0.5rem",
|
|
448
|
-
font: "
|
|
448
|
+
font: "500 0.875rem/1.25rem 'Inter', sans-serif"
|
|
449
449
|
},
|
|
450
450
|
variants: {
|
|
451
451
|
emphasis: {
|
|
@@ -468,7 +468,7 @@ var component = {
|
|
|
468
468
|
},
|
|
469
469
|
medium: {
|
|
470
470
|
padding: "0.25rem 0.5rem",
|
|
471
|
-
font: "
|
|
471
|
+
font: "500 0.875rem/1.25rem 'Inter', sans-serif"
|
|
472
472
|
},
|
|
473
473
|
large: {
|
|
474
474
|
padding: "0.5rem 0.75rem",
|
|
@@ -593,9 +593,49 @@ var component = {
|
|
|
593
593
|
}
|
|
594
594
|
}
|
|
595
595
|
},
|
|
596
|
+
input: {
|
|
597
|
+
"default": {
|
|
598
|
+
backgroundColor: "#ffffff",
|
|
599
|
+
textColor: "#212529",
|
|
600
|
+
borderColor: "#dee2e6",
|
|
601
|
+
borderRadius: "0.25rem",
|
|
602
|
+
borderWidth: "0.0625rem",
|
|
603
|
+
paddingY: "11px",
|
|
604
|
+
paddingX: "1rem",
|
|
605
|
+
font: "400 1rem/1.5rem 'Inter', sans-serif"
|
|
606
|
+
},
|
|
607
|
+
placeholder: {
|
|
608
|
+
textColor: "#adb5bd"
|
|
609
|
+
},
|
|
610
|
+
hover: {
|
|
611
|
+
borderColor: "#343a40"
|
|
612
|
+
},
|
|
613
|
+
focus: {
|
|
614
|
+
borderColor: "#343a40",
|
|
615
|
+
outline: "0.125rem solid #343a40",
|
|
616
|
+
outlineOffset: "2px"
|
|
617
|
+
},
|
|
618
|
+
error: {
|
|
619
|
+
borderColor: "#D31510",
|
|
620
|
+
focus: {
|
|
621
|
+
borderColor: "#D31510",
|
|
622
|
+
outline: "0.125rem solid #343a40",
|
|
623
|
+
outlineOffset: "2px"
|
|
624
|
+
},
|
|
625
|
+
hover: {
|
|
626
|
+
borderColor: "#D31510"
|
|
627
|
+
}
|
|
628
|
+
},
|
|
629
|
+
disabled: {
|
|
630
|
+
backgroundColor: "#dee2e6",
|
|
631
|
+
textColor: "#adb5bd",
|
|
632
|
+
borderColor: "#dee2e6",
|
|
633
|
+
cursor: "not-allowed"
|
|
634
|
+
}
|
|
635
|
+
},
|
|
596
636
|
$ref: "./component/index.json"
|
|
597
637
|
};
|
|
598
|
-
var semantic$
|
|
638
|
+
var semantic$3 = {
|
|
599
639
|
border: {
|
|
600
640
|
"default": "0.0625rem solid #e9ecef",
|
|
601
641
|
subtle: "0.0625rem solid #dee2e6",
|
|
@@ -716,7 +756,7 @@ var semantic$2 = {
|
|
|
716
756
|
button1: "500 1rem/1.5rem 'Inter', sans-serif",
|
|
717
757
|
button2: "500 0.875rem/1.5rem 'Inter', sans-serif",
|
|
718
758
|
button3: "500 0.75rem/1rem 'Inter', sans-serif",
|
|
719
|
-
label: "
|
|
759
|
+
label: "500 0.875rem/1.25rem 'Inter', sans-serif",
|
|
720
760
|
breadcrumb: "400 0.75rem/1.125rem 'Inter', sans-serif"
|
|
721
761
|
},
|
|
722
762
|
motion: {
|
|
@@ -732,9 +772,9 @@ var semantic$2 = {
|
|
|
732
772
|
$ref: "./semantic/index.json"
|
|
733
773
|
};
|
|
734
774
|
var tokensData = {
|
|
735
|
-
base: base$
|
|
775
|
+
base: base$2,
|
|
736
776
|
component: component,
|
|
737
|
-
semantic: semantic$
|
|
777
|
+
semantic: semantic$3
|
|
738
778
|
};
|
|
739
779
|
|
|
740
780
|
React.createElement;
|
|
@@ -744,7 +784,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
744
784
|
},
|
|
745
785
|
displayName: "Avatar__AvatarContainer",
|
|
746
786
|
componentId: "sc-ezn4ax-0"
|
|
747
|
-
})(templateObject_1$
|
|
787
|
+
})(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) {
|
|
748
788
|
var $size = _a.$size;
|
|
749
789
|
return tokensData.semantic.size.avatar[$size];
|
|
750
790
|
}, function (_a) {
|
|
@@ -757,14 +797,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
757
797
|
},
|
|
758
798
|
displayName: "Avatar__AvatarImage",
|
|
759
799
|
componentId: "sc-ezn4ax-1"
|
|
760
|
-
})(templateObject_2$
|
|
800
|
+
})(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);
|
|
761
801
|
var AvatarInitials = styled.span.withConfig({
|
|
762
802
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
763
803
|
return !prop.startsWith('$');
|
|
764
804
|
},
|
|
765
805
|
displayName: "Avatar__AvatarInitials",
|
|
766
806
|
componentId: "sc-ezn4ax-2"
|
|
767
|
-
})(templateObject_3$
|
|
807
|
+
})(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"
|
|
768
808
|
// Helper function to get initials from name
|
|
769
809
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
770
810
|
var $size = _a.$size;
|
|
@@ -827,7 +867,7 @@ var Avatar = function Avatar(_a) {
|
|
|
827
867
|
"aria-hidden": "true"
|
|
828
868
|
}, initials));
|
|
829
869
|
};
|
|
830
|
-
var templateObject_1$
|
|
870
|
+
var templateObject_1$r, templateObject_2$f, templateObject_3$b;
|
|
831
871
|
|
|
832
872
|
React.createElement;
|
|
833
873
|
var _a$5 = tokensData.semantic,
|
|
@@ -895,7 +935,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
895
935
|
},
|
|
896
936
|
displayName: "Typography__StyledTypography",
|
|
897
937
|
componentId: "sc-17mqo4k-0"
|
|
898
|
-
})(templateObject_1$
|
|
938
|
+
})(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"
|
|
899
939
|
/**
|
|
900
940
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
901
941
|
*
|
|
@@ -962,23 +1002,23 @@ var Typography = function Typography(_a) {
|
|
|
962
1002
|
"data-testid": dataTestId
|
|
963
1003
|
}, children);
|
|
964
1004
|
};
|
|
965
|
-
var templateObject_1$
|
|
1005
|
+
var templateObject_1$q;
|
|
966
1006
|
|
|
967
1007
|
React.createElement;
|
|
968
1008
|
var color$3 = tokensData.semantic.color;
|
|
969
1009
|
tokensData.base.shadow;
|
|
970
|
-
var scaleIn = keyframes(templateObject_1$
|
|
1010
|
+
var scaleIn = 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"])));
|
|
971
1011
|
var BadgeWrapper = styled.span.withConfig({
|
|
972
1012
|
displayName: "Badge__BadgeWrapper",
|
|
973
1013
|
componentId: "sc-tjz4pp-0"
|
|
974
|
-
})(templateObject_2$
|
|
1014
|
+
})(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"])));
|
|
975
1015
|
var BadgeIndicator = styled.span.withConfig({
|
|
976
1016
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
977
1017
|
return !prop.startsWith('$');
|
|
978
1018
|
},
|
|
979
1019
|
displayName: "Badge__BadgeIndicator",
|
|
980
1020
|
componentId: "sc-tjz4pp-1"
|
|
981
|
-
})(templateObject_3$
|
|
1021
|
+
})(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) {
|
|
982
1022
|
return props.$isVisible ? 'flex' : 'none';
|
|
983
1023
|
}, function (props) {
|
|
984
1024
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1003,7 +1043,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1003
1043
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
1004
1044
|
displayName: "Badge__ScreenReaderOnly",
|
|
1005
1045
|
componentId: "sc-tjz4pp-2"
|
|
1006
|
-
})(templateObject_4$
|
|
1046
|
+
})(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"])));
|
|
1007
1047
|
var Badge = function Badge(_a) {
|
|
1008
1048
|
var children = _a.children,
|
|
1009
1049
|
_b = _a.count,
|
|
@@ -1034,7 +1074,7 @@ var Badge = function Badge(_a) {
|
|
|
1034
1074
|
color: "inverse"
|
|
1035
1075
|
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
|
|
1036
1076
|
};
|
|
1037
|
-
var templateObject_1$
|
|
1077
|
+
var templateObject_1$p, templateObject_2$e, templateObject_3$a, templateObject_4$8;
|
|
1038
1078
|
|
|
1039
1079
|
React.createElement;
|
|
1040
1080
|
var StyledBox = styled.div.withConfig({
|
|
@@ -1046,13 +1086,13 @@ var StyledBox = styled.div.withConfig({
|
|
|
1046
1086
|
})(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"], ["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"
|
|
1047
1087
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1048
1088
|
])), function (props) {
|
|
1049
|
-
return props.$display && css(templateObject_1$
|
|
1089
|
+
return props.$display && css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1050
1090
|
}, function (props) {
|
|
1051
|
-
return props.$flexDirection && css(templateObject_2$
|
|
1091
|
+
return props.$flexDirection && css(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1052
1092
|
}, function (props) {
|
|
1053
|
-
return props.$justifyContent && css(templateObject_3$
|
|
1093
|
+
return props.$justifyContent && css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1054
1094
|
}, function (props) {
|
|
1055
|
-
return props.$alignItems && css(templateObject_4$
|
|
1095
|
+
return props.$alignItems && css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1056
1096
|
}, function (props) {
|
|
1057
1097
|
return props.$flexWrap && css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1058
1098
|
}, function (props) {
|
|
@@ -1236,7 +1276,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1236
1276
|
}, rest), children);
|
|
1237
1277
|
};
|
|
1238
1278
|
var Box = BoxTransform;
|
|
1239
|
-
var templateObject_1$
|
|
1279
|
+
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;
|
|
1240
1280
|
|
|
1241
1281
|
var add = {
|
|
1242
1282
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1367,7 +1407,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1367
1407
|
},
|
|
1368
1408
|
displayName: "Icon__IconStyled",
|
|
1369
1409
|
componentId: "sc-1105czq-0"
|
|
1370
|
-
})(templateObject_1$
|
|
1410
|
+
})(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) {
|
|
1371
1411
|
var $size = _a.$size;
|
|
1372
1412
|
return tokensData.semantic.size.icon[$size];
|
|
1373
1413
|
}, function (_a) {
|
|
@@ -1431,13 +1471,13 @@ var Icon = function Icon(_a) {
|
|
|
1431
1471
|
d: iconData.path
|
|
1432
1472
|
})));
|
|
1433
1473
|
};
|
|
1434
|
-
var templateObject_1$
|
|
1474
|
+
var templateObject_1$n;
|
|
1435
1475
|
|
|
1436
1476
|
React.createElement;
|
|
1437
1477
|
var button = tokensData.component.button,
|
|
1438
|
-
semantic$
|
|
1478
|
+
semantic$2 = tokensData.semantic;
|
|
1439
1479
|
// Base styles shared between button and link
|
|
1440
|
-
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$
|
|
1480
|
+
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");
|
|
1441
1481
|
// Dynamic variant styles using component tokens
|
|
1442
1482
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1443
1483
|
var $variant = _a.$variant;
|
|
@@ -1463,14 +1503,14 @@ var StyledButton = styled.button.withConfig({
|
|
|
1463
1503
|
},
|
|
1464
1504
|
displayName: "Button__StyledButton",
|
|
1465
1505
|
componentId: "sc-1eiuum9-0"
|
|
1466
|
-
})(templateObject_1$
|
|
1506
|
+
})(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);
|
|
1467
1507
|
var StyledLink = styled.a.withConfig({
|
|
1468
1508
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1469
1509
|
return !prop.startsWith('$');
|
|
1470
1510
|
},
|
|
1471
1511
|
displayName: "Button__StyledLink",
|
|
1472
1512
|
componentId: "sc-1eiuum9-1"
|
|
1473
|
-
})(templateObject_2$
|
|
1513
|
+
})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1474
1514
|
// Helper function to get icon size based on button size
|
|
1475
1515
|
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1476
1516
|
// Helper function to get icon size based on button size
|
|
@@ -1563,7 +1603,7 @@ var Button = function Button(_a) {
|
|
|
1563
1603
|
"data-testid": dataTestId
|
|
1564
1604
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1565
1605
|
};
|
|
1566
|
-
var templateObject_1$
|
|
1606
|
+
var templateObject_1$m, templateObject_2$c;
|
|
1567
1607
|
|
|
1568
1608
|
var chip = tokensData.component.chip;
|
|
1569
1609
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1624,14 +1664,14 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1624
1664
|
},
|
|
1625
1665
|
displayName: "ChipBase__BaseChipStyled",
|
|
1626
1666
|
componentId: "sc-moa6zc-0"
|
|
1627
|
-
})(templateObject_1$
|
|
1667
|
+
})(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"
|
|
1628
1668
|
// Icon container for selected indicator or leading icons
|
|
1629
1669
|
])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1630
1670
|
// Icon container for selected indicator or leading icons
|
|
1631
1671
|
var IconContainer = styled.span.withConfig({
|
|
1632
1672
|
displayName: "ChipBase__IconContainer",
|
|
1633
1673
|
componentId: "sc-moa6zc-1"
|
|
1634
|
-
})(templateObject_2$
|
|
1674
|
+
})(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"
|
|
1635
1675
|
// Close button for dismissible chips
|
|
1636
1676
|
])), tokensData.semantic.spacing.layout.sm);
|
|
1637
1677
|
// Close button for dismissible chips
|
|
@@ -1641,7 +1681,7 @@ var CloseButton = styled.button.withConfig({
|
|
|
1641
1681
|
},
|
|
1642
1682
|
displayName: "ChipBase__CloseButton",
|
|
1643
1683
|
componentId: "sc-moa6zc-2"
|
|
1644
|
-
})(templateObject_3$
|
|
1684
|
+
})(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"
|
|
1645
1685
|
// Wrapper component that applies styles via CSS custom properties
|
|
1646
1686
|
])), tokensData.semantic.spacing.layout.sm, function (props) {
|
|
1647
1687
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
@@ -1676,7 +1716,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1676
1716
|
style: __assign(__assign({}, cssProps), style)
|
|
1677
1717
|
}, htmlProps), children);
|
|
1678
1718
|
};
|
|
1679
|
-
var templateObject_1$
|
|
1719
|
+
var templateObject_1$l, templateObject_2$b, templateObject_3$8;
|
|
1680
1720
|
|
|
1681
1721
|
React.createElement;
|
|
1682
1722
|
/**
|
|
@@ -1920,32 +1960,32 @@ var spacing$3 = tokensData.semantic.spacing;
|
|
|
1920
1960
|
var StyledContainer = styled.div.withConfig({
|
|
1921
1961
|
displayName: "Container__StyledContainer",
|
|
1922
1962
|
componentId: "sc-17dbj6n-0"
|
|
1923
|
-
})(templateObject_1$
|
|
1963
|
+
})(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']);
|
|
1924
1964
|
var Container = function Container(_a) {
|
|
1925
1965
|
var children = _a.children,
|
|
1926
1966
|
props = __rest(_a, ["children"]);
|
|
1927
1967
|
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
1928
1968
|
};
|
|
1929
|
-
var templateObject_1$
|
|
1969
|
+
var templateObject_1$k;
|
|
1930
1970
|
|
|
1931
1971
|
React.createElement;
|
|
1932
|
-
var base = tokensData.base;
|
|
1972
|
+
var base$1 = tokensData.base;
|
|
1933
1973
|
var PictureWrapper = styled.div.withConfig({
|
|
1934
1974
|
displayName: "Picture__PictureWrapper",
|
|
1935
1975
|
componentId: "sc-11d9tei-0"
|
|
1936
|
-
})(templateObject_1$
|
|
1976
|
+
})(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);
|
|
1937
1977
|
var ImageLink = styled.a.withConfig({
|
|
1938
1978
|
displayName: "Picture__ImageLink",
|
|
1939
1979
|
componentId: "sc-11d9tei-1"
|
|
1940
|
-
})(templateObject_2$
|
|
1980
|
+
})(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);
|
|
1941
1981
|
var ImageButton = styled.button.withConfig({
|
|
1942
1982
|
displayName: "Picture__ImageButton",
|
|
1943
1983
|
componentId: "sc-11d9tei-2"
|
|
1944
|
-
})(templateObject_3$
|
|
1984
|
+
})(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);
|
|
1945
1985
|
var StyledImage = styled.img.withConfig({
|
|
1946
1986
|
displayName: "Picture__StyledImage",
|
|
1947
1987
|
componentId: "sc-11d9tei-3"
|
|
1948
|
-
})(templateObject_4$
|
|
1988
|
+
})(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]);
|
|
1949
1989
|
var Picture = function Picture(_a) {
|
|
1950
1990
|
var title = _a.title,
|
|
1951
1991
|
src = _a.src,
|
|
@@ -1972,7 +2012,7 @@ var Picture = function Picture(_a) {
|
|
|
1972
2012
|
"aria-label": "Read more about ".concat(title)
|
|
1973
2013
|
}, image) : image);
|
|
1974
2014
|
};
|
|
1975
|
-
var templateObject_1$
|
|
2015
|
+
var templateObject_1$j, templateObject_2$a, templateObject_3$7, templateObject_4$6;
|
|
1976
2016
|
|
|
1977
2017
|
React.createElement;
|
|
1978
2018
|
var _a$4 = tokensData.semantic,
|
|
@@ -1981,7 +2021,7 @@ var _a$4 = tokensData.semantic,
|
|
|
1981
2021
|
var TimeStyled = styled.time.withConfig({
|
|
1982
2022
|
displayName: "DateFormatter__TimeStyled",
|
|
1983
2023
|
componentId: "sc-5464cc-0"
|
|
1984
|
-
})(templateObject_1$
|
|
2024
|
+
})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography$1.label, color$2.text.subdued);
|
|
1985
2025
|
var DateFormatter = function DateFormatter(_a) {
|
|
1986
2026
|
var dateString = _a.dateString,
|
|
1987
2027
|
_b = _a.formatString,
|
|
@@ -1993,7 +2033,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
1993
2033
|
"data-testid": dataTestId
|
|
1994
2034
|
}, format(date, formatString));
|
|
1995
2035
|
};
|
|
1996
|
-
var templateObject_1$
|
|
2036
|
+
var templateObject_1$i;
|
|
1997
2037
|
|
|
1998
2038
|
React.createElement;
|
|
1999
2039
|
var motion = tokensData.semantic.motion,
|
|
@@ -2004,7 +2044,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2004
2044
|
},
|
|
2005
2045
|
displayName: "IconButton__IconButtonStyled",
|
|
2006
2046
|
componentId: "sc-k8b14t-0"
|
|
2007
|
-
})(templateObject_1$
|
|
2047
|
+
})(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) {
|
|
2008
2048
|
var $variant = _a.$variant;
|
|
2009
2049
|
switch ($variant) {
|
|
2010
2050
|
case 'primary':
|
|
@@ -2115,7 +2155,7 @@ var IconButton = function IconButton(_a) {
|
|
|
2115
2155
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2116
2156
|
}));
|
|
2117
2157
|
};
|
|
2118
|
-
var templateObject_1$
|
|
2158
|
+
var templateObject_1$h;
|
|
2119
2159
|
|
|
2120
2160
|
React.createElement;
|
|
2121
2161
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -2124,10 +2164,10 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
2124
2164
|
},
|
|
2125
2165
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2126
2166
|
componentId: "sc-1nco33q-0"
|
|
2127
|
-
})(templateObject_3$
|
|
2128
|
-
return props.$variant === 'horizontal' && css(templateObject_1$
|
|
2167
|
+
})(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) {
|
|
2168
|
+
return props.$variant === 'horizontal' && 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);
|
|
2129
2169
|
}, function (props) {
|
|
2130
|
-
return props.$variant === 'vertical' && css(templateObject_2$
|
|
2170
|
+
return props.$variant === 'vertical' && 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);
|
|
2131
2171
|
});
|
|
2132
2172
|
var ProgressBarFill = styled.div.withConfig({
|
|
2133
2173
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2149,7 +2189,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2149
2189
|
backgroundColor = tokensData.semantic.color.background.interactive;
|
|
2150
2190
|
break;
|
|
2151
2191
|
}
|
|
2152
|
-
return css(templateObject_4$
|
|
2192
|
+
return css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2153
2193
|
}, function (props) {
|
|
2154
2194
|
return props.$variant === 'horizontal' && css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2155
2195
|
}, function (props) {
|
|
@@ -2179,7 +2219,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2179
2219
|
$color: color
|
|
2180
2220
|
}));
|
|
2181
2221
|
};
|
|
2182
|
-
var templateObject_1$
|
|
2222
|
+
var templateObject_1$g, templateObject_2$9, templateObject_3$6, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1;
|
|
2183
2223
|
|
|
2184
2224
|
React.createElement;
|
|
2185
2225
|
var StyledDivider = styled.div.withConfig({
|
|
@@ -2188,7 +2228,7 @@ var StyledDivider = styled.div.withConfig({
|
|
|
2188
2228
|
},
|
|
2189
2229
|
displayName: "Divider__StyledDivider",
|
|
2190
2230
|
componentId: "sc-1l0c8ja-0"
|
|
2191
|
-
})(templateObject_1$
|
|
2231
|
+
})(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"
|
|
2192
2232
|
/**
|
|
2193
2233
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2194
2234
|
*
|
|
@@ -2301,7 +2341,7 @@ var Divider = function Divider(_a) {
|
|
|
2301
2341
|
"aria-orientation": orientation
|
|
2302
2342
|
});
|
|
2303
2343
|
};
|
|
2304
|
-
var templateObject_1$
|
|
2344
|
+
var templateObject_1$f;
|
|
2305
2345
|
|
|
2306
2346
|
React.createElement;
|
|
2307
2347
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2310,7 +2350,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2310
2350
|
},
|
|
2311
2351
|
displayName: "Stack__StyledStack",
|
|
2312
2352
|
componentId: "sc-1ehkxgy-0"
|
|
2313
|
-
})(templateObject_1$
|
|
2353
|
+
})(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"
|
|
2314
2354
|
// Helper function to convert gap prop to CSS value
|
|
2315
2355
|
])));
|
|
2316
2356
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2348,17 +2388,17 @@ var Stack = function Stack(_a) {
|
|
|
2348
2388
|
"data-testid": dataTestId
|
|
2349
2389
|
}, children);
|
|
2350
2390
|
};
|
|
2351
|
-
var templateObject_1$
|
|
2391
|
+
var templateObject_1$e;
|
|
2352
2392
|
|
|
2353
2393
|
React.createElement;
|
|
2354
|
-
var semantic = tokensData.semantic;
|
|
2394
|
+
var semantic$1 = tokensData.semantic;
|
|
2355
2395
|
var StyledTag = styled.span.withConfig({
|
|
2356
2396
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2357
2397
|
return !prop.startsWith('$');
|
|
2358
2398
|
},
|
|
2359
2399
|
displayName: "Tag__StyledTag",
|
|
2360
2400
|
componentId: "sc-lzfmti-0"
|
|
2361
|
-
})(templateObject_1$
|
|
2401
|
+
})(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"
|
|
2362
2402
|
/**
|
|
2363
2403
|
* Tag component for categorizing and labeling content
|
|
2364
2404
|
*
|
|
@@ -2368,33 +2408,33 @@ var StyledTag = styled.span.withConfig({
|
|
|
2368
2408
|
var $variant = _a.$variant;
|
|
2369
2409
|
switch ($variant) {
|
|
2370
2410
|
case 'interactive':
|
|
2371
|
-
return semantic.color.background['interactive-subtle'];
|
|
2411
|
+
return semantic$1.color.background['interactive-subtle'];
|
|
2372
2412
|
case 'success':
|
|
2373
|
-
return semantic.color.background['success-subtle'];
|
|
2413
|
+
return semantic$1.color.background['success-subtle'];
|
|
2374
2414
|
case 'warning':
|
|
2375
|
-
return semantic.color.background['warning-subtle'];
|
|
2415
|
+
return semantic$1.color.background['warning-subtle'];
|
|
2376
2416
|
case 'error':
|
|
2377
|
-
return semantic.color.background['error-subtle'];
|
|
2417
|
+
return semantic$1.color.background['error-subtle'];
|
|
2378
2418
|
case 'emphasis':
|
|
2379
|
-
return semantic.color.background.emphasis;
|
|
2419
|
+
return semantic$1.color.background.emphasis;
|
|
2380
2420
|
default:
|
|
2381
|
-
return semantic.color.background.surface;
|
|
2421
|
+
return semantic$1.color.background.surface;
|
|
2382
2422
|
}
|
|
2383
2423
|
}, function (_a) {
|
|
2384
2424
|
var $variant = _a.$variant;
|
|
2385
2425
|
switch ($variant) {
|
|
2386
2426
|
case 'interactive':
|
|
2387
|
-
return semantic.color.text.interactive;
|
|
2427
|
+
return semantic$1.color.text.interactive;
|
|
2388
2428
|
case 'success':
|
|
2389
|
-
return semantic.color.text.success;
|
|
2429
|
+
return semantic$1.color.text.success;
|
|
2390
2430
|
case 'warning':
|
|
2391
|
-
return semantic.color.text.warning;
|
|
2431
|
+
return semantic$1.color.text.warning;
|
|
2392
2432
|
case 'error':
|
|
2393
|
-
return semantic.color.text.error;
|
|
2433
|
+
return semantic$1.color.text.error;
|
|
2394
2434
|
case 'emphasis':
|
|
2395
|
-
return semantic.color.text.inverse;
|
|
2435
|
+
return semantic$1.color.text.inverse;
|
|
2396
2436
|
default:
|
|
2397
|
-
return semantic.color.text["default"];
|
|
2437
|
+
return semantic$1.color.text["default"];
|
|
2398
2438
|
}
|
|
2399
2439
|
}, function (_a) {
|
|
2400
2440
|
var $variant = _a.$variant,
|
|
@@ -2402,17 +2442,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2402
2442
|
if (!$border) return 'none';
|
|
2403
2443
|
switch ($variant) {
|
|
2404
2444
|
case 'interactive':
|
|
2405
|
-
return "1px solid ".concat(semantic.color.border.interactive);
|
|
2445
|
+
return "1px solid ".concat(semantic$1.color.border.interactive);
|
|
2406
2446
|
case 'success':
|
|
2407
|
-
return "1px solid ".concat(semantic.color.border.success);
|
|
2447
|
+
return "1px solid ".concat(semantic$1.color.border.success);
|
|
2408
2448
|
case 'warning':
|
|
2409
|
-
return "1px solid ".concat(semantic.color.border.warning);
|
|
2449
|
+
return "1px solid ".concat(semantic$1.color.border.warning);
|
|
2410
2450
|
case 'error':
|
|
2411
|
-
return "1px solid ".concat(semantic.color.border.error);
|
|
2451
|
+
return "1px solid ".concat(semantic$1.color.border.error);
|
|
2412
2452
|
case 'emphasis':
|
|
2413
|
-
return "1px solid ".concat(semantic.color.background.emphasis);
|
|
2453
|
+
return "1px solid ".concat(semantic$1.color.background.emphasis);
|
|
2414
2454
|
default:
|
|
2415
|
-
return "1px solid ".concat(semantic.color.border["default"]);
|
|
2455
|
+
return "1px solid ".concat(semantic$1.color.border["default"]);
|
|
2416
2456
|
}
|
|
2417
2457
|
});
|
|
2418
2458
|
/**
|
|
@@ -2439,18 +2479,18 @@ var Tag = function Tag(_a) {
|
|
|
2439
2479
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
2440
2480
|
}, props), children);
|
|
2441
2481
|
};
|
|
2442
|
-
var templateObject_1$
|
|
2482
|
+
var templateObject_1$d;
|
|
2443
2483
|
|
|
2444
2484
|
React.createElement;
|
|
2445
2485
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
2446
2486
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
2447
2487
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
2448
2488
|
componentId: "sc-7ouzg5-0"
|
|
2449
|
-
})(templateObject_1$
|
|
2489
|
+
})(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');
|
|
2450
2490
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
2451
2491
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
2452
2492
|
componentId: "sc-7ouzg5-1"
|
|
2453
|
-
})(templateObject_2$
|
|
2493
|
+
})(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"]);
|
|
2454
2494
|
var isInternalUrl = function isInternalUrl(url) {
|
|
2455
2495
|
return url.startsWith('/') && !url.startsWith('http');
|
|
2456
2496
|
};
|
|
@@ -2476,13 +2516,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
2476
2516
|
}, breadcrumb.label)));
|
|
2477
2517
|
}))));
|
|
2478
2518
|
};
|
|
2479
|
-
var templateObject_1$
|
|
2519
|
+
var templateObject_1$c, templateObject_2$8;
|
|
2480
2520
|
|
|
2481
2521
|
React.createElement;
|
|
2482
2522
|
var CardSmallStyled = styled.div.withConfig({
|
|
2483
2523
|
displayName: "CardSmall__CardSmallStyled",
|
|
2484
2524
|
componentId: "sc-jpcqvd-0"
|
|
2485
|
-
})(templateObject_1$
|
|
2525
|
+
})(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);
|
|
2486
2526
|
var CardSmall = function CardSmall(_a) {
|
|
2487
2527
|
var title = _a.title,
|
|
2488
2528
|
picture = _a.picture,
|
|
@@ -2519,14 +2559,14 @@ var CardSmall = function CardSmall(_a) {
|
|
|
2519
2559
|
color: "subdued"
|
|
2520
2560
|
}, meta))))));
|
|
2521
2561
|
};
|
|
2522
|
-
var templateObject_1$
|
|
2562
|
+
var templateObject_1$b;
|
|
2523
2563
|
|
|
2524
2564
|
React.createElement;
|
|
2525
2565
|
var border$3 = tokensData.base.border;
|
|
2526
2566
|
var CardLargeStyled = styled.div.withConfig({
|
|
2527
2567
|
displayName: "CardLarge__CardLargeStyled",
|
|
2528
2568
|
componentId: "sc-1rfgdzl-0"
|
|
2529
|
-
})(templateObject_1$
|
|
2569
|
+
})(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]);
|
|
2530
2570
|
var CardLarge = function CardLarge(_a) {
|
|
2531
2571
|
var title = _a.title,
|
|
2532
2572
|
excerpt = _a.excerpt,
|
|
@@ -2571,13 +2611,218 @@ var CardLarge = function CardLarge(_a) {
|
|
|
2571
2611
|
});
|
|
2572
2612
|
})))));
|
|
2573
2613
|
};
|
|
2574
|
-
var templateObject_1$
|
|
2614
|
+
var templateObject_1$a;
|
|
2615
|
+
|
|
2616
|
+
/**
|
|
2617
|
+
* Hidden native checkbox input for accessibility
|
|
2618
|
+
* Maintains keyboard navigation and screen reader support
|
|
2619
|
+
*/
|
|
2620
|
+
var HiddenCheckboxInput = styled.input.withConfig({
|
|
2621
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2622
|
+
return !prop.startsWith('$');
|
|
2623
|
+
},
|
|
2624
|
+
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
2625
|
+
componentId: "sc-1ddpctx-0"
|
|
2626
|
+
})(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"
|
|
2627
|
+
/**
|
|
2628
|
+
* Custom checkbox visual component
|
|
2629
|
+
* 24px × 24px for 8px grid alignment
|
|
2630
|
+
* Uses component.input.* tokens for consistency with TextField
|
|
2631
|
+
*/])));
|
|
2632
|
+
/**
|
|
2633
|
+
* Custom checkbox visual component
|
|
2634
|
+
* 24px × 24px for 8px grid alignment
|
|
2635
|
+
* Uses component.input.* tokens for consistency with TextField
|
|
2636
|
+
*/
|
|
2637
|
+
var StyledCheckbox = styled.span.withConfig({
|
|
2638
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2639
|
+
return !prop.startsWith('$');
|
|
2640
|
+
},
|
|
2641
|
+
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2642
|
+
componentId: "sc-1ddpctx-1"
|
|
2643
|
+
})(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"
|
|
2644
|
+
/**
|
|
2645
|
+
* Container for checkbox with proper spacing and alignment
|
|
2646
|
+
* 48px min-height for touch target (8px grid aligned)
|
|
2647
|
+
*/])), tokensData.component.input["default"].borderRadius, tokensData.component.input["default"].borderWidth, function (props) {
|
|
2648
|
+
return props.$checked || props.$indeterminate ? tokensData.semantic.color.background.interactive : tokensData.component.input["default"].backgroundColor;
|
|
2649
|
+
}, function (props) {
|
|
2650
|
+
if (props.$state === 'error') return tokensData.component.input.error.borderColor;
|
|
2651
|
+
if (props.$checked || props.$indeterminate) return tokensData.semantic.color.background.interactive;
|
|
2652
|
+
return tokensData.component.input["default"].borderColor;
|
|
2653
|
+
}, function (props) {
|
|
2654
|
+
return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
|
|
2655
|
+
}, HiddenCheckboxInput, function (props) {
|
|
2656
|
+
return props.$state === 'error' ? tokensData.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensData.semantic.color.background.interactive : tokensData.component.input.hover.borderColor;
|
|
2657
|
+
}, HiddenCheckboxInput, tokensData.component.input.focus.outline, tokensData.component.input.focus.outlineOffset, function (props) {
|
|
2658
|
+
return props.$state === 'error' ? tokensData.component.input.error.focus.borderColor : tokensData.component.input.focus.borderColor;
|
|
2659
|
+
}, function (props) {
|
|
2660
|
+
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 ");
|
|
2661
|
+
}, function (props) {
|
|
2662
|
+
return props.$checked ? 'block' : 'none';
|
|
2663
|
+
}, tokensData.semantic.color.text.inverse, function (props) {
|
|
2664
|
+
return props.$indeterminate ? 'block' : 'none';
|
|
2665
|
+
}, tokensData.semantic.color.text.inverse);
|
|
2666
|
+
/**
|
|
2667
|
+
* Container for checkbox with proper spacing and alignment
|
|
2668
|
+
* 48px min-height for touch target (8px grid aligned)
|
|
2669
|
+
*/
|
|
2670
|
+
var StyledCheckboxContainer = styled.label.withConfig({
|
|
2671
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2672
|
+
return !prop.startsWith('$');
|
|
2673
|
+
},
|
|
2674
|
+
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
2675
|
+
componentId: "sc-1ddpctx-2"
|
|
2676
|
+
})(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"
|
|
2677
|
+
/**
|
|
2678
|
+
* Label text with proper typography
|
|
2679
|
+
*/])), tokensData.base.spacing[3], function (props) {
|
|
2680
|
+
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
2681
|
+
}, function (props) {
|
|
2682
|
+
return props.$labelPosition === 'left' ? 'row-reverse' : 'row';
|
|
2683
|
+
});
|
|
2684
|
+
/**
|
|
2685
|
+
* Label text with proper typography
|
|
2686
|
+
*/
|
|
2687
|
+
var StyledCheckboxLabel = styled.span.withConfig({
|
|
2688
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2689
|
+
return !prop.startsWith('$');
|
|
2690
|
+
},
|
|
2691
|
+
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
2692
|
+
componentId: "sc-1ddpctx-3"
|
|
2693
|
+
})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
2694
|
+
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
2695
|
+
});
|
|
2696
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$5, templateObject_4$4;
|
|
2697
|
+
|
|
2698
|
+
React.createElement;
|
|
2699
|
+
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
2700
|
+
displayName: "Checkbox__StyledFieldContainer",
|
|
2701
|
+
componentId: "sc-vquz3v-0"
|
|
2702
|
+
})(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]);
|
|
2703
|
+
var StyledHelperText$1 = styled.span.withConfig({
|
|
2704
|
+
displayName: "Checkbox__StyledHelperText",
|
|
2705
|
+
componentId: "sc-vquz3v-1"
|
|
2706
|
+
})(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"
|
|
2707
|
+
/**
|
|
2708
|
+
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2709
|
+
*
|
|
2710
|
+
* Features:
|
|
2711
|
+
* - Custom styled checkbox with clear visual states
|
|
2712
|
+
* - Integrated label with configurable positioning
|
|
2713
|
+
* - Helper text and error messaging
|
|
2714
|
+
* - Indeterminate state support
|
|
2715
|
+
* - Full keyboard navigation (Space to toggle)
|
|
2716
|
+
* - ARIA attributes for screen readers
|
|
2717
|
+
* - 8px grid aligned (48px touch target)
|
|
2718
|
+
*
|
|
2719
|
+
* @example
|
|
2720
|
+
* ```tsx
|
|
2721
|
+
* <Checkbox
|
|
2722
|
+
* label="Accept terms and conditions"
|
|
2723
|
+
* checked={accepted}
|
|
2724
|
+
* onChange={(e) => setAccepted(e.target.checked)}
|
|
2725
|
+
* required
|
|
2726
|
+
* />
|
|
2727
|
+
* ```
|
|
2728
|
+
*/])), tokensData.semantic.typography.small, function (props) {
|
|
2729
|
+
return props.$error ? tokensData.semantic.color.text.error : tokensData.semantic.color.text.subdued;
|
|
2730
|
+
}, tokensData.base.spacing[9]);
|
|
2731
|
+
/**
|
|
2732
|
+
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2733
|
+
*
|
|
2734
|
+
* Features:
|
|
2735
|
+
* - Custom styled checkbox with clear visual states
|
|
2736
|
+
* - Integrated label with configurable positioning
|
|
2737
|
+
* - Helper text and error messaging
|
|
2738
|
+
* - Indeterminate state support
|
|
2739
|
+
* - Full keyboard navigation (Space to toggle)
|
|
2740
|
+
* - ARIA attributes for screen readers
|
|
2741
|
+
* - 8px grid aligned (48px touch target)
|
|
2742
|
+
*
|
|
2743
|
+
* @example
|
|
2744
|
+
* ```tsx
|
|
2745
|
+
* <Checkbox
|
|
2746
|
+
* label="Accept terms and conditions"
|
|
2747
|
+
* checked={accepted}
|
|
2748
|
+
* onChange={(e) => setAccepted(e.target.checked)}
|
|
2749
|
+
* required
|
|
2750
|
+
* />
|
|
2751
|
+
* ```
|
|
2752
|
+
*/
|
|
2753
|
+
var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
2754
|
+
var label = _a.label,
|
|
2755
|
+
_b = _a.checked,
|
|
2756
|
+
checked = _b === void 0 ? false : _b,
|
|
2757
|
+
_c = _a.indeterminate,
|
|
2758
|
+
indeterminate = _c === void 0 ? false : _c,
|
|
2759
|
+
_d = _a.labelPosition,
|
|
2760
|
+
labelPosition = _d === void 0 ? 'right' : _d,
|
|
2761
|
+
helperText = _a.helperText,
|
|
2762
|
+
error = _a.error,
|
|
2763
|
+
_e = _a.disabled,
|
|
2764
|
+
disabled = _e === void 0 ? false : _e,
|
|
2765
|
+
onChange = _a.onChange,
|
|
2766
|
+
providedId = _a.id,
|
|
2767
|
+
ariaDescribedby = _a["aria-describedby"],
|
|
2768
|
+
rest = __rest(_a, ["label", "checked", "indeterminate", "labelPosition", "helperText", "error", "disabled", "onChange", "id", 'aria-describedby']);
|
|
2769
|
+
var generatedId = useId();
|
|
2770
|
+
var id = providedId || generatedId;
|
|
2771
|
+
var helperTextId = "".concat(id, "-helper-text");
|
|
2772
|
+
var errorId = "".concat(id, "-error");
|
|
2773
|
+
// Determine the state for styling
|
|
2774
|
+
var state = disabled ? 'disabled' : error ? 'error' : 'default';
|
|
2775
|
+
// Set up ARIA describedby
|
|
2776
|
+
var describedBy = [ariaDescribedby, helperText ? helperTextId : undefined, error ? errorId : undefined].filter(Boolean).join(' ');
|
|
2777
|
+
// Update indeterminate property on the input element
|
|
2778
|
+
var inputRef = React.useRef(null);
|
|
2779
|
+
React.useImperativeHandle(ref, function () {
|
|
2780
|
+
return inputRef.current;
|
|
2781
|
+
});
|
|
2782
|
+
React.useEffect(function () {
|
|
2783
|
+
if (inputRef.current) {
|
|
2784
|
+
inputRef.current.indeterminate = indeterminate;
|
|
2785
|
+
}
|
|
2786
|
+
}, [indeterminate]);
|
|
2787
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer$1, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, {
|
|
2788
|
+
$disabled: disabled,
|
|
2789
|
+
$labelPosition: labelPosition
|
|
2790
|
+
}, /*#__PURE__*/React.createElement(HiddenCheckboxInput, _extends({
|
|
2791
|
+
ref: inputRef,
|
|
2792
|
+
type: "checkbox",
|
|
2793
|
+
id: id,
|
|
2794
|
+
checked: checked,
|
|
2795
|
+
disabled: disabled,
|
|
2796
|
+
onChange: onChange,
|
|
2797
|
+
"aria-describedby": describedBy || undefined,
|
|
2798
|
+
"aria-invalid": error ? true : undefined,
|
|
2799
|
+
$state: state,
|
|
2800
|
+
$checked: checked,
|
|
2801
|
+
$indeterminate: indeterminate
|
|
2802
|
+
}, rest)), /*#__PURE__*/React.createElement(StyledCheckbox, {
|
|
2803
|
+
$state: state,
|
|
2804
|
+
$checked: checked,
|
|
2805
|
+
$indeterminate: indeterminate,
|
|
2806
|
+
"aria-hidden": "true"
|
|
2807
|
+
}), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
|
|
2808
|
+
$disabled: disabled
|
|
2809
|
+
}, label)), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$1, {
|
|
2810
|
+
id: helperTextId
|
|
2811
|
+
}, helperText), error && /*#__PURE__*/React.createElement(StyledHelperText$1, {
|
|
2812
|
+
id: errorId,
|
|
2813
|
+
$error: true,
|
|
2814
|
+
role: "alert",
|
|
2815
|
+
"aria-live": "polite"
|
|
2816
|
+
}, error));
|
|
2817
|
+
});
|
|
2818
|
+
Checkbox.displayName = 'Checkbox';
|
|
2819
|
+
var templateObject_1$8, templateObject_2$6;
|
|
2575
2820
|
|
|
2576
2821
|
React.createElement;
|
|
2577
2822
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
2578
2823
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
2579
2824
|
componentId: "sc-ae049w-0"
|
|
2580
|
-
})(templateObject_1$
|
|
2825
|
+
})(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"])));
|
|
2581
2826
|
var ChipGroup = function ChipGroup(_a) {
|
|
2582
2827
|
var labels = _a.labels,
|
|
2583
2828
|
_b = _a.variant,
|
|
@@ -2596,7 +2841,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
2596
2841
|
});
|
|
2597
2842
|
})));
|
|
2598
2843
|
};
|
|
2599
|
-
var templateObject_1$
|
|
2844
|
+
var templateObject_1$7;
|
|
2600
2845
|
|
|
2601
2846
|
React.createElement;
|
|
2602
2847
|
var _a$2 = tokensData.semantic,
|
|
@@ -2606,15 +2851,15 @@ var _a$2 = tokensData.semantic,
|
|
|
2606
2851
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
2607
2852
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
2608
2853
|
componentId: "sc-1p1t0kp-0"
|
|
2609
|
-
})(templateObject_1$
|
|
2854
|
+
})(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);
|
|
2610
2855
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
2611
2856
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
2612
2857
|
componentId: "sc-1p1t0kp-1"
|
|
2613
|
-
})(templateObject_2$
|
|
2858
|
+
})(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"])));
|
|
2614
2859
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
2615
2860
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
2616
2861
|
componentId: "sc-1p1t0kp-2"
|
|
2617
|
-
})(templateObject_3$
|
|
2862
|
+
})(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);
|
|
2618
2863
|
var CopyButton = function CopyButton(_a) {
|
|
2619
2864
|
var text = _a.text,
|
|
2620
2865
|
onCopy = _a.onCopy;
|
|
@@ -2691,7 +2936,7 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
2691
2936
|
onCopy: onCopy
|
|
2692
2937
|
}));
|
|
2693
2938
|
};
|
|
2694
|
-
var templateObject_1$
|
|
2939
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4;
|
|
2695
2940
|
|
|
2696
2941
|
React.createElement;
|
|
2697
2942
|
var _a$1 = tokensData.base,
|
|
@@ -2700,19 +2945,19 @@ var _a$1 = tokensData.base,
|
|
|
2700
2945
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
2701
2946
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
2702
2947
|
componentId: "sc-1mi4lso-0"
|
|
2703
|
-
})(templateObject_1$
|
|
2948
|
+
})(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]);
|
|
2704
2949
|
var ImageWrapper = styled.div.withConfig({
|
|
2705
2950
|
displayName: "FeatureBlock__ImageWrapper",
|
|
2706
2951
|
componentId: "sc-1mi4lso-1"
|
|
2707
|
-
})(templateObject_2$
|
|
2952
|
+
})(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);
|
|
2708
2953
|
var ContentSection = styled.div.withConfig({
|
|
2709
2954
|
displayName: "FeatureBlock__ContentSection",
|
|
2710
2955
|
componentId: "sc-1mi4lso-2"
|
|
2711
|
-
})(templateObject_3$
|
|
2956
|
+
})(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]);
|
|
2712
2957
|
var ButtonWrapper = styled.div.withConfig({
|
|
2713
2958
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
2714
2959
|
componentId: "sc-1mi4lso-3"
|
|
2715
|
-
})(templateObject_4$
|
|
2960
|
+
})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
2716
2961
|
var ContentWrapper = styled.div.withConfig({
|
|
2717
2962
|
displayName: "FeatureBlock__ContentWrapper",
|
|
2718
2963
|
componentId: "sc-1mi4lso-4"
|
|
@@ -2756,7 +3001,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
2756
3001
|
onClick: onReadMore
|
|
2757
3002
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
2758
3003
|
};
|
|
2759
|
-
var templateObject_1$
|
|
3004
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2;
|
|
2760
3005
|
|
|
2761
3006
|
React.createElement;
|
|
2762
3007
|
var _a = tokensData.base,
|
|
@@ -2770,14 +3015,14 @@ var _a = tokensData.base,
|
|
|
2770
3015
|
var DropdownContainer = styled.div.withConfig({
|
|
2771
3016
|
displayName: "Dropdown__DropdownContainer",
|
|
2772
3017
|
componentId: "sc-kz07c4-0"
|
|
2773
|
-
})(templateObject_1$
|
|
3018
|
+
})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
2774
3019
|
var DropdownTrigger = styled.button.withConfig({
|
|
2775
3020
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2776
3021
|
return !prop.startsWith('$');
|
|
2777
3022
|
},
|
|
2778
3023
|
displayName: "Dropdown__DropdownTrigger",
|
|
2779
3024
|
componentId: "sc-kz07c4-1"
|
|
2780
|
-
})(templateObject_2$
|
|
3025
|
+
})(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) {
|
|
2781
3026
|
var $isOpen = _a.$isOpen;
|
|
2782
3027
|
return $isOpen && "\n background-color: ".concat(color.background.surface, ";\n border-color: ").concat(color.border.strong, ";\n ");
|
|
2783
3028
|
});
|
|
@@ -2787,7 +3032,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
2787
3032
|
},
|
|
2788
3033
|
displayName: "Dropdown__DropdownIcon",
|
|
2789
3034
|
componentId: "sc-kz07c4-2"
|
|
2790
|
-
})(templateObject_3$
|
|
3035
|
+
})(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) {
|
|
2791
3036
|
var $isOpen = _a.$isOpen;
|
|
2792
3037
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
2793
3038
|
});
|
|
@@ -2797,7 +3042,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
2797
3042
|
},
|
|
2798
3043
|
displayName: "Dropdown__DropdownMenu",
|
|
2799
3044
|
componentId: "sc-kz07c4-3"
|
|
2800
|
-
})(templateObject_4$
|
|
3045
|
+
})(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) {
|
|
2801
3046
|
var $isOpen = _a.$isOpen;
|
|
2802
3047
|
return $isOpen ? 1 : 0;
|
|
2803
3048
|
}, function (_a) {
|
|
@@ -2967,7 +3212,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
2967
3212
|
}, option.label);
|
|
2968
3213
|
})));
|
|
2969
3214
|
};
|
|
2970
|
-
var templateObject_1$
|
|
3215
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$1;
|
|
2971
3216
|
|
|
2972
3217
|
React.createElement;
|
|
2973
3218
|
var PageTitleStyled = styled.div.withConfig({
|
|
@@ -2976,7 +3221,7 @@ var PageTitleStyled = styled.div.withConfig({
|
|
|
2976
3221
|
},
|
|
2977
3222
|
displayName: "PageTitle__PageTitleStyled",
|
|
2978
3223
|
componentId: "sc-16h256f-0"
|
|
2979
|
-
})(templateObject_1$
|
|
3224
|
+
})(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) {
|
|
2980
3225
|
var $hasBackButton = _a.$hasBackButton;
|
|
2981
3226
|
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
2982
3227
|
});
|
|
@@ -3003,7 +3248,147 @@ var PageTitle = function PageTitle(_a) {
|
|
|
3003
3248
|
color: "subdued"
|
|
3004
3249
|
}, subtitle)));
|
|
3005
3250
|
};
|
|
3006
|
-
var templateObject_1$
|
|
3251
|
+
var templateObject_1$3;
|
|
3252
|
+
|
|
3253
|
+
var input = tokensData.component.input;
|
|
3254
|
+
var StyledInputBase = styled.input.withConfig({
|
|
3255
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3256
|
+
return !prop.startsWith('$');
|
|
3257
|
+
},
|
|
3258
|
+
displayName: "InputBase__StyledInputBase",
|
|
3259
|
+
componentId: "sc-1bpf4e8-0"
|
|
3260
|
+
})(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"
|
|
3261
|
+
/**
|
|
3262
|
+
* Base styled textarea with shared styling
|
|
3263
|
+
*/])), input["default"].font, function (_a) {
|
|
3264
|
+
var $disabled = _a.$disabled;
|
|
3265
|
+
return $disabled ? input.disabled.textColor : input["default"].textColor;
|
|
3266
|
+
}, input["default"].paddingY, input["default"].paddingX, function (_a) {
|
|
3267
|
+
var $disabled = _a.$disabled;
|
|
3268
|
+
return $disabled ? input.disabled.backgroundColor : input["default"].backgroundColor;
|
|
3269
|
+
}, input["default"].borderWidth, function (_a) {
|
|
3270
|
+
var $hasError = _a.$hasError,
|
|
3271
|
+
$disabled = _a.$disabled;
|
|
3272
|
+
if ($disabled) return input.disabled.borderColor;
|
|
3273
|
+
if ($hasError) return input.error.borderColor;
|
|
3274
|
+
return input["default"].borderColor;
|
|
3275
|
+
}, input["default"].borderRadius, input.placeholder.textColor, function (_a) {
|
|
3276
|
+
var $hasError = _a.$hasError;
|
|
3277
|
+
return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
|
|
3278
|
+
}, input.focus.outline, input.focus.outlineOffset, function (_a) {
|
|
3279
|
+
var $hasError = _a.$hasError;
|
|
3280
|
+
return $hasError ? input.error.hover.borderColor : input.hover.borderColor;
|
|
3281
|
+
}, input.disabled.cursor);
|
|
3282
|
+
/**
|
|
3283
|
+
* Base styled textarea with shared styling
|
|
3284
|
+
*/
|
|
3285
|
+
var StyledTextAreaBase = styled.textarea.withConfig({
|
|
3286
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3287
|
+
return !prop.startsWith('$');
|
|
3288
|
+
},
|
|
3289
|
+
displayName: "InputBase__StyledTextAreaBase",
|
|
3290
|
+
componentId: "sc-1bpf4e8-1"
|
|
3291
|
+
})(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);
|
|
3292
|
+
var templateObject_1$2, templateObject_2$2;
|
|
3293
|
+
|
|
3294
|
+
React.createElement;
|
|
3295
|
+
var semantic = tokensData.semantic,
|
|
3296
|
+
base = tokensData.base;
|
|
3297
|
+
var StyledFieldContainer = styled.div.withConfig({
|
|
3298
|
+
displayName: "TextField__StyledFieldContainer",
|
|
3299
|
+
componentId: "sc-1ys3b0-0"
|
|
3300
|
+
})(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]);
|
|
3301
|
+
var StyledLabel = styled.label.withConfig({
|
|
3302
|
+
displayName: "TextField__StyledLabel",
|
|
3303
|
+
componentId: "sc-1ys3b0-1"
|
|
3304
|
+
})(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);
|
|
3305
|
+
var StyledRequiredIndicator = styled.span.withConfig({
|
|
3306
|
+
displayName: "TextField__StyledRequiredIndicator",
|
|
3307
|
+
componentId: "sc-1ys3b0-2"
|
|
3308
|
+
})(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]);
|
|
3309
|
+
var StyledHelperText = styled.div.withConfig({
|
|
3310
|
+
displayName: "TextField__StyledHelperText",
|
|
3311
|
+
componentId: "sc-1ys3b0-3"
|
|
3312
|
+
})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
3313
|
+
/**
|
|
3314
|
+
* TextField component for text input with label, helper text, and error states
|
|
3315
|
+
*
|
|
3316
|
+
* @example
|
|
3317
|
+
* ```tsx
|
|
3318
|
+
* <TextField
|
|
3319
|
+
* label="Email"
|
|
3320
|
+
* type="email"
|
|
3321
|
+
* helperText="We'll never share your email"
|
|
3322
|
+
* required
|
|
3323
|
+
* />
|
|
3324
|
+
* ```
|
|
3325
|
+
*/])), semantic.typography.caption, function (_a) {
|
|
3326
|
+
var $hasError = _a.$hasError;
|
|
3327
|
+
return $hasError ? semantic.color.text.error : semantic.color.text.subdued;
|
|
3328
|
+
});
|
|
3329
|
+
/**
|
|
3330
|
+
* TextField component for text input with label, helper text, and error states
|
|
3331
|
+
*
|
|
3332
|
+
* @example
|
|
3333
|
+
* ```tsx
|
|
3334
|
+
* <TextField
|
|
3335
|
+
* label="Email"
|
|
3336
|
+
* type="email"
|
|
3337
|
+
* helperText="We'll never share your email"
|
|
3338
|
+
* required
|
|
3339
|
+
* />
|
|
3340
|
+
* ```
|
|
3341
|
+
*/
|
|
3342
|
+
var TextField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
3343
|
+
var label = _a.label,
|
|
3344
|
+
helperText = _a.helperText,
|
|
3345
|
+
error = _a.error,
|
|
3346
|
+
_b = _a.required,
|
|
3347
|
+
required = _b === void 0 ? false : _b,
|
|
3348
|
+
_c = _a.disabled,
|
|
3349
|
+
disabled = _c === void 0 ? false : _c,
|
|
3350
|
+
_d = _a.type,
|
|
3351
|
+
type = _d === void 0 ? 'text' : _d,
|
|
3352
|
+
providedId = _a.id,
|
|
3353
|
+
dataTestId = _a["data-testid"],
|
|
3354
|
+
inputProps = __rest(_a, ["label", "helperText", "error", "required", "disabled", "type", "id", 'data-testid']);
|
|
3355
|
+
// Generate unique ID if not provided
|
|
3356
|
+
var generatedId = useId();
|
|
3357
|
+
var id = providedId || generatedId;
|
|
3358
|
+
// IDs for ARIA relationships
|
|
3359
|
+
var errorId = error ? "".concat(id, "-error") : undefined;
|
|
3360
|
+
var helperId = helperText && !error ? "".concat(id, "-helper") : undefined;
|
|
3361
|
+
var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
|
|
3362
|
+
var hasError = Boolean(error);
|
|
3363
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer, {
|
|
3364
|
+
"data-testid": dataTestId
|
|
3365
|
+
}, label && /*#__PURE__*/React.createElement(StyledLabel, {
|
|
3366
|
+
htmlFor: id,
|
|
3367
|
+
"data-disabled": disabled
|
|
3368
|
+
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator, {
|
|
3369
|
+
"aria-label": "required"
|
|
3370
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputBase, _extends({
|
|
3371
|
+
ref: ref,
|
|
3372
|
+
id: id,
|
|
3373
|
+
type: type,
|
|
3374
|
+
disabled: disabled,
|
|
3375
|
+
required: required,
|
|
3376
|
+
"aria-required": required,
|
|
3377
|
+
"aria-invalid": hasError,
|
|
3378
|
+
"aria-describedby": describedBy,
|
|
3379
|
+
$hasError: hasError,
|
|
3380
|
+
$disabled: disabled
|
|
3381
|
+
}, inputProps)), error && /*#__PURE__*/React.createElement(StyledHelperText, {
|
|
3382
|
+
id: errorId,
|
|
3383
|
+
role: "alert",
|
|
3384
|
+
"aria-live": "polite",
|
|
3385
|
+
$hasError: true
|
|
3386
|
+
}, error), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText, {
|
|
3387
|
+
id: helperId
|
|
3388
|
+
}, helperText));
|
|
3389
|
+
});
|
|
3390
|
+
TextField.displayName = 'TextField';
|
|
3391
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
|
|
3007
3392
|
|
|
3008
3393
|
React.createElement;
|
|
3009
3394
|
// Breakpoints using base tokens
|
|
@@ -3208,5 +3593,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
3208
3593
|
// Main design system exports
|
|
3209
3594
|
var tokens = tokensData;
|
|
3210
3595
|
|
|
3211
|
-
export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ResponsiveGrid, Stack, Tag, Typography, iconsData, tokens };
|
|
3596
|
+
export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ResponsiveGrid, Stack, StyledInputBase, StyledTextAreaBase, Tag, TextField, Typography, iconsData, tokens };
|
|
3212
3597
|
//# sourceMappingURL=index.esm.js.map
|