@mailstep/design-system 0.8.24 → 0.8.26-beta.0

package/ui/index909.es.js

@@ -0,0 +1 @@
+import "./index908.es.js";

package/ui/index91.es.js

@@ -0,0 +1,20 @@
+import { __commonJSMin as e } from "./index2.es.js";
+//#region node_modules/@fortawesome/pro-solid-svg-icons/faFlaskRoundPotion.js
+var t = /* @__PURE__ */ e(((e) => {
+	Object.defineProperty(e, "__esModule", { value: !0 });
+	var t = "fas", n = "flask-round-potion", r = 448, i = 512, a = ["flask-potion"], o = "f6e1", s = "M192 64l64 0 0 93.7c0 30.4 16.9 56.1 40.3 69.7c43 25 71.6 71.4 71.7 124.4c-58.6-1.7-85.4-12.6-109.9-22.6c-22-9-42.2-17.2-82.1-17.2c-42.3 0-73.4 9.2-94.5 18.8c6.5-44.1 33-81.7 70.2-103.4c23.4-13.6 40.3-39.3 40.3-69.7L192 64zm128 93.7L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L304 0 144 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 93.7c0 6-3.3 11.4-8.5 14.4C57.6 208.2 16 275.2 16 352c0 56 22.1 106.9 58.2 144.3C84.5 507 99.3 512 114.2 512l219.6 0c15 0 29.7-5 40.1-15.7C409.9 458.9 432 408 432 352c0-76.8-41.6-143.8-103.5-179.9c-5.2-3-8.5-8.4-8.5-14.4z";
+	e.definition = {
+		prefix: t,
+		iconName: n,
+		icon: [
+			r,
+			i,
+			a,
+			o,
+			s
+		]
+	}, e.faFlaskRoundPotion = e.definition, e.prefix = t, e.iconName = n, e.width = r, e.height = i, e.ligatures = a, e.unicode = o, e.svgPathData = s, e.aliases = a;
+}));
+//#endregion
+export default t();
+export { t as require_faFlaskRoundPotion };

package/ui/index910.es.js

@@ -0,0 +1,50 @@
+import { th as e } from "./index4.es.js";
+import { css as t, useTheme as n, x as r } from "./index6.es.js";
+import { require_jsx_runtime as i } from "./index143.es.js";
+import { HamburgerMenu as a } from "./index157.es.js";
+import { MobileCancel as o } from "./index162.es.js";
+import "react";
+import s from "styled-components";
+//#region packages/ui/Blocks/SideMenu/components/HamburgerMenu.tsx
+var c = i(), l = s(r.div)`
+  width: 36px;
+  height: 36px;
+  border-radius: 70px;
+  background-color: ${e.color("neutral20")};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: ${e.shadow("dropShadow")};
+  &:hover {
+    cursor: pointer;
+  }
+
+  ${({ isLeftMenuOpen: n }) => n ? t`
+          position: absolute;
+          left: 92%;
+          top: 7px;
+          z-index: 6;
+        ` : t`
+          & > svg > path {
+            stroke: ${e.color("blue2")};
+          }
+        `};
+
+  @media (min-width: 1024px) {
+    display: none;
+  }
+`, u = ({ isLeftMenuOpen: t, onClick: r }) => {
+	let i = n(), s = e.color("neutral20")({ theme: i });
+	return /* @__PURE__ */ (0, c.jsx)(l, {
+		mr: "8px",
+		onClick: r,
+		isLeftMenuOpen: !!t,
+		children: t ? /* @__PURE__ */ (0, c.jsx)(o, { fill: s }) : /* @__PURE__ */ (0, c.jsx)(a, {
+			fill: s,
+			stroke: "none"
+		})
+	});
+};
+//#endregion
+export { u as HamburgerMenuButton };

package/ui/index911.es.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Blocks/SideMenu/utils/constants.ts
+var e = 75, t = 255;
+//#endregion
+export { e as compactMenuWidth, t as expandedMenuWidth };

package/ui/index912.es.js

