@appquality/unguess-design-system 2.12.10 → 2.12.12

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v2.12.12 (Tue Sep 27 2022)
+
+#### ⚠️ Pushed to `master`
+
+- feat(sidebar): add projectAccordion scroll ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v2.12.11 (Wed Sep 21 2022)
+
+#### ⚠️ Pushed to `master`
+
+- Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
+- feat(page-header): allow complex child on main sub-component ([@cannarocks](https://github.com/cannarocks))
+- feat(inputToggle): keep ratio between textSize and lineHeight costant ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.10 (Tue Sep 20 2022)
 
 #### ⚠️ Pushed to `master`

package/build/index.js

@@ -265,7 +265,8 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
         thumbSize: "60px",
     } });
 
-var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), 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 theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), 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" }), lineHeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.lineHeights), { xs: '16px' // same as sm
+     }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
 
 var GlobalStyle = styled.createGlobalStyle(templateObject_1$1i || (templateObject_1$1i = __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  html {\n    overflow-y: auto;\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  html {\n    overflow-y: auto;\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$1i;
@@ -713,7 +714,7 @@ var Label$2 = styled__default["default"](SM)(templateObject_1$1a || (templateObj
     var theme = _a.theme;
     return theme.palette.grey[500];
 });
-var Title$3 = styled__default["default"](LG)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+var Title$2 = styled__default["default"](LG)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  color: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n"], ["\n  color: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.primaryHue;
 }, function (_a) {
@@ -723,7 +724,7 @@ var Title$3 = styled__default["default"](LG)(templateObject_2$v || (templateObje
     var theme = _a.theme;
     return theme.space.xxs;
 });
-var Description$3 = styled__default["default"](MD)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  color: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+var Description$2 = styled__default["default"](MD)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  color: ", ";\n  margin-top: ", ";\n"], ["\n  color: ", ";\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[700];
 }, function (_a) {
@@ -736,8 +737,8 @@ var Container$2 = styled__default["default"].div(templateObject_4$f || (template
 });
 var CardHeader = function (props) { return jsxRuntime.jsx(Container$2, __assign({}, props)); };
 CardHeader.Label = Label$2;
-CardHeader.Title = Title$3;
-CardHeader.Text = Description$3;
+CardHeader.Title = Title$2;
+CardHeader.Text = Description$2;
 var templateObject_1$1a, templateObject_2$v, templateObject_3$k, templateObject_4$f;
 
 var Divider = styled__default["default"].div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n  width: 100%;\n  height: 1px;\n  margin-top: ", "px;\n  margin-bottom: ", ";\n  background-color: ", ";\n"], ["\n  width: 100%;\n  height: 1px;\n  margin-top: ", "px;\n  margin-bottom: ", ";\n  background-color: ", ";\n"])), function (_a) {
@@ -1067,7 +1068,7 @@ var Label$1 = styled__default["default"](MD)(templateObject_4$d || (templateObje
     var theme = _a.theme;
     return theme.palette.grey[800];
 });
-var Description$2 = styled__default["default"](SM)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var Description$1 = styled__default["default"](SM)(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[600];
 });
@@ -1077,7 +1078,7 @@ var Image$1 = React.memo(function (_a) {
 });
 var ItemContent = function (props) {
     var thumbSrc = props.thumbSrc, description = props.description, label = props.label;
-    return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, __assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$2, { children: description })] })] }));
+    return (jsxRuntime.jsxs(Container, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, __assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$1, { children: description })] })] }));
 };
 var templateObject_1$_, templateObject_2$q, templateObject_3$g, templateObject_4$d, templateObject_5$5;
 
@@ -1336,7 +1337,7 @@ var Header$1 = styled__default["default"].div(templateObject_1$W || (templateObj
     var theme = _a.theme;
     return theme.palette.grey[300];
 });
-var Title$2 = styled__default["default"](MD)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var Title$1 = styled__default["default"](MD)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var validation = _a.validation, theme = _a.theme;
     if (validation === "success") {
         return "color: ".concat(theme.colors.successHue, ";");
@@ -1353,7 +1354,7 @@ var Title$2 = styled__default["default"](MD)(templateObject_2$o || (templateObje
 });
 var EditorHeader = function (props) {
     var title = props.title, validation = props.validation;
-    return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$2, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
+    return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$1, __assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
 };
 var templateObject_1$W, templateObject_2$o;
 
@@ -1583,16 +1584,21 @@ var InputToggle = function (_a) {
     }, []);
     return (jsxRuntime.jsx(ToggleContext.Provider, __assign({ value: context }, { children: jsxRuntime.jsx(Wrapper, __assign({ ref: container, onClick: handleClick, onBlur: function () { return setIsEditing(false); } }, props)) })));
 };
