@appquality/unguess-design-system 2.12.40 → 2.12.41

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 (4) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/build/index.js +60 -49
  3. package/build/stories/tabs/_types.d.ts +3 -2
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # v2.12.41 (Thu Dec 01 2022)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Fix tabs and allow scroll [#130](https://github.com/AppQuality/unguess-design-system/pull/130) ([@d-beezee](https://github.com/d-beezee))
6
+ - fix: Type fix [#129](https://github.com/AppQuality/unguess-design-system/pull/129) ([@d-beezee](https://github.com/d-beezee))
7
+ - fix: Add scroll to tabs if heigth is set to container [#128](https://github.com/AppQuality/unguess-design-system/pull/128) ([@d-beezee](https://github.com/d-beezee))
8
+
9
+ #### Authors: 1
10
+
11
+ - [@d-beezee](https://github.com/d-beezee)
12
+
13
+ ---
14
+
1
15
  # v2.12.40 (Thu Dec 01 2022)
2
16
 
3
17
  #### 🐛 Bug Fix
package/build/index.js CHANGED
@@ -268,8 +268,8 @@ var isMac = function () {
268
268
  };
269
269
  styled.css(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n transition: opacity 0.2s ease;\n"], ["\n transition: opacity 0.2s ease;\n"])));
270
270
  var sidebarNavItemExpanded = styled.css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n visibility: visible;\n opacity: 1;\n // transition: opacity 0.2s ease;\n"], ["\n visibility: visible;\n opacity: 1;\n // transition: opacity 0.2s ease;\n"])));
271
- var sidebarNavItemHidden = styled.css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n visibility: hidden;\n pointer-events: none;\n color: transparent;\n"], ["\n visibility: hidden;\n pointer-events: none;\n color: transparent;\n"])));
272
- var templateObject_1$1q, templateObject_2$A, templateObject_3$m;
271
+ var sidebarNavItemHidden = styled.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n visibility: hidden;\n pointer-events: none;\n color: transparent;\n"], ["\n visibility: hidden;\n pointer-events: none;\n color: transparent;\n"])));
272
+ var templateObject_1$1q, templateObject_2$A, templateObject_3$n;
273
273
 
274
274
  var gradients = {
275
275
  horizontal: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[600]), " 11.98%, ").concat(hex2rgba(palette.kale[400]), " 100%);"),
@@ -736,7 +736,7 @@ var Title$2 = styled__default["default"](LG)(templateObject_2$x || (templateObje
736
736
  var theme = _a.theme;
737
737
  return theme.space.xxs;
738
738
  });
739
- var Description$2 = styled__default["default"](MD)(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
739
+ var Description$2 = styled__default["default"](MD)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n color: ", ";\n margin-top: ", ";\n"], ["\n color: ", ";\n margin-top: ", ";\n"])), function (_a) {
740
740
  var theme = _a.theme;
741
741
  return theme.palette.grey[700];
742
742
  }, function (_a) {
@@ -751,7 +751,7 @@ var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign(
751
751
  CardHeader.Label = Label$2;
752
752
  CardHeader.Title = Title$2;
753
753
  CardHeader.Text = Description$2;
754
- var templateObject_1$1h, templateObject_2$x, templateObject_3$l, templateObject_4$g;
754
+ var templateObject_1$1h, templateObject_2$x, templateObject_3$m, templateObject_4$g;
755
755
 
756
756
  var Divider = styled__default["default"].div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n margin-top: ", "px;\n margin-bottom: ", ";\n background-color: ", ";\n"])), function (_a) {
757
757
  var theme = _a.theme;
@@ -764,12 +764,12 @@ var Divider = styled__default["default"].div(templateObject_1$1g || (templateObj
764
764
  return theme.palette.grey["300"];
765
765
  });
766
766
  var Footer$2 = styled__default["default"].div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: auto;\n width: 100%;\n"])));
767
- var Container$1 = styled__default["default"].div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
767
+ var Container$1 = styled__default["default"].div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
768
768
  var theme = _a.theme, direction = _a.direction, justifyContent = _a.justifyContent, wrap = _a.wrap;
769
769
  return "\n display: flex;\n align-items: center;\n flex-direction: ".concat(direction || "row", ";\n justify-content: ").concat(justifyContent || "space-between", ";\n padding: ").concat(theme.space.xxs, " 0;\n margin-top: ").concat(theme.space.xs, ";\n ").concat(wrap ? "flex-wrap: wrap;" : "", "\n ");
770
770
  });
771
771
  var CardFooter = function (props) { return (jsxRuntime.jsxs(Footer$2, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$1, __assign({}, props, { children: props.children }))] })); };
