@foxford/navigation-ui 1.0.0

package/header/molecules/list/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const Root: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}> & string;
+//# sourceMappingURL=styled.d.ts.map

package/header/molecules/list/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../src/header/molecules/list/styled.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;;WAIhB,CAAA"}

package/header/molecules/list/styled.js

@@ -0,0 +1,8 @@
+import { styled } from "styled-components";
+const Root = styled.div.withConfig({
+  displayName: "styled__Root",
+  componentId: "sc-14klri2-0"
+})(["& > :last-child{margin-bottom:0;}"]);
+export {
+  Root
+};

package/header/molecules/menu/index.d.ts

@@ -0,0 +1,17 @@
+import type { MenuList, MenuListItemData, MenuSegment } from './types';
+import type { EntryPanelProps } from '../entry-panel';
+export interface MenuProps {
+    entryPanel: EntryPanelProps;
+    isOnboardingButtonShown?: boolean;
+    loading?: boolean;
+    onClose: () => void;
+    onOnboardingClick?: () => void;
+    onSegmentItemClick?: (itemId: string) => void;
+    open: boolean;
+    origin?: string;
+    segments: MenuSegment[];
+    topOffset?: null | number;
+}
+export declare function Menu({ entryPanel, isOnboardingButtonShown, loading, onClose, onOnboardingClick, onSegmentItemClick, open, origin, segments, topOffset, }: MenuProps): import("preact").JSX.Element;
+export type { MenuList, MenuListItemData, MenuSegment };
+//# sourceMappingURL=index.d.ts.map

package/header/molecules/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/molecules/menu/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAErD,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,eAAe,CAAA;IAC3B,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,IAAI,EAAE,OAAO,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAC1B;AAKD,wBAAgB,IAAI,CAAC,EACnB,UAAU,EACV,uBAA+B,EAC/B,OAAe,EACf,OAAO,EACP,iBAAiB,EACjB,kBAAkB,EAClB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAgB,GACjB,EAAE,SAAS,gCA8HX;AAED,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAA"}

package/header/molecules/menu/index.js

