@smartbooks-ai/layout 0.0.3 → 0.0.5

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,6 @@
+export type PageHeaderProps = {
+    title: React.ReactNode;
+    actions?: React.ReactNode;
+};
+export declare const PageHeader: React.FC<PageHeaderProps>;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dist/components/PageHeader/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAKhD,CAAC"}

package/dist/components/PageHeader/PageHeader.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import Typography from '@mui/material/Typography';
+import * as Styled from './styles';
+export const PageHeader = ({ title, actions }) => (_jsxs(Styled.Container, { children: [typeof title === 'string' ? _jsx(Typography, { variant: "h1", children: title }) : title, actions && _jsx(Styled.CtaButtons, { children: actions })] }));

package/dist/components/PageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { PageHeader } from './PageHeader';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PageHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/PageHeader/index.js

@@ -0,0 +1 @@
+export { PageHeader } from './PageHeader';

package/dist/components/PageHeader/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const CtaButtons: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/PageHeader/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;mGAerB,CAAC;AAEF,eAAO,MAAM,UAAU;;;mGAatB,CAAC"}

package/dist/components/PageHeader/styles.js

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+export const Container = styled.section(({ theme }) => css `
+    display: flex;
+
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+
+    ${theme.breakpoints?.down?.('md')} {
+      flex-direction: column;
+
+      align-items: flex-start;
+    }
+  `);
+export const CtaButtons = styled.section(({ theme }) => css `
+    display: flex;
+
+    flex: none;
+
+    column-gap: 0.5rem;
+    align-items: center;
+
+    ${theme.breakpoints?.down?.('md')} {
+      align-self: flex-end;
+    }
+  `);

package/dist/components/PageWithMenuLayout/AppSelect/index.d.ts

@@ -0,0 +1,12 @@
+import { AvailableCompany } from '@smartbooks-ai/api-client';
+import { UserProfile } from '../../../security/UserProfile';
+type Props = {
+    companyCode?: string;
+    tenantCode?: string;
+    isExpanded: boolean;
+    profile: UserProfile | null;
+    onCompanyClicked: (company: AvailableCompany) => Promise<void>;
+};
+export declare const AppSelect: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PageWithMenuLayout/AppSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/AppSelect/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAI7D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAI5D,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChE,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+CrC,CAAC"}

package/dist/components/PageWithMenuLayout/AppSelect/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useMemo } from 'react';
+import * as Styled from './styles';
+import { MenuSelect } from '../MenuSelect';
+import { MultiSubscriptionsMenuItems } from '../MultiSubscriptionsMenuItems';
+export const AppSelect = ({ companyCode, isExpanded, tenantCode, profile, onCompanyClicked }) => {
+    const tenants = profile?.allowedTenants;
+    const tenantsWithCompanies = useMemo(() => tenants?.filter(({ companies }) => companies.length > 0) ?? [], [tenants]);
+    const currentCompany = companyCode ? profile?.allowedCompanies.find(({ code }) => code === companyCode) : undefined;
+    const tenant = tenants?.find((t) => currentCompany ? t.companies.some(({ code }) => code === currentCompany.code) : t.code === tenantCode);
+    const onCompanySelected = (closeMenu) => (company) => {
+        closeMenu();
+        onCompanyClicked(company);
+    };
+    const avatarContent = currentCompany?.description
+        .split(' ')
+        .slice(0, 2)
+        .map((word) => word[0])
+        .join('');
+    return (_jsx(MenuSelect, { isExpanded: isExpanded, startIcon: _jsx(Styled.SelectorAvatar, { variant: "rounded", isMenuExpanded: isExpanded, children: avatarContent }), selectedOptionText: currentCompany?.description, renderMenuItems: ({ closeMenu }) => [
+            ...(tenantsWithCompanies.length > 0
+                ? [
+                    _jsx(MultiSubscriptionsMenuItems, { selectedTenant: tenant, tenants: tenantsWithCompanies, selectedCompanyCode: companyCode, onCompanySelected: onCompanySelected(closeMenu) }, "multi-subscriptions-menu-items"),
+                ]
+                : []),
+        ] }));
+};

package/dist/components/PageWithMenuLayout/AppSelect/styles.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    isMenuExpanded: boolean;
+};
+export declare const SelectorAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "alt" | "imgProps" | "sizes" | "src" | "srcSet" | "sx" | "variant" | "slots" | "slotProps"> & {
+    theme?: import("@emotion/react").Theme;
+} & Props, {}, {}>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/PageWithMenuLayout/AppSelect/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/AppSelect/styles.ts"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG;IACX,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AACF,eAAO,MAAM,cAAc;;;;kBAuB1B,CAAC"}

package/dist/components/PageWithMenuLayout/AppSelect/styles.js

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import Avatar from '@mui/material/Avatar';
+import { shouldNotForwardPropsWithKeys } from '../../../utils/shouldNotForwardPropsWithKeys';
+export const SelectorAvatar = styled(Avatar, shouldNotForwardPropsWithKeys(['isMenuExpanded'])) `
+  width: 1.75rem;
+  height: 1.75rem;
+
+  color: ${({ theme }) => theme.my.colors.text.main};
+
+  background-color: ${({ theme }) => theme.my.colors.background.light};
+  border-radius: ${({ theme }) => theme.my.radius.sm};
+
+  && {
+    font: ${({ theme }) => theme.my.font.body2};
+  }
+
+  transition:
+    width 0.3s,
+    height 0.3s;
+
+  ${({ isMenuExpanded }) => isMenuExpanded &&
+    css `
+      width: 2rem;
+      height: 2rem;
+    `}
+`;

