@common-origin/design-system 1.4.1 → 1.5.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/atoms/Icon/Icon.d.ts +1 -1
- package/dist/components/atoms/ProgressBar/ProgressBar.d.ts +17 -0
- package/dist/components/atoms/ProgressBar/index.d.ts +2 -0
- package/dist/components/atoms/index.d.ts +1 -0
- package/dist/index.esm.js +115 -32
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +115 -31
- package/dist/index.js.map +1 -1
- package/dist/lib/styleUtils.d.ts +1 -1
- package/dist/tokens/index.esm.js +20 -1
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +20 -1
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/tokens.d.ts +19 -0
- package/package.json +3 -2
package/dist/index.js
CHANGED
|
@@ -578,6 +578,24 @@ var component = {
|
|
|
578
578
|
}
|
|
579
579
|
}
|
|
580
580
|
},
|
|
581
|
+
progressBar: {
|
|
582
|
+
backgroundColor: "#dee2e6",
|
|
583
|
+
borderRadius: "0.25rem",
|
|
584
|
+
sizes: {
|
|
585
|
+
sm: {
|
|
586
|
+
height: "0.25rem"
|
|
587
|
+
},
|
|
588
|
+
md: {
|
|
589
|
+
height: "0.5rem"
|
|
590
|
+
},
|
|
591
|
+
lg: {
|
|
592
|
+
height: "1rem"
|
|
593
|
+
},
|
|
594
|
+
xl: {
|
|
595
|
+
height: "1.25rem"
|
|
596
|
+
}
|
|
597
|
+
}
|
|
598
|
+
},
|
|
581
599
|
$ref: "./component/index.json"
|
|
582
600
|
};
|
|
583
601
|
var semantic$1 = {
|
|
@@ -659,7 +677,8 @@ var semantic$1 = {
|
|
|
659
677
|
"success-subtle": "#CEF8E0",
|
|
660
678
|
warning: "#B14C00",
|
|
661
679
|
"warning-subtle": "#FFECCC",
|
|
662
|
-
disabled: "#dee2e6"
|
|
680
|
+
disabled: "#dee2e6",
|
|
681
|
+
progressTrack: "#dee2e6"
|
|
663
682
|
},
|
|
664
683
|
border: {
|
|
665
684
|
"default": "#e9ecef",
|
|
@@ -728,7 +747,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
728
747
|
},
|
|
729
748
|
displayName: "Avatar__AvatarContainer",
|
|
730
749
|
componentId: "sc-ezn4ax-0"
|
|
731
|
-
})(templateObject_1$
|
|
750
|
+
})(templateObject_1$l || (templateObject_1$l = __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) {
|
|
732
751
|
var $size = _a.$size;
|
|
733
752
|
return tokens.semantic.size.avatar[$size];
|
|
734
753
|
}, function (_a) {
|
|
@@ -741,14 +760,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
741
760
|
},
|
|
742
761
|
displayName: "Avatar__AvatarImage",
|
|
743
762
|
componentId: "sc-ezn4ax-1"
|
|
744
|
-
})(templateObject_2$
|
|
763
|
+
})(templateObject_2$9 || (templateObject_2$9 = __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"])), tokens.base.border.radius.circle);
|
|
745
764
|
var AvatarInitials = styled.span.withConfig({
|
|
746
765
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
747
766
|
return !prop.startsWith('$');
|
|
748
767
|
},
|
|
749
768
|
displayName: "Avatar__AvatarInitials",
|
|
750
769
|
componentId: "sc-ezn4ax-2"
|
|
751
|
-
})(templateObject_3$
|
|
770
|
+
})(templateObject_3$7 || (templateObject_3$7 = __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"
|
|
752
771
|
// Helper function to get initials from name
|
|
753
772
|
])), tokens.base.fontFamily.body, tokens.base.fontWeight[3], function (_a) {
|
|
754
773
|
var $size = _a.$size;
|
|
@@ -811,7 +830,7 @@ var Avatar = function Avatar(_a) {
|
|
|
811
830
|
"aria-hidden": "true"
|
|
812
831
|
}, initials));
|
|
813
832
|
};
|
|
814
|
-
var templateObject_1$
|
|
833
|
+
var templateObject_1$l, templateObject_2$9, templateObject_3$7;
|
|
815
834
|
|
|
816
835
|
React.createElement;
|
|
817
836
|
var StyledBox = styled.div.withConfig({
|
|
@@ -823,19 +842,19 @@ var StyledBox = styled.div.withConfig({
|
|
|
823
842
|
})(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"
|
|
824
843
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
825
844
|
])), function (props) {
|
|
826
|
-
return props.$display && styled.css(templateObject_1$
|
|
845
|
+
return props.$display && styled.css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
827
846
|
}, function (props) {
|
|
828
|
-
return props.$flexDirection && styled.css(templateObject_2$
|
|
847
|
+
return props.$flexDirection && styled.css(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
829
848
|
}, function (props) {
|
|
830
|
-
return props.$justifyContent && styled.css(templateObject_3$
|
|
849
|
+
return props.$justifyContent && styled.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
831
850
|
}, function (props) {
|
|
832
|
-
return props.$alignItems && styled.css(templateObject_4$
|
|
851
|
+
return props.$alignItems && styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
833
852
|
}, function (props) {
|
|
834
|
-
return props.$flexWrap && styled.css(templateObject_5$
|
|
853
|
+
return props.$flexWrap && styled.css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
835
854
|
}, function (props) {
|
|
836
|
-
return props.$gap && styled.css(templateObject_6$
|
|
855
|
+
return props.$gap && styled.css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokens.semantic.spacing.layout[props.$gap]);
|
|
837
856
|
}, function (props) {
|
|
838
|
-
return props.$m && styled.css(templateObject_7$
|
|
857
|
+
return props.$m && styled.css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokens.semantic.spacing.layout[props.$m]);
|
|
839
858
|
}, function (props) {
|
|
840
859
|
return props.$mt && styled.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokens.semantic.spacing.layout[props.$mt]);
|
|
841
860
|
}, function (props) {
|
|
@@ -1013,7 +1032,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1013
1032
|
}, rest), children);
|
|
1014
1033
|
};
|
|
1015
1034
|
var Box = BoxTransform;
|
|
1016
|
-
var templateObject_1$
|
|
1035
|
+
var templateObject_1$k, templateObject_2$8, templateObject_3$6, templateObject_4$5, 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;
|
|
1017
1036
|
|
|
1018
1037
|
var add = {
|
|
1019
1038
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1115,7 +1134,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1115
1134
|
},
|
|
1116
1135
|
displayName: "Icon__IconStyled",
|
|
1117
1136
|
componentId: "sc-1105czq-0"
|
|
1118
|
-
})(templateObject_1$
|
|
1137
|
+
})(templateObject_1$j || (templateObject_1$j = __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) {
|
|
1119
1138
|
var $size = _a.$size;
|
|
1120
1139
|
return tokens.semantic.size.icon[$size];
|
|
1121
1140
|
}, function (_a) {
|
|
@@ -1179,7 +1198,7 @@ var Icon = function Icon(_a) {
|
|
|
1179
1198
|
d: iconData.path
|
|
1180
1199
|
})));
|
|
1181
1200
|
};
|
|
1182
|
-
var templateObject_1$
|
|
1201
|
+
var templateObject_1$j;
|
|
1183
1202
|
|
|
1184
1203
|
React.createElement;
|
|
1185
1204
|
var button = tokens.component.button,
|
|
@@ -1211,14 +1230,14 @@ var StyledButton = styled.button.withConfig({
|
|
|
1211
1230
|
},
|
|
1212
1231
|
displayName: "Button__StyledButton",
|
|
1213
1232
|
componentId: "sc-1eiuum9-0"
|
|
1214
|
-
})(templateObject_1$
|
|
1233
|
+
})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1215
1234
|
var StyledLink = styled.a.withConfig({
|
|
1216
1235
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1217
1236
|
return !prop.startsWith('$');
|
|
1218
1237
|
},
|
|
1219
1238
|
displayName: "Button__StyledLink",
|
|
1220
1239
|
componentId: "sc-1eiuum9-1"
|
|
1221
|
-
})(templateObject_2$
|
|
1240
|
+
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1222
1241
|
// Helper function to get icon size based on button size
|
|
1223
1242
|
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1224
1243
|
// Helper function to get icon size based on button size
|
|
@@ -1311,7 +1330,7 @@ var Button = function Button(_a) {
|
|
|
1311
1330
|
"data-testid": dataTestId
|
|
1312
1331
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1313
1332
|
};
|
|
1314
|
-
var templateObject_1$
|
|
1333
|
+
var templateObject_1$i, templateObject_2$7;
|
|
1315
1334
|
|
|
1316
1335
|
React.createElement;
|
|
1317
1336
|
var chip = tokens.component.chip;
|
|
@@ -1368,7 +1387,7 @@ var BaseChip = styled.span.withConfig({
|
|
|
1368
1387
|
},
|
|
1369
1388
|
displayName: "Chip__BaseChip",
|
|
1370
1389
|
componentId: "sc-fvu2t0-0"
|
|
1371
|
-
})(templateObject_1$
|
|
1390
|
+
})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: ", ";\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: ", ";\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: ", ";\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: ", ";\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"
|
|
1372
1391
|
// Wrapper component that applies styles via CSS custom properties
|
|
1373
1392
|
])), chip["default"].borderRadius, tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1374
1393
|
// Wrapper component that applies styles via CSS custom properties
|
|
@@ -1463,7 +1482,7 @@ var LegacyChip = function LegacyChip(_a) {
|
|
|
1463
1482
|
variant: newVariant
|
|
1464
1483
|
}, title);
|
|
1465
1484
|
};
|
|
1466
|
-
var templateObject_1$
|
|
1485
|
+
var templateObject_1$h;
|
|
1467
1486
|
|
|
1468
1487
|
// Breakpoints using base tokens
|
|
1469
1488
|
var breakpoints$1 = {
|
|
@@ -1489,32 +1508,32 @@ var spacing$3 = tokens.semantic.spacing;
|
|
|
1489
1508
|
var StyledContainer = styled.div.withConfig({
|
|
1490
1509
|
displayName: "Container__StyledContainer",
|
|
1491
1510
|
componentId: "sc-17dbj6n-0"
|
|
1492
|
-
})(templateObject_1$
|
|
1511
|
+
})(templateObject_1$g || (templateObject_1$g = __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']);
|
|
1493
1512
|
var Container = function Container(_a) {
|
|
1494
1513
|
var children = _a.children,
|
|
1495
1514
|
props = __rest(_a, ["children"]);
|
|
1496
1515
|
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
1497
1516
|
};
|
|
1498
|
-
var templateObject_1$
|
|
1517
|
+
var templateObject_1$g;
|
|
1499
1518
|
|
|
1500
1519
|
React.createElement;
|
|
1501
1520
|
var base = tokens.base;
|
|
1502
1521
|
var PictureWrapper = styled.div.withConfig({
|
|
1503
1522
|
displayName: "Picture__PictureWrapper",
|
|
1504
1523
|
componentId: "sc-11d9tei-0"
|
|
1505
|
-
})(templateObject_1$
|
|
1524
|
+
})(templateObject_1$f || (templateObject_1$f = __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);
|
|
1506
1525
|
var ImageLink = styled.a.withConfig({
|
|
1507
1526
|
displayName: "Picture__ImageLink",
|
|
1508
1527
|
componentId: "sc-11d9tei-1"
|
|
1509
|
-
})(templateObject_2$
|
|
1528
|
+
})(templateObject_2$6 || (templateObject_2$6 = __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.duration.normal, base.easing.easeInOut);
|
|
1510
1529
|
var ImageButton = styled.button.withConfig({
|
|
1511
1530
|
displayName: "Picture__ImageButton",
|
|
1512
1531
|
componentId: "sc-11d9tei-2"
|
|
1513
|
-
})(templateObject_3$
|
|
1532
|
+
})(templateObject_3$5 || (templateObject_3$5 = __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.duration.normal, base.easing.easeInOut);
|
|
1514
1533
|
var StyledImage = styled.img.withConfig({
|
|
1515
1534
|
displayName: "Picture__StyledImage",
|
|
1516
1535
|
componentId: "sc-11d9tei-3"
|
|
1517
|
-
})(templateObject_4$
|
|
1536
|
+
})(templateObject_4$4 || (templateObject_4$4 = __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.border.radius[2]);
|
|
1518
1537
|
var Picture = function Picture(_a) {
|
|
1519
1538
|
var title = _a.title,
|
|
1520
1539
|
src = _a.src,
|
|
@@ -1541,7 +1560,7 @@ var Picture = function Picture(_a) {
|
|
|
1541
1560
|
"aria-label": "Read more about ".concat(title)
|
|
1542
1561
|
}, image) : image);
|
|
1543
1562
|
};
|
|
1544
|
-
var templateObject_1$
|
|
1563
|
+
var templateObject_1$f, templateObject_2$6, templateObject_3$5, templateObject_4$4;
|
|
1545
1564
|
|
|
1546
1565
|
React.createElement;
|
|
1547
1566
|
var _a$5 = tokens.semantic,
|
|
@@ -1550,7 +1569,7 @@ var _a$5 = tokens.semantic,
|
|
|
1550
1569
|
var TimeStyled = styled.time.withConfig({
|
|
1551
1570
|
displayName: "DateFormatter__TimeStyled",
|
|
1552
1571
|
componentId: "sc-5464cc-0"
|
|
1553
|
-
})(templateObject_1$
|
|
1572
|
+
})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography$2.label, color$3.text.subdued);
|
|
1554
1573
|
var DateFormatter = function DateFormatter(_a) {
|
|
1555
1574
|
var dateString = _a.dateString,
|
|
1556
1575
|
_b = _a.formatString,
|
|
@@ -1562,7 +1581,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
1562
1581
|
"data-testid": dataTestId
|
|
1563
1582
|
}, dateFns.format(date, formatString));
|
|
1564
1583
|
};
|
|
1565
|
-
var templateObject_1$
|
|
1584
|
+
var templateObject_1$e;
|
|
1566
1585
|
|
|
1567
1586
|
React.createElement;
|
|
1568
1587
|
var motion = tokens.semantic.motion,
|
|
@@ -1573,7 +1592,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
1573
1592
|
},
|
|
1574
1593
|
displayName: "IconButton__IconButtonStyled",
|
|
1575
1594
|
componentId: "sc-k8b14t-0"
|
|
1576
|
-
})(templateObject_1$
|
|
1595
|
+
})(templateObject_1$d || (templateObject_1$d = __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) {
|
|
1577
1596
|
var $variant = _a.$variant;
|
|
1578
1597
|
switch ($variant) {
|
|
1579
1598
|
case 'primary':
|
|
@@ -1684,7 +1703,71 @@ var IconButton = function IconButton(_a) {
|
|
|
1684
1703
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
1685
1704
|
}));
|
|
1686
1705
|
};
|
|
1687
|
-
var templateObject_1$
|
|
1706
|
+
var templateObject_1$d;
|
|
1707
|
+
|
|
1708
|
+
React.createElement;
|
|
1709
|
+
var ProgressBarContainer = styled.div.withConfig({
|
|
1710
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1711
|
+
return !prop.startsWith('$');
|
|
1712
|
+
},
|
|
1713
|
+
displayName: "ProgressBar__ProgressBarContainer",
|
|
1714
|
+
componentId: "sc-1nco33q-0"
|
|
1715
|
+
})(templateObject_3$4 || (templateObject_3$4 = __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"])), tokens.semantic.color.background.disabled, tokens.base.border.radius[1], function (props) {
|
|
1716
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? tokens.component.progressBar.sizes[props.$height].height : tokens.component.progressBar.sizes.md.height);
|
|
1717
|
+
}, function (props) {
|
|
1718
|
+
return props.$variant === 'vertical' && styled.css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? tokens.component.progressBar.sizes[props.$width].height : tokens.component.progressBar.sizes.md.height);
|
|
1719
|
+
});
|
|
1720
|
+
var ProgressBarFill = styled.div.withConfig({
|
|
1721
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1722
|
+
return !prop.startsWith('$');
|
|
1723
|
+
},
|
|
1724
|
+
displayName: "ProgressBar__ProgressBarFill",
|
|
1725
|
+
componentId: "sc-1nco33q-1"
|
|
1726
|
+
})(templateObject_7$1 || (templateObject_7$1 = __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"])), tokens.semantic.motion.transition.normal, function (props) {
|
|
1727
|
+
var backgroundColor;
|
|
1728
|
+
switch (props.$color) {
|
|
1729
|
+
case 'success':
|
|
1730
|
+
backgroundColor = tokens.semantic.color.background.success;
|
|
1731
|
+
break;
|
|
1732
|
+
case 'error':
|
|
1733
|
+
backgroundColor = tokens.semantic.color.background.error;
|
|
1734
|
+
break;
|
|
1735
|
+
case 'default':
|
|
1736
|
+
default:
|
|
1737
|
+
backgroundColor = tokens.semantic.color.background.interactive;
|
|
1738
|
+
break;
|
|
1739
|
+
}
|
|
1740
|
+
return styled.css(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
1741
|
+
}, function (props) {
|
|
1742
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
1743
|
+
}, function (props) {
|
|
1744
|
+
return props.$variant === 'vertical' && styled.css(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
1745
|
+
});
|
|
1746
|
+
var ProgressBar = function ProgressBar(_a) {
|
|
1747
|
+
var value = _a.value,
|
|
1748
|
+
_b = _a.variant,
|
|
1749
|
+
variant = _b === void 0 ? 'horizontal' : _b,
|
|
1750
|
+
_c = _a.color,
|
|
1751
|
+
color = _c === void 0 ? 'default' : _c,
|
|
1752
|
+
height = _a.height,
|
|
1753
|
+
width = _a.width,
|
|
1754
|
+
dataTestId = _a["data-testid"];
|
|
1755
|
+
return /*#__PURE__*/React.createElement(ProgressBarContainer, {
|
|
1756
|
+
$variant: variant,
|
|
1757
|
+
$height: height,
|
|
1758
|
+
$width: width,
|
|
1759
|
+
"data-testid": dataTestId,
|
|
1760
|
+
role: "progressbar",
|
|
1761
|
+
"aria-valuenow": Math.min(100, Math.max(0, value)),
|
|
1762
|
+
"aria-valuemin": 0,
|
|
1763
|
+
"aria-valuemax": 100
|
|
1764
|
+
}, /*#__PURE__*/React.createElement(ProgressBarFill, {
|
|
1765
|
+
$value: value,
|
|
1766
|
+
$variant: variant,
|
|
1767
|
+
$color: color
|
|
1768
|
+
}));
|
|
1769
|
+
};
|
|
1770
|
+
var templateObject_1$c, templateObject_2$5, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$1, templateObject_7$1;
|
|
1688
1771
|
|
|
1689
1772
|
React.createElement;
|
|
1690
1773
|
var StyledSeparator = styled.div.withConfig({
|
|
@@ -2747,6 +2830,7 @@ exports.IconButton = IconButton;
|
|
|
2747
2830
|
exports.LegacyChip = LegacyChip;
|
|
2748
2831
|
exports.PageTitle = PageTitle;
|
|
2749
2832
|
exports.Picture = Picture;
|
|
2833
|
+
exports.ProgressBar = ProgressBar;
|
|
2750
2834
|
exports.ReleaseCard = ReleaseCard;
|
|
2751
2835
|
exports.ResponsiveGrid = ResponsiveGrid;
|
|
2752
2836
|
exports.SectionSeparator = SectionSeparator;
|