@appquality/unguess-design-system 2.5.2 → 2.5.6

package/CHANGELOG.md

@@ -1,3 +1,63 @@
+# v2.5.6 (Mon Mar 28 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(spaces): fix spaces between main, body and page title ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.5.5 (Mon Mar 28 2022)
+
+#### ⚠️ Pushed to `master`
+
+- fix(main): add spaces as described by dressBerry ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.5.3 (Fri Mar 25 2022)
+
+#### ⚠️ Pushed to `master`
+
+- build(auto-it): update auto package ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.5.3 (Fri Mar 25 2022)
+
+
+
+---
+
+# v2.5.3 (Fri Mar 25 2022)
+
+
+
+---
+
+# v2.5.3 (Fri Mar 25 2022)
+
+
+
+---
+
+# v2.5.3 (Fri Mar 25 2022)
+
+
+
+---
+
 # v2.5.2 (Fri Mar 25 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -222,10 +222,10 @@ var gradients = {
     dark: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[800]), " 0%, ").concat(hex2rgba(palette.blue[600]), " 100%);"),
 };
 
-var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), gradients: gradients });
+var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), gradients: gradients, components: __assign(__assign({}, reactTheming.DEFAULT_THEME.components), { Headers: __assign(__assign({}, reactTheming.DEFAULT_THEME.components.Headers), { height: "64px" }) }) });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "], ["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "])), theme.fonts.system);
-var templateObject_1$w;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "], ["\n  body {\n    font-family: ", ";\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n  \n  "])), theme.fonts.system);
+var templateObject_1$y;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -241,7 +241,7 @@ Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
 // import useWindowSize from "../../hooks/useWindowSize";
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     return "\n    background: ".concat(props.backgroundColor || theme.gradients.dark, ";\n   ");
 });
 /**
@@ -264,7 +264,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$v;
+var templateObject_1$x;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -285,7 +285,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$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
+var UgButton = styled__default["default"](reactButtons.Button)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject([""], [""])));
 /**
  * Buttons let users take action quickly.
  * Use a Button to enable actions or decisions that are important to a user’s workflow.
@@ -297,7 +297,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$u;
+var templateObject_1$w;
 
 /**
 A Button group lets users make a selection from a set of options.
@@ -340,25 +340,25 @@ var Card = function (props) { return jsxRuntime.jsx(reactNotifications.Well, __a
  */
 var Close = function (props) { return jsxRuntime.jsx(reactNotifications.Close, __assign({}, props)); };
 
-var UgField$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject([""], [""])));
+var UgField$1 = styled__default["default"](reactDropdowns.Field)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
 var Field$1 = function (props) { return jsxRuntime.jsx(UgField$1, __assign({}, props)); };
-var templateObject_1$t;
+var templateObject_1$v;
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field$1
 });
 
-var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
+var UgItem = styled__default["default"](reactDropdowns.Item)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject([""], [""])));
 var Item = function (props) { return jsxRuntime.jsx(UgItem, __assign({}, props)); };
-var templateObject_1$s;
+var templateObject_1$u;
 
-var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject([""], [""])));
+var UgMenu = styled__default["default"](reactDropdowns.Menu)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject([""], [""])));
 /**
    * A Menu is a wrapper for items elements
    **/
 var Menu = function (props) { return jsxRuntime.jsx(UgMenu, __assign({}, props)); };
-var templateObject_1$r;
+var templateObject_1$t;
 
 /**
  * Multiselect lets users select multiple items from a list. Options are dynamically filtered as a user types in the input field and their selections appear as tags in the input field.
@@ -383,7 +383,7 @@ var Select = function (props) { return jsxRuntime.jsx(reactDropdowns.Select, __a
 var Dropdown = function (props) { return jsxRuntime.jsx(reactDropdowns.Dropdown, __assign({}, props)); };
 var Message = function (props) { return jsxRuntime.jsx(reactDropdowns.Message, __assign({}, props)); };
 
-var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject([""], [""])));
+var UgCheckbox = styled__default["default"](reactForms.Checkbox)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject([""], [""])));
 /**
    * A Checkbox lets users select and unselect options from a list.
    * <hr>
@@ -395,21 +395,21 @@ 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$q;
+var templateObject_1$s;
 
-var UgField = styled__default["default"](reactForms.Field)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject([""], [""])));
+var UgField = styled__default["default"](reactForms.Field)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject([""], [""])));
 /**
    * A Field is a wrapper for input elements
    **/
 var Field = function (props) { return jsxRuntime.jsx(UgField, __assign({}, props)); };
