npm - @appquality/unguess-design-system - Versions diffs - 2.10.24 → 2.10.27 - Mend

@appquality/unguess-design-system 2.10.24 → 2.10.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/CHANGELOG.md +42 -0
package/build/index.js +133 -108
package/build/stories/navigation/header/header-item/_types.d.ts +8 -5
package/build/stories/navigation/header/header-item/workspacesDropdown.d.ts +3 -0
package/build/stories/navigation/sidebar/_types.d.ts +2 -1
package/build/stories/navigation/sidebar/index.stories.d.ts +2 -0
package/build/stories/navigation/sidebar/skeleton.d.ts +2 -1
package/package.json +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,45 @@
+# v2.10.27 (Fri May 13 2022)
+#### ⚠️ Pushed to `master`
+- fix(sidebar): show dropdown only on small viewport ([@cannarocks](https://github.com/cannarocks))
+#### Authors: 1
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+---
+# v2.10.26 (Fri May 13 2022)
+#### ⚠️ Pushed to `master`
+- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
+- fix(sidebar): remove padding only with tokens ([@cannarocks](https://github.com/cannarocks))
+#### Authors: 1
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+---
+# v2.10.25 (Fri May 13 2022)
+#### 🐛 Bug Fix
+- refactor(workspace-dropdown): refactor component in order to use it o… [#54](https://github.com/AppQuality/unguess-design-system/pull/54) ([@cannarocks](https://github.com/cannarocks))
+#### ⚠️ Pushed to `master`
+- fix(page-loader): refactor types and fix build errors ([@cannarocks](https://github.com/cannarocks))
+- fix(token-card): uI improvements on token card ([@cannarocks](https://github.com/cannarocks))
+#### Authors: 1
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+---
 # v2.10.24 (Thu May 12 2022)
 #### ⚠️ Pushed to `master`

package/build/index.js CHANGED Viewed

@@ -238,13 +238,13 @@ var gradients = {
     dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
 };
-var _a, _b, _c, _d, _e, _f;
-var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }) }), notification: __assign(__assign({}, (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.notification), { card: __assign(__assign({}, (_f = (_e = reactTheming.DEFAULT_THEME.components) === null || _e === void 0 ? void 0 : _e.notification) === null || _f === void 0 ? void 0 : _f.well), { padding: "16px" }) }) });
+var _a, _b, _c, _d, _e, _f, _g$5, _h;
+var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { chrome: __assign(__assign({}, (_a = reactTheming.DEFAULT_THEME.components) === null || _a === void 0 ? void 0 : _a.chrome), { header: __assign(__assign({}, (_c = (_b = reactTheming.DEFAULT_THEME.components) === null || _b === void 0 ? void 0 : _b.chrome) === null || _c === void 0 ? void 0 : _c.header), { height: "64px" }), nav: __assign(__assign({}, (_e = (_d = reactTheming.DEFAULT_THEME.components) === null || _d === void 0 ? void 0 : _d.chrome) === null || _e === void 0 ? void 0 : _e.nav), { openWidth: 240, closedWidth: 36, workspaceDropdownWidth: 192 }) }), notification: __assign(__assign({}, (_f = reactTheming.DEFAULT_THEME.components) === null || _f === void 0 ? void 0 : _f.notification), { card: __assign(__assign({}, (_h = (_g$5 = reactTheming.DEFAULT_THEME.components) === null || _g$5 === void 0 ? void 0 : _g$5.notification) === null || _h === void 0 ? void 0 : _h.well), { padding: "16px" }) }) });
 var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[400] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.fontWeights), { semibold: 500 }), gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n  \n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"], ["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n  \n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
-var templateObject_1$V;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n  \n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"], ["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n  \n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
+var templateObject_1$X;
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -259,7 +259,7 @@ Accordion.Header = reactAccordions.Accordion.Header;
 Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
-var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n"], ["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n"])), function (_a) {
+var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n"], ["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[700];
 });
@@ -273,10 +273,10 @@ var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObjec
 var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
 Alert.Title = reactNotifications.Title;
 Alert.Close = reactNotifications.Close;
-var templateObject_1$U;
+var templateObject_1$W;
 // import useWindowSize from "../../hooks/useWindowSize";
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return props.avatarType &&
         props.avatarType !== "image" &&
         "background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
