@appquality/unguess-design-system 2.10.22 → 2.10.25

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+# 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`
+
+- fix(table): type error ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.10.23 (Thu May 12 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat(counter): update counter behaviour based on screen size ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.10.22 (Thu May 12 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -15,9 +15,9 @@ var reactTags = require('@zendeskgarden/react-tags');
 var reactForms = require('@zendeskgarden/react-forms');
 var React = require('react');
 var reactLoaders = require('@zendeskgarden/react-loaders');
+var reactTypography = require('@zendeskgarden/react-typography');
 var reactModals = require('@zendeskgarden/react-modals');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
-var reactTypography = require('@zendeskgarden/react-typography');
 var reactGrid = require('@zendeskgarden/react-grid');
 var reactChrome = require('@zendeskgarden/react-chrome');
 var formik = require('formik');
@@ -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) {
@@ -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$l || (templateObject_2$l = __makeTemplateObject(["\n  border-radius: ", ";\n"], ["\n  border-radius: ", ";\n"])), function (_a) {
+var ContainerCard = styled__default["default"](Card)(templateObject_2$m || (templateObject_2$m = __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$l;
+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 flexColumnCenter = styled.css(templateObject_2$k || (templateObject_2$k = __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 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$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$k, 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 StyledTag$1 = styled__default["default"](Tag)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"], ["\n  color: ", ";\n  max-width: 75%;\n  cursor: pointer;\n"])), function (_a) {
+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$j, 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) {
@@ -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$i || (templateObject_2$i = __makeTemplateObject(["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n  position: absolute;\n  right: 16px;\n  top: 16px;\n"], ["\n  height: ", "px;\n  padding: ", "px\n    ", "px;\n  color: ", ";\n  position: absolute;\n  right: 16px;\n  top: 16px;\n"])), function (_a) {
+var StyledTagNew = styled__default["default"](Tag)(templateObject_2$j || (templateObject_2$j = __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) {
@@ -773,7 +773,7 @@ var StyledTagNew = styled__default["default"](Tag)(templateObject_2$i || (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$i, 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.
@@ -1014,7 +1014,46 @@ var SvgCampaignExperiential = function SvgCampaignExperiential(props) {
   })));
 };
 
-var StyledTag = styled__default["default"](Tag)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  background-color: transparent;\n  pointer-events: none;\n  font-weight: ", ";\n  ", "\n  svg {\n    margin-right: ", " !important;\n  }\n\n  span {\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  span {\n    font-weight: ", ";\n    margin-left: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+/**
+ * Use Span to style and format inline text elements.
+ * <hr>
+ * Used for this:
+    - To apply styles to short strings of text
+    - To include icons inline with text
+ * Not for this:
+    - To style an entire block of text, use Paragraph instead
+ */
+var Span = function (props) { return jsxRuntime.jsx(reactTypography.Span, __assign({}, props)); };
+
+function debounce(callback, wait) {
+    var timer;
+    return function () {
+        if (typeof timer !== "undefined")
+            clearTimeout(timer);
+        timer = setTimeout(function () {
+            timer = undefined;
+            callback();
+        }, wait);
+    };
+}
+function useWindowSize() {
+    var _a = React.useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    }), size = _a[0], setSize = _a[1];
+    React.useLayoutEffect(function () {
+        var debounceUpdateSize = debounce(function () {
+            setSize({ width: window.innerWidth, height: window.innerHeight });
+        }, 300);
+        window.addEventListener("resize", debounceUpdateSize);
+        debounceUpdateSize();
+        return function () { return window.removeEventListener("resize", debounceUpdateSize); };
+    }, []);
+    return size;
+}
+
+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;
 }, function (_a) {
@@ -1032,7 +1071,7 @@ var StyledTag = styled__default["default"](Tag)(templateObject_1$L || (templateO
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.xxs;
-}, function (_a) {
+}, StyledSpan, function (_a) {
     var theme = _a.theme;
     return theme.fontWeights.bold;
 }, function (_a) {
@@ -1046,11 +1085,12 @@ var StyledTag = styled__default["default"](Tag)(templateObject_1$L || (templateO
  * Counter let users categorize content using a keyword.
  */
 var Counter = function (props) {
+    var width = useWindowSize().width;
     var status = props.status, counter = props.counter;
-    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, {})] }) }), props.children, counter !== undefined && jsxRuntime.jsx("span", { children: counter.toString() })] })));
+    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;
+var templateObject_1$N, templateObject_2$i;
 
 /**
  * A Drawer is a container for supplementary content that is anchored to the edge of a page.
@@ -1066,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
@@ -1103,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   ");
 });
@@ -1120,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.
@@ -1135,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>
@@ -1147,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];
 });
@@ -1157,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) {
@@ -1176,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,
@@ -1191,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.
@@ -1201,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>
@@ -1212,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>
@@ -1226,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;
 
@@ -1246,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];
 });
@@ -1254,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) {
@@ -1295,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>
@@ -1305,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>
@@ -1318,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)); };
 
@@ -1383,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; }
@@ -1396,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>
@@ -1410,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>
@@ -1421,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;
 });
@@ -1431,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
@@ -1455,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;
 });
@@ -1464,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))); };
 
@@ -1530,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;
 });
@@ -1544,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) {
@@ -1562,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.
@@ -1583,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;
 });
@@ -1601,19 +1656,24 @@ 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  padding-left: ", ";\n"], ["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  padding-left: ", ";\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) {
     var theme = _a.theme;
     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  ");
+    return "\n      width: ".concat(props.isExpanded
+        ? 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;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.xs;
@@ -1625,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;
@@ -1639,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 })) }))); };
 
@@ -1686,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) {
@@ -1711,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;
 
@@ -1809,24 +1864,23 @@ var SvgToken = function SvgToken(props) {
   })))));
 };
 
-/**
- * Use Span to style and format inline text elements.
- * <hr>
- * Used for this:
-    - To apply styles to short strings of text
-    - To include icons inline with text
- * Not for this:
-    - To style an entire block of text, use Paragraph instead
- */
-var Span = function (props) { return jsxRuntime.jsx(reactTypography.Span, __assign({}, 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>
@@ -1842,10 +1896,10 @@ 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 &&
+    return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, __assign({}, props))) : (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), props.workspaces && props.workspaces.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledNavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: { paddingBottom: 0 } }, { 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;
@@ -1862,7 +1916,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;
 
@@ -2227,33 +2282,6 @@ var UserMenu = function (props) {
 };
 var templateObject_1$6;
 
-function debounce(callback, wait) {
-    var timer;
-    return function () {
-        if (typeof timer !== "undefined")
-            clearTimeout(timer);
-        timer = setTimeout(function () {
-            timer = undefined;
-            callback();
-        }, wait);
-    };
-}
-function useWindowSize() {
-    var _a = React.useState({
-        width: window.innerWidth,
-        height: window.innerHeight,
-    }), size = _a[0], setSize = _a[1];
-    React.useLayoutEffect(function () {
-        var debounceUpdateSize = debounce(function () {
-            setSize({ width: window.innerWidth, height: window.innerHeight });
-        }, 300);
-        window.addEventListener("resize", debounceUpdateSize);
-        debounceUpdateSize();
-        return function () { return window.removeEventListener("resize", debounceUpdateSize); };
-    }, []);
-    return size;
-}
-
 var StyledModal = styled__default["default"](Modal)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  margin: 0;\n  left: auto;\n  right: auto;\n  top: auto;\n  bottom: auto;\n\n  max-height: calc(100vh - ", ");\n\n  @media (min-width: ", ") {\n    margin-top: calc(\n      ", "\n    );\n    margin-right: ", "px;\n  }\n"], ["\n  margin: 0;\n  left: auto;\n  right: auto;\n  top: auto;\n  bottom: auto;\n\n  max-height: calc(100vh - ", ");\n\n  @media (min-width: ", ") {\n    margin-top: calc(\n      ", "\n    );\n    margin-right: ", "px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.xxl;

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/build/stories/table/_types.d.ts

@@ -1,6 +1,6 @@
 import { ITableProps, IRowProps, ICellProps, IHeaderCellProps, ISortableCellProps } from "@zendeskgarden/react-tables";
-import { SIZE, SORT } from "@zendeskgarden/react-tables/dist/typings/styled";
 import { IconArgs } from "../icons/_types";
+declare type SIZE = "small" | "medium" | "large";
 export interface TableProps extends ITableProps {
     /** Sets the table size */
     size?: SIZE;
@@ -63,8 +63,6 @@ export interface HeadArgs extends ICellProps {
     width?: string | number;
 }
 export interface SortableCellArgs extends ISortableCellProps {
-    /** Sets the sort order */
-    sort?: SORT;
     /** Sets the width of the cell */
     width?: string | number;
     /** Passes props to the cell */
@@ -81,3 +79,4 @@ export interface Group {
     groupIcon: IconArgs["type"];
     items: Array<IRow>;
 }
+export {};

package/package.json

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