@appquality/unguess-design-system 2.10.16 → 2.10.19

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# v2.10.19 (Thu May 12 2022)
+
+#### ⚠️ Pushed to `master`
+
+- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
+- fix(header-dropdown): fix z-index issues ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.18 (Thu May 12 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(brand-item): update ws schema ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.17 (Thu May 12 2022)
+
+#### 🐛 Bug Fix
+
+- feat(brand-item): add workspaces selector when there is more then one… [#52](https://github.com/AppQuality/unguess-design-system/pull/52) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.10.16 (Fri May 06 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.d.ts

@@ -20,6 +20,7 @@ export * from "./stories/dropdowns/menu";
 export * from "./stories/dropdowns/multiselect";
 export * from "./stories/dropdowns/select";
 export * from "./stories/dropdowns/autocomplete";
+export * from "./stories/dropdowns/menuheader";
 export * from "./stories/forms/checkbox";
 export * from "./stories/forms/checkbox/cards";
 export * as FormField from "./stories/forms/field";

package/build/index.js

@@ -385,11 +385,11 @@ var ContentCard = styled__default["default"](reactNotifications.Well)(templateOb
     - To group related content
  */
 var Card = function (props) { return jsxRuntime.jsx(ContentCard, __assign({}, props)); };
-var ContainerCard = styled__default["default"](Card)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+var ContainerCard = styled__default["default"](Card)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borderRadii.xl;
 });
-var templateObject_1$R, templateObject_2$j;
+var templateObject_1$R, templateObject_2$k;
 
 /**
  * Tags let users categorize content using a keyword.
@@ -641,12 +641,12 @@ var CampaignCardSkeleton = function () {
 };
 
 var flexCenter = styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var flexColumnCenter = styled.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
+var flexColumnCenter = styled.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
 var flexStart = styled.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return (theme.rtl ? "flex-end" : "flex-start");
 });
-var cardStyle = styled.css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"])), function (_a) {
+var cardStyle = styled.css(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -659,7 +659,7 @@ var cardStyle = styled.css(templateObject_4$9 || (templateObject_4$9 = __makeTem
     var theme = _a.theme;
     return theme.shadows.boxShadow(theme);
 });
-var templateObject_1$O, templateObject_2$i, templateObject_3$c, templateObject_4$9;
+var templateObject_1$O, templateObject_2$j, templateObject_3$c, templateObject_4$a;
 
 var getStatusIcon = function (status) {
     switch (status) {
@@ -684,7 +684,7 @@ var getTypeDataIcon = function (type) {
     }
 };
 var Wrapper$1 = styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cardStyle);
-var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"])), function (_a) {
+var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey["700"];
 });
@@ -701,7 +701,7 @@ var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$b || (temp
     var theme = _a.theme;
     return theme.palette.white;
 });
-var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var StyledLabel$2 = styled__default["default"](Label)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fontSizes.sm;
 }, function (_a) {
@@ -745,7 +745,7 @@ var CampaignCard = function (props) {
     }
     return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper$1, __assign({}, props, { children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: date })), isNew && (jsxRuntime.jsx(StyledTagNew$1, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(StyledLabel$2, __assign({ isRegular: true }, { children: projectTitleCut })), jsxRuntime.jsx(StyledTitleLabel$1, __assign({ isRegular: true }, { children: campaignTitleCut }))] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$1, __assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), props.pillText] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
 };
-var templateObject_1$N, templateObject_2$h, templateObject_3$b, templateObject_4$8, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
+var templateObject_1$N, templateObject_2$i, templateObject_3$b, templateObject_4$9, templateObject_5$4, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
 
 var Wrapper = styled__default["default"](Card)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -760,7 +760,7 @@ var Wrapper = styled__default["default"](Card)(templateObject_1$M || (templateOb
     var theme = _a.theme;
     return theme.shadows.boxShadow(theme);
 });
-var StyledTagNew = styled__default["default"](Tag)(templateObject_2$g || (templateObject_2$g = __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) {
+var StyledTagNew = styled__default["default"](Tag)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n  position: absolute;\n  right: 16px;\n  top: 16px;\n"], ["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n  position: absolute;\n  right: 16px;\n  top: 16px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -780,7 +780,7 @@ var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$a || (tem
     var theme = _a.theme;
     return theme.palette.grey["500"];
 });
-var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"])), function (_a) {
+var StyledTitleLabel = styled__default["default"](Label)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  word-wrap: break-word;\n  cursor: pointer;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.blue["600"];
 }, function (_a) {
@@ -808,7 +808,7 @@ var ProductCard = function (props) {
     }
     return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(Wrapper, __assign({}, props, { children: [jsxRuntime.jsxs(CardBody, __assign({ onClick: props.onCtaClick }, { children: [isNew && (jsxRuntime.jsx(StyledTagNew, __assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" }))), props.icon && jsxRuntime.jsx(IconContainer$1, { children: props.icon }), props.preTitle && (jsxRuntime.jsx(StyledLabel$1, __assign({ isRegular: true }, { children: props.preTitle }))), jsxRuntime.jsx(StyledTitleLabel, __assign({ isRegular: true }, { children: productTitleCut }))] })), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(CardFooter, { children: jsxRuntime.jsx(Button, __assign({ isPill: true, isPrimary: true, onClick: props.onCtaClick }, { children: props.ctaLabel })) })] })));
 };
-var templateObject_1$M, templateObject_2$g, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
+var templateObject_1$M, templateObject_2$h, templateObject_3$a, templateObject_4$8, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1133,6 +1133,8 @@ var templateObject_1$I;
  */
 var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autocomplete, __assign({}, props)); };
 