@@ -301,7 +301,7 @@ var Avatar = function (props) {
     return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
 Avatar.Text = UgAvatar.Text;
-var templateObject_1$T;
+var templateObject_1$V;
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -322,7 +322,7 @@ var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Bread
  */
 var Anchor = function (props) { return jsxRuntime.jsx(reactButtons.Anchor, __assign({}, props)); };
-var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -334,7 +334,7 @@ var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$
 var Button = function (props) { return jsxRuntime.jsx(UgButton, __assign({}, props)); };
 Button.StartIcon = UgButton.StartIcon;
 Button.EndIcon = UgButton.EndIcon;
-var templateObject_1$S;
+var templateObject_1$U;
 /**
 A Button group lets users make a selection from a set of options.
@@ -364,7 +364,7 @@ Used for this:
 **/
 var SplitButton = function (props) { return (jsxRuntime.jsx(reactButtons.SplitButton, __assign({}, props))); };
-var ContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"])), function (_a) {
+var ContentCard = styled__default["default"](reactNotifications.Well)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"], ["\n  border-radius: ", ";\n  padding: ", ";\n  border: 1px solid ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -389,7 +389,7 @@ var ContainerCard = styled__default["default"](Card)(templateObject_2$m || (temp
     var theme = _a.theme;
     return theme.borderRadii.xl;
 });
-var templateObject_1$R, templateObject_2$m;
+var templateObject_1$T, templateObject_2$m;
 /**
  * Tags let users categorize content using a keyword.
@@ -406,13 +406,13 @@ var Tag = function (props) { return jsxRuntime.jsx(reactTags.Tag, __assign({}, p
 Tag.Avatar = reactTags.Tag.Avatar;
 Tag.Close = reactTags.Tag.Close;
-var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject([""], [""])));
+var UgLabel$1 = styled__default["default"](reactForms.Label)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject([""], [""])));
 /**
    * A Label is used to specify a title for an input.
    * <hr>
    **/
 var Label = function (props) { return jsxRuntime.jsx(UgLabel$1, __assign({}, props)); };
-var templateObject_1$Q;
+var templateObject_1$S;
 var _g$4, _path$p, _path2$7, _path3$6, _path4$4, _path5$3, _path6$3, _path7$3, _path8$3, _path9$3, _path10$3, _path11$2;
@@ -619,7 +619,7 @@ var SvgArrivalStatusRoundIcon = function SvgArrivalStatusRoundIcon(props) {
   })));
 };
-var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (props) { return props.theme.palette.grey[500]; }, function (props) { return props.theme.borderRadii.xxl; });
+var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n"])), function (props) { return props.theme.palette.grey[500]; }, function (props) { return props.theme.borderRadii.xxl; });
 /**
  * A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
  * <hr>
@@ -634,15 +634,15 @@ var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObjec
    - To communicate a typing status, use Inline instead
  */
 var Skeleton = function (props) { return jsxRuntime.jsx(UgSkeleton, __assign({}, props)); };
-var templateObject_1$P;
+var templateObject_1$R;
 var CampaignCardSkeleton = function () {
     return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(CardHeader, { children: jsxRuntime.jsx(Skeleton, { width: "30%" }) }), jsxRuntime.jsxs(CardBody$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "50%" }), jsxRuntime.jsx("br", {}), jsxRuntime.jsx(Skeleton, { height: "26px", style: { backgroundColor: theme.palette.blue[400] } })] }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsxs(CardFooter$1, { children: [jsxRuntime.jsx(Skeleton, { height: "18px", width: "45%" }), " ", jsxRuntime.jsx(Skeleton, { width: "26px", height: "26px", style: { borderRadius: "100%" } })] })] }));
 };
-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 flexCenter = styled.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
 var flexColumnCenter = styled.css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  ", ";\n  flex-direction: column;\n"], ["\n  ", ";\n  flex-direction: column;\n"])), flexCenter);
-var flexStart = styled.css(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: ", ";\n"])), function (_a) {
+var flexStart = styled.css(templateObject_3$e || (templateObject_3$e = __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");
 });
@@ -659,7 +659,7 @@ var cardStyle = styled.css(templateObject_4$b || (templateObject_4$b = __makeTem
     var theme = _a.theme;
     return theme.shadows.boxShadow(theme);
 });
-var templateObject_1$O, templateObject_2$l, templateObject_3$d, templateObject_4$b;
+var templateObject_1$Q, templateObject_2$l, templateObject_3$e, templateObject_4$b;
 var getStatusIcon = function (status) {
     switch (status) {
@@ -683,12 +683,12 @@ var getTypeDataIcon = function (type) {
             return SvgFunctionalTestRoundIcon;
     }
 };
-var Wrapper$1 = styled__default["default"](Card)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cardStyle);
+var Wrapper$1 = styled__default["default"](Card)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), cardStyle);
 var StyledTag$1 = styled__default["default"](Tag)(templateObject_2$k || (templateObject_2$k = __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"];
 });
