@appquality/unguess-design-system 2.10.18 → 2.10.21

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 (3) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/build/index.js +88 -72
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,42 @@
1
+ # v2.10.21 (Thu May 12 2022)
2
+
3
+ #### ⚠️ Pushed to `master`
4
+
5
+ - Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
6
+ - fix(tables): fix borders for grouped tables + fix story for virtual scrolling tables" ([@marcbon](https://github.com/marcbon))
7
+
8
+ #### Authors: 2
9
+
10
+ - Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
11
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
12
+
13
+ ---
14
+
15
+ # v2.10.20 (Thu May 12 2022)
16
+
17
+ #### 🐛 Bug Fix
18
+
19
+ - fix(tables): restore borders + border-radius [#53](https://github.com/AppQuality/unguess-design-system/pull/53) ([@marcbon](https://github.com/marcbon))
20
+
21
+ #### Authors: 1
22
+
23
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
24
+
25
+ ---
26
+
27
+ # v2.10.19 (Thu May 12 2022)
28
+
29
+ #### ⚠️ Pushed to `master`
30
+
31
+ - Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
32
+ - fix(header-dropdown): fix z-index issues ([@cannarocks](https://github.com/cannarocks))
33
+
34
+ #### Authors: 1
35
+
36
+ - Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
37
+
38
+ ---
39
+
1
40
  # v2.10.18 (Thu May 12 2022)
2
41
 
3
42
  #### ⚠️ Pushed to `master`
package/build/index.js CHANGED
@@ -385,11 +385,11 @@ var ContentCard = styled__default["default"](reactNotifications.Well)(templateOb
385
385
  - To group related content
386
386
  */
387
387
  var Card = function (props) { return jsxRuntime.jsx(ContentCard, __assign({}, props)); };
388
- var ContainerCard = styled__default["default"](Card)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
388
+ var ContainerCard = styled__default["default"](Card)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), function (_a) {
389
389
  var theme = _a.theme;
390
390
  return theme.borderRadii.xl;
391
391
  });
392
- var templateObject_1$R, templateObject_2$k;
392
+ var templateObject_1$R, templateObject_2$l;
393
393
 
394
394
  /**
395
395
  * Tags let users categorize content using a keyword.
@@ -641,12 +641,12 @@ var CampaignCardSkeleton = function () {
641
641
  };
642
642
 
643
643
  var flexCenter = styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
644
- var flexColumnCenter = styled.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
645
- var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
644
+ var flexColumnCenter = styled.css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
645
+ var flexStart = styled.css(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: ", ";\n"])), function (_a) {
646
646
  var theme = _a.theme;
647
647
  return (theme.rtl ? "flex-end" : "flex-start");
648
648
  });
649
- var cardStyle = styled.css(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
649
+ var cardStyle = styled.css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &:hover {\n box-shadow: ", ";\n }\n\n cursor: pointer;\n"])), function (_a) {
650
650
  var theme = _a.theme;
651
651
  return theme.borderRadii.lg;
652
652
  }, function (_a) {
@@ -659,7 +659,7 @@ var cardStyle = styled.css(templateObject_4$a || (templateObject_4$a = __makeTem
659
659
  var theme = _a.theme;
660
660
  return theme.shadows.boxShadow(theme);
661
661
  });
662
- var templateObject_1$O, templateObject_2$j, templateObject_3$c, templateObject_4$a;
662
+ var templateObject_1$O, templateObject_2$k, templateObject_3$d, templateObject_4$b;
663
663
 
664
664
  var getStatusIcon = function (status) {
665
665
  switch (status) {
@@ -684,11 +684,11 @@ var getTypeDataIcon = function (type) {
684
684
  }
685
685
  };
686
686
  var Wrapper$1 = styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), cardStyle);
687
- var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"], ["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"])), function (_a) {
687
+ var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"], ["\n color: ", ";\n max-width: 75%;\n cursor: pointer;\n"])), function (_a) {
688
688
  var theme = _a.theme;
689
689
  return theme.palette.grey["700"];
690
690
  });
691
- var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"])), function (_a) {
691
+ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n"])), function (_a) {
692
692
  var theme = _a.theme;
693
693
  return theme.space.base * 6;
694
694
  }, function (_a) {
@@ -701,14 +701,14 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$b || (temp
701
701
  var theme = _a.theme;
702
702
  return theme.palette.white;
703
703
  });
704
- var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
704
+ var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
705
705
  var theme = _a.theme;
706
706
  return theme.fontSizes.sm;
707
707
  }, function (_a) {
708
708
  var theme = _a.theme;
709
709
  return theme.palette.grey["500"];
710
710
  });
711
- var StyledTitleLabel$1 = styled__default["default"](Label)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
711
+ var StyledTitleLabel$1 = styled__default["default"](Label)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
712
712
  var theme = _a.theme;
713
713
  return theme.palette.blue["600"];
714
714
  }, function (_a) {
@@ -745,7 +745,7 @@ var CampaignCard = function (props) {
745
745
  }
746
746
  return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
747
747
  };
748
- var templateObject_1$N, templateObject_2$i, templateObject_3$b, templateObject_4$9, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
748
+ var templateObject_1$N, templateObject_2$j, templateObject_3$c, templateObject_4$a, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
749
749
 
750
750
  var Wrapper = styled__default["default"](Card)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n display: flex;\n flex-direction: column;\n\n &:hover {\n box-shadow: ", ";\n }\n"])), function (_a) {
751
751
  var theme = _a.theme;
@@ -760,7 +760,7 @@ var Wrapper = styled__default["default"](Card)(templateObject_1$M || (templateOb
760
760
  var theme = _a.theme;
761
761
  return theme.shadows.boxShadow(theme);
762
762
  });
763
- var StyledTagNew = styled__default["default"](Tag)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"])), function (_a) {
763
+ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"], ["\n height: ", "px;\n padding: ", "px\n ", "px;\n color: ", ";\n position: absolute;\n right: 16px;\n top: 16px;\n"])), function (_a) {
764
764
  var theme = _a.theme;
765
765
  return theme.space.base * 6;
766
766
  }, function (_a) {
@@ -773,21 +773,21 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$h || (templa
773
773
  var theme = _a.theme;
774
774
  return theme.palette.white;
775
775
  });
776
- var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
776
+ var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
777
777
  var theme = _a.theme;
778
778
  return theme.fontSizes.sm;
779
779
  }, function (_a) {
780
780
  var theme = _a.theme;
781
781
  return theme.palette.grey["500"];
782
782
  });
783
- var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
783
+ var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n word-wrap: break-word;\n cursor: pointer;\n"])), function (_a) {
784
784
  var theme = _a.theme;
785
785
  return theme.palette.blue["600"];
786
786
  }, function (_a) {
787
787
  var theme = _a.theme;
788
788
  return theme.fontSizes.lg;
789
789
  });
790
- var Divider = styled__default["default"].div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"])), function (_a) {
790
+ var Divider = styled__default["default"].div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin: ", " 0;\n background-color: ", ";\n"])), function (_a) {
791
791
  var theme = _a.theme;
792
792
  return theme.space.sm;
793
793
  }, function (_a) {
@@ -808,7 +808,7 @@ var ProductCard = function (props) {
808
808
  }
809
809
  return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardBody, __assign({ onClick: props.onCtaClick }, { children: [isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))), props.icon && jsxRuntime.jsx(IconContainer$1, { children: props.icon }), props.preTitle && (jsxRuntime.jsx(StyledLabel$1, __assign({ isRegular: true }, { children: props.preTitle }))), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: productTitleCut }))] })), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(CardFooter, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick }, { children: props.ctaLabel })) })] })));
810
810
  };
811
- var templateObject_1$M, templateObject_2$h, templateObject_3$a, templateObject_4$8, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
811
+ var templateObject_1$M, templateObject_2$i, templateObject_3$b, templateObject_4$9, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8;
812
812
 
813
813
  /**
814
814
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1153,18 +1153,18 @@ var StyledCard$1 = styled__default["default"](Card)(templateObject_1$G || (templ
1153
1153
  var theme = _a.theme;
1154
1154
  return theme.palette.blue[300];
1155
1155
  });
1156
- var IconWrapper$1 = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1156
+ var IconWrapper$1 = styled__default["default"].div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1157
1157
  var theme = _a.theme;
1158
1158
  return theme.space.base;
1159
1159
  });
1160
- var LabelWrapper = styled__default["default"](Label)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
1160
+ var LabelWrapper = styled__default["default"](Label)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
1161
1161
  var theme = _a.theme;
1162
1162
  return theme.space.base;
1163
1163
  }, function (_a) {
1164
1164
  var theme = _a.theme;
1165
1165
  return theme.palette.grey[600];
1166
1166
  });
1167
- var StyledLabel = styled__default["default"](Label)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1167
+ var StyledLabel = styled__default["default"](Label)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1168
1168
  var theme = _a.theme;
1169
1169
  return theme.space.base;
1170
1170
  });
@@ -1176,7 +1176,7 @@ var CheckboxCard = function (props) {
1176
1176
  };
1177
1177
  return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props.card, props, props && !props.disabled && { onClick: handleToggle }, { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(IconWrapper$1, { children: (props.iconActive && checked) ? props.iconActive : props.icon }), jsxRuntime.jsx(LabelWrapper, { children: props.label }), jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) }))] })));
1178
1178
  };
1179
- var templateObject_1$G, templateObject_2$g, templateObject_3$9, templateObject_4$7;
1179
+ var templateObject_1$G, templateObject_2$h, templateObject_3$a, templateObject_4$8;
1180
1180
 
1181
1181
  var UgField = styled__default["default"](reactForms.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
1182
1182
  /**
@@ -1192,7 +1192,7 @@ var index = /*#__PURE__*/Object.freeze({
1192
1192
  });
1193
1193
 
1194
1194
  var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
1195
- var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject([""], [""])));
1195
+ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject([""], [""])));
1196
1196
  /**
1197
1197
  * An Input lets users enter text into a field.
1198
1198
  * <hr>
@@ -1201,7 +1201,7 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$f || (te
1201
1201
  * - To enter multiline text, use a Textarea
1202
1202
  **/