-var templateObject_1$p;
+var templateObject_1$r;
 
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Field: Field
 });
 
-var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject([""], [""])));
+var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject([""], [""])));
 /**
    * An Input lets users enter text into a field.
    * <hr>
@@ -418,9 +418,9 @@ var UgInput = styled__default["default"](reactForms.Input)(templateObject_1$o ||
    *  - To enter multiline text, use a Textarea
    **/
 var Input = function (props) { return jsxRuntime.jsx(UgInput, __assign({}, props)); };
-var templateObject_1$o;
+var templateObject_1$q;
 
-var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject([""], [""])));
+var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject([""], [""])));
 /**
    * Radio buttons let users choose a single option among two or more mutually exclusive options.
    * <hr>
@@ -432,9 +432,9 @@ var UgRadio = styled__default["default"](reactForms.Radio)(templateObject_1$n ||
    *  - To select from a long list of options, use Select instead
    **/
 var Radio = function (props) { return jsxRuntime.jsx(UgRadio, __assign({}, props)); };
-var templateObject_1$n;
+var templateObject_1$p;
 
-var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject([""], [""])));
+var UgTextarea = styled__default["default"](reactForms.Textarea)(templateObject_1$o || (templateObject_1$o = __makeTemplateObject([""], [""])));
 /**
    * A Textarea is a form control for multi-line text.
    * <hr>
@@ -442,9 +442,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$m;
+var templateObject_1$o;
 
-var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject([""], [""])));
+var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$n || (templateObject_1$n = __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>
@@ -455,7 +455,7 @@ var UgToggle = styled__default["default"](reactForms.Toggle)(templateObject_1$l
    *  - 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$l;
+var templateObject_1$n;
 
 var Col = function (props) { return jsxRuntime.jsx(reactGrid.Col, __assign({}, props)); };
 
@@ -520,7 +520,7 @@ var SvgUgTriangle = function SvgUgTriangle(props) {
   })));
 };
 
-var StyledUgIcon = styled__default["default"].span(templateObject_1$k || (templateObject_1$k = __makeTemplateObject([""], [""])));
+var StyledUgIcon = styled__default["default"].span(templateObject_1$m || (templateObject_1$m = __makeTemplateObject([""], [""])));
 var Icon = function (props) {
     var children = function (type, size) {
         if (size === void 0) { size = 24; }
@@ -533,17 +533,17 @@ var Icon = function (props) {
     };
     return (jsxRuntime.jsx(StyledUgIcon, { children: children(props.type, props.size) }));
 };
-var templateObject_1$k;
+var templateObject_1$m;
 
-var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
+var UgLabel = styled__default["default"](reactForms.Label)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject([""], [""])));
 /**
    * A Label is used to specify a title for an input.
    * <hr>
    **/
 var Label = function (props) { return jsxRuntime.jsx(UgLabel, __assign({}, props)); };
-var templateObject_1$j;
+var templateObject_1$l;
 
