@typeolymp/ui-components 2.1.10 → 2.1.12

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.
Files changed (8) hide show
  1. package/build/components/atoms/Button/styles.d.ts +0 -1
  2. package/build/components/molecules/IconButton/styles.d.ts +0 -1
  3. package/build/index.es.js +46 -87
  4. package/build/index.es.js.map +1 -1
  5. package/build/index.js +46 -87
  6. package/build/index.js.map +1 -1
  7. package/build/utils/theme/types.d.ts +0 -2
  8. package/package.json +1 -1
package/build/components/atoms/Button/styles.d.ts CHANGED
@@ -1,4 +1,3 @@
1
1
  export declare const StyledButton: any;
2
2
  export declare const DisabledButton: any;
3
- export declare const GhostButton: any;
4
3
  export declare const LoaderWrapper: any;
package/build/components/molecules/IconButton/styles.d.ts CHANGED
@@ -1,2 +1 @@
1
1
  export declare const StyledIconButton: any;
2
- export declare const GhostIconButton: any;
package/build/index.es.js CHANGED
@@ -68,15 +68,11 @@ var theme = {
68
68
  button: {
69
69
  small: {
70
70
  height: "40px",
71
- heightActive: "38px",
72
71
  fontSize: "16px",
73
- marginTopActive: "2px",
74
72
  },
75
73
  medium: {
76
74
  height: "50px",
77
- heightActive: "47.5px",
78
75
  fontSize: "20px",
79
- marginTopActive: "2.5px",
80
76
  },
81
77
  },
82
78
  heading: {
@@ -3447,7 +3443,7 @@ var Loader = /** @class */ (function (_super) {
3447
3443
  var _this = _super !== null && _super.apply(this, arguments) || this;
3448
3444
  _this.style = function (i) {
3449
3445
  var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
3450
- return react_1.css(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "], ["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), beat, 0.7 / speedMultiplier, i % 2 ? "0s" : 0.35 / speedMultiplier + "s");
3446
+ return react_1.css(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "], ["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), beat, 0.7 / speedMultiplier, i % 2 ? "0s" : 0.35 / speedMultiplier + "s");
3451
3447
  };
3452
3448
  return _this;
3453
3449
  }
@@ -3462,7 +3458,7 @@ var Loader = /** @class */ (function (_super) {
3462
3458
  return Loader;
3463
3459
  }(React$2.PureComponent));
3464
3460
  var _default$1 = BeatLoader.default = Loader;
3465
- var templateObject_1$W, templateObject_2$E;
3461
+ var templateObject_1$W, templateObject_2$D;
3466
3462
 
3467
3463
  var Wrapper$a = styled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n\n :hover {\n cursor: ", ";\n fill: ", ";\n }\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n\n :hover {\n cursor: ", ";\n fill: ", ";\n }\n }\n"])), function (_a) {
3468
3464
  var size = _a.size;
@@ -3575,7 +3571,7 @@ var icons = {
3575
3571
  };