+var MenuHeaderItem = function (props) { return (jsxRuntime.jsx(reactDropdowns.HeaderItem, __assign({}, props))); };
+
 var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
 /**
    * A Checkbox lets users select and unselect options from a list.
@@ -1151,7 +1153,7 @@ var StyledCard$1 = styled__default["default"](Card)(templateObject_1$G || (templ
     var theme = _a.theme;
     return theme.palette.blue[300];
 });
-var IconWrapper$1 = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
+var IconWrapper$1 = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base;
 });
@@ -1162,7 +1164,7 @@ var LabelWrapper = styled__default["default"](Label)(templateObject_3$9 || (temp
     var theme = _a.theme;
     return theme.palette.grey[600];
 });
-var StyledLabel = styled__default["default"](Label)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
+var StyledLabel = styled__default["default"](Label)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base;
 });
@@ -1174,7 +1176,7 @@ var CheckboxCard = function (props) {
     };
     return (jsxRuntime.jsxs(StyledCard$1, __assign({}, props.card, props, props && !props.disabled && { onClick: handleToggle }, { className: checked ? "card-active" : "" }, { children: [jsxRuntime.jsx(IconWrapper$1, { children: (props.iconActive && checked) ? props.iconActive : props.icon }), jsxRuntime.jsx(LabelWrapper, { children: props.label }), jsxRuntime.jsx(Checkbox, __assign({}, props, { checked: checked, value: checked ? 1 : 0, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledLabel, __assign({ hidden: true }, { children: props.label })) }))] })));
 };
-var templateObject_1$G, templateObject_2$f, templateObject_3$9, templateObject_4$6;
+var templateObject_1$G, templateObject_2$g, templateObject_3$9, templateObject_4$7;
 
 var UgField = styled__default["default"](reactForms.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
 /**
@@ -1190,7 +1192,7 @@ var index = /*#__PURE__*/Object.freeze({
 });
 
 var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
-var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject([""], [""])));
+var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject([""], [""])));
 /**
    * An Input lets users enter text into a field.
    * <hr>
@@ -1199,7 +1201,7 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$e || (te
    *  - To enter multiline text, use a Textarea
    **/
 var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