772
- var templateObject_1$1g, templateObject_2$w, templateObject_3$k;
772
+ var templateObject_1$1g, templateObject_2$w, templateObject_3$l;
773
773
 
774
774
  var UgContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n\n ", "\n\n ", "\n"], ["\n border-radius: ", ";\n padding: ", ";\n border: 1px solid ", ";\n height: 100%;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n\n ", "\n\n ", "\n"])), function (_a) {
775
775
  var theme = _a.theme;
@@ -851,7 +851,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_2$v || (temp
851
851
  var theme = _a.theme;
852
852
  return theme.palette.white;
853
853
  });
854
- var StyledLabel$2 = styled__default["default"](SM)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
854
+ var StyledLabel$2 = styled__default["default"](SM)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
855
855
  var theme = _a.theme;
856
856
  return theme.palette.grey["500"];
857
857
  });
@@ -861,7 +861,7 @@ var CampaignCard = function (_a) {
861
861
  var PillIcon = getTypeDataIcon(type);
862
862
  return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, __assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$2, { 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(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$2, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, __assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
863
863
  };
864
- var templateObject_1$1e, templateObject_2$v, templateObject_3$j;
864
+ var templateObject_1$1e, templateObject_2$v, templateObject_3$k;
865
865
 
866
866
  var StyledTagNew = styled__default["default"](Tag)(templateObject_1$1d || (templateObject_1$1d = __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) {
867
867
  var theme = _a.theme;
@@ -899,7 +899,7 @@ var ServiceTitle = styled__default["default"](LG)(templateObject_2$u || (templat
899
899
  var theme = _a.theme;
900
900
  return theme.fontWeights.semibold;
901
901
  });
902
- var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
902
+ var StyledTag$1 = styled__default["default"](Tag)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: ", ";\n"], ["\n margin-right: ", ";\n margin-top: ", ";\n"])), function (_a) {
903
903
  var theme = _a.theme;
904
904
  return theme.space.xs;
905
905
  }, function (_a) {
@@ -934,7 +934,7 @@ var ServiceCard = function (props) {
934
934
  var serviceIcon = props.serviceIcon, serviceTitle = props.serviceTitle, serviceSubtitle = props.serviceSubtitle;
935
935
  return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props, { children: [props.isHoverable && (jsxRuntime.jsxs(HoverBody, { children: [jsxRuntime.jsxs(HoverMetaContainer, { children: [props.hoverTitle && (jsxRuntime.jsx(ServiceTitle, { children: props.hoverTitle })), props.hoverSubtitle && (jsxRuntime.jsx(ServiceSubtitle, { children: props.hoverSubtitle }))] }), props.hoverButtons && (jsxRuntime.jsx(ButtonsWrap$1, { children: props.hoverButtons.map(function (button) { return button; }) }))] })), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [serviceIcon && jsxRuntime.jsx(SpecialCard.Thumb, { children: serviceIcon }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: serviceSubtitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: serviceTitle })] })] }), props.tags && (jsxRuntime.jsx(SpecialCard.Footer, __assign({ justifyContent: "start", wrap: true }, { children: props.tags.map(function (tag, index) { return (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(StyledTag$1.Avatar, { children: tag.icon }), tag.label] }), index)); }) })))] })] })));
936
936
  };
937
- var templateObject_1$1c, templateObject_2$u, templateObject_3$i, templateObject_4$f, templateObject_5$7, templateObject_6$2, templateObject_7$1, templateObject_8$1;
937
+ var templateObject_1$1c, templateObject_2$u, templateObject_3$j, templateObject_4$f, templateObject_5$7, templateObject_6$2, templateObject_7$1, templateObject_8$1;
938
938
 
939
939
  var ButtonsWrap = styled__default["default"].div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n justify-content: flex-start;\n width: 100%;\n"])));