-var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"])), function (_a) {
+var StyledTagNew$1 = styled__default["default"](Tag)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"], ["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -745,9 +745,9 @@ 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$k, templateObject_3$c, templateObject_4$a, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9;
+var templateObject_1$P, templateObject_2$k, templateObject_3$d, templateObject_4$a, templateObject_5$5, 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 Wrapper = styled__default["default"](Card)(templateObject_1$O || (templateObject_1$O = __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;
     return theme.borderRadii.lg;
 }, function (_a) {
@@ -773,7 +773,7 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$j || (templa
     var theme = _a.theme;
     return theme.palette.white;
 });
-var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"], ["\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var StyledLabel$1 = styled__default["default"](Label)(templateObject_3$c || (templateObject_3$c = __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) {
@@ -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$j, templateObject_3$b, templateObject_4$9, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8;
+var templateObject_1$O, templateObject_2$j, templateObject_3$c, templateObject_4$9, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8;
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -1052,7 +1052,7 @@ function useWindowSize() {
     return size;
 }
-var StyledSpan = styled__default["default"](Span)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
+var StyledSpan = styled__default["default"](Span)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject([""], [""])));
 var StyledTag = styled__default["default"](Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  ", " {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"], ["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  ", " {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fontWeights.regular;
@@ -1090,7 +1090,7 @@ var Counter = function (props) {
     return (jsxRuntime.jsxs(StyledTag, __assign({}, props, { size: props.size || "large" }, { children: [jsxRuntime.jsx(StyledTag.Avatar, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [status === "completed" && jsxRuntime.jsx(SvgCampaignCompleted, {}), status === "progress" && jsxRuntime.jsx(SvgCampaignProgress, {}), status === "incoming" && jsxRuntime.jsx(SvgCampaignIncoming, {}), status === "functional" && jsxRuntime.jsx(SvgCampaignFunctional, {}), status === "experiential" && jsxRuntime.jsx(SvgCampaignExperiential, {})] }) }), width > parseInt(theme.breakpoints.sm) && props.children, counter !== undefined && jsxRuntime.jsx(StyledSpan, { children: counter.toString() })] })));
 };
 Counter.Avatar = StyledTag.Avatar;
-var templateObject_1$L, templateObject_2$i;
+var templateObject_1$N, templateObject_2$i;
 /**
  * A Drawer is a container for supplementary content that is anchored to the edge of a page.
@@ -1106,20 +1106,20 @@ Drawer.Footer = reactModals.DrawerModal.Footer;
 Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
 Drawer.Close = reactModals.DrawerModal.Close;
-var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject([""], [""])));
-var templateObject_1$K;
+var Field$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject([""], [""])));
+var templateObject_1$M;
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field$1
 });
-var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  &[disabled] svg {\n    opacity: 0.5;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &[disabled] svg {\n    opacity: 0.5;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  &[disabled] svg {\n    opacity: 0.5;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &[disabled] svg {\n    opacity: 0.5;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.blue[100];
 });
 var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
-var templateObject_1$J;
+var templateObject_1$L;
 /**
    * A Menu is a wrapper for items elements
@@ -1143,7 +1143,7 @@ var MediaItem = function (props) { return jsxRuntime.jsx(reactDropdowns.MediaIte
  */
 var Multiselect = function (props) { return (jsxRuntime.jsx(reactDropdowns.Multiselect, __assign({}, props))); };
-var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return props.isPrimary &&
         "\n      background-color: ".concat(props.theme.palette.blue[600], ";\n      color: white;\n      & svg[data-garden-id=\"forms.media_figure\"] {\n         color: white;\n      }\n   ");
 });
@@ -1160,7 +1160,7 @@ var UgSelect = styled__default["default"](reactDropdowns.Select)(templateObject_
 var Select = function (props) { return jsxRuntime.jsx(UgSelect, __assign({}, props)); };
 var Dropdown = function (props) { return (jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props))); };
 var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
-var templateObject_1$I;
+var templateObject_1$K;
 /**
  * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
@@ -1175,7 +1175,7 @@ var Autocomplete = function (props) { return jsxRuntime.jsx(reactDropdowns.Autoc
 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([""], [""])));
+var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject([""], [""])));
 /**
    * A Checkbox lets users select and unselect options from a list.
    * <hr>
@@ -1187,9 +1187,9 @@ var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_
    *  - To let users activate an option that takes effect immediately, use a Toggle instead
    **/
 var Checkbox = function (props) { return jsxRuntime.jsx(UgCheckbox, __assign({}, props)); };
-var templateObject_1$H;
+var templateObject_1$J;
-var StyledCard$1 = styled__default["default"](Card)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n   ", "\n   text-align: center;\n   justify-content: center;\n   align-items: center;\n\n   &.card-active {\n      border-color: ", ";\n   }\n"], ["\n   ", "\n   text-align: center;\n   justify-content: center;\n   align-items: center;\n\n   &.card-active {\n      border-color: ", ";\n   }\n"])), cardStyle, function (_a) {
+var StyledCard$1 = styled__default["default"](Card)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n   ", "\n   text-align: center;\n   justify-content: center;\n   align-items: center;\n\n   &.card-active {\n      border-color: ", ";\n   }\n"], ["\n   ", "\n   text-align: center;\n   justify-content: center;\n   align-items: center;\n\n   &.card-active {\n      border-color: ", ";\n   }\n"])), cardStyle, function (_a) {
     var theme = _a.theme;
     return theme.palette.blue[300];
 });
@@ -1197,7 +1197,7 @@ var IconWrapper$1 = styled__default["default"].div(templateObject_2$h || (templa
     var theme = _a.theme;
     return theme.space.base;
 });
-var LabelWrapper = styled__default["default"](Label)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n   margin: ", "px auto;\n   color: ", ";\n   user-select: none;\n\n   &:focus {\n      outline: 0;\n   }\n"], ["\n   margin: ", "px auto;\n   color: ", ";\n   user-select: none;\n\n   &:focus {\n      outline: 0;\n   }\n"])), function (_a) {
+var LabelWrapper = styled__default["default"](Label)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n   margin: ", "px auto;\n   color: ", ";\n   user-select: none;\n\n   &:focus {\n      outline: 0;\n   }\n"], ["\n   margin: ", "px auto;\n   color: ", ";\n   user-select: none;\n\n   &:focus {\n      outline: 0;\n   }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base;
 }, function (_a) {
@@ -1216,14 +1216,14 @@ 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$h, templateObject_3$a, templateObject_4$8;
+var templateObject_1$I, templateObject_2$h, templateObject_3$b, templateObject_4$8;
-var UgField = styled__default["default"](reactForms.Field)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
+var UgField = styled__default["default"](reactForms.Field)(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
 /**
    * A Field is a wrapper for input elements
    **/
 var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
-var templateObject_1$F;
+var templateObject_1$H;
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1231,7 +1231,7 @@ var index = /*#__PURE__*/Object.freeze({
     Hint: reactForms.Hint
 });
-var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
+var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject([""], [""])));
 var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject([""], [""])));
 /**
    * An Input lets users enter text into a field.
@@ -1241,9 +1241,9 @@ var Hint = styled__default["default"](reactForms.Hint)(templateObject_2$g || (te
    *  - To enter multiline text, use a Textarea
    **/
 var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