@@ -0,0 +1,163 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { useState, useCallback, useEffect } from "react";
+import { Media, Spinner } from "@foxford/ui";
+import { Root, Inner, Top, Logo, Sidebar } from "./panel-styled.js";
+import { SegmentContent } from "./segment-content.js";
+import { BodyScrollLock, SpinnerWrapper, Content, ContentControl, SegmentPane, Bottom } from "./styled.js";
+import { SELECTOR_IDS } from "../../../shared/constants.js";
+import { BackButton } from "../../atoms/back-button/index.js";
+import { CloseButton } from "../../atoms/close-button/index.js";
+import { Scrollbar } from "../../atoms/scrollbar/index.js";
+import { AdaptiveButton } from "../adaptive-button/index.js";
+import { EntryPanel } from "../entry-panel/index.js";
+import { SegmentList } from "../segment-list/index.js";
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+function Menu({
+  entryPanel,
+  isOnboardingButtonShown = false,
+  loading = false,
+  onClose,
+  onOnboardingClick,
+  onSegmentItemClick,
+  open,
+  origin,
+  segments,
+  topOffset = null
+}) {
+  const [contentOpen, setContentOpen] = useState(false);
+  const [selectedSegmentId, setSelectedSegmentId] = useState(void 0);
+  const [wasOpen, setWasOpen] = useState(open);
+  const [measuredTop, setMeasuredTop] = useState(null);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (!open) {
+      setContentOpen(false);
+      setSelectedSegmentId(void 0);
+    }
+  }
+  const handleSegmentSelect = useCallback((segmentId) => {
+    setSelectedSegmentId(segmentId);
+    setContentOpen(true);
+  }, []);
+  const handleBack = useCallback(() => {
+    setSelectedSegmentId(void 0);
+    setContentOpen(false);
+  }, []);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const headerTop = document.getElementById(SELECTOR_IDS.HEADER_TOP);
+    if (headerTop === null) {
+      return;
+    }
+    const observer = new ResizeObserver(() => setMeasuredTop(headerTop.getBoundingClientRect().bottom));
+    observer.observe(headerTop);
+    return () => observer.disconnect();
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.key === "Escape" || event.key === "Esc") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+  return jsx(Root, {
+    $isMenuOpen: open,
+    $isOnboardingButtonShown: isOnboardingButtonShown,
+    $top: topOffset != null ? topOffset : measuredTop,
+    children: jsxs(Inner, {
+      $isMenuOpen: open,
+      children: [jsx(Media, {
+        max: "S",
+        children: jsx(Fragment, {
+          children: open && jsxs(Fragment, {
+            children: [jsx(BodyScrollLock, {}), jsxs(Top, {
+              children: [jsx(Logo, {
+                origin
+              }), jsx(EntryPanel, __spreadValues({}, entryPanel))]
+            })]
+          })
+        })
+      }), loading ? jsx(SpinnerWrapper, {
+        $isMenuOpen: open,
+        children: jsx(Spinner, {
+          size: "l"
+        })
+      }) : jsxs(Fragment, {
+        children: [jsx(Sidebar, {
+          $isMenuOpen: open,
+          $showSeparator: contentOpen || selectedSegmentId !== void 0,
+          children: jsxs(Scrollbar, {
+            children: [jsx(SegmentList, {
+              onSelect: handleSegmentSelect,
+              segments,
+              selectedSegmentId
+            }), jsx(Media, {
+              min: "M",
+              children: jsx(AdaptiveButton, {
+                onOnboardingClick,
+                show: isOnboardingButtonShown
+              })
+            })]
+          })
+        }), jsxs(Content, {
+          $isOpen: contentOpen,
+          children: [jsx(Media, {
+            max: "M",
+            children: jsxs(ContentControl, {
+              children: [jsx(BackButton, {
+                onClick: handleBack
+              }), jsx(Media, {
+                max: "S",
+                children: jsx(EntryPanel, __spreadValues({}, entryPanel))
+              })]
+            })
+          }), segments.map((segment) => jsx(SegmentPane, {
+            $hidden: segment.id !== selectedSegmentId,
+            children: jsx(SegmentContent, {
+              onItemClick: onSegmentItemClick,
+              segment
+            })
+          }, segment.id))]
+        })]
+      }), jsx(Media, {
+        max: "S",
+        children: jsxs(Bottom, {
+          children: [jsx(Media, {
+            max: "XS",
+            children: jsx(AdaptiveButton, {
+              onOnboardingClick,
+              show: isOnboardingButtonShown
+            })
+          }), jsx(CloseButton, {
+            onClick: onClose
+          })]
+        })
+      })]
+    })
+  });
+}
+export {
+  Menu
+};

package/header/molecules/menu/panel-styled.d.ts

@@ -0,0 +1,24 @@
+import { HeaderLogo } from '../header-logo';
+export declare const Root: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}, {
+    $isMenuOpen: boolean;
+    $isOnboardingButtonShown: boolean;
+    $top: null | number;
+}>> & string;
+export declare const Inner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}, {
+    $isMenuOpen: boolean;
+}>> & string;
+export declare const Top: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}> & string;
+export declare const Logo: import("styled-components/dist/types").IStyledComponentBase<"web", import("../header-logo").HeaderLogoProps> & string & Omit<typeof HeaderLogo, keyof import("preact").Component<any, {}>>;
+export declare const Sidebar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}, {
+    $isMenuOpen: boolean;
+    $showSeparator: boolean;
+}>> & string;
+//# sourceMappingURL=panel-styled.d.ts.map

package/header/molecules/menu/panel-styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-styled.d.ts","sourceRoot":"","sources":["../../../../src/header/molecules/menu/panel-styled.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C,eAAO,MAAM,IAAI;;;iBAA6B,OAAO;8BAA4B,OAAO;UAAQ,IAAI,GAAG,MAAM;YAyC5G,CAAA;AAED,eAAO,MAAM,KAAK;;;iBAA6B,OAAO;YAmBrD,CAAA;AAED,eAAO,MAAM,GAAG;;WASf,CAAA;AAED,eAAO,MAAM,IAAI,4LAIhB,CAAA;AAED,eAAO,MAAM,OAAO;;;iBAA6B,OAAO;oBAAkB,OAAO;YAgChF,CAAA"}

package/header/molecules/menu/panel-styled.js