@@ -0,0 +1,60 @@
+import { th as e } from "./index4.es.js";
+import { css as t, styled as n } from "./index6.es.js";
+import { require_jsx_runtime as r } from "./index143.es.js";
+import { MenuItems as i } from "./index161.es.js";
+import { Trans as a } from "./index504.es.js";
+import { Paragraph4 as o } from "./index511.es.js";
+import "./index512.es.js";
+import { useCallback as s } from "react";
+//#region packages/ui/Blocks/SideMenu/components/Footer.tsx
+var c = r(), l = n.div`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  width: 100%;
+  margin-bottom: 24px;
+  justify-content: ${(e) => e.isCompact ? "center" : "flex-start"};
+  padding-left: ${(e) => e.isCompact ? "0" : "22px"};
+`, u = n.div`
+  display: none;
+  @media (min-width: 1024px) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    color: ${({ $lightMode: t }) => t ? e.color("typoPrimary") : e.color("gray")};
+    font-size: 11px;
+    & svg {
+      transform: ${(e) => e.isCompact ? "rotate(180deg)" : "rotate(0deg)"};
+      ${({ $lightMode: n }) => n && t`
+          fill: ${e.color("neutral20")};
+        `}
+
+      & > path {
+        stroke: ${e.color("lightGray5")};
+      }
+    }
+  }
+`, d = ({ isCompact: e, setIsCompact: t, lightMode: n }) => /* @__PURE__ */ (0, c.jsx)(l, {
+	isCompact: e,
+	children: /* @__PURE__ */ (0, c.jsxs)(u, {
+		onClick: s(() => {
+			t?.(!e);
+		}, [t, e]),
+		isCompact: e,
+		$lightMode: n,
+		children: [/* @__PURE__ */ (0, c.jsx)(i, {
+			stroke: "none",
+			width: "24px"
+		}), !e && /* @__PURE__ */ (0, c.jsx)(o, {
+			ml: 2,
+			variant: "semiBold",
+			children: /* @__PURE__ */ (0, c.jsx)(a, {
+				id: "footer.collapse",
+				message: "Collapse"
+			})
+		})]
+	})
+});
+//#endregion
+export { d as default };

package/ui/index913.es.js

@@ -0,0 +1,17 @@
+import { require_jsx_runtime as e } from "./index143.es.js";
+import { createContext as t, useCallback as n, useMemo as r, useState as i } from "react";
+//#region packages/ui/Blocks/SideMenu/context/LeftMenuContext.tsx
+var a = e(), o = t(null), s = ({ children: e, defaultItemSelected: t = null }) => {
+	let [s, c] = i(t), l = n((e) => {
+		c(e);
+	}, []), u = r(() => ({
+		expandedItem: s,
+		expandItem: l
+	}), [s, l]);
+	return /* @__PURE__ */ (0, a.jsx)(o.Provider, {
+		value: u,
+		children: e
+	});
+};
+//#endregion
+export { o as LeftMenuContext, s as LeftMenuProvider };

package/ui/index914.es.js