940
940
  var InfoCard = function (props) {
@@ -1207,7 +1207,7 @@ var LegendColoredSquare = styled__default["default"].div(templateObject_2$t || (
1207
1207
  var marginRight = _a.marginRight;
1208
1208
  return marginRight;
1209
1209
  });
1210
- var LegendItemWrapper = styled__default["default"].div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin: ", "px;\n flex: 0 0 auto;\n overflow: hidden;\n"], ["\n display: flex;\n align-items: center;\n margin: ", "px;\n flex: 0 0 auto;\n overflow: hidden;\n"])), function (_a) {
1210
+ var LegendItemWrapper = styled__default["default"].div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin: ", "px;\n flex: 0 0 auto;\n overflow: hidden;\n"], ["\n display: flex;\n align-items: center;\n margin: ", "px;\n flex: 0 0 auto;\n overflow: hidden;\n"])), function (_a) {
1211
1211
  var theme = _a.theme;
1212
1212
  return theme.space.base * 1.5;
1213
1213
  });
@@ -1236,7 +1236,7 @@ var Legend = function (_a) {
1236
1236
  });
1237
1237
  return (jsxRuntime.jsx(LegendWrapper, __assign({ columns: columns }, { children: colorScheme.map(function (item) { return (jsxRuntime.jsx(LegendItem, __assign({}, item), item.value)); }) })));
1238
1238
  };
1239
- var templateObject_1$18, templateObject_2$t, templateObject_3$h, templateObject_4$e, templateObject_5$6;
1239
+ var templateObject_1$18, templateObject_2$t, templateObject_3$i, templateObject_4$e, templateObject_5$6;
1240
1240
 
1241
1241
  var PieChart = function (_a) {
1242
1242
  var _b;
@@ -1561,7 +1561,7 @@ var templateObject_1$11;
1561
1561
 
1562
1562
  var Container = styled__default["default"].div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n"])));
1563
1563
  var MetaContainer$1 = styled__default["default"].div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n"])));
1564
- var ThumbContainer = styled__default["default"].div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"])), function (_a) {
1564
+ var ThumbContainer = styled__default["default"].div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n margin-right: ", ";\n width: 100%;\n max-width: ", ";\n\n > div {\n height: 100%;\n }\n"])), function (_a) {
1565
1565
  var theme = _a.theme;
1566
1566
  return theme.space.sm;
1567
1567
  }, function (_a) {
@@ -1587,7 +1587,7 @@ var ItemContent = function (props) {
1587
1587
  var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
1588
1588
  return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, __assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$1, { children: description })] })] }));
1589
1589
  };
1590
- var templateObject_1$10, templateObject_2$r, templateObject_3$g, templateObject_4$d, templateObject_5$5;
1590
+ var templateObject_1$10, templateObject_2$r, templateObject_3$h, templateObject_4$d, templateObject_5$5;
1591
1591
 