-var templateObject_1$E, templateObject_2$g;
+var templateObject_1$G, templateObject_2$g;
-var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject([""], [""])));
+var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
 /**
    * Media elements add even more context to an input.
    * <hr>
@@ -1252,9 +1252,9 @@ var UgMediaInput = styled__default["default"](reactForms.MediaInput)(templateObj
    *  - To enter multiline text, use a Textarea
    **/
 var MediaInput = function (props) { return jsxRuntime.jsx(UgMediaInput, __assign({}, props)); };
-var templateObject_1$D;
+var templateObject_1$F;
-var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
+var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject([""], [""])));
 /**
    * Radio buttons let users choose a single option among two or more mutually exclusive options.
    * <hr>
@@ -1266,7 +1266,7 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$C ||
    *  - To select from a long list of options, use Select instead
    **/
 var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
-var templateObject_1$C;
+var templateObject_1$E;
 var _path$f;
@@ -1286,7 +1286,7 @@ var SvgCheckLg = function SvgCheckLg(props) {
   })));
 };
-var StyledCard = styled__default["default"](Card)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n   ", "\n   text-align: center;\n   justify-content: center;\n   align-items: center;\n\n   &.card-active {\n      border-color: ", ";\n   }\n"], ["\n   ", "\n   text-align: center;\n   justify-content: center;\n   align-items: center;\n\n   &.card-active {\n      border-color: ", ";\n   }\n"])), cardStyle, function (_a) {
+var StyledCard = styled__default["default"](Card)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n   ", "\n   text-align: center;\n   justify-content: center;\n   align-items: center;\n\n   &.card-active {\n      border-color: ", ";\n   }\n"], ["\n   ", "\n   text-align: center;\n   justify-content: center;\n   align-items: center;\n\n   &.card-active {\n      border-color: ", ";\n   }\n"])), cardStyle, function (_a) {
     var theme = _a.theme;
     return theme.palette.blue[300];
 });
@@ -1294,7 +1294,7 @@ var IconWrapper = styled__default["default"].div(templateObject_2$f || (template
     var theme = _a.theme;
     return theme.space.base;
 });
-var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n   margin: ", "px auto;\n   color: ", ";\n   font-weight: ", ";\n   color: ", ";\n   user-select: none;\n\n   &:focus {\n      outline: 0;\n   }\n"], ["\n   margin: ", "px auto;\n   color: ", ";\n   font-weight: ", ";\n   color: ", ";\n   user-select: none;\n\n   &:focus {\n      outline: 0;\n   }\n"])), function (_a) {
+var StyledText = styled__default["default"](reactTypography.LG)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n   margin: ", "px auto;\n   color: ", ";\n   font-weight: ", ";\n   color: ", ";\n   user-select: none;\n\n   &:focus {\n      outline: 0;\n   }\n"], ["\n   margin: ", "px auto;\n   color: ", ";\n   font-weight: ", ";\n   color: ", ";\n   user-select: none;\n\n   &:focus {\n      outline: 0;\n   }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base;
 }, function (_a) {
@@ -1335,9 +1335,9 @@ 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$f, templateObject_3$9, templateObject_4$7, templateObject_5$3;
+var templateObject_1$D, templateObject_2$f, templateObject_3$a, templateObject_4$7, templateObject_5$3;
-var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
+var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
 /**
    * A Textarea is a form control for multi-line text.
    * <hr>
@@ -1345,9 +1345,9 @@ var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_
    *  - To enter multi-line text
    **/
 var Textarea = function (props) { return jsxRuntime.jsx(UgTextarea, __assign({}, props)); };
-var templateObject_1$A;
+var templateObject_1$C;
-var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
+var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject([""], [""])));
 /**
    * A Toggle lets users turn something on and off like a light switch. Unlike a Checkbox, which is used for selection, a Toggle is used for activation.
    * <hr>
@@ -1358,7 +1358,7 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$z
    *  - To let users select from a list of settings, use Checkboxes instead
    **/
 var Toggle = function (props) { return jsxRuntime.jsx(UgToggle, __assign({}, props)); };
-var templateObject_1$z;
+var templateObject_1$B;
 var Col = function (props) { return jsxRuntime.jsx(reactGrid.Col, __assign({}, props)); };
@@ -1423,7 +1423,7 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
   })));
 };
-var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$y || (templateObject_1$y = __makeTemplateObject([""], [""])));
+var StyledUgIcon$1 = styled__default["default"].span(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
 var Icon = function (props) {
     var children = function (type, size) {
         if (size === void 0) { size = 24; }
@@ -1436,9 +1436,9 @@ var Icon = function (props) {
     };
     return (jsxRuntime.jsx(StyledUgIcon$1, { children: children(props.type, props.size) }));
 };
-var templateObject_1$y;
+var templateObject_1$A;
-var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject([""], [""])));
+var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject([""], [""])));
 /**
  * A Progress loader communicates progress when downloading or uploading content.
  * <hr>
@@ -1450,9 +1450,9 @@ var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObjec
     - When loading page content, use a Skeleton loader instead
  */
 var Progress = function (props) { return jsxRuntime.jsx(UgProgress, __assign({}, props)); };
