@appquality/unguess-design-system 2.10.56 → 2.10.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/build/index.js +95 -36
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,41 @@
1
+ # v2.10.59 (Tue Jun 21 2022)
2
+
3
+ #### ⚠️ Pushed to `master`
4
+
5
+ - Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@marcbon](https://github.com/marcbon))
6
+ - refactor(navigation): fix page-header spacings + remove sidebar feature check ([@marcbon](https://github.com/marcbon))
7
+
8
+ #### Authors: 1
9
+
10
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
11
+
12
+ ---
13
+
14
+ # v2.10.58 (Tue Jun 21 2022)
15
+
16
+ #### 🐛 Bug Fix
17
+
18
+ - Fix/page header [#73](https://github.com/AppQuality/unguess-design-system/pull/73) ([@marcbon](https://github.com/marcbon))
19
+
20
+ #### Authors: 1
21
+
22
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
23
+
24
+ ---
25
+
26
+ # v2.10.57 (Mon Jun 20 2022)
27
+
28
+ #### ⚠️ Pushed to `master`
29
+
30
+ - Merge branch 'master' of github.com:AppQuality/unguess-design-system ([@cannarocks](https://github.com/cannarocks))
31
+ - fix(page-header): remove typos from story ([@cannarocks](https://github.com/cannarocks))
32
+
33
+ #### Authors: 1
34
+
35
+ - Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
36
+
37
+ ---
38
+
1
39
  # v2.10.56 (Mon Jun 20 2022)
2
40
 
3
41
  #### ⚠️ Pushed to `master`
package/build/index.js CHANGED
@@ -1853,8 +1853,6 @@ var LoadingSidebar = function (props) {
1853
1853
  };
1854
1854
  var templateObject_1$o;
1855
1855
 
1856
- var FEATURE_FLAG_CATALOG = 'catalog-pages';
1857
-
1858
1856
  var TokenContainer = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __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"])));
1859
1857
  var ScrollingContainer = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __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"])));
1860
1858
  var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$b || (templateObject_3$b = __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) {
@@ -1870,7 +1868,6 @@ var StyledNavItem = styled__default["default"](NavItem)(templateObject_3$b || (t
1870
1868
  */
1871
1869
  var Sidebar = function (props) {
1872
1870
  var _a = React.useState(props.currentRoute || "home"), nav = _a[0], setNav = _a[1];
1873
- var features = props.features;
1874
1871
  var showWorkspacesDropdown = window.matchMedia("only screen and (max-width: ".concat(theme.breakpoints.sm, ")")).matches;
1875
1872
  var toggleNav = function () {
1876
1873
  props.onToggleMenu && props.onToggleMenu();
@@ -1890,8 +1887,7 @@ var Sidebar = function (props) {
1890
1887
  props.workspaces.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledNavItem, __assign({ hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })), 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: {
1891
1888
  marginLeft: theme.space.xs,
1892
1889
  color: theme.palette.grey[800],
1893
- } }, { 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" })] })), features &&
1894
- features.find(function (feature) { return feature.slug === FEATURE_FLAG_CATALOG; }) && (jsxRuntime.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? (jsxRuntime.jsx(SvgTemplatesActive, {})) : (jsxRuntime.jsx(SvgTemplates, {})) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] }))), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
1890
+ } }, { 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.jsxs(NavItem, __assign({ isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: function () { return navigate("services"); } }, { children: [jsxRuntime.jsx(NavItemIcon, __assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), jsxRuntime.jsxs(NavDivider, __assign({ isExpanded: props.isExpanded }, { children: [jsxRuntime.jsx(SvgFolderIcon, {}), " ", props.dividerLabel || ""] })), jsxRuntime.jsx(ScrollingContainer, { children: props.projects &&
1895
1891
  props.projects.map(function (project) { return (jsxRuntime.jsxs(NavItemProject, __assign({ 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)); }) }), 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" })] }))] })));
1896
1892
  };
1897
1893
  var templateObject_1$n, templateObject_2$d, templateObject_3$b;
@@ -1966,18 +1962,30 @@ Modal.Footer = reactModals.Footer;
1966
1962
  var templateObject_1$j;
1967
1963
 
1968
1964
  var StyledModal$1 = styled__default["default"](Modal)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"], ["\n width: 100%;\n height: 100%;\n max-height: 100%;\n border-radius: 0;\n left: unset;\n right: unset;\n top: unset;\n bottom: unset;\n"])));
1969
- var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", "px ", "px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", "px ", "px;\n"])), function (_a) {
1965
+ var StyledHeader = styled__default["default"](Modal.Header)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
1970
1966
  var theme = _a.theme;
1971
- return theme.space.base * 3;
1967
+ return "".concat(theme.space.sm, " ").concat(theme.space.base * 6, "px");
1972
1968
  }, function (_a) {
1973
1969
  var theme = _a.theme;
1974
- return theme.space.base * 6;
1970
+ return theme.breakpoints.sm;
1971
+ }, function (_a) {
1972
+ var theme = _a.theme;
1973
+ return theme.space.md;
1975
1974
  });
1976
- var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), function (_a) {
1975
+ var StyledBody$4 = styled__default["default"](Modal.Body)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n background-color: ", ";\n padding: ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
1977
1976
  var theme = _a.theme;
1978
1977
  return theme.palette.grey["100"];
1978
+ }, function (_a) {
1979
+ var theme = _a.theme;
1980
+ return "".concat(theme.space.md, " ").concat(theme.space.base * 6, "px");
1981
+ }, function (_a) {
1982
+ var theme = _a.theme;
1983
+ return theme.breakpoints.sm;
1984
+ }, function (_a) {
1985
+ var theme = _a.theme;
1986
+ return "".concat(theme.space.lg, " ").concat(theme.space.md);
1979
1987
  });
1980
- var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n padding: ", "px ", "px;\n"], ["\n padding: ", "px ", "px;\n"])), function (_a) {
1988
+ var StyledFooter = styled__default["default"](Modal.Footer)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n padding: ", "px\n ", "px;\n"], ["\n padding: ", "px\n ", "px;\n"])), function (_a) {
1981
1989
  var theme = _a.theme;
1982
1990
  return theme.space.base * 4;
1983
1991
  }, function (_a) {
@@ -2024,28 +2032,69 @@ var Pagination = function (props) { return jsxRuntime.jsx(UgPagination, __assign
2024
2032
  var CursorPagination = reactPagination.CursorPagination;
2025
2033
  var templateObject_1$h;
2026
2034
 
2027
- var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject([""], [""])));
2028
- /**
2029
- * Use Paragraph to render blocks of text with Garden styling.
2030
- */
2031
- var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
2032
- var templateObject_1$g;
2033
-
2034
- var MainContainer = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
2035
- var InformationContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n padding: ", " 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n height: 100%;\n"], ["\n padding: ", " 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n height: 100%;\n"])), theme.space.xs);
2035
+ var MainContainer = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
2036
+ var InformationContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"], ["\n padding: ", "; 0;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n flex-wrap: wrap;\n flex-direction: column;\n\n @media screen and (max-width: ", ") \n height: auto;\n } \n"])), function (_a) {
2037
+ var theme = _a.theme;
2038
+ return theme.space.xs;
2039
+ }, function (_a) {
2040
+ var theme = _a.theme;
2041
+ return theme.breakpoints.sm;
2042
+ });
2036
2043
  var MetaContainer = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n flex-wrap: wrap;\n"])));
2037
- var Overline = styled__default["default"](MD)(templateObject_4$5 || (templateObject_4$5 = __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"])), theme.palette.grey[600], theme.space.md, theme.fontWeights.semibold, theme.lineHeights.md);
2038
- 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"])), theme.colors.primaryHue, theme.fontSizes.xxxl, theme.fontWeights.semibold, theme.lineHeights.xxxl);
2039
- var Description$1 = styled__default["default"](Paragraph)(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"])), theme.palette.grey[600], theme.space.md, theme.lineHeights.lg);
2040
- var Image = styled__default["default"].img(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: auto;\n height: 100%;\n max-height: ", ";\n"], ["\n width: auto;\n height: 100%;\n max-height: ", ";\n"])), theme.components.pageHeader.imgMaxHeight);
2041
- var Counters = styled__default["default"].div(templateObject_8 || (templateObject_8 = __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 > *:first-child {\n padding-left: 0;\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 > *:first-child {\n padding-left: 0;\n }\n"])), theme.space.md);
2042
- var StyledCol = styled__default["default"](Col)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
2044
+ var Overline = styled__default["default"](MD)(templateObject_4$5 || (templateObject_4$5 = __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) {
2045
+ var theme = _a.theme;
2046
+ return theme.palette.grey[600];
2047
+ }, function (_a) {
2048
+ var theme = _a.theme;
2049
+ return theme.space.md;
2050
+ }, function (_a) {
2051
+ var theme = _a.theme;
2052
+ return theme.fontWeights.semibold;
2053
+ }, function (_a) {
2054
+ var theme = _a.theme;
2055
+ return theme.lineHeights.md;
2056
+ });
2057
+ 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) {
2058
+ var theme = _a.theme;
2059
+ return theme.colors.primaryHue;
2060
+ }, function (_a) {
2061
+ var theme = _a.theme;
2062
+ return theme.fontSizes.xxxl;
2063
+ }, function (_a) {
2064
+ var theme = _a.theme;
2065
+ return theme.fontWeights.semibold;
2066
+ }, function (_a) {
2067
+ var theme = _a.theme;
2068
+ return theme.lineHeights.xxxl;
2069
+ });
2070
+ 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) {
2071
+ var theme = _a.theme;
2072
+ return theme.palette.grey[600];
2073
+ }, function (_a) {
2074
+ var theme = _a.theme;
2075
+ return theme.space.md;
2076
+ }, function (_a) {
2077
+ var theme = _a.theme;
2078
+ return theme.lineHeights.lg;
2079
+ });
2080
+ 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) {
2081
+ var theme = _a.theme;
2082
+ return theme.space.md;
2083
+ }, function (_a) {
2084
+ var theme = _a.theme;
2085
+ return theme.space.sm;
2086
+ });
2087
+ var StyledCol = styled__default["default"](Col)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
2088
+ var Image = styled__default["default"].img(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: auto;\n height: 100%;\n max-height: ", ";\n"], ["\n width: auto;\n height: 100%;\n max-height: ", ";\n"])), function (_a) {
2089
+ var theme = _a.theme;
2090
+ return theme.components.pageHeader.imgMaxHeight;
2091
+ });
2043
2092
  var Main = function (props) {
2044
- return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ orderXs: 2, orderSm: 1, 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({ orderXs: 1, orderSm: 2, xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage }) }) })))] }) }));
2093
+ return (jsxRuntime.jsx(MainContainer, { children: jsxRuntime.jsxs(Row$1, { children: [jsxRuntime.jsx(StyledCol, __assign({ orderXs: 2, orderSm: 1, 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({ orderXs: 1, orderSm: 2, xs: 12, sm: props.metaImage ? 6 : 12 }, { children: jsxRuntime.jsx(MetaContainer, { children: jsxRuntime.jsx(Image, { src: props.metaImage, title: props.infoTitle, alt: props.infoTitle }) }) })))] }) }));
2045
2094
  };