@@ -0,0 +1,105 @@
+import { styled, css } from "styled-components";
+import { screenMinM, screenMinL, screenMinS, screenMaxS } from "@foxford/ui";
+import { DURATION_MENU_ANIMATION } from "../../../shared/constants.js";
+import { BASE_ZINDEX } from "../../../shared/z-index.js";
+import { HeaderLogo } from "../header-logo/index.js";
+const Root = styled.div.withConfig({
+  displayName: "panel-styled__Root",
+  componentId: "sc-wzeafx-0"
+})(["box-sizing:border-box;pointer-events:", ";visibility:", ";position:absolute;top:0;left:0;width:100%;height:100vh;height:100dvh;padding:20px 20px 80px 20px;", " transition:height ", "ms ease-out ", "ms,visibility ", "ms ", "ms,box-shadow ", "ms ", "ms;overflow:hidden;z-index:", ";", " ", " ", ""], ({
+  $isMenuOpen
+}) => $isMenuOpen ? "auto" : "none", ({
+  $isMenuOpen
+}) => $isMenuOpen ? "visible" : "hidden", ({
+  theme
+}) => css`
+    background-color: ${theme.colors.white};
+  `, DURATION_MENU_ANIMATION, DURATION_MENU_ANIMATION, DURATION_MENU_ANIMATION, DURATION_MENU_ANIMATION, DURATION_MENU_ANIMATION, DURATION_MENU_ANIMATION, BASE_ZINDEX.NAVIGATION + 3, ({
+  $isMenuOpen
+}) => $isMenuOpen && css`
+      box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);
+      clip-path: inset(0 -16px -50px 0);
+    `, screenMinM()`
+    top: ${({
+  $top
+}) => $top !== null ? `${$top}px` : "100%"};
+    height: calc(100vh - ${({
+  $top
+}) => $top}px);
+    height: calc(100dvh - ${({
+  $top
+}) => $top}px);
+    max-height: ${({
+  $isOnboardingButtonShown
+}) => $isOnboardingButtonShown ? "746px" : "690px"};
+    padding: 35px 36px 20px 26px;
+  `, screenMinL()`
+    max-height: ${({
+  $isOnboardingButtonShown
+}) => $isOnboardingButtonShown ? "642px" : "694px"};
+  `);
+const Inner = styled.div.withConfig({
+  displayName: "panel-styled__Inner",
+  componentId: "sc-wzeafx-1"
+})(["position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-width:1208px;margin-right:auto;margin-left:auto;", " ", ""], screenMinS()`
+    opacity: ${({
+  $isMenuOpen
+}) => $isMenuOpen ? 1 : 0};
+    transition: opacity ${DURATION_MENU_ANIMATION}ms linear ${({
+  $isMenuOpen
+}) => $isMenuOpen ? `${DURATION_MENU_ANIMATION * 2}ms` : "0s"};
+  `, screenMinM()`
+    flex-direction: row;
+  `);
+const Top = styled.div.withConfig({
+  displayName: "panel-styled__Top",
+  componentId: "sc-wzeafx-2"
+})(["display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;", ""], screenMinS()`
+    margin-bottom: 40px;
+  `);
+const Logo = styled(HeaderLogo).withConfig({
+  displayName: "panel-styled__Logo",
+  componentId: "sc-wzeafx-3"
+})(["position:relative;left:50%;transform:translate(-50%,0);"]);
+const Sidebar = styled.div.withConfig({
+  displayName: "panel-styled__Sidebar",
+  componentId: "sc-wzeafx-4"
+})(["height:100%;", " ", " ", ""], screenMaxS()`
+    opacity: ${({
+  $isMenuOpen
+}) => $isMenuOpen ? 1 : 0};
+    transition: opacity ${DURATION_MENU_ANIMATION}ms linear ${({
+  $isMenuOpen
+}) => $isMenuOpen ? `${DURATION_MENU_ANIMATION * 2}ms` : "0s"};
+  `, screenMinM()`
+    position: relative;
+    flex-shrink: 0;
+    width: 300px;
+
+    &:before {
+      content: '';
+      display: ${({
+  $showSeparator
+}) => $showSeparator ? "block" : "none"};
+      position: absolute;
+      top: 50%;
+      right: 4px;
+      transform: translateY(-50%);
+      height: calc(100% - 5px);
+      ${({
+  theme
+}) => css`
+        border-left: 1px solid ${theme.colors.mercury};
+      `}
+      width: 1px;
+    }
+  `, screenMinL()`
+    width: 260px;
+  `);
+export {
+  Inner,
+  Logo,
+  Root,
+  Sidebar,
+  Top
+};