package/dist/components/PageWithMenuLayout/LogoHeaderImage.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const LogoHeaderImage: (props: React.SVGProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default LogoHeaderImage;
+//# sourceMappingURL=LogoHeaderImage.d.ts.map

package/dist/components/PageWithMenuLayout/LogoHeaderImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoHeaderImage.d.ts","sourceRoot":"","sources":["../../../src/components/PageWithMenuLayout/LogoHeaderImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,qDAuC5D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/PageWithMenuLayout/LogoHeaderImage.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const LogoHeaderImage = (props) => (_jsx("svg", { viewBox: "0 0 56.0617 56.0627", xmlns: "http://www.w3.org/2000/svg", fill: "#fff", ...props, children: _jsx("g", { transform: "matrix(1, 0, 0, 1, -3.2658579349517822, -5.714171886444092)", children: _jsx("g", { transform: "matrix(1, 0, 0, 1, 65.689034, -123.853729)", children: _jsxs("g", { transform: "matrix(0.35277777,0,0,-0.35277777,-228.38369,383.37697)", children: [_jsx("path", { transform: "translate(496.3657,612.2275)", d: "m 0,0 v -1.998 c -0.271,0.472 -0.53,0.948 -0.779,1.431 z" }), _jsx("path", { transform: "translate(555.2109,567.0908)", d: "m 0,0 c -1.76,-0.12 -3.53,-0.189 -5.32,-0.189 -3.51,0 -6.96,0.25 -10.34,0.729 V 68.681 L 0,80.07 Z M 0,87.94 -15.66,76.541 -22.02,71.92 V -4.779 c 2.09,-0.45 4.21,-0.821 6.36,-1.091 3.38,-0.449 6.84,-0.68 10.34,-0.68 1.79,0 3.56,0.061 5.32,0.18 2.15,0.141 4.27,0.37 6.36,0.681 v 98.25 z" }), _jsx("path", { transform: "translate(612.5273,688.8418)", d: "m 0,0 c -1.309,1.68 -2.687,3.307 -4.124,4.871 -14.537,15.819 -35.386,25.746 -58.509,25.746 -43.814,0 -79.455,-35.641 -79.455,-79.455 0,-14.214 3.752,-27.569 10.318,-39.129 1.05,-1.854 2.173,-3.656 3.371,-5.411 3.514,-5.178 7.627,-9.921 12.237,-14.135 2.025,-1.849 4.15,-3.598 6.36,-5.23 4.834,-3.583 10.086,-6.625 15.672,-9.047 2.072,-0.896 4.197,-1.712 6.359,-2.433 v 68.257 l -6.359,-4.627 -15.672,-11.394 -6.36,-4.627 v -1.998 c -0.27,0.471 -0.53,0.948 -0.779,1.43 -4.446,8.48 -6.958,18.126 -6.958,28.344 0,33.781 27.484,61.266 61.266,61.266 7.043,0 13.811,-1.193 20.112,-3.397 4.012,-1.389 7.833,-3.196 11.417,-5.353 3.21,-1.936 6.225,-4.159 9.018,-6.631 l 0.635,0.463 4.61,3.354 c -3.807,3.513 -8.012,6.603 -12.552,9.174 -9.82,5.57 -21.168,8.75 -33.24,8.75 -37.29,0 -67.626,-30.342 -67.626,-67.626 0,-11.617 2.946,-22.561 8.124,-32.122 1.018,-1.876 2.12,-3.694 3.302,-5.459 0.848,-1.262 1.739,-2.496 2.671,-3.699 1.951,-2.528 4.076,-4.913 6.36,-7.139 v 17.404 l 15.672,11.4 V -114.8 c -5.666,2.719 -10.929,6.143 -15.672,10.16 -2.242,1.898 -4.362,3.922 -6.36,6.069 -2.591,2.787 -4.965,5.776 -7.096,8.935 -1.187,1.759 -2.3,3.572 -3.334,5.438 -5.819,10.482 -9.137,22.54 -9.137,35.36 0,40.305 32.791,73.095 73.096,73.095 16.18,0 31.147,-5.284 43.273,-14.219 1.807,-1.33 3.556,-2.746 5.231,-4.229 0.609,-0.543 1.2,-1.106 1.791,-1.668 L -9.89,5.923 V 1.707 c 0.194,-0.202 0.397,-0.395 0.589,-0.6 1.452,-1.552 2.841,-3.169 4.16,-4.843 9.773,-12.429 15.608,-28.095 15.608,-45.102 0,-21.714 -9.513,-41.249 -24.596,-54.652 -2.025,-1.796 -4.145,-3.482 -6.36,-5.051 -3.587,-2.535 -7.412,-4.757 -11.432,-6.627 v -6.955 c 3.986,1.677 7.807,3.668 11.432,5.945 2.194,1.378 4.314,2.863 6.36,4.442 18.814,14.543 30.956,37.332 30.956,62.898 C 16.827,-30.442 10.542,-13.483 0,0" }), _jsx("path", { transform: "translate(598.3979,592.9258)", d: "m 0,0 c 11.829,12.184 19.122,28.794 19.122,47.078 0,15.799 -5.449,30.352 -14.569,41.879 -0.102,0.128 -0.211,0.25 -0.313,0.377 V 78.215 C 9.653,69.085 12.762,58.437 12.762,47.078 12.762,35.719 9.653,25.067 4.24,15.936 V 8.245 L 3.359,7.101 C 1.314,4.445 -0.974,1.911 -3.441,-0.431 L -6.36,-3.201 V -5.777 C -4.118,-3.986 -1.993,-2.057 0,0" }), _jsx("path", { transform: "translate(602.6377,690.5483)", d: "M 0,0 V 4.216 L -2.448,2.435 C -1.613,1.642 -0.797,0.831 0,0" }), _jsx("path", { transform: "translate(576.3667,571.8584)", d: "m 0,0 v -6.783 c 1.433,0.508 2.846,1.056 4.24,1.643 V 1.815 C 2.849,1.168 1.436,0.562 0,0" }), _jsx("path", { transform: "translate(597.8096,678.1411)", d: "M 0,0 C 0.202,-0.249 0.397,-0.498 0.588,-0.752 V 0.43 Z" }), _jsx("path", { transform: "translate(601.7573,600.0264)", d: "m 0,0 0.88,1.145 v 7.69 C -0.407,6.663 -1.822,4.576 -3.359,2.587 -5.294,0.075 -7.424,-2.278 -9.719,-4.456 v -5.846 L -6.8,-7.531 C -4.333,-5.189 -2.045,-2.655 0,0" }), _jsx("path", { transform: "translate(598.4009,678.5713)", d: "m 0,0 -0.59,-0.43 c 0.2,-0.25 0.4,-0.5 0.59,-0.75 v -74.78 c -1.94,-2.51 -4.07,-4.86 -6.36,-7.04 v 78.37 l -15.67,-11.4 v -97.47 c -2.09,-0.73 -4.21,-1.38 -6.36,-1.95 v 102.67 l 6.36,4.62 15.67,11.4 1.53,1.11 L 0,7.86 Z" })] }) }) }) }));
+export default LogoHeaderImage;

package/dist/components/PageWithMenuLayout/LogoHeaderText.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const LogoHeaderText: (props: React.SVGProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default LogoHeaderText;
+//# sourceMappingURL=LogoHeaderText.d.ts.map

package/dist/components/PageWithMenuLayout/LogoHeaderText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoHeaderText.d.ts","sourceRoot":"","sources":["../../../src/components/PageWithMenuLayout/LogoHeaderText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,cAAc,GAAI,OAAO,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,qDA2C3D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/PageWithMenuLayout/LogoHeaderText.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const LogoHeaderText = (props) => (_jsxs("svg", { viewBox: "0 0 277.5198 28.2999", xmlns: "http://www.w3.org/2000/svg", fill: "#fff", ...props, children: [_jsx("path", { transform: "matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 21.501811905092836, 16.848698628076818)", d: "m 0,0 c -1.02,2.42 -2.35,4.47 -4.01,6.119 -1.65,1.651 -3.53,3.01 -5.64,4.061 -2.11,1.06 -4.24,1.9 -6.39,2.54 -2.15,0.63 -4.22,1.119 -6.23,1.469 -2,0.361 -3.74,0.71 -5.22,1.061 -1.97,0.49 -4.01,0.979 -6.12,1.479 -2.12,0.491 -4.05,1.091 -5.81,1.791 -1.76,0.7 -3.2,1.58 -4.33,2.64 -1.12,1.06 -1.69,2.36 -1.69,3.91 0,1.539 0.48,2.86 1.43,3.95 0.95,1.089 2.14,1.99 3.59,2.7 1.44,0.699 2.97,1.21 4.59,1.53 1.62,0.31 3.06,0.47 4.33,0.47 3.73,0 7.28,-0.67 10.66,-2 3.38,-1.341 6.89,-3.281 10.55,-5.81 l 8.24,11.61 c -2.4,1.689 -4.63,3.149 -6.71,4.379 -2.07,1.23 -4.2,2.25 -6.38,3.06 -2.18,0.811 -4.54,1.431 -7.07,1.851 -2.54,0.419 -5.42,0.629 -8.66,0.629 -3.24,0 -6.6,-0.35 -10.08,-1.049 -3.48,-0.71 -6.65,-1.92 -9.5,-3.64 -2.85,-1.73 -5.19,-4.09 -7.02,-7.081 -1.83,-2.989 -2.74,-6.739 -2.74,-11.239 0,-3.091 0.51,-5.79 1.53,-8.071 1.02,-2.289 2.37,-4.259 4.06,-5.909 1.69,-1.66 3.59,-3.031 5.7,-4.121 2.11,-1.09 4.26,-1.97 6.44,-2.64 2.18,-0.669 4.29,-1.2 6.33,-1.58 2.04,-0.389 3.84,-0.719 5.39,-1 2.32,-0.429 4.55,-0.889 6.7,-1.38 2.14,-0.49 4.01,-1.089 5.59,-1.79 1.59,-0.71 2.85,-1.599 3.8,-2.689 0.95,-1.091 1.43,-2.41 1.43,-3.96 0,-1.2 -0.32,-2.41 -0.95,-3.641 -0.64,-1.229 -1.59,-2.32 -2.85,-3.269 -1.27,-0.95 -2.82,-1.731 -4.65,-2.33 -1.83,-0.601 -3.94,-0.891 -6.33,-0.891 -4.5,0 -8.81,0.96 -12.93,2.901 -4.12,1.929 -8.11,4.24 -11.98,6.91 l -8.02,-11.821 c 2.39,-1.689 4.71,-3.24 6.96,-4.639 2.26,-1.41 4.65,-2.63 7.18,-3.641 2.54,-1.029 5.33,-1.84 8.39,-2.43 3.06,-0.599 6.6,-0.899 10.61,-0.899 4.36,0 8.34,0.489 11.93,1.48 3.59,0.98 6.68,2.44 9.29,4.379 2.6,1.93 4.61,4.38 6.01,7.33 1.41,2.96 2.11,6.441 2.11,10.451 C 1.53,-5.37 1.02,-2.431 0,0" }), _jsx("path", { transform: "matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 54.25382881612312, 0.5575740958811508)", d: "M 0,0 -38,-44.55 -75.9,0 h -0.95 v -77.16 h 14.78 v 39.05 L -38,-67.13 -13.83,-38.11 V -77.16 H 0.95 V 0 Z" }), _jsx("path", { transform: "matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 68.36493998021616, 18.955030016193632)", d: "M 0,0 11.08,23.33 22.06,0 Z m 11.82,52.15 h -1.47 l -39.48,-77.16 h 16.04 l 5.91,12.14 h 36.42 l 6.02,-12.14 H 51.3 Z" }), _jsx("path", { transform: "matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 102.79950923521027, 14.206504166930245)", d: "m 0,0 c -1.44,-0.53 -2.82,-0.79 -4.16,-0.79 h -20.3 V 25.7 h 20.3 c 2.6,0 4.67,-0.49 6.21,-1.47 1.54,-0.99 2.74,-2.19 3.58,-3.59 0.84,-1.41 1.4,-2.89 1.68,-4.44 0.28,-1.54 0.42,-2.88 0.42,-4.01 0,-2.18 -0.37,-4.08 -1.1,-5.7 C 5.89,4.87 4.96,3.52 3.84,2.43 2.72,1.34 1.44,0.53 0,0 m 6.44,-12.51 c 4.86,1.9 8.75,5.03 11.68,9.4 2.93,4.36 4.39,9.46 4.39,15.3 0,3.87 -0.65,7.44 -1.96,10.72 -1.3,3.27 -3.12,6.08 -5.44,8.44 -2.33,2.36 -5.13,4.19 -8.41,5.49 -3.28,1.3 -6.89,1.95 -10.84,1.95 h -35.1 v -77.26 h 14.78 v 24.59 h 14.62 c 2.95,-4.22 5.9,-8.37 8.84,-12.451 2.95,-4.089 5.96,-8.129 9.05,-12.139 h 17.63 c -6.34,8.72 -12.75,17.38 -19.24,25.96" }), _jsx("path", { transform: "matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 113.71805040033725, 0.5222618670159136)", d: "m 0,0 v -13.09 h 22.17 v -64.17 h 14.78 v 64.17 H 59.01 V 0 Z" }), _jsx("path", { transform: "matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 154.45664918610782, 20.796476624127536)", d: "M 0,0 C -0.5,-1.23 -1.17,-2.36 -2.01,-3.38 -2.85,-4.4 -3.84,-5.21 -4.97,-5.81 -6.09,-6.41 -7.29,-6.7 -8.55,-6.7 h -20.899 v 19.63 h 19.309 c 3.38,0 6.04,-0.88 7.97,-2.64 C -0.229,8.53 0.73,6.35 0.73,3.75 0.73,2.48 0.49,1.23 0,0 m -29.449,44.38 h 19.21 c 1.05,0 2.059,-0.25 3.01,-0.74 0.95,-0.5 1.769,-1.13 2.479,-1.91 0.7,-0.78 1.261,-1.7 1.681,-2.76 0.429,-1.06 0.639,-2.16 0.639,-3.29 0,-1.13 -0.2,-2.28 -0.58,-3.45 -0.389,-1.17 -0.95,-2.21 -1.689,-3.13 -0.74,-0.92 -1.66,-1.67 -2.75,-2.23 C -8.54,26.3 -9.819,26.02 -11.3,26.02 H -29.449 Z M 14.091,9.69 c -0.95,2.1 -2.171,3.96 -3.651,5.57 -1.469,1.62 -3.139,2.9 -5.009,3.85 -1.861,0.94 -3.75,1.49 -5.651,1.63 1.83,0.07 3.521,0.62 5.071,1.64 1.549,1.02 2.87,2.28 3.96,3.76 1.089,1.48 1.95,3.1 2.589,4.87 0.63,1.76 0.941,3.42 0.941,4.97 0,4.38 -0.591,7.96 -1.79,10.75 -1.2,2.78 -2.811,4.97 -4.851,6.56 -2.05,1.59 -4.439,2.68 -7.179,3.28 -2.75,0.6 -5.67,0.9 -8.76,0.9 h -33.99 V -19.79 H -8.55 c 3.3,0 6.42,0.38 9.34,1.16 2.92,0.77 5.471,2.05 7.65,3.84 2.18,1.79 3.901,4.14 5.17,7.05 1.27,2.91 1.901,6.48 1.901,10.69 0,2.38 -0.471,4.63 -1.42,6.74" }), _jsx("path", { transform: "matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 186.44298285655168, 17.68863444259115)", d: "m 0,0 c -1.34,-3.159 -3.14,-5.96 -5.43,-8.39 -2.28,-2.429 -4.95,-4.36 -8,-5.799 -3.059,-1.451 -6.34,-2.17 -9.849,-2.17 -3.511,0 -6.8,0.719 -9.851,2.17 -3.05,1.439 -5.72,3.37 -8.01,5.799 -2.28,2.43 -4.089,5.231 -5.42,8.39 -1.33,3.171 -2,6.511 -2,10.03 0,3.45 0.67,6.77 2,9.97 1.331,3.21 3.14,6 5.42,8.4 2.29,2.391 4.96,4.31 8.01,5.75 3.051,1.44 6.34,2.161 9.851,2.161 3.509,0 6.79,-0.721 9.849,-2.161 3.05,-1.44 5.72,-3.359 8,-5.75 C -3.14,26 -1.34,23.21 0,20 1.33,16.8 2,13.48 2,10.03 2,6.511 1.33,3.171 0,0 M 13.61,25.601 C 11.5,30.49 8.631,34.75 5.011,38.371 1.381,41.99 -2.859,44.86 -7.71,46.97 c -4.859,2.111 -10.069,3.171 -15.619,3.171 -5.49,0 -10.66,-1.06 -15.521,-3.171 -4.849,-2.11 -9.089,-4.98 -12.719,-8.599 -3.62,-3.621 -6.491,-7.881 -8.601,-12.77 -2.109,-4.891 -3.17,-10.08 -3.17,-15.571 0,-5.559 1.061,-10.769 3.17,-15.62 2.11,-4.859 4.981,-9.099 8.601,-12.72 3.63,-3.629 7.87,-6.49 12.719,-8.599 4.861,-2.111 10.031,-3.17 15.521,-3.17 5.55,0 10.76,1.059 15.619,3.17 4.851,2.109 9.091,4.97 12.721,8.599 3.62,3.621 6.489,7.861 8.599,12.72 2.111,4.851 3.17,10.061 3.17,15.62 0,5.491 -1.059,10.68 -3.17,15.571" }), _jsx("path", { transform: "matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 218.68700967032424, 17.68863444259115)", d: "m 0,0 c -1.33,-3.159 -3.14,-5.96 -5.42,-8.39 -2.28,-2.429 -4.95,-4.36 -8.01,-5.799 -3.049,-1.451 -6.33,-2.17 -9.84,-2.17 -3.51,0 -6.8,0.719 -9.85,2.17 -3.06,1.439 -5.73,3.37 -8.01,5.799 -2.28,2.43 -4.09,5.231 -5.42,8.39 -1.34,3.171 -2,6.511 -2,10.03 0,3.45 0.66,6.77 2,9.97 1.33,3.21 3.14,6 5.42,8.4 2.28,2.391 4.95,4.31 8.01,5.75 3.05,1.44 6.34,2.161 9.85,2.161 3.51,0 6.791,-0.721 9.84,-2.161 3.06,-1.44 5.73,-3.359 8.01,-5.75 C -3.14,26 -1.33,23.21 0,20 1.34,16.8 2.01,13.48 2.01,10.03 2.01,6.511 1.34,3.171 0,0 M 13.62,25.601 C 11.51,30.49 8.64,34.75 5.01,38.371 1.39,41.99 -2.85,44.86 -7.7,46.97 c -4.86,2.111 -10.07,3.171 -15.63,3.171 -5.48,0 -10.66,-1.06 -15.51,-3.171 -4.86,-2.11 -9.1,-4.98 -12.72,-8.599 -3.63,-3.621 -6.49,-7.881 -8.6,-12.77 -2.11,-4.891 -3.17,-10.08 -3.17,-15.571 0,-5.559 1.06,-10.769 3.17,-15.62 2.11,-4.859 4.97,-9.099 8.6,-12.72 3.62,-3.629 7.86,-6.49 12.72,-8.599 4.85,-2.111 10.03,-3.17 15.51,-3.17 5.56,0 10.77,1.059 15.63,3.17 4.85,2.109 9.09,4.97 12.71,8.599 3.63,3.621 6.5,7.861 8.61,12.72 2.11,4.851 3.16,10.061 3.16,15.62 0,5.491 -1.05,10.68 -3.16,15.571" }), _jsx("path", { d: "M 0,0 31.77,39.9 H 13.62 L -17.101,0.74 V 40 H -31.88 v -77.26 h 14.779 V -2.109 L 15.3,-37.26 h 19.53 z", transform: "matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 241.21554419908352, 14.633502222190145)" }), _jsx("path", { transform: "matrix(0.35277777910232544, 0, 0, -0.35277777910232544, 276.9801141033313, 16.848698628076818)", d: "m 0,0 c -1.021,2.42 -2.36,4.47 -4.01,6.119 -1.65,1.651 -3.54,3.01 -5.65,4.061 -2.111,1.06 -4.24,1.9 -6.38,2.54 -2.15,0.63 -4.22,1.119 -6.231,1.469 -2.009,0.361 -3.75,0.71 -5.219,1.061 -1.98,0.49 -4.02,0.979 -6.13,1.479 -2.11,0.491 -4.04,1.091 -5.8,1.791 -1.761,0.7 -3.2,1.58 -4.33,2.64 -1.13,1.06 -1.69,2.36 -1.69,3.91 0,1.539 0.48,2.86 1.43,3.95 0.949,1.089 2.14,1.99 3.579,2.7 1.451,0.699 2.981,1.21 4.601,1.53 1.61,0.31 3.059,0.47 4.32,0.47 3.73,0 7.29,-0.67 10.659,-2 3.381,-1.341 6.901,-3.281 10.561,-5.81 l 8.229,11.61 c -2.389,1.689 -4.62,3.149 -6.699,4.379 -2.08,1.23 -4.2,2.25 -6.39,3.06 -2.18,0.811 -4.531,1.431 -7.07,1.851 -2.53,0.419 -5.421,0.629 -8.65,0.629 -3.24,0 -6.6,-0.35 -10.08,-1.049 -3.49,-0.71 -6.651,-1.92 -9.5,-3.64 -2.85,-1.73 -5.191,-4.09 -7.02,-7.081 -1.83,-2.989 -2.75,-6.739 -2.75,-11.239 0,-3.091 0.51,-5.79 1.53,-8.071 1.02,-2.289 2.379,-4.259 4.07,-5.909 1.689,-1.66 3.59,-3.031 5.7,-4.121 2.109,-1.09 4.26,-1.97 6.44,-2.64 2.18,-0.669 4.29,-1.2 6.33,-1.58 2.04,-0.389 3.83,-0.719 5.379,-1 2.331,-0.429 4.561,-0.889 6.71,-1.38 2.141,-0.49 4.011,-1.089 5.591,-1.79 1.579,-0.71 2.85,-1.599 3.8,-2.689 0.95,-1.091 1.42,-2.41 1.42,-3.96 0,-1.2 -0.311,-2.41 -0.95,-3.641 -0.63,-1.229 -1.58,-2.32 -2.85,-3.269 -1.261,-0.95 -2.81,-1.731 -4.64,-2.33 -1.831,-0.601 -3.94,-0.891 -6.331,-0.891 -4.509,0 -8.819,0.96 -12.929,2.901 -4.12,1.929 -8.111,4.24 -11.981,6.91 l -8.019,-11.821 c 2.389,-1.689 4.71,-3.24 6.96,-4.639 2.25,-1.41 4.65,-2.63 7.179,-3.641 2.531,-1.029 5.331,-1.84 8.391,-2.43 3.06,-0.599 6.6,-0.899 10.609,-0.899 4.361,0 8.341,0.489 11.931,1.48 3.58,0.98 6.68,2.44 9.279,4.379 2.611,1.93 4.611,4.38 6.021,7.33 1.41,2.96 2.11,6.441 2.11,10.451 C 1.53,-5.37 1.02,-2.431 0,0" })] }));
+export default LogoHeaderText;

package/dist/components/PageWithMenuLayout/MenuItemWithChildren/MenuItemWithChildren.d.ts

@@ -0,0 +1,13 @@
+import { MenuItem } from '../types';
+type Props = {
+    menuItem: MenuItem;
+    elevation?: number;
+    isMenuOpen: boolean;
+    isExpanded?: boolean;
+    onExpand?: (menuItem: MenuItem) => void;
+    onCollapse?: () => void;
+    openMenu: () => void;
+};
+export declare const MenuItemWithChildren: React.FC<Props>;
+export {};
+//# sourceMappingURL=MenuItemWithChildren.d.ts.map

package/dist/components/PageWithMenuLayout/MenuItemWithChildren/MenuItemWithChildren.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemWithChildren.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/MenuItemWithChildren/MenuItemWithChildren.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAUpC,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsHhD,CAAC"}

package/dist/components/PageWithMenuLayout/MenuItemWithChildren/MenuItemWithChildren.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEventCallback } from '@mui/material';
+import Collapse from '@mui/material/Collapse';
+import Fade from '@mui/material/Fade';
+import { NavLink, useMatches } from 'react-router';
+import * as Styled from './styles';
+import { assertNever } from '../../../utils/assertNever';
+const MenuItemLink = Styled.MenuItem.withComponent(NavLink);
+const isAbsoluteUrl = (url) => /^(?:[a-z+]+:)?\/\//i.test(url);
+const hasActiveChildren = (menuItem, pathnames) => ('href' in menuItem && pathnames.includes(decodeURIComponent(menuItem.href))) ||
+    ('children' in menuItem && menuItem.children.some((child) => hasActiveChildren(child, pathnames)));
+export const MenuItemWithChildren = ({ menuItem, elevation = 0, isMenuOpen, isExpanded = true, onCollapse, onExpand, openMenu, }) => {
+    const [expandedChild, setExpandedChild] = useState();
+    const onCollapseChild = useCallback(() => setExpandedChild(undefined), []);
+    const matches = useMatches();
+    const containsActiveChildren = useMemo(() => hasActiveChildren(menuItem, matches.map(({ pathname }) => pathname)), [menuItem, matches]);
+    useEffect(() => {
+        if (containsActiveChildren && 'children' in menuItem)
+            onExpand?.(menuItem);
+    }, [containsActiveChildren, onExpand, menuItem]);
+    const isTitle = 'children' in menuItem && !('href' in menuItem) && !('onClick' in menuItem) && elevation === 0;
+    const onMenuItemClick = useEventCallback(() => {
+        openMenu();
+        if (isTitle || 'href' in menuItem)
+            return;
+        if ('children' in menuItem) {
+            if (isExpanded) {
+                onCollapse?.();
+            }
+            else {
+                onExpand?.(menuItem);
+            }
+        }
+        else if ('onClick' in menuItem) {
+            menuItem.onClick();
+        }
+        else if ('disabled' in menuItem) {
+            // Do nothing
+        }
+        else {
+            assertNever(menuItem);
+        }
+    });
+    const isHighlighted = containsActiveChildren && (!isExpanded || !isMenuOpen);
+    const menuItemContent = (_jsxs(_Fragment, { children: [!isTitle && elevation > 0 && (_jsx(Styled.ActiveMenuItemIndicator, { isMenuOpen: isMenuOpen, visible: containsActiveChildren && 'href' in menuItem, children: "\u00A0" })), menuItem.icon && _jsx(Styled.ListItemIcon, { children: menuItem.icon }), _jsx(Fade, { in: isMenuOpen || (isTitle && isExpanded), children: _jsx(Styled.ListItem, { children: _jsx(Styled.ListItemText, { elevation: elevation, title: menuItem.title, isHighlighted: isHighlighted, isTitle: isTitle, children: menuItem.title }) }) }), 'children' in menuItem && elevation !== 0 && (_jsx(Styled.ArrowDownIcon, { isVisible: isMenuOpen, isExpanded: isExpanded, fontSize: "small" }))] }));
+    const MenuItemComponent = 'href' in menuItem ? MenuItemLink : Styled.MenuItem;
+    return (_jsxs("section", { children: [!menuItem.skipHeader && (_jsx(MenuItemComponent, { isMenuOpen: isMenuOpen, disabled: isTitle, onClick: onMenuItemClick, isHighlighted: isHighlighted, elevation: elevation, isTitle: isTitle, to: 'href' in menuItem ? menuItem.href : {}, target: 'href' in menuItem && isAbsoluteUrl(menuItem.href) ? '_blank' : undefined, children: menuItemContent })), 'children' in menuItem && (_jsx(Collapse, { in: isExpanded && (isMenuOpen || elevation !== 0), children: _jsx(Styled.MenuList, { elevation: elevation, children: menuItem.children.map((secondLevelItem) => (_jsx(MenuItemWithChildren, { onCollapse: onCollapseChild, onExpand: setExpandedChild, menuItem: secondLevelItem, elevation: elevation + 1, isMenuOpen: isMenuOpen, isExpanded: expandedChild?.title === secondLevelItem.title, openMenu: openMenu }, secondLevelItem.title))) }) }))] }));
+};

package/dist/components/PageWithMenuLayout/MenuItemWithChildren/styles.d.ts

@@ -0,0 +1,53 @@
+type MenuItemProps = {
+    isHighlighted: boolean;
+    elevation?: number;
+    isMenuOpen: boolean;
+    isTitle: boolean;
+};
+export declare const MenuItem: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "style" | "className" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & {
+    theme?: import("@emotion/react").Theme;
+} & MenuItemProps, {}, {}>;
+export declare const ListItemIcon: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemIconProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+type ListItemTextProps = {
+    isHighlighted: boolean;
+    isTitle: boolean;
+    elevation: number;
+};
+export declare const ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>, import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & {
+    theme?: import("@emotion/react").Theme;
+} & ListItemTextProps, {}, {}>;
+export declare const ListItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+type ArrowDownIconProps = {
+    isExpanded: boolean;
+    isVisible: boolean;
+};
+export declare const ArrowDownIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "style" | "className" | "classes" | "color" | "children" | "sx" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & {
+    theme?: import("@emotion/react").Theme;
+} & ArrowDownIconProps, {}, {}>;
+type MenuListProps = {
+    elevation: number;
+};
+export declare const MenuList: import("@emotion/styled").StyledComponent<import("@mui/material").MenuListOwnProps & import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLUListElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "autoFocus" | "children" | "sx" | "variant" | "dense" | "disablePadding" | "subheader" | "autoFocusItem" | "disabledItemsFocusable" | "disableListWrap"> & {
+    theme?: import("@emotion/react").Theme;
+} & MenuListProps, {}, {}>;
+type ActiveMenuItemIndicatorProps = {
+    visible: boolean;
+    isMenuOpen: boolean;
+};
+export declare const ActiveMenuItemIndicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & ActiveMenuItemIndicatorProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/PageWithMenuLayout/MenuItemWithChildren/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/MenuItemWithChildren/styles.ts"],"names":[],"mappings":"AAaA,KAAK,aAAa,GAAG;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AACF,eAAO,MAAM,QAAQ;;;;0BAuCpB,CAAC;AAEF,eAAO,MAAM,YAAY;;UAUxB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,eAAO,MAAM,YAAY;;8BA0BxB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;mGAMpB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,aAAa;;;;+BAgBzB,CAAC;AAEF,KAAK,aAAa,GAAG;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,eAAO,MAAM,QAAQ;;;;0BAapB,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,uBAAuB;;;wIAqBnC,CAAC"}

package/dist/components/PageWithMenuLayout/MenuItemWithChildren/styles.js

@@ -0,0 +1,127 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDownRounded';
+import MuiListItemIcon from '@mui/material/ListItemIcon';
+import MuiListItemText, { listItemTextClasses } from '@mui/material/ListItemText';
+import MuiMenuItem, { menuItemClasses } from '@mui/material/MenuItem';
+import MuiMenuList from '@mui/material/MenuList';
+import { rem } from 'polished';
+import { shouldNotForwardPropsWithKeys } from '../../../utils/shouldNotForwardPropsWithKeys';
+const iconMargin = rem(-2);
+export const MenuItem = styled(MuiMenuItem, shouldNotForwardPropsWithKeys(['isHighlighted', 'elevation', 'isMenuOpen', 'isTitle']))(({ theme, elevation = 0, isHighlighted, isMenuOpen, isTitle, disabled }) => css `
+    display: flex;
+
+    align-items: center;
+
+    padding: ${theme.my.spacing.xxs};
+    padding-left: 0;
+    margin-top: ${elevation === 0 && isMenuOpen && isTitle && theme.my.spacing.sm};
+    margin-left: ${!isMenuOpen ? `calc(${theme.my.spacing.xxs} - ${iconMargin})` : 0};
+
+    font: ${isHighlighted ? theme.my.font.nav2 : theme.my.font.nav1};
+
+    color: ${theme.my.colors.text.white};
+
+    transition:
+      font-weight 0.3s,
+      margin 0.3s;
+
+    &:hover {
+      background-color: ${theme.my.colors.background.hover};
+    }
+
+    ${disabled &&
+    css `
+      &.${menuItemClasses.disabled} {
+        text-transform: uppercase;
+
+        pointer-events: initial;
+
+        background-color: initial;
+
+        opacity: 1;
+      }
+    `};
+  `);
+export const ListItemIcon = styled(MuiListItemIcon) `
+  /* Icons from MUI have small paddings, so we need to artificially move them 2px ⬅︎ */
+  margin-left: ${iconMargin};
+
+  /* Increasing specificity */
+  &&& {
+    min-width: 1.75rem;
+  }
+
+  color: ${({ theme }) => theme.my.colors.text.white};
+`;
+export const ListItemText = styled(MuiListItemText, shouldNotForwardPropsWithKeys(['isHighlighted', 'elevation', 'isTitle']))(({ theme, isHighlighted, elevation, isTitle }) => css `
+    margin-top: 0;
+    margin-bottom: 0;
+
+    white-space: nowrap;
+
+    .${listItemTextClasses.primary} {
+      padding-left: calc(${Math.max(elevation - 1, 0)} * ${theme.my.spacing.xxs});
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      font: ${isHighlighted ? theme.my.font.nav2 : theme.my.font.nav1};
+
+      transition: font 0.3s;
+
+      ${isTitle &&
+    css `
+        font-weight: 800;
+      `};
+    }
+  `);
+export const ListItem = styled.section `
+  display: flex;
+
+  width: 100%;
+
+  overflow: hidden;
+`;
+export const ArrowDownIcon = styled(ArrowDropDownIcon, shouldNotForwardPropsWithKeys(['isExpanded', 'isVisible']))(({ isExpanded, isVisible, theme }) => css `
+    color: ${isExpanded ? theme.my.colors.primitives.common.white : theme.my.colors.primitives.darkNavy[300]};
+
+    opacity: ${isVisible ? 1 : 0};
+
+    transform: rotate(${isExpanded ? 180 : 0}deg);
+
+    transition:
+      transform 0.3s,
+      color 0.3s,
+      opacity 0.3s;
+  `);
+export const MenuList = styled(MuiMenuList, shouldNotForwardPropsWithKeys(['elevation'])) `
+  padding-top: 0;
+  padding-bottom: 0;
+
+  overflow: auto;
+
+  background-color: ${({ elevation, theme }) => [
+    theme.my.colors.primitives.darkNavy[900],
+    theme.my.colors.primitives.darkNavy[800],
+    theme.my.colors.primitives.darkNavy[700],
+][elevation]};
+  border-radius: ${({ elevation, theme }) => elevation === 1 && theme.my.radius.md};
+`;
+export const ActiveMenuItemIndicator = styled('div', shouldNotForwardPropsWithKeys(['visible', 'isMenuOpen']))(({ theme, visible, isMenuOpen }) => css `
+    display: inline-block;
+
+    width: ${isMenuOpen ? theme.my.spacing.xxxs : 0};
+    height: 1rem;
+
+    margin-right: ${theme.my.spacing.xxs};
+
+    background-color: transparent;
+    border-radius: ${theme.my.radius.sm};
+
+    transition: 0.3s;
+    ${visible &&
+    css `
+      background-color: ${theme.my.colors.secondary.main};
+    `};
+  `);

package/dist/components/PageWithMenuLayout/MenuSelect/index.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    isExpanded: boolean;
+    renderMenuItems: (params: {
+        closeMenu: () => void;
+    }) => React.ReactElement[];
+    startIcon?: React.ReactNode;
+    selectedOptionText?: string;
+    menuPosition?: 'top' | 'bottom';
+};
+export declare const MenuSelect: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PageWithMenuLayout/MenuSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/MenuSelect/index.tsx"],"names":[],"mappings":"AAOA,KAAK,KAAK,GAAG;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,CAAC,MAAM,EAAE;QAAE,SAAS,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,YAAY,EAAE,CAAC;IAC7E,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8DtC,CAAC"}