-var templateObject_1$x;
+var templateObject_1$z;
-var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
+var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject([""], [""])));
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
  * <hr>
@@ -1461,9 +1461,9 @@ var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_
     - To provide a quick way to navigate to ancestor pages
  */
 var Spinner = function (props) { return jsxRuntime.jsx(UgSpinner, __assign({}, props)); };
-var templateObject_1$w;
+var templateObject_1$y;
-var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.white;
 });
@@ -1471,7 +1471,7 @@ var UgBody = styled__default["default"](reactChrome.Body)(templateObject_1$v ||
  * A Body defines the main content of an HTML document which displays on the browser
  */
 var Body$1 = function (props) { return jsxRuntime.jsx(UgBody, __assign({}, props)); };
-var templateObject_1$v;
+var templateObject_1$x;
 /**
  * A Content defines the main content of an HTML document which displays on the browser
@@ -1495,7 +1495,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
-var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  ", ";\n  font-family: ", ";\n"], ["\n  ", ";\n  font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
+var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  ", ";\n  font-family: ", ";\n"], ["\n  ", ";\n  font-family: ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; }, function (_a) {
     var theme = _a.theme;
     return theme.fonts.system;
 });
@@ -1504,14 +1504,14 @@ styled__default["default"](reactChrome.HeaderItemWrapper)(templateObject_2$e ||
     return theme.fonts.system;
 });
 var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
-var templateObject_1$u, templateObject_2$e;
+var templateObject_1$w, templateObject_2$e;
-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 UgHeaderItemText = styled__default["default"](reactChrome.HeaderItemText)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n    font-family: ", ";\n"], ["\n    font-family: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.fonts.system;
 });
 var HeaderItemText = function (props) { return jsxRuntime.jsx(UgHeaderItemText, __assign({}, props)); };
-var templateObject_1$t;
+var templateObject_1$v;
 var HeaderItemIcon = function (props) { return (jsxRuntime.jsx(reactChrome.HeaderItemIcon, __assign({}, props))); };
@@ -1570,7 +1570,30 @@ var XL = function (props) { return jsxRuntime.jsx(reactTypography.XL, __assign({
 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) {
+/**
+ *  Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
+ */
+var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
+var StyledEllipsis = styled__default["default"](Ellipsis)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, isCompact = _a.isCompact;
+    return isCompact &&
+        "\n    width: ".concat(theme.components.chrome.nav.workspaceDropdownWidth, "px; \n  ");
+});
+var WorkspacesDropdown = function (props) {
+    var _a = React.useState(props.activeWorkspace), selectedWorkspace = _a[0], setSelectedWorkspace = _a[1];
+    return (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: jsxRuntime.jsx(StyledEllipsis, __assign({ isCompact: props.isCompact }, { 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 && props.workspaces.map(function (item) { return (jsxRuntime.jsx(Item, __assign({ value: item }, { children: item.company }))); })] })] })));
+};
+var templateObject_1$u;
+var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$t || (templateObject_1$t = __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;
 });
@@ -1584,7 +1607,7 @@ var BrandName = styled__default["default"](reactChrome.HeaderItem)(templateObjec
     var theme = _a.theme;
     return theme.breakpoints.sm;
 });
-var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  font-family: ", ";\n  z-index: 2;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  margin-right: auto;\n  margin-left: -8px;\n  color: ", ";\n  font-family: ", ";\n  z-index: 2;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+var DropdownItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_3$9 || (templateObject_3$9 = __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) {
@@ -1602,19 +1625,11 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
     return theme.breakpoints.sm;
 });
 var BrandItem = function (props) {
-    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 }) }))) }))] }));
+    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 }) }))) }))] }));
 };