package/header/molecules/menu/segment-content-styled.d.ts

@@ -0,0 +1,13 @@
+export declare const ContentInner: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}> & string;
+export declare const ContentGrid: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}> & string;
+export declare const ContentColumn: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}> & string;
+export declare const ContentTitle: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}> & string;
+//# sourceMappingURL=segment-content-styled.d.ts.map

package/header/molecules/menu/segment-content-styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment-content-styled.d.ts","sourceRoot":"","sources":["../../../../src/header/molecules/menu/segment-content-styled.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;WAIxB,CAAA;AAED,eAAO,MAAM,WAAW;;WAYvB,CAAA;AAED,eAAO,MAAM,aAAa;;WAmBzB,CAAA;AAED,eAAO,MAAM,YAAY;;WAMxB,CAAA"}

package/header/molecules/menu/segment-content-styled.js

@@ -0,0 +1,39 @@
+import { styled } from "styled-components";
+import { screenMinS, screenMinL } from "@foxford/ui";
+const ContentInner = styled.div.withConfig({
+  displayName: "segment-content-styled__ContentInner",
+  componentId: "sc-1mgrrx6-0"
+})(["position:relative;width:100%;height:100%;"]);
+const ContentGrid = styled.div.withConfig({
+  displayName: "segment-content-styled__ContentGrid",
+  componentId: "sc-1mgrrx6-1"
+})(["& > :not(:last-child){margin-bottom:29px;", "}", ""], screenMinS()`
+      margin-bottom: 20px;
+    `, screenMinL()`
+    display: flex;
+  `);
+const ContentColumn = styled.div.withConfig({
+  displayName: "segment-content-styled__ContentColumn",
+  componentId: "sc-1mgrrx6-2"
+})(["max-width:350px;", " & > :not(:last-child){margin-bottom:29px;", "}"], screenMinL()`
+    max-width: 250px;
+
+    &:not(:last-child) {
+      margin-right: 80px;
+      margin-bottom: 0;
+    }
+  `, screenMinS()`
+      margin-bottom: 20px;
+    `);
+const ContentTitle = styled.div.withConfig({
+  displayName: "segment-content-styled__ContentTitle",
+  componentId: "sc-1mgrrx6-3"
+})(["margin-bottom:30px;", ""], screenMinS()`
+    margin-bottom: 24px;
+  `);
+export {
+  ContentColumn,
+  ContentGrid,
+  ContentInner,
+  ContentTitle
+};

package/header/molecules/menu/segment-content.d.ts

@@ -0,0 +1,7 @@
+import type { MenuSegment } from './types';
+export interface SegmentContentProps {
+    onItemClick?: (itemId: string) => void;
+    segment: MenuSegment | undefined;
+}
+export declare function SegmentContent({ onItemClick, segment }: SegmentContentProps): import("preact").JSX.Element | null;
+//# sourceMappingURL=segment-content.d.ts.map

package/header/molecules/menu/segment-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment-content.d.ts","sourceRoot":"","sources":["../../../../src/header/molecules/menu/segment-content.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAY,WAAW,EAAE,MAAM,SAAS,CAAA;AAEpD,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,OAAO,EAAE,WAAW,GAAG,SAAS,CAAA;CACjC;AAED,wBAAgB,cAAc,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,mBAAmB,uCAiC3E"}

package/header/molecules/menu/segment-content.js