-var templateObject_1$E, templateObject_2$e;
+var templateObject_1$E, templateObject_2$f;
 
 var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
 /**
@@ -1248,7 +1250,7 @@ var StyledCard = styled__default["default"](Card)(templateObject_1$B || (templat
     var theme = _a.theme;
     return theme.palette.blue[300];
 });
-var IconWrapper = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
+var IconWrapper = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n   margin: ", "px auto;\n"], ["\n   margin: ", "px auto;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base;
 });
@@ -1265,7 +1267,7 @@ var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3
     var theme = _a.theme;
     return theme.colors.primaryHue;
 });
-var Circle = styled__default["default"].div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"], ["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"])), function (_a) {
+var Circle = styled__default["default"].div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"], ["\n   width: ", "px;\n   height: ", "px;\n   padding: ", "px;\n   border-radius: 50%;\n   background-color: ", ";\n   display: flex;\n   flex-direction: column;\n   justify-content: center;\n   align-items: center;\n   margin-left: auto;\n   ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -1293,7 +1295,7 @@ var RadioCard = function (_a) {
     var card = _a.card, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["card", "icon", "iconActive"]);
     return (jsxRuntime.jsxs(StyledCard, __assign({}, card, props, { className: props.checked ? "card-active" : "", onClick: function () { props.onChecked && props.onChecked(props.value); } }, { children: [jsxRuntime.jsx(Circle, __assign({ checked: (_b = props.checked) !== null && _b !== void 0 ? _b : false }, { children: jsxRuntime.jsx(SvgCheckLg, { fill: "white" }) })), jsxRuntime.jsx(IconWrapper, { children: (iconActive && props.checked) ? iconActive : icon }), jsxRuntime.jsx("input", { hidden: true, type: "radio", value: props.value, name: props.name, checked: props.checked }), jsxRuntime.jsx(StyledDivider, {}), jsxRuntime.jsx(StyledText, { children: props.label })] })));
 };
-var templateObject_1$B, templateObject_2$d, templateObject_3$8, templateObject_4$5, templateObject_5$2;
+var templateObject_1$B, templateObject_2$e, templateObject_3$8, templateObject_4$6, templateObject_5$2;
 
 var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
 /**
@@ -1457,8 +1459,12 @@ var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateOb
     var theme = _a.theme;
     return theme.fonts.system;
 });
+styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  font-family: ", ";\n"], ["\n  font-family: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.system;
+});
 var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
-var templateObject_1$u;
+var templateObject_1$u, templateObject_2$d;
 
 var UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n    font-family: ", ";\n"], ["\n    font-family: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -1514,6 +1520,16 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
   })));
 };
 
+/**
+ *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
+ */
+var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.sm } : {} }, props)); };
+var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.md } : {} }, props)); };
+var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.lg } : {} }, props)); };
+var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
+var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
+var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
+
 var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  margin-right: 2px;\n  border-right: none;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"], ["\n  margin-right: 2px;\n  border-right: none;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.breakpoints.sm;
@@ -1528,7 +1544,17 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
     var theme = _a.theme;
     return theme.breakpoints.sm;
 });
-var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  color: ", ";\n  position: absolute;\n  left: 0;\n  @media (min-width: ", ") {\n    display: none;\n  }\n"], ["\n  color: ", ";\n  position: absolute;\n  left: 0;\n  @media (min-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  font-family: ", ";\n  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) {
+    var theme = _a.theme;
+    return theme.palette.blue["600"];
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.fonts.system;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
+});
+var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  color: ", ";\n  position: absolute;\n  left: 0;\n  @media (min-width: ", ") {\n    display: none;\n  }\n"], ["\n  color: ", ";\n  position: absolute;\n  left: 0;\n  @media (min-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.blue["600"];
 }, function (_a) {
@@ -1536,9 +1562,17 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
     return theme.breakpoints.sm;
 });
 var BrandItem = function (props) {
-    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.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) })))] }));
+    var _a = React.useState(props.activeWorkspace), selectedWorkspace = _a[0], setSelectedWorkspace = _a[1];
+    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.jsxs(Dropdown, __assign({ selectedItem: selectedWorkspace, onSelect: function (workspace) {
+                        setSelectedWorkspace(workspace);
+                        props.onWorkspaceChange && props.onWorkspaceChange(workspace);
+                    }, downshiftProps: {
+                        itemToString: function (item) { return item && item.company; },
+                    } }, { children: [jsxRuntime.jsx(reactDropdowns.Field, { children: jsxRuntime.jsx(Select, __assign({ style: { color: theme.colors.primaryHue } }, { children: selectedWorkspace
+                                    ? selectedWorkspace.company + "'s workspace"
+                                    : "Select workspace" })) }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsx(MenuHeaderItem, { children: jsxRuntime.jsx(MD, __assign({ isBold: true, style: { color: theme.palette.grey[800] } }, { children: props.workspacesLabel || "Workspaces" })) }), jsxRuntime.jsx(Separator, {}), props.workspaces.map(function (item) { return (jsxRuntime.jsx(Item, __assign({ value: item }, { children: item.company }))); })] })] })) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
 };
-var templateObject_1$s, templateObject_2$c, templateObject_3$7;
+var templateObject_1$s, templateObject_2$c, templateObject_3$7, templateObject_4$5;
 
 var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n    height: ", ";\n"], ["\n    height: ", ";\n"])), theme.components.chrome.header.height);
 /**
@@ -1837,16 +1871,6 @@ var templateObject_1$h;
  */
 var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
 
