@appquality/unguess-design-system 2.12.40 → 2.12.42

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 (7) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/build/index.js +117 -95
  3. package/build/stories/charts/Legend.d.ts +7 -3
  4. package/build/stories/charts/pie/_types.d.ts +2 -3
  5. package/build/stories/charts/sunburst/_types.d.ts +2 -3
  6. package/build/stories/tabs/_types.d.ts +3 -2
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,30 @@
1
+ # v2.12.42 (Thu Dec 01 2022)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Allow centering and resizing legend [#132](https://github.com/AppQuality/unguess-design-system/pull/132) ([@d-beezee](https://github.com/d-beezee))
6
+ - feat: Allow styling legend width and move legend to specific container [#131](https://github.com/AppQuality/unguess-design-system/pull/131) ([@d-beezee](https://github.com/d-beezee))
7
+
8
+ #### Authors: 1
9
+
10
+ - [@d-beezee](https://github.com/d-beezee)
11
+
12
+ ---
13
+
14
+ # v2.12.41 (Thu Dec 01 2022)
15
+
16
+ #### 🐛 Bug Fix
17
+
18
+ - Fix tabs and allow scroll [#130](https://github.com/AppQuality/unguess-design-system/pull/130) ([@d-beezee](https://github.com/d-beezee))
19
+ - fix: Type fix [#129](https://github.com/AppQuality/unguess-design-system/pull/129) ([@d-beezee](https://github.com/d-beezee))
20
+ - 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))
21
+
22
+ #### Authors: 1
23
+
24
+ - [@d-beezee](https://github.com/d-beezee)
25
+
26
+ ---
27
+
1
28
  # v2.12.40 (Thu Dec 01 2022)
2
29
 
3
30
  #### 🐛 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
  });
@@ -1225,24 +1225,27 @@ var LegendItem = function (_a) {
1225
1225
  var marginRight = theme.space.base * 2;
1226
1226
  return (jsxRuntime.jsxs(LegendItemWrapper, { children: [jsxRuntime.jsx(LegendColoredSquare, { color: color, size: squareSide, marginRight: marginRight }), jsxRuntime.jsx(StyledSM, __assign({ isBold: true, squareSize: squareSide + marginRight }, { children: jsxRuntime.jsx(StyledEllipsis$1, { children: value }) }))] }));
1227
1227
  };
1228
- var LegendWrapper = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n width: 75%;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n"], ["\n width: 75%;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n"])), function (_a) {
1228
+ var LegendWrapper = styled__default["default"].div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n width: ", ";\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n"], ["\n width: ", ";\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n"])), function (_a) {
1229
+ var width = _a.width;
1230
+ return width;
1231
+ }, function (_a) {
1229
1232
  var columns = _a.columns;
1230
1233
  return columns;
1231
1234
  });
1232
1235
  var Legend = function (_a) {
1233
- var colors = _a.colors, data = _a.data, _b = _a.columns, columns = _b === void 0 ? 2 : _b;
1236
+ var colors = _a.colors, data = _a.data, _b = _a.columns, columns = _b === void 0 ? 2 : _b, _c = _a.width, width = _c === void 0 ? "75%" : _c;
1234
1237
  var colorScheme = data.map(function (d, index) {
1235
1238
  return { value: d, color: colors[index % colors.length] };
1236
1239
  });
1237
- return (jsxRuntime.jsx(LegendWrapper, __assign({ columns: columns }, { children: colorScheme.map(function (item) { return (jsxRuntime.jsx(LegendItem, __assign({}, item), item.value)); }) })));
1240
+ return (jsxRuntime.jsx(LegendWrapper, __assign({ columns: columns, width: width }, { children: colorScheme.map(function (item) { return (jsxRuntime.jsx(LegendItem, __assign({}, item), item.value)); }) })));
1238
1241
  };
1239
- var templateObject_1$18, templateObject_2$t, templateObject_3$h, templateObject_4$e, templateObject_5$6;
1242
+ var templateObject_1$18, templateObject_2$t, templateObject_3$i, templateObject_4$e, templateObject_5$6;
1240
1243
 