2046
- var templateObject_1$f, templateObject_2$b, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
2095
+ var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
2047
2096
 
2048
- var StyledPageHeader = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
2097
+ var StyledPageHeader = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n background-color: ", ";\n padding: ", ";\n box-sizing: border-box;\n border-bottom: 1px solid ", ";\n\n @media (max-width: ", ") {\n padding: ", ";\n }\n"])), function (_a) {
2049
2098
  var theme = _a.theme;
2050
2099
  return theme.palette.white;
2051
2100
  }, function (_a) {
@@ -2061,9 +2110,12 @@ var StyledPageHeader = styled__default["default"].div(templateObject_1$e || (tem
2061
2110
  var theme = _a.theme;
2062
2111
  return "".concat(theme.space.md, " ").concat(theme.space.md, " ").concat(theme.space.xs);
2063
2112
  });
2064
- var PullLeft = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: ", ";\n"])), function (_a) {
2113
+ var PullLeft = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n padding: ", ";\n margin-bottom: ", ";\n"])), function (_a) {
2065
2114
  var theme = _a.theme;
2066
- return theme.space.sm;
2115
+ return "".concat(theme.space.xs, " 10px");
2116
+ }, function (_a) {
2117
+ var theme = _a.theme;
2118
+ return theme.space.xs;
2067
2119
  });