@@ -0,0 +1,286 @@
+import { th as e } from "./index4.es.js";
+import { css as t, styled as n } from "./index6.es.js";
+import r from "./index236.es.js";
+import { NavLink as i } from "./index389.es.js";
+import a from "./index487.es.js";
+import "./index911.es.js";
+//#region packages/ui/Blocks/SideMenu/styles.ts
+var o = t`
+  ::after {
+    content: '';
+    position: absolute;
+    width: 60px;
+    height: 40px;
+    z-index: -1;
+    border-radius: 9px 0 0 9px;
+    left: 8px;
+    top: -1px;
+  }
+`, s = t`
+  height: 40px;
+  width: 40px;
+  padding: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9px;
+`, c = n.div`
+  display: ${({ isLeftMenuOpen: e }) => e ? "block" : "none"};
+
+  @media (min-width: 1024px) {
+    display: block;
+    align-self: stretch;
+    height: fit-content;
+
+    @media print {
+      display: none;
+    }
+  }
+`, l = n.div`
+  margin-left: 23px;
+  border-left: 1.5px solid;
+  border-color: ${e("colors.red1")};
+`, u = n.div`
+  height: 1px;
+  width: 100%;
+  margin: 12px 0;
+  background-color: ${e("colors.lightGray6")};
+`, d = n.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: ${({ $isCompact: e }) => e ? "column" : "row"};
+  margin-bottom: ${({ $isCompact: e }) => e ? "10px" : "0"};
+  margin-left: ${({ isSubitem: e }) => e ? "15px" : "0"};
+`, f = n(r)`
+  color: ${({ $lightMode: t }) => t ? e.color("typoPrimary") : "white"};
+  svg {
+    max-width: 11px;
+  }
+`, p = n.div`
+  line-height: 1.5;
+  letter-spacing: 0.4px;
+`, m = n(i)`
+  display: flex;
+  flex-direction: ${({ $isCompact: e }) => e ? "column" : "row"};
+  align-items: center;
+  cursor: pointer;
+  height: ${({ $isCompact: e }) => e ? "60px" : "40px"};
+  border-radius: ${({ $lightMode: e }) => e ? "8px" : "10px"};
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  position: relative;
+  color: ${({ $lightMode: t }) => t ? e.color("typoPrimary") : e.color("lightGray5")};
+  transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition-property: transform;
+
+  &.toplevel {
+    margin: ${({ $isCompact: e }) => e ? "0 0 12px 0" : "16px 0"};
+    padding: ${({ $isCompact: e }) => e ? "10px 14px 6px 13px" : "9px 10px"};
+    gap: ${({ $isCompact: e }) => e ? "none" : "30px"};
+    justify-content: ${({ $isCompact: e }) => e ? "center" : "space-between"};
+    &.active {
+      color: ${({ $lightMode: t }) => t ? e("colors.red1") : "white"};
+    }
+  }
+
+  &.nestedlevel {
+    padding: 0;
+    :hover {
+      color: ${({ $lightMode: t }) => t ? e("colors.red1") : "white"};
+    }
+  }
+
+  &.active > ${p} {
+    background-color: ${({ $lightMode: t }) => t ? e.color("red20") : e.color("blue2")};
+    color: ${({ $lightMode: t }) => t ? e.color("red1") : e.color("white")};
+    width: 100%;
+    border-left: 4px solid ${e("colors.red1")};
+    :last-child {
+      border-bottom-right-radius: 10px;
+    }
+    :first-child {
+      border-top-right-radius: 10px;
+    }
+  }
+
+  ${p} {
+    color: ${({ $lightMode: t }) => t ? e.color("typoPrimary") : e.color("white")};
+    padding-left: 10px;
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
+  }
+
+  &.active,
+  &.selected {
+    ${f} {
+      color: ${({ $lightMode: t }) => t ? e.color("red1") : e.color("white")};
+    }
+  }
+`, h = n.div`
+   z-index: 1;
+   stroke: ${({ $lightMode: t }) => t ? e.color("blue2") : void 0};
+   .selected > ${d}, .active > ${d} {
+     color: ${({ $lightMode: t }) => t ? e.color("red1") : e.color("white")};
+     stroke: ${({ $lightMode: t }) => t ? e.color("red1") : e.color("blue2")};
+   }
+
+    .toplevel {
+      ${({ $isCompact: n, hasChildren: r, isHovering: i }) => n && r && i && t`
+          & ${g} {
+            ${o}
+            ::after {
+              background-color: ${({ $lightMode: t }) => t ? e.color("neutral20") : e.color("neutral500")};
+            }
+          }
+        `}
+
+        ${({ $isCompact: n, $lightMode: r, hasChildren: i }) => n && t`
+            & ${g} {
+              ${s}
+              :hover {
+                background-color: ${i ? "transparent" : r ? e.color("neutral20") : e.color("neutral500")};
+              }
+            }
+          `}
+
+          &.active, &.selected {
+            ${({ $isCompact: n, hasChildren: r, isHovering: i, $lightMode: a }) => n && r && i ? t`
+                    & ${g} {
+                      ${o}
+                      ::after {
+                        background-color: ${a ? e.color("red20") : e.color("neutral500")};
+                      }
+                    }
+                  ` : t`
+                    & ${g} {
+                      background-color: ${n ? a ? e.color("red20") : e.color("red1") : "transparent"};
+                      :hover {
+                        background-color: ${a ? e.color("red20") : "none"};
+                      }
+                    }
+                  `}
+       
+            background-color: ${({ $isCompact: t, $lightMode: n }) => t ? "none" : n ? e.color("red20") : e.color("red1")};
+            svg {
+              stroke: ${({ $lightMode: t }) => t ? e.color("red1") : e.color("white")};
+            }
+          }
+
+          &.expanded > ${f} {
+            visibility: visible;
+            svg {
+              transform: rotate(180deg);
+            }
+          }
+    }
+
+    &:hover {
+      ${m}.toplevel {
+        background-color: ${({ $isCompact: t, $lightMode: n }) => t ? "none" : n ? e.color("neutral20") : e.color("blue4")};
+      }
+      ${m}.toplevel.active, ${m}.toplevel.selected {
+        background-color: ${({ $lightMode: t, $isCompact: n }) => n ? "none" : t ? e.color("red20") : e.color("red70")};
+      }
+      ${m}.nestedlevel {
+        background-color: inherit;
+      }
+    }
+  }
+`, g = n.span`
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-right: ${({ $isCompact: e }) => e ? "0" : "11px"};
+  margin-bottom: ${({ $isCompact: e }) => e ? "4px" : "0"};
+`, _ = n.div`
+  position: absolute;
+  background-color: ${({ $lightMode: t }) => t ? e.color("white") : e.color("neutral500")};
+  white-space: nowrap;
+  transform: translateX(8px);
+  width: 248px;
+  border-radius: 0 10px 10px 0;
+  z-index: 5;
+  &::before {
+    content: '';
+    position: absolute;
+    border-radius: 10px;
+    width: calc(100% + 80px);
+    height: calc(100% + 100px);
+    left: -16px;
+    top: -50px;
+  }
+
+  & :not(:last-child) {
+    border-radius: 0;
+    border-bottom: 0.5px solid ${({ $lightMode: t }) => t ? e.color("neutral20") : e("colors.textTertiary")};
+  }
+
+  &:first-child > {
+    :hover {
+      border-top-right-radius: 10px;
+      background-color: ${({ $lightMode: t }) => t ? e.color("red20") : e.color("blue2")};
+    }
+  }
+
+  & :not(:first-child) {
+    :hover {
+      border-top-right-radius: 0;
+    }
+  }
+
+  & :last-child > {
+    :hover {
+      border-bottom-right-radius: 10px;
+      background-color: ${({ $lightMode: t }) => t ? e.color("red20") : e.color("blue2")};
+    }
+  }
+`, v = n.span`
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, y = n.div`
+  background-color: ${({ lightMode: t }) => t ? "white" : e("colors.blue3")};
+  border-right: 1px solid ${e("colors.lightGray6")};
+  height: -webkit-fill-available;
+  transition: width 0.5s ease;
+  width: ${({ isCompact: e }) => `${e ? 75 : 255}px`};
+
+  z-index: 7;
+  position: absolute;
+  top: ${({ isLeftMenuOpen: e }) => e ? "0" : void 0};
+  height: ${({ isLeftMenuOpen: e }) => e ? "100%" : "calc(100% - 52px)"};
+
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 1024px) {
+    top: inherit;
+    z-index: 2;
+  }
+`, b = n.div`
+  overflow-y: auto;
+  flex-grow: 1;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`, x = n.div`
+  width: 100%;
+  text-align: center;
+  padding: ${({ isCompact: e }) => e ? "24px 9px" : "24px 22px"};
+  height: calc(100% - 52px);
+`, S = n.div`
+  position: fixed;
+  top: 0;
+  z-index: 6;
+  height: 100%;
+  width: 100%;
+  background-color: ${a("blue2", .6)};
+  @media (min-width: 1024px) {
+    display: none;
+  }
+`;
+//#endregion
+export { x as BodyWrap, c as Container, f as ItemDropdownArrow, g as ItemIcon, d as ItemLabel, m as ItemLinkWrap, u as ItemsSeparator, h as MenuItemContainer, v as OverflowWithEllipsis, S as Overlay, b as ScrollWrap, l as SubItemsWrap, p as TooltipItemLabel, _ as TooltipWrap, y as TopLevelWrap };

