@trafilea/afrodita-components 5.0.0-beta.209 → 5.0.0-beta.210

package/build/index.d.ts

@@ -1168,8 +1168,11 @@ interface ProgressBarProps {
     fillColor: string;
     widthAuto?: boolean;
     percent?: number;
+    height?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
 }
-declare const ProgressBar: ({ description, fillColor, widthAuto, percent, }: ProgressBarProps) => JSX.Element;
+declare const ProgressBar: ({ description, fillColor, widthAuto, percent, height, backgroundColor, borderRadius, }: ProgressBarProps) => JSX.Element;
 
 interface IconButtonProps {
     children: React.ReactNode;

package/build/index.esm.js

@@ -11694,12 +11694,18 @@ var H2 = newStyled.h2(function (_a) {
         margin: '0.938rem 4.188rem',
     });
 });
-var Bar = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"], ["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: 0.5rem;\n  background-color: ", ";\n  width: ", ";\n  border-radius: 0.25rem;\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
+var Bar = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"], ["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  position: absolute;\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
+    var height = _a.height;
+    return height || '0.5rem';
+}, function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, function (_a) {
     var percent = _a.percent;
     return (percent ? getBarWithBasedOnPercent(percent) : '50%');
+}, function (_a) {
+    var borderRadius = _a.borderRadius;
+    return borderRadius || '0.25rem';
 }, function (_a) {
     var percent = _a.percent;
     return (percent ? '0' : '-50%');
@@ -11708,30 +11714,30 @@ var Bar = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemp
     return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
 });
 var Background = newStyled.div(function (_a) {
-    var backgroundColor = _a.backgroundColor;
+    var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
     return ({
-        height: '0.5rem',
+        height: height || '0.5rem',
         width: '100%',
         backgroundColor: backgroundColor,
-        borderRadius: '0.25rem',
+        borderRadius: borderRadius || '0.25rem',
         position: 'absolute',
     });
 });
 var Container$M = newStyled.div(function (_a) {
-    var widthAuto = _a.widthAuto;
+    var widthAuto = _a.widthAuto, description = _a.description;
     return ({
         width: widthAuto ? 'auto' : 'fit-content',
         position: 'relative',
-        overflow: 'hidden',
+        overflow: description ? 'hidden' : '',
     });
 });
 var getBarWithBasedOnPercent = function (percent) {
     return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
 };
 var ProgressBar = function (_a) {
-    var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
+    var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
     var theme = useTheme();
-    return (jsxs$1(Container$M, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
+    return (jsxs$1(Container$M, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && jsx$1(H2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
 };
 var templateObject_1$17;