1241
1244
  var PieChart = function (_a) {
1242
1245
  var _b;
1243
1246
  var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin, tooltip = _a.tooltip, legend = _a.legend;
1244
1247
  var themeContext = React.useContext(styled.ThemeContext);
1245
- return (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(ChartContainer, __assign({ width: width, height: height }, { children: [jsxRuntime.jsx(pie.ResponsivePie, { theme: __assign({}, __assign(__assign(__assign({}, DEFAULT_CHARTS_THEME), theme), { labels: __assign(__assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: __assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_b = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _b === void 0 ? void 0 : _b.text) }) })), arcLinkLabel: function (d) { return (d.label || d.id).toString(); }, colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, padAngle: 2, data: data, margin: __assign({ top: 40, bottom: 40 }, margin), tooltip: tooltip
1248
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: __assign({}, __assign(__assign(__assign({}, DEFAULT_CHARTS_THEME), theme), { labels: __assign(__assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: __assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_b = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _b === void 0 ? void 0 : _b.text) }) })), arcLinkLabel: function (d) { return (d.label || d.id).toString(); }, colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, padAngle: 2, data: data, margin: __assign({ top: 40, bottom: 40 }, margin), tooltip: tooltip
1246
1249
  ? function (node) {
1247
1250
  var data = node.datum.data;
1248
1251
  var label = (data === null || data === void 0 ? void 0 : data.label) || data.id;
@@ -1257,7 +1260,11 @@ var PieChart = function (_a) {
1257
1260
  ? [
1258
1261
  function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))); },
1259
1262
  ]
1260
- : []), true), activeOuterRadiusOffset: 12 }), legend ? (jsxRuntime.jsx(Legend, { colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.map(function (d) { return d.id; }), columns: typeof legend === "object" ? legend.columns : undefined })) : undefined] })) }));
1263
+ : []), true), activeOuterRadiusOffset: 12 }) })), jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, { colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.map(function (d) { return d.id; }), columns: typeof legend === "object" && legend.columns
1264
+ ? legend.columns
1265
+ : undefined, width: typeof legend === "object" && legend.width
1266
+ ? legend.width
1267
+ : undefined })) : undefined }))] }));
1261
1268
  };
1262
1269
 
1263
1270
  var AbsoluteChartContainer = styled__default["default"](ChartContainer)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n ", ";\n ", ";\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n ", ";\n ", ";\n"])), function (_a) {
@@ -1360,47 +1367,51 @@ var SunburstChart = function (_a) {
1360
1367
  };
1361
1368
  if (!data.children)
