@layers-app/shared 0.2.4 → 0.2.6

package/dist/assets/svg/socials/x.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_8583_5305)" }, /* @__PURE__ */ e.createElement("path", { d: "M9.70067 7.05357L15.7687 0H14.3308L9.0619 6.12452L4.85368 0H0L6.36365 9.26135L0 16.6581H1.43801L7.00205 10.1904L11.4462 16.6581H16.2999L9.70031 7.05357H9.70067ZM7.73112 9.34295L7.08635 8.42073L1.95614 1.08251H4.16483L8.30497 7.00469L8.94974 7.92691L14.3314 15.6248H12.1227L7.73112 9.3433V9.34295Z", fill: "black" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_8583_5305" }, /* @__PURE__ */ e.createElement("rect", { width: 16.2999, height: 16.6667, fill: "white" }))));
+export {
+  l as default
+};

package/dist/assets/svg/socials/youtube.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 17 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_8583_6844)" }, /* @__PURE__ */ e.createElement("path", { d: "M6.66652 8.33336L10.9853 5.82732L6.66652 3.33346V8.33336ZM1.8248 11.3139C1.10702 11.1192 0.547424 10.5474 0.340624 9.84186C0 8.54016 0 5.82732 0 5.82732C0 5.82732 0 3.11447 0.340624 1.82496C0.547424 1.10723 1.10702 0.547582 1.8248 0.352955C3.11431 0.000158001 8.32102 0.000158001 8.32102 0.000158001C8.32102 0.000158001 13.5399 0.000158001 14.8295 0.352955C15.5594 0.547582 16.1068 1.10723 16.3015 1.82496C16.6542 3.11447 16.6542 5.82732 16.6542 5.82732C16.6542 5.82732 16.6542 8.54016 16.3015 9.84186C16.1068 10.5474 15.5594 11.1192 14.8295 11.3139C13.5399 11.6667 8.32102 11.6667 8.32102 11.6667C8.32102 11.6667 3.11431 11.6667 1.8248 11.3139Z", fill: "#ED1838" }), /* @__PURE__ */ e.createElement("path", { d: "M6.6665 8.33334L10.9852 5.8273L6.6665 3.33344V8.33334Z", fill: "white" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_8583_6844" }, /* @__PURE__ */ e.createElement("rect", { width: 16.6541, height: 11.6667, fill: "white" }))));
+export {
+  l as default
+};

package/dist/assets/svg/users.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const C = (t) => /* @__PURE__ */ e.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M16.333 23.333C25.3537 23.333 32.667 27.5123 32.667 32.667C32.6667 37.8215 25.3535 42 16.333 42C7.3127 41.9999 0.000307563 37.8214 0 32.667C0 27.5124 7.31251 23.3331 16.333 23.333ZM30.0693 23.4092C36.8199 23.9093 41.9998 26.8187 42 30.333C42 32.8476 39.3479 35.0529 35.3662 36.2871C35.887 35.1389 36.166 33.9232 36.166 32.666C36.1658 29.0285 33.8272 25.7444 30.0693 23.4092ZM16.333 0C21.4876 0 25.6668 4.1785 25.667 9.33301C25.667 14.4877 21.4877 18.667 16.333 18.667C11.1785 18.6668 7 14.4876 7 9.33301C7.00018 4.17861 11.1786 0.000175749 16.333 0ZM28.2939 4.67285C32.0234 4.82711 35 7.89959 35 11.667C34.9999 15.5329 31.8659 18.6669 28 18.667C27.1484 18.667 26.3321 18.5148 25.5771 18.2363C27.8 15.9289 29.1669 12.7909 29.167 9.33398C29.167 7.68993 28.8573 6.11753 28.2939 4.67285Z", fill: "var(--mantine-color-gray-text)" }));
+export {
+  C as default
+};

package/dist/assets/svg/whatsapp-icon.svg.js