1592
1592
  /**
1593
1593
  * A Menu is a wrapper for items elements
@@ -2045,7 +2045,7 @@ var StyledLabel = styled__default["default"](Label)(templateObject_2$m || (templ
2045
2045
  var theme = _a.theme;
2046
2046
  return "".concat(theme.space.xxs, " ").concat(theme.space.xxs, " 0");
2047
2047
  });
2048
- var StyledText$1 = styled__default["default"](XL)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject([""], [""])));
2048
+ var StyledText$1 = styled__default["default"](XL)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject([""], [""])));
2049
2049
  var Wrapper = styled__default["default"].div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n ", " {\n border-bottom: 2px solid transparent;\n padding: ", ";\n display: flex;\n align-items: center;\n\n svg {\n margin-left: ", ";\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n ", " {\n border-bottom: 2px solid transparent;\n padding: ", ";\n display: flex;\n align-items: center;\n\n svg {\n margin-left: ", ";\n }\n }\n"])), StyledText$1, function (_a) {
2050
2050
  var theme = _a.theme;
2051
2051
  return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
@@ -2095,7 +2095,7 @@ var InputItem = function (props) {
2095
2095
  };
2096
2096
  InputToggle.Item = InputItem;
2097
2097
  InputToggle.Label = StyledLabel;
2098
- var templateObject_1$Q, templateObject_2$m, templateObject_3$f, templateObject_4$c;
2098
+ var templateObject_1$Q, templateObject_2$m, templateObject_3$g, templateObject_4$c;
2099
2099
 
2100
2100
  var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
2101
2101
  /**
@@ -2414,7 +2414,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
2414
2414
  var theme = _a.theme;
2415
2415
  return theme.breakpoints.md;
2416
2416
  });
2417
- var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$e || (templateObject_3$e = __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) {
2417
+ var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$f || (templateObject_3$f = __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) {
2418
2418
  var theme = _a.theme;
2419
2419
  return theme.colors.primaryHue;
2420
2420
  }, function (_a) {
@@ -2434,7 +2434,7 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
2434
2434
  var BrandItem = function (props) {
2435
2435
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.workspaces && props.workspaces.length > 1 ? (jsxRuntime.jsx(DropdownItem, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
2436
2436
  };
2437
- var templateObject_1$C, templateObject_2$j, templateObject_3$e, templateObject_4$b;
2437
+ var templateObject_1$C, templateObject_2$j, templateObject_3$f, templateObject_4$b;
2438
2438
 
2439
2439
  var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), theme.components.chrome.header.height);
2440
2440
  /**
@@ -2768,7 +2768,7 @@ var AccordionItemHeader = styled__default["default"](Accordion.Header)(templateO
2768
2768
  var theme = _a.theme;
2769
2769
  return theme.space.base * 6;
2770
2770
  }, function (props) { return props.theme.palette.kale["200"]; });
2771
- var AccordionItemPanel = styled__default["default"](Accordion.Panel)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n max-height: 180px;\n padding: 0;\n padding-left: 5px;\n overflow-y: hidden;\n opacity: 1;\n &:hover {\n overflow-y: auto;\n }\n"], ["\n max-height: 180px;\n padding: 0;\n padding-left: 5px;\n overflow-y: hidden;\n opacity: 1;\n &:hover {\n overflow-y: auto;\n }\n"])));
2771
+ var AccordionItemPanel = styled__default["default"](Accordion.Panel)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n max-height: 180px;\n padding: 0;\n padding-left: 5px;\n overflow-y: hidden;\n opacity: 1;\n &:hover {\n overflow-y: auto;\n }\n"], ["\n max-height: 180px;\n padding: 0;\n padding-left: 5px;\n overflow-y: hidden;\n opacity: 1;\n &:hover {\n overflow-y: auto;\n }\n"])));
2772
2772
  var AccordionItemLabel = styled__default["default"](Accordion.Label)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n padding: 12px 9px;\n ", "\n"], ["\n padding: 12px 9px;\n ", "\n"])), function (_a) {
2773
2773
  var theme = _a.theme;
2774
2774
  return "\n color: ".concat(theme.colors.primaryHue, ";\n fill: ").concat(theme.colors.primaryHue, ";\n font-weight: ").concat(theme.fontWeights.medium, ";\n ");
@@ -2776,11 +2776,11 @@ var AccordionItemLabel = styled__default["default"](Accordion.Label)(templateObj
2776
2776
  AccordionItem.Panel = AccordionItemPanel;
2777
2777
  AccordionItem.Header = AccordionItemHeader;
2778
2778
  AccordionItem.Label = AccordionItemLabel;
2779
- var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$a;
2779
+ var templateObject_1$s, templateObject_2$g, templateObject_3$e, templateObject_4$a;
2780
2780
 
2781
2781
  var TokenContainer = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __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"])));
2782
2782
  var ScrollingContainer = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n order: 1;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n order: 1;\n height: 100%;\n"])));
2783
- var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
2783
+ var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"], ["\n ", ";\n\n &:hover,\n &:focus {\n background-color: white;\n }\n"])), function (_a) {
2784
2784
  var isExpanded = _a.isExpanded;
2785
2785
  return isExpanded &&
2786
2786
  "\n display: block;\n padding-right: ".concat(theme.space.md, ";\n ");
@@ -2836,7 +2836,7 @@ var Sidebar = function (_a) {
2836
2836
  color: theme.palette.grey[800],
2837
2837
  } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))] }))] }), 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" })] }))] })));
2838
2838
  };
2839
- var templateObject_1$r, templateObject_2$f, templateObject_3$c, templateObject_4$9;
2839
+ var templateObject_1$r, templateObject_2$f, templateObject_3$d, templateObject_4$9;
2840
2840
 
2841
2841
  var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$q || (templateObject_1$q = __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 @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"])), function (_a) {
2842
2842
  var theme = _a.theme;
@@ -2918,7 +2918,7 @@ var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$e |
2918
2918
  var theme = _a.theme;
2919
2919
  return theme.space.md;
2920
2920
  });
2921
- var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
2921
+ var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
2922
2922
  var theme = _a.theme;
2923
2923
  return theme.palette.grey["100"];
2924
2924
  }, function (_a) {
@@ -2945,7 +2945,7 @@ ModalFullScreen.Body = StyledBody$4;
2945
2945
  ModalFullScreen.Footer = StyledFooter;
2946
2946
  ModalFullScreen.Close = StyledModalClose;
2947
2947
  ModalFullScreen.FooterItem = FooterItem;
2948
- var templateObject_1$m, templateObject_2$e, templateObject_3$b, templateObject_4$8, templateObject_5$4;
2948
+ var templateObject_1$m, templateObject_2$e, templateObject_3$c, templateObject_4$8, templateObject_5$4;
2949
2949
 
2950
2950
  /**
2951
2951
  * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
@@ -2986,7 +2986,7 @@ var InformationContainer = styled__default["default"].div(templateObject_2$d ||
2986
2986
  var theme = _a.theme;
2987
2987
  return theme.breakpoints.sm;
2988
2988
  });
2989
- var MetaContainer = styled__default["default"].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
2989
+ var MetaContainer = styled__default["default"].div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n\n @media screen and (max-width: ", ") {\n display: none;\n }\n"])), function (_a) {
2990
2990
  var theme = _a.theme;
2991
2991
  return theme.breakpoints.sm;
2992
2992
  });
@@ -3041,7 +3041,7 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
3041
3041
  var Main = function (props) {
3042
3042
  return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(InformationContainer, { children: props.children }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
3043
3043
  };
3044
- var templateObject_1$k, templateObject_2$d, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
3044
+ var templateObject_1$k, templateObject_2$d, templateObject_3$b, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
3045
3045
 
3046
3046
  var PageContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
3047
3047
  var theme = _a.theme;
@@ -3066,7 +3066,7 @@ var StyledPageHeader = styled__default["default"].div(templateObject_2$c || (tem
3066
3066
  var theme = _a.theme;
3067
3067
  return theme.breakpoints.xxl;
3068
3068
  });
3069
- var PullLeft = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
3069
+ var PullLeft = styled__default["default"].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
3070
3070
  var theme = _a.theme;
3071
3071
  return "".concat(theme.space.xs, " 10px");
3072
3072
  }, function (_a) {
@@ -3098,7 +3098,7 @@ PageHeader.Overline = MainOverline;
3098
3098
  PageHeader.Title = MainTitle;
3099
3099
  PageHeader.Description = MainDescription;
3100
3100
  PageHeader.Counters = MainCounters;
3101
- var templateObject_1$j, templateObject_2$c, templateObject_3$9, templateObject_4$6;
3101
+ var templateObject_1$j, templateObject_2$c, templateObject_3$a, templateObject_4$6;
3102
3102
 
3103
3103
  var _path$5;
3104
3104
  function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : 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$6.apply(this, arguments); }
@@ -3139,7 +3139,7 @@ var templateObject_1$i;
3139
3139
 
3140
3140
  var flexCenter = styled.css(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
3141
3141
  var flexColumnCenter = styled.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n ", ";\n flex-direction: column;\n"], ["\n ", ";\n flex-direction: column;\n"])), flexCenter);
3142
- var flexStart = styled.css(templateObject_3$8 || (templateObject_3$8 = __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) {
3142
+ var flexStart = styled.css(templateObject_3$9 || (templateObject_3$9 = __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) {
3143
3143
  var theme = _a.theme;
3144
3144
  return (theme.rtl ? "flex-end" : "flex-start");
3145
3145
  });
@@ -3156,7 +3156,7 @@ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n
3156
3156
  var theme = _a.theme;
3157
3157
  return theme.shadows.boxShadow(theme);
3158
3158
  });
3159
- var templateObject_1$h, templateObject_2$b, templateObject_3$8, templateObject_4$5;
3159
+ var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$5;
3160
3160
 
3161
3161
  /**
3162
3162
  * 1. Allows an item to contain a positioned sub-menu.
@@ -3168,7 +3168,7 @@ var StyledItem = styled__default["default"].li(templateObject_1$g || (templateOb
3168
3168
  return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
3169
3169
  });
3170
3170
  var StyledBody$3 = styled__default["default"].li(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
3171
- var IconContainer = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: 3px;\n"], ["\n margin-right: ", ";\n margin-top: 3px;\n"])), function (_a) {
3171
+ var IconContainer = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n margin-right: ", ";\n margin-top: 3px;\n"], ["\n margin-right: ", ";\n margin-top: 3px;\n"])), function (_a) {
3172
3172
  var theme = _a.theme;
3173
3173
  return theme.space.sm;
3174
3174
  });
@@ -3181,7 +3181,7 @@ var MenuItem = function (_a) {
3181
3181
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
3182
3182
  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));
3183
3183
  };
3184
- var templateObject_1$g, templateObject_2$a, templateObject_3$7, templateObject_4$4;
3184
+ var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$4;
3185
3185
 
3186
3186
  var _path$3;
3187
3187
  function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : 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$4.apply(this, arguments); }
@@ -3251,7 +3251,7 @@ var getInitials = function (name) {
3251
3251
 
3252
3252
  var StyledButton$1 = styled__default["default"](Button)(templateObject_1$d || (templateObject_1$d = __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 }"); });
3253
3253
  var StyledFooterButton = styled__default["default"](StyledButton$1)(templateObject_2$9 || (templateObject_2$9 = __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]; });
3254
- var StyledBody$2 = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
3254
+ var StyledBody$2 = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n margin: ", "px\n ", "px;\n"], ["\n margin: ", "px\n ", "px;\n"])), function (_a) {
3255
3255
  var theme = _a.theme;
3256
3256
  return theme.space.base * 6;
3257
3257
  }, function (_a) {
@@ -3278,7 +3278,7 @@ var HelpItem = function (props) {
3278
3278
  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"] }))] })] }));
3279
3279
  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 })) }));
3280
3280
  };
3281
- var templateObject_1$d, templateObject_2$9, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
3281
+ var templateObject_1$d, templateObject_2$9, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6;
3282
3282
 
3283
3283
  function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : 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); }
3284
3284
  var SvgEmpty = function SvgEmpty(props) {
@@ -3315,13 +3315,13 @@ var StyledBody$1 = styled__default["default"].div(templateObject_1$c || (templat
3315
3315
  return theme.space.base * 4;
3316
3316
  });
3317
3317
  var StyledButtonContainer = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n & button { \n justify-content: flex-start;\n }\n"], ["\n ", "\n & button { \n justify-content: flex-start;\n }\n"])), flexStart);
3318
- var StyledButton = styled__default["default"](Button)(templateObject_3$5 || (templateObject_3$5 = __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 }"); });
3318
+ var StyledButton = styled__default["default"](Button)(templateObject_3$6 || (templateObject_3$6 = __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 }"); });
3319
3319
  var LanguageItem = function (props) {
3320
3320
  var _a;
3321
3321
  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 }))] }))); }) }) })] }));
3322
3322
  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] }))] }) })) }));
3323
3323
  };
3324
- var templateObject_1$c, templateObject_2$8, templateObject_3$5;
3324
+ var templateObject_1$c, templateObject_2$8, templateObject_3$6;
3325
3325
 
3326
3326
  var ProfileContainer = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"], ["\n ", "\n padding-top: ", "px;\n margin-bottom: ", "px;\n"])), flexColumnCenter, function (_a) {
3327
3327
  var theme = _a.theme;
@@ -3340,7 +3340,7 @@ var CompanyHolder = styled__default["default"](SM)(templateObject_2$7 || (templa
3340
3340
  var theme = _a.theme;
3341
3341
  return theme.colors.primaryHue;
3342
3342
  });
3343
- var UserDetails = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __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) {
3343
+ var UserDetails = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __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) {
3344
3344
  var theme = _a.theme;
3345
3345
  return theme.space.base * 4;
3346
3346
  }, function (_a) {
@@ -3351,7 +3351,7 @@ var UserContainer = function (props) {
3351
3351
  var _a;
3352
3352
  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 }))] })] }));
3353
3353
  };
3354
- var templateObject_1$b, templateObject_2$7, templateObject_3$4;
3354
+ var templateObject_1$b, templateObject_2$7, templateObject_3$5;
3355
3355
 
3356
3356
  var StyledList = styled__default["default"].ul(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n padding: 0;\n margin: 0;\n"], ["\n padding: 0;\n margin: 0;\n"])));
3357
3357
  var UserMenu = function (props) {
@@ -3408,7 +3408,7 @@ var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateOb
3408
3408
  return theme.palette.green[700];
3409
3409
  });
3410
3410
  var UgLabel = styled__default["default"](reactAccordions.Stepper.Label)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject([""], [""])));
3411
- var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\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 (_a) {
3411
+ var UgStepper = styled__default["default"](reactAccordions.Stepper)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n div[data-garden-id=\"accordions.step_icon\"] {\n background-color: ", ";\n color: ", ";\n font-weight: bold;\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 (_a) {
3412
3412
  var theme = _a.theme;
3413
3413
  return theme.palette.grey[200];
3414
3414
  }, function (_a) {
@@ -3443,7 +3443,7 @@ var Stepper = function (props) {
3443
3443
  Stepper.Step = UgStep;
3444
3444
  Stepper.Label = UgLabel;
3445
3445
  Stepper.Content = UgContent;
3446
- var templateObject_1$8, templateObject_2$5, templateObject_3$3, templateObject_4$2, templateObject_5$1;
3446
+ var templateObject_1$8, templateObject_2$5, templateObject_3$4, templateObject_4$2, templateObject_5$1;
3447
3447
 
3448
3448
  var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$7 || (templateObject_1$7 = __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) {
3449
3449
  var theme = _a.theme;
@@ -3453,7 +3453,7 @@ var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$7 |
3453
3453
  return theme.borderRadii.lg;
3454
3454
  });
3455
3455
  var UgHeaderRow = styled__default["default"](reactTables.HeaderRow)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n border: 0;\n"], ["\n border: 0;\n"])));
3456
- var UgHeaderCell = styled__default["default"](reactTables.HeaderCell)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"], ["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"])), function (_a) {
3456
+ var UgHeaderCell = styled__default["default"](reactTables.HeaderCell)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"], ["\n border-bottom: 1px solid ", ";\n vertical-align: middle;\n"])), function (_a) {
3457
3457
  var theme = _a.theme;
3458
3458
  return theme.palette.grey[300];
3459
3459
  });
@@ -3480,11 +3480,11 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
3480
3480
  var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
3481
3481
  var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
3482
3482
  var Caption = function (props) { return (jsxRuntime.jsx(reactTables.Caption, __assign({}, props))); };
3483
- var templateObject_1$7, templateObject_2$4, templateObject_3$2, templateObject_4$1, templateObject_5;
3483
+ var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4$1, templateObject_5;
3484
3484
 
3485
3485
  var StyledAnimatedToggle = styled__default["default"](reactSpring.animated.div)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: inline-block;\n float: right;\n"], ["\n display: inline-block;\n float: right;\n"])));
3486
3486
  var StyledUgIcon = styled__default["default"](Icon)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject([""], [""])));
3487
- var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3$1 || (templateObject_3$1 = __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);
3487
+ var UgGroupRow = styled__default["default"](reactTables.GroupRow)(templateObject_3$2 || (templateObject_3$2 = __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);
3488
3488
  var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
3489
3489
  var GroupRowComponent = function (props) {
3490
3490
  var toggleIconAnimation = reactSpring.useSpring({
@@ -3513,7 +3513,7 @@ var GroupedTable = function (_a) {
3513
3513
  return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
3514
3514
  }) })] })));
3515
3515
  };
3516
- var templateObject_1$6, templateObject_2$3, templateObject_3$1, templateObject_4;
3516
+ var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4;
3517
3517
 
3518
3518
  var StyledNavButton = styled__default["default"](reactButtons.Button)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n padding: 10px 28px 6px;\n color: ", ";\n border-bottom: ", " transparent;\n border-width: 0 0 ", " 0;\n border-radius: 0;\n\n ", "\n\n ", "\n\n &:hover {\n background-color: transparent;\n color: ", ";\n }\n"], ["\n padding: 10px 28px 6px;\n color: ", ";\n border-bottom: ", " transparent;\n border-width: 0 0 ", " 0;\n border-radius: 0;\n\n ", "\n\n ", "\n\n &:hover {\n background-color: transparent;\n color: ", ";\n }\n"])), function (_a) {
3519
3519
  var theme = _a.theme;
@@ -3530,7 +3530,8 @@ var StyledNavButton = styled__default["default"](reactButtons.Button)(templateOb
3530
3530
  "\n color: ".concat(theme.colors.primaryHue, ";\n background-color: transparent;\n \n border-color: ").concat(theme.colors.primaryHue, ";\n font-weight: ").concat(theme.fontWeights.semibold, ";\n ");
3531
3531
  }, function (_a) {
3532
3532
  var disabled = _a.disabled;
3533
- return disabled && "\n pointer-events: none; \n background-color: transparent !important;\n ";
3533
+ return disabled &&
3534
+ "\n pointer-events: none; \n background-color: transparent !important;\n ";
3534
3535
  }, function (_a) {
3535
3536
  var theme = _a.theme;
3536
3537
  return theme.colors.primaryHue;
@@ -3542,7 +3543,11 @@ var StyledTabList = styled__default["default"].div(templateObject_2$2 || (templa
3542
3543
  var theme = _a.theme;
3543
3544
  return theme.space.md;
3544
3545
  });
3545
- var TabPanel = function (props) { return jsxRuntime.jsx("div", { children: props.children }); };
3546
+ var StyledTabPanel = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: ", ";\n height: 100%;\n overflow-y: auto;\n"], ["\n display: ", ";\n height: 100%;\n overflow-y: auto;\n"])), function (_a) {
3547
+ var hidden = _a.hidden;
3548
+ return (hidden ? "none" : "block");
3549
+ });
3550
+ var TabPanel = function (props) { return (jsxRuntime.jsx(StyledTabPanel, __assign({ hidden: props.hidden }, { children: props.children }))); };
3546
3551
  var TabNavItem = function (props) {
3547
3552
  var children = props.children, isSelected = props.isSelected, isDisabled = props.isDisabled, index = props.index, setSelectedTab = props.setSelectedTab;
3548
3553
  var handleTabClick = React.useCallback(function () {
@@ -3563,13 +3568,19 @@ var Tabs = function (props) {
3563
3568
  props.onTabChange(selectedTabIndex);
3564
3569
  }
3565
3570
  }, [selectedTabIndex]);
3566
- return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledTabList, { children: tabPanels.map(function (item, index) {
3571
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledTabList, { children: tabPanels.map(function (item, index) {
3567
3572
  var _a;
3568
3573
  return React__default["default"].isValidElement(item) ? (jsxRuntime.jsx(TabNavItem, __assign({ index: index, isSelected: index === selectedTabIndex, setSelectedTab: setSelectedTabIndex }, item.props, { children: (_a = item.props) === null || _a === void 0 ? void 0 : _a.title }))) : null;
3569
- }) }), tabPanels[selectedTabIndex]] }));
3574
+ }) }), tabPanels.map(function (item, index) {
3575
+ if (React__default["default"].isValidElement(item) &&
3576
+ index !== selectedTabIndex) {
3577
+ return React__default["default"].cloneElement(item, { hidden: true });
3578
+ }
3579
+ return item;
3580
+ })] }));
3570
3581
  };
3571
3582
  Tabs.Panel = TabPanel;
3572
- var templateObject_1$5, templateObject_2$2;
3583
+ var templateObject_1$5, templateObject_2$2, templateObject_3$1;
3573
3584
 
3574
3585
  /**
3575
3586
  * Tiles are Radio buttons styled with icons or images.
package/build/stories/tabs/_types.d.ts CHANGED
@@ -3,15 +3,16 @@ export interface TabsArgs extends HTMLAttributes<HTMLDivElement> {
3
3
  selectedIndex?: number;
4
4
  onTabChange?: (index: number) => void;
5
5
  }
6
- export interface TabItemProps {
6
+ export interface TabItemProps extends HTMLAttributes<HTMLDivElement> {
7
7
  children: React.ReactNode;
8
8
  index: number;
9
9
  isSelected?: boolean;
10
10
  isDisabled?: boolean;
11
11
  setSelectedTab: (index: number) => void;
12
12
  }
13
- export interface TabPanelProps {
13
+ export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
14
14
  children: React.ReactNode;
15
15
  isDisabled?: boolean;
16
16
  title: string;
17
+ hidden?: boolean;
17
18
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "2.12.40",
3
+ "version": "2.12.41",
4
4
  "dependencies": {
5
5
  "@nivo/bar": "^0.80.0",
6
6
  "@nivo/bullet": "^0.80.0",