@appquality/unguess-design-system 2.12.10 → 2.12.11

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# 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;
@@ -2382,7 +2388,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 +2400,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 +2517,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 +2530,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 +2543,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 +2553,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 +2566,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 +2621,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 +3257,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/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/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.11",
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",