2068
2120
  var ButtonContainer = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n margin: ", " 0;\n"])), function (_a) {
2069
2121
  var theme = _a.theme;
@@ -2086,7 +2138,7 @@ var PageHeader = function (props) {
2086
2138
  PageHeader.Breadcrumb = StyledBreadcrumb;
2087
2139
  PageHeader.Main = Main;
2088
2140
  PageHeader.Buttons = Buttons;
2089
- var templateObject_1$e, templateObject_2$a, templateObject_3$8;
2141
+ var templateObject_1$f, templateObject_2$a, templateObject_3$8;
2090
2142
 
2091
2143
  var _path$5;
2092
2144
 
@@ -2125,15 +2177,15 @@ var SvgThumbsUp = function SvgThumbsUp(props) {
2125
2177
  })));
2126
2178
  };
2127
2179
 
2128
- var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"], ["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return (props.isVisible ? "1" : "0"); }, function (props) { return (props.isDisabled ? "inherit" : theme.palette.grey[600]); }, function (props) { return props.theme.iconSizes.md; }, function (props) { return props.theme.iconSizes.md; });
2180
+ var StyledMenuItemIcon = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"], ["\n display: flex;\n transition: opacity 0.1s ease-in-out;\n opacity: ", ";\n color: ", ";\n margin-left: auto;\n & > * {\n width: ", ";\n height: ", ";\n }\n"])), function (props) { return (props.isVisible ? "1" : "0"); }, function (props) { return (props.isDisabled ? "inherit" : theme.palette.grey[600]); }, function (props) { return props.theme.iconSizes.md; }, function (props) { return props.theme.iconSizes.md; });
2129
2181
  var MenuItemIcon = function (props) { return (jsxRuntime.jsx(StyledMenuItemIcon, __assign({ isVisible: true }, props, { children: jsxRuntime.jsx(SvgChevronRightStroke, {}) }))); };