-var templateObject_1$s, templateObject_2$d, templateObject_3$8, templateObject_4$6;
+var templateObject_1$t, templateObject_2$d, templateObject_3$9, templateObject_4$6;
-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);
+var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n    height: ", ";\n"], ["\n    height: ", ";\n"])), theme.components.chrome.header.height);
 /**
  * An Header is a visual way to display general information.
  * This can include navList Items, modal, profile settings.
@@ -1623,13 +1638,13 @@ var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, pro
 Header.HeaderItem = HeaderItem;
 Header.HeaderItemText = HeaderItemText;
 Header.HeaderItemIcon = HeaderItemIcon;
-var templateObject_1$r;
+var templateObject_1$s;
 var HeaderSkeleton = function () {
-    return (jsxRuntime.jsxs(Header, __assign({ isStandalone: true }, { children: [jsxRuntime.jsx(LogoIconContainer, __assign({ hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "auto", marginLeft: "-4px" } }, { children: jsxRuntime.jsx(Skeleton, { width: "200px", height: theme.space.sm }) })), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }) }) }))] })));
+    return (jsxRuntime.jsxs(Header, __assign({ isStandalone: true }, { children: [jsxRuntime.jsx(LogoIconContainer, __assign({ hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "auto", marginLeft: "-4px" } }, { children: window.matchMedia("only screen and (min-width: 576px)").matches ? (jsxRuntime.jsx(Skeleton, { width: "200px", height: theme.space.sm })) : (jsxRuntime.jsx(Skeleton, { width: "80px", height: theme.space.sm, style: { marginLeft: theme.space.sm } })) })), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }) }) }))] })));
 };
-var ChevronButton = styled__default["default"](IconButton)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+var ChevronButton = styled__default["default"](IconButton)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.breakpoints.sm;
 });
@@ -1641,9 +1656,9 @@ var AppHeader = function (_a) {
     var brand = _a.brand, avatar = _a.avatar, isLoading = _a.isLoading, args = __rest(_a, ["brand", "avatar", "isLoading"]);
     return isLoading ? jsxRuntime.jsx(HeaderSkeleton, {}) : (jsxRuntime.jsxs(Header, __assign({}, args, { children: [jsxRuntime.jsx(BrandItem, __assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && args.changelogItem && (jsxRuntime.jsx(HeaderItem, __assign({ style: { marginRight: "-" + theme.space.xs } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: args.changelogItem }) }))), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true, onClick: args.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, __assign({}, avatar)), jsxRuntime.jsx(ChevronButton, __assign({ size: "small", isRotated: args.isProfileModalOpen }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
 };
-var templateObject_1$q;
+var templateObject_1$r;
-var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  @media (min-width: ", ") {\n    padding-left: ", ";\n  }\n"], ["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  @media (min-width: ", ") {\n    padding-left: ", ";\n  }\n"])), function (_a) {
+var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  @media (min-width: ", ") {\n    padding-left: ", ";\n  }\n"], ["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  @media (min-width: ", ") {\n    padding-left: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.borders.sm;
 }, function (_a) {
@@ -1651,8 +1666,8 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$p || (t
     return reactTheming.getColor(theme.colors.neutralHue, 300);
 }, function (props) {
     return "\n      width: ".concat(props.isExpanded
-        ? props.theme.space.base * 60
-        : props.theme.space.base * 9, "px;\n      @media (max-width: ").concat(props.theme.breakpoints.sm, ") {\n         width: ").concat(props.isExpanded ? "100%" : "0", ";\n         border-right: none;\n      }\n  ");
+        ? props.theme.components.chrome.nav.openWidth
+        : props.theme.components.chrome.nav.closedWidth, "px;\n      @media (max-width: ").concat(props.theme.breakpoints.sm, ") {\n         width: ").concat(props.isExpanded ? "100%" : "0", ";\n         border-right: none;\n      }\n  ");
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.sm;
@@ -1670,9 +1685,9 @@ var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$p || (t
     - To give a consistent dashboard and navigation experience
  */
 var Nav = function (props) { return jsxRuntime.jsx(UgNav, __assign({}, props)); };
-var templateObject_1$p;
+var templateObject_1$q;
-var SelectedItemStyle = styled.css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
+var SelectedItemStyle = styled.css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (props) { return props.theme.palette.kale["100"]; });
 var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  font-family: ", ";\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"], ["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  font-family: ", ";\n  ", "\n  ", "\n  &:hover, &:focus {\n    ", "\n  }\n  opacity: 1;\n  color: ", ";\n  font-weight: ", ";\n  ", "\n"])), function (props) { return props.theme.space.base * 6; }, function (props) { return props.theme.space.base * 6; }, function (_a) {
     var theme = _a.theme;
     return theme.fonts.system;
@@ -1684,16 +1699,11 @@ var NavItem = function (props) {
     // const { isExpanded } = props;
     return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
 };
-var templateObject_1$o, templateObject_2$c;
+var templateObject_1$p, templateObject_2$c;
-var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject([""], [""])));
+var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject([""], [""])));
 var NavItemIcon = function (props) { return jsxRuntime.jsx(UgNavIcon, __assign({}, props)); };
-var templateObject_1$n;
-/**
- *  Use Ellipsis to automatically provide text content with a native title attribute and text-overflow styling.
- */
-var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
+var templateObject_1$o;
 var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
@@ -1731,7 +1741,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   })));
 };