-var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject([""], [""])));
+var UgProgress = styled__default["default"](reactLoaders.Progress)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject([""], [""])));
 /**
  * A Progress loader communicates progress when downloading or uploading content.
  * <hr>
@@ -555,9 +555,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$i;
+var templateObject_1$k;
 
-var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject([""], [""])));
+var UgSkeleton = styled__default["default"](reactLoaders.Skeleton)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject([""], [""])));
 /**
  * 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>
@@ -572,9 +572,9 @@ 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$h;
+var templateObject_1$j;
 
-var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject([""], [""])));
+var UgSpinner = styled__default["default"](reactLoaders.Spinner)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject([""], [""])));
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
  * <hr>
@@ -583,7 +583,7 @@ 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$g;
+var templateObject_1$i;
 
 /**
  * Title is a basic component used to display a title. Often used in card headers.
@@ -637,7 +637,7 @@ var Logo = function (props) {
         }[props.type] })));
 };
 
-var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var ugModalBody = styled__default["default"](reactModals.Body)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey["800"];
 });
@@ -646,7 +646,7 @@ var FooterItem = reactModals.FooterItem;
 Modal.Header = reactModals.Header;
 Modal.Body = ugModalBody;
 Modal.Footer = reactModals.Footer;
-var templateObject_1$f;
+var templateObject_1$h;
 
 /**
  * A Body defines the main content of an HTML document which displays on the browser
@@ -658,9 +658,9 @@ var Body$1 = function (props) { return jsxRuntime.jsx(reactChrome.Body, __assign
  */
 var Content = function (props) { return jsxRuntime.jsx(reactChrome.Content, __assign({}, props)); };
 
-var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; });
+var UgHeaderItem = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (props) { return props.hasLogo && "border-right: none"; });
 var HeaderItem = function (props) { return jsxRuntime.jsx(UgHeaderItem, __assign({}, props)); };
-var templateObject_1$e;
+var templateObject_1$g;
 
 var HeaderItemText = function (props) { return jsxRuntime.jsx(reactChrome.HeaderItemText, __assign({}, props)); };
 
@@ -685,7 +685,7 @@ var SvgMenuStroke = function SvgMenuStroke(props) {
   })));
 };
 
-var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$d || (templateObject_1$d = __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 LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$f || (templateObject_1$f = __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;
 });
@@ -706,16 +706,18 @@ var MenuItem = styled__default["default"](reactChrome.HeaderItem)(templateObject
 var BrandItem = function (props) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) })))] }));
 };
-var templateObject_1$d, templateObject_2$3, templateObject_3;
+var templateObject_1$f, templateObject_2$3, templateObject_3;
 
+var UgHeader = styled__default["default"](reactChrome.Header)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n    height: ", ";\n"], ["\n    height: ", ";\n"])), theme.components.Headers.height);
 /**
  * An Header is a visual way to display general information.
  * This can include navList Items, modal, profile settings.
  */
-var Header = function (props) { return jsxRuntime.jsx(reactChrome.Header, __assign({}, props)); };
+var Header = function (props) { return jsxRuntime.jsx(UgHeader, __assign({}, props)); };
 Header.HeaderItem = HeaderItem;
 Header.HeaderItemText = HeaderItemText;
-Header.HeaderItemIcon = HeaderItemIcon;
+Header.HeaderItemIcon = HeaderItemIcon;
+var templateObject_1$e;
 
 var _path$5, _path2;
 
@@ -755,7 +757,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
   })));
 };
 
-var ChevronButton = styled__default["default"](IconButton)(templateObject_1$c || (templateObject_1$c = __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$d || (templateObject_1$d = __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;
 });
@@ -767,21 +769,29 @@ var AppHeader = function (_a) {
     var brand = _a.brand, avatar = _a.avatar, args = __rest(_a, ["brand", "avatar"]);
     return (jsxRuntime.jsxs(Header, __assign({}, args, { children: [jsxRuntime.jsx(BrandItem, __assign({}, brand, { toggleMenu: args.onSidebarMenuToggle })), args.hasChangelog && (jsxRuntime.jsx(HeaderItem, __assign({ onClick: args.onChangelogClick, style: { marginRight: "-" + theme.space.sm } }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMegaphoneStroke, {}) }) }))), jsxRuntime.jsx(HeaderItem, __assign({ isRound: true, onClick: avatar === null || avatar === void 0 ? void 0 : avatar.onProfileModalToggle }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar, __assign({}, avatar)), jsxRuntime.jsx(ChevronButton, __assign({ size: "small" }, { children: jsxRuntime.jsx(SvgChevronDownStroke, {}) }))] }) }) }))] })));
 };