package/ui/index915.es.js

@@ -0,0 +1,45 @@
+import { require_jsx_runtime as e } from "./index143.es.js";
+import { H6 as t } from "./index511.es.js";
+import { Popper as n } from "./index709.es.js";
+import r from "./index710.es.js";
+import { ItemLinkWrap as i, TooltipItemLabel as a, TooltipWrap as o } from "./index914.es.js";
+import { useMemo as s } from "react";
+import c from "styled-components";
+//#region packages/ui/Blocks/SideMenu/components/SubitemTooltip.tsx
+var l = e(), u = ({ title: e, link: n = "", lightMode: r }) => /* @__PURE__ */ (0, l.jsx)(i, {
+	...s(() => n.startsWith("https://") ? {
+		to: { pathname: n },
+		target: "_blank"
+	} : { to: n }, [n]),
+	exact: !0,
+	$lightMode: r,
+	children: /* @__PURE__ */ (0, l.jsx)(a, { children: /* @__PURE__ */ (0, l.jsx)(t, {
+		variant: "medium",
+		children: e
+	}) })
+}), d = c.div`
+  z-index: 5;
+  display: ${({ isLeftMenuOpen: e }) => e ? "block" : "none"};
+  @media (min-width: 1024px) {
+    display: block;
+  }
+`, f = ({ items: e, childRef: t, parentRef: i, isLeftMenuOpen: a, onCloseLeftMenu: s, lightMode: c }) => /* @__PURE__ */ (0, l.jsx)(r, { children: /* @__PURE__ */ (0, l.jsx)(n, {
+	innerRef: t,
+	referenceElement: i.current,
+	placement: "right-start",
+	children: ({ ref: t, style: n }) => /* @__PURE__ */ (0, l.jsx)(d, {
+		ref: t,
+		style: n,
+		onClick: s,
+		isLeftMenuOpen: a,
+		children: /* @__PURE__ */ (0, l.jsx)(o, {
+			$lightMode: c,
+			children: e?.map((e, t) => /* @__PURE__ */ (0, l.jsx)(u, {
+				...e,
+				lightMode: c
+			}, `${t}`))
+		})
+	})
+}) });
+//#endregion
+export { f as default };