package/dist/components/PageWithMenuLayout/MenuSelect/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useState } from 'react';
+import { Fade } from '@mui/material';
+import useResizeObserver from 'use-resize-observer';
+import * as Styled from './styles';
+export const MenuSelect = ({ isExpanded, renderMenuItems, startIcon, selectedOptionText, menuPosition = 'bottom', }) => {
+    const openMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const closeMenu = () => {
+        setAnchorEl(undefined);
+    };
+    const [anchorEl, setAnchorEl] = useState();
+    const isMenuOpen = Boolean(anchorEl);
+    const menuItems = renderMenuItems({ closeMenu });
+    const { height: bodyHeight } = useResizeObserver({ ref: document.body });
+    return (_jsxs(_Fragment, { children: [_jsx(Styled.SelectorButton, { isMenuExpanded: isExpanded, variant: "outlined", "aria-haspopup": "true", disableElevation: true, onClick: openMenu, endIcon: _jsx(Styled.UnfoldMoreIcon, {}), fullWidth: true, startIcon: startIcon, disabled: !menuItems.length, children: _jsx(Fade, { in: isExpanded, children: _jsx(Styled.SelectedOptionText, { children: selectedOptionText }) }) }), _jsx(Styled.Menu, { anchorEl: anchorEl, open: isMenuOpen, onClose: closeMenu, sx: { top: menuPosition === 'top' ? -4 : 4 }, slotProps: {
+                    paper: {
+                        style: {
+                            maxHeight: anchorEl && bodyHeight ? bodyHeight - anchorEl?.getBoundingClientRect().bottom - 16 : undefined,
+                        },
+                    },
+                }, anchorOrigin: menuPosition === 'top' ? { horizontal: 'left', vertical: 'top' } : { horizontal: 'left', vertical: 'bottom' }, transformOrigin: menuPosition === 'top' ? { horizontal: 'left', vertical: 'bottom' } : { horizontal: 'left', vertical: 'top' }, children: menuItems })] }));
+};

package/dist/components/PageWithMenuLayout/MenuSelect/styles.d.ts

@@ -0,0 +1,22 @@
+type SelectorButtonProps = {
+    isMenuExpanded: boolean;
+};
+export declare const SelectorButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme;
+} & SelectorButtonProps, {}, {}>;
+export declare const SelectedOptionText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Menu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const UnfoldMoreIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "style" | "className" | "classes" | "color" | "children" | "sx" | "fontSize" | "shapeRendering" | "htmlColor" | "inheritViewBox" | "titleAccess" | "viewBox"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/PageWithMenuLayout/MenuSelect/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/PageWithMenuLayout/MenuSelect/styles.ts"],"names":[],"mappings":"AAQA,KAAK,mBAAmB,GAAG;IACzB,cAAc,EAAE,OAAO,CAAC;CACzB,CAAC;AACF,eAAO,MAAM,cAAc;;;;gCA6D1B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;2GAW9B,CAAC;AAEF,eAAO,MAAM,IAAI;;UAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;UAG1B,CAAC"}