1203
1203
  var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
1204
- var templateObject_1$E, templateObject_2$f;
1204
+ var templateObject_1$E, templateObject_2$g;
1205
1205
 
1206
1206
  var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
1207
1207
  /**
@@ -1250,11 +1250,11 @@ var StyledCard = styled__default["default"](Card)(templateObject_1$B || (templat
1250
1250
  var theme = _a.theme;
1251
1251
  return theme.palette.blue[300];
1252
1252
  });
1253
- var IconWrapper = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1253
+ var IconWrapper = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin: ", "px auto;\n"], ["\n margin: ", "px auto;\n"])), function (_a) {
1254
1254
  var theme = _a.theme;
1255
1255
  return theme.space.base;
1256
1256
  });
1257
- var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
1257
+ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"], ["\n margin: ", "px auto;\n color: ", ";\n font-weight: ", ";\n color: ", ";\n user-select: none;\n\n &:focus {\n outline: 0;\n }\n"])), function (_a) {
1258
1258
  var theme = _a.theme;
1259
1259
  return theme.space.base;
1260
1260
  }, function (_a) {
@@ -1267,7 +1267,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3
1267
1267
  var theme = _a.theme;
1268
1268
  return theme.colors.primaryHue;
1269
1269
  });
1270
- var Circle = styled__default["default"].div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"], ["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"])), function (_a) {
1270
+ var Circle = styled__default["default"].div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"], ["\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-left: auto;\n ", "\n"])), function (_a) {
1271
1271
  var theme = _a.theme;
1272
1272
  return theme.space.base * 6;
1273
1273
  }, function (_a) {
@@ -1283,7 +1283,7 @@ var Circle = styled__default["default"].div(templateObject_4$6 || (templateObjec
1283
1283
  var checked = _a.checked;
1284
1284
  return !checked && "\n opacity: 0;\n visibility: hidden;\n ";
1285
1285
  });
1286
- var StyledDivider = styled__default["default"](Divider$1)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n background-color: ", ";\n margin: ", "px auto;\n"], ["\n background-color: ", ";\n margin: ", "px auto;\n"])), function (_a) {
1286
+ var StyledDivider = styled__default["default"](Divider$1)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n background-color: ", ";\n margin: ", "px auto;\n"], ["\n background-color: ", ";\n margin: ", "px auto;\n"])), function (_a) {
1287
1287
  var theme = _a.theme;
1288
1288
  return theme.palette.blue[100];
1289
1289
  }, function (_a) {
@@ -1295,7 +1295,7 @@ var RadioCard = function (_a) {
1295
1295
  var card = _a.card, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["card", "icon", "iconActive"]);
1296
1296
  return (jsxRuntime.jsxs(StyledCard, __assign({}, card, props, { className: props.checked ? "card-active" : "", onClick: function () { props.onChecked && props.onChecked(props.value); } }, { children: [jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })), jsxRuntime.jsx(IconWrapper, { children: (iconActive && props.checked) ? iconActive : icon }), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(StyledDivider, {}), jsxRuntime.jsx(StyledText, { children: props.label })] })));
1297
1297
  };
1298
- var templateObject_1$B, templateObject_2$e, templateObject_3$8, templateObject_4$6, templateObject_5$2;
1298
+ var templateObject_1$B, templateObject_2$f, templateObject_3$9, templateObject_4$7, templateObject_5$3;
1299
1299
 
1300
1300
  var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
1301
1301
  /**
@@ -1459,12 +1459,12 @@ var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
1459
1459
  var theme = _a.theme;
1460
1460
  return theme.fonts.system;
1461
1461
  });
1462
- styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
1462
+ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
1463
1463
  var theme = _a.theme;
1464
1464
  return theme.fonts.system;
1465
1465
  });
1466
1466
  var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
1467
- var templateObject_1$u, templateObject_2$d;
1467
+ var templateObject_1$u, templateObject_2$e;
1468
1468
 
1469
1469
  var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n font-family: ", ";\n"], ["\n font-family: ", ";\n"])), function (_a) {
1470
1470
  var theme = _a.theme;
@@ -1534,7 +1534,7 @@ var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templ
1534
1534
  var theme = _a.theme;
1535
1535
  return theme.breakpoints.sm;
1536
1536
  });
1537
- var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1537
+ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n pointer-events: none;\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1538
1538
  var theme = _a.theme;
1539
1539
  return theme.palette.blue["600"];
1540
1540
  }, function (_a) {
@@ -1544,7 +1544,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
1544
1544
  var theme = _a.theme;
1545
1545
  return theme.breakpoints.sm;
1546
1546
  });
1547
- var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1547
+ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"], ["\n margin-right: auto;\n margin-left: -8px;\n color: ", ";\n font-family: ", ";\n z-index: 2;\n @media (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1548
1548
  var theme = _a.theme;
1549
1549
  return theme.palette.blue["600"];
1550
1550
  }, function (_a) {
@@ -1554,7 +1554,7 @@ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
1554
1554
  var theme = _a.theme;
1555
1555
  return theme.breakpoints.sm;
1556
1556
  });
1557
- var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"], ["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1557
+ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"], ["\n color: ", ";\n position: absolute;\n left: 0;\n @media (min-width: ", ") {\n display: none;\n }\n"])), function (_a) {
1558
1558
  var theme = _a.theme;
1559
1559
  return theme.palette.blue["600"];
1560
1560
  }, function (_a) {
@@ -1572,7 +1572,7 @@ var BrandItem = function (props) {
1572
1572
  ? selectedWorkspace.company + "'s workspace"
1573
1573
  : "Select workspace" })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces.map(function (item) { return (jsxRuntime.jsx(Item, __assign({ value: item }, { children: item.company }))); })] })] })) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
1574
1574
  };
1575
- var templateObject_1$s, templateObject_2$c, templateObject_3$7, templateObject_4$5;
1575
+ var templateObject_1$s, templateObject_2$d, templateObject_3$8, templateObject_4$6;
1576
1576
 
1577
1577
  var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
1578
1578
  /**
@@ -1628,7 +1628,7 @@ var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props));
1628
1628
  var templateObject_1$p;
1629
1629
 
1630
1630
  var SelectedItemStyle = styled.css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
1631
- var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
1631
+ var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"], ["\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n font-family: ", ";\n ", "\n ", "\n &:hover, &:focus {\n ", "\n }\n opacity: 1;\n color: ", ";\n font-weight: ", ";\n ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
1632
1632
  var theme = _a.theme;
1633
1633
  return theme.fonts.system;
1634
1634
  }, function (props) { return !props.isExpanded && "display: none;"; }, function (props) { return props.isCurrent && SelectedItemStyle; }, SelectedItemStyle, function (props) { return props.theme.palette.blue["600"]; }, function (props) { return props.theme.fontWeights.medium; }, function (props) {
@@ -1639,7 +1639,7 @@ var NavItem = function (props) {
1639
1639
  // const { isExpanded } = props;
1640
1640
  return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
1641
1641
  };
1642
- var templateObject_1$o, templateObject_2$b;
1642
+ var templateObject_1$o, templateObject_2$c;
1643
1643
 
1644
1644
  var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject([""], [""])));
1645
1645
  var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
@@ -1718,11 +1718,11 @@ var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign
1718
1718
  var templateObject_1$l;
1719
1719
 
1720
1720
  var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n"], ["\n color: ", ";\n font-size: ", ";\n"])), function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; });
1721
- var UgNavItem = styled__default["default"](NavItem)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
1721
+ var UgNavItem = styled__default["default"](NavItem)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n flex-flow: column;\n align-items: flex-start;\n"], ["\n flex-flow: column;\n align-items: flex-start;\n"])));
1722
1722
  var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
1723
1723
  NavItemProject.Title = NavItemText;
1724
1724
  NavItemProject.SubTitle = UgProjectSubtitle;
1725
- var templateObject_1$k, templateObject_2$a;
1725
+ var templateObject_1$k, templateObject_2$b;
1726
1726
 
1727
1727
  var _path$7;
1728
1728
 
@@ -1826,7 +1826,7 @@ var LoadingSidebar = function () {
1826
1826
  };
1827
1827
 
1828
1828
  var TokenContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
1829
- var ScrollingContainer = styled__default["default"].div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
1829
+ var ScrollingContainer = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n overflow-y: auto;\n height: 100%;\n"])));
1830
1830
  /**
1831
1831
  * The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
1832
1832
  * <br>
@@ -1845,7 +1845,7 @@ var Sidebar = function (props) {
1845
1845
  return props.isLoading ? jsxRuntime.jsx(LoadingSidebar, {}) : (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), props.tokens && (jsxRuntime.jsx(NavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm, width: "70%" } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsx(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: props.dividerLabel || "" })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
1846
1846
  props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return navigate(project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
1847
1847
  };
1848
- var templateObject_1$j, templateObject_2$9;
1848
+ var templateObject_1$j, templateObject_2$a;
1849
1849
 
1850
1850
  var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n \n"], ["\n @media (min-width: ", ") {\n margin: ", "\n }\n \n /* hide scrollbar for IE, Edge and Firefox */\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n \n"])), function (_a) {
