nogbase-ui 1.0.0

package/dist/navigation.mjs

@@ -0,0 +1,954 @@
+import { j as e } from "./jsx-runtime-R4VT8aVc.js";
+import { styled as c } from "@linaria/react";
+import { T as D, L as O, C as T, b as re, c as oe } from "./Toggle-DFCRkcpJ.js";
+import { T as x } from "./ThemeProvider-CpY05Gd2.js";
+import ae, { useContext as j, useId as le } from "react";
+import { I as ce, a as ie, T as W, b as w, c as B } from "./TintedIconTile-D6h1yGXu.js";
+import { Link as H } from "react-router-dom";
+import { isNonEmptyString as N, isString as z } from "@sniptt/guards";
+import { g as de } from "./getDisplayValueByUrlType-DsRKFto7.js";
+import { A as ue, T as me, b as pe, a as fe } from "./AppTooltip-BGyiynP0.js";
+import { t as l } from "./themeCssVariables-CBmoYPJ3.js";
+import { o as C } from "./utils-BsFkjDy5.js";
+import { motion as he } from "framer-motion";
+import { O as y } from "./OverflowingTextWithTooltip-BY3bdsCV.js";
+import { a as U, C as xe } from "./ColorSample-tgmSZ-F7.js";
+import { T as q } from "./Tag-DOSiXPZl.js";
+const je = /* @__PURE__ */ c("div")({
+  name: "StyledContainer",
+  class: "s11i7kvk",
+  propsAsIs: !1
+}), ye = /* @__PURE__ */ c("div")({
+  name: "StyledText",
+  class: "s10fleot",
+  propsAsIs: !1
+}), ge = /* @__PURE__ */ c("div")({
+  name: "StyledIconContainer",
+  class: "s1uhvzhk",
+  propsAsIs: !1
+}), Ie = /* @__PURE__ */ c("label")({
+  name: "StyledToggleContainer",
+  class: "smtgka1",
+  propsAsIs: !1
+}), Ys = ({
+  isAdvancedModeEnabled: s,
+  setIsAdvancedModeEnabled: n,
+  label: t = "Advanced:"
+}) => {
+  const {
+    theme: r
+  } = j(x), o = (i) => {
+    n(i);
+  }, a = le(), d = r.color.yellow;
+  return /* @__PURE__ */ e.jsxs(je, { children: [
+    /* @__PURE__ */ e.jsx(ge, { children: /* @__PURE__ */ e.jsx(ce, { size: 12, color: d, fill: d }) }),
+    /* @__PURE__ */ e.jsxs(Ie, { htmlFor: a, children: [
+      /* @__PURE__ */ e.jsx(ye, { children: t }),
+      /* @__PURE__ */ e.jsx(D, { id: a, onChange: o, color: d, value: s })
+    ] })
+  ] });
+}, Se = /* @__PURE__ */ c("a")({
+  name: "StyledButtonLink",
+  class: "s1gqcg9z",
+  propsAsIs: !1
+}), ke = (s) => /* @__PURE__ */ e.jsx(Se, { className: s.className, href: s.href, onClick: s.onClick, target: s.target, rel: s.rel, children: s.children }), Ce = () => ({
+  maxWidth: s
+}) => s ?? "100%", ve = /* @__PURE__ */ c("a")({
+  name: "StyledClickableLink",
+  class: "s1dd08x",
+  propsAsIs: !1,
+  vars: {
+    "s1dd08x-0": [Ce()]
+  }
+}), Qs = ({
+  href: s,
+  children: n,
+  onClick: t,
+  maxWidth: r
+}) => /* @__PURE__ */ e.jsx(ve, { maxWidth: r, target: "_blank", onClick: t, href: s, children: n }), be = "https://github.com/nogbasehq/nogbase", Xs = ({ version: s }) => {
+  const { theme: n } = j(x);
+  return /* @__PURE__ */ e.jsxs(ke, { href: be, target: "_blank", rel: "noreferrer", children: [
+    /* @__PURE__ */ e.jsx(ie, { size: n.icon.size.md }),
+    s
+  ] });
+}, Ae = /* @__PURE__ */ c("div")({
+  name: "StyledClickable",
+  class: "s1n3wksf",
+  propsAsIs: !1
+}), Zs = ({
+  className: s,
+  href: n,
+  children: t,
+  onClick: r
+}) => /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(Ae, { className: s, children: /* @__PURE__ */ e.jsx(H, { target: "_blank", onClick: r, to: n, children: t }) }) }), ze = /* @__PURE__ */ c("a")({
+  name: "StyledLink",
+  class: "srl6h1l",
+  propsAsIs: !1
+}), Me = ({
+  label: s,
+  href: n,
+  onClick: t,
+  className: r
+}) => {
+  if (!N(s))
+    return /* @__PURE__ */ e.jsx(e.Fragment, {});
+  const o = (a) => {
+    a.stopPropagation(), t?.(a);
+  };
+  return /* @__PURE__ */ e.jsx(ze, { href: n, target: "_blank", rel: "noreferrer", onClick: o, className: r, children: s });
+};
+var Le = /* @__PURE__ */ ((s) => (s.Url = "url", s.LinkedIn = "linkedin", s.Twitter = "twitter", s.Facebook = "facebook", s))(Le || {});
+const en = ({ label: s, href: n, onClick: t, type: r }) => {
+  const o = de({ type: r, href: n }) ?? s;
+  return /* @__PURE__ */ e.jsx(Me, { href: n, onClick: t, label: o });
+}, _e = "u1kcr0e1", sn = ({
+  children: s,
+  to: n,
+  replace: t = !1,
+  onClick: r,
+  fullWidth: o = !1
+}) => /* @__PURE__ */ e.jsx(H, { to: n, replace: t, onClick: r, className: _e, style: o ? {
+  width: "100%"
+} : void 0, children: s }), nn = "https://cal.com/team/nogbase/talk-to-us", tn = "https://nogbase.com/pricing", we = () => ({
+  disabled: s
+}) => s ? l.background.secondary : "transparent", Te = () => ({
+  selected: s,
+  disabled: n
+}) => n ? l.border.color.medium : s ? l.color.blue : l.border.color.medium, Be = () => ({
+  selected: s,
+  disabled: n
+}) => n ? l.font.color.extraLight : s ? l.color.blue : l.font.color.tertiary, Ne = () => ({
+  disabled: s
+}) => s ? "default" : "pointer", qe = () => ({
+  selected: s,
+  disabled: n
+}) => n ? l.background.secondary : s ? l.background.transparent.primary : l.background.transparent.light, $e = /* @__PURE__ */ c("button")({
+  name: "StyledMenuPicker",
+  class: "s1xnljnm",
+  propsAsIs: !1,
+  vars: {
+    "s1xnljnm-0": [we()],
+    "s1xnljnm-1": [Te()],
+    "s1xnljnm-2": [Be()],
+    "s1xnljnm-3": [Ne()],
+    "s1xnljnm-4": [qe()]
+  }
+}), Re = /* @__PURE__ */ c("div")({
+  name: "StyledIconContainer",
+  class: "s3qfn51",
+  propsAsIs: !1
+}), Ge = () => ({
+  selected: s,
+  disabled: n
+}) => n ? l.font.color.extraLight : s ? l.color.blue : l.font.color.tertiary, Fe = /* @__PURE__ */ c("div")({
+  name: "StyledLabel",
+  class: "s1y6epzy",
+  propsAsIs: !1,
+  vars: {
+    "s1y6epzy-0": [Ge()]
+  }
+}), rn = ({
+  id: s,
+  icon: n,
+  label: t,
+  selected: r = !1,
+  disabled: o = !1,
+  showLabel: a = !0,
+  onClick: d,
+  className: i,
+  testId: m,
+  tooltipContent: u,
+  tooltipDelay: h = me.noDelay,
+  tooltipOffset: p = 5
+}) => {
+  const {
+    theme: f
+  } = j(x);
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs($e, { id: s, selected: r, disabled: o, onClick: d, className: i, "data-testid": m, "aria-pressed": r, "aria-disabled": o, "aria-label": t, children: [
+      /* @__PURE__ */ e.jsx(Re, { children: /* @__PURE__ */ e.jsx(n, { size: f.icon.size.md, stroke: f.icon.stroke.sm }) }),
+      C(t) && a && /* @__PURE__ */ e.jsx(Fe, { selected: r, disabled: o, children: t })
+    ] }),
+    N(u) && /* @__PURE__ */ e.jsx(ue, { anchorSelect: `#${s}`, offset: p, content: u, place: pe.Bottom, positionStrategy: "fixed", delay: h, noArrow: !0 })
+  ] });
+}, Pe = /* @__PURE__ */ c("div")({
+  name: "StyledCommandTextContainer",
+  class: "s33s3ug",
+  propsAsIs: !1
+}), De = /* @__PURE__ */ c("div")({
+  name: "StyledCommandText",
+  class: "suwd2ti",
+  propsAsIs: !1
+}), Oe = /* @__PURE__ */ c("div")({
+  name: "StyledCommandKey",
+  class: "s1quemx3",
+  propsAsIs: !1
+}), We = ({
+  hotKeys: s,
+  joinLabel: n = "then"
+}) => /* @__PURE__ */ e.jsx(De, { children: s && /* @__PURE__ */ e.jsx(Pe, { children: s.map((t, r) => /* @__PURE__ */ e.jsxs(ae.Fragment, { children: [
+  /* @__PURE__ */ e.jsx(Oe, { children: t }),
+  r < s.length - 1 && n
+] }, r)) }) }), He = /* @__PURE__ */ c("div")({
+  name: "StyledIconContainerBase",
+  class: "senmj74",
+  propsAsIs: !1
+}), Ue = /* @__PURE__ */ c("div")({
+  name: "StyledIconContainerWithBackground",
+  class: "syzdrr6",
+  propsAsIs: !1
+}), $ = ({
+  children: s,
+  className: n,
+  hasBackground: t = !0
+}) => {
+  const r = t ? Ue : He;
+  return /* @__PURE__ */ e.jsx(r, { className: n, children: s });
+}, Ee = ({
+  Icon: s,
+  iconThemeColor: n,
+  withContainer: t = !1,
+  withContainerBackground: r = !0
+}) => {
+  const { theme: o } = j(x);
+  if (!s)
+    return null;
+  if (C(n))
+    return /* @__PURE__ */ e.jsx(
+      W,
+      {
+        Icon: s,
+        color: n,
+        size: o.icon.size.md,
+        stroke: o.icon.stroke.sm
+      }
+    );
+  const a = /* @__PURE__ */ e.jsx(s, { size: o.icon.size.md, stroke: o.icon.stroke.sm });
+  return t ? /* @__PURE__ */ e.jsx($, { hasBackground: r, children: a }) : a;
+}, Ve = /* @__PURE__ */ c("div")({
+  name: "StyledIconSwapContainer",
+  class: "s1lbmvf8",
+  propsAsIs: !1
+}), Ke = /* @__PURE__ */ c("div")({
+  name: "StyledDefaultIcon",
+  class: "s1aiwdip",
+  propsAsIs: !1
+}), Je = /* @__PURE__ */ c("div")({
+  name: "StyledHoverIcon",
+  class: "s4uztl6",
+  propsAsIs: !1
+}), Ye = ({
+  LeftIcon: s,
+  iconThemeColor: n,
+  withIconContainer: t = !1,
+  gripIconColor: r
+}) => {
+  const {
+    theme: o
+  } = j(x);
+  if (!s)
+    return null;
+  const a = /* @__PURE__ */ e.jsxs(Ve, { children: [
+    /* @__PURE__ */ e.jsx(Ke, { className: "grip-swap-default-icon", children: C(n) ? /* @__PURE__ */ e.jsx(W, { Icon: s, color: n, size: o.icon.size.md, stroke: o.icon.stroke.sm }) : /* @__PURE__ */ e.jsx(s, { size: o.icon.size.md, stroke: o.icon.stroke.sm }) }),
+    /* @__PURE__ */ e.jsx(Je, { className: "grip-swap-hover-icon", children: /* @__PURE__ */ e.jsx(w, { size: o.icon.size.md, stroke: o.icon.stroke.sm, color: r }) })
+  ] });
+  return t && !C(n) ? /* @__PURE__ */ e.jsx($, { children: a }) : a;
+}, Qe = () => ({
+  isKeySelected: s,
+  focused: n
+}) => s || n ? l.background.transparent.light : "transparent", Xe = () => ({
+  isHoverBackgroundDisabled: s,
+  disabled: n
+}) => n || s ? "none" : "background 0.1s ease", Ze = () => ({
+  accent: s,
+  disabled: n
+}) => {
+  if (n !== void 0 && n !== !1)
+    return l.font.color.tertiary;
+  switch (s) {
+    case "danger":
+      return l.font.color.danger;
+    case "placeholder":
+      return l.font.color.tertiary;
+    default:
+      return l.font.color.secondary;
+  }
+}, es = () => ({
+  accent: s,
+  disabled: n,
+  isHoverBackgroundDisabled: t,
+  isKeySelected: r,
+  focused: o
+}) => n === !0 ? r || o ? l.background.transparent.light : "transparent" : s === "danger" ? l.background.transparent.danger : t === !0 ? "transparent" : l.background.transparent.light, v = /* @__PURE__ */ c("div")({
+  name: "StyledMenuItemBase",
+  class: "scdi7ap",
+  propsAsIs: !1,
+  vars: {
+    "scdi7ap-0": [Qe()],
+    "scdi7ap-1": [Xe()],
+    "scdi7ap-2": [Ze()],
+    "scdi7ap-3": [es()]
+  }
+}), b = /* @__PURE__ */ c("div")({
+  name: "StyledMenuItemLabel",
+  class: "s1tnlat5",
+  propsAsIs: !1
+}), M = /* @__PURE__ */ c("div")({
+  name: "StyledMenuItemLabelLight",
+  class: "s16uoqc2",
+  propsAsIs: !1
+}), on = /* @__PURE__ */ c("div")({
+  name: "StyledNoIconFiller",
+  class: "su9t9ge",
+  propsAsIs: !1
+}), g = /* @__PURE__ */ c("div")({
+  name: "StyledMenuItemLeftContent",
+  class: "sjbi2aq",
+  propsAsIs: !1
+}), R = /* @__PURE__ */ c("div")({
+  name: "StyledMenuItemRightContent",
+  class: "s1jupcn5",
+  propsAsIs: !1
+}), P = /* @__PURE__ */ c("div")({
+  name: "StyledDraggableItem",
+  class: "s1haa213",
+  propsAsIs: !1
+}), ss = () => ({
+  isKeySelected: s,
+  focused: n
+}) => s || n ? l.background.transparent.light : "transparent", ns = () => ({
+  isHoverBackgroundDisabled: s,
+  disabled: n
+}) => n || s ? "none" : "background 0.1s ease", ts = () => ({
+  accent: s,
+  disabled: n
+}) => {
+  if (n !== void 0 && n !== !1)
+    return l.font.color.tertiary;
+  switch (s) {
+    case "danger":
+      return l.font.color.danger;
+    case "placeholder":
+      return l.font.color.tertiary;
+    default:
+      return l.font.color.secondary;
+  }
+}, rs = () => ({
+  accent: s,
+  disabled: n,
+  isHoverBackgroundDisabled: t,
+  isKeySelected: r,
+  focused: o
+}) => n === !0 ? r || o ? l.background.transparent.light : "transparent" : s === "danger" ? l.background.transparent.danger : t === !0 ? "transparent" : l.background.transparent.light, os = () => ({
+  isIconDisplayedOnHoverOnly: s
+}) => s === !0 ? "0" : "1", as = () => ({
+  isIconDisplayedOnHoverOnly: s
+}) => s === !0 ? l.spacing[2] : "auto", ls = () => ({
+  cursor: s,
+  disabled: n
+}) => n !== void 0 && n !== !1 ? "default" : s === "drag" ? "grab" : "pointer", E = /* @__PURE__ */ c("div")({
+  name: "StyledHoverableMenuItemBase",
+  class: "sqou7u1",
+  propsAsIs: !1,
+  vars: {
+    "sqou7u1-0": [ss()],
+    "sqou7u1-1": [ns()],
+    "sqou7u1-2": [ts()],
+    "sqou7u1-3": [rs()],
+    "sqou7u1-4": [os()],
+    "sqou7u1-5": [as()],
+    "sqou7u1-6": [ls()]
+  }
+}), cs = /* @__PURE__ */ c("div")({
+  name: "StyledMenuItemIconCheckContainer",
+  class: "sa2a0ln",
+  propsAsIs: !1
+}), G = ({
+  size: s
+}) => /* @__PURE__ */ e.jsx(cs, { children: /* @__PURE__ */ e.jsx(U, { size: s }) }), is = /* @__PURE__ */ c("div")({
+  name: "StyledMenuItemContextualText",
+  class: "s1hgpe6x",
+  propsAsIs: !1
+}), V = /* @__PURE__ */ c("div")({
+  name: "StyledRightMenuItemContextualText",
+  class: "s17l3xsm",
+  propsAsIs: !1
+}), ds = /* @__PURE__ */ c("div")({
+  name: "StyledMainText",
+  class: "sn2pafm",
+  propsAsIs: !1
+}), us = /* @__PURE__ */ c("div")({
+  name: "StyledMenuItemLabelRight",
+  class: "svk88g9",
+  propsAsIs: !1
+}), I = ({
+  className: s,
+  LeftComponent: n,
+  LeftIcon: t,
+  iconThemeColor: r,
+  withIconContainer: o = !1,
+  withIconContainerBackground: a = !0,
+  text: d,
+  contextualText: i,
+  contextualTextPosition: m = "left",
+  gripMode: u = "never",
+  disabled: h = !1
+}) => {
+  const {
+    theme: p
+  } = j(x), f = o ? l.font.color.tertiary : h ? l.font.color.extraLight : l.font.color.light;
+  return /* @__PURE__ */ e.jsxs(g, { className: s, children: [
+    u === "always" && (o ? /* @__PURE__ */ e.jsx($, { hasBackground: a, children: /* @__PURE__ */ e.jsx(P, { children: /* @__PURE__ */ e.jsx(w, { size: p.icon.size.md, stroke: p.icon.stroke.sm, color: f }) }) }) : /* @__PURE__ */ e.jsx(P, { children: /* @__PURE__ */ e.jsx(w, { size: p.icon.size.md, stroke: p.icon.stroke.sm, color: f }) })),
+    u === "onHover" ? /* @__PURE__ */ e.jsx(Ye, { LeftIcon: t, iconThemeColor: r, withIconContainer: o, gripIconColor: f }) : /* @__PURE__ */ e.jsx(Ee, { Icon: t, iconThemeColor: r, withContainer: o, withContainerBackground: a }),
+    n,
+    /* @__PURE__ */ e.jsxs(b, { children: [
+      z(d) ? /* @__PURE__ */ e.jsx(ds, { children: /* @__PURE__ */ e.jsx(y, { text: d }) }) : d,
+      m === "left" && /* @__PURE__ */ e.jsx(e.Fragment, { children: z(i) ? N(i) && /* @__PURE__ */ e.jsx(is, { children: /* @__PURE__ */ e.jsx(y, { text: `· ${i}`, tooltipContent: i }) }) : i })
+    ] }),
+    m === "right" && /* @__PURE__ */ e.jsx(us, { children: /* @__PURE__ */ e.jsx(V, { children: z(i) ? /* @__PURE__ */ e.jsx(y, { text: i }) : i }) })
+  ] });
+}, ms = () => he.div, ps = /* @__PURE__ */ c(ms())({
+  name: "StyledSubMenuIcon",
+  class: "s97ygdf",
+  propsAsIs: !0
+}), fs = ({
+  accent: s = "default",
+  className: n,
+  withIconContainer: t = !1,
+  withIconContainerBackground: r = !0,
+  iconButtons: o,
+  isIconDisplayedOnHoverOnly: a = !0,
+  LeftIcon: d,
+  iconThemeColor: i,
+  LeftComponent: m,
+  RightIcon: u,
+  RightComponent: h,
+  onClick: p,
+  onMouseEnter: f,
+  onMouseLeave: S,
+  testId: K,
+  text: J,
+  contextualTextPosition: Y = "left",
+  contextualText: Q,
+  hasSubMenu: X = !1,
+  disabled: A = !1,
+  focused: Z = !1,
+  selected: ee = !1,
+  hotKeys: F,
+  isSubMenuOpened: se = !1
+}) => {
+  const {
+    theme: k
+  } = j(x), ne = Array.isArray(o) && o.length > 0, te = (_) => {
+    p && (_.preventDefault(), _.stopPropagation(), p?.(_));
+  };
+  return /* @__PURE__ */ e.jsxs(E, { "data-testid": K ?? void 0, onClick: A ? void 0 : te, disabled: A, className: n, accent: s, isIconDisplayedOnHoverOnly: a, onMouseEnter: f, onMouseLeave: S, focused: Z || ee, children: [
+    /* @__PURE__ */ e.jsx(I, { LeftIcon: d ?? void 0, iconThemeColor: i, LeftComponent: m, withIconContainer: t, withIconContainerBackground: r, text: J, contextualText: Q, contextualTextPosition: Y, disabled: A }),
+    /* @__PURE__ */ e.jsxs(R, { children: [
+      o && /* @__PURE__ */ e.jsx("div", { className: "hoverable-buttons", children: ne && /* @__PURE__ */ e.jsx(O, { iconButtons: o, size: "small" }) }),
+      F && /* @__PURE__ */ e.jsx(We, { hotKeys: F }),
+      u && /* @__PURE__ */ e.jsx(u, { size: k.icon.size.md, stroke: k.icon.stroke.sm }),
+      h,
+      X && /* @__PURE__ */ e.jsx(ps, { animate: {
+        rotate: se ? 90 : 0
+      }, transition: {
+        duration: k.animation.duration.normal
+      }, style: {
+        visibility: A ? "hidden" : "visible"
+      }, children: /* @__PURE__ */ e.jsx(B, { size: k.icon.size.sm, color: k.font.color.light }) })
+    ] })
+  ] });
+}, an = ({
+  accent: s = "default",
+  className: n,
+  iconButtons: t,
+  isIconDisplayedOnHoverOnly: r = !0,
+  isTooltipOpen: o,
+  onClick: a,
+  onMouseEnter: d,
+  onMouseLeave: i,
+  testId: m,
+  avatar: u,
+  hasSubMenu: h = !1,
+  text: p,
+  contextualText: f
+}) => /* @__PURE__ */ e.jsx(
+  fs,
+  {
+    accent: s,
+    className: n,
+    iconButtons: t,
+    isIconDisplayedOnHoverOnly: r,
+    isTooltipOpen: o,
+    LeftComponent: C(u) ? /* @__PURE__ */ e.jsx(
+      fe,
+      {
+        placeholder: u.placeholder,
+        avatarUrl: u.avatarUrl,
+        placeholderColorSeed: u.placeholderColorSeed,
+        size: u.size,
+        type: u.type
+      }
+    ) : void 0,
+    onClick: a,
+    onMouseEnter: d,
+    onMouseLeave: i,
+    testId: m,
+    text: p,
+    contextualText: f,
+    hasSubMenu: h
+  }
+), ln = ({
+  LeftIcon: s,
+  withIconContainer: n = !1,
+  accent: t = "default",
+  iconButtons: r,
+  onClick: o,
+  text: a,
+  contextualText: d,
+  isDragDisabled: i = !1,
+  className: m,
+  isIconDisplayedOnHoverOnly: u = !0,
+  gripMode: h = "never"
+}) => {
+  const p = Array.isArray(r) && r.length > 0, f = h !== "never" ? i ? "default" : "drag" : "default";
+  return /* @__PURE__ */ e.jsxs(
+    E,
+    {
+      onClick: o,
+      accent: t,
+      className: m,
+      isIconDisplayedOnHoverOnly: u,
+      cursor: f,
+      children: [
+        /* @__PURE__ */ e.jsx(
+          I,
+          {
+            LeftIcon: s,
+            text: a,
+            contextualText: d,
+            withIconContainer: n,
+            disabled: i,
+            gripMode: h
+          }
+        ),
+        p && /* @__PURE__ */ e.jsx(
+          O,
+          {
+            className: "hoverable-buttons",
+            iconButtons: r
+          }
+        )
+      ]
+    }
+  );
+}, hs = /* @__PURE__ */ c("div")({
+  name: "StyledLeftContentWithCheckboxContainer",
+  class: "s173nnho",
+  propsAsIs: !1
+}), cn = ({
+  color: s,
+  LeftIcon: n,
+  iconThemeColor: t,
+  withIconContainer: r = !1,
+  text: o,
+  selected: a,
+  isKeySelected: d,
+  className: i,
+  onSelectChange: m
+}) => {
+  const u = () => {
+    m?.(!a);
+  };
+  return /* @__PURE__ */ e.jsx(v, { isKeySelected: d, className: i, onClick: u, children: /* @__PURE__ */ e.jsxs(hs, { children: [
+    /* @__PURE__ */ e.jsx(T, { checked: a }),
+    s ? /* @__PURE__ */ e.jsx(q, { color: s, text: o, Icon: n }) : /* @__PURE__ */ e.jsx(I, { LeftIcon: n, iconThemeColor: t, text: o, withIconContainer: r })
+  ] }) });
+}, xs = /* @__PURE__ */ c("div")({
+  name: "StyledLeftContentWithCheckboxContainer",
+  class: "srv37ca",
+  propsAsIs: !1
+}), js = /* @__PURE__ */ c("div")({
+  name: "StyledTextContainer",
+  class: "s11aub3a",
+  propsAsIs: !1
+}), dn = ({
+  avatar: s,
+  text: n,
+  selected: t,
+  contextualText: r,
+  className: o,
+  isKeySelected: a,
+  onSelectChange: d
+}) => {
+  const i = () => {
+    d?.(!t);
+  };
+  return /* @__PURE__ */ e.jsx(v, { className: o, onClick: i, isKeySelected: a, children: /* @__PURE__ */ e.jsxs(xs, { children: [
+    /* @__PURE__ */ e.jsx(T, { checked: t }),
+    /* @__PURE__ */ e.jsxs(g, { children: [
+      s,
+      /* @__PURE__ */ e.jsxs(js, { children: [
+        /* @__PURE__ */ e.jsx(b, { children: /* @__PURE__ */ e.jsx(y, { text: n }) }),
+        r && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx(M, { children: "·" }),
+          /* @__PURE__ */ e.jsx(M, { children: /* @__PURE__ */ e.jsx(y, { text: r }) })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}, un = ({
+  color: s,
+  selected: n,
+  className: t,
+  onClick: r,
+  isKeySelected: o,
+  text: a,
+  Icon: d
+}) => /* @__PURE__ */ e.jsx(
+  v,
+  {
+    isKeySelected: o,
+    onClick: r,
+    className: t,
+    children: /* @__PURE__ */ e.jsxs(g, { children: [
+      /* @__PURE__ */ e.jsx(
+        T,
+        {
+          size: oe.Small,
+          shape: re.Squared,
+          checked: n
+        }
+      ),
+      /* @__PURE__ */ e.jsx(q, { color: s, text: a, Icon: d })
+    ] })
+  }
+), mn = ({
+  LeftIcon: s,
+  withIconContainer: n = !1,
+  text: t,
+  className: r,
+  onClick: o
+}) => {
+  const { theme: a } = j(x);
+  return /* @__PURE__ */ e.jsxs(v, { onClick: o, className: r, children: [
+    /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(
+      I,
+      {
+        LeftIcon: s,
+        text: t,
+        withIconContainer: n
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(
+      B,
+      {
+        size: a.icon.size.sm,
+        color: a.font.color.tertiary
+      }
+    )
+  ] });
+}, ys = () => ({
+  disabled: s,
+  focused: n,
+  isKeySelected: t
+}) => s === !0 ? "inherit" : n === !0 || t === !0 ? l.background.transparent.light : "", gs = () => ({
+  disabled: s
+}) => s === !0 ? "inherit" : l.background.transparent.light, Is = () => ({
+  disabled: s
+}) => s === !0 ? l.font.color.tertiary : l.font.color.secondary, Ss = () => ({
+  disabled: s
+}) => s === !0 ? "default" : "pointer", L = /* @__PURE__ */ c("div")({
+  name: "StyledMenuItemSelect",
+  class: "sozj5mr",
+  propsAsIs: !1,
+  vars: {
+    "sozj5mr-0": [ys()],
+    "sozj5mr-1": [gs()],
+    "sozj5mr-2": [Is()],
+    "sozj5mr-3": [Ss()]
+  }
+}), pn = ({
+  LeftIcon: s,
+  leftIconColor: n,
+  withIconContainer: t = !1,
+  text: r,
+  selected: o,
+  needIconCheck: a = !0,
+  className: d,
+  onClick: i,
+  disabled: m,
+  focused: u,
+  hasSubMenu: h = !1,
+  contextualText: p,
+  contextualTextPosition: f = "left"
+}) => {
+  const {
+    theme: S
+  } = j(x);
+  return /* @__PURE__ */ e.jsxs(L, { onClick: i, className: d, disabled: m, focused: u, role: "option", "aria-selected": o, "aria-disabled": m, children: [
+    /* @__PURE__ */ e.jsx(I, { LeftIcon: s, iconThemeColor: n, text: r, contextualText: f === "left" ? p : null, withIconContainer: t }),
+    /* @__PURE__ */ e.jsxs(R, { children: [
+      f === "right" && /* @__PURE__ */ e.jsx(b, { children: z(p) ? /* @__PURE__ */ e.jsx(V, { children: /* @__PURE__ */ e.jsx(y, { text: p }) }) : p }),
+      o && a && /* @__PURE__ */ e.jsx(U, { size: S.icon.size.md }),
+      h && /* @__PURE__ */ e.jsx(B, { size: S.icon.size.sm, color: S.font.color.tertiary })
+    ] })
+  ] });
+}, ks = /* @__PURE__ */ c("div")({
+  name: "StyledTextContainer",
+  class: "s1w3dihv",
+  propsAsIs: !1
+}), fn = ({
+  avatar: s,
+  text: n,
+  contextualText: t,
+  selected: r,
+  className: o,
+  onClick: a,
+  disabled: d,
+  focused: i,
+  testId: m
+}) => {
+  const {
+    theme: u
+  } = j(x);
+  return /* @__PURE__ */ e.jsxs(L, { onClick: a, className: o, disabled: d, focused: i, "data-testid": m, role: "option", "aria-selected": r, "aria-disabled": d, children: [
+    /* @__PURE__ */ e.jsxs(g, { children: [
+      s,
+      /* @__PURE__ */ e.jsxs(ks, { children: [
+        /* @__PURE__ */ e.jsx(b, { children: /* @__PURE__ */ e.jsx(y, { text: n }) }),
+        t && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx(M, { children: "·" }),
+          /* @__PURE__ */ e.jsx(M, { children: /* @__PURE__ */ e.jsx(y, { text: t }) })
+        ] })
+      ] })
+    ] }),
+    r && /* @__PURE__ */ e.jsx(G, { size: u.icon.size.md })
+  ] });
+}, Cs = {
+  gray: "Gray",
+  tomato: "Tomato",
+  red: "Red",
+  ruby: "Ruby",
+  crimson: "Crimson",
+  pink: "Pink",
+  plum: "Plum",
+  purple: "Purple",
+  violet: "Violet",
+  iris: "Iris",
+  cyan: "Cyan",
+  turquoise: "Turquoise",
+  sky: "Sky",
+  blue: "Blue",
+  jade: "Jade",
+  green: "Green",
+  grass: "Grass",
+  mint: "Mint",
+  lime: "Lime",
+  bronze: "Bronze",
+  gold: "Gold",
+  brown: "Brown",
+  orange: "Orange",
+  amber: "Amber",
+  yellow: "Yellow"
+}, hn = ({
+  color: s,
+  selected: n,
+  className: t,
+  onClick: r,
+  disabled: o,
+  focused: a,
+  variant: d = "default",
+  colorLabels: i = Cs
+}) => {
+  const { theme: m } = j(x);
+  return /* @__PURE__ */ e.jsxs(
+    L,
+    {
+      onClick: r,
+      className: t,
+      disabled: o,
+      focused: a,
+      children: [
+        /* @__PURE__ */ e.jsxs(g, { children: [
+          /* @__PURE__ */ e.jsx(xe, { colorName: s, variant: d }),
+          /* @__PURE__ */ e.jsx(b, { children: i[s] })
+        ] }),
+        n && /* @__PURE__ */ e.jsx(G, { size: m.icon.size.md })
+      ]
+    }
+  );
+}, xn = ({
+  color: s,
+  selected: n,
+  focused: t,
+  isKeySelected: r,
+  className: o,
+  onClick: a,
+  text: d,
+  variant: i = "solid",
+  LeftIcon: m
+}) => {
+  const { theme: u } = j(x);
+  return /* @__PURE__ */ e.jsxs(
+    L,
+    {
+      onClick: a,
+      className: o,
+      focused: t,
+      isKeySelected: r,
+      children: [
+        /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(
+          q,
+          {
+            variant: i,
+            color: s,
+            text: d,
+            Icon: m ?? void 0
+          }
+        ) }),
+        n && /* @__PURE__ */ e.jsx(G, { size: u.icon.size.md })
+      ]
+    }
+  );
+}, vs = () => ({
+  selected: s
+}) => s ? l.background.transparent.medium : "transparent", bs = /* @__PURE__ */ c("li")({
+  name: "StyledSuggestionMenuItem",
+  class: "s1u5qpn6",
+  propsAsIs: !1,
+  vars: {
+    "s1u5qpn6-0": [vs()]
+  }
+}), jn = ({
+  LeftIcon: s,
+  withIconContainer: n = !1,
+  text: t,
+  contextualText: r = void 0,
+  contextualTextPosition: o = "left",
+  className: a,
+  selected: d,
+  onClick: i
+}) => {
+  const m = (u) => {
+    i && (u.preventDefault(), u.stopPropagation(), i?.(u));
+  };
+  return /* @__PURE__ */ e.jsx(bs, { onClick: m, className: a, selected: d, children: /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(I, { LeftIcon: s ?? void 0, text: t, contextualText: r, contextualTextPosition: o, withIconContainer: n }) }) });
+}, As = /* @__PURE__ */ c("div")({
+  name: "StyledToggleContainer",
+  class: "sbwbycn",
+  propsAsIs: !1
+}), yn = ({
+  focused: s,
+  LeftIcon: n,
+  withIconContainer: t = !1,
+  text: r,
+  toggled: o,
+  className: a,
+  onToggleChange: d,
+  toggleSize: i,
+  disabled: m = !1
+}) => {
+  const u = () => {
+    m || d?.(!o);
+  };
+  return /* @__PURE__ */ e.jsx(v, { className: a, focused: s, disabled: m, onClick: u, children: /* @__PURE__ */ e.jsxs(As, { children: [
+    /* @__PURE__ */ e.jsx(I, { LeftIcon: n, text: r, withIconContainer: t, disabled: m }),
+    /* @__PURE__ */ e.jsx(R, { onClick: (h) => h.stopPropagation(), children: /* @__PURE__ */ e.jsx(D, { value: o, onChange: m ? void 0 : d, toggleSize: i, disabled: m }) })
+  ] }) });
+}, zs = () => ({
+  isActive: s
+}) => s ? l.background.transparent.light : "none", Ms = /* @__PURE__ */ c("div")({
+  name: "StyledIconButton",
+  class: "s144imed",
+  propsAsIs: !1,
+  vars: {
+    "s144imed-0": [zs()]
+  }
+}), Ls = ({
+  Icon: s,
+  isActive: n,
+  onClick: t
+}) => {
+  const {
+    theme: r
+  } = j(x);
+  return /* @__PURE__ */ e.jsx(Ms, { isActive: n, onClick: t, children: /* @__PURE__ */ e.jsx(s, { color: l.grayScale.gray10, size: r.icon.size.lg }) });
+}, _s = /* @__PURE__ */ c("div")({
+  name: "StyledContainer",
+  class: "s12jcd8z",
+  propsAsIs: !1
+}), gn = ({
+  activeItemName: s,
+  items: n
+}) => /* @__PURE__ */ e.jsx(_s, { children: n.map(({
+  Icon: t,
+  name: r,
+  onClick: o
+}) => /* @__PURE__ */ e.jsx(Ls, { Icon: t, isActive: s === r, onClick: o }, r)) }), ws = () => ({
+  variant: s
+}) => s === "primary" ? l.color.blue : l.background.transparent.light, Ts = () => ({
+  variant: s
+}) => s === "primary" ? "white" : l.font.color.secondary, Bs = /* @__PURE__ */ c("div")({
+  name: "StyledNotificationCounter",
+  class: "s1on6j1k",
+  propsAsIs: !1,
+  vars: {
+    "s1on6j1k-0": [ws()],
+    "s1on6j1k-1": [Ts()]
+  }
+}), In = ({
+  count: s,
+  variant: n = "primary",
+  className: t
+}) => /* @__PURE__ */ e.jsx(Bs, { variant: n, className: t, children: s });
+export {
+  Ys as AdvancedSettingsToggle,
+  nn as CAL_LINK,
+  ke as ClickToActionLink,
+  Qs as ContactLink,
+  Cs as DEFAULT_COLOR_LABELS,
+  be as GITHUB_LINK,
+  Xs as GithubVersionLink,
+  Le as LinkType,
+  fs as MenuItem,
+  an as MenuItemAvatar,
+  ln as MenuItemDraggable,
+  We as MenuItemHotKeys,
+  Ee as MenuItemIcon,
+  $ as MenuItemIconBoxContainer,
+  Ye as MenuItemIconWithGripSwap,
+  I as MenuItemLeftContent,
+  cn as MenuItemMultiSelect,
+  dn as MenuItemMultiSelectAvatar,
+  un as MenuItemMultiSelectTag,
+  mn as MenuItemNavigate,
+  pn as MenuItemSelect,
+  fn as MenuItemSelectAvatar,
+  hn as MenuItemSelectColor,
+  xn as MenuItemSelectTag,
+  jn as MenuItemSuggestion,
+  yn as MenuItemToggle,
+  rn as MenuPicker,
+  tn as NOGBASE_PRICING_LINK,
+  gn as NavigationBar,
+  Ls as NavigationBarItem,
+  In as NotificationCounter,
+  Zs as RawLink,
+  Me as RoundedLink,
+  en as SocialLink,
+  P as StyledDraggableItem,
+  E as StyledHoverableMenuItemBase,
+  $ as StyledIconContainer,
+  v as StyledMenuItemBase,
+  is as StyledMenuItemContextualText,
+  G as StyledMenuItemIconCheck,
+  b as StyledMenuItemLabel,
+  M as StyledMenuItemLabelLight,
+  g as StyledMenuItemLeftContent,
+  R as StyledMenuItemRightContent,
+  L as StyledMenuItemSelect,
+  on as StyledNoIconFiller,
+  V as StyledRightMenuItemContextualText,
+  sn as UndecoratedLink
+};