-/**
- *  Type components come in small, medium, large, extra-large, extra-extra-large, and extra-extra-extra-large.
- */
-var SM = function (props) { return jsxRuntime.jsx(reactTypography.SM, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.sm } : {} }, props)); };
-var MD = function (props) { return jsxRuntime.jsx(reactTypography.MD, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.md } : {} }, props)); };
-var LG = function (props) { return jsxRuntime.jsx(reactTypography.LG, __assign({ style: props.isMonospace ? { lineHeight: theme.lineHeights.lg } : {} }, props)); };
-var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({}, props)); };
-var XXL = function (props) { return jsxRuntime.jsx(reactTypography.XXL, __assign({}, props)); };
-var XXXL = function (props) { return jsxRuntime.jsx(reactTypography.XXXL, __assign({}, props)); };
-
 /**
  * Login Form
  * <hr>
@@ -2475,6 +2499,7 @@ exports.MediaFigure = MediaFigure;
 exports.MediaInput = MediaInput;
 exports.MediaItem = MediaItem;
 exports.Menu = Menu;
+exports.MenuHeaderItem = MenuHeaderItem;
 exports.Message = Message;
 exports.Modal = Modal;
 exports.ModalFullScreen = ModalFullScreen;

package/build/stories/dropdowns/menuheader/_types.d.ts

@@ -0,0 +1,5 @@
+import { IHeaderItemProps } from "@zendeskgarden/react-dropdowns";
+export interface HeaderItemArgs extends IHeaderItemProps {
+    /** Applies icon styling */
+    hasIcon?: boolean;
+}

package/build/stories/dropdowns/menuheader/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { HeaderItemArgs } from "./_types";
+export declare const MenuHeaderItem: (props: HeaderItemArgs) => JSX.Element;

package/build/stories/navigation/app-header/index.stories.d.ts

@@ -2,5 +2,6 @@
 import { ComponentMeta, Story } from "@storybook/react";
 import { AppHeaderArgs } from "./_types";
 export declare const Default: Story<AppHeaderArgs>;
+export declare const MultipleWorkspaces: Story<AppHeaderArgs>;
 declare const _default: ComponentMeta<({ brand, avatar, isLoading, ...args }: AppHeaderArgs) => JSX.Element>;
 export default _default;

package/build/stories/navigation/header/header-item/_types.d.ts

@@ -1,5 +1,19 @@
 import { ButtonHTMLAttributes, HTMLAttributes } from "react";
 import { IHeaderItemProps, IHeaderItemTextProps } from "@zendeskgarden/react-chrome";
+export interface Workspace {
+    id: number;
+    company: string;
+    tokens?: number;
+    logo?: string;
+    csm?: {
+        id: number;
+        email: string;
+        name: string;
+        profile_id: number;
+        tryber_wp_user_id: number;
+        picture?: string;
+    };
+}
 export interface HeaderItemArgs extends IHeaderItemProps {
     /** Maximizes the width of a flex item in the header */
     maxX?: boolean;
@@ -21,6 +35,10 @@ export interface BrandItemArgs extends ButtonHTMLAttributes<HTMLButtonElement> {
     brandName?: string;
     /** Add a descriptive text to the menu item icon*/
     menuLabel?: string;
+    workspacesLabel?: string;
+    activeWorkspace?: Workspace;
+    workspaces?: Workspace[];
+    onWorkspaceChange?: (workspace: Workspace) => void;
     /** Triggered when the menu item is clicked */
     toggleMenu?: () => void;
 }
@@ -30,3 +48,5 @@ export interface HeaderItemTextArgs extends IHeaderItemTextProps {
 }
 export interface HeaderItemIconArgs extends HTMLAttributes<HTMLDivElement> {
 }
+export interface HeaderItemWrapperArgs extends HTMLAttributes<HTMLDivElement> {
+}

package/build/stories/navigation/header/header-item/headerItem.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-import { HeaderItemArgs } from "./_types";
+import { HeaderItemArgs, HeaderItemWrapperArgs } from "./_types";
 declare const HeaderItem: (props: HeaderItemArgs) => JSX.Element;
-export { HeaderItem };
+declare const HeaderItemWrapper: (props: HeaderItemWrapperArgs) => JSX.Element;
+export { HeaderItem, HeaderItemWrapper };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.10.16",
+  "version": "2.10.19",
   "dependencies": {
     "@zendeskgarden/css-bedrock": "^9.0.0",
     "@zendeskgarden/react-accordions": "^8.49.0",