2130
- var templateObject_1$d;
2182
+ var templateObject_1$e;
2131
2183
 
2132
2184
  /**
2133
2185
  * 1. Allows an item to contain a positioned sub-menu.
2134
2186
  * 2. Reset stacking context for sub-menu css-arrows.
2135
2187
  **/
2136
- var StyledItem = styled__default["default"].li(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"], ["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"])), function (props) { return (props.disabled ? "default" : "pointer"); }, function (props) { return props.theme.space.base * 5; }, function (props) { return props.theme.space.base; }, function (props) { return props.theme.space.base; }, flexCenter, theme.space.xxl, theme.space.xs, theme.space.md, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? theme.palette.red[500] : theme.palette.grey[800], ";\n }"); }, StyledMenuItemIcon, function (props) {
2188
+ var StyledItem = styled__default["default"].li(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"], ["\n display: block;\n position: relative; /* [1] */\n z-index: 0; /* [2] */\n cursor: ", ";\n text-decoration: none;\n line-height: ", "px;\n word-wrap: break-word;\n user-select: none;\n &:first-child {\n margin-top: ", "px;\n }\n &:last-child {\n margin-bottom: ", "px;\n }\n &:focus {\n outline: none;\n }\n\n width: fill-available;\n ", "\n height: ", ";\n padding: ", " ", ";\n\n ", ";\n\n ", " {\n right: ", ";\n left: ", ";\n }\n"])), function (props) { return (props.disabled ? "default" : "pointer"); }, function (props) { return props.theme.space.base * 5; }, function (props) { return props.theme.space.base; }, function (props) { return props.theme.space.base; }, flexCenter, theme.space.xxl, theme.space.xs, theme.space.md, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? theme.palette.red[500] : theme.palette.grey[800], ";\n }"); }, StyledMenuItemIcon, function (props) {
2137
2189
  return props.theme.rtl ? "auto" : "".concat(props.theme.space.base * 3, "px");