3576
3572
  var Icon = function (props) { return (jsx$1(Wrapper$a, __assign$2({}, props, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
3577
3573
 
3578
- var StyledButton = styled.button(templateObject_1$U || (templateObject_1$U = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n svg {\n pointer-events: none;\n }\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n svg {\n pointer-events: none;\n }\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
3574
+ var StyledButton = styled.button(templateObject_1$U || (templateObject_1$U = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n svg {\n pointer-events: none;\n }\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: ", ";\n background-color: ", ";\n }\n\n :active {\n position: relative;\n top: 3px;\n margin-bottom: 3px;\n box-shadow: none;\n height: ", "\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n svg {\n pointer-events: none;\n }\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: ", ";\n background-color: ", ";\n }\n\n :active {\n position: relative;\n top: 3px;\n margin-bottom: 3px;\n box-shadow: none;\n height: ", "\n"])), function (_a) {
3579
3575
  var fluid = _a.fluid;
3580
3576
  return (fluid ? "100%" : "fit-content");
3581
3577
  }, function (_a) {
@@ -3605,11 +3601,11 @@ var StyledButton = styled.button(templateObject_1$U || (templateObject_1$U = __m
3605
3601
  case "red":
3606
3602
  return "inset 0 -3px 0 ".concat(theme.colors.red.dark);
3607
3603
  case "white":
3608
- return "0 3px 0 ".concat(theme.colors.darkGray.light);
3604
+ return "inset 0 -3px 0 #e4e4e4";
3609
3605
  }
3610
3606
  }, function (_a) {
3611
3607
  var color = _a.color;
3612
- return color === "white" ? "2px solid ".concat(theme.colors.lightGray.darker) : "none";
3608
+ return color === "white" ? "1px solid #e4e4e4" : "none";
3613
3609
  }, function (_a) {
3614
3610
  var color = _a.color;
3615
3611
  return color === "white"
@@ -3619,44 +3615,29 @@ var StyledButton = styled.button(templateObject_1$U || (templateObject_1$U = __m
3619
3615
  var size = _a.size;
3620
3616
  return !size ? theme.button.medium.fontSize : theme.button[size].fontSize;
3621
3617
  }, function (_a) {
3622
- var size = _a.size;
3623
- return !size
3624
- ? theme.button.medium.marginTopActive
3625
- : theme.button[size].marginTopActive;
3618
+ var color = _a.color;
3619
+ return (color !== "white" ? 0.85 : 1);
3620
+ }, function (_a) {
3621
+ var color = _a.color;
3622
+ return color === "white" ? theme.colors.lightGray.base : "";
3626
3623
  }, function (_a) {
3627
3624
  var size = _a.size;
3628
3625
  return !size
3629
- ? theme.button.medium.heightActive
3630
- : theme.button[size].heightActive;
3626
+ ? "calc(".concat(theme.button.medium.height, " - 3px)")
3627
+ : "calc(".concat(theme.button[size].height, " - 3px)");
3631
3628
  });
3632
- var DisabledButton = styled(StyledButton)(templateObject_2$D || (templateObject_2$D = __makeTemplateObject$1(["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
3629
+ var DisabledButton = styled(StyledButton)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject$1(["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
3633
3630
  var size = _a.size;
3634
3631
  return !size ? theme.button.medium.height : theme.button[size].height;
3635
3632
  });
3636
- var GhostButton = styled(StyledButton)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject$1(["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"], ["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"])), function (_a) {
3637
- var size = _a.size;
3638
- return !size
3639
- ? "calc(".concat(theme.button.medium.height, " - 2.5px)")
3640
- : "calc(".concat(theme.button[size].height, " - 2.5px)");
3641
- }, function (_a) {
3642
- var size = _a.size;
3643
- return !size
3644
- ? "calc(".concat(theme.button.medium.height, " - 2.5px)")
3645
- : "calc(".concat(theme.button[size].height, " - 2.5px)");
3646
- }, function (_a) {
3647
- var size = _a.size;
3648
- return !size
3649
- ? theme.button.medium.marginTopActive
3650
- : theme.button[size].marginTopActive;
3651
- });
3652
- var LoaderWrapper = styled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject$1(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
3633
+ var LoaderWrapper = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject$1(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
3653
3634
  var width = _a.width;
3654
3635
  return "".concat(width, "px");
3655
3636
  }, function (_a) {
3656
3637
  var size = _a.size;
3657
3638
  return (size === "small" ? "3px" : "");
3658
3639
  });
3659
- var templateObject_1$U, templateObject_2$D, templateObject_3$g, templateObject_4$8;
3640
+ var templateObject_1$U, templateObject_2$C, templateObject_3$g;
3660
3641
 
3661
3642
  var StyledSpacer = styled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject$1(["\n min-width: ", ";\n min-height: ", ";\n"], ["\n min-width: ", ";\n min-height: ", ";\n"])), function (_a) {
3662
3643
  var horizontal = _a.horizontal;
@@ -3708,9 +3689,8 @@ var Button = forwardRef(function (_a, ref) {
3708
3689
  if (disabled) {
3709
3690
  return (jsx$1(DisabledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef }, { children: jsxs(Fragment$1, { children: [icon && renderIcon({ color: "lightGray" }), jsx$1("span", { children: label })] }) })));
3710
3691
  }
3711
- if (color === "white")
3712
- return (jsx$1(GhostButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? (jsx$1(Loader, { dark: true })) : (jsxs(Fragment$1, { children: [icon && renderIcon({ color: "gray" }), jsx$1("span", { children: label })] })) })));
3713
- return (jsx$1(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? (jsx$1(Loader, {})) : (jsxs(Fragment$1, { children: [icon && renderIcon({ color: "white" }), jsx$1("span", { children: label })] })) })));
3692
+ return (jsx$1(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? (jsx$1(Loader, { dark: color === "white" })) : (jsxs(Fragment$1, { children: [icon &&
3693
+ renderIcon({ color: color === "white" ? "gray" : "white" }), jsx$1("span", { children: label })] })) })));
3714
3694
  });
3715
3695
 
3716
3696
  var StyledCheckbox = styled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject$1(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
@@ -4180,7 +4160,7 @@ var StyledParagraph = styled.p(templateObject_1$O || (templateObject_1$O = __mak
4180
4160
  var templateObject_1$O;
4181
4161
 
4182
4162
  var Container$p = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
4183
- var InputIconWrapper = styled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"])), function (_a) {
4163
+ var InputIconWrapper = styled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"])), function (_a) {
4184
4164
  var size = _a.size;
4185
4165
  switch (size) {
4186
4166
  case "small":
@@ -4251,7 +4231,7 @@ var Helper = styled(StyledParagraph)(templateObject_6$3 || (templateObject_6$3 =
4251
4231
  var isOk = _a.isOk;
4252
4232
  return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
4253
4233
  }, fadeIn);
4254
- var templateObject_1$N, templateObject_2$C, templateObject_3$f, templateObject_4$7, templateObject_5$3, templateObject_6$3;
4234
+ var templateObject_1$N, templateObject_2$B, templateObject_3$f, templateObject_4$7, templateObject_5$3, templateObject_6$3;
4255
4235
 
4256
4236
  var expressions = {};
4257
4237
 
@@ -8005,7 +7985,7 @@ var Wrapper$6 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTem
8005
7985
  var disabled = _a.disabled;
8006
7986
  return (disabled ? "49.5px" : "");
8007
7987
  });
8008
- var StyledInputNumber = styled.input(templateObject_2$B || (templateObject_2$B = __makeTemplateObject$1(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
7988
+ var StyledInputNumber = styled.input(templateObject_2$A || (templateObject_2$A = __makeTemplateObject$1(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
8009
7989
  var disabled = _a.disabled;
8010
7990
  return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
8011
7991
  }, function (_a) {
@@ -8018,7 +7998,7 @@ var StyledInputNumber = styled.input(templateObject_2$B || (templateObject_2$B =
8018
7998
  var disabled = _a.disabled;
8019
7999
  return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
8020
8000
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
8021
- var templateObject_1$L, templateObject_2$B;
8001
+ var templateObject_1$L, templateObject_2$A;
8022
8002
 
8023
8003
  var Number$1 = function (props) {
8024
8004
  var inputRef = useRef(null);
@@ -8165,7 +8145,7 @@ var Wrapper$5 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTem
8165
8145
  var disabled = _a.disabled;
8166
8146
  return (disabled ? "not-allowed" : "pointer");
8167
8147
  });
8168
- var StyledSelect = styled.select(templateObject_2$A || (templateObject_2$A = __makeTemplateObject$1(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 13px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 13px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
8148
+ var StyledSelect = styled.select(templateObject_2$z || (templateObject_2$z = __makeTemplateObject$1(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 13px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 13px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
8169
8149
  var disabled = _a.disabled;
8170
8150
  return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
8171
8151
  }, function (_a) {
@@ -8178,7 +8158,7 @@ var StyledSelect = styled.select(templateObject_2$A || (templateObject_2$A = __m
8178
8158
  var isChanged = _a.isChanged;
8179
8159
  return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
8180
8160
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
8181
- var templateObject_1$I, templateObject_2$A;
8161
+ var templateObject_1$I, templateObject_2$z;
8182
8162
 
8183
8163
  var Select = function (props) {
8184
8164
  var _a;
@@ -8400,7 +8380,7 @@ var Container$m = styled.div(templateObject_1$C || (templateObject_1$C = __makeT
8400
8380
  return theme.colors.blue.base;
8401
8381
  }
8402
8382
  });
8403
- var Action = styled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject$1(["\n margin-left: 15px;\n cursor: pointer;\n\n :hover p {\n color: ", ";\n }\n"], ["\n margin-left: 15px;\n cursor: pointer;\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
8383
+ var Action = styled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject$1(["\n margin-left: 15px;\n cursor: pointer;\n\n :hover p {\n color: ", ";\n }\n"], ["\n margin-left: 15px;\n cursor: pointer;\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
8404
8384
  var type = _a.type;
8405
8385
  switch (type) {
8406
8386
  default:
@@ -8412,7 +8392,7 @@ var Action = styled.div(templateObject_2$z || (templateObject_2$z = __makeTempla
8412
8392
  return theme.colors.blue.dark;
8413
8393
  }
8414
8394
  });
8415
- var templateObject_1$C, templateObject_2$z;
8395
+ var templateObject_1$C, templateObject_2$y;
8416
8396
 
8417
8397
  var Alert = function (props) {
8418
8398
  var _a = useState(true), isOpen = _a[0], setIsOpen = _a[1];
@@ -8447,12 +8427,12 @@ var StyledCard = styled.div(templateObject_1$B || (templateObject_1$B = __makeTe
8447
8427
  }, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
8448
8428
  : "";
8449
8429
  });
8450
- var Ellipse = styled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject$1(["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
8430
+ var Ellipse = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject$1(["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
8451
8431
  var color = _a.color;
8452
8432
  return color ? theme.colors[color].light : "";
8453
8433
  });
8454
8434
  var Content = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject$1(["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"], ["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"])));
8455
- var templateObject_1$B, templateObject_2$y, templateObject_3$e;
8435
+ var templateObject_1$B, templateObject_2$x, templateObject_3$e;
8456
8436
 
8457
8437
  var Card = function (props) { return (jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsx$1(Ellipse, { color: props.ellipse }), jsx$1(Content, { children: props.children })] }))); };
8458
8438
 
@@ -14702,13 +14682,13 @@ htmlReactParser.ProcessingInstruction;
14702
14682
  htmlReactParser.Text;
14703
14683
 
14704
14684
  var Fieldset$1 = styled.fieldset(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
14705
- var CheckboxContainer = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
14685
+ var CheckboxContainer = styled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
14706
14686
  var CheckboxWrapper = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
14707
14687
  var Label$b = styled(StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"])), function (_a) {
14708
14688
  var weight = _a.weight;
14709
14689
  return weight || 500;
14710
14690
  }, theme.colors.darkGray.base, theme.colors.blue.base);
14711
- var templateObject_1$A, templateObject_2$x, templateObject_3$d, templateObject_4$6;
14691
+ var templateObject_1$A, templateObject_2$w, templateObject_3$d, templateObject_4$6;
14712
14692
 
14713
14693
  var Checkboxes = function (props) {
14714
14694
  var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
@@ -14732,11 +14712,11 @@ var Checkboxes = function (props) {
14732
14712
  };
14733
14713
 
14734
14714
  var Container$l = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"], ["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"])), theme.colors.lightGray.light);
14735
- var Item = styled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject$1(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
14715
+ var Item = styled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject$1(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
14736
14716
  var isOpen = _a.isOpen;
14737
14717
  return (isOpen ? "" : "none");
14738
14718
  }, theme.colors.lightGray.dark);
14739
- var templateObject_1$z, templateObject_2$w;
14719
+ var templateObject_1$z, templateObject_2$v;
14740
14720
 
14741
14721
  var Collapse = function (props) {
14742
14722
  var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
@@ -14755,11 +14735,11 @@ var Collapse = function (props) {
14755
14735
  };
14756
14736
 
14757
14737
  var Wrapper$3 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
14758
- var Value = styled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject$1(["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"], ["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"])), function (_a) {
14738
+ var Value = styled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"], ["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"])), function (_a) {
14759
14739
  var contrast = _a.contrast;
14760
14740
  return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
14761
14741
  }, theme.colors.darkGray.base);
14762
- var templateObject_1$y, templateObject_2$v;
14742
+ var templateObject_1$y, templateObject_2$u;
14763
14743
 
14764
14744
  var Countdown = function (_a) {
14765
14745
  var till = _a.till, contrast = _a.contrast;
@@ -14787,8 +14767,8 @@ var Countdown = function (_a) {
14787
14767
  };
14788
14768
 
14789
14769
  var Container$k = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n width: fill-available;\n padding: 15px;\n border: 1px solid;\n border-radius: 6px;\n border-color: ", ";\n background-color: ", ";\n position: relative;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 50px;\n margin-bottom: 15px;\n\n h6 {\n font-size: 14px;\n\n :hover {\n color: ", ";\n cursor: pointer;\n }\n }\n }\n"], ["\n width: fill-available;\n padding: 15px;\n border: 1px solid;\n border-radius: 6px;\n border-color: ", ";\n background-color: ", ";\n position: relative;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 50px;\n margin-bottom: 15px;\n\n h6 {\n font-size: 14px;\n\n :hover {\n color: ", ";\n cursor: pointer;\n }\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.light, theme.colors.blue.base);
14790
- var Data = styled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"], ["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"])));
14791
- var templateObject_1$x, templateObject_2$u;
14770
+ var Data = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"], ["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"])));
14771
+ var templateObject_1$x, templateObject_2$t;
14792
14772
 
14793
14773
  var DataSummary = function (_a) {
14794
14774
  var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
@@ -14798,8 +14778,8 @@ var DataSummary = function (_a) {
14798
14778
  };
14799
14779
 
14800
14780
  var Container$j = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
14801
- var Label$a = styled(StyledParagraph)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
14802
- var templateObject_1$w, templateObject_2$t;
14781
+ var Label$a = styled(StyledParagraph)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
14782
+ var templateObject_1$w, templateObject_2$s;
14803
14783
 
14804
14784
  var DateInputField = function (props) {
14805
14785
  var onChange = function (value) {
@@ -14824,7 +14804,7 @@ var generateRandomString = function (length) {
14824
14804
  };
14825
14805
 
14826
14806
  var ButtonWrapper$1 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n > button {\n flex-direction: row-reverse;\n padding-right: 14px;\n }\n"], ["\n > button {\n flex-direction: row-reverse;\n padding-right: 14px;\n }\n"])));
14827
- var Container$i = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n width: max-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 6px;\n box-shadow: 0 4px 0 ", ";\n pointer-events: ", ";\n"], ["\n width: max-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 6px;\n box-shadow: 0 4px 0 ", ";\n pointer-events: ", ";\n"])), function (_a) {
14807
+ var Container$i = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n width: max-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 6px;\n box-shadow: 0 4px 0 ", ";\n pointer-events: ", ";\n"], ["\n width: max-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 6px;\n box-shadow: 0 4px 0 ", ";\n pointer-events: ", ";\n"])), function (_a) {
14828
14808
  var isVisible = _a.isVisible;
14829
14809
  return (isVisible ? "100%" : "0%");
14830
14810
  }, function (_a) {
@@ -14838,7 +14818,7 @@ var Container$i = styled.div(templateObject_2$s || (templateObject_2$s = __makeT
14838
14818
  return (isVisible ? "all" : "none");
14839
14819
  });
14840
14820
  var MenuItem = styled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject$1(["\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n p {\n margin-top: 2px;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n p {\n margin-top: 2px;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
14841
- var templateObject_1$v, templateObject_2$s, templateObject_3$c;
14821
+ var templateObject_1$v, templateObject_2$r, templateObject_3$c;
14842
14822
 
14843
14823
  var DropdownButton = function (props) {
14844
14824
  return (jsx$1(Fragment$1, { children: jsx$1("div", { children: jsx$1(Dropdown, __assign$2({}, props, { yOffset: props.yOffset || 10, trigger: ["click"] }, { children: jsx$1(ButtonWrapper$1, { children: jsx$1(Button, { label: props.label, color: props.color, size: props.size, disabled: props.disabled, icon: "chevronDown" }) }) })) }) }));
@@ -17427,7 +17407,7 @@ function reducer$1(state, action) {
17427
17407
  function noop$3() {}
17428
17408
 
17429
17409
  var Container$h = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"])));
17430
- var DropZone = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (_a) {
17410
+ var DropZone = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (_a) {
17431
17411
  _a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
17432
17412
  // if (isDragActive) return theme.colors.blue.base;
17433
17413
  if (isDragAccept)
@@ -17447,7 +17427,7 @@ var DropZone = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemp
17447
17427
  return theme.colors.lightGray.base;
17448
17428
  });
17449
17429
  var FileList = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
17450
- var templateObject_1$u, templateObject_2$r, templateObject_3$b;
17430
+ var templateObject_1$u, templateObject_2$q, templateObject_3$b;
17451
17431
 
17452
17432
  var FileUpload = function (_a) {
17453
17433
  var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
@@ -17467,10 +17447,7 @@ var FileUpload = function (_a) {
17467
17447
  }), { children: [jsx$1("input", __assign$2({}, getInputProps())), jsx$1(Icon, { type: "fileArrow", size: "large" }), jsx$1(Spacer, { vertical: 15 }), !isDragActive && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Drag file(s) here..."] })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Paragraph, { children: translations[locale]["or"] }), jsx$1(Spacer, { vertical: 10 }), jsx$1(Button, { label: translations[locale]["Select file(s)"], size: "small" })] })), isDragActive && !isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Upload file(s)..."] }))), isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["File type not allowed"] })))] })), files && files.length > 0 && (jsx$1(FileList, { children: files.map(function (file, index) { return (jsx$1(Alert, { type: "success", message: file.name }, "".concat(file.name, "-").concat(index))); }) }))] }) }));
17468
17448
  };
17469
17449
 
17470
- var StyledIconButton = styled(StyledButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"])), function (_a) {
17471
- var size = _a.size;
17472
- return (size === "small" ? "30px" : "40px");
17473
- }, function (_a) {
17450
+ var StyledIconButton = styled(StyledButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n }\n"])), function (_a) {
17474
17451
  var size = _a.size;
17475
17452
  return (size === "small" ? "30px" : "40px");
17476
17453
  }, function (_a) {
@@ -17480,37 +17457,19 @@ var StyledIconButton = styled(StyledButton)(templateObject_1$t || (templateObjec
17480
17457
  var size = _a.size;
17481
17458
  return (size === "small" ? "30px" : "40px");
17482
17459
  }, function (_a) {
17483
- var size = _a.size;
17484
- return (size === "small" ? "28px" : "38px");
17485
- }, function (_a) {
17486
- var size = _a.size;
17487
- return (size === "small" ? "28px" : "38px");
17488
- });
17489
- var GhostIconButton = styled(GhostButton)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"])), function (_a) {
17490
17460
  var size = _a.size;
17491
17461
  return (size === "small" ? "30px" : "40px");
17492
17462
  }, function (_a) {
17493
17463
  var size = _a.size;
17494
- return (size === "small" ? "30px" : "40px");
17464
+ return (size === "small" ? "27px" : "37px");
17495
17465
  }, function (_a) {
17496
17466
  var size = _a.size;
17497
- return (size === "small" ? "28px" : "38px");
17498
- }, function (_a) {
17499
- var size = _a.size;
17500
- return (size === "small" ? "28px" : "38px");
17501
- }, function (_a) {
17502
- var size = _a.size;
17503
- return (size === "small" ? "30px" : "40px");
17504
- }, function (_a) {
17505
- var size = _a.size;
17506
- return (size === "small" ? "30px" : "40px");
17467
+ return (size === "small" ? "27px" : "37px");
17507
17468
  });
17508
- var templateObject_1$t, templateObject_2$q;
17469
+ var templateObject_1$t;
17509
17470
 
17510
17471
  var IconButton = function (props) {
17511
- if (props.color === "white")
17512
- return (jsx$1(GhostIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "gray" }) })));
17513
- return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
17472
+ return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: props.color === "white" ? "gray" : "white" }) })));
17514
17473
  };
17515
17474
 
17516
17475
  var Container$g = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));