package/ui/index916.es.js

@@ -0,0 +1,10 @@
+import { LeftMenuContext as e } from "./index913.es.js";
+import { useContext as t } from "react";
+//#region packages/ui/Blocks/SideMenu/context/useLeftMenuContext.ts
+var n = () => {
+	let n = t(e);
+	if (!n) throw Error("useLeftMenuContext context must be use inside LeftMenuProvider");
+	return n;
+};
+//#endregion
+export { n as useLeftMenuContext };

package/ui/index917.es.js

@@ -0,0 +1,18 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region packages/ui/Blocks/SideMenu/hooks/useOutsideHover.ts
+var i = ({ parentRef: i }) => {
+	let a = n(null), [o, s] = r(!1), c = e(() => {
+		s(!0);
+	}, []), l = e((e) => {
+		!i.current?.contains(e.target) && !a.current?.contains(e.target) && s(!1);
+	}, [i]);
+	return t(() => (document.addEventListener("mouseover", l), () => {
+		document.removeEventListener("mouseover", l);
+	}), [l]), {
+		isHovering: o,
+		handleMouseOver: c,
+		ref: a
+	};
+};
+//#endregion
+export { i as default };

package/ui/index918.es.js

@@ -0,0 +1,88 @@
+import { require_jsx_runtime as e } from "./index143.es.js";
+import t from "./index236.es.js";
+import { matchPath as n } from "./index388.es.js";
+import { Paragraph3 as r, Paragraph5 as i } from "./index511.es.js";
+import { ItemDropdownArrow as a, ItemIcon as o, ItemLabel as s, ItemLinkWrap as c, ItemsSeparator as l, MenuItemContainer as u, OverflowWithEllipsis as d, SubItemsWrap as f } from "./index914.es.js";
+import p from "./index915.es.js";
+import { useLeftMenuContext as m } from "./index916.es.js";
+import h from "./index917.es.js";
+import { memo as g, useCallback as _, useMemo as v, useRef as y } from "react";
+//#region packages/ui/Blocks/SideMenu/MenuItem.tsx
+var b = e(), x = /\?$/, S = ({ icon: e, title: g, link: C = "", items: w, id: T, isSubitem: E, isCompact: D, lightMode: O = !1, separator: k = !1, isLeftMenuOpen: A, onCloseLeftMenu: j }) => {
+	let M = v(() => w && w?.length > 0, [w]), { expandedItem: N, expandItem: P } = m(), F = N === T, I = _(() => {
+		M && P(F ? null : T ?? null), !M && !O && j && j();
+	}, [
+		M,
+		P,
+		F,
+		T,
+		O,
+		j
+	]), L = v(() => C.startsWith("https://") ? {
+		to: { pathname: C },
+		target: "_blank"
+	} : { to: C }, [C]), R = D ? i : r, z = F && !D, B = y(null), { ref: V, isHovering: H, handleMouseOver: U } = h({ parentRef: B }), W = E ? "nestedlevel" : "toplevel";
+	F && (W += " expanded"), k && (W += " separator");
+	let G = _((e, t) => {
+		let r = !!w?.find((e) => e.link?.replace(x, "") === t.pathname), i = !!n(t.pathname, { path: e?.path }), a = t.pathname.startsWith(C.slice(0, -1)) && t.pathname.includes("/settings/");
+		return i || r || a;
+	}, [w, C]);
+	return /* @__PURE__ */ (0, b.jsxs)(b.Fragment, { children: [
+		k && /* @__PURE__ */ (0, b.jsx)(l, {}),
+		/* @__PURE__ */ (0, b.jsxs)(u, {
+			ref: B,
+			$isCompact: D,
+			$lightMode: O,
+			hasChildren: M,
+			isHovering: H,
+			children: [/* @__PURE__ */ (0, b.jsxs)(c, {
+				...L,
+				onMouseOver: U,
+				exact: !0,
+				activeClassName: M ? "selected" : void 0,
+				onClick: I,
+				$isCompact: D,
+				className: W,
+				isActive: G,
+				$lightMode: O,
+				children: [/* @__PURE__ */ (0, b.jsxs)(s, {
+					$isCompact: D,
+					isSubitem: E,
+					children: [!E && e && /* @__PURE__ */ (0, b.jsx)(o, {
+						className: "mainIcon",
+						$isCompact: D,
+						children: typeof e == "string" ? /* @__PURE__ */ (0, b.jsx)(t, {
+							icon: e,
+							fill: "none"
+						}) : e
+					}), /* @__PURE__ */ (0, b.jsx)(R, {
+						variant: "semiBold",
+						mt: 0,
+						mb: 0,
+						textAlign: D ? "center" : "left",
+						children: /* @__PURE__ */ (0, b.jsx)(d, { children: g })
+					})]
+				}), !D && M && /* @__PURE__ */ (0, b.jsx)(a, {
+					icon: "goDown",
+					$lightMode: O
+				})]
+			}), H && D && M && !z && /* @__PURE__ */ (0, b.jsx)(p, {
+				items: w,
+				childRef: V,
+				parentRef: B,
+				isLeftMenuOpen: A,
+				onCloseLeftMenu: j,
+				lightMode: O
+			})]
+		}),
+		M && z && /* @__PURE__ */ (0, b.jsx)(f, { children: w?.map((e, t) => /* @__PURE__ */ (0, b.jsx)(S, {
+			isCompact: D,
+			lightMode: O,
+			...e,
+			onCloseLeftMenu: j,
+			isSubitem: !0
+		}, `${t}`)) })
+	] });
+}, C = g(S);
+//#endregion
+export { C as default };