1851
1851
  var theme = _a.theme;
@@ -1914,32 +1914,32 @@ Modal.Footer = reactModals.Footer;
1914
1914
  var templateObject_1$g;
1915
1915
 
1916
1916
  var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"])));
1917
- var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", "px ", "px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", "px ", "px;\n"])), function (_a) {
1917
+ var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", "px ", "px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", "px ", "px;\n"])), function (_a) {
1918
1918
  var theme = _a.theme;
1919
1919
  return theme.space.base * 3;
1920
1920
  }, function (_a) {
1921
1921
  var theme = _a.theme;
1922
1922
  return theme.space.base * 6;
1923
1923
  });
1924
- var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
1924
+ var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
1925
1925
  var theme = _a.theme;
1926
1926
  return theme.palette.grey["100"];
1927
1927
  });
1928
- var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n padding: ", "px ", "px;\n"], ["\n padding: ", "px ", "px;\n"])), function (_a) {
1928
+ var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n padding: ", "px ", "px;\n"], ["\n padding: ", "px ", "px;\n"])), function (_a) {
1929
1929
  var theme = _a.theme;
1930
1930
  return theme.space.base * 4;
1931
1931
  }, function (_a) {
1932
1932
  var theme = _a.theme;
1933
1933
  return theme.space.base * 6;
1934
1934
  });
