@ikas/core 1.0.5 → 1.0.8

package/dist/index44.js

@@ -1,122 +1,398 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as O, useState as $, useRef as G, useEffect as V, useCallback as X } from "react";
-import { Button as q, Tooltip as H } from "@ikas/ui";
-import { cn as J } from "./index3.js";
-import { coreTranslations as A } from "./index5.js";
-import K from "./index96.js";
-import M from "./index97.js";
-const Q = 2e3, W = 6, Z = (t) => navigator.clipboard ? navigator.clipboard.writeText(t).then(() => !0).catch(() => B(t)) : Promise.resolve(B(t)), B = (t) => {
-  const e = document.createElement("textarea");
-  e.value = t, e.style.position = "fixed", e.style.left = "-9999px", e.style.top = "-9999px", document.body.appendChild(e), e.focus(), e.select();
-  try {
-    const o = document.execCommand("copy");
-    return document.body.removeChild(e), o;
-  } catch {
-    return document.body.removeChild(e), !1;
+var I = Object.defineProperty;
+var L = (f, e, t) => e in f ? I(f, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : f[e] = t;
+var o = (f, e, t) => L(f, typeof e != "symbol" ? e + "" : e, t);
+import { jsxs as E, Fragment as j, jsx as T } from "react/jsx-runtime";
+/* empty css         */
+import O from "react";
+import { observer as R } from "mobx-react";
+import { makeObservable as P, action as x, observable as y, computed as S } from "mobx";
+import w from "lodash/debounce";
+import { Modal as k } from "@ikas/ui";
+import { StyledEditor as D } from "./index104.js";
+import V from "jquery";
+import "./index105.js";
+import "./index106.js";
+import "./index107.js";
+import z from "./index108.js";
+import F from "./index109.js";
+import N from "./index110.js";
+import { coreTranslations as C } from "./index5.js";
+var H = Object.defineProperty, B = Object.getOwnPropertyDescriptor, r = (f, e, t, s) => {
+  for (var l = s > 1 ? void 0 : s ? B(e, t) : e, d = f.length - 1, c; d >= 0; d--)
+    (c = f[d]) && (l = (s ? c(e, t, l) : c(l)) || l);
+  return s && l && H(e, t, l), l;
+};
+window.jQuery = V;
+window.$ = V;
+let i = class extends O.Component {
+  constructor(e) {
+    super(e);
+    o(this, "isImageModalVisible", !1);
+    o(this, "isVideoModalVisible", !1);
+    o(this, "isLinkModalVisible", !1);
+    o(this, "isTyping", !1);
+    o(this, "summernoteObj");
+    o(this, "modalRef");
+    o(this, "isFirstMount", !0);
+    o(this, "isPasted", !1);
+    o(this, "insertedImageSrc", null);
+    o(this, "isCopyModalVisible", !1);
+    o(this, "copiedTextForModal", "");
+    o(this, "isInitialized", !1);
+    o(this, "notRemovableStyleKeys", [
+      "background-color",
+      "color",
+      "font-weight",
+      "font-size",
+      "text-decoration-line",
+      'font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
+    ]);
+    o(this, "searchDebouncer", w((e) => {
+      this.onChange(e);
+    }, 1e3));
+    o(this, "addTemplateVariable", (e) => {
+      this.props.value.length && (this.summernoteObj.summernote("editor.saveRange"), this.summernoteObj.summernote("editor.restoreRange")), this.summernoteObj.summernote("editor.focus");
+      const t = document.createElement("span");
+      t.innerHTML = e.value, t.classList.add("template-wrapper"), t.setAttribute("contenteditable", "false"), t.setAttribute("data-label", e.label), t.setAttribute("style", "display: inline-block;"), this.summernoteObj.summernote("editor.insertNode", t), this.summernoteObj.summernote("editor.pasteHTML", "‌");
+    });
+    o(this, "onImageModalOpen", () => {
+      this.isImageModalVisible = !0;
+    });
+    o(this, "onImageModalClose", () => {
+      this.isImageModalVisible = !1;
+    });
+    o(this, "onVideoModalOpen", () => {
+      this.isVideoModalVisible = !0;
+    });
+    o(this, "onVideoModalClose", () => {
+      this.isVideoModalVisible = !1;
+    });
+    o(this, "onLinkModalOpen", () => {
+      this.isLinkModalVisible = !0;
+    });
+    o(this, "onLinkModalClose", () => {
+      this.isLinkModalVisible = !1;
+    });
+    this.modalRef = O.createRef(), P(this);
   }
-}, D = (t, e, o, i) => {
-  const n = t ? e : !e, l = {
-    gap: `${o}px`,
-    opacity: n ? 1 : 0
-  };
-  return i === "blur" ? {
-    ...l,
-    transition: "filter 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease",
-    pointerEvents: "none",
-    filter: n ? "blur(0px)" : "blur(6px)",
-    transform: n ? "scale(1)" : "scale(0.05)"
-  } : {
-    ...l,
-    transition: "transform 0.3s ease, opacity 0.2s ease",
-    transform: n ? "translateY(0)" : t ? "translateY(100%)" : "translateY(-100%)"
-  };
-}, ee = O((t, e) => {
-  const {
-    textToCopy: o,
-    icon: i,
-    copiedText: n,
-    copiedIcon: l,
-    onCopied: a,
-    onClick: c,
-    children: p,
-    copiedDuration: y = Q,
-    gap: u = W,
-    showTooltip: x = !1,
-    initText: P,
-    tooltipPlacement: S,
-    iconColor: b,
-    size: C,
-    animationVariant: T = "slide",
-    className: j,
-    ...k
-  } = t, d = C === "xxs", z = d ? "small" : C, [s, h] = $(!1), m = G();
-  V(() => () => {
-    m.current && clearTimeout(m.current);
-  }, []);
-  const R = X(
-    (F) => {
-      s || (c == null || c(F), Z(o || "").then((L) => {
-        L && (h(!0), a == null || a(), m.current = setTimeout(() => {
-          h(!1);
-        }, y));
-      }));
-    },
-    [o, c, a, s, y]
-  ), v = b ? { color: `var(--${b})` } : void 0, I = i !== null, U = I ? i ?? /* @__PURE__ */ r(K, { style: v }) : null, Y = I ? l ?? /* @__PURE__ */ r(M, { style: v }) : null, N = n ?? A.copyToClipboardButton.copiedText, _ = P ?? A.copyToClipboardButton.tooltipInitText, w = p != null && p !== "", E = x && w, g = /* @__PURE__ */ r(
-    q,
-    {
-      ref: e,
-      gap: u,
-      size: z,
-      padding: d ? "4px" : void 0,
-      className: J(
-        // Orijinal XxsButtonWrapper spec'i: 4px padding, auto boyut, 6px radius
-        d && "h-auto w-auto min-w-0 rounded-md",
-        j
-      ),
-      ...k,
-      onClick: R,
-      children: /* @__PURE__ */ f("span", { className: "relative inline-flex h-4 items-center justify-center overflow-hidden", children: [
-        /* @__PURE__ */ f(
-          "span",
-          {
-            className: "inline-flex items-center",
-            style: D(
-              !1,
-              E ? !1 : s,
-              u,
-              T
-            ),
-            children: [
-              U,
-              p
-            ]
+  async componentDidMount() {
+    window.addEventListener("paste", this.handlePaste), await import("./index102.js").then((e) => e.b), this.isInitialized = !0;
+  }
+  async onInit(e) {
+    this.summernoteObj = e;
+    try {
+      const t = document.createElement("div");
+      t.innerHTML = this.props.value, this.summernoteObj.noteEditable[0].innerHTML = t.innerHTML, (this.props.disabled || this.props.previewMode) && this.summernoteObj.disable();
+    } catch (t) {
+      console.log("rich text error", t);
+    }
+    this.props.onInitialize && setTimeout(() => {
+      var t, s;
+      (s = (t = this.props) == null ? void 0 : t.onInitialize) == null || s.call(t);
+    }, 0);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("paste", this.handlePaste);
+  }
+  handlePaste(e) {
+    this.isPasted = !0;
+  }
+  onChange(e) {
+    var s, l, d, c;
+    if (this.props.disabled || this.props.previewMode)
+      return;
+    if (this.summernoteObj.summernote("isEmpty")) {
+      this.props.onChange(""), this.isTyping = !1, (l = (s = this.props).onTypingStatusChange) == null || l.call(s, !1);
+      return;
+    }
+    try {
+      const b = '<table class="table table-bordered">';
+      if (e.includes(b)) {
+        const n = e.replaceAll(b, '<table style="display: table; border-collapse: collapse; border-spacing: 2px; width: 100%; margin-bottom: 1rem; color: #212529; border: 1px solid #dee2e6" >').replaceAll(
+          "<td>",
+          '<td style="border: 1px solid #dee2e6; padding: 0.75rem; vertical-align: top;">'
+        );
+        this.props.onChange(n);
+      } else {
+        let h = e;
+        if (h.includes("<iframe") || h.includes("<img")) {
+          const p = document.createElement("div");
+          p.innerHTML = e;
+          const m = p.getElementsByTagName("iframe");
+          for (let a = 0; a < m.length; a++) {
+            const n = m[a];
+            n.className.includes("note-video-clip") && (n.style.maxWidth = "100% !important", n.width = "100%");
+          }
+          if (this.insertedImageSrc) {
+            const a = p.getElementsByTagName("img");
+            if (a && a.length)
+              for (let n = 0; n < a.length; n++) {
+                const u = a[n];
+                u.src === this.insertedImageSrc && (u.style.maxWidth = "100% !important", this.insertedImageSrc = null);
+              }
           }
-        ),
-        !E && /* @__PURE__ */ f(
-          "span",
-          {
-            className: "absolute inset-0 inline-flex items-center justify-center",
-            style: D(!0, s, u, T),
-            children: [
-              Y,
-              w ? N : null
-            ]
+          h = p.innerHTML;
+        }
+        if (this.isPasted) {
+          const p = document.createElement("div");
+          p.innerHTML = h;
+          const m = p.getElementsByTagName("*");
+          let a = !1;
+          for (let n = 0; n < m.length; n++) {
+            const u = m[n].getAttribute("style"), g = u == null ? void 0 : u.split(";").filter((M) => !!M);
+            if (u && (g != null && g.length) && g.find(
+              (M) => !this.notRemovableStyleKeys.some(
+                (v) => M.includes(v)
+              )
+            )) {
+              a = !0;
+              break;
+            }
           }
-        )
-      ] })
+          a ? (this.copiedTextForModal = e, this.isCopyModalVisible = !0) : this.props.onChange(h);
+        } else {
+          const p = document.createElement("div");
+          p.innerHTML = h;
+          const m = p.getElementsByTagName("*");
+          for (let a = 0; a < m.length; a++) {
+            const n = m[a].getAttribute("style");
+            if (n && !this.notRemovableStyleKeys.some((u) => n.includes(u)))
+              m[a].removeAttribute("style");
+            else if (n && this.notRemovableStyleKeys.some((u) => n.includes(u))) {
+              const M = n.split(";").filter((v) => !!v).filter(
+                (v) => this.notRemovableStyleKeys.some((A) => v.includes(A))
+              ).join(";");
+              m[a].setAttribute("style", M);
+            }
+          }
+          this.props.onChange(h);
+        }
+      }
+    } catch (b) {
+      console.log("rich text onchange error", b);
     }
-  );
-  return x ? /* @__PURE__ */ r(
-    H,
-    {
-      title: s ? N : _,
-      placement: S,
-      children: /* @__PURE__ */ r("span", { className: "inline-flex", children: g })
+    this.isTyping = !1, (c = (d = this.props).onTypingStatusChange) == null || c.call(d, this.isTyping);
+  }
+  onCopyModalClose() {
+    const e = document.createElement("div");
+    e.innerHTML = this.copiedTextForModal;
+    const t = e.getElementsByTagName("*");
+    for (let s = 0; s < t.length; s++) {
+      const l = t[s].getAttribute("style");
+      if (l && !this.notRemovableStyleKeys.some((d) => l.includes(d)))
+        t[s].removeAttribute("style");
+      else if (l && this.notRemovableStyleKeys.some((d) => l.includes(d))) {
+        const b = l.split(";").filter(
+          (h) => this.notRemovableStyleKeys.some((p) => h.includes(p))
+        ).join(";");
+        t[s].setAttribute("style", b);
+      }
     }
-  ) : g;
-});
-ee.displayName = "CopyToClipboardButton";
+    this.copiedTextForModal = e.innerHTML, this.props.onChange(this.copiedTextForModal, !0), this.isPasted = !1, this.copiedTextForModal = "", this.isCopyModalVisible = !1;
+  }
+  onCopyModalOk() {
+    this.props.onChange(this.copiedTextForModal, !0), this.isPasted = !1, this.copiedTextForModal = "", this.isCopyModalVisible = !1;
+  }
+  get lang() {
+    const { locale: e } = this.props;
+    switch (e) {
+      case "tr":
+        return "tr-TR";
+      case "en":
+        return "en-EN";
+      case "de":
+        return "de-DE";
+      case "fr":
+        return "fr-FR";
+    }
+    return "tr-TR";
+  }
+  get aiPopover() {
+    var e;
+    return (e = this.props.aiPopoverProps) == null ? void 0 : e.popover;
+  }
+  get toolbarOptions() {
+    var t;
+    const e = [];
+    return (t = this.props.aiPopoverProps) != null && t.id && e.push(["aiButton", ["aiButton"]]), e.push(["style", ["style"]]), e.push(["font", ["bold", "italic", "underline", "clear"]]), e.push(["color", ["color", "#ffffff"]]), e.push(["para", ["ul", "ol", "paragraph"]]), e.push(["table", ["table"]]), e.push(["insert", ["link", "picture", "video"]]), e.push(["view", ["codeview", "fullscreen"]]), e;
+  }
+  render() {
+    var s, l;
+    const { toolbar: e, saveImage: t } = this.props;
+    return this.isInitialized ? /* @__PURE__ */ E(j, { children: [
+      /* @__PURE__ */ T(
+        D,
+        {
+          className: "local-bootstrap",
+          value: this.props.value,
+          $toolbarOffsetTop: this.props.toolbarOffsetTop || "0px",
+          $isResizeDisabled: !!this.props.disableResize,
+          $isPreviewMode: !!this.props.previewMode,
+          options: {
+            codemirror: {
+              mode: "text/html",
+              htmlMode: !0,
+              lineNumbers: !0
+            },
+            codeviewFilter: !1,
+            openLinkModal: this.onLinkModalOpen,
+            openImageModal: this.onImageModalOpen,
+            openVideoModal: this.onVideoModalOpen,
+            lang: this.lang,
+            height: 350,
+            dialogsInBody: !1,
+            disableResizeEditor: !!this.props.disableResize,
+            toolbar: e || this.toolbarOptions,
+            insertTableMaxSize: {
+              row: ((s = this.props.insertTableMaxSize) == null ? void 0 : s.row) || 10,
+              col: ((l = this.props.insertTableMaxSize) == null ? void 0 : l.col) || 10
+            },
+            buttons: {
+              aiButton: (d) => {
+                var h, p;
+                const c = $.summernote.ui;
+                return $(
+                  c.button({
+                    contents: `<span style="display: flex; align-items: center; justify-content: center; gap: 6px; color: #000;font-size: 14px;font-style: normal;font-weight: 400;line-height: 20px;" id="${(h = this.props.aiPopoverProps) == null ? void 0 : h.id}" class="ai-toolbar-btn">${((p = this.props.aiPopoverProps) == null ? void 0 : p.buttonText) || C.richText.aiButtonText}</span>`,
+                    click: () => {
+                      var m;
+                      this.summernoteObj.summernote("editor.saveRange"), (m = this.props.aiPopoverProps) == null || m.onAiButtonClick(
+                        this.summernoteObj
+                      );
+                    }
+                  }).render()
+                );
+              }
+            },
+            imageAttributesIcon: '<i class="note-icon-pencil"/>',
+            imageAttributesRemoveEmpty: !1,
+            imageAttributesDisableUpload: !1,
+            imageAttributesDisableLink: !1,
+            imageAttributesDisableLinkUrl: !1,
+            imageAttributesDisableLinkTarget: !0,
+            imageAttributesDisableLinkClass: !0,
+            imageAttributesDisableLinkStyle: !0,
+            imageAttributesDisableLinkRel: !0,
+            imageAttributesDisableLinkRole: !0,
+            popover: {
+              image: [
+                [
+                  "image",
+                  ["resizeFull", "resizeHalf", "resizeQuarter", "resizeNone"]
+                ],
+                ["float", ["floatLeft", "floatRight", "floatNone"]],
+                ["remove", ["removeMedia"]],
+                ["custom", ["imageAttributes"]]
+              ]
+            },
+            disableDragAndDrop: !0
+          },
+          onChange: (d) => {
+            var c, b;
+            this.isTyping = !0, (b = (c = this.props).onTypingStatusChange) == null || b.call(c, this.isTyping), this.searchDebouncer(d);
+          },
+          onInit: this.onInit
+        }
+      ),
+      this.aiPopover,
+      /* @__PURE__ */ T(
+        k,
+        {
+          title: C.richText.pasteWarningModalTitle,
+          open: this.isCopyModalVisible,
+          cancelText: C.common.field.no,
+          okText: C.common.field.yes,
+          onCancel: this.onCopyModalClose,
+          onOk: this.onCopyModalOk,
+          children: C.richText.pasteWarningText
+        }
+      ),
+      t && /* @__PURE__ */ T(
+        z,
+        {
+          open: this.isImageModalVisible,
+          onImageUpload: t,
+          onClose: this.onImageModalClose,
+          summernoteObj: this.summernoteObj
+        }
+      ),
+      /* @__PURE__ */ T(
+        F,
+        {
+          open: this.isVideoModalVisible,
+          onClose: this.onVideoModalClose,
+          summernoteObj: this.summernoteObj
+        }
+      ),
+      /* @__PURE__ */ T(
+        N,
+        {
+          open: this.isLinkModalVisible,
+          onClose: this.onLinkModalClose,
+          summernoteObj: this.summernoteObj
+        }
+      )
+    ] }) : null;
+  }
+};
+r([
+  y
+], i.prototype, "isImageModalVisible", 2);
+r([
+  y
+], i.prototype, "isVideoModalVisible", 2);
+r([
+  y
+], i.prototype, "isLinkModalVisible", 2);
+r([
+  y
+], i.prototype, "isTyping", 2);
+r([
+  y
+], i.prototype, "isFirstMount", 2);
+r([
+  y
+], i.prototype, "isPasted", 2);
+r([
+  y
+], i.prototype, "insertedImageSrc", 2);
+r([
+  y
+], i.prototype, "isCopyModalVisible", 2);
+r([
+  y
+], i.prototype, "copiedTextForModal", 2);
+r([
+  y
+], i.prototype, "isInitialized", 2);
+r([
+  x.bound
+], i.prototype, "onInit", 1);
+r([
+  x.bound
+], i.prototype, "handlePaste", 1);
+r([
+  x.bound
+], i.prototype, "onChange", 1);
+r([
+  x.bound
+], i.prototype, "onCopyModalClose", 1);
+r([
+  x.bound
+], i.prototype, "onCopyModalOk", 1);
+r([
+  S
+], i.prototype, "lang", 1);
+r([
+  S
+], i.prototype, "aiPopover", 1);
+r([
+  S
+], i.prototype, "toolbarOptions", 1);
+i = r([
+  R
+], i);
+const ne = i;
 export {
-  ee as CopyToClipboardButton
+  ne as default
 };

package/dist/index45.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function f(r){var o,n,t="";if(typeof r=="string"||typeof r=="number")t+=r;else if(typeof r=="object")if(Array.isArray(r)){var e=r.length;for(o=0;o<e;o++)r[o]&&(n=f(r[o]))&&(t&&(t+=" "),t+=n)}else for(n in r)r[n]&&(t&&(t+=" "),t+=n);return t}function i(){for(var r,o,n=0,t="",e=arguments.length;n<e;n++)(r=arguments[n])&&(o=f(r))&&(t&&(t+=" "),t+=o);return t}exports.clsx=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),L=require("mobx-react-lite"),c=require("@ikas/ui"),u=require("./index3.cjs"),T=require("./index111.cjs"),U=require("./index112.cjs"),p=require("./index113.cjs"),B=require("./index114.cjs"),K=require("./index115.cjs"),O=require("./index116.cjs"),y=L.observer(function(o){var f,M,v;const{sidebarViewModel:n,onNavigate:i,clearExpandedMenu:r,extraTopContent:g,expandedMenuTopContent:x,extraFooterContent:h,logoRightSideContent:I,logo:N,collapsedLogo:k,onLogoSectionClick:S,className:j,style:m,theme:s="dark",verticalOffset:d,expandedMenuItem:C}=o,e=T.useNavigation({sidebarViewModel:n,onNavigate:i}),E=t=>{n.setSidebarCollapsed(t)},b=r??e.clearExpandedMenu,w=!!!r&&e.isSelectedExpandedMenuVisible;return a.jsx(c.SidebarProvider,{open:!n.sidebarCollapsed,onOpenChange:t=>n.setSidebarCollapsed(!t),children:a.jsxs(c.Sidebar,{collapsible:"icon",side:"left",className:u.cn(s==="dark"&&"dark border-r-0 shadow-[0px_2px_8px_rgba(0,0,0,0.15)]",j),style:{top:d,height:d?`calc(100dvh - ${d}px)`:"100dvh",...m},children:[a.jsxs("div",{className:u.cn("flex h-full min-h-0 w-full flex-col transition-transform duration-300",w?"-translate-x-full":"translate-x-0"),children:[a.jsx(U.NavigationHeader,{theme:s,isExpandedMenu:n.isExpandedMenu,menuItems:n.menuItems,logoRightSideContent:I,logo:N,collapsedLogo:k,onLogoSectionClick:S,clearExpandedMenu:b,expandedMenuItem:C,getSalesChannelIconBackgroundColor:e.getSalesChannelIconBackgroundColor,onCollapse:E,salesChannelMenuUUID:(f=n.salesChannelMenu)==null?void 0:f.uuid,setSalesChannelOpenKey:e.setSalesChannelOpenKey}),n.isExpandedMenu&&x&&a.jsx("div",{className:"bg-sidebar text-sidebar-foreground",children:x}),a.jsxs(c.SidebarContent,{className:s==="light"?"sidebar-light-scrollbar":"sidebar-scrollbar",children:[g&&a.jsx("div",{className:"text-sidebar-foreground",children:g}),a.jsx(c.SidebarGroup,{className:n.isExpandedMenu?"mt-4":void 0,children:a.jsx(p.NavigationMenu,{items:n.isExpandedMenu?((M=n.menuItems[0])==null?void 0:M.childItems)??[]:n.menuItems.filter(t=>!t.hideInSidebarUntilMenuExpanded),selectedUUIDList:e.selectedUUIDList,openKeys:e.openKeys,onOpenKeysChange:e.onOpenKeysChange,onItemClick:e.onItemClick,onLeafClick:e.onLeafClick,isExpandedMenu:n.isExpandedMenu,showTypographyText:e.showTypographyText,getSalesChannelIconBackgroundColor:e.getSalesChannelIconBackgroundColor,theme:s})}),n.salesChannelMenu&&a.jsx(K.SalesChannelMenu,{salesChannelMenu:n.salesChannelMenu,selectedUUIDList:[],openKeys:e.salesChannelOpenKey,onOpenKeysChange:e.setSalesChannelOpenKey,onItemClick:e.onItemClick,onLeafClick:e.onLeafClick,showTypographyText:e.showTypographyText,getSalesChannelIconBackgroundColor:e.getSalesChannelIconBackgroundColor,theme:s})]}),!!((v=n.bottomMenuItems)!=null&&v.length)&&a.jsx("div",{className:"flex h-20 shrink-0 flex-col justify-center bg-sidebar pl-4 group-data-[collapsible=icon]:pl-4.5",children:a.jsx(p.NavigationMenu,{items:n.bottomMenuItems,selectedUUIDList:e.selectedUUIDList,openKeys:e.openKeys,onOpenKeysChange:e.onOpenKeysChange,onItemClick:e.onItemClick,onLeafClick:e.onLeafClick,showTypographyText:e.showTypographyText,getSalesChannelIconBackgroundColor:e.getSalesChannelIconBackgroundColor,theme:s})}),h&&a.jsx("div",{className:"text-sidebar-foreground bg-sidebar",children:h}),a.jsx(B.NavigationFooter,{footerMenu:n.footerMenu,footerTopMenu:n.footerTopMenu,showAvatarBorder:e.showAvatarBorder,setShowAvatarBorder:e.setShowAvatarBorder,selectedUUIDList:e.selectedUUIDList,onItemClick:e.onItemClick,onLeafClick:e.onLeafClick,theme:s,isExpandedFooterVisible:e.isExpandedFooterVisible,clearExpandedMenu:b})]}),n.sidebarModal,a.jsx(O.ExpandedOverlay,{isVisible:e.isSelectedExpandedMenuVisible,sidebarModel:e.salesChannelsSidebarModel,sidebarViewModel:n,onNavigate:i,clearExpandedMenu:e.clearExpandedMenu,theme:s,style:m,verticalOffset:d,expandedMenuItem:C,selectedExpandedMenu:e.selectedExpandedMenu,menuItems:n.menuItems,expandedMenuTopContent:x,NavigationComponent:y})]})})});function q({title:l,description:o,isNew:n,onClick:i,className:r}){return a.jsxs("button",{onClick:i,className:u.cn("flex h-full w-full select-none flex-col rounded-md bg-gray-blue-1 px-4 py-3 text-left transition-colors duration-300 hover:bg-purple-1",n&&"border border-purple",r),children:[a.jsxs("div",{className:"flex w-full items-center justify-between",children:[a.jsxs("div",{className:"flex min-w-0 items-center",children:[a.jsx("span",{className:"mr-2 h-1.5 w-1.5 shrink-0 rounded-full bg-purple"}),a.jsx("span",{className:"truncate text-base font-medium text-gray-blue-9",children:l})]}),n&&a.jsx(p.NewFeatureTag,{})]}),o&&a.jsx("span",{className:"mt-1 pl-3.5 text-xs leading-5 text-gray-blue-5",children:o})]})}function D({title:l,children:o,className:n}){return a.jsxs("div",{className:u.cn("mx-auto mt-6 flex w-full max-w-[1000px] flex-col gap-3",n),children:[l&&a.jsx("h3",{className:"text-sm font-medium text-gray-blue-9",children:l}),a.jsx("div",{className:"grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3",children:o})]})}exports.Navigation=y;exports.NavigationBox=q;exports.NavigationSection=D;