@common-origin/design-system 1.11.3 → 1.12.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/NumberInput/NumberInput.d.ts +86 -0
- package/dist/components/molecules/NumberInput/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +1 -0
- package/dist/index.esm.js +418 -161
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +417 -159
- package/dist/index.js.map +1 -1
- package/dist/styles/icons.json +12 -4
- package/dist/styles/tokens.json +3 -3
- package/dist/tokens/index.esm.js +3 -3
- package/dist/tokens/index.js +3 -3
- package/dist/types/icons.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, forwardRef, useId, useRef, useEffect } from 'react';
|
|
1
|
+
import React, { useState, forwardRef, useId, useRef, useEffect, useCallback } 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$3 = {
|
|
104
104
|
border: {
|
|
105
105
|
radius: {
|
|
106
106
|
"1": "0.125rem",
|
|
@@ -444,7 +444,7 @@ var component = {
|
|
|
444
444
|
backgroundColor: "#e9ecef",
|
|
445
445
|
textColor: "#212529",
|
|
446
446
|
borderRadius: "0.25rem",
|
|
447
|
-
padding: "
|
|
447
|
+
padding: "2px 0.5rem",
|
|
448
448
|
font: "500 0.875rem/1.25rem 'Inter', sans-serif"
|
|
449
449
|
},
|
|
450
450
|
variants: {
|
|
@@ -463,11 +463,11 @@ var component = {
|
|
|
463
463
|
},
|
|
464
464
|
sizes: {
|
|
465
465
|
small: {
|
|
466
|
-
padding: "
|
|
466
|
+
padding: "2px 0.5rem",
|
|
467
467
|
font: "400 0.75rem/1rem 'Inter', sans-serif"
|
|
468
468
|
},
|
|
469
469
|
medium: {
|
|
470
|
-
padding: "
|
|
470
|
+
padding: "2px 0.5rem",
|
|
471
471
|
font: "500 0.875rem/1.25rem 'Inter', sans-serif"
|
|
472
472
|
},
|
|
473
473
|
large: {
|
|
@@ -635,7 +635,7 @@ var component = {
|
|
|
635
635
|
},
|
|
636
636
|
$ref: "./component/index.json"
|
|
637
637
|
};
|
|
638
|
-
var semantic$
|
|
638
|
+
var semantic$4 = {
|
|
639
639
|
border: {
|
|
640
640
|
"default": "0.0625rem solid #e9ecef",
|
|
641
641
|
subtle: "0.0625rem solid #dee2e6",
|
|
@@ -772,9 +772,9 @@ var semantic$3 = {
|
|
|
772
772
|
$ref: "./semantic/index.json"
|
|
773
773
|
};
|
|
774
774
|
var tokensData = {
|
|
775
|
-
base: base$
|
|
775
|
+
base: base$3,
|
|
776
776
|
component: component,
|
|
777
|
-
semantic: semantic$
|
|
777
|
+
semantic: semantic$4
|
|
778
778
|
};
|
|
779
779
|
|
|
780
780
|
React.createElement;
|
|
@@ -784,7 +784,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
784
784
|
},
|
|
785
785
|
displayName: "Avatar__AvatarContainer",
|
|
786
786
|
componentId: "sc-ezn4ax-0"
|
|
787
|
-
})(templateObject_1$
|
|
787
|
+
})(templateObject_1$s || (templateObject_1$s = __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) {
|
|
788
788
|
var $size = _a.$size;
|
|
789
789
|
return tokensData.semantic.size.avatar[$size];
|
|
790
790
|
}, function (_a) {
|
|
@@ -797,14 +797,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
797
797
|
},
|
|
798
798
|
displayName: "Avatar__AvatarImage",
|
|
799
799
|
componentId: "sc-ezn4ax-1"
|
|
800
|
-
})(templateObject_2$
|
|
800
|
+
})(templateObject_2$g || (templateObject_2$g = __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);
|
|
801
801
|
var AvatarInitials = styled.span.withConfig({
|
|
802
802
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
803
803
|
return !prop.startsWith('$');
|
|
804
804
|
},
|
|
805
805
|
displayName: "Avatar__AvatarInitials",
|
|
806
806
|
componentId: "sc-ezn4ax-2"
|
|
807
|
-
})(templateObject_3$
|
|
807
|
+
})(templateObject_3$c || (templateObject_3$c = __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"
|
|
808
808
|
// Helper function to get initials from name
|
|
809
809
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
810
810
|
var $size = _a.$size;
|
|
@@ -867,7 +867,7 @@ var Avatar = function Avatar(_a) {
|
|
|
867
867
|
"aria-hidden": "true"
|
|
868
868
|
}, initials));
|
|
869
869
|
};
|
|
870
|
-
var templateObject_1$
|
|
870
|
+
var templateObject_1$s, templateObject_2$g, templateObject_3$c;
|
|
871
871
|
|
|
872
872
|
React.createElement;
|
|
873
873
|
var _a$5 = tokensData.semantic,
|
|
@@ -935,7 +935,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
935
935
|
},
|
|
936
936
|
displayName: "Typography__StyledTypography",
|
|
937
937
|
componentId: "sc-17mqo4k-0"
|
|
938
|
-
})(templateObject_1$
|
|
938
|
+
})(templateObject_1$r || (templateObject_1$r = __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"
|
|
939
939
|
/**
|
|
940
940
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
941
941
|
*
|
|
@@ -1002,23 +1002,23 @@ var Typography = function Typography(_a) {
|
|
|
1002
1002
|
"data-testid": dataTestId
|
|
1003
1003
|
}, children);
|
|
1004
1004
|
};
|
|
1005
|
-
var templateObject_1$
|
|
1005
|
+
var templateObject_1$r;
|
|
1006
1006
|
|
|
1007
1007
|
React.createElement;
|
|
1008
1008
|
var color$3 = tokensData.semantic.color;
|
|
1009
1009
|
tokensData.base.shadow;
|
|
1010
|
-
var scaleIn = keyframes(templateObject_1$
|
|
1010
|
+
var scaleIn = keyframes(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
1011
1011
|
var BadgeWrapper = styled.span.withConfig({
|
|
1012
1012
|
displayName: "Badge__BadgeWrapper",
|
|
1013
1013
|
componentId: "sc-tjz4pp-0"
|
|
1014
|
-
})(templateObject_2$
|
|
1014
|
+
})(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
1015
1015
|
var BadgeIndicator = styled.span.withConfig({
|
|
1016
1016
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1017
1017
|
return !prop.startsWith('$');
|
|
1018
1018
|
},
|
|
1019
1019
|
displayName: "Badge__BadgeIndicator",
|
|
1020
1020
|
componentId: "sc-tjz4pp-1"
|
|
1021
|
-
})(templateObject_3$
|
|
1021
|
+
})(templateObject_3$b || (templateObject_3$b = __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) {
|
|
1022
1022
|
return props.$isVisible ? 'flex' : 'none';
|
|
1023
1023
|
}, function (props) {
|
|
1024
1024
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1043,7 +1043,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1043
1043
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
1044
1044
|
displayName: "Badge__ScreenReaderOnly",
|
|
1045
1045
|
componentId: "sc-tjz4pp-2"
|
|
1046
|
-
})(templateObject_4$
|
|
1046
|
+
})(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
1047
1047
|
var Badge = function Badge(_a) {
|
|
1048
1048
|
var children = _a.children,
|
|
1049
1049
|
_b = _a.count,
|
|
@@ -1074,7 +1074,7 @@ var Badge = function Badge(_a) {
|
|
|
1074
1074
|
color: "inverse"
|
|
1075
1075
|
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
|
|
1076
1076
|
};
|
|
1077
|
-
var templateObject_1$
|
|
1077
|
+
var templateObject_1$q, templateObject_2$f, templateObject_3$b, templateObject_4$9;
|
|
1078
1078
|
|
|
1079
1079
|
React.createElement;
|
|
1080
1080
|
var StyledBox = styled.div.withConfig({
|
|
@@ -1086,19 +1086,19 @@ var StyledBox = styled.div.withConfig({
|
|
|
1086
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"
|
|
1087
1087
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1088
1088
|
])), function (props) {
|
|
1089
|
-
return props.$display && css(templateObject_1$
|
|
1089
|
+
return props.$display && css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1090
1090
|
}, function (props) {
|
|
1091
|
-
return props.$flexDirection && css(templateObject_2$
|
|
1091
|
+
return props.$flexDirection && css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1092
1092
|
}, function (props) {
|
|
1093
|
-
return props.$justifyContent && css(templateObject_3$
|
|
1093
|
+
return props.$justifyContent && css(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1094
1094
|
}, function (props) {
|
|
1095
|
-
return props.$alignItems && css(templateObject_4$
|
|
1095
|
+
return props.$alignItems && css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1096
1096
|
}, function (props) {
|
|
1097
|
-
return props.$flexWrap && css(templateObject_5$
|
|
1097
|
+
return props.$flexWrap && css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1098
1098
|
}, function (props) {
|
|
1099
|
-
return props.$gap && css(templateObject_6$
|
|
1099
|
+
return props.$gap && css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1100
1100
|
}, function (props) {
|
|
1101
|
-
return props.$m && css(templateObject_7$
|
|
1101
|
+
return props.$m && css(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1102
1102
|
}, function (props) {
|
|
1103
1103
|
return props.$mt && css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1104
1104
|
}, function (props) {
|
|
@@ -1276,7 +1276,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1276
1276
|
}, rest), children);
|
|
1277
1277
|
};
|
|
1278
1278
|
var Box = BoxTransform;
|
|
1279
|
-
var templateObject_1$
|
|
1279
|
+
var templateObject_1$p, templateObject_2$e, templateObject_3$a, templateObject_4$8, templateObject_5$5, templateObject_6$3, templateObject_7$3, 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;
|
|
1280
1280
|
|
|
1281
1281
|
var add = {
|
|
1282
1282
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1306,6 +1306,14 @@ var caret = {
|
|
|
1306
1306
|
path: "m14.77 11.808-4.458-3.715A.8.8 0 0 0 9 8.708v6.584a.8.8 0 0 0 1.312.614l4.458-3.714a.25.25 0 0 0 0-.384Z",
|
|
1307
1307
|
name: "caret"
|
|
1308
1308
|
};
|
|
1309
|
+
var caretDown = {
|
|
1310
|
+
path: "M11.8079 14.7695L8.09345 10.3121C7.65923 9.79109 8.02975 9 8.70802 9L15.292 9C15.9702 9 16.3408 9.79109 15.9065 10.3121L12.192 14.7695C12.0921 14.8895 11.9079 14.8895 11.8079 14.7695Z",
|
|
1311
|
+
name: "caretDown"
|
|
1312
|
+
};
|
|
1313
|
+
var caretUp = {
|
|
1314
|
+
path: "M12.192 9.23058L15.9065 13.688C16.3408 14.209 15.9702 15.0001 15.292 15.0001H8.70802C8.02975 15.0001 7.65923 14.209 8.09345 13.688L11.8079 9.23058C11.9079 9.11064 12.0921 9.11064 12.192 9.23058Z",
|
|
1315
|
+
name: "caretUp"
|
|
1316
|
+
};
|
|
1309
1317
|
var check = {
|
|
1310
1318
|
path: "M9.16699 18.375L4.40039 14.7998L5.59961 13.2002L8.83301 15.625L17.2256 5.36719L18.7744 6.63281L9.16699 18.375Z",
|
|
1311
1319
|
name: "check"
|
|
@@ -1378,6 +1386,8 @@ var iconsData = {
|
|
|
1378
1386
|
arrowRight: arrowRight,
|
|
1379
1387
|
back: back,
|
|
1380
1388
|
caret: caret,
|
|
1389
|
+
caretDown: caretDown,
|
|
1390
|
+
caretUp: caretUp,
|
|
1381
1391
|
check: check,
|
|
1382
1392
|
close: close,
|
|
1383
1393
|
directionRight: directionRight,
|
|
@@ -1407,7 +1417,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1407
1417
|
},
|
|
1408
1418
|
displayName: "Icon__IconStyled",
|
|
1409
1419
|
componentId: "sc-1105czq-0"
|
|
1410
|
-
})(templateObject_1$
|
|
1420
|
+
})(templateObject_1$o || (templateObject_1$o = __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) {
|
|
1411
1421
|
var $size = _a.$size;
|
|
1412
1422
|
return tokensData.semantic.size.icon[$size];
|
|
1413
1423
|
}, function (_a) {
|
|
@@ -1471,13 +1481,13 @@ var Icon = function Icon(_a) {
|
|
|
1471
1481
|
d: iconData.path
|
|
1472
1482
|
})));
|
|
1473
1483
|
};
|
|
1474
|
-
var templateObject_1$
|
|
1484
|
+
var templateObject_1$o;
|
|
1475
1485
|
|
|
1476
1486
|
React.createElement;
|
|
1477
1487
|
var button = tokensData.component.button,
|
|
1478
|
-
semantic$
|
|
1488
|
+
semantic$3 = tokensData.semantic;
|
|
1479
1489
|
// Base styles shared between button and link
|
|
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$
|
|
1490
|
+
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$3.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");
|
|
1481
1491
|
// Dynamic variant styles using component tokens
|
|
1482
1492
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1483
1493
|
var $variant = _a.$variant;
|
|
@@ -1503,14 +1513,14 @@ var StyledButton = styled.button.withConfig({
|
|
|
1503
1513
|
},
|
|
1504
1514
|
displayName: "Button__StyledButton",
|
|
1505
1515
|
componentId: "sc-1eiuum9-0"
|
|
1506
|
-
})(templateObject_1$
|
|
1516
|
+
})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1507
1517
|
var StyledLink = styled.a.withConfig({
|
|
1508
1518
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1509
1519
|
return !prop.startsWith('$');
|
|
1510
1520
|
},
|
|
1511
1521
|
displayName: "Button__StyledLink",
|
|
1512
1522
|
componentId: "sc-1eiuum9-1"
|
|
1513
|
-
})(templateObject_2$
|
|
1523
|
+
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1514
1524
|
// Helper function to get icon size based on button size
|
|
1515
1525
|
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1516
1526
|
// Helper function to get icon size based on button size
|
|
@@ -1603,7 +1613,7 @@ var Button = function Button(_a) {
|
|
|
1603
1613
|
"data-testid": dataTestId
|
|
1604
1614
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1605
1615
|
};
|
|
1606
|
-
var templateObject_1$
|
|
1616
|
+
var templateObject_1$n, templateObject_2$d;
|
|
1607
1617
|
|
|
1608
1618
|
var chip = tokensData.component.chip;
|
|
1609
1619
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1664,14 +1674,14 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1664
1674
|
},
|
|
1665
1675
|
displayName: "ChipBase__BaseChipStyled",
|
|
1666
1676
|
componentId: "sc-moa6zc-0"
|
|
1667
|
-
})(templateObject_1$
|
|
1677
|
+
})(templateObject_1$m || (templateObject_1$m = __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"
|
|
1668
1678
|
// Icon container for selected indicator or leading icons
|
|
1669
1679
|
])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1670
1680
|
// Icon container for selected indicator or leading icons
|
|
1671
1681
|
var IconContainer = styled.span.withConfig({
|
|
1672
1682
|
displayName: "ChipBase__IconContainer",
|
|
1673
1683
|
componentId: "sc-moa6zc-1"
|
|
1674
|
-
})(templateObject_2$
|
|
1684
|
+
})(templateObject_2$c || (templateObject_2$c = __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"
|
|
1675
1685
|
// Close button for dismissible chips
|
|
1676
1686
|
])), tokensData.semantic.spacing.layout.sm);
|
|
1677
1687
|
// Close button for dismissible chips
|
|
@@ -1681,7 +1691,7 @@ var CloseButton = styled.button.withConfig({
|
|
|
1681
1691
|
},
|
|
1682
1692
|
displayName: "ChipBase__CloseButton",
|
|
1683
1693
|
componentId: "sc-moa6zc-2"
|
|
1684
|
-
})(templateObject_3$
|
|
1694
|
+
})(templateObject_3$9 || (templateObject_3$9 = __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"
|
|
1685
1695
|
// Wrapper component that applies styles via CSS custom properties
|
|
1686
1696
|
])), tokensData.semantic.spacing.layout.sm, function (props) {
|
|
1687
1697
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
@@ -1716,7 +1726,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1716
1726
|
style: __assign(__assign({}, cssProps), style)
|
|
1717
1727
|
}, htmlProps), children);
|
|
1718
1728
|
};
|
|
1719
|
-
var templateObject_1$
|
|
1729
|
+
var templateObject_1$m, templateObject_2$c, templateObject_3$9;
|
|
1720
1730
|
|
|
1721
1731
|
React.createElement;
|
|
1722
1732
|
/**
|
|
@@ -1960,32 +1970,32 @@ var spacing$3 = tokensData.semantic.spacing;
|
|
|
1960
1970
|
var StyledContainer = styled.div.withConfig({
|
|
1961
1971
|
displayName: "Container__StyledContainer",
|
|
1962
1972
|
componentId: "sc-17dbj6n-0"
|
|
1963
|
-
})(templateObject_1$
|
|
1973
|
+
})(templateObject_1$l || (templateObject_1$l = __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']);
|
|
1964
1974
|
var Container = function Container(_a) {
|
|
1965
1975
|
var children = _a.children,
|
|
1966
1976
|
props = __rest(_a, ["children"]);
|
|
1967
1977
|
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
1968
1978
|
};
|
|
1969
|
-
var templateObject_1$
|
|
1979
|
+
var templateObject_1$l;
|
|
1970
1980
|
|
|
1971
1981
|
React.createElement;
|
|
1972
|
-
var base$
|
|
1982
|
+
var base$2 = tokensData.base;
|
|
1973
1983
|
var PictureWrapper = styled.div.withConfig({
|
|
1974
1984
|
displayName: "Picture__PictureWrapper",
|
|
1975
1985
|
componentId: "sc-11d9tei-0"
|
|
1976
|
-
})(templateObject_1$
|
|
1986
|
+
})(templateObject_1$k || (templateObject_1$k = __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);
|
|
1977
1987
|
var ImageLink = styled.a.withConfig({
|
|
1978
1988
|
displayName: "Picture__ImageLink",
|
|
1979
1989
|
componentId: "sc-11d9tei-1"
|
|
1980
|
-
})(templateObject_2$
|
|
1990
|
+
})(templateObject_2$b || (templateObject_2$b = __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$2.duration.normal, base$2.easing.easeInOut);
|
|
1981
1991
|
var ImageButton = styled.button.withConfig({
|
|
1982
1992
|
displayName: "Picture__ImageButton",
|
|
1983
1993
|
componentId: "sc-11d9tei-2"
|
|
1984
|
-
})(templateObject_3$
|
|
1994
|
+
})(templateObject_3$8 || (templateObject_3$8 = __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$2.duration.normal, base$2.easing.easeInOut);
|
|
1985
1995
|
var StyledImage = styled.img.withConfig({
|
|
1986
1996
|
displayName: "Picture__StyledImage",
|
|
1987
1997
|
componentId: "sc-11d9tei-3"
|
|
1988
|
-
})(templateObject_4$
|
|
1998
|
+
})(templateObject_4$7 || (templateObject_4$7 = __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$2.border.radius[2]);
|
|
1989
1999
|
var Picture = function Picture(_a) {
|
|
1990
2000
|
var title = _a.title,
|
|
1991
2001
|
src = _a.src,
|
|
@@ -2012,7 +2022,7 @@ var Picture = function Picture(_a) {
|
|
|
2012
2022
|
"aria-label": "Read more about ".concat(title)
|
|
2013
2023
|
}, image) : image);
|
|
2014
2024
|
};
|
|
2015
|
-
var templateObject_1$
|
|
2025
|
+
var templateObject_1$k, templateObject_2$b, templateObject_3$8, templateObject_4$7;
|
|
2016
2026
|
|
|
2017
2027
|
React.createElement;
|
|
2018
2028
|
var _a$4 = tokensData.semantic,
|
|
@@ -2021,7 +2031,7 @@ var _a$4 = tokensData.semantic,
|
|
|
2021
2031
|
var TimeStyled = styled.time.withConfig({
|
|
2022
2032
|
displayName: "DateFormatter__TimeStyled",
|
|
2023
2033
|
componentId: "sc-5464cc-0"
|
|
2024
|
-
})(templateObject_1$
|
|
2034
|
+
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography$1.label, color$2.text.subdued);
|
|
2025
2035
|
var DateFormatter = function DateFormatter(_a) {
|
|
2026
2036
|
var dateString = _a.dateString,
|
|
2027
2037
|
_b = _a.formatString,
|
|
@@ -2033,7 +2043,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
2033
2043
|
"data-testid": dataTestId
|
|
2034
2044
|
}, format(date, formatString));
|
|
2035
2045
|
};
|
|
2036
|
-
var templateObject_1$
|
|
2046
|
+
var templateObject_1$j;
|
|
2037
2047
|
|
|
2038
2048
|
React.createElement;
|
|
2039
2049
|
var motion = tokensData.semantic.motion,
|
|
@@ -2044,7 +2054,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2044
2054
|
},
|
|
2045
2055
|
displayName: "IconButton__IconButtonStyled",
|
|
2046
2056
|
componentId: "sc-k8b14t-0"
|
|
2047
|
-
})(templateObject_1$
|
|
2057
|
+
})(templateObject_1$i || (templateObject_1$i = __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) {
|
|
2048
2058
|
var $variant = _a.$variant;
|
|
2049
2059
|
switch ($variant) {
|
|
2050
2060
|
case 'primary':
|
|
@@ -2155,7 +2165,7 @@ var IconButton = function IconButton(_a) {
|
|
|
2155
2165
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2156
2166
|
}));
|
|
2157
2167
|
};
|
|
2158
|
-
var templateObject_1$
|
|
2168
|
+
var templateObject_1$i;
|
|
2159
2169
|
|
|
2160
2170
|
React.createElement;
|
|
2161
2171
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -2164,10 +2174,10 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
2164
2174
|
},
|
|
2165
2175
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2166
2176
|
componentId: "sc-1nco33q-0"
|
|
2167
|
-
})(templateObject_3$
|
|
2168
|
-
return props.$variant === 'horizontal' && css(templateObject_1$
|
|
2177
|
+
})(templateObject_3$7 || (templateObject_3$7 = __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) {
|
|
2178
|
+
return props.$variant === 'horizontal' && css(templateObject_1$h || (templateObject_1$h = __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);
|
|
2169
2179
|
}, function (props) {
|
|
2170
|
-
return props.$variant === 'vertical' && css(templateObject_2$
|
|
2180
|
+
return props.$variant === 'vertical' && css(templateObject_2$a || (templateObject_2$a = __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);
|
|
2171
2181
|
});
|
|
2172
2182
|
var ProgressBarFill = styled.div.withConfig({
|
|
2173
2183
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2175,7 +2185,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2175
2185
|
},
|
|
2176
2186
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2177
2187
|
componentId: "sc-1nco33q-1"
|
|
2178
|
-
})(templateObject_7$
|
|
2188
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), tokensData.semantic.motion.transition.normal, function (props) {
|
|
2179
2189
|
var backgroundColor;
|
|
2180
2190
|
switch (props.$color) {
|
|
2181
2191
|
case 'success':
|
|
@@ -2189,11 +2199,11 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2189
2199
|
backgroundColor = tokensData.semantic.color.background.interactive;
|
|
2190
2200
|
break;
|
|
2191
2201
|
}
|
|
2192
|
-
return css(templateObject_4$
|
|
2202
|
+
return css(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2193
2203
|
}, function (props) {
|
|
2194
|
-
return props.$variant === 'horizontal' && css(templateObject_5$
|
|
2204
|
+
return props.$variant === 'horizontal' && css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2195
2205
|
}, function (props) {
|
|
2196
|
-
return props.$variant === 'vertical' && css(templateObject_6$
|
|
2206
|
+
return props.$variant === 'vertical' && css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2197
2207
|
});
|
|
2198
2208
|
var ProgressBar = function ProgressBar(_a) {
|
|
2199
2209
|
var value = _a.value,
|
|
@@ -2219,7 +2229,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2219
2229
|
$color: color
|
|
2220
2230
|
}));
|
|
2221
2231
|
};
|
|
2222
|
-
var templateObject_1$
|
|
2232
|
+
var templateObject_1$h, templateObject_2$a, templateObject_3$7, templateObject_4$6, templateObject_5$4, templateObject_6$2, templateObject_7$2;
|
|
2223
2233
|
|
|
2224
2234
|
React.createElement;
|
|
2225
2235
|
var StyledDivider = styled.div.withConfig({
|
|
@@ -2228,7 +2238,7 @@ var StyledDivider = styled.div.withConfig({
|
|
|
2228
2238
|
},
|
|
2229
2239
|
displayName: "Divider__StyledDivider",
|
|
2230
2240
|
componentId: "sc-1l0c8ja-0"
|
|
2231
|
-
})(templateObject_1$
|
|
2241
|
+
})(templateObject_1$g || (templateObject_1$g = __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"
|
|
2232
2242
|
/**
|
|
2233
2243
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2234
2244
|
*
|
|
@@ -2341,7 +2351,7 @@ var Divider = function Divider(_a) {
|
|
|
2341
2351
|
"aria-orientation": orientation
|
|
2342
2352
|
});
|
|
2343
2353
|
};
|
|
2344
|
-
var templateObject_1$
|
|
2354
|
+
var templateObject_1$g;
|
|
2345
2355
|
|
|
2346
2356
|
React.createElement;
|
|
2347
2357
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2350,7 +2360,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2350
2360
|
},
|
|
2351
2361
|
displayName: "Stack__StyledStack",
|
|
2352
2362
|
componentId: "sc-1ehkxgy-0"
|
|
2353
|
-
})(templateObject_1$
|
|
2363
|
+
})(templateObject_1$f || (templateObject_1$f = __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"
|
|
2354
2364
|
// Helper function to convert gap prop to CSS value
|
|
2355
2365
|
])));
|
|
2356
2366
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2388,17 +2398,17 @@ var Stack = function Stack(_a) {
|
|
|
2388
2398
|
"data-testid": dataTestId
|
|
2389
2399
|
}, children);
|
|
2390
2400
|
};
|
|
2391
|
-
var templateObject_1$
|
|
2401
|
+
var templateObject_1$f;
|
|
2392
2402
|
|
|
2393
2403
|
React.createElement;
|
|
2394
|
-
var semantic$
|
|
2404
|
+
var semantic$2 = tokensData.semantic;
|
|
2395
2405
|
var StyledTag = styled.span.withConfig({
|
|
2396
2406
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2397
2407
|
return !prop.startsWith('$');
|
|
2398
2408
|
},
|
|
2399
2409
|
displayName: "Tag__StyledTag",
|
|
2400
2410
|
componentId: "sc-lzfmti-0"
|
|
2401
|
-
})(templateObject_1$
|
|
2411
|
+
})(templateObject_1$e || (templateObject_1$e = __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"
|
|
2402
2412
|
/**
|
|
2403
2413
|
* Tag component for categorizing and labeling content
|
|
2404
2414
|
*
|
|
@@ -2408,33 +2418,33 @@ var StyledTag = styled.span.withConfig({
|
|
|
2408
2418
|
var $variant = _a.$variant;
|
|
2409
2419
|
switch ($variant) {
|
|
2410
2420
|
case 'interactive':
|
|
2411
|
-
return semantic$
|
|
2421
|
+
return semantic$2.color.background['interactive-subtle'];
|
|
2412
2422
|
case 'success':
|
|
2413
|
-
return semantic$
|
|
2423
|
+
return semantic$2.color.background['success-subtle'];
|
|
2414
2424
|
case 'warning':
|
|
2415
|
-
return semantic$
|
|
2425
|
+
return semantic$2.color.background['warning-subtle'];
|
|
2416
2426
|
case 'error':
|
|
2417
|
-
return semantic$
|
|
2427
|
+
return semantic$2.color.background['error-subtle'];
|
|
2418
2428
|
case 'emphasis':
|
|
2419
|
-
return semantic$
|
|
2429
|
+
return semantic$2.color.background.emphasis;
|
|
2420
2430
|
default:
|
|
2421
|
-
return semantic$
|
|
2431
|
+
return semantic$2.color.background.surface;
|
|
2422
2432
|
}
|
|
2423
2433
|
}, function (_a) {
|
|
2424
2434
|
var $variant = _a.$variant;
|
|
2425
2435
|
switch ($variant) {
|
|
2426
2436
|
case 'interactive':
|
|
2427
|
-
return semantic$
|
|
2437
|
+
return semantic$2.color.text.interactive;
|
|
2428
2438
|
case 'success':
|
|
2429
|
-
return semantic$
|
|
2439
|
+
return semantic$2.color.text.success;
|
|
2430
2440
|
case 'warning':
|
|
2431
|
-
return semantic$
|
|
2441
|
+
return semantic$2.color.text.warning;
|
|
2432
2442
|
case 'error':
|
|
2433
|
-
return semantic$
|
|
2443
|
+
return semantic$2.color.text.error;
|
|
2434
2444
|
case 'emphasis':
|
|
2435
|
-
return semantic$
|
|
2445
|
+
return semantic$2.color.text.inverse;
|
|
2436
2446
|
default:
|
|
2437
|
-
return semantic$
|
|
2447
|
+
return semantic$2.color.text["default"];
|
|
2438
2448
|
}
|
|
2439
2449
|
}, function (_a) {
|
|
2440
2450
|
var $variant = _a.$variant,
|
|
@@ -2442,17 +2452,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2442
2452
|
if (!$border) return 'none';
|
|
2443
2453
|
switch ($variant) {
|
|
2444
2454
|
case 'interactive':
|
|
2445
|
-
return "1px solid ".concat(semantic$
|
|
2455
|
+
return "1px solid ".concat(semantic$2.color.border.interactive);
|
|
2446
2456
|
case 'success':
|
|
2447
|
-
return "1px solid ".concat(semantic$
|
|
2457
|
+
return "1px solid ".concat(semantic$2.color.border.success);
|
|
2448
2458
|
case 'warning':
|
|
2449
|
-
return "1px solid ".concat(semantic$
|
|
2459
|
+
return "1px solid ".concat(semantic$2.color.border.warning);
|
|
2450
2460
|
case 'error':
|
|
2451
|
-
return "1px solid ".concat(semantic$
|
|
2461
|
+
return "1px solid ".concat(semantic$2.color.border.error);
|
|
2452
2462
|
case 'emphasis':
|
|
2453
|
-
return "1px solid ".concat(semantic$
|
|
2463
|
+
return "1px solid ".concat(semantic$2.color.background.emphasis);
|
|
2454
2464
|
default:
|
|
2455
|
-
return "1px solid ".concat(semantic$
|
|
2465
|
+
return "1px solid ".concat(semantic$2.color.border["default"]);
|
|
2456
2466
|
}
|
|
2457
2467
|
});
|
|
2458
2468
|
/**
|
|
@@ -2479,18 +2489,18 @@ var Tag = function Tag(_a) {
|
|
|
2479
2489
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
2480
2490
|
}, props), children);
|
|
2481
2491
|
};
|
|
2482
|
-
var templateObject_1$
|
|
2492
|
+
var templateObject_1$e;
|
|
2483
2493
|
|
|
2484
2494
|
React.createElement;
|
|
2485
2495
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
2486
2496
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
2487
2497
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
2488
2498
|
componentId: "sc-7ouzg5-0"
|
|
2489
|
-
})(templateObject_1$
|
|
2499
|
+
})(templateObject_1$d || (templateObject_1$d = __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');
|
|
2490
2500
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
2491
2501
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
2492
2502
|
componentId: "sc-7ouzg5-1"
|
|
2493
|
-
})(templateObject_2$
|
|
2503
|
+
})(templateObject_2$9 || (templateObject_2$9 = __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"]);
|
|
2494
2504
|
var isInternalUrl = function isInternalUrl(url) {
|
|
2495
2505
|
return url.startsWith('/') && !url.startsWith('http');
|
|
2496
2506
|
};
|
|
@@ -2516,13 +2526,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
2516
2526
|
}, breadcrumb.label)));
|
|
2517
2527
|
}))));
|
|
2518
2528
|
};
|
|
2519
|
-
var templateObject_1$
|
|
2529
|
+
var templateObject_1$d, templateObject_2$9;
|
|
2520
2530
|
|
|
2521
2531
|
React.createElement;
|
|
2522
2532
|
var CardSmallStyled = styled.div.withConfig({
|
|
2523
2533
|
displayName: "CardSmall__CardSmallStyled",
|
|
2524
2534
|
componentId: "sc-jpcqvd-0"
|
|
2525
|
-
})(templateObject_1$
|
|
2535
|
+
})(templateObject_1$c || (templateObject_1$c = __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);
|
|
2526
2536
|
var CardSmall = function CardSmall(_a) {
|
|
2527
2537
|
var title = _a.title,
|
|
2528
2538
|
picture = _a.picture,
|
|
@@ -2559,14 +2569,14 @@ var CardSmall = function CardSmall(_a) {
|
|
|
2559
2569
|
color: "subdued"
|
|
2560
2570
|
}, meta))))));
|
|
2561
2571
|
};
|
|
2562
|
-
var templateObject_1$
|
|
2572
|
+
var templateObject_1$c;
|
|
2563
2573
|
|
|
2564
2574
|
React.createElement;
|
|
2565
2575
|
var border$3 = tokensData.base.border;
|
|
2566
2576
|
var CardLargeStyled = styled.div.withConfig({
|
|
2567
2577
|
displayName: "CardLarge__CardLargeStyled",
|
|
2568
2578
|
componentId: "sc-1rfgdzl-0"
|
|
2569
|
-
})(templateObject_1$
|
|
2579
|
+
})(templateObject_1$b || (templateObject_1$b = __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]);
|
|
2570
2580
|
var CardLarge = function CardLarge(_a) {
|
|
2571
2581
|
var title = _a.title,
|
|
2572
2582
|
excerpt = _a.excerpt,
|
|
@@ -2611,7 +2621,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
2611
2621
|
});
|
|
2612
2622
|
})))));
|
|
2613
2623
|
};
|
|
2614
|
-
var templateObject_1$
|
|
2624
|
+
var templateObject_1$b;
|
|
2615
2625
|
|
|
2616
2626
|
/**
|
|
2617
2627
|
* Hidden native checkbox input for accessibility
|
|
@@ -2623,7 +2633,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
2623
2633
|
},
|
|
2624
2634
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
2625
2635
|
componentId: "sc-1ddpctx-0"
|
|
2626
|
-
})(templateObject_1$
|
|
2636
|
+
})(templateObject_1$a || (templateObject_1$a = __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
2637
|
/**
|
|
2628
2638
|
* Custom checkbox visual component
|
|
2629
2639
|
* 24px × 24px for 8px grid alignment
|
|
@@ -2640,7 +2650,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2640
2650
|
},
|
|
2641
2651
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2642
2652
|
componentId: "sc-1ddpctx-1"
|
|
2643
|
-
})(templateObject_2$
|
|
2653
|
+
})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n min-width: 20px;\n min-height: 20px;\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all 150ms ease-out;\n flex-shrink: 0;\n\n /* Hover state */\n ", ":not(:disabled):hover + & {\n border-color: ", ";\n }\n\n /* Focus state */\n ", ":focus-visible + & {\n outline: ", ";\n outline-offset: ", ";\n border-color: ", ";\n }\n\n /* Disabled state */\n ", "\n\n /* Checkmark icon */\n &::after {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 2px;\n width: 4px;\n height: 8px;\n border: solid ", ";\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n\n /* Indeterminate icon (horizontal line) */\n &::before {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 8px;\n width: 10px;\n height: 2px;\n background-color: ", ";\n }\n"], ["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n min-width: 20px;\n min-height: 20px;\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all 150ms ease-out;\n flex-shrink: 0;\n\n /* Hover state */\n ", ":not(:disabled):hover + & {\n border-color: ", ";\n }\n\n /* Focus state */\n ", ":focus-visible + & {\n outline: ", ";\n outline-offset: ", ";\n border-color: ", ";\n }\n\n /* Disabled state */\n ", "\n\n /* Checkmark icon */\n &::after {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 2px;\n width: 4px;\n height: 8px;\n border: solid ", ";\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n\n /* Indeterminate icon (horizontal line) */\n &::before {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 8px;\n width: 10px;\n height: 2px;\n background-color: ", ";\n }\n"
|
|
2644
2654
|
/**
|
|
2645
2655
|
* Container for checkbox with proper spacing and alignment
|
|
2646
2656
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -2673,7 +2683,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
2673
2683
|
},
|
|
2674
2684
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
2675
2685
|
componentId: "sc-1ddpctx-2"
|
|
2676
|
-
})(templateObject_3$
|
|
2686
|
+
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 32px;\n flex-direction: ", ";\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 32px;\n flex-direction: ", ";\n user-select: none;\n"
|
|
2677
2687
|
/**
|
|
2678
2688
|
* Label text with proper typography
|
|
2679
2689
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -2690,20 +2700,20 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
2690
2700
|
},
|
|
2691
2701
|
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
2692
2702
|
componentId: "sc-1ddpctx-3"
|
|
2693
|
-
})(templateObject_4$
|
|
2703
|
+
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
2694
2704
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
2695
2705
|
});
|
|
2696
|
-
var templateObject_1$
|
|
2706
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$6, templateObject_4$5;
|
|
2697
2707
|
|
|
2698
2708
|
React.createElement;
|
|
2699
|
-
var StyledFieldContainer$
|
|
2709
|
+
var StyledFieldContainer$2 = styled.div.withConfig({
|
|
2700
2710
|
displayName: "Checkbox__StyledFieldContainer",
|
|
2701
2711
|
componentId: "sc-vquz3v-0"
|
|
2702
|
-
})(templateObject_1$
|
|
2703
|
-
var StyledHelperText$
|
|
2712
|
+
})(templateObject_1$9 || (templateObject_1$9 = __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]);
|
|
2713
|
+
var StyledHelperText$2 = styled.span.withConfig({
|
|
2704
2714
|
displayName: "Checkbox__StyledHelperText",
|
|
2705
2715
|
componentId: "sc-vquz3v-1"
|
|
2706
|
-
})(templateObject_2$
|
|
2716
|
+
})(templateObject_2$7 || (templateObject_2$7 = __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
2717
|
/**
|
|
2708
2718
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2709
2719
|
*
|
|
@@ -2784,7 +2794,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
2784
2794
|
inputRef.current.indeterminate = indeterminate;
|
|
2785
2795
|
}
|
|
2786
2796
|
}, [indeterminate]);
|
|
2787
|
-
return /*#__PURE__*/React.createElement(StyledFieldContainer$
|
|
2797
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer$2, null, /*#__PURE__*/React.createElement(StyledCheckboxContainer, {
|
|
2788
2798
|
$disabled: disabled,
|
|
2789
2799
|
$labelPosition: labelPosition
|
|
2790
2800
|
}, /*#__PURE__*/React.createElement(HiddenCheckboxInput, _extends({
|
|
@@ -2806,9 +2816,9 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
2806
2816
|
"aria-hidden": "true"
|
|
2807
2817
|
}), /*#__PURE__*/React.createElement(StyledCheckboxLabel, {
|
|
2808
2818
|
$disabled: disabled
|
|
2809
|
-
}, label)), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$
|
|
2819
|
+
}, label)), helperText && !error && /*#__PURE__*/React.createElement(StyledHelperText$2, {
|
|
2810
2820
|
id: helperTextId
|
|
2811
|
-
}, helperText), error && /*#__PURE__*/React.createElement(StyledHelperText$
|
|
2821
|
+
}, helperText), error && /*#__PURE__*/React.createElement(StyledHelperText$2, {
|
|
2812
2822
|
id: errorId,
|
|
2813
2823
|
$error: true,
|
|
2814
2824
|
role: "alert",
|
|
@@ -2816,13 +2826,13 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
2816
2826
|
}, error));
|
|
2817
2827
|
});
|
|
2818
2828
|
Checkbox.displayName = 'Checkbox';
|
|
2819
|
-
var templateObject_1$
|
|
2829
|
+
var templateObject_1$9, templateObject_2$7;
|
|
2820
2830
|
|
|
2821
2831
|
React.createElement;
|
|
2822
2832
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
2823
2833
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
2824
2834
|
componentId: "sc-ae049w-0"
|
|
2825
|
-
})(templateObject_1$
|
|
2835
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"], ["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"])));
|
|
2826
2836
|
var ChipGroup = function ChipGroup(_a) {
|
|
2827
2837
|
var labels = _a.labels,
|
|
2828
2838
|
_b = _a.variant,
|
|
@@ -2841,7 +2851,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
2841
2851
|
});
|
|
2842
2852
|
})));
|
|
2843
2853
|
};
|
|
2844
|
-
var templateObject_1$
|
|
2854
|
+
var templateObject_1$8;
|
|
2845
2855
|
|
|
2846
2856
|
React.createElement;
|
|
2847
2857
|
var _a$2 = tokensData.semantic,
|
|
@@ -2851,15 +2861,15 @@ var _a$2 = tokensData.semantic,
|
|
|
2851
2861
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
2852
2862
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
2853
2863
|
componentId: "sc-1p1t0kp-0"
|
|
2854
|
-
})(templateObject_1$
|
|
2864
|
+
})(templateObject_1$7 || (templateObject_1$7 = __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);
|
|
2855
2865
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
2856
2866
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
2857
2867
|
componentId: "sc-1p1t0kp-1"
|
|
2858
|
-
})(templateObject_2$
|
|
2868
|
+
})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n width: 100%;\n"], ["\n position: relative;\n display: inline-block;\n width: 100%;\n"])));
|
|
2859
2869
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
2860
2870
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
2861
2871
|
componentId: "sc-1p1t0kp-2"
|
|
2862
|
-
})(templateObject_3$
|
|
2872
|
+
})(templateObject_3$5 || (templateObject_3$5 = __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);
|
|
2863
2873
|
var CopyButton = function CopyButton(_a) {
|
|
2864
2874
|
var text = _a.text,
|
|
2865
2875
|
onCopy = _a.onCopy;
|
|
@@ -2936,7 +2946,7 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
2936
2946
|
onCopy: onCopy
|
|
2937
2947
|
}));
|
|
2938
2948
|
};
|
|
2939
|
-
var templateObject_1$
|
|
2949
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$5;
|
|
2940
2950
|
|
|
2941
2951
|
React.createElement;
|
|
2942
2952
|
var _a$1 = tokensData.base,
|
|
@@ -2945,23 +2955,23 @@ var _a$1 = tokensData.base,
|
|
|
2945
2955
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
2946
2956
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
2947
2957
|
componentId: "sc-1mi4lso-0"
|
|
2948
|
-
})(templateObject_1$
|
|
2958
|
+
})(templateObject_1$6 || (templateObject_1$6 = __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]);
|
|
2949
2959
|
var ImageWrapper = styled.div.withConfig({
|
|
2950
2960
|
displayName: "FeatureBlock__ImageWrapper",
|
|
2951
2961
|
componentId: "sc-1mi4lso-1"
|
|
2952
|
-
})(templateObject_2$
|
|
2962
|
+
})(templateObject_2$5 || (templateObject_2$5 = __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);
|
|
2953
2963
|
var ContentSection = styled.div.withConfig({
|
|
2954
2964
|
displayName: "FeatureBlock__ContentSection",
|
|
2955
2965
|
componentId: "sc-1mi4lso-2"
|
|
2956
|
-
})(templateObject_3$
|
|
2966
|
+
})(templateObject_3$4 || (templateObject_3$4 = __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]);
|
|
2957
2967
|
var ButtonWrapper = styled.div.withConfig({
|
|
2958
2968
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
2959
2969
|
componentId: "sc-1mi4lso-3"
|
|
2960
|
-
})(templateObject_4$
|
|
2970
|
+
})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
2961
2971
|
var ContentWrapper = styled.div.withConfig({
|
|
2962
2972
|
displayName: "FeatureBlock__ContentWrapper",
|
|
2963
2973
|
componentId: "sc-1mi4lso-4"
|
|
2964
|
-
})(templateObject_5$
|
|
2974
|
+
})(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n"])));
|
|
2965
2975
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
2966
2976
|
var title = _a.title,
|
|
2967
2977
|
excerpt = _a.excerpt,
|
|
@@ -3001,7 +3011,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
3001
3011
|
onClick: onReadMore
|
|
3002
3012
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
3003
3013
|
};
|
|
3004
|
-
var templateObject_1$
|
|
3014
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$4, templateObject_5$3;
|
|
3005
3015
|
|
|
3006
3016
|
React.createElement;
|
|
3007
3017
|
var _a = tokensData.base,
|
|
@@ -3015,14 +3025,14 @@ var _a = tokensData.base,
|
|
|
3015
3025
|
var DropdownContainer = styled.div.withConfig({
|
|
3016
3026
|
displayName: "Dropdown__DropdownContainer",
|
|
3017
3027
|
componentId: "sc-kz07c4-0"
|
|
3018
|
-
})(templateObject_1$
|
|
3028
|
+
})(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
3019
3029
|
var DropdownTrigger = styled.button.withConfig({
|
|
3020
3030
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3021
3031
|
return !prop.startsWith('$');
|
|
3022
3032
|
},
|
|
3023
3033
|
displayName: "Dropdown__DropdownTrigger",
|
|
3024
3034
|
componentId: "sc-kz07c4-1"
|
|
3025
|
-
})(templateObject_2$
|
|
3035
|
+
})(templateObject_2$4 || (templateObject_2$4 = __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) {
|
|
3026
3036
|
var $isOpen = _a.$isOpen;
|
|
3027
3037
|
return $isOpen && "\n background-color: ".concat(color.background.surface, ";\n border-color: ").concat(color.border.strong, ";\n ");
|
|
3028
3038
|
});
|
|
@@ -3032,7 +3042,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
3032
3042
|
},
|
|
3033
3043
|
displayName: "Dropdown__DropdownIcon",
|
|
3034
3044
|
componentId: "sc-kz07c4-2"
|
|
3035
|
-
})(templateObject_3$
|
|
3045
|
+
})(templateObject_3$3 || (templateObject_3$3 = __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) {
|
|
3036
3046
|
var $isOpen = _a.$isOpen;
|
|
3037
3047
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
3038
3048
|
});
|
|
@@ -3042,7 +3052,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
3042
3052
|
},
|
|
3043
3053
|
displayName: "Dropdown__DropdownMenu",
|
|
3044
3054
|
componentId: "sc-kz07c4-3"
|
|
3045
|
-
})(templateObject_4$
|
|
3055
|
+
})(templateObject_4$3 || (templateObject_4$3 = __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) {
|
|
3046
3056
|
var $isOpen = _a.$isOpen;
|
|
3047
3057
|
return $isOpen ? 1 : 0;
|
|
3048
3058
|
}, function (_a) {
|
|
@@ -3058,7 +3068,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3058
3068
|
},
|
|
3059
3069
|
displayName: "Dropdown__DropdownOption",
|
|
3060
3070
|
componentId: "sc-kz07c4-4"
|
|
3061
|
-
})(templateObject_5$
|
|
3071
|
+
})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color 0.15s ease;\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"], ["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color 0.15s ease;\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"])), spacing[3], spacing[4], function (_a) {
|
|
3062
3072
|
var $isSelected = _a.$isSelected,
|
|
3063
3073
|
$isFocused = _a.$isFocused;
|
|
3064
3074
|
if ($isFocused) return color.background.surface;
|
|
@@ -3212,43 +3222,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3212
3222
|
}, option.label);
|
|
3213
3223
|
})));
|
|
3214
3224
|
};
|
|
3215
|
-
var templateObject_1$
|
|
3216
|
-
|
|
3217
|
-
React.createElement;
|
|
3218
|
-
var PageTitleStyled = styled.div.withConfig({
|
|
3219
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3220
|
-
return !prop.startsWith('$');
|
|
3221
|
-
},
|
|
3222
|
-
displayName: "PageTitle__PageTitleStyled",
|
|
3223
|
-
componentId: "sc-16h256f-0"
|
|
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) {
|
|
3225
|
-
var $hasBackButton = _a.$hasBackButton;
|
|
3226
|
-
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
3227
|
-
});
|
|
3228
|
-
var PageTitle = function PageTitle(_a) {
|
|
3229
|
-
var title = _a.title,
|
|
3230
|
-
_b = _a.hasBackButton,
|
|
3231
|
-
hasBackButton = _b === void 0 ? false : _b,
|
|
3232
|
-
subtitle = _a.subtitle;
|
|
3233
|
-
return /*#__PURE__*/React.createElement(PageTitleStyled, {
|
|
3234
|
-
$hasBackButton: hasBackButton
|
|
3235
|
-
}, hasBackButton && /*#__PURE__*/React.createElement(IconButton, {
|
|
3236
|
-
iconName: "back",
|
|
3237
|
-
size: "large",
|
|
3238
|
-
variant: "naked",
|
|
3239
|
-
url: "/music",
|
|
3240
|
-
"aria-label": "Go back to music page"
|
|
3241
|
-
}), /*#__PURE__*/React.createElement(Stack, {
|
|
3242
|
-
direction: "column",
|
|
3243
|
-
gap: "md"
|
|
3244
|
-
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3245
|
-
variant: "h1"
|
|
3246
|
-
}, title), subtitle && /*#__PURE__*/React.createElement(Typography, {
|
|
3247
|
-
variant: "caption",
|
|
3248
|
-
color: "subdued"
|
|
3249
|
-
}, subtitle)));
|
|
3250
|
-
};
|
|
3251
|
-
var templateObject_1$3;
|
|
3225
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2;
|
|
3252
3226
|
|
|
3253
3227
|
var input = tokensData.component.input;
|
|
3254
3228
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -3257,7 +3231,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
3257
3231
|
},
|
|
3258
3232
|
displayName: "InputBase__StyledInputBase",
|
|
3259
3233
|
componentId: "sc-1bpf4e8-0"
|
|
3260
|
-
})(templateObject_1$
|
|
3234
|
+
})(templateObject_1$4 || (templateObject_1$4 = __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
3235
|
/**
|
|
3262
3236
|
* Base styled textarea with shared styling
|
|
3263
3237
|
*/])), input["default"].font, function (_a) {
|
|
@@ -3288,8 +3262,291 @@ var StyledTextAreaBase = styled.textarea.withConfig({
|
|
|
3288
3262
|
},
|
|
3289
3263
|
displayName: "InputBase__StyledTextAreaBase",
|
|
3290
3264
|
componentId: "sc-1bpf4e8-1"
|
|
3291
|
-
})(templateObject_2$
|
|
3292
|
-
var templateObject_1$
|
|
3265
|
+
})(templateObject_2$3 || (templateObject_2$3 = __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);
|
|
3266
|
+
var templateObject_1$4, templateObject_2$3;
|
|
3267
|
+
|
|
3268
|
+
React.createElement;
|
|
3269
|
+
var semantic$1 = tokensData.semantic,
|
|
3270
|
+
base$1 = tokensData.base;
|
|
3271
|
+
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
3272
|
+
displayName: "NumberInput__StyledFieldContainer",
|
|
3273
|
+
componentId: "sc-qotc3w-0"
|
|
3274
|
+
})(templateObject_1$3 || (templateObject_1$3 = __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$1.spacing[2]);
|
|
3275
|
+
var StyledLabel$1 = styled.label.withConfig({
|
|
3276
|
+
displayName: "NumberInput__StyledLabel",
|
|
3277
|
+
componentId: "sc-qotc3w-1"
|
|
3278
|
+
})(templateObject_2$2 || (templateObject_2$2 = __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$1.spacing[1], semantic$1.typography.label, semantic$1.color.text["default"], semantic$1.color.text.disabled);
|
|
3279
|
+
var StyledRequiredIndicator$1 = styled.span.withConfig({
|
|
3280
|
+
displayName: "NumberInput__StyledRequiredIndicator",
|
|
3281
|
+
componentId: "sc-qotc3w-2"
|
|
3282
|
+
})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$1.color.text.error, base$1.fontWeight[5]);
|
|
3283
|
+
var StyledInputWrapper = styled.div.withConfig({
|
|
3284
|
+
displayName: "NumberInput__StyledInputWrapper",
|
|
3285
|
+
componentId: "sc-qotc3w-3"
|
|
3286
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n"])));
|
|
3287
|
+
var StyledNumberInput = styled(StyledInputBase).withConfig({
|
|
3288
|
+
displayName: "NumberInput__StyledNumberInput",
|
|
3289
|
+
componentId: "sc-qotc3w-4"
|
|
3290
|
+
})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"], ["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"])), base$1.spacing[10]);
|
|
3291
|
+
var StyledStepperContainer = styled.div.withConfig({
|
|
3292
|
+
displayName: "NumberInput__StyledStepperContainer",
|
|
3293
|
+
componentId: "sc-qotc3w-5"
|
|
3294
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"], ["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"])), base$1.spacing[2], base$1.spacing[2]);
|
|
3295
|
+
var StyledHelperText$1 = styled.div.withConfig({
|
|
3296
|
+
displayName: "NumberInput__StyledHelperText",
|
|
3297
|
+
componentId: "sc-qotc3w-6"
|
|
3298
|
+
})(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
3299
|
+
/**
|
|
3300
|
+
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
3301
|
+
*
|
|
3302
|
+
* Features:
|
|
3303
|
+
* - Stepper buttons for increment/decrement
|
|
3304
|
+
* - Keyboard arrow up/down support
|
|
3305
|
+
* - Min/max value constraints
|
|
3306
|
+
* - Custom step values
|
|
3307
|
+
* - Decimal and integer support
|
|
3308
|
+
* - Full accessibility with ARIA attributes
|
|
3309
|
+
*
|
|
3310
|
+
* @example
|
|
3311
|
+
* ```tsx
|
|
3312
|
+
* <NumberInput
|
|
3313
|
+
* label="Quantity"
|
|
3314
|
+
* min={0}
|
|
3315
|
+
* max={100}
|
|
3316
|
+
* step={1}
|
|
3317
|
+
* value={value}
|
|
3318
|
+
* onChange={(newValue) => setValue(newValue)}
|
|
3319
|
+
* />
|
|
3320
|
+
* ```
|
|
3321
|
+
*/])), semantic$1.typography.small, function (_a) {
|
|
3322
|
+
var $isError = _a.$isError;
|
|
3323
|
+
return $isError ? semantic$1.color.text.error : semantic$1.color.text.subdued;
|
|
3324
|
+
});
|
|
3325
|
+
/**
|
|
3326
|
+
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
3327
|
+
*
|
|
3328
|
+
* Features:
|
|
3329
|
+
* - Stepper buttons for increment/decrement
|
|
3330
|
+
* - Keyboard arrow up/down support
|
|
3331
|
+
* - Min/max value constraints
|
|
3332
|
+
* - Custom step values
|
|
3333
|
+
* - Decimal and integer support
|
|
3334
|
+
* - Full accessibility with ARIA attributes
|
|
3335
|
+
*
|
|
3336
|
+
* @example
|
|
3337
|
+
* ```tsx
|
|
3338
|
+
* <NumberInput
|
|
3339
|
+
* label="Quantity"
|
|
3340
|
+
* min={0}
|
|
3341
|
+
* max={100}
|
|
3342
|
+
* step={1}
|
|
3343
|
+
* value={value}
|
|
3344
|
+
* onChange={(newValue) => setValue(newValue)}
|
|
3345
|
+
* />
|
|
3346
|
+
* ```
|
|
3347
|
+
*/
|
|
3348
|
+
var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
3349
|
+
var label = _a.label,
|
|
3350
|
+
helperText = _a.helperText,
|
|
3351
|
+
error = _a.error,
|
|
3352
|
+
_b = _a.required,
|
|
3353
|
+
required = _b === void 0 ? false : _b,
|
|
3354
|
+
_c = _a.disabled,
|
|
3355
|
+
disabled = _c === void 0 ? false : _c,
|
|
3356
|
+
min = _a.min,
|
|
3357
|
+
max = _a.max,
|
|
3358
|
+
_d = _a.step,
|
|
3359
|
+
step = _d === void 0 ? 1 : _d,
|
|
3360
|
+
value = _a.value,
|
|
3361
|
+
defaultValue = _a.defaultValue,
|
|
3362
|
+
onChange = _a.onChange,
|
|
3363
|
+
providedId = _a.id,
|
|
3364
|
+
testId = _a["data-testid"],
|
|
3365
|
+
placeholder = _a.placeholder,
|
|
3366
|
+
ariaLabel = _a["aria-label"],
|
|
3367
|
+
ariaDescribedBy = _a["aria-describedby"],
|
|
3368
|
+
rest = __rest(_a, ["label", "helperText", "error", "required", "disabled", "min", "max", "step", "value", "defaultValue", "onChange", "id", 'data-testid', "placeholder", 'aria-label', 'aria-describedby']);
|
|
3369
|
+
var generatedId = useId();
|
|
3370
|
+
var id = providedId || generatedId;
|
|
3371
|
+
var helperId = "".concat(id, "-helper");
|
|
3372
|
+
var errorId = "".concat(id, "-error");
|
|
3373
|
+
// Parse string value to number or empty string
|
|
3374
|
+
var parseValue = useCallback(function (val) {
|
|
3375
|
+
if (val === '' || val === '-') return '';
|
|
3376
|
+
var parsed = parseFloat(val);
|
|
3377
|
+
return isNaN(parsed) ? '' : parsed;
|
|
3378
|
+
}, []);
|
|
3379
|
+
// Format number to string for display
|
|
3380
|
+
var formatValue = useCallback(function (val) {
|
|
3381
|
+
return val === '' ? '' : String(val);
|
|
3382
|
+
}, []);
|
|
3383
|
+
// Handle increment
|
|
3384
|
+
var handleIncrement = useCallback(function () {
|
|
3385
|
+
if (disabled) return;
|
|
3386
|
+
var inputElement = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
3387
|
+
var currentValue = value !== undefined ? value : parseValue((inputElement === null || inputElement === void 0 ? void 0 : inputElement.value) || '');
|
|
3388
|
+
var numValue = currentValue === '' ? min !== undefined ? min : 0 : currentValue;
|
|
3389
|
+
var newValue = numValue + step;
|
|
3390
|
+
// Check max constraint
|
|
3391
|
+
if (max !== undefined && newValue > max) return;
|
|
3392
|
+
// Update input value directly for both controlled and uncontrolled
|
|
3393
|
+
if (inputElement) {
|
|
3394
|
+
inputElement.value = String(newValue);
|
|
3395
|
+
}
|
|
3396
|
+
// Create synthetic event
|
|
3397
|
+
var syntheticEvent = {
|
|
3398
|
+
target: inputElement || {
|
|
3399
|
+
value: String(newValue)
|
|
3400
|
+
},
|
|
3401
|
+
currentTarget: inputElement || {
|
|
3402
|
+
value: String(newValue)
|
|
3403
|
+
}
|
|
3404
|
+
};
|
|
3405
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValue, syntheticEvent);
|
|
3406
|
+
}, [disabled, value, min, max, step, onChange, parseValue, ref]);
|
|
3407
|
+
// Handle decrement
|
|
3408
|
+
var handleDecrement = useCallback(function () {
|
|
3409
|
+
if (disabled) return;
|
|
3410
|
+
var inputElement = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
3411
|
+
var currentValue = value !== undefined ? value : parseValue((inputElement === null || inputElement === void 0 ? void 0 : inputElement.value) || '');
|
|
3412
|
+
var numValue = currentValue === '' ? max !== undefined ? max : 0 : currentValue;
|
|
3413
|
+
var newValue = numValue - step;
|
|
3414
|
+
// Check min constraint
|
|
3415
|
+
if (min !== undefined && newValue < min) return;
|
|
3416
|
+
// Update input value directly for both controlled and uncontrolled
|
|
3417
|
+
if (inputElement) {
|
|
3418
|
+
inputElement.value = String(newValue);
|
|
3419
|
+
}
|
|
3420
|
+
// Create synthetic event
|
|
3421
|
+
var syntheticEvent = {
|
|
3422
|
+
target: inputElement || {
|
|
3423
|
+
value: String(newValue)
|
|
3424
|
+
},
|
|
3425
|
+
currentTarget: inputElement || {
|
|
3426
|
+
value: String(newValue)
|
|
3427
|
+
}
|
|
3428
|
+
};
|
|
3429
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValue, syntheticEvent);
|
|
3430
|
+
}, [disabled, value, min, max, step, onChange, parseValue, ref]);
|
|
3431
|
+
// Handle input change
|
|
3432
|
+
var handleChange = useCallback(function (e) {
|
|
3433
|
+
var inputValue = e.target.value;
|
|
3434
|
+
// Allow empty, negative sign, or valid number (including decimals)
|
|
3435
|
+
if (inputValue === '' || inputValue === '-' || /^-?\d*\.?\d*$/.test(inputValue)) {
|
|
3436
|
+
var parsedValue = parseValue(inputValue);
|
|
3437
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(parsedValue, e);
|
|
3438
|
+
} else {
|
|
3439
|
+
// Prevent invalid input by not updating
|
|
3440
|
+
e.preventDefault();
|
|
3441
|
+
e.target.value = formatValue(value !== undefined ? value : '');
|
|
3442
|
+
}
|
|
3443
|
+
}, [onChange, parseValue, value, formatValue]);
|
|
3444
|
+
// Handle keyboard navigation
|
|
3445
|
+
var handleKeyDown = useCallback(function (e) {
|
|
3446
|
+
if (e.key === 'ArrowUp') {
|
|
3447
|
+
e.preventDefault();
|
|
3448
|
+
handleIncrement();
|
|
3449
|
+
} else if (e.key === 'ArrowDown') {
|
|
3450
|
+
e.preventDefault();
|
|
3451
|
+
handleDecrement();
|
|
3452
|
+
}
|
|
3453
|
+
}, [handleIncrement, handleDecrement]);
|
|
3454
|
+
// Check if buttons should be disabled
|
|
3455
|
+
var isIncrementDisabled = disabled || max !== undefined && value !== '' && typeof value === 'number' && value >= max;
|
|
3456
|
+
var isDecrementDisabled = disabled || min !== undefined && value !== '' && typeof value === 'number' && value <= min;
|
|
3457
|
+
// Build aria-describedby
|
|
3458
|
+
var ariaDescribedByIds = [ariaDescribedBy, helperText ? helperId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined;
|
|
3459
|
+
return /*#__PURE__*/React.createElement(StyledFieldContainer$1, null, label && /*#__PURE__*/React.createElement(StyledLabel$1, {
|
|
3460
|
+
htmlFor: id,
|
|
3461
|
+
"data-disabled": disabled
|
|
3462
|
+
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$1, {
|
|
3463
|
+
"aria-label": "required"
|
|
3464
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper, null, /*#__PURE__*/React.createElement(StyledNumberInput, _extends({
|
|
3465
|
+
ref: ref,
|
|
3466
|
+
id: id,
|
|
3467
|
+
type: "text",
|
|
3468
|
+
inputMode: "decimal",
|
|
3469
|
+
value: value !== undefined ? formatValue(value) : undefined,
|
|
3470
|
+
defaultValue: defaultValue !== undefined ? formatValue(defaultValue) : undefined,
|
|
3471
|
+
onChange: handleChange,
|
|
3472
|
+
onKeyDown: handleKeyDown,
|
|
3473
|
+
disabled: disabled,
|
|
3474
|
+
required: required,
|
|
3475
|
+
placeholder: placeholder,
|
|
3476
|
+
$hasError: !!error,
|
|
3477
|
+
$disabled: disabled,
|
|
3478
|
+
"aria-label": ariaLabel || label,
|
|
3479
|
+
"aria-invalid": !!error,
|
|
3480
|
+
"aria-describedby": ariaDescribedByIds,
|
|
3481
|
+
"aria-required": required,
|
|
3482
|
+
"data-testid": testId,
|
|
3483
|
+
role: "spinbutton",
|
|
3484
|
+
"aria-valuemin": min,
|
|
3485
|
+
"aria-valuemax": max,
|
|
3486
|
+
"aria-valuenow": typeof value === 'number' ? value : undefined
|
|
3487
|
+
}, rest)), /*#__PURE__*/React.createElement(StyledStepperContainer, null, /*#__PURE__*/React.createElement(IconButton, {
|
|
3488
|
+
iconName: "caretUp",
|
|
3489
|
+
variant: "secondary",
|
|
3490
|
+
size: "small",
|
|
3491
|
+
onClick: handleIncrement,
|
|
3492
|
+
disabled: isIncrementDisabled,
|
|
3493
|
+
"aria-label": "Increment value",
|
|
3494
|
+
tabIndex: -1,
|
|
3495
|
+
type: "button"
|
|
3496
|
+
}), /*#__PURE__*/React.createElement(IconButton, {
|
|
3497
|
+
iconName: "caretDown",
|
|
3498
|
+
variant: "secondary",
|
|
3499
|
+
size: "small",
|
|
3500
|
+
onClick: handleDecrement,
|
|
3501
|
+
disabled: isDecrementDisabled,
|
|
3502
|
+
"aria-label": "Decrement value",
|
|
3503
|
+
tabIndex: -1,
|
|
3504
|
+
type: "button"
|
|
3505
|
+
}))), (helperText || error) && /*#__PURE__*/React.createElement(StyledHelperText$1, {
|
|
3506
|
+
id: error ? errorId : helperId,
|
|
3507
|
+
$isError: !!error,
|
|
3508
|
+
role: error ? 'alert' : undefined,
|
|
3509
|
+
"aria-live": error ? 'polite' : undefined
|
|
3510
|
+
}, error || helperText));
|
|
3511
|
+
});
|
|
3512
|
+
NumberInput.displayName = 'NumberInput';
|
|
3513
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
3514
|
+
|
|
3515
|
+
React.createElement;
|
|
3516
|
+
var PageTitleStyled = styled.div.withConfig({
|
|
3517
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3518
|
+
return !prop.startsWith('$');
|
|
3519
|
+
},
|
|
3520
|
+
displayName: "PageTitle__PageTitleStyled",
|
|
3521
|
+
componentId: "sc-16h256f-0"
|
|
3522
|
+
})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
|
|
3523
|
+
var $hasBackButton = _a.$hasBackButton;
|
|
3524
|
+
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
3525
|
+
});
|
|
3526
|
+
var PageTitle = function PageTitle(_a) {
|
|
3527
|
+
var title = _a.title,
|
|
3528
|
+
_b = _a.hasBackButton,
|
|
3529
|
+
hasBackButton = _b === void 0 ? false : _b,
|
|
3530
|
+
subtitle = _a.subtitle;
|
|
3531
|
+
return /*#__PURE__*/React.createElement(PageTitleStyled, {
|
|
3532
|
+
$hasBackButton: hasBackButton
|
|
3533
|
+
}, hasBackButton && /*#__PURE__*/React.createElement(IconButton, {
|
|
3534
|
+
iconName: "back",
|
|
3535
|
+
size: "large",
|
|
3536
|
+
variant: "naked",
|
|
3537
|
+
url: "/music",
|
|
3538
|
+
"aria-label": "Go back to music page"
|
|
3539
|
+
}), /*#__PURE__*/React.createElement(Stack, {
|
|
3540
|
+
direction: "column",
|
|
3541
|
+
gap: "md"
|
|
3542
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3543
|
+
variant: "h1"
|
|
3544
|
+
}, title), subtitle && /*#__PURE__*/React.createElement(Typography, {
|
|
3545
|
+
variant: "caption",
|
|
3546
|
+
color: "subdued"
|
|
3547
|
+
}, subtitle)));
|
|
3548
|
+
};
|
|
3549
|
+
var templateObject_1$2;
|
|
3293
3550
|
|
|
3294
3551
|
React.createElement;
|
|
3295
3552
|
var semantic = tokensData.semantic,
|
|
@@ -3593,5 +3850,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
3593
3850
|
// Main design system exports
|
|
3594
3851
|
var tokens = tokensData;
|
|
3595
3852
|
|
|
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 };
|
|
3853
|
+
export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, NumberInput, PageTitle, Picture, ProgressBar, ResponsiveGrid, Stack, StyledInputBase, StyledTextAreaBase, Tag, TextField, Typography, iconsData, tokens };
|
|
3597
3854
|
//# sourceMappingURL=index.esm.js.map
|