1935
- var StyledModalClose = styled__default["default"](reactModals.Close)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: relative;\n top: unset;\n right: unset;\n"], ["\n position: relative;\n top: unset;\n right: unset;\n"])));
1935
+ var StyledModalClose = styled__default["default"](reactModals.Close)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n position: relative;\n top: unset;\n right: unset;\n"], ["\n position: relative;\n top: unset;\n right: unset;\n"])));
1936
1936
  var ModalFullScreen = function (props) { return jsxRuntime.jsx(StyledModal$1, __assign({}, props)); };
1937
1937
  ModalFullScreen.Header = StyledHeader;
1938
1938
  ModalFullScreen.Body = StyledBody$4;
1939
1939
  ModalFullScreen.Footer = StyledFooter;
1940
1940
  ModalFullScreen.Close = StyledModalClose;
1941
1941
  ModalFullScreen.FooterItem = FooterItem;
1942
- var templateObject_1$f, templateObject_2$8, templateObject_3$6, templateObject_4$4, templateObject_5$1;
1942
+ var templateObject_1$f, templateObject_2$9, templateObject_3$7, templateObject_4$5, templateObject_5$2;
1943
1943
 
1944
1944
  /**
1945
1945
  * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
@@ -2022,12 +2022,12 @@ var StyledItem = styled__default["default"].li(templateObject_1$c || (templateOb
2022
2022
  }, function (props) {
2023
2023
  return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
2024
2024
  });
2025
- var StyledBody$3 = styled__default["default"].li(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
2026
- var IconContainer = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: 3px;\n"], ["\n margin-right: ", ";\n margin-top: 3px;\n"])), function (_a) {
2025
+ var StyledBody$3 = styled__default["default"].li(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
2026
+ var IconContainer = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: 3px;\n"], ["\n margin-right: ", ";\n margin-top: 3px;\n"])), function (_a) {
2027
2027
  var theme = _a.theme;
2028
2028
  return theme.space.sm;
2029
2029
  });
2030
- var MenuItemBody = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), flexStart);
2030
+ var MenuItemBody = styled__default["default"].div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), flexStart);
2031
2031
  var MenuItem = function (_a) {
2032
2032
  var children = _a.children, selectedItem = _a.selectedItem, content = _a.content, props = __rest(_a, ["children", "selectedItem", "content"]);
2033
2033
  var isActive = selectedItem && selectedItem === props.value;
@@ -2036,7 +2036,7 @@ var MenuItem = function (_a) {
2036
2036
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
2037
2037
  return isActive && content ? (jsxRuntime.jsx(StyledBody$3, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, __assign({}, props, { onClick: function () { return props.setActive(props.value); } }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
2038
2038
  };
2039
- var templateObject_1$c, templateObject_2$7, templateObject_3$5, templateObject_4$3;
2039
+ var templateObject_1$c, templateObject_2$8, templateObject_3$6, templateObject_4$4;
2040
2040
 
2041
2041
  var _path$3;
2042
2042
 
@@ -2111,19 +2111,19 @@ var getInitials = function (name) {
2111
2111
  };
2112
2112
 
2113
2113
  var StyledButton$1 = styled__default["default"](Button)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
2114
- var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"], ["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; });
2115
- var StyledBody$2 = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
2114
+ var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"], ["\n color: ", ";\n padding-left: 0;\n justify-content: flex-start;\n"])), function (props) { return props.theme.palette.grey[800]; });
2115
+ var StyledBody$2 = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
2116
2116
  var theme = _a.theme;
2117
2117
  return theme.space.base * 6;
2118
2118
  }, function (_a) {
2119
2119
  var theme = _a.theme;
2120
2120
  return theme.space.base * 4;
2121
2121
  });
2122
- var StyledParagraph = styled__default["default"](Paragraph)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n margin-top: ", "px;\n"], ["\n margin-top: ", "px;\n"])), function (_a) {
2122
+ var StyledParagraph = styled__default["default"](Paragraph)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n margin-top: ", "px;\n"], ["\n margin-top: ", "px;\n"])), function (_a) {
2123
2123
  var theme = _a.theme;
2124
2124
  return theme.space.base * 4;
2125
2125
  });
2126
- var Footer = styled__default["default"].div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-top: auto;\n"], ["\n margin-top: auto;\n"])));
2126
+ var Footer = styled__default["default"].div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-top: auto;\n"], ["\n margin-top: auto;\n"])));
2127
2127
  var Description = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n justify-content: space-between;\n text-align: left;\n width: 100%;\n font-weight: ", ";\n font-size: ", ";\n line-height: 140%;\n color: ", ";\n margin: 2px 0px;\n"], ["\n ", "\n justify-content: space-between;\n text-align: left;\n width: 100%;\n font-weight: ", ";\n font-size: ", ";\n line-height: 140%;\n color: ", ";\n margin: 2px 0px;\n"])), flexCenter, theme.fontWeights.regular, theme.fontSizes.sm, theme.palette.grey["600"]);
2128
2128
  var HelpItem = function (props) {
2129
2129
  var _a, _b, _c;
@@ -2139,7 +2139,7 @@ var HelpItem = function (props) {
2139
2139
  var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledBody$2, { children: [jsxRuntime.jsx(Paragraph, __assign({ style: { color: theme.palette.grey[600] } }, { children: jsxRuntime.jsx(SM, { children: props.contactLabel }) })), jsxRuntime.jsx(StyledParagraph, { children: jsxRuntime.jsx(Avatar, { children: (_a = props.csm.picture) !== null && _a !== void 0 ? _a : getInitials(props.csm.name), avatarType: props.csm.picture ? "image" : "text", size: "large" }) }), jsxRuntime.jsxs(StyledParagraph, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true }, { children: props.csm.name })), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Anchor, __assign({ href: "mailto:".concat(props.csm.email), style: { color: theme.palette.grey[600] } }, { children: csmEmailCut })), jsxRuntime.jsxs(StyledButton$1, __assign({ isBasic: true, onClick: copyToClipBoard, size: "small", variant: "isBasic" }, { children: [jsxRuntime.jsx(StyledButton$1.StartIcon, { children: jsxRuntime.jsx(SvgCopy, {}) }), (_b = props.copyLabel) !== null && _b !== void 0 ? _b : "Copy"] }))] })] })] }), jsxRuntime.jsxs(Footer, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsxs(StyledFooterButton, __assign({ isStretched: true, isBasic: true, onClick: props.toggleChat, style: { paddingLeft: theme.space.xxs } }, { children: [jsxRuntime.jsx(StyledFooterButton.StartIcon, { children: jsxRuntime.jsx(SvgInfoFill, { fill: theme.palette.blue[600] }) }), (_c = props.chatSupportLabel) !== null && _c !== void 0 ? _c : "Report a technical issue"] }))] })] }));
2140
2140
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgQuestionMark, { fill: theme.palette.grey[600] }) }, { children: props.title })) }));
2141
2141
  };
2142
- var templateObject_1$9, templateObject_2$6, templateObject_3$4, templateObject_4$2, templateObject_5, templateObject_6;
2142
+ var templateObject_1$9, templateObject_2$7, templateObject_3$5, templateObject_4$3, templateObject_5$1, templateObject_6;
2143
2143
 
2144
2144
  function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
2145
2145
 
@@ -2178,14 +2178,14 @@ var StyledBody$1 = styled__default["default"].div(templateObject_1$8 || (templat
2178
2178
  var theme = _a.theme;
2179
2179
  return theme.space.base * 4;
2180
2180
  });
2181
- var StyledButtonContainer = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n ", "\n & button { \n justify-content: flex-start;\n }\n"], ["\n ", "\n & button { \n justify-content: flex-start;\n }\n"])), flexStart);
2182
- var StyledButton = styled__default["default"](Button)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
2181
+ var StyledButtonContainer = styled__default["default"].div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n & button { \n justify-content: flex-start;\n }\n"], ["\n ", "\n & button { \n justify-content: flex-start;\n }\n"])), flexStart);
2182
+ var StyledButton = styled__default["default"](Button)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
2183
2183
  var LanguageItem = function (props) {
2184
2184
  var _a;
2185
2185
  var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PreviousButton, __assign({ onClick: function () { return props.setActive(""); }, isBasic: true }, { children: props.title })), jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(StyledBody$1, { children: jsxRuntime.jsx(StyledButtonContainer, { children: Object.keys(props.languages).map(function (key) { return (jsxRuntime.jsxs(StyledButton, __assign({ isBasic: true, isStretched: true, value: key, onClick: function () { return props.onSelectLanguage(key); } }, { children: [jsxRuntime.jsx(StyledButton.StartIcon, { children: props.currentLanguage === key ? jsxRuntime.jsx(SvgCheckLg, {}) : jsxRuntime.jsx(SvgEmpty, {}) }), jsxRuntime.jsx(Span, __assign({ isBold: props.currentLanguage === key }, { children: props.languages[key].label }))] }))); }) }) })] }));
2186
2186
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(MenuItem, __assign({ content: content, value: props.value, selectedItem: props.selectedItem, setActive: props.setActive, icon: jsxRuntime.jsx(SvgTranslationExists, { fill: theme.palette.blue[600] }) }, { children: jsxRuntime.jsxs(MenuItemBody, { children: [props.title, jsxRuntime.jsxs(MD, __assign({ style: { color: theme.palette.grey[600] } }, { children: [(_a = props.currentLanguageLabel) !== null && _a !== void 0 ? _a : "Now:", " " + props.languages[props.currentLanguage].label] }))] }) })) }));
2187
2187
  };
2188
- var templateObject_1$8, templateObject_2$5, templateObject_3$3;
2188
+ var templateObject_1$8, templateObject_2$6, templateObject_3$4;
2189
2189
 
2190
2190
  var ProfileContainer = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"], ["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
2191
2191
  var theme = _a.theme;
@@ -2194,7 +2194,7 @@ var ProfileContainer = styled__default["default"].div(templateObject_1$7 || (tem
2194
2194
  var theme = _a.theme;
2195
2195
  return theme.space.base * 6;
2196
2196
  });
2197
- var CompanyHolder = styled__default["default"](SM)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"], ["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"])), function (_a) {
2197
+ var CompanyHolder = styled__default["default"](SM)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"], ["\n text-transform: uppercase;\n margin-top: ", "px;\n margin-bottom: ", "px;\n color: ", ";\n"])), function (_a) {
2198
2198
  var theme = _a.theme;
2199
2199
  return theme.space.base * 2;
2200
2200
  }, function (_a) {
@@ -2204,7 +2204,7 @@ var CompanyHolder = styled__default["default"](SM)(templateObject_2$4 || (templa
2204
2204
  var theme = _a.theme;
2205
2205
  return theme.palette.blue["600"];
2206
2206
  });
2207
- var UserDetails = styled__default["default"].div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"])), function (_a) {
2207
+ var UserDetails = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n text-align: center;\n"])), function (_a) {
2208
2208
  var theme = _a.theme;
2209
2209
  return theme.space.base * 4;
2210
2210
  }, function (_a) {
@@ -2215,7 +2215,7 @@ var UserContainer = function (props) {
2215
2215
  var _a;
2216
2216
  return (jsxRuntime.jsxs(ProfileContainer, { children: [props.company && jsxRuntime.jsx(CompanyHolder, __assign({ isBold: true }, { children: props.company })), jsxRuntime.jsx(Avatar, { children: (_a = props.picture) !== null && _a !== void 0 ? _a : getInitials(props.name), avatarType: props.picture ? "image" : "text", size: "large" }), jsxRuntime.jsxs(UserDetails, { children: [jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.blue[600] } }, { children: props.name })), jsxRuntime.jsx(SM, __assign({ style: { color: theme.palette.grey[600] } }, { children: props.email }))] })] }));
2217
2217
  };
2218
- var templateObject_1$7, templateObject_2$4, templateObject_3$2;
2218
+ var templateObject_1$7, templateObject_2$5, templateObject_3$3;
2219
2219
 
2220
2220
  var StyledList = styled__default["default"].ul(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n"], ["\n padding: 0;\n margin: 0;\n"])));
2221
2221
  var UserMenu = function (props) {
@@ -2267,7 +2267,7 @@ var StyledModal = styled__default["default"](Modal)(templateObject_1$5 || (templ
2267
2267
  var theme = _a.theme;
2268
2268
  return theme.space.base * 3;
2269
2269
  });
2270
- var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n margin: ", ";\n padding: 0;\n"], ["\n margin: ", ";\n padding: 0;\n"])), function (_a) {
2270
+ var StyledBody = styled__default["default"](Modal.Body)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n margin: ", ";\n padding: 0;\n"], ["\n margin: ", ";\n padding: 0;\n"])), function (_a) {
2271
2271
  var theme = _a.theme;
2272
2272
  return theme.space.xxs + " " + theme.space.xs;
2273
2273
  });
@@ -2292,14 +2292,14 @@ var ProfileModal = function (_a) {
2292
2292
  };
2293
2293
  return (jsxRuntime.jsx(StyledModal, __assign({}, args, { style: { width: "300px" }, backdropProps: backDrop }, { children: jsxRuntime.jsx(StyledBody, { children: jsxRuntime.jsx(UserMenu, __assign({}, menuArgs)) }) })));
2294
2294
  };
2295
- var templateObject_1$5, templateObject_2$3;
2295
+ var templateObject_1$5, templateObject_2$4;
2296
2296
 
2297
2297
  var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n svg {\n color: ", ";\n }\n"], ["\n svg {\n color: ", ";\n }\n"])), function (_a) {
2298
2298
  var theme = _a.theme;
2299
2299
  return theme.palette.green[700];
2300
2300
  });
2301
- var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject([""], [""])));
2302
- var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n ", "\n\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"], ["\n ", "\n\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"])), function (props) {
2301
+ var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject([""], [""])));
2302
+ var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n ", "\n\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"], ["\n ", "\n\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\n }\n\n ", "\n"])), function (props) {
2303
2303
  console.log("Active index: ", props.activeIndex);
2304
2304
  return "";
2305
2305
  }, function (_a) {
@@ -2312,7 +2312,7 @@ var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObje
2312
2312
  return props.activeIndex !== undefined &&
2313
2313
  "\n ".concat(UgStep, ":nth-child(").concat(props.activeIndex + 1, ") {\n \n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ").concat(props.theme.palette.blue[600], ";\n color: white;\n }\n\n ").concat(UgLabel, " {\n font-weight: 500;\n color: ").concat(props.theme.palette.blue[600], ";\n }\n }\n ");
2314
2314
  });
2315
- var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n padding: ", ";\n margin-top: 0;\n margin-bottom: 0;\n > div { \n color: ", "; \n }\n"], ["\n padding: ", ";\n margin-top: 0;\n margin-bottom: 0;\n > div { \n color: ", "; \n }\n"])), function (_a) {
2315
+ var UgContent = styled__default["default"](reactAccordions.Stepper.Content)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n padding: ", ";\n margin-top: 0;\n margin-bottom: 0;\n > div { \n color: ", "; \n }\n"], ["\n padding: ", ";\n margin-top: 0;\n margin-bottom: 0;\n > div { \n color: ", "; \n }\n"])), function (_a) {
2316
2316
  var theme = _a.theme;
2317
2317
  return "".concat(theme.space.sm, " ").concat(theme.space.sm, " ").concat(theme.space.sm, " 24px");
2318
2318
  }, function (_a) {
@@ -2329,9 +2329,25 @@ var Stepper = function (props) { return jsxRuntime.jsx(UgStepper, __assign({}, p
2329
2329
  Stepper.Step = UgStep;
2330
2330
  Stepper.Label = UgLabel;
2331
2331
  Stepper.Content = UgContent;
2332
- var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4$1;
2332
+ var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2;
2333
2333
 
2334
- var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
2334
+ var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"], ["\n border: 1px solid ", ";\n border-collapse: separate !important;\n border-radius: ", ";\n"])), function (_a) {
2335
+ var theme = _a.theme;
2336
+ return theme.palette.grey[300];
2337
+ }, function (_a) {
2338
+ var theme = _a.theme;
2339
+ return theme.borderRadii.lg;
2340
+ });
2341
+ var UgHeaderRow = styled__default["default"](reactTables.HeaderRow)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n border: 0;\n"], ["\n border: 0;\n"])));
2342
+ var UgHeaderCell = styled__default["default"](reactTables.HeaderCell)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"], ["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"])), function (_a) {
2343
+ var theme = _a.theme;
2344
+ return theme.palette.grey[300];
2345
+ });
2346
+ var UgRow = styled__default["default"](reactTables.Row)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n"], ["\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n"])));
2347
+ var UgCell = styled__default["default"](reactTables.Cell)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"], ["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"])), function (_a) {
2348
+ var theme = _a.theme;
2349
+ return theme.palette.grey[300];
2350
+ });
2335
2351
  /**
2336
2352
  * A Table organizes data into columns and rows. Tables make it easier for users to compare and analyze information.
2337
2353
 
@@ -2344,17 +2360,17 @@ var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$3 |
2344
2360
  var Table = function (props) { return jsxRuntime.jsx(UgTable, __assign({}, props)); };
2345
2361
  // Extras
2346
2362
  var Head = function (props) { return (jsxRuntime.jsx(reactTables.Head, __assign({}, props))); };
2347
- var HeaderRow = function (props) { return jsxRuntime.jsx(reactTables.HeaderRow, __assign({}, props)); };
2348
- var HeaderCell = function (props) { return jsxRuntime.jsx(reactTables.HeaderCell, __assign({}, props)); };
2363
+ var HeaderRow = function (props) { return jsxRuntime.jsx(UgHeaderRow, __assign({}, props)); };
2364
+ var HeaderCell = function (props) { return jsxRuntime.jsx(UgHeaderCell, __assign({}, props)); };
2349
2365
  var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign({}, props))); };
2350
- var Row = function (props) { return jsxRuntime.jsx(reactTables.Row, __assign({}, props)); };
2351
- var Cell = function (props) { return jsxRuntime.jsx(reactTables.Cell, __assign({}, props)); };
2366
+ var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
2367
+ var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
2352
2368
  var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
2353
- var templateObject_1$3;
2369
+ var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5;
2354
2370
 
2355
2371
  var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: inline-block;\n float: right;\n"], ["\n display: inline-block;\n float: right;\n"])));
2356
2372
  var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject([""], [""])));
2357
- var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"], ["\n cursor: pointer;\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"])), theme.palette.grey[500], theme.fontSizes.sm);
2373
+ var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"], ["\n cursor: pointer;\n border: 0;\n\n &:last-child {\n td {\n border-bottom: 0;\n }\n }\n\n &.empty {\n cursor: default;\n\n * {\n color: ", " !important;\n cursor: default !important;\n }\n }\n\n svg {\n vertical-align: middle;\n }\n\n .title {\n padding-left: 10px;\n vertical-align: middle;\n font-size: ", ";\n cursor: pointer;\n }\n"])), theme.palette.grey[500], theme.fontSizes.sm);
2358
2374
  var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
2359
2375
  var GroupRowComponent = function (props) {
2360
2376
  var toggleIconAnimation = reactSpring.useSpring({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "2.10.18",
3
+ "version": "2.10.21",
4
4
  "dependencies": {
5
5
  "@zendeskgarden/css-bedrock": "^9.0.0",
6
6
  "@zendeskgarden/react-accordions": "^8.49.0",