+var getInputSize = function (textSize) { return ({
+    fontSize: textSize in theme.fontSizes ? theme.fontSizes[textSize] : "22px",
+    lineHeight: textSize in theme.lineHeights ? theme.lineHeights[textSize] : "28px",
+}); };
 var InputItem = function (props) {
-    var _a = props.placeholder, placeholder = _a === void 0 ? "Insert a value" : _a, value = props.value, style = props.style, _b = props.textSize, textSize = _b === void 0 ? '22px' : _b;
+    var _a = props.placeholder, placeholder = _a === void 0 ? "Insert a value" : _a, value = props.value, style = props.style, _b = props.textSize, textSize = _b === void 0 ? "xl" : _b;
     var _c = React.useState(), input = _c[0], setInput = _c[1];
     var isEditing = React.useContext(ToggleContext).isEditing;
+    var size = getInputSize(textSize);
     React.useEffect(function () {
         if (isEditing && input) {
             input.focus();
         }
     }, [isEditing, input]);
-    return isEditing ? (jsxRuntime.jsx(StyledInput, __assign({ ref: setInput }, props, { style: __assign({ fontSize: textSize, fontWeight: 500 }, style) }))) : (jsxRuntime.jsxs(StyledText$1, __assign({ isBold: true, style: __assign({ fontSize: textSize, fontWeight: 500 }, style) }, { children: [!value ? placeholder : value, " ", jsxRuntime.jsx(SvgNotesStroke, {})] })));
+    return isEditing ? (jsxRuntime.jsx(StyledInput, __assign({ ref: setInput }, props, { style: __assign(__assign({ fontWeight: 500 }, size), style) }))) : (jsxRuntime.jsxs(StyledText$1, __assign({ isBold: true, style: __assign(__assign({ fontWeight: 500 }, size), style) }, { children: [!value ? placeholder : value, " ", jsxRuntime.jsx(SvgNotesStroke, {})] })));
 };
 InputToggle.Item = InputItem;
 InputToggle.Label = StyledLabel;
@@ -2025,10 +2031,7 @@ var UgNavItem$2 = styled__default["default"](reactChrome.NavItem)(templateObject
     var theme = _a.theme;
     return theme.space.xs;
 });
-var NavItem = function (props) {
-    // const { isExpanded } = props;
-    return jsxRuntime.jsx(UgNavItem$2, __assign({}, props));
-};
+var NavItem = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgNavItem$2, __assign({ ref: ref }, props)); });
 var templateObject_1$w, templateObject_2$h;
 
 var UgNavIcon = styled__default["default"](reactChrome.NavItemIcon)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject([""], [""])));
@@ -2107,7 +2110,8 @@ var UgNavItem = styled__default["default"](NavItem)(templateObject_2$g || (templ
     var theme = _a.theme;
     return theme.space.xxl;
 });
-var NavItemProject = function (props) { return jsxRuntime.jsx(UgNavItem, __assign({}, props)); };
+var NavItemComponent = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(UgNavItem, __assign({ ref: ref }, props)); });
+var NavItemProject = NavItemComponent;
 NavItemProject.Title = NavItemText;
 NavItemProject.SubTitle = UgProjectSubtitle;
 var templateObject_1$s, templateObject_2$g;