1362
1369
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
1363
- return (jsxRuntime.jsxs(ChartContainer, __assign({ width: width, height: height, style: isHovering ? { cursor: "pointer" } : undefined }, { children: [jsxRuntime.jsx(sunburst.ResponsiveSunburst, { theme: tooltip
1364
- ? __assign(__assign({}, DEFAULT_CHARTS_THEME), { tooltip: __assign(__assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
1365
- padding: 0,
1366
- } }) }) : DEFAULT_CHARTS_THEME, colors: currentColor
1367
- ? function () { return currentColor; }
1368
- : colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, borderWidth: 4, cornerRadius: 3, onMouseEnter: function (node) {
1369
- if (node.data.children) {
1370
- setIsHovering(true);
1371
- }
1372
- }, onMouseLeave: function (node) {
1373
- if (node.data.children) {
1374
- setIsHovering(false);
1375
- }
1376
- }, tooltip: tooltip
1377
- ? function (node) { return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
1378
- label: node.data.label || node.data.name,
1379
- value: getChildrenValue(node.data),
1380
- }) })); }
1381
- : undefined, layers: __spreadArray(__spreadArray([
1382
- "arcs"
1383
- ], (centerItem
1384
- ? [
1385
- function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { fontSizeMultiplier: centerItem.fontSizeMultiplier, theme: themeContext, label: centerItem.label, value: centerItem.value }))); },
1386
- ]
1387
- : []), true), (currentColor
1388
- ? [
1389
- function (props) { return (jsxRuntime.jsx(ResetButton, { centerX: props.centerX, centerY: props.centerY, radius: props.radius, theme: themeContext, onClick: function () {
1390
- changeDataSlice({
1391
- data: data,
1392
- });
1393
- } })); },
1394
- ]
1395
- : []), true), id: "name", value: "value", margin: __assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.5]] }, onClick: function (clickedData) {
1396
- var foundObject = findChildrenByName(currentData, clickedData.id.toString());
1397
- if (foundObject && foundObject.children) {
1398
- changeDataSlice({
1399
- data: foundObject,
1400
- color: clickedData.color,
1401
- });
1402
- }
1403
- } }), legend ? (jsxRuntime.jsx(Legend, { colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.children.map(function (d) { return d.name; }), columns: typeof legend === "object" ? legend.columns : undefined })) : undefined] })));
1370
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height, style: isHovering ? { cursor: "pointer" } : undefined }, { children: jsxRuntime.jsx(sunburst.ResponsiveSunburst, { theme: tooltip
1371
+ ? __assign(__assign({}, DEFAULT_CHARTS_THEME), { tooltip: __assign(__assign({}, DEFAULT_CHARTS_THEME.tooltip), { container: {
1372
+ padding: 0,
1373
+ } }) }) : DEFAULT_CHARTS_THEME, colors: currentColor
1374
+ ? function () { return currentColor; }
1375
+ : colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, borderWidth: 4, cornerRadius: 3, onMouseEnter: function (node) {
1376
+ if (node.data.children) {
1377
+ setIsHovering(true);
1378
+ }
1379
+ }, onMouseLeave: function (node) {
1380
+ if (node.data.children) {
1381
+ setIsHovering(false);
1382
+ }
1383
+ }, tooltip: tooltip
1384
+ ? function (node) { return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
1385
+ label: node.data.label || node.data.name,
1386
+ value: getChildrenValue(node.data),
1387
+ }) })); }
1388
+ : undefined, layers: __spreadArray(__spreadArray([
1389
+ "arcs"
1390
+ ], (centerItem
1391
+ ? [
1392
+ function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { fontSizeMultiplier: centerItem.fontSizeMultiplier, theme: themeContext, label: centerItem.label, value: centerItem.value }))); },
1393
+ ]
1394
+ : []), true), (currentColor
1395
+ ? [
1396
+ function (props) { return (jsxRuntime.jsx(ResetButton, { centerX: props.centerX, centerY: props.centerY, radius: props.radius, theme: themeContext, onClick: function () {
1397
+ changeDataSlice({
1398
+ data: data,
1399
+ });
1400
+ } })); },
1401
+ ]
1402
+ : []), true), id: "name", value: "value", margin: __assign({ top: 40, bottom: 40 }, margin), data: currentData, childColor: { from: "color", modifiers: [["brighter", 0.5]] }, onClick: function (clickedData) {
1403
+ var foundObject = findChildrenByName(currentData, clickedData.id.toString());
1404
+ if (foundObject && foundObject.children) {
1405
+ changeDataSlice({
1406
+ data: foundObject,
1407
+ color: clickedData.color,
1408
+ });
1409
+ }
1410
+ } }) })), jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, { colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.children.map(function (d) { return d.name; }), columns: typeof legend === "object" && legend.columns
1411
+ ? legend.columns
1412
+ : undefined, width: typeof legend === "object" && legend.width
1413
+ ? legend.width
1414
+ : undefined })) : undefined }))] }));
1404
1415
  };
1405
1416
 