@@ -0,0 +1,5 @@
+import * as C from "react";
+const e = (t) => /* @__PURE__ */ C.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ C.createElement("path", { d: "M0 16L1.12466 11.8913C0.430666 10.6887 0.0659999 9.32533 0.0666665 7.92733C0.0686665 3.55667 3.62533 0 7.99532 0C10.116 0.000666667 12.1066 0.826667 13.604 2.32533C15.1006 3.824 15.9246 5.816 15.924 7.93467C15.922 12.306 12.3653 15.8627 7.99532 15.8627C6.66865 15.862 5.36132 15.5293 4.20332 14.8973L0 16ZM4.39799 13.462C5.51532 14.1253 6.58198 14.5227 7.99265 14.5233C11.6246 14.5233 14.5833 11.5673 14.5853 7.93333C14.5866 4.292 11.642 1.34 7.99798 1.33867C4.36332 1.33867 1.40666 4.29467 1.40533 7.928C1.40466 9.41133 1.83933 10.522 2.56933 11.684L1.90333 14.116L4.39799 13.462ZM11.9893 9.81933C11.94 9.73667 11.808 9.68733 11.6093 9.588C11.4113 9.48867 10.4373 9.00933 10.2553 8.94333C10.074 8.87733 9.94198 8.844 9.80931 9.04267C9.67731 9.24067 9.29731 9.68733 9.18198 9.81933C9.06665 9.95133 8.95065 9.968 8.75265 9.86867C8.55465 9.76933 7.91598 9.56067 7.15932 8.88533C6.57065 8.36 6.17265 7.71133 6.05732 7.51267C5.94199 7.31467 6.04532 7.20733 6.14399 7.10867C6.23332 7.02 6.34199 6.87733 6.44132 6.76133C6.54199 6.64667 6.57465 6.564 6.64132 6.43133C6.70732 6.29933 6.67465 6.18333 6.62465 6.084C6.57465 5.98533 6.17865 5.01 6.01399 4.61333C5.85265 4.22733 5.68932 4.27933 5.56799 4.27333L5.18799 4.26667C5.05599 4.26667 4.84132 4.316 4.65999 4.51467C4.47866 4.71333 3.96666 5.192 3.96666 6.16733C3.96666 7.14267 4.67666 8.08467 4.77532 8.21667C4.87466 8.34867 6.17199 10.35 8.15932 11.208C8.63198 11.412 9.00131 11.534 9.28865 11.6253C9.76331 11.776 10.1953 11.7547 10.5366 11.704C10.9173 11.6473 11.7086 11.2247 11.874 10.762C12.0393 10.2987 12.0393 9.902 11.9893 9.81933Z", fill: "white" }));
+export {
+  e as default
+};

package/dist/components/AliasTextInput/AliasTextInput.d.ts

@@ -15,7 +15,9 @@ type AliasTextInputProps = {
     flexProps?: FlexProps;
     textInputProps?: Omit<TextInputProps, 'value' | 'onChange' | 'onBlur' | 'error'>;
     isCheckingAlias?: boolean;
+    previewMode?: boolean;
+    tooltipLabel?: string;
 };