package/ui/index919.es.js

@@ -0,0 +1,37 @@
+import { require_jsx_runtime as e } from "./index143.es.js";
+import { useClickOutside as t } from "./index496.es.js";
+import n from "./index912.es.js";
+import { LeftMenuProvider as r } from "./index913.es.js";
+import { BodyWrap as i, Container as a, Overlay as o, ScrollWrap as s, TopLevelWrap as c } from "./index914.es.js";
+import l from "./index918.es.js";
+import "react";
+//#region packages/ui/Blocks/SideMenu/SideMenu.tsx
+var u = e(), d = ({ menuItems: e, isCompact: d, setIsCompact: f, isLeftMenuOpen: p, onCloseLeftMenu: m, variant: h = "dark", children: g }) => {
+	let _ = h === "light";
+	return /* @__PURE__ */ (0, u.jsx)(r, { children: /* @__PURE__ */ (0, u.jsxs)(a, {
+		isLeftMenuOpen: p,
+		children: [/* @__PURE__ */ (0, u.jsxs)(c, {
+			isCompact: d,
+			isLeftMenuOpen: p,
+			ref: t({ onClose: m }),
+			lightMode: _,
+			children: [/* @__PURE__ */ (0, u.jsx)(s, { children: /* @__PURE__ */ (0, u.jsxs)(i, {
+				isCompact: d,
+				children: [e.map((e, t) => /* @__PURE__ */ (0, u.jsx)(l, {
+					isCompact: d,
+					isLeftMenuOpen: p,
+					onCloseLeftMenu: m,
+					lightMode: _,
+					separator: !!e.separator,
+					...e
+				}, `${e.id ?? e.title}-${t}`)), g]
+			}) }), /* @__PURE__ */ (0, u.jsx)(n, {
+				isCompact: d,
+				setIsCompact: f,
+				lightMode: _
+			})]
+		}), /* @__PURE__ */ (0, u.jsx)(o, {})]
+	}) });
+};
+//#endregion
+export { d as default };