@@ -0,0 +1,42 @@
+import { ContentInner, ContentTitle, ContentGrid, ContentColumn } from "./segment-content-styled.js";
+import { SELECTOR_IDS } from "../../../shared/constants.js";
+import { Scrollbar } from "../../atoms/scrollbar/index.js";
+import { SegmentTitle } from "../../atoms/segment-title/index.js";
+import { List } from "../list/index.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
+function SegmentContent({
+  onItemClick,
+  segment
+}) {
+  var _a, _b;
+  if (segment === void 0) {
+    return null;
+  }
+  const columns = [[], [], []];
+  for (const list of segment.lists) {
+    const columnNumber = list.kind === "spacer" ? void 0 : list.columnNumber;
+    (_a = columns[(columnNumber != null ? columnNumber : 1) - 1]) == null ? void 0 : _a.push(list);
+  }
+  return jsx(Scrollbar, {
+    children: jsxs(ContentInner, {
+      children: [jsx(ContentTitle, {
+        children: jsx(SegmentTitle, {
+          id: SELECTOR_IDS.SEGMENT_CONTENT_TITLE,
+          text: segment.innerTitle,
+          url: (_b = segment.innerTitleUrl) != null ? _b : segment.url
+        })
+      }), jsx(ContentGrid, {
+        id: SELECTOR_IDS.SEGMENT_CONTENT,
+        children: columns.map((column, index) => jsx(ContentColumn, {
+          children: column.map((list) => jsx(List, {
+            list,
+            onItemClick
+          }, list.id))
+        }, `column-${index + 1}`))
+      })]
+    })
+  });
+}
+export {
+  SegmentContent
+};

package/header/molecules/menu/styled.d.ts

@@ -0,0 +1,23 @@
+export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}, {
+    $isOpen: boolean;
+}>> & string;
+export declare const SegmentPane: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}, {
+    $hidden: boolean;
+}>> & string;
+export declare const ContentControl: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}> & string;
+export declare const Bottom: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}> & string;
+export declare const SpinnerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("preact").JSX.HTMLAttributes<HTMLDivElement>, "style"> & {
+    style?: string | import("styled-components/dist/types").CSSPropertiesWithVars | import("preact").JSX.CSSProperties | import("preact").JSX.SignalLike<string | import("preact").JSX.CSSProperties | undefined> | undefined;
+}, {
+    $isMenuOpen: boolean;
+}>> & string;
+export declare const BodyScrollLock: React.NamedExoticComponent<import("styled-components").ExecutionProps & Props>;
+//# sourceMappingURL=styled.d.ts.map

package/header/molecules/menu/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../src/header/molecules/menu/styled.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;aAAyB,OAAO;YAiCnD,CAAA;AAMD,eAAO,MAAM,WAAW;;;aAAyB,OAAO;YAEvD,CAAA;AAED,eAAO,MAAM,cAAc;;WAiB1B,CAAA;AAED,eAAO,MAAM,MAAM;;WAiBlB,CAAA;AAED,eAAO,MAAM,cAAc;;;iBAA6B,OAAO;YAY9D,CAAA;AAED,eAAO,MAAM,cAAc,gFAI1B,CAAA"}

package/header/molecules/menu/styled.js

