@common-origin/design-system 1.4.2 → 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/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
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface ProgressBarProps {
|
|
3
|
+
/** Progress value from 0 to 100 */
|
|
4
|
+
value: number;
|
|
5
|
+
/** Orientation of the progress bar */
|
|
6
|
+
variant?: 'horizontal' | 'vertical';
|
|
7
|
+
/** Color variant for the progress bar */
|
|
8
|
+
color?: 'success' | 'error' | 'default';
|
|
9
|
+
/** Height size for horizontal progress bar (default: md) */
|
|
10
|
+
height?: 'sm' | 'md' | 'lg' | 'xl';
|
|
11
|
+
/** Width size for vertical progress bar (default: md) */
|
|
12
|
+
width?: 'sm' | 'md' | 'lg' | 'xl';
|
|
13
|
+
/** Data attribute for testing */
|
|
14
|
+
'data-testid'?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare const ProgressBar: React.FC<ProgressBarProps>;
|
|
17
|
+
export default ProgressBar;
|
package/dist/index.esm.js
CHANGED
|
@@ -576,6 +576,24 @@ var component = {
|
|
|
576
576
|
}
|
|
577
577
|
}
|
|
578
578
|
},
|
|
579
|
+
progressBar: {
|
|
580
|
+
backgroundColor: "#dee2e6",
|
|
581
|
+
borderRadius: "0.25rem",
|
|
582
|
+
sizes: {
|
|
583
|
+
sm: {
|
|
584
|
+
height: "0.25rem"
|
|
585
|
+
},
|
|
586
|
+
md: {
|
|
587
|
+
height: "0.5rem"
|
|
588
|
+
},
|
|
589
|
+
lg: {
|
|
590
|
+
height: "1rem"
|
|
591
|
+
},
|
|
592
|
+
xl: {
|
|
593
|
+
height: "1.25rem"
|
|
594
|
+
}
|
|
595
|
+
}
|
|
596
|
+
},
|
|
579
597
|
$ref: "./component/index.json"
|
|
580
598
|
};
|
|
581
599
|
var semantic$1 = {
|
|
@@ -657,7 +675,8 @@ var semantic$1 = {
|
|
|
657
675
|
"success-subtle": "#CEF8E0",
|
|
658
676
|
warning: "#B14C00",
|
|
659
677
|
"warning-subtle": "#FFECCC",
|
|
660
|
-
disabled: "#dee2e6"
|
|
678
|
+
disabled: "#dee2e6",
|
|
679
|
+
progressTrack: "#dee2e6"
|
|
661
680
|
},
|
|
662
681
|
border: {
|
|
663
682
|
"default": "#e9ecef",
|
|
@@ -726,7 +745,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
726
745
|
},
|
|
727
746
|
displayName: "Avatar__AvatarContainer",
|
|
728
747
|
componentId: "sc-ezn4ax-0"
|
|
729
|
-
})(templateObject_1$
|
|
748
|
+
})(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) {
|
|
730
749
|
var $size = _a.$size;
|
|
731
750
|
return tokens.semantic.size.avatar[$size];
|
|
732
751
|
}, function (_a) {
|
|
@@ -739,14 +758,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
739
758
|
},
|
|
740
759
|
displayName: "Avatar__AvatarImage",
|
|
741
760
|
componentId: "sc-ezn4ax-1"
|
|
742
|
-
})(templateObject_2$
|
|
761
|
+
})(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);
|
|
743
762
|
var AvatarInitials = styled.span.withConfig({
|
|
744
763
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
745
764
|
return !prop.startsWith('$');
|
|
746
765
|
},
|
|
747
766
|
displayName: "Avatar__AvatarInitials",
|
|
748
767
|
componentId: "sc-ezn4ax-2"
|
|
749
|
-
})(templateObject_3$
|
|
768
|
+
})(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"
|
|
750
769
|
// Helper function to get initials from name
|
|
751
770
|
])), tokens.base.fontFamily.body, tokens.base.fontWeight[3], function (_a) {
|
|
752
771
|
var $size = _a.$size;
|
|
@@ -809,7 +828,7 @@ var Avatar = function Avatar(_a) {
|
|
|
809
828
|
"aria-hidden": "true"
|
|
810
829
|
}, initials));
|
|
811
830
|
};
|
|
812
|
-
var templateObject_1$
|
|
831
|
+
var templateObject_1$l, templateObject_2$9, templateObject_3$7;
|
|
813
832
|
|
|
814
833
|
React.createElement;
|
|
815
834
|
var StyledBox = styled.div.withConfig({
|
|
@@ -821,19 +840,19 @@ var StyledBox = styled.div.withConfig({
|
|
|
821
840
|
})(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"
|
|
822
841
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
823
842
|
])), function (props) {
|
|
824
|
-
return props.$display && css(templateObject_1$
|
|
843
|
+
return props.$display && css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
825
844
|
}, function (props) {
|
|
826
|
-
return props.$flexDirection && css(templateObject_2$
|
|
845
|
+
return props.$flexDirection && css(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
827
846
|
}, function (props) {
|
|
828
|
-
return props.$justifyContent && css(templateObject_3$
|
|
847
|
+
return props.$justifyContent && css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
829
848
|
}, function (props) {
|
|
830
|
-
return props.$alignItems && css(templateObject_4$
|
|
849
|
+
return props.$alignItems && css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
831
850
|
}, function (props) {
|
|
832
|
-
return props.$flexWrap && css(templateObject_5$
|
|
851
|
+
return props.$flexWrap && css(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
833
852
|
}, function (props) {
|
|
834
|
-
return props.$gap && css(templateObject_6$
|
|
853
|
+
return props.$gap && css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokens.semantic.spacing.layout[props.$gap]);
|
|
835
854
|
}, function (props) {
|
|
836
|
-
return props.$m && css(templateObject_7$
|
|
855
|
+
return props.$m && css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokens.semantic.spacing.layout[props.$m]);
|
|
837
856
|
}, function (props) {
|
|
838
857
|
return props.$mt && css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokens.semantic.spacing.layout[props.$mt]);
|
|
839
858
|
}, function (props) {
|
|
@@ -1011,7 +1030,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1011
1030
|
}, rest), children);
|
|
1012
1031
|
};
|
|
1013
1032
|
var Box = BoxTransform;
|
|
1014
|
-
var templateObject_1$
|
|
1033
|
+
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;
|
|
1015
1034
|
|
|
1016
1035
|
var add = {
|
|
1017
1036
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1113,7 +1132,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1113
1132
|
},
|
|
1114
1133
|
displayName: "Icon__IconStyled",
|
|
1115
1134
|
componentId: "sc-1105czq-0"
|
|
1116
|
-
})(templateObject_1$
|
|
1135
|
+
})(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) {
|
|
1117
1136
|
var $size = _a.$size;
|
|
1118
1137
|
return tokens.semantic.size.icon[$size];
|
|
1119
1138
|
}, function (_a) {
|
|
@@ -1177,7 +1196,7 @@ var Icon = function Icon(_a) {
|
|
|
1177
1196
|
d: iconData.path
|
|
1178
1197
|
})));
|
|
1179
1198
|
};
|
|
1180
|
-
var templateObject_1$
|
|
1199
|
+
var templateObject_1$j;
|
|
1181
1200
|
|
|
1182
1201
|
React.createElement;
|
|
1183
1202
|
var button = tokens.component.button,
|
|
@@ -1209,14 +1228,14 @@ var StyledButton = styled.button.withConfig({
|
|
|
1209
1228
|
},
|
|
1210
1229
|
displayName: "Button__StyledButton",
|
|
1211
1230
|
componentId: "sc-1eiuum9-0"
|
|
1212
|
-
})(templateObject_1$
|
|
1231
|
+
})(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);
|
|
1213
1232
|
var StyledLink = styled.a.withConfig({
|
|
1214
1233
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1215
1234
|
return !prop.startsWith('$');
|
|
1216
1235
|
},
|
|
1217
1236
|
displayName: "Button__StyledLink",
|
|
1218
1237
|
componentId: "sc-1eiuum9-1"
|
|
1219
|
-
})(templateObject_2$
|
|
1238
|
+
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1220
1239
|
// Helper function to get icon size based on button size
|
|
1221
1240
|
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1222
1241
|
// Helper function to get icon size based on button size
|
|
@@ -1309,7 +1328,7 @@ var Button = function Button(_a) {
|
|
|
1309
1328
|
"data-testid": dataTestId
|
|
1310
1329
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1311
1330
|
};
|
|
1312
|
-
var templateObject_1$
|
|
1331
|
+
var templateObject_1$i, templateObject_2$7;
|
|
1313
1332
|
|
|
1314
1333
|
React.createElement;
|
|
1315
1334
|
var chip = tokens.component.chip;
|
|
@@ -1366,7 +1385,7 @@ var BaseChip = styled.span.withConfig({
|
|
|
1366
1385
|
},
|
|
1367
1386
|
displayName: "Chip__BaseChip",
|
|
1368
1387
|
componentId: "sc-fvu2t0-0"
|
|
1369
|
-
})(templateObject_1$
|
|
1388
|
+
})(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"
|
|
1370
1389
|
// Wrapper component that applies styles via CSS custom properties
|
|
1371
1390
|
])), chip["default"].borderRadius, tokens.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1372
1391
|
// Wrapper component that applies styles via CSS custom properties
|
|
@@ -1461,7 +1480,7 @@ var LegacyChip = function LegacyChip(_a) {
|
|
|
1461
1480
|
variant: newVariant
|
|
1462
1481
|
}, title);
|
|
1463
1482
|
};
|
|
1464
|
-
var templateObject_1$
|
|
1483
|
+
var templateObject_1$h;
|
|
1465
1484
|
|
|
1466
1485
|
// Breakpoints using base tokens
|
|
1467
1486
|
var breakpoints$1 = {
|
|
@@ -1487,32 +1506,32 @@ var spacing$3 = tokens.semantic.spacing;
|
|
|
1487
1506
|
var StyledContainer = styled.div.withConfig({
|
|
1488
1507
|
displayName: "Container__StyledContainer",
|
|
1489
1508
|
componentId: "sc-17dbj6n-0"
|
|
1490
|
-
})(templateObject_1$
|
|
1509
|
+
})(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']);
|
|
1491
1510
|
var Container = function Container(_a) {
|
|
1492
1511
|
var children = _a.children,
|
|
1493
1512
|
props = __rest(_a, ["children"]);
|
|
1494
1513
|
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
1495
1514
|
};
|
|
1496
|
-
var templateObject_1$
|
|
1515
|
+
var templateObject_1$g;
|
|
1497
1516
|
|
|
1498
1517
|
React.createElement;
|
|
1499
1518
|
var base = tokens.base;
|
|
1500
1519
|
var PictureWrapper = styled.div.withConfig({
|
|
1501
1520
|
displayName: "Picture__PictureWrapper",
|
|
1502
1521
|
componentId: "sc-11d9tei-0"
|
|
1503
|
-
})(templateObject_1$
|
|
1522
|
+
})(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);
|
|
1504
1523
|
var ImageLink = styled.a.withConfig({
|
|
1505
1524
|
displayName: "Picture__ImageLink",
|
|
1506
1525
|
componentId: "sc-11d9tei-1"
|
|
1507
|
-
})(templateObject_2$
|
|
1526
|
+
})(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);
|
|
1508
1527
|
var ImageButton = styled.button.withConfig({
|
|
1509
1528
|
displayName: "Picture__ImageButton",
|
|
1510
1529
|
componentId: "sc-11d9tei-2"
|
|
1511
|
-
})(templateObject_3$
|
|
1530
|
+
})(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);
|
|
1512
1531
|
var StyledImage = styled.img.withConfig({
|
|
1513
1532
|
displayName: "Picture__StyledImage",
|
|
1514
1533
|
componentId: "sc-11d9tei-3"
|
|
1515
|
-
})(templateObject_4$
|
|
1534
|
+
})(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]);
|
|
1516
1535
|
var Picture = function Picture(_a) {
|
|
1517
1536
|
var title = _a.title,
|
|
1518
1537
|
src = _a.src,
|
|
@@ -1539,7 +1558,7 @@ var Picture = function Picture(_a) {
|
|
|
1539
1558
|
"aria-label": "Read more about ".concat(title)
|
|
1540
1559
|
}, image) : image);
|
|
1541
1560
|
};
|
|
1542
|
-
var templateObject_1$
|
|
1561
|
+
var templateObject_1$f, templateObject_2$6, templateObject_3$5, templateObject_4$4;
|
|
1543
1562
|
|
|
1544
1563
|
React.createElement;
|
|
1545
1564
|
var _a$5 = tokens.semantic,
|
|
@@ -1548,7 +1567,7 @@ var _a$5 = tokens.semantic,
|
|
|
1548
1567
|
var TimeStyled = styled.time.withConfig({
|
|
1549
1568
|
displayName: "DateFormatter__TimeStyled",
|
|
1550
1569
|
componentId: "sc-5464cc-0"
|
|
1551
|
-
})(templateObject_1$
|
|
1570
|
+
})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), typography$2.label, color$3.text.subdued);
|
|
1552
1571
|
var DateFormatter = function DateFormatter(_a) {
|
|
1553
1572
|
var dateString = _a.dateString,
|
|
1554
1573
|
_b = _a.formatString,
|
|
@@ -1560,7 +1579,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
1560
1579
|
"data-testid": dataTestId
|
|
1561
1580
|
}, format(date, formatString));
|
|
1562
1581
|
};
|
|
1563
|
-
var templateObject_1$
|
|
1582
|
+
var templateObject_1$e;
|
|
1564
1583
|
|
|
1565
1584
|
React.createElement;
|
|
1566
1585
|
var motion = tokens.semantic.motion,
|
|
@@ -1571,7 +1590,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
1571
1590
|
},
|
|
1572
1591
|
displayName: "IconButton__IconButtonStyled",
|
|
1573
1592
|
componentId: "sc-k8b14t-0"
|
|
1574
|
-
})(templateObject_1$
|
|
1593
|
+
})(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) {
|
|
1575
1594
|
var $variant = _a.$variant;
|
|
1576
1595
|
switch ($variant) {
|
|
1577
1596
|
case 'primary':
|
|
@@ -1682,7 +1701,71 @@ var IconButton = function IconButton(_a) {
|
|
|
1682
1701
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
1683
1702
|
}));
|
|
1684
1703
|
};
|
|
1685
|
-
var templateObject_1$
|
|
1704
|
+
var templateObject_1$d;
|
|
1705
|
+
|
|
1706
|
+
React.createElement;
|
|
1707
|
+
var ProgressBarContainer = styled.div.withConfig({
|
|
1708
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1709
|
+
return !prop.startsWith('$');
|
|
1710
|
+
},
|
|
1711
|
+
displayName: "ProgressBar__ProgressBarContainer",
|
|
1712
|
+
componentId: "sc-1nco33q-0"
|
|
1713
|
+
})(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) {
|
|
1714
|
+
return props.$variant === 'horizontal' && 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);
|
|
1715
|
+
}, function (props) {
|
|
1716
|
+
return props.$variant === 'vertical' && 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);
|
|
1717
|
+
});
|
|
1718
|
+
var ProgressBarFill = styled.div.withConfig({
|
|
1719
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1720
|
+
return !prop.startsWith('$');
|
|
1721
|
+
},
|
|
1722
|
+
displayName: "ProgressBar__ProgressBarFill",
|
|
1723
|
+
componentId: "sc-1nco33q-1"
|
|
1724
|
+
})(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) {
|
|
1725
|
+
var backgroundColor;
|
|
1726
|
+
switch (props.$color) {
|
|
1727
|
+
case 'success':
|
|
1728
|
+
backgroundColor = tokens.semantic.color.background.success;
|
|
1729
|
+
break;
|
|
1730
|
+
case 'error':
|
|
1731
|
+
backgroundColor = tokens.semantic.color.background.error;
|
|
1732
|
+
break;
|
|
1733
|
+
case 'default':
|
|
1734
|
+
default:
|
|
1735
|
+
backgroundColor = tokens.semantic.color.background.interactive;
|
|
1736
|
+
break;
|
|
1737
|
+
}
|
|
1738
|
+
return css(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
1739
|
+
}, function (props) {
|
|
1740
|
+
return props.$variant === 'horizontal' && css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
1741
|
+
}, function (props) {
|
|
1742
|
+
return props.$variant === 'vertical' && 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)));
|
|
1743
|
+
});
|
|
1744
|
+
var ProgressBar = function ProgressBar(_a) {
|
|
1745
|
+
var value = _a.value,
|
|
1746
|
+
_b = _a.variant,
|
|
1747
|
+
variant = _b === void 0 ? 'horizontal' : _b,
|
|
1748
|
+
_c = _a.color,
|
|
1749
|
+
color = _c === void 0 ? 'default' : _c,
|
|
1750
|
+
height = _a.height,
|
|
1751
|
+
width = _a.width,
|
|
1752
|
+
dataTestId = _a["data-testid"];
|
|
1753
|
+
return /*#__PURE__*/React.createElement(ProgressBarContainer, {
|
|
1754
|
+
$variant: variant,
|
|
1755
|
+
$height: height,
|
|
1756
|
+
$width: width,
|
|
1757
|
+
"data-testid": dataTestId,
|
|
1758
|
+
role: "progressbar",
|
|
1759
|
+
"aria-valuenow": Math.min(100, Math.max(0, value)),
|
|
1760
|
+
"aria-valuemin": 0,
|
|
1761
|
+
"aria-valuemax": 100
|
|
1762
|
+
}, /*#__PURE__*/React.createElement(ProgressBarFill, {
|
|
1763
|
+
$value: value,
|
|
1764
|
+
$variant: variant,
|
|
1765
|
+
$color: color
|
|
1766
|
+
}));
|
|
1767
|
+
};
|
|
1768
|
+
var templateObject_1$c, templateObject_2$5, templateObject_3$4, templateObject_4$3, templateObject_5$3, templateObject_6$1, templateObject_7$1;
|
|
1686
1769
|
|
|
1687
1770
|
React.createElement;
|
|
1688
1771
|
var StyledSeparator = styled.div.withConfig({
|
|
@@ -2726,5 +2809,5 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
|
|
|
2726
2809
|
};
|
|
2727
2810
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
|
|
2728
2811
|
|
|
2729
|
-
export { ArtCard, Avatar, Box, Breadcrumbs, Button, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Dropdown, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ReleaseCard, ResponsiveGrid, SectionSeparator, Stack, Typography, iconsData, tokens };
|
|
2812
|
+
export { ArtCard, Avatar, Box, Breadcrumbs, Button, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Dropdown, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ReleaseCard, ResponsiveGrid, SectionSeparator, Stack, Typography, iconsData, tokens };
|
|
2730
2813
|
//# sourceMappingURL=index.esm.js.map
|