package/ui/index92.es.js

@@ -0,0 +1,20 @@
+import { __commonJSMin as e } from "./index2.es.js";
+//#region node_modules/@fortawesome/pro-solid-svg-icons/faFluxCapacitor.js
+var t = /* @__PURE__ */ e(((e) => {
+	Object.defineProperty(e, "__esModule", { value: !0 });
+	var t = "fas", n = "flux-capacitor", r = 448, i = 512, a = [], o = "f8ba", s = "M0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM148.7 237.3l-49-49c-15.6-15.6-15.6-40.9 0-56.6s40.9-15.6 56.6 0l49 49c1.8-6.6 2.7-13.6 2.7-20.7c0-44.2-35.8-80-80-80s-80 35.8-80 80s35.8 80 80 80c7.2 0 14.1-.9 20.7-2.7zM184 282.7c-23.9 13.8-40 39.7-40 69.3c0 44.2 35.8 80 80 80s80-35.8 80-80c0-29.6-16.1-55.5-40-69.3l0 69.3c0 22.1-17.9 40-40 40s-40-17.9-40-40l0-69.3zm115.3-45.4c6.6 1.8 13.6 2.7 20.7 2.7c44.2 0 80-35.8 80-80s-35.8-80-80-80s-80 35.8-80 80c0 7.2 .9 14.1 2.7 20.7l49-49c15.6-15.6 40.9-15.6 56.6 0s15.6 40.9 0 56.6l-49 49zm-160-88.6c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L208 262.6l0 89.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-89.4 91.3-91.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L224 233.4l-84.7-84.7z";
+	e.definition = {
+		prefix: t,
+		iconName: n,
+		icon: [
+			r,
+			i,
+			a,
+			o,
+			s
+		]
+	}, e.faFluxCapacitor = e.definition, e.prefix = t, e.iconName = n, e.width = r, e.height = i, e.ligatures = a, e.unicode = o, e.svgPathData = s, e.aliases = a;
+}));
+//#endregion
+export default t();
+export { t as require_faFluxCapacitor };

package/ui/index920.es.js

@@ -0,0 +1,7 @@
+import "./index910.es.js";
+import "./index911.es.js";
+import e from "./index919.es.js";
+//#region packages/ui/Blocks/SideMenu/index.ts
+var t = e;
+//#endregion
+export { t as default };