@calcom/atoms 1.0.96 → 1.0.97-beta-1

package/dist/index-Bj_kD41n.js

@@ -0,0 +1,510 @@
+import { aw as C, ax as N, ay as L, at as S, az as T, aA as U, x as t, _ as h, G as A, aB as R, z as k, aC as v, aD as _, aE as I, U as $ } from "./index-M6WUZF2M.js";
+import { memo as V, useState as z } from "react";
+var E = Math.floor, F = Math.random;
+function Q(s, i) {
+  return s + E(F() * (i - s + 1));
+}
+var M = Q, q = M;
+function G(s, i) {
+  var o = -1, n = s.length, a = n - 1;
+  for (i = i === void 0 ? n : i; ++o < i; ) {
+    var e = q(o, a), r = s[e];
+    s[e] = s[o], s[o] = r;
+  }
+  return s.length = i, s;
+}
+var y = G, Z = C, D = y;
+function W(s) {
+  return D(Z(s));
+}
+var O = W, H = N;
+function P(s, i) {
+  return H(i, function(o) {
+    return s[o];
+  });
+}
+var K = P, Y = K, J = L();
+function X(s) {
+  return s == null ? [] : Y(s, J(s));
+}
+var B = X, ee = y, te = B;
+function se(s) {
+  return ee(te(s));
+}
+var ie = se, re = O, ae = ie, le = T;
+function oe(s) {
+  var i = le(s) ? re : ae;
+  return i(s);
+}
+var de = oe;
+const ne = /* @__PURE__ */ S(de), p = R("", {
+  // Variants won't have any style by default. Style will only be applied if the variants are combined.
+  // So, style is defined in compoundVariants.
+  variants: {
+    variant: {
+      basic: "",
+      ProfileCard: "",
+      SidebarCard: ""
+    },
+    structure: {
+      image: "",
+      card: "",
+      title: "",
+      description: ""
+    }
+  },
+  compoundVariants: [
+    // Style for Basic Variants types
+    {
+      variant: "basic",
+      structure: "image",
+      className: "w-10 h-auto"
+    },
+    {
+      variant: "basic",
+      structure: "card",
+      className: "p-5"
+    },
+    {
+      variant: "basic",
+      structure: "title",
+      className: "text-base mt-4"
+    },
+    {
+      variant: "basic",
+      structure: "description",
+      className: "text-sm leading-[18px] text-subtle font-normal"
+    },
+    // Style for ProfileCard Variant Types
+    {
+      variant: "ProfileCard",
+      structure: "image",
+      className: "w-9 h-auto rounded-full mb-4s"
+    },
+    {
+      variant: "ProfileCard",
+      structure: "card",
+      className: "w-80 p-4 hover:bg-subtle"
+    },
+    {
+      variant: "ProfileCard",
+      structure: "title",
+      className: "text-base"
+    },
+    {
+      variant: "ProfileCard",
+      structure: "description",
+      className: "text-sm leading-[18px] text-subtle font-normal"
+    },
+    // Style for SidebarCard Variant Types
+    {
+      variant: "SidebarCard",
+      structure: "image",
+      className: "w-9 h-auto rounded-full mb-4s"
+    },
+    {
+      variant: "SidebarCard",
+      structure: "card",
+      className: "w-full p-3 border border-subtle"
+    },
+    {
+      variant: "SidebarCard",
+      structure: "title",
+      className: "text-sm font-cal"
+    },
+    {
+      variant: "SidebarCard",
+      structure: "description",
+      className: "text-xs text-default line-clamp-2"
+    }
+  ]
+});
+function ce({
+  image: s,
+  title: i,
+  icon: o,
+  description: n,
+  variant: a,
+  actionButton: e,
+  containerProps: r,
+  imageProps: l,
+  mediaLink: d,
+  thumbnailUrl: m,
+  learnMore: c
+}) {
+  const g = c && c.href.startsWith("https") ? "a" : U;
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: h(
+        r == null ? void 0 : r.className,
+        p({ variant: a, structure: "card" }),
+        "bg-default border-subtle text-default flex flex-col justify-between rounded-md border"
+      ),
+      "data-testid": "card-container",
+      ...r,
+      children: [
+        /* @__PURE__ */ t.jsxs("div", { children: [
+          o && o,
+          s && /* @__PURE__ */ t.jsx(
+            "img",
+            {
+              src: s,
+              alt: l == null ? void 0 : l.alt,
+              className: h(
+                l == null ? void 0 : l.className,
+                p({ variant: a, structure: "image" })
+              ),
+              ...l
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            "h5",
+            {
+              title: i,
+              className: h(
+                p({ variant: a, structure: "title" }),
+                "text-emphasis line-clamp-1 font-bold leading-5"
+              ),
+              children: i
+            }
+          ),
+          n && /* @__PURE__ */ t.jsx(
+            "p",
+            {
+              title: n.toString(),
+              className: h(p({ variant: a, structure: "description" }), "pt-1"),
+              children: n
+            }
+          )
+        ] }),
+        a === "SidebarCard" && /* @__PURE__ */ t.jsxs(
+          "a",
+          {
+            onClick: e == null ? void 0 : e.onClick,
+            target: "_blank",
+            rel: "noreferrer",
+            href: d,
+            "data-testid": e == null ? void 0 : e["data-testid"],
+            className: "group relative my-3 flex aspect-video items-center overflow-hidden rounded",
+            children: [
+              /* @__PURE__ */ t.jsx("div", { className: "absolute inset-0 bg-black bg-opacity-50 transition group-hover:bg-opacity-40" }),
+              /* @__PURE__ */ t.jsxs(
+                "svg",
+                {
+                  className: "text-inverted absolute left-1/2 top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full shadow-lg transition-all hover:-mt-px",
+                  viewBox: "0 0 32 32",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: [
+                    /* @__PURE__ */ t.jsx(
+                      "path",
+                      {
+                        d: "M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z",
+                        fill: "white"
+                      }
+                    ),
+                    /* @__PURE__ */ t.jsx(
+                      "path",
+                      {
+                        d: "M12.1667 8.5L23.8334 16L12.1667 23.5V8.5Z",
+                        fill: "#111827",
+                        stroke: "#111827",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t.jsx("img", { alt: "play feature video", src: m })
+            ]
+          }
+        ),
+        a === "basic" && e && /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
+          A,
+          {
+            color: "secondary",
+            href: e == null ? void 0 : e.href,
+            className: "mt-10",
+            EndIcon: "arrow-right",
+            "data-testid": e["data-testid"],
+            children: e == null ? void 0 : e.child
+          }
+        ) }),
+        a === "SidebarCard" && /* @__PURE__ */ t.jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
+          c && /* @__PURE__ */ t.jsx(
+            g,
+            {
+              href: c.href,
+              onClick: e == null ? void 0 : e.onClick,
+              target: "_blank",
+              rel: "noreferrer",
+              className: "text-default text-xs font-medium",
+              children: c.text
+            }
+          ),
+          (e == null ? void 0 : e.child) && /* @__PURE__ */ t.jsx(
+            "button",
+            {
+              className: "text-default hover:text-emphasis p-0 text-xs font-normal",
+              color: "minimal",
+              "data-testid": e == null ? void 0 : e["data-testid"],
+              onClick: e == null ? void 0 : e.onClick,
+              children: e == null ? void 0 : e.child
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const me = [
+  {
+    id: 17,
+    thumbnailUrl: "https://img.youtube.com/vi/fMHW6jYPIb8/0.jpg",
+    mediaLink: "https://go.cal.com/embed-video",
+    title: "Embed",
+    description: "Embed your booking page on your website",
+    href: "https://go.cal.com/embed-video"
+  },
+  {
+    id: 16,
+    thumbnailUrl: "https://img.youtube.com/vi/xopxmk2H4Ng/0.jpg",
+    mediaLink: "https://go.cal.com/paid-booking",
+    title: "Paid Bookings",
+    description: "Charge for your time with Cal.com's paid bookings",
+    href: "https://go.cal.com/paid-booking"
+  },
+  {
+    id: 15,
+    thumbnailUrl: "https://img.youtube.com/vi/ZjSD1yPgLLQ/0.jpg",
+    mediaLink: "https://go.cal.com/instant-meetings-video",
+    title: "Instant Meetings",
+    description: "Book meetings instantly with a link",
+    href: "https://go.cal.com/instant-meetings-video"
+  },
+  {
+    id: 14,
+    thumbnailUrl: "https://img.youtube.com/vi/IZ4-nUiIpvY/0.jpg",
+    mediaLink: "https://go.cal.com/custom-attributes",
+    title: "Custom Attributes",
+    description: "Define roles and attributes for your teams",
+    href: "https://go.cal.com/custom-attributes"
+  },
+  {
+    id: 13,
+    thumbnailUrl: "https://img.youtube.com/vi/TTAASLLPKk0/0.jpg",
+    mediaLink: "https://go.cal.com/ooo-video",
+    title: "ooo.new",
+    description: "Easily go out-of-office",
+    href: "https://go.cal.com/ooo-video"
+  },
+  {
+    id: 12,
+    thumbnailUrl: "https://cal.com/og-image-cal-ai.jpg",
+    mediaLink: "https://go.cal.com/cal-ai",
+    title: "Cal.ai",
+    description: "Your personal AI scheduling assistant",
+    href: "https://go.cal.com/cal-ai"
+  },
+  {
+    id: 11,
+    thumbnailUrl: "https://img.youtube.com/vi/KTg_qzA9NEc/0.jpg",
+    mediaLink: "https://go.cal.com/insights",
+    title: "Insights",
+    description: "Get a better understanding of your business",
+    href: "https://go.cal.com/insights"
+  },
+  {
+    id: 10,
+    thumbnailUrl: "https://img.youtube.com/vi/jvaBafzVUQc/0.jpg",
+    mediaLink: "https://go.cal.com/video",
+    title: "Cal Video",
+    description: "Free video conferencing with recording",
+    href: "https://go.cal.com/video"
+  },
+  {
+    id: 9,
+    thumbnailUrl: "https://img.youtube.com/vi/93iOmzHieCU/0.jpg",
+    mediaLink: "https://go.cal.com/round-robin",
+    title: "Round-Robin",
+    description: "Create advanced group meetings with round-robin",
+    href: "https://go.cal.com/round-robin"
+  },
+  {
+    id: 8,
+    thumbnailUrl: "https://img.youtube.com/vi/piKlAiibAFo/0.jpg",
+    mediaLink: "https://go.cal.com/workflows",
+    title: "Automate Workflows",
+    description: "Make time work for you and automate tasks",
+    href: "https://go.cal.com/workflows"
+  },
+  {
+    id: 7,
+    thumbnailUrl: "https://img.youtube.com/vi/UVXgo12cY4g/0.jpg",
+    mediaLink: "https://go.cal.com/routing-forms",
+    title: "Routing Forms",
+    description: "Ask questions and route to the correct person",
+    href: "https://go.cal.com/routing-forms"
+  },
+  {
+    id: 6,
+    thumbnailUrl: "https://img.youtube.com/vi/yGiZo1Ry5-8/0.jpg",
+    mediaLink: "https://go.cal.com/recurring-video",
+    title: "Recurring Bookings",
+    description: "Learn how to create a recurring schedule",
+    href: "https://go.cal.com/recurring-video"
+  },
+  {
+    id: 5,
+    thumbnailUrl: "https://img.youtube.com/vi/0v_nQtpxC_4/0.jpg",
+    mediaLink: "https://go.cal.com/payments-video",
+    title: "Accept Payments",
+    description: "Charge for your time with Cal.com's Stripe App",
+    href: "https://app.cal.com/apps/stripe"
+  },
+  {
+    id: 4,
+    thumbnailUrl: "https://img.youtube.com/vi/zGr_s-fG84k/0.jpg",
+    mediaLink: "https://go.cal.com/confirmation-video",
+    title: "Requires Confirmation",
+    description: "Learn how to be in charge of your bookings",
+    href: "https://cal.com/resources/feature/opt-in"
+  },
+  {
+    id: 3,
+    thumbnailUrl: "https://img.youtube.com/vi/-L8MCiT6uhQ/0.jpg",
+    mediaLink: "https://youtu.be/-L8MCiT6uhQ?si=DRJzRNhN85hqAwBl",
+    title: "Routing Forms, Workflows",
+    description: "Ask screening questions of potential bookers to connect them with the right person",
+    href: "https://youtu.be/-L8MCiT6uhQ?si=DRJzRNhN85hqAwBl"
+  },
+  {
+    id: 2,
+    thumbnailUrl: "https://img.youtube.com/vi/EAc46SPL6iA/0.jpg",
+    mediaLink: "https://go.cal.com/teams-video",
+    title: "How to set up Teams",
+    description: "Learn how to use round-robin and collective events.",
+    href: "https://cal.com/docs/enterprise-features/teams"
+  },
+  {
+    id: 1,
+    thumbnailUrl: "https://img.youtube.com/vi/VZ5PfQzzxBw/0.jpg",
+    mediaLink: "https://youtu.be/VZ5PfQzzxBw?si=oB0LPSxG8dWIwg5a",
+    title: "Dynamic booking links",
+    description: "Booking link that allows people to quickly schedule meetings.",
+    href: "https://youtu.be/VZ5PfQzzxBw?si=oB0LPSxG8dWIwg5a"
+  }
+], f = ne(me).slice(0).reverse();
+function he() {
+  const { t: s } = k(), [i, o] = z(() => {
+    if (typeof window > "u")
+      return f;
+    try {
+      const e = v.getItem("removedTipsIds");
+      if (e !== null) {
+        const r = e.split(",").map((d) => parseInt(d, 10));
+        return f.filter((d) => r.indexOf(d.id) === -1);
+      } else
+        return f;
+    } catch {
+      return f;
+    }
+  }), n = (e) => {
+    o((r) => {
+      const l = v.getItem("removedTipsIds") || "", d = r.findIndex((m) => m.id === e);
+      return d === -1 ? [...r] : (v.setItem(
+        "removedTipsIds",
+        `${r[d].id.toString()}${l.length > 0 ? `,${l}` : ""}`
+      ), r.splice(d, 1), [...r]);
+    });
+  }, a = i.slice(0).reverse();
+  return /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: "hidden pb-4 pt-8 lg:grid",
+      style: {
+        gridTemplateColumns: "1fr"
+      },
+      children: i.map((e) => /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: "relative",
+          style: {
+            gridRowStart: 1,
+            gridColumnStart: 1
+          },
+          children: /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: "relative",
+              style: {
+                transform: `scale(${1 - a.indexOf(e) / 20})`,
+                top: -a.indexOf(e) * 10,
+                opacity: `${1 - a.indexOf(e) / 7}`
+              },
+              children: /* @__PURE__ */ t.jsx(
+                ce,
+                {
+                  variant: "SidebarCard",
+                  thumbnailUrl: e.thumbnailUrl,
+                  mediaLink: e.mediaLink,
+                  title: e.title,
+                  description: e.description,
+                  learnMore: { href: e.href, text: s("learn_more") },
+                  actionButton: { onClick: () => n(e.id), child: s("dismiss") }
+                }
+              )
+            }
+          )
+        },
+        e.id
+      ))
+    }
+  );
+}
+const fe = V(he);
+function ge({
+  title: s,
+  description: i,
+  background: o,
+  features: n,
+  buttons: a,
+  isParentLoading: e,
+  children: r,
+  plan: l
+}) {
+  const { resolvedTheme: d } = _(), { t: m } = k(), { isPending: c, hasTeamPlan: g } = I(), { data: b } = $.viewer.teams.getUpgradeable.useQuery(), x = `${o}${d === "dark" ? "-dark" : ""}.jpg`, j = !1, w = !!(b != null && b[0]);
+  return l === "team" && (g || w) ? /* @__PURE__ */ t.jsx(t.Fragment, { children: r }) : l === "enterprise" && j ? /* @__PURE__ */ t.jsx(t.Fragment, { children: r }) : c ? /* @__PURE__ */ t.jsx(t.Fragment, { children: e }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsxs("div", { className: "relative flex min-h-[295px] w-full items-center justify-between overflow-hidden rounded-lg pb-10", children: [
+      /* @__PURE__ */ t.jsxs("picture", { className: "absolute min-h-[295px] w-full rounded-lg object-cover", children: [
+        /* @__PURE__ */ t.jsx("source", { srcSet: x, media: "(prefers-color-scheme: dark)" }),
+        /* @__PURE__ */ t.jsx(
+          "img",
+          {
+            className: "absolute min-h-[295px] w-full select-none rounded-lg object-cover object-left md:object-center",
+            src: x,
+            loading: "lazy",
+            alt: s
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t.jsxs("div", { className: "relative my-4 px-8 sm:px-14", children: [
+        /* @__PURE__ */ t.jsx("h1", { className: h("font-cal mt-4 text-3xl"), children: m(s) }),
+        /* @__PURE__ */ t.jsx("p", { className: h("mb-8 mt-4 max-w-sm"), children: m(i) }),
+        a
+      ] })
+    ] }),
+    /* @__PURE__ */ t.jsx("div", { className: "mt-4 grid-cols-3 md:grid md:gap-4", children: n.map((u) => /* @__PURE__ */ t.jsxs("div", { className: "bg-muted mb-4 min-h-[180px] w-full rounded-md  p-8 md:mb-0", children: [
+      u.icon,
+      /* @__PURE__ */ t.jsx("h2", { className: "font-cal text-emphasis mt-4 text-lg", children: u.title }),
+      /* @__PURE__ */ t.jsx("p", { className: "text-default", children: u.description })
+    ] }, u.title)) })
+  ] });
+}
+export {
+  fe as Tips,
+  ge as UpgradeTip
+};