@@ -2336,6 +2340,7 @@ var SidebarLabel = styled__default["default"](SM)(templateObject_4$9 || (templat
 var Sidebar = function (_a) {
     var projects = _a.projects, _b = _a.defaultAccordionPanels, defaultAccordionPanels = _b === void 0 ? [0] : _b, props = __rest(_a, ["projects", "defaultAccordionPanels"]);
     var _c = React.useState(props.currentRoute || "home"), nav = _c[0], setNav = _c[1];
+    var prjRef = React.useRef(null);
     var showWorkspacesDropdown = window.matchMedia("only screen and (max-width: ".concat(theme.breakpoints.sm, ")")).matches;
     var toggleNav = function () {
         props.onToggleMenu && props.onToggleMenu();
@@ -2350,9 +2355,18 @@ var Sidebar = function (_a) {
             paddingBottom: 0,
         }
         : {};
+    React.useEffect(function () {
+        var _a;
+        if (prjRef && prjRef.current && props.isExpanded) {
+            (_a = prjRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                behavior: "auto",
+                block: "end"
+            });
+        }
+    }, [props.isExpanded]);
     return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, __assign({}, props))) : (jsxRuntime.jsxs(Nav, __assign({}, props, { children: [jsxRuntime.jsxs(ScrollingContainer, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), showWorkspacesDropdown &&
                         props.workspaces &&
-                        props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, __assign({ title: "Workspaces", hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })) })), props.tokens && (jsxRuntime.jsx(SidebarLabel, __assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, __assign({ className: "sidebar-first-level-item", title: "Home", 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" })] })), projects && projects.length ? (jsxRuntime.jsx(AccordionItem, __assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded }, { children: jsxRuntime.jsxs(AccordionItem.Section, { children: [jsxRuntime.jsx(AccordionItem.Header, { children: jsxRuntime.jsxs(AccordionItem.Label, { children: [props.dividerLabel || "", " ", jsxRuntime.jsx(SvgFolderIcon, { style: { marginLeft: theme.space.xs } })] }) }), jsxRuntime.jsx(AccordionItem.Panel, { children: projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === "projects/".concat(project.id), onClick: function () { return navigate("projects", project.id); } }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) })] }) }))) : null, jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); }, style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), props.tokens && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SidebarLabel, __assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, __assign({ title: "Tokens", 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: {
+                        props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, __assign({ title: "Workspaces", hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })) })), props.tokens && (jsxRuntime.jsx(SidebarLabel, __assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, __assign({ className: "sidebar-first-level-item", title: "Home", 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" })] })), projects && projects.length ? (jsxRuntime.jsx(AccordionItem, __assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded }, { children: jsxRuntime.jsxs(AccordionItem.Section, { children: [jsxRuntime.jsx(AccordionItem.Header, { children: jsxRuntime.jsxs(AccordionItem.Label, { children: [props.dividerLabel || "", " ", jsxRuntime.jsx(SvgFolderIcon, { style: { marginLeft: theme.space.xs } })] }) }), jsxRuntime.jsx(AccordionItem.Panel, { children: projects.map(function (project, index) { return (jsxRuntime.jsxs(NavItemProject, __assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === "projects/".concat(project.id) }, (nav === "projects/".concat(project.id) && { ref: prjRef }), { onClick: function () { return navigate("projects", project.id); } }, (index === projects.length - 1 && { style: { marginBottom: 61 } }), { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id)); }) })] }) }))) : null, jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded }), jsxRuntime.jsxs(NavItem, __assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); }, style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), props.tokens && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SidebarLabel, __assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, __assign({ title: "Tokens", 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, 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" })] }))] })));
@@ -2382,7 +2396,7 @@ var templateObject_1$n;
 /**
  * Title is a basic component used to display a title. Often used in card headers.
  */