-var templateObject_1$c;
+var templateObject_1$d;
 
+var UgMain = styled__default["default"](reactChrome.Main)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  @media (max-width: ", ") {\n    margin: 0 ", "\n  }\n"], ["\n  @media (max-width: ", ") {\n    margin: 0 ", "\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.sm;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.xxl;
+});
 /**
  * A Main defines the main content of an HTML document which displays on the browser
  */
-var Main = function (props) { return jsxRuntime.jsx(reactChrome.Main, __assign({}, props)); };
+var Main = function (props) { return jsxRuntime.jsx(UgMain, __assign({}, props)); };
+var templateObject_1$c;
 
-var UgNav = styled__default["default"](reactChrome.Nav)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\n  ", "\n  transition: width 0.25s ease-in-out;\n  padding-top: ", ";\n  padding-left: ", ";\n"], ["\n  border-right: ", ";\n  border-color: ", ";\n  ", "\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$b || (templateObject_1$b = __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 theme = _a.theme;
     return theme.borders.sm;
 }, function (_a) {
     var theme = _a.theme;
     return reactTheming.getColor(theme.colors.neutralHue, 300);
-}, function (props) { return !props.isExpanded && "width:  ".concat(props.theme.space.base * 9, "px;"); }, function (props) {
-    return "\n      @media (max-width: ".concat(props.theme.breakpoints.sm, ") {\n         width: ").concat(props.isExpanded ? "100%" : "0", ";\n         border-right: none;\n      }\n  ");
+}, 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  ");
 }, function (_a) {
     var theme = _a.theme;
     return theme.space.sm;
@@ -818,7 +828,7 @@ var templateObject_1$9;
  */
 var Ellipsis = function (props) { return jsxRuntime.jsx(reactTypography.Ellipsis, __assign({}, props)); };
 
-var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "180px" } }, { children: props.children })) }))); };
+var NavItemText = function (props) { return (jsxRuntime.jsx(reactChrome.NavItemText, __assign({}, props, { children: jsxRuntime.jsx(Ellipsis, __assign({ style: { width: "200px" } }, { children: props.children })) }))); };
 
 var _path$3;
 
@@ -1137,6 +1147,10 @@ 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)); };
 
+Object.defineProperty(exports, 'ModalClose', {
+    enumerable: true,
+    get: function () { return reactModals.Close; }
+});
 exports.Accordion = Accordion;
 exports.Anchor = Anchor;
 exports.AppHeader = AppHeader;

package/build/stories/modals/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { Close as ModalClose } from "@zendeskgarden/react-modals";
 import { ModalArgs } from "./_types";
 declare const Modal: {
     (props: ModalArgs): JSX.Element;
@@ -7,4 +8,4 @@ declare const Modal: {
     Footer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 };
 declare const FooterItem: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
-export { Modal, FooterItem };
+export { Modal, FooterItem, ModalClose };

package/build/stories/theme/index.d.ts

@@ -148,6 +148,9 @@ declare const theme: {
         horizontal: string;
         dark: string;
     };
+    components: {
+        Headers: any;
+    };
     rtl: boolean;
     document?: any;
     borders: {
@@ -183,7 +186,6 @@ declare const theme: {
         neutralHue: string;
         chromeHue: string;
     };
-    components: Record<string, any>;
     fontSizes: {
         xs: string;
         sm: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.5.2",
+  "version": "2.5.6",
   "dependencies": {
     "@zendeskgarden/react-accordions": "^8.49.0",
     "@zendeskgarden/react-avatars": "^8.49.0",
@@ -86,7 +86,7 @@
     "@types/styled-components": "^5.1.23",
     "@zendeskgarden/react-theming": "^8.48.2",
     "@zendeskgarden/svg-icons": "^6.31.1",
-    "auto": "^10.32.6",
+    "auto": "^10.36.5",
     "babel-loader": "^8.2.3",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "3.3.0",