1406
1417
  var CustomCell = function (_a) {
@@ -1561,7 +1572,7 @@ var templateObject_1$11;
1561
1572
 
1562
1573
  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
1574
  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) {
1575
+ 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
1576
  var theme = _a.theme;
1566
1577
  return theme.space.sm;
1567
1578
  }, function (_a) {
@@ -1587,7 +1598,7 @@ var ItemContent = function (props) {
1587
1598
  var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
1588
1599
  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
1600
  };
1590
- var templateObject_1$10, templateObject_2$r, templateObject_3$g, templateObject_4$d, templateObject_5$5;
1601
+ var templateObject_1$10, templateObject_2$r, templateObject_3$h, templateObject_4$d, templateObject_5$5;
1591
1602
 
1592
1603
  /**
1593
1604
  * A Menu is a wrapper for items elements
@@ -2045,7 +2056,7 @@ var StyledLabel = styled__default["default"](Label)(templateObject_2$m || (templ
2045
2056
  var theme = _a.theme;
2046
2057
  return "".concat(theme.space.xxs, " ").concat(theme.space.xxs, " 0");
2047
2058
  });
2048
- var StyledText$1 = styled__default["default"](XL)(templateObject_3$f || (templateObject_3$f = __makeTemplateObject([""], [""])));
2059
+ var StyledText$1 = styled__default["default"](XL)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject([""], [""])));
2049
2060
  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
2061
  var theme = _a.theme;
2051
2062
  return "".concat(theme.space.xs, " ").concat(theme.space.xxs);
@@ -2095,7 +2106,7 @@ var InputItem = function (props) {
2095
2106
  };
2096
2107
  InputToggle.Item = InputItem;
2097
2108
  InputToggle.Label = StyledLabel;
2098
- var templateObject_1$Q, templateObject_2$m, templateObject_3$f, templateObject_4$c;
2109
+ var templateObject_1$Q, templateObject_2$m, templateObject_3$g, templateObject_4$c;
2099
2110
 
2100
2111
  var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject([""], [""])));
2101
2112
  /**
@@ -2414,7 +2425,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
2414
2425
  var theme = _a.theme;
2415
2426
  return theme.breakpoints.md;
2416
2427
  });
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) {
2428
+ 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
2429
  var theme = _a.theme;
2419
2430
  return theme.colors.primaryHue;
2420
2431
  }, function (_a) {
@@ -2434,7 +2445,7 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
2434
2445
  var BrandItem = function (props) {
2435
2446
  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
2447
  };
2437
- var templateObject_1$C, templateObject_2$j, templateObject_3$e, templateObject_4$b;
2448
+ var templateObject_1$C, templateObject_2$j, templateObject_3$f, templateObject_4$b;
2438
2449
 
2439
2450
  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
2451
  /**
@@ -2768,7 +2779,7 @@ var AccordionItemHeader = styled__default["default"](Accordion.Header)(templateO
2768
2779
  var theme = _a.theme;
2769
2780
  return theme.space.base * 6;
2770
2781
  }, 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"])));
2782
+ 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
2783
  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
2784
  var theme = _a.theme;
2774
2785
  return "\n color: ".concat(theme.colors.primaryHue, ";\n fill: ").concat(theme.colors.primaryHue, ";\n font-weight: ").concat(theme.fontWeights.medium, ";\n ");
@@ -2776,11 +2787,11 @@ var AccordionItemLabel = styled__default["default"](Accordion.Label)(templateObj
2776
2787
  AccordionItem.Panel = AccordionItemPanel;
2777
2788
  AccordionItem.Header = AccordionItemHeader;
2778
2789
  AccordionItem.Label = AccordionItemLabel;
2779
- var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$a;
2790
+ var templateObject_1$s, templateObject_2$g, templateObject_3$e, templateObject_4$a;
2780
2791
 
2781
2792
  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
2793
  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) {
2794
+ 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
2795
  var isExpanded = _a.isExpanded;
2785
2796
  return isExpanded &&
2786
2797
  "\n display: block;\n padding-right: ".concat(theme.space.md, ";\n ");
@@ -2836,7 +2847,7 @@ var Sidebar = function (_a) {
2836
2847
  color: theme.palette.grey[800],
2837
2848
  } }, { 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
2849
  };
2839
- var templateObject_1$r, templateObject_2$f, templateObject_3$c, templateObject_4$9;
2850
+ var templateObject_1$r, templateObject_2$f, templateObject_3$d, templateObject_4$9;
2840
2851
 
2841
2852
  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
2853
  var theme = _a.theme;
@@ -2918,7 +2929,7 @@ var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$e |
2918
2929
  var theme = _a.theme;
2919
2930
  return theme.space.md;
2920
2931
  });
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) {
2932
+ 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
2933
  var theme = _a.theme;
2923
2934
  return theme.palette.grey["100"];
2924
2935
  }, function (_a) {
@@ -2945,7 +2956,7 @@ ModalFullScreen.Body = StyledBody$4;
2945
2956
  ModalFullScreen.Footer = StyledFooter;
2946
2957
  ModalFullScreen.Close = StyledModalClose;
2947
2958
  ModalFullScreen.FooterItem = FooterItem;
2948
- var templateObject_1$m, templateObject_2$e, templateObject_3$b, templateObject_4$8, templateObject_5$4;
2959
+ var templateObject_1$m, templateObject_2$e, templateObject_3$c, templateObject_4$8, templateObject_5$4;
2949
2960
 
2950
2961
  /**
2951
2962
  * The Chrome component provides a high-level layout structure and sets a framework for navigating around Zendesk products.
@@ -2986,7 +2997,7 @@ var InformationContainer = styled__default["default"].div(templateObject_2$d ||
2986
2997
  var theme = _a.theme;
2987
2998
  return theme.breakpoints.sm;
2988
2999
  });
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) {
3000
+ 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
3001
  var theme = _a.theme;
2991
3002
  return theme.breakpoints.sm;
2992
3003
  });
@@ -3041,7 +3052,7 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
3041
3052
  var Main = function (props) {
3042
3053
  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
3054
  };
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;
3055
+ 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
3056
 
3046
3057
  var PageContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
3047
3058
  var theme = _a.theme;
@@ -3066,7 +3077,7 @@ var StyledPageHeader = styled__default["default"].div(templateObject_2$c || (tem
3066
3077
  var theme = _a.theme;
3067
3078
  return theme.breakpoints.xxl;
3068
3079
  });
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) {
3080
+ 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
3081
  var theme = _a.theme;
3071
3082
  return "".concat(theme.space.xs, " 10px");
3072
3083
  }, function (_a) {
@@ -3098,7 +3109,7 @@ PageHeader.Overline = MainOverline;
3098
3109
  PageHeader.Title = MainTitle;
3099
3110
  PageHeader.Description = MainDescription;
3100
3111
  PageHeader.Counters = MainCounters;
3101
- var templateObject_1$j, templateObject_2$c, templateObject_3$9, templateObject_4$6;
3112
+ var templateObject_1$j, templateObject_2$c, templateObject_3$a, templateObject_4$6;
3102
3113
 
3103
3114
  var _path$5;
3104
3115
  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 +3150,7 @@ var templateObject_1$i;
3139
3150
 
3140
3151
  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
3152
  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) {
3153
+ 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
3154
  var theme = _a.theme;
3144
3155
  return (theme.rtl ? "flex-end" : "flex-start");
3145
3156
  });
@@ -3156,7 +3167,7 @@ styled.css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n
3156
3167
  var theme = _a.theme;
3157
3168
  return theme.shadows.boxShadow(theme);
3158
3169
  });
3159
- var templateObject_1$h, templateObject_2$b, templateObject_3$8, templateObject_4$5;
3170
+ var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$5;
3160
3171
 
3161
3172
  /**
3162
3173
  * 1. Allows an item to contain a positioned sub-menu.
@@ -3168,7 +3179,7 @@ var StyledItem = styled__default["default"].li(templateObject_1$g || (templateOb
3168
3179
  return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
3169
3180
  });
3170
3181
  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) {
3182
+ 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
3183
  var theme = _a.theme;
3173
3184
  return theme.space.sm;
3174
3185
  });
@@ -3181,7 +3192,7 @@ var MenuItem = function (_a) {
3181
3192
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
3182
3193
  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
3194
  };
3184
- var templateObject_1$g, templateObject_2$a, templateObject_3$7, templateObject_4$4;
3195
+ var templateObject_1$g, templateObject_2$a, templateObject_3$8, templateObject_4$4;
3185
3196
 
3186
3197
  var _path$3;
3187
3198
  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 +3262,7 @@ var getInitials = function (name) {
3251
3262
 
3252
3263
  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
3264
  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) {
3265
+ 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
3266
  var theme = _a.theme;
3256
3267
  return theme.space.base * 6;
3257
3268
  }, function (_a) {
@@ -3278,7 +3289,7 @@ var HelpItem = function (props) {
3278
3289
  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
3290
  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
3291
  };
3281
- var templateObject_1$d, templateObject_2$9, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6;
3292
+ var templateObject_1$d, templateObject_2$9, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6;
3282
3293
 
3283
3294
  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
3295
  var SvgEmpty = function SvgEmpty(props) {
@@ -3315,13 +3326,13 @@ var StyledBody$1 = styled__default["default"].div(templateObject_1$c || (templat
3315
3326
  return theme.space.base * 4;
3316
3327
  });
3317
3328
  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 }"); });
3329
+ 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
3330
  var LanguageItem = function (props) {
3320
3331
  var _a;
3321
3332
  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
3333
  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
3334
  };
3324
- var templateObject_1$c, templateObject_2$8, templateObject_3$5;
3335
+ var templateObject_1$c, templateObject_2$8, templateObject_3$6;
3325
3336
 
3326
3337
  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
3338
  var theme = _a.theme;
@@ -3340,7 +3351,7 @@ var CompanyHolder = styled__default["default"](SM)(templateObject_2$7 || (templa
3340
3351
  var theme = _a.theme;
3341
3352
  return theme.colors.primaryHue;
3342
3353
  });
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) {
3354
+ 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
3355
  var theme = _a.theme;
3345
3356
  return theme.space.base * 4;
3346
3357
  }, function (_a) {
@@ -3351,7 +3362,7 @@ var UserContainer = function (props) {
3351
3362
  var _a;
3352
3363
  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
3364
  };
3354
- var templateObject_1$b, templateObject_2$7, templateObject_3$4;
3365
+ var templateObject_1$b, templateObject_2$7, templateObject_3$5;
3355
3366
 
3356
3367
  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
3368
  var UserMenu = function (props) {
@@ -3408,7 +3419,7 @@ var UgStep = styled__default["default"](reactAccordions.Stepper.Step)(templateOb
3408
3419
  return theme.palette.green[700];
3409
3420
  });
3410
3421
  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) {
3422
+ 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
3423
  var theme = _a.theme;
3413
3424
  return theme.palette.grey[200];
3414
3425
  }, function (_a) {
@@ -3443,7 +3454,7 @@ var Stepper = function (props) {
3443
3454
  Stepper.Step = UgStep;
3444
3455
  Stepper.Label = UgLabel;
3445
3456
  Stepper.Content = UgContent;
3446
- var templateObject_1$8, templateObject_2$5, templateObject_3$3, templateObject_4$2, templateObject_5$1;
3457
+ var templateObject_1$8, templateObject_2$5, templateObject_3$4, templateObject_4$2, templateObject_5$1;
3447
3458
 
3448
3459
  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
3460
  var theme = _a.theme;
@@ -3453,7 +3464,7 @@ var UgTable = styled__default["default"](reactTables.Table)(templateObject_1$7 |
3453
3464
  return theme.borderRadii.lg;
3454
3465
  });
3455
3466
  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) {
3467
+ 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
3468
  var theme = _a.theme;
3458
3469
  return theme.palette.grey[300];
3459
3470
  });
@@ -3480,11 +3491,11 @@ var Body = function (props) { return (jsxRuntime.jsx(reactTables.Body, __assign(
3480
3491
  var Row = function (props) { return jsxRuntime.jsx(UgRow, __assign({}, props)); };
3481
3492
  var Cell = function (props) { return jsxRuntime.jsx(UgCell, __assign({}, props)); };
3482
3493
  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;
3494
+ var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4$1, templateObject_5;
3484
3495
 
3485
3496
  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
3497
  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);
3498
+ 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
3499
  var GroupRow = function (props) { return jsxRuntime.jsx(UgGroupRow, __assign({}, props)); };
3489
3500
  var GroupRowComponent = function (props) {
3490
3501
  var toggleIconAnimation = reactSpring.useSpring({
@@ -3513,7 +3524,7 @@ var GroupedTable = function (_a) {
3513
3524
  return jsxRuntime.jsx(GroupComponent, { columns: columns, group: group }, index);
3514
3525
  }) })] })));
3515
3526
  };
3516
- var templateObject_1$6, templateObject_2$3, templateObject_3$1, templateObject_4;
3527
+ var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4;
3517
3528
 
3518
3529
  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
3530
  var theme = _a.theme;
@@ -3530,7 +3541,8 @@ var StyledNavButton = styled__default["default"](reactButtons.Button)(templateOb
3530
3541
  "\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
3542
  }, function (_a) {
3532
3543
  var disabled = _a.disabled;
3533
- return disabled && "\n pointer-events: none; \n background-color: transparent !important;\n ";
3544
+ return disabled &&
3545
+ "\n pointer-events: none; \n background-color: transparent !important;\n ";
3534
3546
  }, function (_a) {
3535
3547
  var theme = _a.theme;
3536
3548
  return theme.colors.primaryHue;
@@ -3542,7 +3554,11 @@ var StyledTabList = styled__default["default"].div(templateObject_2$2 || (templa
3542
3554
  var theme = _a.theme;
3543
3555
  return theme.space.md;
3544
3556
  });
3545
- var TabPanel = function (props) { return jsxRuntime.jsx("div", { children: props.children }); };
3557
+ 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) {
3558
+ var hidden = _a.hidden;
3559
+ return (hidden ? "none" : "block");
3560
+ });
3561
+ var TabPanel = function (props) { return (jsxRuntime.jsx(StyledTabPanel, __assign({ hidden: props.hidden }, { children: props.children }))); };
3546
3562
  var TabNavItem = function (props) {
3547
3563
  var children = props.children, isSelected = props.isSelected, isDisabled = props.isDisabled, index = props.index, setSelectedTab = props.setSelectedTab;
3548
3564
  var handleTabClick = React.useCallback(function () {
@@ -3563,13 +3579,19 @@ var Tabs = function (props) {
3563
3579
  props.onTabChange(selectedTabIndex);
3564
3580
  }
3565
3581
  }, [selectedTabIndex]);
3566
- return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledTabList, { children: tabPanels.map(function (item, index) {
3582
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledTabList, { children: tabPanels.map(function (item, index) {
3567
3583
  var _a;
3568
3584
  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]] }));
3585
+ }) }), tabPanels.map(function (item, index) {
3586
+ if (React__default["default"].isValidElement(item) &&
3587
+ index !== selectedTabIndex) {
3588
+ return React__default["default"].cloneElement(item, { hidden: true });
3589
+ }
3590
+ return item;
3591
+ })] }));
3570
3592
  };
3571
3593
  Tabs.Panel = TabPanel;
3572
- var templateObject_1$5, templateObject_2$2;
3594
+ var templateObject_1$5, templateObject_2$2, templateObject_3$1;
3573
3595
 
3574
3596
  /**
3575
3597
  * Tiles are Radio buttons styled with icons or images.
package/build/stories/charts/Legend.d.ts CHANGED
@@ -1,6 +1,10 @@
1
- declare const Legend: ({ colors, data, columns, }: {
1
+ declare const Legend: ({ colors, data, columns, width, }: {
2
2
  colors: string[];
3
3
  data: (string | number)[];
4
- columns?: number | undefined;
5
- }) => JSX.Element;
4
+ } & LegendType) => JSX.Element;
6
5
  export default Legend;
6
+ declare type LegendType = {
7
+ columns?: number;
8
+ width?: string;
9
+ };
10
+ export type { LegendType };
package/build/stories/charts/pie/_types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { PieSvgProps } from "@nivo/pie";
2
2
  import { ChartTooltipFunction } from "../_types";
3
+ import { LegendType } from "../Legend";
3
4
  declare type PieDatum = {
4
5
  id: string;
5
6
  label?: string;
@@ -20,8 +21,6 @@ export interface PieChartProps {
20
21
  fontSizeMultiplier?: number;
21
22
  };
22
23
  tooltip?: ChartTooltipFunction;
23
- legend?: {
24
- columns?: number;
25
- } | true;
24
+ legend?: LegendType | true;
26
25
  }
27
26
  export {};
package/build/stories/charts/sunburst/_types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { SunburstSvgProps } from "@nivo/sunburst";
2
2
  import { ChartTooltipFunction } from "../_types";
3
+ import { LegendType } from "../Legend";
3
4
  export interface SunburstData {
4
5
  name: string;
5
6
  label?: string;
@@ -20,7 +21,5 @@ export interface SunburstChartProps {
20
21
  };
21
22
  onChange?: (data: SunburstData) => void;
22
23
  tooltip?: ChartTooltipFunction;
23
- legend?: {
24
- columns?: number;
25
- } | true;
24
+ legend?: LegendType | true;
26
25
  }
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.42",
4
4
  "dependencies": {
5
5
  "@nivo/bar": "^0.80.0",
6
6
  "@nivo/bullet": "^0.80.0",