-var StyledToggle = styled__default["default"](IconButton)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  min-width: ", ";\n  position: absolute;\n  top: ", "px;\n  right: -", "px;\n  background: ", "};\n  z-index: 1;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  min-width: ", ";\n  position: absolute;\n  top: ", "px;\n  right: -", "px;\n  background: ", "};\n  z-index: 1;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
+var StyledToggle = styled__default["default"](IconButton)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  min-width: ", ";\n  position: absolute;\n  top: ", "px;\n  right: -", "px;\n  background: ", "};\n  z-index: 1;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  min-width: ", ";\n  position: absolute;\n  top: ", "px;\n  right: -", "px;\n  background: ", "};\n  z-index: 1;\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.base * 6;
 }, function (_a) {
@@ -1756,18 +1766,18 @@ var StyledToggle = styled__default["default"](IconButton)(templateObject_1$m ||
 var NavToggle = function (props) {
     return (jsxRuntime.jsx(StyledToggle, __assign({}, props, { isPrimary: true, size: "small" }, { children: props.isExpanded ? (jsxRuntime.jsx(SvgChevronLeftStroke, { style: { width: "100%" } })) : (jsxRuntime.jsx(SvgChevronRightStroke, { style: { width: "100%" } })) })));
 };
-var templateObject_1$m;
+var templateObject_1$n;
-var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  width: 100%;\n  min-height: ", ";\n  opacity: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  padding-right: ", ";\n  pointer-events: none;\n\n  &:after {\n    background: ", ";\n    height: 1px;\n    flex: 1;\n    content: \"\";\n  }\n\n  span {\n    background: #fff;\n    margin: 0;\n    margin-right: ", ";\n    color: ", ";\n    font-size: ", ";\n  }\n  ", "\n"], ["\n  width: 100%;\n  min-height: ", ";\n  opacity: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  padding-right: ", ";\n  pointer-events: none;\n\n  &:after {\n    background: ", ";\n    height: 1px;\n    flex: 1;\n    content: \"\";\n  }\n\n  span {\n    background: #fff;\n    margin: 0;\n    margin-right: ", ";\n    color: ", ";\n    font-size: ", ";\n  }\n  ", "\n"])), function (props) { return props.theme.space.lg; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["200"]; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; }, function (props) { return !props.isExpanded && "display: none;"; });
+var UgNavItem$1 = styled__default["default"](reactChrome.NavItem)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  width: 100%;\n  min-height: ", ";\n  opacity: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  padding-right: ", ";\n  pointer-events: none;\n\n  &:after {\n    background: ", ";\n    height: 1px;\n    flex: 1;\n    content: \"\";\n  }\n\n  span {\n    background: #fff;\n    margin: 0;\n    margin-right: ", ";\n    color: ", ";\n    font-size: ", ";\n  }\n  ", "\n"], ["\n  width: 100%;\n  min-height: ", ";\n  opacity: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  padding-right: ", ";\n  pointer-events: none;\n\n  &:after {\n    background: ", ";\n    height: 1px;\n    flex: 1;\n    content: \"\";\n  }\n\n  span {\n    background: #fff;\n    margin: 0;\n    margin-right: ", ";\n    color: ", ";\n    font-size: ", ";\n  }\n  ", "\n"])), function (props) { return props.theme.space.lg; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["200"]; }, function (props) { return props.theme.space.sm; }, function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; }, function (props) { return !props.isExpanded && "display: none;"; });
 var NavDivider = function (props) { return (jsxRuntime.jsx(UgNavItem$1, __assign({}, props, { children: jsxRuntime.jsx("span", { children: props.children }) }))); };
-var templateObject_1$l;
+var templateObject_1$m;
-var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n"])), function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; });
+var UgProjectSubtitle = styled__default["default"](NavItemText)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n"])), function (props) { return props.theme.palette.grey["500"]; }, function (props) { return props.theme.fontSizes.sm; });
 var UgNavItem = styled__default["default"](NavItem)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  flex-flow: column;\n  align-items: flex-start;\n"], ["\n  flex-flow: column;\n  align-items: flex-start;\n"])));
 var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
 NavItemProject.Title = NavItemText;
 NavItemProject.SubTitle = UgProjectSubtitle;
-var templateObject_1$k, templateObject_2$b;
+var templateObject_1$l, templateObject_2$b;
 var _path$7;
@@ -1854,13 +1864,23 @@ var SvgToken = function SvgToken(props) {
   })))));
 };