-var Title$1 = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
+var Title = function (props) { return jsxRuntime.jsx(reactNotifications.Title, __assign({}, props)); };
 
 var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  @media screen and (max-width: ", ") {\n    border: 0;\n  }\n"], ["\n  @media screen and (max-width: ", ") {\n    border: 0;\n  }\n"])), theme.breakpoints.sm);
 /**
@@ -2394,7 +2408,7 @@ var StyledCard = styled__default["default"](ContainerCard)(templateObject_1$m ||
 var LoginForm = function (props) {
     var width = useWindowSize().width;
     var breakpointMd = parseInt(theme.breakpoints.md, 10);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledCard, __assign({}, (width > breakpointMd && { isFloating: true }), props.card, { children: [jsxRuntime.jsx(Title$1, __assign({ style: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledCard, __assign({}, (width > breakpointMd && { isFloating: true }), props.card, { children: [jsxRuntime.jsx(Title, __assign({ style: {
                             textAlign: "center",
                             marginTop: theme.space.sm,
                             marginBottom: theme.space.lg,
@@ -2511,7 +2525,7 @@ var MetaContainer = styled__default["default"].div(templateObject_3$a || (templa
     var theme = _a.theme;
     return theme.breakpoints.sm;
 });
-var Overline = styled__default["default"](MD)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  color: ", ";\n  margin-bottom: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  margin-bottom: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
+var MainOverline = styled__default["default"](MD)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  color: ", ";\n  margin-bottom: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  margin-bottom: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[600];
 }, function (_a) {
@@ -2524,7 +2538,7 @@ var Overline = styled__default["default"](MD)(templateObject_4$7 || (templateObj
     var theme = _a.theme;
     return theme.lineHeights.md;
 });
-var Title = styled__default["default"].h1(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
+var MainTitle = styled__default["default"].h1(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  width: 100%;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  width: 100%;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.primaryHue;
 }, function (_a) {
@@ -2537,7 +2551,7 @@ var Title = styled__default["default"].h1(templateObject_5$3 || (templateObject_
     var theme = _a.theme;
     return theme.lineHeights.xxxl;
 });
-var Description$1 = styled__default["default"](LG)(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  color: ", ";\n  margin: ", " 0;\n  line-height: ", ";\n"], ["\n  color: ", ";\n  margin: ", " 0;\n  line-height: ", ";\n"])), function (_a) {
+var MainDescription = styled__default["default"](LG)(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  color: ", ";\n  margin: ", " 0;\n  line-height: ", ";\n"], ["\n  color: ", ";\n  margin: ", " 0;\n  line-height: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[600];
 }, function (_a) {
@@ -2547,7 +2561,7 @@ var Description$1 = styled__default["default"](LG)(templateObject_6$1 || (templa
     var theme = _a.theme;
     return theme.lineHeights.lg;
 });
-var Counters = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin-top: ", ";\n\n  > div {\n    padding: 0;\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin-top: ", ";\n\n  > div {\n    padding: 0;\n    margin-right: ", ";\n  }\n"])), function (_a) {
+var MainCounters = styled__default["default"].div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin-top: ", ";\n\n  > div {\n    padding: 0;\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  margin-top: ", ";\n\n  > div {\n    padding: 0;\n    margin-right: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.space.md;
 }, function (_a) {
@@ -2560,7 +2574,7 @@ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9
     return theme.components.pageHeader.imgMaxHeight;
 });
 var Main = function (props) {
-    return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsxs(InformationContainer, { children: [props.infoOverline && jsxRuntime.jsx(Overline, { children: props.infoOverline }), props.infoTitle && jsxRuntime.jsx(Title, { children: props.infoTitle }), props.infoDescription && (jsxRuntime.jsx(Description$1, { children: props.infoDescription })), props.infoCounters && jsxRuntime.jsx(Counters, { children: props.infoCounters })] }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
+    return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(InformationContainer, { children: props.children }) })), props.metaImage && (jsxRuntime.jsx(StyledCol, __assign({ xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
 };
 var templateObject_1$i, templateObject_2$c, templateObject_3$a, templateObject_4$7, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
 
@@ -2615,6 +2629,10 @@ var PageHeader = function (props) {
 PageHeader.Breadcrumb = StyledBreadcrumb;
 PageHeader.Main = Main;
 PageHeader.Buttons = Buttons;
+PageHeader.Overline = MainOverline;
+PageHeader.Title = MainTitle;
+PageHeader.Description = MainDescription;
+PageHeader.Counters = MainCounters;
 var templateObject_1$h, templateObject_2$b, templateObject_3$9, templateObject_4$6;
 
 var _path$5;
@@ -3247,7 +3265,7 @@ exports.Tag = Tag;
 exports.Textarea = Textarea;
 exports.Tiles = Tiles;
 exports.Timeline = Timeline;
-exports.Title = Title$1;
+exports.Title = Title;
 exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
 exports.TooltipModal = TooltipModal;

package/build/stories/forms/input-toggle/_types.d.ts

@@ -1,11 +1,12 @@
 import { IInputProps } from "@zendeskgarden/react-forms";
+export declare type textSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
 export interface InputToggleArgs extends IInputProps {
     /** Removes borders and padding */
     isBare?: boolean;
     /** Applies validation state styling */
     validation?: 'success' | 'warning' | 'error';
     /** Sets input size */
-    textSize?: string;
+    textSize?: textSizes;
     /** Sets the initial focus */
     isFocused?: boolean;
 }