@@ -0,0 +1,81 @@
+import { styled, css, createGlobalStyle } from "styled-components";
+import { screenMinS, screenMinM, screenMinL } from "@foxford/ui";
+import { DURATION_MENU_ANIMATION } from "../../../shared/constants.js";
+import { BASE_ZINDEX } from "../../../shared/z-index.js";
+const Content = styled.div.withConfig({
+  displayName: "styled__Content",
+  componentId: "sc-422awl-0"
+})(["position:absolute;top:0;right:", ";display:flex;flex-direction:column;width:100%;height:100%;", " overflow:hidden;transition:right ", "ms ease-out;z-index:", ";", " ", " ", ""], ({
+  $isOpen
+}) => $isOpen ? "0px" : "calc(-100% - 20px)", ({
+  theme
+}) => css`
+    background-color: ${theme.colors.white};
+  `, DURATION_MENU_ANIMATION, BASE_ZINDEX.NAVIGATION + 4, screenMinS()`
+    right: ${({
+  $isOpen
+}) => $isOpen ? "0px" : "calc(-100% - 36px)"};
+    flex-direction: row;
+    padding-bottom: 27px;
+    height: 100%;
+  `, screenMinM()`
+    padding-left: 64px;
+    width: 652px;
+    position: static;
+    padding-bottom: 0;
+  `, screenMinL()`
+    padding-left: 60px;
+    width: 988px;
+  `);
+const SegmentPane = styled.div.withConfig({
+  displayName: "styled__SegmentPane",
+  componentId: "sc-422awl-1"
+})(["display:", ";"], ({
+  $hidden
+}) => $hidden ? "none" : "contents");
+const ContentControl = styled.div.withConfig({
+  displayName: "styled__ContentControl",
+  componentId: "sc-422awl-2"
+})(["display:flex;align-items:center;justify-content:space-between;padding-top:5px;margin-bottom:26px;", ""], screenMinS()`
+    flex-shrink: 0;
+    align-items: initial;
+    margin-right: 108px;
+    margin-bottom: 0;
+
+    & > :first-child {
+      padding-top: 4px;
+    }
+  `);
+const Bottom = styled.div.withConfig({
+  displayName: "styled__Bottom",
+  componentId: "sc-422awl-3"
+})(["position:fixed;bottom:0;left:0;display:grid;gap:12px;width:100%;padding:20px 12px;text-align:center;z-index:", ";", " ", ""], BASE_ZINDEX.NAVIGATION + 4, ({
+  theme
+}) => css`
+    background-color: ${theme.colors.white};
+  `, screenMinS()`
+    gap: 20px;
+  `);
+const SpinnerWrapper = styled.div.withConfig({
+  displayName: "styled__SpinnerWrapper",
+  componentId: "sc-422awl-4"
+})(["position:absolute;top:calc(50% - 8px);left:50%;transform:translate(-50%,-50%);opacity:", ";transition:opacity ", "ms linear ", ";", ""], ({
+  $isMenuOpen
+}) => $isMenuOpen ? 1 : 0, DURATION_MENU_ANIMATION, ({
+  $isMenuOpen
+}) => $isMenuOpen ? `${DURATION_MENU_ANIMATION * 2}ms` : "0s", screenMinS()`
+    top: calc(50% - 20px);
+  `);
+const BodyScrollLock = createGlobalStyle`
+  body {
+    overflow: hidden;
+  }
+`;
+export {
+  BodyScrollLock,
+  Bottom,
+  Content,
+  ContentControl,
+  SegmentPane,
+  SpinnerWrapper
+};

package/header/molecules/menu/types.d.ts

@@ -0,0 +1,32 @@
+import type { IconName } from '@foxford/ui';
+export interface MenuListItemData {
+    bold?: boolean;
+    description?: string;
+    icon?: IconName;
+    id: string;
+    title?: string;
+    underline?: boolean;
+    url: string;
+}
+export type MenuList = {
+    id: string;
+    kind: 'spacer';
+    size?: number;
+} | {
+    columnNumber?: 1 | 2 | 3;
+    id: string;
+    items: MenuListItemData[];
+    kind?: 'list';
+    title?: string;
+    url?: string;
+};
+export interface MenuSegment {
+    bottomSpace?: boolean;
+    id: string;
+    innerTitle: string;
+    innerTitleUrl?: string;
+    lists: MenuList[];
+    title: string;
+    url: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/header/molecules/menu/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/header/molecules/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAE3C,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,MAAM,QAAQ,GAChB;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAC7C;IAAE,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAEpH,MAAM,WAAW,WAAW;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ"}

package/header/molecules/menu-button/index.d.ts

@@ -0,0 +1,6 @@
+export interface MenuButtonProps {
+    active: boolean;
+    onClick: () => void;
+}
+export declare function MenuButton({ active, onClick }: MenuButtonProps): import("preact").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/header/molecules/menu-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/header/molecules/menu-button/index.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,eAAe,gCAU9D"}

package/header/molecules/menu-button/index.js

@@ -0,0 +1,29 @@
+import { Root, IconWrapper, Icon, FakeIcon, Text } from "./styled.js";
+import { SELECTOR_IDS } from "../../../shared/constants.js";
+import { jsxs, jsx } from "preact/jsx-runtime";
+function MenuButton({
+  active,
+  onClick
+}) {
+  return jsxs(Root, {
+    $active: active,
+    id: SELECTOR_IDS.MENU_BUTTON,
+    onClick,
+    type: "button",
+    children: [jsxs(IconWrapper, {
+      children: [jsx(Icon, {
+        $active: active,
+        name: "listUl",
+        preset: "brand",
+        size: 20
+      }), jsx(FakeIcon, {
+        $active: active
+      })]
+    }), jsx(Text, {
+      children: "Меню"
+    })]
+  });
+}
+export {
+  MenuButton
+};