-var LoadingSidebar = function () {
-    var isExpanded = true;
-    return (jsxRuntime.jsxs(Nav, __assign({ style: { width: "250px" } }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
-};
+var StyledNav = styled__default["default"](Nav)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
+    var isExpanded = _a.isExpanded, theme = _a.theme;
+    return isExpanded && "width: ".concat(theme.components.chrome.nav.openWidth);
+});
+var LoadingSidebar = function (props) {
+    var isExpanded = props.isExpanded;
+    return (jsxRuntime.jsxs(StyledNav, __assign({}, props, { isExpanded: isExpanded }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
+};
+var templateObject_1$k;
 var TokenContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var ScrollingContainer = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  order: 1;\n  overflow-y: auto;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  order: 1;\n  overflow-y: auto;\n  height: 100%;\n"])));
+var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$8 || (templateObject_3$8 = __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) {
+    var isExpanded = _a.isExpanded;
+    return isExpanded &&
+        "\n    display: block;\n    padding-right: ".concat(theme.space.md, ";\n  ");
+});
 /**
  * The UNGUESS Sidebar component provides a high-level layout structure and sets a framework for navigating around projects.
  * <br>
@@ -1869,6 +1889,7 @@ var ScrollingContainer = styled__default["default"].div(templateObject_2$a || (t
  */
 var Sidebar = function (props) {
     var _a = React.useState(props.currentRoute || "home"), nav = _a[0], setNav = _a[1];
+    var showWorkspacesDropdown = window.matchMedia("only screen and (min-width: ".concat(theme.breakpoints.sm, ")")).matches;
     var toggleNav = function () {
         props.onToggleMenu && props.onToggleMenu();
     };
@@ -1876,10 +1897,13 @@ var Sidebar = function (props) {
         props.onNavToggle && props.onNavToggle(route);
         setNav(route);
     };
-    return props.isLoading ? jsxRuntime.jsx(LoadingSidebar, {}) : (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), props.tokens && (jsxRuntime.jsx(NavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm, width: "70%" } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsx(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: props.dividerLabel || "" })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
+    var padding = props.tokens ? {
+        paddingBottom: 0
+    } : {};
+    return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, __assign({}, props))) : (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), showWorkspacesDropdown && props.workspaces && props.workspaces.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledNavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange }) })), props.tokens && (jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded, style: { order: 0 } }))] })), props.tokens && (jsxRuntime.jsx(StyledNavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, __assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, __assign({ isBold: true, style: { marginLeft: theme.space.xs, color: theme.palette.grey[800] } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: function () { return navigate("home"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), jsxRuntime.jsx(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: props.dividerLabel || "" })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
                     props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ isExpanded: props.isExpanded, isCurrent: nav === project.id, onClick: function () { return navigate(project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) }), jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
 };
-var templateObject_1$j, templateObject_2$a;
+var templateObject_1$j, templateObject_2$a, templateObject_3$8;
 var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    margin: ", "\n  }\n  \n  /* hide scrollbar for IE, Edge and Firefox */\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  \n"], ["\n  @media (min-width: ", ") {\n    margin: ", "\n  }\n  \n  /* hide scrollbar for IE, Edge and Firefox */\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  \n"])), function (_a) {
     var theme = _a.theme;
@@ -1896,7 +1920,8 @@ var templateObject_1$i;
 var StyledHr = styled__default["default"].hr(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  margin: ", "px 0 ", "px 0;\n  border: none;\n  border-top: 1px solid ", ";\n"], ["\n  margin: ", "px 0 ", "px 0;\n  border: none;\n  border-top: 1px solid ", ";\n"])), theme.space.base * 6, theme.space.base * 8, theme.palette.grey[300]);
 var PageLoader = function () {
-    return (jsxRuntime.jsx(reactChrome.Chrome, __assign({ isFluid: true, hue: theme.palette.white }, { children: jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(AppHeader, { isLoading: true }), jsxRuntime.jsxs(Content, { children: [jsxRuntime.jsx(Sidebar, { isLoading: true }), jsxRuntime.jsxs(Main, { children: [jsxRuntime.jsx(Skeleton, { width: "30%", height: "32px" }), jsxRuntime.jsx(StyledHr, { style: { margin: "24px 0" } }), jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ size: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) }))] })] })] })] }) })));
+    var isSidebarOpen = window.matchMedia("only screen and (min-width: 576px)").matches;
+    return (jsxRuntime.jsx(reactChrome.Chrome, __assign({ isFluid: true, hue: theme.palette.white }, { children: jsxRuntime.jsxs(Body$1, { children: [jsxRuntime.jsx(AppHeader, { isLoading: true }), jsxRuntime.jsxs(Content, { children: [jsxRuntime.jsx(Sidebar, { isExpanded: isSidebarOpen, isLoading: true }), jsxRuntime.jsxs(Main, { children: [jsxRuntime.jsx(Skeleton, { width: "30%", height: "32px", style: { marginTop: theme.space.sm, marginLeft: theme.space.sm } }), jsxRuntime.jsx(StyledHr, { style: { margin: "24px 0" } }), jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) })), jsxRuntime.jsx(Col, __assign({ xs: 12, md: 6, lg: 3 }, { children: jsxRuntime.jsx(CampaignCard, { isLoading: true, projectTitle: "", campaignTitle: "", date: "" }) }))] })] })] })] }) })));
 };
 var templateObject_1$h;

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

@@ -24,7 +24,14 @@ export interface HeaderItemArgs extends IHeaderItemProps {
     /** Applies header logo styles to the item */
     hasLogo?: boolean;
 }
-export interface BrandItemArgs extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface WorkspaceDropdownArgs {
+    workspaces?: Workspace[];
+    activeWorkspace?: Workspace;
+    workspacesLabel?: string;
+    onWorkspaceChange?: (workspace: Workspace) => void;
+    isCompact?: boolean;
+}
+export interface BrandItemArgs extends ButtonHTMLAttributes<HTMLButtonElement>, WorkspaceDropdownArgs {
     /** Maximizes the width of a flex item in the header */
     maxX?: boolean;
     /** Maximizes the height of the item (i.e. contains a search input) */
@@ -35,10 +42,6 @@ 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;
 }

package/build/stories/navigation/header/header-item/workspacesDropdown.d.ts ADDED Viewed

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

package/build/stories/navigation/sidebar/_types.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
+import { WorkspaceDropdownArgs } from "../header/header-item/_types";
 import { NavArgs } from "../nav/_types";
-export interface SidebarArgs extends NavArgs {
+export interface SidebarArgs extends NavArgs, WorkspaceDropdownArgs {
     projects?: Array<ProjectItem>;
     currentRoute?: string;
     homeItemLabel?: string;

package/build/stories/navigation/sidebar/index.stories.d.ts CHANGED Viewed

@@ -4,6 +4,8 @@ import { SidebarArgs } from "./_types";
 interface SidebarStoryArgs extends SidebarArgs {
 }
 export declare const Default: Story<SidebarStoryArgs>;
+export declare const MultipleWorkspaces: Story<SidebarStoryArgs>;
 export declare const WithTokens: Story<SidebarStoryArgs>;
+export declare const WithAll: Story<SidebarStoryArgs>;
 declare const _default: ComponentMeta<(props: SidebarArgs) => JSX.Element>;
 export default _default;

package/build/stories/navigation/sidebar/skeleton.d.ts CHANGED Viewed

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

package/package.json CHANGED Viewed

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