-export declare const AliasTextInput: ({ form, label, disabled, localization: { aliasPlaceholder }, stackProps, flexProps, textInputProps, isCheckingAlias, }: AliasTextInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AliasTextInput: ({ form, label, disabled, localization: { aliasPlaceholder }, stackProps, flexProps, textInputProps, isCheckingAlias, previewMode, tooltipLabel, }: AliasTextInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=AliasTextInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AliasTextInput.d.ts","sourceRoot":"","sources":["../../../src/components/AliasTextInput/AliasTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAGT,UAAU,EAGV,cAAc,EACf,MAAM,eAAe,CAAC;AAEvB,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QAChE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;QACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACzB,CAAC;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE;QACZ,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,IAAI,CACnB,cAAc,EACd,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAC1C,CAAC;IACF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,wHAS5B,mBAAmB,4CAuErB,CAAC"}
+{"version":3,"file":"AliasTextInput.d.ts","sourceRoot":"","sources":["../../../src/components/AliasTextInput/AliasTextInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAGT,UAAU,EAGV,cAAc,EAEf,MAAM,eAAe,CAAC;AAEvB,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QAChE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;QACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACzB,CAAC;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE;QACZ,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,IAAI,CACnB,cAAc,EACd,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,CAC1C,CAAC;IACF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,mJAW5B,mBAAmB,4CAkFrB,CAAC"}

package/dist/components/AliasTextInput/AliasTextInput.js

@@ -1,70 +1,79 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { Stack as v, Flex as c, Text as n, TextInput as h, Loader as f } from "@mantine/core";
-const w = ({
-  form: d,
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { HelpCircleIcon as v } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as g } from "@hugeicons/react";
+import { Stack as x, Flex as l, Text as c, TextInput as y, Loader as w, Box as z, Tooltip as L } from "@mantine/core";
+const H = ({
+  form: p,
   label: e,
-  disabled: r,
-  localization: { aliasPlaceholder: s },
-  stackProps: u,
-  flexProps: i,
-  textInputProps: a,
-  isCheckingAlias: m
+  disabled: o,
+  localization: { aliasPlaceholder: a },
+  stackProps: m,
+  flexProps: d,
+  textInputProps: s,
+  isCheckingAlias: u,
+  previewMode: n = !1,
+  tooltipLabel: h
 }) => {
-  const { error: t, ...p } = d;
-  return /* @__PURE__ */ l(v, { gap: 5, ...u, children: [
-    e ? typeof e == "string" ? /* @__PURE__ */ o(n, { fw: 500, fz: "xs", lh: "sm", children: e }) : e : null,
-    /* @__PURE__ */ l(
-      c,
+  const { error: t, ...f } = p;
+  return /* @__PURE__ */ i(x, { gap: 5, ...m, children: [
+    e ? typeof e == "string" ? /* @__PURE__ */ r(c, { fw: 500, fz: "xs", lh: "sm", children: e }) : e : null,
+    /* @__PURE__ */ i(
+      l,
       {
-        pl: 12,
-        gap: 0,
-        ...i,
+        px: 12,
+        gap: "sm",
+        ...d,
         style: {
           border: `1px solid ${t ? "var(--mantine-color-error)" : "var(--mantine-color-default-border)"}`,
           borderRadius: "var(--mantine-radius-default)",
-          color: r ? "var(--input-disabled-color)" : void 0,
-          background: r ? "var(--mantine-color-disabled)" : void 0,
-          opacity: r ? 0.6 : 1,
-          cursor: r ? "not-allowed" : void 0,
-          ...i?.style
+          color: o ? "var(--input-disabled-color)" : void 0,
+          background: o ? "var(--mantine-color-disabled)" : void 0,
+          opacity: o ? 0.6 : 1,
+          overflow: "hidden",
+          cursor: o ? "not-allowed" : n ? "pointer" : void 0,
+          ...d?.style
         },
         children: [
-          /* @__PURE__ */ o(c, { align: "center", children: /* @__PURE__ */ o(
-            n,
-            {
-              fw: 400,
-              c: r ? "var(--mantine-color-dimmed)" : "var(--mantine-color-gray-text)",
-              lh: "sm",
-              style: { whiteSpace: "nowrap" },
-              children: "app.layers.md/"
-            }
-          ) }),
-          /* @__PURE__ */ o(
-            h,
-            {
-              w: "100%",
-              placeholder: s,
-              variant: "unstyled",
-              leftSectionWidth: "auto",
-              maxLength: 50,
-              disabled: r,
-              rightSection: m ? /* @__PURE__ */ o(f, { size: 14 }) : void 0,
-              ...p,
-              ...a,
-              styles: {
-                input: {
-                  cursor: r ? "not-allowed" : void 0
-                },
-                ...a?.styles
+          /* @__PURE__ */ i(l, { gap: 0, flex: 1, align: "center", children: [
+            /* @__PURE__ */ r(l, { align: "center", children: /* @__PURE__ */ r(
+              c,
+              {
+                fw: 400,
+                c: o ? "dimmed" : "gray",
+                lh: "sm",
+                style: { whiteSpace: "nowrap" },
+                children: "app.layers.md/"
               }
-            }
-          )
+            ) }),
+            /* @__PURE__ */ r(
+              y,
+              {
+                w: "100%",
+                placeholder: a,
+                variant: "unstyled",
+                leftSectionWidth: "auto",
+                maxLength: 50,
+                disabled: o,
+                rightSection: u ? /* @__PURE__ */ r(w, { size: 14 }) : void 0,
+                ...f,
+                ...s,
+                styles: {
+                  input: {
+                    pointerEvents: n ? "none" : void 0,
+                    cursor: o ? "not-allowed" : void 0
+                  },
+                  ...s?.styles
+                }
+              }
+            )
+          ] }),
+          n && /* @__PURE__ */ r(z, { w: 20, h: 20, children: /* @__PURE__ */ r(L, { label: h || a, children: /* @__PURE__ */ r(g, { size: 20, color: "gray", icon: v }) }) })
         ]
       }
     ),
-    t && /* @__PURE__ */ o(n, { fz: "xs", c: "var(--mantine-color-error)", children: t })
+    t && /* @__PURE__ */ r(c, { fz: "xs", c: "var(--mantine-color-error)", children: t })
   ] });
 };
 export {
-  w as AliasTextInput
+  H as AliasTextInput
 };

package/dist/components/AppContainer/AppContainer.d.ts

@@ -5,7 +5,7 @@ declare global {
         preSignMode?: boolean;
     }
 }
-export declare const AppContainer: (({ header, content, toolbar, navbarTitle, footer, onTitleChange, trashMenu, rightbar, onInviteClick, showAppsSidebar, headerBorderless, }: AppContainerProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const AppContainer: (({ header, content, toolbar, navbarTitle, footer, onTitleChange, trashMenu, rightbar, onInviteClick, showAppsSidebar, headerBorderless, withBg, }: AppContainerProps) => import("react/jsx-runtime").JSX.Element) & {
     NavbarContent: ({ children }: import("react").PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
     NewButton: ({ children, ...props }: import("@mantine/core").PolymorphicComponentProps<"button", import("@mantine/core").ButtonProps>) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"AppContainer.d.ts","sourceRoot":"","sources":["../../../src/components/AppContainer/AppContainer.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;CACF;AAyED,eAAO,MAAM,YAAY,8IA3DtB,iBAAiB;;;CA8DlB,CAAC"}
+{"version":3,"file":"AppContainer.d.ts","sourceRoot":"","sources":["../../../src/components/AppContainer/AppContainer.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;CACF;AA0ED,eAAO,MAAM,YAAY,sJA3DtB,iBAAiB;;;CA8DlB,CAAC"}

package/dist/components/AppContainer/AppContainer.js

@@ -1,64 +1,67 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { useEffect as y } from "react";
-import { useMantineColorScheme as v, Stack as A, Flex as j } from "@mantine/core";
-import { useQueryParam as k } from "../../hooks/useNumberQueryParam.js";
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { useEffect as T } from "react";
+import { useMantineColorScheme as j, Stack as B, Flex as D } from "@mantine/core";
+import { isAppMode as H } from "../../helpers/isAppMode.js";
+import { useQueryParam as M } from "../../hooks/useNumberQueryParam.js";
 import { AppShell as e } from "../AppShell/AppShell.js";
-import { AppsSidebar as B } from "./components/AppsSidebar/AppsSidebar.js";
-import { Header as H } from "./components/Header.js";
-import { Main as N } from "./components/Main.js";
-import T from "./components/NavbarContent.js";
-import { RightSidebar as W } from "./components/RightSidebar.js";
-import { ToolSidebar as M } from "./components/ToolSidebar.js";
-import { ToolbarNewButton as P } from "./components/ToolbarNewButton.js";
-import { appContainerStore as $ } from "./hooks/useAppContainerStore.js";
-const E = ({
-  header: h,
-  content: l,
+import { AppsSidebar as N } from "./components/AppsSidebar/AppsSidebar.js";
+import { Header as P } from "./components/Header.js";
+import { Main as W } from "./components/Main.js";
+import E from "./components/NavbarContent.js";
+import { RightSidebar as O } from "./components/RightSidebar.js";
+import { ToolSidebar as $ } from "./components/ToolSidebar.js";
+import { ToolbarNewButton as F } from "./components/ToolbarNewButton.js";
+import { appContainerStore as K } from "./hooks/useAppContainerStore.js";
+import { useAppContainerDataStore as Q } from "./hooks/useAppContainerDataStore.js";
+const R = ({
+  header: l,
+  content: h,
   toolbar: i,
   navbarTitle: d,
   footer: n,
-  onTitleChange: s,
-  trashMenu: c,
+  onTitleChange: c,
+  trashMenu: f,
   rightbar: m,
-  onInviteClick: f,
-  showAppsSidebar: b = !0,
-  headerBorderless: u = !1
+  onInviteClick: u,
+  showAppsSidebar: S = !0,
+  headerBorderless: b = !1,
+  withBg: x = !1
 }) => {
-  const { toolbarWidth: S, rightbarWidth: x, layout: a } = $.useStore(), { setColorScheme: p } = v(), t = k("theme");
-  y(() => {
-    (t === "dark" || t === "light") && p(t);
-  }, [t, p]);
-  const w = {
-    "--toolbar-width": `${S}px`,
-    "--rightbar-width": `${x}px`
-  }, g = a !== "nothing", C = a === "default" && i;
-  return /* @__PURE__ */ o(e, { style: w, children: [
-    b && /* @__PURE__ */ r(e.Section, { w: "var(--apps-sidebar-width)", children: /* @__PURE__ */ r(B, { onInviteClick: f, trashMenu: c }) }),
-    /* @__PURE__ */ o(e.Section, { flex: 1, display: "flex", pos: "relative", children: [
-      C && /* @__PURE__ */ r(M, { onTitleChange: s, navbarTitle: d, children: i }),
-      /* @__PURE__ */ o(A, { mih: 0, gap: 0, h: "100%", flex: 2, miw: 0, children: [
-        g && /* @__PURE__ */ r(
+  const { toolbarWidth: w, rightbarWidth: C, layout: p } = K.useStore(), g = Q((v) => v.user), a = H(g.mode, "DESKTOP"), { setColorScheme: s } = j(), t = M("theme");
+  T(() => {
+    !a && (t === "dark" || t === "light") && s(t);
+  }, [t, s, a]);
+  const A = {
+    "--toolbar-width": `${w}px`,
+    "--rightbar-width": `${C}px`
+  }, y = p !== "nothing", k = p === "default" && i;
+  return /* @__PURE__ */ r(e, { style: A, children: [
+    S && /* @__PURE__ */ o(e.Section, { w: "var(--apps-sidebar-width)", children: /* @__PURE__ */ o(N, { onInviteClick: u, trashMenu: f }) }),
+    /* @__PURE__ */ r(e.Section, { flex: 1, display: "flex", pos: "relative", children: [
+      k && /* @__PURE__ */ o($, { onTitleChange: c, navbarTitle: d, children: i }),
+      /* @__PURE__ */ r(B, { mih: 0, gap: 0, h: "100%", flex: 2, miw: 0, children: [
+        y && /* @__PURE__ */ o(
           e.Header,
           {
             px: "sm",
-            style: u ? { borderBottom: "none" } : void 0,
-            children: /* @__PURE__ */ r(H, { children: h })
+            style: b ? { borderBottom: "none" } : void 0,
+            children: /* @__PURE__ */ o(P, { children: l })
           }
         ),
-        /* @__PURE__ */ o(j, { mih: 0, gap: 0, h: "100%", children: [
-          /* @__PURE__ */ r(e.WorkContent, { children: /* @__PURE__ */ o(N, { children: [
-            l,
-            n && /* @__PURE__ */ r("footer", { children: n })
+        /* @__PURE__ */ r(D, { mih: 0, gap: 0, h: "100%", children: [
+          /* @__PURE__ */ o(e.WorkContent, { children: /* @__PURE__ */ r(W, { withBg: x, children: [
+            h,
+            n && /* @__PURE__ */ o("footer", { children: n })
           ] }) }),
-          m && /* @__PURE__ */ r(W, { children: m })
+          m && /* @__PURE__ */ o(O, { children: m })
         ] })
       ] })
     ] })
   ] });
-}, U = Object.assign(E, {
-  NavbarContent: T,
-  NewButton: P
+}, to = Object.assign(R, {
+  NavbarContent: E,
+  NewButton: F
 });
 export {
-  U as AppContainer
+  to as AppContainer
 };

package/dist/components/AppContainer/AppContainer.module.css.js

@@ -1,4 +1,4 @@
-const t = "_toolTitleInput_117jg_19", n = "_appSidebarButton_117jg_34", o = "_slideContainer_117jg_52", e = "_slideContent_117jg_58", i = "_main_117jg_73", s = {
+const t = "_toolTitleInput_14hbr_19", n = "_appSidebarButton_14hbr_34", o = "_slideContainer_14hbr_55", e = "_slideContent_14hbr_61", i = "_main_14hbr_76", s = {
   toolTitleInput: t,
   appSidebarButton: n,
   slideContainer: o,

package/dist/components/AppContainer/components/AppSidebarButton.js

@@ -29,7 +29,7 @@ const h = c(({ title: r, icon: a, active: e, onClick: o }, i) => /* @__PURE__ */
           fw: 500,
           lh: 1.4,
           c: "var(--app-container-title-color)",
-          px: 8,
+          px: 4,
           truncate: !0,
           ta: "center",
           w: "var(--apps-sidebar-width)",

package/dist/components/AppContainer/components/AppsSidebar/AppsSection.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { useTranslation as l } from "react-i18next";
+import { useTranslation as s } from "react-i18next";
 import { matchPath as m } from "react-router-dom";
 import { More01Icon as d } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as h } from "@hugeicons/react";
@@ -9,16 +9,16 @@ import { appContainerStore as g } from "../../hooks/useAppContainerStore.js";
 import { AppSidebarButton as n } from "../AppSidebarButton.js";
 import { MoreMenu as w } from "../menus/MoreMenu.js";
 const y = () => {
-  const { t: p } = l("appContainer"), { hiddenTools: a } = g.useStore(), { tools: i, publicMode: c } = S();
+  const { t: p } = s("appContainer"), { hiddenTools: a } = g.useStore(), { tools: i, publicMode: c } = S();
   return /* @__PURE__ */ r(
     f,
     {
       w: "var(--apps-sidebar-width)",
       style: { borderTop: "1px solid var(--app-shell-border)" },
       py: 8,
-      children: /* @__PURE__ */ t(u, { gap: "sm", align: "center", children: [
+      children: /* @__PURE__ */ t(u, { gap: 8, align: "center", children: [
         i?.filter((o) => !a.includes(o.id))?.map((o) => {
-          const s = !!m(
+          const l = !!m(
             { path: o.path, end: !1 },
             window.location.pathname
           );
@@ -27,7 +27,7 @@ const y = () => {
             {
               title: o.name,
               icon: o.icon(),
-              active: s,
+              active: l,
               onClick: o.onClick
             },
             o.id

package/dist/components/AppContainer/components/AppsSidebar/UserSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppContainer/components/AppsSidebar/UserSection.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,WAAW,GAAI,+BAGzB;IACD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,4CA2EA,CAAC"}
+{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppContainer/components/AppsSidebar/UserSection.tsx"],"names":[],"mappings":"AAsBA,eAAO,MAAM,WAAW,GAAI,+BAGzB;IACD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,4CA0FA,CAAC"}

package/dist/components/AppContainer/components/AppsSidebar/UserSection.js

@@ -1,21 +1,22 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { useTranslation as g } from "react-i18next";
-import { Link as u } from "react-router-dom";
-import { Delete03Icon as w, UserAdd02Icon as I, HelpCircleIcon as b } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as t } from "@hugeicons/react";
-import { Stack as s, Menu as e, Tooltip as x, ActionIcon as T } from "@mantine/core";
-import { IconUserCircle as z } from "@tabler/icons-react";
-import { useAppContainerDataStore as A } from "../../hooks/useAppContainerDataStore.js";
-import { AppSidebarButton as p } from "../AppSidebarButton.js";
-import { HelpMenu as D } from "../menus/HelpMenu/HelpMenu.js";
-import { MenuUserDropdown as M } from "../menus/UserMenu/MenuUserDropdown.js";
-const q = ({
-  trashMenu: h,
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { useTranslation as w } from "react-i18next";
+import { Link as I } from "react-router-dom";
+import { Delete03Icon as S, UserAdd02Icon as b, HelpCircleIcon as x } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as s } from "@hugeicons/react";
+import { Stack as p, Menu as e, Tooltip as z, ActionIcon as A } from "@mantine/core";
+import { IconUserCircle as C } from "@tabler/icons-react";
+import { useTrashModalStore as D, openTrashModal as U, closeTrashModal as j } from "../../../../store/trashModal.js";
+import { useAppContainerDataStore as m } from "../../hooks/useAppContainerDataStore.js";
+import { AppSidebarButton as l } from "../AppSidebarButton.js";
+import { HelpMenu as v } from "../menus/HelpMenu/HelpMenu.js";
+import { MenuUserDropdown as y } from "../menus/UserMenu/MenuUserDropdown.js";
+const P = ({
+  trashMenu: f,
   onInviteClick: c
 }) => {
-  const { t: r } = g("appContainer"), { user: l, isAnonym: n, userMenuItems: a, publicMode: f } = A(), d = !n && !f && l.role !== "mG", m = !n && c;
-  return /* @__PURE__ */ i(
-    s,
+  const { t: n } = w("appContainer"), { user: a, isAnonym: t, userMenuItems: g, publicMode: u } = m(), M = D((i) => i.opened), d = !t && !u && a.role !== "mG", T = m((i) => i.isSaas), h = !t && T && c;
+  return /* @__PURE__ */ r(
+    p,
     {
       style: { borderTop: "1px solid var(--app-shell-border)" },
       flex: 1,
@@ -23,51 +24,63 @@ const q = ({
       gap: 16,
       align: "center",
       children: [
-        /* @__PURE__ */ i(
-          s,
+        /* @__PURE__ */ r(
+          p,
           {
-            justify: !d && !m ? "end" : "space-between",
+            justify: !d && !h ? "end" : "space-between",
             gap: 8,
             flex: 1,
             children: [
-              d && /* @__PURE__ */ i(e, { position: "right", offset: 6, width: 360, children: [
-                /* @__PURE__ */ o(e.Target, { children: /* @__PURE__ */ o(
-                  p,
+              d && /* @__PURE__ */ r(
+                e,
+                {
+                  position: "right",
+                  offset: 6,
+                  width: 360,
+                  opened: M,
+                  onChange: (i) => {
+                    i ? U() : j();
+                  },
+                  children: [
+                    /* @__PURE__ */ o(e.Target, { children: /* @__PURE__ */ o(
+                      l,
+                      {
+                        title: n("trash"),
+                        icon: /* @__PURE__ */ o(s, { icon: S, size: 20 })
+                      }
+                    ) }),
+                    /* @__PURE__ */ o(e.Dropdown, { children: f })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(p, { gap: 8, children: [
+                h && /* @__PURE__ */ o(
+                  l,
                   {
-                    title: r("trash"),
-                    icon: /* @__PURE__ */ o(t, { icon: w, size: 20 })
-                  }
-                ) }),
-                /* @__PURE__ */ o(e.Dropdown, { children: h })
-              ] }),
-              /* @__PURE__ */ i(s, { gap: 8, children: [
-                m && /* @__PURE__ */ o(
-                  p,
-                  {
-                    title: r("invite"),
-                    icon: /* @__PURE__ */ o(t, { icon: I, size: 20 }),
+                    title: n("invite"),
+                    icon: /* @__PURE__ */ o(s, { icon: b, size: 20 }),
                     onClick: c
                   }
                 ),
-                /* @__PURE__ */ i(e, { position: "right-end", offset: 6, width: 260, children: [
+                /* @__PURE__ */ r(e, { position: "right-end", offset: 6, width: 260, children: [
                   /* @__PURE__ */ o(e.Target, { children: /* @__PURE__ */ o(
-                    p,
+                    l,
                     {
-                      title: r("help"),
-                      icon: /* @__PURE__ */ o(t, { icon: b, size: 20 })
+                      title: n("help"),
+                      icon: /* @__PURE__ */ o(s, { icon: x, size: 20 })
                     }
                   ) }),
-                  /* @__PURE__ */ o(e.Dropdown, { children: /* @__PURE__ */ o(D, {}) })
+                  /* @__PURE__ */ o(e.Dropdown, { children: /* @__PURE__ */ o(v, {}) })
                 ] })
               ] })
             ]
           }
         ),
-        n ? /* @__PURE__ */ o(u, { to: "/login", children: /* @__PURE__ */ o(x, { label: "Log in", position: "right", children: /* @__PURE__ */ o(T, { size: "lg", variant: "light", children: /* @__PURE__ */ o(z, { size: 20 }) }) }) }) : /* @__PURE__ */ o(
-          M,
+        t ? /* @__PURE__ */ o(I, { to: "/login", children: /* @__PURE__ */ o(z, { label: "Log in", position: "right", children: /* @__PURE__ */ o(A, { size: "lg", variant: "light", children: /* @__PURE__ */ o(C, { size: 20 }) }) }) }) : /* @__PURE__ */ o(
+          y,
           {
-            user: l,
-            menuItems: a,
+            user: a,
+            menuItems: g,
             position: "right-end"
           }
         )
@@ -76,5 +89,5 @@ const q = ({
   );
 };
 export {
-  q as UserSection
+  P as UserSection
 };

package/dist/components/AppContainer/components/Main.d.ts

@@ -1,3 +1,7 @@
 import { PropsWithChildren } from 'react';
-export declare const Main: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+type MainProps = PropsWithChildren<{
+    withBg?: boolean;
+}>;
+export declare const Main: ({ children, withBg }: MainProps) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=Main.d.ts.map

package/dist/components/AppContainer/components/Main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../../src/components/AppContainer/components/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM1C,eAAO,MAAM,IAAI,GAAI,cAAc,iBAAiB,4CAYnD,CAAC"}
+{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../../src/components/AppContainer/components/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM1C,KAAK,SAAS,GAAG,iBAAiB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,IAAI,GAAI,sBAA8B,SAAS,4CAiB3D,CAAC"}

package/dist/components/AppContainer/components/Main.js

@@ -1,14 +1,17 @@
-import { jsx as t } from "react/jsx-runtime";
-import { appContainerStore as e } from "../hooks/useAppContainerStore.js";
-import n from "../AppContainer.module.css.js";
-const p = ({ children: o }) => {
-  const r = e.useStore((a) => a.showToolbar);
-  return /* @__PURE__ */ t(
+import { jsx as e } from "react/jsx-runtime";
+import { appContainerStore as n } from "../hooks/useAppContainerStore.js";
+import s from "../AppContainer.module.css.js";
+const p = ({ children: o, withBg: r = !1 }) => {
+  const a = n.useStore((t) => t.showToolbar);
+  return /* @__PURE__ */ e(
     "main",
     {
-      className: n.main,
-      "data-tool-sidebar-opened": r,
+      className: s.main,
+      "data-tool-sidebar-opened": a,
       "data-app-container": !0,
+      style: {
+        backgroundColor: r ? "light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))" : "unset"
+      },
       children: o
     }
   );

package/dist/components/AppContainer/components/menus/HelpMenu/HelpMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/AppContainer/components/menus/HelpMenu/HelpMenu.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,QAAQ,+CA2GpB,CAAC"}
+{"version":3,"file":"HelpMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/AppContainer/components/menus/HelpMenu/HelpMenu.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,QAAQ,+CAuHpB,CAAC"}