package/build/stories/navigation/nav/nav-item/navItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NavItemArgs } from "./_types";
-declare const NavItem: (props: NavItemArgs) => JSX.Element;
+declare const NavItem: import("react").ForwardRefExoticComponent<NavItemArgs & import("react").RefAttributes<HTMLButtonElement>>;
 export { NavItem };

package/build/stories/navigation/nav/nav-item/navItemProject.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 import { NavItemArgs } from "./_types";
-declare const NavItemProject: {
-    (props: NavItemArgs): JSX.Element;
-    Title: (props: import("./_types").NavItemTextArgs) => JSX.Element;
-    SubTitle: import("styled-components").StyledComponent<(props: import("./_types").NavItemTextArgs) => JSX.Element, any, NavItemArgs, never>;
+import { NavItemText } from "./navItemText";
+declare const UgProjectSubtitle: import("styled-components").StyledComponent<(props: import("./_types").NavItemTextArgs) => JSX.Element, any, NavItemArgs, never>;
+declare const NavItemProject: import("react").ForwardRefExoticComponent<NavItemArgs & import("react").RefAttributes<HTMLButtonElement>> & {
+    Title: typeof NavItemText;
+    SubTitle: typeof UgProjectSubtitle;
 };
 export { NavItemProject };

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

@@ -13,5 +13,9 @@ declare const PageHeader: {
     Breadcrumb: (props: BreadcrumbArgs) => JSX.Element;
     Main: (props: import("./_types").PageHeaderMainProps) => JSX.Element;
     Buttons: (props: PropsWithChildren<{}>) => JSX.Element;
+    Overline: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
+    Title: import("styled-components").StyledComponent<"h1", any, {}, never>;
+    Description: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
+    Counters: import("styled-components").StyledComponent<"div", any, {}, never>;
 };
 export { PageHeader };

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

@@ -8,6 +8,7 @@ interface PageHeaderStoryProps {
     pageHeaderMainArgs: PageHeaderMainProps;
 }
 export declare const Default: Story<PageHeaderStoryProps>;
+export declare const Editable: Story<PageHeaderStoryProps>;
 declare const _default: ComponentMeta<{
     (props: import("./_types").PageHeaderProps): JSX.Element;
     Breadcrumb: (props: import("../../breadcrumbs/_types").BreadcrumbArgs) => JSX.Element;
@@ -15,5 +16,9 @@ declare const _default: ComponentMeta<{
     Buttons: (props: {
         children?: React.ReactNode;
     }) => JSX.Element;
+    Overline: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
+    Title: import("styled-components").StyledComponent<"h1", any, {}, never>;
+    Description: import("styled-components").StyledComponent<(props: import("../../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
+    Counters: import("styled-components").StyledComponent<"div", any, {}, never>;
 }>;
 export default _default;

package/build/stories/navigation/page-header/styled/main.d.ts

@@ -1,2 +1,6 @@
 import { PageHeaderMainProps } from "../_types";
+export declare const MainOverline: import("styled-components").StyledComponent<(props: import("../../../typography/typescale/_types").MDArgs) => JSX.Element, any, {}, never>;
+export declare const MainTitle: import("styled-components").StyledComponent<"h1", any, {}, never>;
+export declare const MainDescription: import("styled-components").StyledComponent<(props: import("../../../typography/typescale/_types").LGArgs) => JSX.Element, any, {}, never>;
+export declare const MainCounters: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Main: (props: PageHeaderMainProps) => JSX.Element;

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

@@ -3,6 +3,7 @@ import { SidebarArgs } from "./_types";
 interface SidebarStoryArgs extends SidebarArgs {
 }
 export declare const Default: Story<SidebarStoryArgs>;
+export declare const SingleProject: Story<SidebarStoryArgs>;
 export declare const MultipleWorkspaces: Story<SidebarStoryArgs>;
 export declare const WithTokens: Story<SidebarStoryArgs>;
 export declare const WithAll: Story<SidebarStoryArgs>;

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

@@ -194,6 +194,15 @@ declare const theme: {
         sm: string;
         md: string;
     };
+    lineHeights: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+    };
     components: {
         chrome: any;
         notification: any;
@@ -237,14 +246,6 @@ declare const theme: {
         md: string;
         lg: string;
     };
-    lineHeights: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        xxl: string;
-        xxxl: string;
-    };
     shadowWidths: {
         sm: string;
         md: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.10",
+  "version": "2.12.12",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",