2138
2190
  }, function (props) {
2139
2191
  return props.theme.rtl ? "".concat(props.theme.space.base * 3, "px") : "auto";
@@ -2152,7 +2204,7 @@ var MenuItem = function (_a) {
2152
2204
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
2153
2205
  return isActive && content ? (jsxRuntime.jsx(StyledBody$3, { children: content }, props.value)) : (jsxRuntime.jsxs(StyledItem, __assign({}, props, { onClick: function () { return props.setActive(props.value); } }, { children: [props.icon && jsxRuntime.jsx(IconContainer, { children: props.icon }), children, content && jsxRuntime.jsx(MenuItemIcon, {})] }), props.value));
2154
2206
  };
2155
- var templateObject_1$c, templateObject_2$9, templateObject_3$7, templateObject_4$4;
2207
+ var templateObject_1$d, templateObject_2$9, templateObject_3$7, templateObject_4$4;
2156
2208
 
2157
2209
  var _path$3;
2158
2210
 
@@ -2209,8 +2261,15 @@ var SvgInfoFill = function SvgInfoFill(props) {
2209
2261
  })));
2210
2262
  };
2211
2263
 
2212
- var StyledButton$2 = styled__default["default"](Button)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; }, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
2264
+ var StyledButton$2 = styled__default["default"](Button)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n padding-left: 0;\n justify-content: flex-start;\n\n ", ";\n"])), function (props) { return props.theme.palette.grey[800]; }, function (props) { return props.theme.fontWeights.bold; }, function (props) { return "\n &:hover,\n &:focus,\n &:active {\n background-color: ".concat(props.theme.palette.kale[100], ";\n color: ").concat(props.isDanger ? props.theme.palette.red[500] : props.theme.palette.grey[800], ";\n }"); });
2213
2265
  var PreviousButton = function (props) { return (jsxRuntime.jsxs(StyledButton$2, __assign({}, props, { isStretched: true }, { children: [jsxRuntime.jsx(StyledButton$2.StartIcon, { children: jsxRuntime.jsx(SvgChevronLeftStroke, {}) }), props.children] }))); };
2266
+ var templateObject_1$c;
2267
+
2268
+ var UgParagraph = styled__default["default"](reactTypography.Paragraph)(templateObject_1$b || (templateObject_1$b = __makeTemplateObject([""], [""])));
2269
+ /**
2270
+ * Use Paragraph to render blocks of text with Garden styling.
2271
+ */
2272
+ var Paragraph = function (props) { return jsxRuntime.jsx(UgParagraph, __assign({}, props)); };
2214
2273
  var templateObject_1$b;
2215
2274
 
2216
2275
  var getInitials = function (name) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "2.10.56",
3
+ "version": "2.10.59",
4
4
  "dependencies": {
5
5
  "@zendeskgarden/css-bedrock": "^9.0.0",
6
6
  "@zendeskgarden/react-accordions": "^8.49.0",