twenty-sdk 0.4.0 → 0.4.1

package/dist/vendor/twenty-ui/input.mjs

@@ -0,0 +1,1247 @@
+import { j as b, a as i, F as N } from "./emotion-react-jsx-runtime.browser.esm-BUNawPtg.js";
+import { useTheme as k, css as p } from "@emotion/react";
+import d from "@emotion/styled";
+import { u as tr, g as ar } from "./useIsMobile-DqVdogVd.js";
+import { motion as E, useAnimation as er, AnimatePresence as q } from "framer-motion";
+import { Link as _ } from "react-router-dom";
+import { P as Q } from "./Pill-C3ErQi9y.js";
+import { C as V } from "./Button-BChGSHVB.js";
+import { B as Zo, b as rn } from "./Button-BChGSHVB.js";
+import * as L from "react";
+import S, { useContext as ir, useState as T } from "react";
+import { T as w } from "./isValidCountryCode-Dyji5s5r-B7O5eJvP.js";
+import "@sniptt/guards";
+import { S as cr } from "./ColorSample-Bp-he5lO.js";
+import { L as dr } from "./Toggle-Bd3-khQW.js";
+import { e as nn, d as tn, b as an, c as en, C as cn, a as dn, T as sn } from "./Toggle-Bd3-khQW.js";
+import X from "@emotion/is-prop-valid";
+import { G as $ } from "./MainColorsLight-x_vjLhiq.js";
+import { A as sr } from "./Avatar-Cg4dvBA_.js";
+import { T as lr, G as z } from "./ThemeContextProvider-DRVSWXAb.js";
+import ur from "@monaco-editor/react";
+import { L as pr } from "./Loader-BmJ693nz.js";
+import { M as gr } from "./MobileViewport-CDXq37n6.js";
+import { IconSearch as br, IconFilter as fr } from "@tabler/icons-react";
+const yr = /* @__PURE__ */ d("button", {
+  target: "e3gw90y0"
+})("align-items:center;", ({ theme: r, variant: o, inverted: n, accent: a, disabled: t, focus: e }) => {
+  switch (o) {
+    case "primary":
+      switch (a) {
+        case "default":
+          return p`
+              background: ${n ? r.background.primary : r.background.secondary};
+              border-color: ${n ? r.background.transparent.light : !t && e ? r.color.blue : r.background.transparent.light};
+              border-width: 1px 1px 1px 1px !important;
+              box-shadow: ${!t && e ? `0 0 0 3px ${n ? r.background.transparent.medium : r.accent.tertiary}` : "none"};
+              color: ${n ? r.font.color.secondary : t ? r.font.color.extraLight : r.font.color.secondary};
+              &:hover {
+                background: ${n ? r.background.secondary : r.background.tertiary};
+              }
+              &:active {
+                background: ${n ? r.background.tertiary : r.background.quaternary};
+              }
+            `;
+        case "blue":
+          return p`
+              background: ${n ? r.background.primary : r.color.blue};
+              border-color: ${n ? r.background.transparent.light : e ? r.color.blue : r.background.transparent.light};
+              border-width: 1px 1px 1px 1px !important;
+              box-shadow: ${!t && e ? `0 0 0 3px ${n ? r.background.transparent.medium : r.accent.tertiary}` : "none"};
+              color: ${n ? r.color.blue : r.grayScale.gray1};
+              ${t ? "" : p`
+                    &:hover {
+                      background: ${n ? r.background.secondary : r.color.blue10};
+                    }
+                    &:active {
+                      background: ${n ? r.background.tertiary : r.color.blue12};
+                    }
+                  `}
+            `;
+        case "danger":
+          return p`
+              background: ${n ? r.background.primary : r.color.red};
+              border-color: ${n ? r.background.transparent.light : e ? r.color.red : r.background.transparent.light};
+              border-width: 1px 1px !important;
+              box-shadow: ${!t && e ? `0 0 0 3px ${n ? r.background.transparent.medium : r.color.red3}` : "none"};
+              color: ${n ? r.color.red : r.background.primary};
+              ${t ? "" : p`
+                    &:hover {
+                      background: ${n ? r.background.secondary : r.color.red8};
+                    }
+                    &:active {
+                      background: ${n ? r.background.tertiary : r.color.red10};
+                    }
+                  `}
+            `;
+      }
+      break;
+    case "secondary":
+    case "tertiary":
+      switch (a) {
+        case "default":
+          return p`
+              background: transparent;
+              border-color: ${n ? o === "secondary" ? e || t ? r.grayScale.gray1 : r.background.transparent.primary : e ? r.grayScale.gray1 : "transparent" : o === "secondary" ? !t && e ? r.color.blue : r.background.transparent.medium : e ? r.color.blue : "transparent"};
+              border-width: 1px 1px 1px 1px !important;
+              box-shadow: ${!t && e ? `0 0 0 3px ${n ? r.background.transparent.medium : r.accent.tertiary}` : "none"};
+              color: ${n ? r.font.color.inverted : t ? r.font.color.extraLight : r.font.color.secondary};
+              &:hover {
+                background: ${n ? r.background.transparent.light : t ? "transparent" : r.background.transparent.light};
+              }
+              &:active {
+                background: ${n ? r.background.transparent.medium : t ? "transparent" : r.background.transparent.light};
+              }
+            `;
+        case "blue":
+          return p`
+              background: transparent;
+              border-color: ${n ? o === "secondary" ? e || t ? r.grayScale.gray1 : r.background.transparent.primary : e ? r.grayScale.gray1 : "transparent" : o === "secondary" ? e ? r.color.blue : r.accent.primary : e ? r.color.blue : "transparent"};
+              border-width: 1px 1px 1px 1px !important;
+              box-shadow: ${!t && e ? `0 0 0 3px ${n ? r.background.transparent.medium : r.accent.tertiary}` : "none"};
+              color: ${n ? r.font.color.inverted : t ? r.accent.accent4060 : r.color.blue};
+              &:hover {
+                background: ${n ? r.background.transparent.light : t ? "transparent" : r.accent.tertiary};
+              }
+              &:active {
+                background: ${n ? r.background.transparent.medium : t ? "transparent" : r.accent.secondary};
+              }
+            `;
+        case "danger":
+          return p`
+              background: transparent;
+              border-color: ${n ? o === "secondary" ? e || t ? r.grayScale.gray1 : r.background.transparent.primary : e ? r.grayScale.gray1 : "transparent" : o === "secondary" ? e ? r.color.red : r.border.color.danger : e ? r.color.red : "transparent"};
+              border-width: 1px 1px 1px 1px !important;
+              box-shadow: ${!t && e ? `0 0 0 3px ${n ? r.background.transparent.medium : r.color.red3}` : "none"};
+              color: ${n ? r.font.color.inverted : r.font.color.danger};
+              &:hover {
+                background: ${n ? r.background.transparent.light : t ? "transparent" : r.background.danger};
+              }
+              &:active {
+                background: ${n ? r.background.transparent.medium : t ? "transparent" : r.background.danger};
+              }
+            `;
+      }
+  }
+}, "  text-decoration:none;border-radius:", ({ position: r, theme: o }) => {
+  switch (r) {
+    case "left":
+      return `${o.border.radius.sm} 0px 0px ${o.border.radius.sm}`;
+    case "right":
+      return `0px ${o.border.radius.sm} ${o.border.radius.sm} 0px`;
+    case "middle":
+      return "0px";
+    case "standalone":
+      return o.border.radius.sm;
+  }
+}, ";border-style:solid;border-width:", ({ variant: r, position: o }) => {
+  switch (r) {
+    case "primary":
+    case "secondary":
+      return o === "middle" ? "1px 0px" : "1px";
+    case "tertiary":
+      return "0";
+  }
+}, ";cursor:", ({ disabled: r }) => r ? "not-allowed" : "pointer", ";display:flex;flex-direction:row;font-family:", ({ theme: r }) => r.font.family, ";font-weight:500;font-size:", ({ theme: r }) => r.font.size.md, ";gap:", ({ theme: r }) => r.spacing(1), ";height:", ({ size: r }) => r === "small" ? "24px" : "32px", ";justify-content:", ({ justify: r }) => r, ";padding:", ({ theme: r }) => `0 ${r.spacing(2)}`, ";transition:background 0.1s ease;white-space:nowrap;width:", ({ fullWidth: r }) => r ? "100%" : "auto", ";&:focus{outline:none;}"), xr = /* @__PURE__ */ d(Q, {
+  target: "e3gw90y1"
+})("margin-left:auto;"), kr = /* @__PURE__ */ d("div", {
+  target: "e3gw90y2"
+})("background:", ({ theme: r, accent: o }) => {
+  switch (o) {
+    case "blue":
+      return r.border.color.blue;
+    case "danger":
+      return r.border.color.danger;
+    default:
+      return r.font.color.light;
+  }
+}, ";height:", ({ theme: r, buttonSize: o }) => r.spacing(o === "small" ? 2 : 4), ";margin:0;width:1px;"), hr = /* @__PURE__ */ d("div", {
+  target: "e3gw90y3"
+})("color:", ({ theme: r, variant: o, accent: n }) => {
+  switch (n) {
+    case "blue":
+      return r.border.color.blue;
+    case "danger":
+      return o === "primary" ? r.border.color.danger : r.color.red8;
+    default:
+      return r.font.color.light;
+  }
+}, ";font-weight:", ({ theme: r }) => r.font.weight.medium, ";"), O = /* @__PURE__ */ d(E.div, {
+  target: "e3gw90y4"
+})("display:flex;align-items:center;justify-content:center;"), Io = ({ className: r, Icon: o, animatedSvg: n, title: a, fullWidth: t = !1, variant: e = "primary", inverted: c = !1, size: s = "medium", accent: l = "default", position: u = "standalone", soon: g = !1, disabled: y = !1, justify: x = "flex-start", focus: v = !1, onClick: F, to: I, target: j, dataTestId: D, hotkeys: C, ariaLabel: H, animate: f, transition: h, dataClickOutsideId: B, dataGloballyPreventClickOutside: M, soonLabel: rr = "Soon" }) => {
+  const or = k(), nr = tr();
+  return /* @__PURE__ */ b(yr, {
+    as: I ? _ : "button",
+    fullWidth: t,
+    variant: e,
+    inverted: c,
+    size: s,
+    position: u,
+    disabled: g || y,
+    focus: v,
+    justify: x,
+    accent: l,
+    className: r,
+    onClick: F,
+    to: I,
+    target: j,
+    "data-testid": D,
+    "aria-label": H,
+    "data-click-outside-id": B,
+    "data-globally-prevent-click-outside": M,
+    children: [
+      o && /* @__PURE__ */ i(O, {
+        animate: f,
+        transition: h,
+        children: /* @__PURE__ */ i(o, {
+          size: or.icon.size.sm
+        })
+      }),
+      n && /* @__PURE__ */ i(O, {
+        animate: f,
+        transition: h,
+        children: n
+      }),
+      a,
+      C && !nr && /* @__PURE__ */ b(N, {
+        children: [
+          /* @__PURE__ */ i(kr, {
+            buttonSize: s,
+            accent: l
+          }),
+          /* @__PURE__ */ i(hr, {
+            variant: e,
+            accent: l,
+            children: C.join(ar())
+          })
+        ]
+      }),
+      g && /* @__PURE__ */ i(xr, {
+        label: rr
+      })
+    ]
+  });
+}, mr = /* @__PURE__ */ d("button", {
+  target: "e198cdmp0"
+})("align-items:center;background:transparent;border:none;border:", ({ disabled: r, theme: o, focus: n }) => !r && n ? `1px solid ${o.color.blue}` : "none", ";border-radius:", ({ theme: r }) => r.border.radius.sm, ";box-shadow:", ({ disabled: r, theme: o, focus: n }) => !r && n ? `0 0 0 3px ${o.color.blue3}` : "none", ";color:", ({ theme: r, accent: o, active: n, disabled: a, focus: t }) => {
+  switch (o) {
+    case "secondary":
+      return n || t ? r.color.blue : a ? r.font.color.extraLight : r.font.color.secondary;
+    case "tertiary":
+      return n || t ? r.color.blue : a ? r.font.color.extraLight : r.font.color.tertiary;
+  }
+}, ";cursor:", ({ disabled: r }) => r ? "not-allowed" : "pointer", ";display:flex;flex-direction:row;font-family:", ({ theme: r }) => r.font.family, ";font-weight:", ({ theme: r }) => r.font.weight.regular, ";gap:", ({ theme: r }) => r.spacing(1), ";height:", ({ size: r }) => r === "small" ? "24px" : "32px", ";justify-content:center;padding:", ({ theme: r }) => r.spacing(1), ";transition:background 0.1s ease;white-space:nowrap;width:", ({ size: r }) => r === "small" ? "24px" : "32px", ";min-width:", ({ size: r }) => r === "small" ? "24px" : "32px", ";&:hover{background:", ({ theme: r, disabled: o }) => o ? "transparent" : r.background.transparent.light, ";}&:focus{outline:none;}&:active{background:", ({ theme: r, disabled: o }) => o ? "transparent" : r.background.transparent.medium, ";}"), wr = /* @__PURE__ */ d(E.div, {
+  target: "e198cdmp1"
+})("display:flex;align-items:center;justify-content:center;"), Do = ({ "aria-label": r, className: o, testId: n, animate: a, transition: t, Icon: e, active: c = !1, size: s = "small", accent: l = "secondary", disabled: u = !1, focus: g = !1, onClick: y, title: x }) => {
+  const v = k();
+  return /* @__PURE__ */ i(mr, {
+    "data-testid": n,
+    "aria-label": r,
+    onClick: y,
+    disabled: u,
+    focus: g && !u,
+    accent: l,
+    className: o,
+    size: s,
+    active: c,
+    title: x,
+    children: /* @__PURE__ */ i(wr, {
+      animate: a,
+      transition: t,
+      children: e && /* @__PURE__ */ i(e, {
+        size: s === "medium" ? v.icon.size.md : v.icon.size.sm
+      })
+    })
+  });
+}, $r = /* @__PURE__ */ d("div", {
+  target: "evsziqm0"
+})("border-radius:", ({ theme: r }) => r.border.radius.md, ";display:flex;"), Mo = ({ className: r, children: o, variant: n, size: a, accent: t }) => /* @__PURE__ */ i($r, {
+  className: r,
+  children: S.Children.map(o, (e, c) => {
+    if (!/* @__PURE__ */ S.isValidElement(e)) return null;
+    let s;
+    c === 0 ? s = "left" : c === o.length - 1 ? s = "right" : s = "middle";
+    const l = {
+      position: s,
+      variant: n,
+      accent: t,
+      size: a
+    };
+    return w(n) && (l.variant = n), w(t) && (l.variant = n), w(a) && (l.size = a), /* @__PURE__ */ S.cloneElement(e, l);
+  })
+}), Sr = /* @__PURE__ */ d(dr, {
+  target: "e1ytphpf0"
+})(({ isSelected: r, theme: o }) => r ? /* @__PURE__ */ p("background-color:", o.background.transparent.medium, ";&:hover{background-color:", o.background.transparent.medium, ";}") : ""), To = ({ colorName: r, isSelected: o, onClick: n }) => /* @__PURE__ */ i(Sr, {
+  size: "medium",
+  isSelected: o,
+  Icon: () => /* @__PURE__ */ i(cr, {
+    colorName: r
+  }),
+  onClick: n
+}), vr = /* @__PURE__ */ d("button", {
+  shouldForwardProp: (r) => ![
+    "applyBlur",
+    "applyShadow",
+    "focus",
+    "position",
+    "size"
+  ].includes(r) && X(r),
+  target: "e1l7wwhi0"
+})("align-items:center;backdrop-filter:", ({ applyBlur: r }) => r ? "blur(20px)" : "none", ";background:", ({ theme: r }) => r.background.primary, ";border:", ({ focus: r, theme: o }) => r ? `1px solid ${o.color.blue}` : "none", ";border-radius:", ({ position: r, theme: o }) => {
+  switch (r) {
+    case "left":
+      return `${o.border.radius.sm} 0px 0px ${o.border.radius.sm}`;
+    case "right":
+      return `0px ${o.border.radius.sm} ${o.border.radius.sm} 0px`;
+    case "middle":
+      return "0px";
+    case "standalone":
+      return o.border.radius.sm;
+  }
+}, ";box-shadow:", ({ theme: r, applyShadow: o, focus: n }) => o ? `0px 2px 4px 0px ${r.background.transparent.light}, 0px 0px 4px 0px ${r.background.transparent.medium}${n ? `,0 0 0 3px ${r.color.blue3}` : ""}` : n ? `0 0 0 3px ${r.color.blue3}` : "none", ";color:", ({ theme: r, disabled: o, focus: n }) => o ? r.font.color.extraLight : n ? r.color.blue : r.font.color.secondary, ";cursor:", ({ disabled: r }) => r ? "not-allowed" : "pointer", ";display:flex;flex-direction:row;font-family:", ({ theme: r }) => r.font.family, ";font-weight:", ({ theme: r }) => r.font.weight.regular, ";gap:", ({ theme: r }) => r.spacing(1), ";height:", ({ size: r }) => r === "small" ? "24px" : "32px", ";padding:", ({ theme: r }) => `0 ${r.spacing(2)}`, ";transition:background 0.1s ease;white-space:nowrap;&:hover{background:", ({ theme: r, disabled: o }) => o ? "transparent" : r.background.transparent.lighter, ";}&:active{background:", ({ theme: r, disabled: o }) => o ? "transparent" : r.background.transparent.medium, ";}&:focus{outline:none;}text-decoration:none;"), Fo = ({ className: r, Icon: o, title: n, size: a = "small", position: t = "standalone", applyBlur: e = !0, applyShadow: c = !0, disabled: s = !1, focus: l = !1, to: u }) => {
+  const g = k();
+  return /* @__PURE__ */ b(vr, {
+    disabled: s,
+    focus: l && !s,
+    size: a,
+    applyBlur: e,
+    applyShadow: c,
+    position: t,
+    className: r,
+    to: u,
+    as: u ? _ : "button",
+    children: [
+      o && /* @__PURE__ */ i(o, {
+        size: g.icon.size.sm
+      }),
+      n
+    ]
+  });
+}, zr = /* @__PURE__ */ d("div", {
+  target: "e1ayw1cr0"
+})("backdrop-filter:blur(20px);border-radius:", ({ theme: r }) => r.border.radius.md, ";box-shadow:", ({ theme: r }) => `0px 2px 4px 0px ${r.background.transparent.light}, 0px 0px 4px 0px ${r.background.transparent.medium}`, ";display:inline-flex;"), jo = ({ children: r, size: o, className: n }) => /* @__PURE__ */ i(zr, {
+  className: n,
+  children: S.Children.map(r, (a, t) => {
+    let e;
+    t === 0 ? e = "left" : t === r.length - 1 ? e = "right" : e = "middle";
+    const c = {
+      position: e,
+      size: o,
+      applyShadow: !1,
+      applyBlur: !1
+    };
+    return w(o) && (c.size = o), /* @__PURE__ */ S.cloneElement(a, c);
+  })
+}), Cr = (r) => ![
+  "applyBlur",
+  "applyShadow",
+  "isActive",
+  "focus",
+  "position",
+  "size"
+].includes(r), Br = /* @__PURE__ */ d("button", {
+  shouldForwardProp: Cr,
+  target: "e1xd25i80"
+})("align-items:center;backdrop-filter:", ({ theme: r, applyBlur: o }) => o ? r.blur.medium : "none", ";background:", ({ theme: r, isActive: o }) => o ? r.background.transparent.medium : r.background.primary, ";border:", ({ focus: r, theme: o }) => r ? `1px solid ${o.color.blue}` : `1px solid ${o.border.color.strong}`, ";border-radius:", ({ position: r, theme: o }) => {
+  switch (r) {
+    case "left":
+      return `${o.border.radius.sm} 0px 0px ${o.border.radius.sm}`;
+    case "right":
+      return `0px ${o.border.radius.sm} ${o.border.radius.sm} 0px`;
+    case "middle":
+      return "0px";
+    case "standalone":
+      return o.border.radius.sm;
+  }
+}, ";box-shadow:", ({ theme: r, applyShadow: o, focus: n }) => o ? r.boxShadow.light : n ? `0 0 0 3px ${r.color.blue3}` : "none", ";box-sizing:border-box;color:", ({ theme: r, disabled: o, focus: n }) => o ? r.font.color.extraLight : n ? r.color.blue : r.font.color.tertiary, ";cursor:", ({ disabled: r }) => r ? "not-allowed" : "pointer", ";display:flex;flex-direction:row;font-family:", ({ theme: r }) => r.font.family, ";font-weight:", ({ theme: r }) => r.font.weight.regular, ";gap:", ({ theme: r }) => r.spacing(1), ";justify-content:center;padding:0;position:relative;transition:background ", ({ theme: r }) => r.animation.duration.instant, `s
+    ease;white-space:nowrap;`, ({ position: r, size: o }) => {
+  const n = (o === "small" ? 24 : 32) - (r === "standalone" ? 0 : 4);
+  return `
+      height: ${n}px;
+      width: ${n}px;
+    `;
+}, " ", ({ theme: r, disabled: o }) => !o && /* @__PURE__ */ p("&:hover{background:", r.background.transparent.lighter, ";}"), "  &:active{background:", ({ theme: r, disabled: o }) => o ? "transparent" : r.background.transparent.medium, ";}&:focus{outline:none;}"), Lr = ({ className: r, Icon: o, size: n = "small", position: a = "standalone", applyShadow: t = !0, applyBlur: e = !0, disabled: c = !1, focus: s = !1, onClick: l, isActive: u }) => {
+  const g = k();
+  return /* @__PURE__ */ i(Br, {
+    disabled: c,
+    focus: s && !c,
+    size: n,
+    applyShadow: t,
+    applyBlur: e,
+    className: r,
+    position: a,
+    onClick: l,
+    isActive: u,
+    children: o && /* @__PURE__ */ i(o, {
+      size: g.icon.size.md
+    })
+  });
+}, Er = /* @__PURE__ */ d("div", {
+  target: "e1y10e6t0"
+})("backdrop-filter:blur(20px);background-color:", ({ theme: r }) => r.background.primary, ";border-radius:", ({ theme: r }) => r.border.radius.sm, ";box-shadow:", ({ theme: r }) => `0px 2px 4px 0px ${r.background.transparent.light}, 0px 0px 4px 0px ${r.background.transparent.medium}`, ";display:inline-flex;gap:2px;padding:2px;"), Go = ({ iconButtons: r, size: o, className: n }) => /* @__PURE__ */ i(Er, {
+  className: n,
+  children: r.map(({ Icon: a, onClick: t, isActive: e }, c) => {
+    const s = r.length === 1 ? "standalone" : c === 0 ? "left" : c === r.length - 1 ? "right" : "middle";
+    return /* @__PURE__ */ i(Lr, {
+      applyBlur: !1,
+      applyShadow: !1,
+      Icon: a,
+      onClick: t,
+      position: s,
+      size: o,
+      isActive: e
+    }, `floating-icon-button-${c}`);
+  })
+}), Ir = /* @__PURE__ */ d("button", {
+  target: "e10ufusy0"
+})("align-items:center;", ({ theme: r, variant: o, accent: n, disabled: a, focus: t }) => {
+  switch (o) {
+    case "primary":
+      switch (n) {
+        case "default":
+          return p`
+              background: ${r.background.secondary};
+              border-color: ${t ? r.color.blue : r.background.transparent.light};
+              border-width: ${!a && t ? "1px 1px !important" : 0};
+              box-shadow: ${!a && t ? `0 0 0 3px ${r.accent.tertiary}` : "none"};
+              color: ${a ? r.font.color.extraLight : r.font.color.secondary};
+              &:hover {
+                background: ${a ? r.background.secondary : r.background.tertiary};
+              }
+              &:active {
+                background: ${a ? r.background.secondary : r.background.quaternary};
+              }
+            `;
+        case "blue":
+          return p`
+              background: ${r.color.blue};
+              border-color: ${a ? "transparent" : t ? r.color.blue : r.background.transparent.light};
+              border-width: ${!a && t ? "1px 1px !important" : 0};
+              box-shadow: ${!a && t ? `0 0 0 3px ${r.accent.tertiary}` : "none"};
+              color: ${$.gray1};
+              opacity: ${a ? 0.24 : 1};
+
+              ${a ? "" : p`
+                    &:hover {
+                      background: ${r.color.blue10};
+                    }
+                    &:active {
+                      background: ${r.color.blue12};
+                    }
+                  `}
+            `;
+        case "danger":
+          return p`
+              background: ${r.color.red};
+              border-color: ${a ? "transparent" : t ? r.color.red : r.background.transparent.light};
+              border-width: ${!a && t ? "1px 1px !important" : 0};
+              box-shadow: ${!a && t ? `0 0 0 3px ${r.color.red3}` : "none"};
+              color: ${$.gray1};
+              opacity: ${a ? 0.24 : 1};
+
+              ${a ? "" : p`
+                    &:hover,
+                    &:active {
+                      background: ${r.color.red10};
+                    }
+                  `}
+            `;
+      }
+      break;
+    case "secondary":
+    case "tertiary":
+      switch (n) {
+        case "default":
+          return p`
+              background: ${t ? r.background.transparent.primary : "transparent"};
+              border-color: ${o === "secondary" ? !a && t ? r.color.blue : r.background.transparent.medium : t ? r.color.blue : "transparent"};
+              border-width: ${!a && t ? "1px 1px !important" : 0};
+              box-shadow: ${!a && t ? `0 0 0 3px ${r.accent.tertiary}` : "none"};
+              color: ${a ? r.font.color.extraLight : o === "secondary" ? r.font.color.secondary : r.font.color.tertiary};
+              &:hover {
+                background: ${a ? "transparent" : r.background.transparent.light};
+              }
+              &:active {
+                background: ${a ? "transparent" : r.background.transparent.light};
+              }
+            `;
+        case "blue":
+          return p`
+              background: ${t ? r.background.transparent.primary : "transparent"};
+              border-color: ${o === "secondary" ? a ? r.color.blue5 : r.color.blue : t ? r.color.blue : "transparent"};
+              border-width: ${!a && t ? "1px 1px !important" : 0};
+              box-shadow: ${!a && t ? `0 0 0 3px ${r.accent.tertiary}` : "none"};
+              color: ${a ? r.accent.accent4060 : r.color.blue};
+              &:hover {
+                background: ${a ? "transparent" : r.accent.tertiary};
+              }
+              &:active {
+                background: ${a ? "transparent" : r.accent.secondary};
+              }
+            `;
+        case "danger":
+          return p`
+              background: transparent;
+              border-color: ${o === "secondary" ? r.border.color.danger : t ? r.color.red : "transparent"};
+              border-width: ${!a && t ? "1px 1px !important" : 0};
+              box-shadow: ${!a && t ? `0 0 0 3px ${r.color.red3}` : "none"};
+              color: ${a ? r.color.red5 : r.font.color.danger};
+              &:hover {
+                background: ${a ? "transparent" : r.background.danger};
+              }
+              &:active {
+                background: ${a ? "transparent" : r.background.danger};
+              }
+            `;
+      }
+  }
+}, "  border-radius:", ({ position: r, theme: o }) => {
+  switch (r) {
+    case "left":
+      return `${o.border.radius.sm} 0px 0px ${o.border.radius.sm}`;
+    case "right":
+      return `0px ${o.border.radius.sm} ${o.border.radius.sm} 0px`;
+    case "middle":
+      return "0px";
+    case "standalone":
+      return o.border.radius.sm;
+  }
+}, ";border-style:solid;border-width:", ({ variant: r, position: o }) => {
+  switch (r) {
+    case "primary":
+    case "secondary":
+      return o === "middle" ? "1px 0px" : "1px";
+    case "tertiary":
+      return "0";
+  }
+}, ";box-sizing:border-box;cursor:", ({ disabled: r }) => r ? "not-allowed" : "pointer", ";display:flex;flex-direction:row;font-family:", ({ theme: r }) => r.font.family, ";font-weight:500;gap:", ({ theme: r }) => r.spacing(1), ";height:", ({ size: r }) => r === "small" ? "24px" : "32px", ";justify-content:center;padding:0;transition:background 0.1s ease;white-space:nowrap;min-width:", ({ size: r }) => r === "small" ? "24px" : "32px", ";&:focus{outline:none;}"), Dr = ({ className: r, Icon: o, variant: n = "primary", size: a = "medium", accent: t = "default", position: e = "standalone", disabled: c = !1, focus: s = !1, dataTestId: l, ariaLabel: u, onClick: g, to: y }) => {
+  const x = k();
+  return /* @__PURE__ */ i(Ir, {
+    "data-testid": l,
+    variant: n,
+    size: a,
+    position: e,
+    disabled: c,
+    focus: s,
+    accent: t,
+    className: r,
+    onClick: g,
+    "aria-label": u,
+    to: y,
+    children: o && /* @__PURE__ */ i(o, {
+      size: x.icon.size.md
+    })
+  });
+}, Mr = /* @__PURE__ */ d("button", {
+  target: "e13o9rlw0"
+})("align-items:center;border:none;background-color:transparent;border-radius:", ({ theme: r }) => r.border.radius.xs, ";color:", ({ theme: r }) => r.font.color.tertiary, ";cursor:", ({ disabled: r }) => r ? "not-allowed" : "pointer", ";display:flex;flex-direction:row;height:20px;justify-content:center;padding:0;white-space:nowrap;min-width:20px;transition:background-color 0.1s ease;&:hover{background-color:", ({ theme: r }) => r.background.transparent.light, ";}"), Tr = ({ className: r, Icon: o, onClick: n, disabled: a = !1 }) => {
+  const t = k();
+  return /* @__PURE__ */ i(Mr, {
+    className: r,
+    onClick: n,
+    disabled: a,
+    children: o && /* @__PURE__ */ i(o, {
+      size: t.icon.size.sm
+    })
+  });
+}, Fr = /* @__PURE__ */ d("div", {
+  target: "e7ozop00"
+})("display:inline-flex;align-items:flex-start;background-color:", ({ disabled: r, theme: o }) => r ? "inherit" : o.background.transparent.lighter, ";border-radius:", ({ theme: r }) => r.border.radius.sm, ";border:1px solid ", ({ theme: r }) => r.border.color.strong, ";gap:2px;padding:2px;backdrop-filter:blur(20px);&:hover{box-shadow:", ({ theme: r }) => r.boxShadow.light, ";}"), Ro = ({ iconButtons: r, disabled: o, className: n }) => /* @__PURE__ */ i(Fr, {
+  className: n,
+  disabled: o,
+  children: r.map(({ Icon: a, onClick: t }, e) => /* @__PURE__ */ i(Tr, {
+    Icon: a,
+    onClick: t,
+    disabled: o
+  }, e))
+}), jr = /* @__PURE__ */ d("button", {
+  target: "egtrlo00"
+})("align-items:center;background:transparent;border:", ({ theme: r, focus: o }) => o ? `1px solid ${r.color.blue}` : "none", ";border-radius:", ({ theme: r }) => r.border.radius.sm, ";box-shadow:", ({ theme: r, focus: o }) => o ? `0 0 0 3px  ${r.color.blue3}` : "none", ";color:", ({ theme: r, accent: o, active: n, disabled: a, focus: t }) => {
+  switch (o) {
+    case "secondary":
+      return n || t ? r.color.blue : a ? r.font.color.extraLight : r.font.color.secondary;
+    case "tertiary":
+      return n || t ? r.color.blue : a ? r.font.color.extraLight : r.font.color.tertiary;
+  }
+}, ";cursor:", ({ disabled: r }) => r ? "not-allowed" : "pointer", ";display:flex;flex-direction:row;font-family:", ({ theme: r }) => r.font.family, ";font-weight:", ({ theme: r }) => r.font.weight.regular, ";gap:", ({ theme: r }) => r.spacing(1), ";height:24px;padding:", ({ theme: r }) => `0 ${r.spacing(2)}`, ";transition:background 0.1s ease;white-space:nowrap;&:hover{background:", ({ theme: r, disabled: o }) => o ? "transparent" : r.background.transparent.light, ";}&:focus{outline:none;}&:active{background:", ({ theme: r, disabled: o }) => o ? "transparent" : r.background.transparent.medium, ";}"), Ao = ({ className: r, Icon: o, title: n, active: a = !1, accent: t = "secondary", disabled: e = !1, focus: c = !1, type: s = "button", onClick: l }) => {
+  const u = k();
+  return /* @__PURE__ */ b(jr, {
+    onClick: l,
+    disabled: e,
+    focus: c && !e,
+    type: s,
+    accent: t,
+    className: r,
+    active: a,
+    children: [
+      !!o && /* @__PURE__ */ i(o, {
+        size: u.icon.size.md
+      }),
+      n
+    ]
+  });
+}, Gr = /* @__PURE__ */ d("button", {
+  target: "e1lpzrnu0"
+})("align-items:center;background:", ({ theme: r, variant: o, disabled: n }) => {
+  if (n === !0)
+    return r.background.secondary;
+  switch (o) {
+    case "primary":
+      return r.background.primaryInverted;
+    case "secondary":
+      return r.background.primary;
+    default:
+      return r.background.primary;
+  }
+}, ";border:1px solid;border-color:", ({ theme: r, disabled: o, variant: n }) => {
+  if (o === !0)
+    return r.background.transparent.lighter;
+  switch (n) {
+    case "primary":
+      return r.background.transparent.strong;
+    case "secondary":
+      return r.border.color.medium;
+    default:
+      return r.background.primary;
+  }
+}, ";border-radius:", ({ theme: r }) => r.border.radius.md, ";", ({ theme: r, disabled: o }) => o === !0 ? "" : `box-shadow: ${r.boxShadow.light};`, "  color:", ({ theme: r, variant: o, disabled: n }) => {
+  if (n === !0)
+    return r.font.color.light;
+  switch (o) {
+    case "primary":
+      return r.font.color.inverted;
+    case "secondary":
+      return r.font.color.primary;
+    default:
+      return r.font.color.primary;
+  }
+}, ";cursor:", ({ disabled: r }) => r ? "not-allowed" : "pointer", ";display:flex;flex-direction:row;font-family:", ({ theme: r }) => r.font.family, ";font-weight:", ({ theme: r }) => r.font.weight.semiBold, ";gap:", ({ theme: r }) => r.spacing(2), ";justify-content:center;outline:none;padding:", ({ theme: r }) => r.spacing(2), " ", ({ theme: r }) => r.spacing(3), ";max-height:", ({ theme: r }) => r.spacing(8), ";width:", ({ fullWidth: r, width: o }) => r ? "100%" : o ? `${o}px` : "auto", ";", ({ theme: r, variant: o, disabled: n }) => {
+  switch (o) {
+    case "secondary":
+      return `
+          &:hover {
+            background: ${r.background.tertiary};
+          }
+        `;
+    default:
+      return `
+          &:hover {
+            background: ${n ? r.background.secondary : r.background.primaryInvertedHover};};
+          }
+        `;
+  }
+}, ";"), Po = ({ Icon: r, title: o, width: n, fullWidth: a = !1, variant: t = "primary", type: e, onClick: c, disabled: s, className: l }) => {
+  const u = k();
+  return /* @__PURE__ */ b(Gr, {
+    className: l,
+    disabled: s,
+    fullWidth: a,
+    width: n,
+    onClick: c,
+    type: e,
+    variant: t,
+    children: [
+      r && /* @__PURE__ */ i(r, {
+        size: u.icon.size.sm
+      }),
+      o
+    ]
+  });
+}, Rr = /* @__PURE__ */ d("button", {
+  target: "e12oqdtw0"
+})("align-items:center;background:", ({ theme: r }) => r.color.blue, ";border:none;border-radius:50%;color:", ({ theme: r }) => r.font.color.inverted, ";cursor:pointer;display:flex;height:20px;justify-content:center;outline:none;padding:0;transition:color 0.1s ease-in-out,background 0.1s ease-in-out;&:disabled{background:", ({ theme: r }) => r.background.quaternary, ";color:", ({ theme: r }) => r.font.color.tertiary, ";cursor:default;}width:20px;"), _o = ({ Icon: r, onClick: o, disabled: n, className: a }) => {
+  const t = k();
+  return /* @__PURE__ */ i(Rr, {
+    className: a,
+    disabled: n,
+    onClick: o,
+    children: /* @__PURE__ */ i(r, {
+      size: t.icon.size.md
+    })
+  });
+}, Ar = /* @__PURE__ */ d("button", {
+  shouldForwardProp: (r) => X(r) && r !== "active",
+  target: "eevtqp20"
+})("all:unset;align-items:center;color:", ({ theme: r, active: o, disabled: n }) => o ? r.font.color.primary : n ? r.font.color.light : r.font.color.secondary, ";cursor:pointer;background-color:transparent;border:none;font-family:inherit;display:flex;gap:", ({ theme: r }) => r.spacing(1), ";justify-content:center;pointer-events:", ({ disabled: r }) => r ? "none" : "", ";text-decoration:none;position:relative;&::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background-color:", ({ theme: r, active: o }) => o ? r.border.color.inverted : "transparent", ";z-index:1;}"), Ho = /* @__PURE__ */ d("div", {
+  target: "eevtqp21"
+})("align-items:center;color:", ({ theme: r, active: o, disabled: n }) => o ? r.font.color.primary : n ? r.font.color.light : r.font.color.secondary, ";cursor:pointer;background-color:transparent;display:flex;gap:", ({ theme: r }) => r.spacing(1), ";justify-content:center;text-decoration:none;position:relative;&::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background-color:", ({ theme: r, active: o }) => o ? r.border.color.inverted : "transparent", ";z-index:1;}"), Pr = /* @__PURE__ */ d("span", {
+  target: "eevtqp22"
+})("display:flex;gap:", ({ theme: r }) => r.spacing(1), ";padding:", ({ theme: r, contentSize: o }) => o === "sm" ? `${r.spacing(1)} ${r.spacing(2)}` : `${r.spacing(2)} ${r.spacing(2)}`, ";font-weight:", ({ theme: r }) => r.font.weight.medium, ";width:100%;white-space:nowrap;border-radius:", ({ theme: r }) => r.border.radius.sm, ";&:hover{background:", ({ theme: r }) => r.background.tertiary, ";}&:active{background:", ({ theme: r }) => r.background.quaternary, ";}"), _r = ({ active: r, disabled: o, LeftIcon: n, title: a, logo: t, RightIcon: e, pill: c, contentSize: s = "sm", className: l }) => {
+  const { theme: u } = ir(lr), g = r ? u.font.color.primary : o ? u.font.color.extraLight : u.font.color.secondary;
+  return /* @__PURE__ */ b(Pr, {
+    contentSize: s,
+    className: l,
+    children: [
+      n && /* @__PURE__ */ i(n, {
+        color: g,
+        size: u.icon.size.md
+      }),
+      t && /* @__PURE__ */ i(sr, {
+        avatarUrl: t,
+        size: "md",
+        placeholder: a
+      }),
+      a,
+      e && /* @__PURE__ */ i(e, {
+        color: g,
+        size: u.icon.size.md
+      }),
+      c && (typeof c == "string" ? /* @__PURE__ */ i(Q, {
+        label: c
+      }) : c)
+    ]
+  });
+}, qo = ({ id: r, active: o, disabled: n, to: a, LeftIcon: t, className: e, title: c, onClick: s, logo: l, RightIcon: u, pill: g, contentSize: y = "sm", disableTestId: x = !1 }) => /* @__PURE__ */ i(Ar, {
+  "data-testid": x ? void 0 : `tab-${r}`,
+  active: o,
+  disabled: n,
+  as: a ? _ : "button",
+  to: a,
+  className: e,
+  onClick: s,
+  children: /* @__PURE__ */ i(_r, {
+    id: r,
+    active: o,
+    disabled: n,
+    LeftIcon: t,
+    title: c,
+    logo: l,
+    RightIcon: u,
+    pill: g,
+    contentSize: y
+  })
+}), K = "baseCodeEditorTheme", m = (r) => {
+  const o = r.match(/color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/);
+  if (w(o)) {
+    const [, n, a, t, e] = o, c = Math.round(parseFloat(n) * 255).toString(16).padStart(2, "0"), s = Math.round(parseFloat(a) * 255).toString(16).padStart(2, "0"), l = Math.round(parseFloat(t) * 255).toString(16).padStart(2, "0");
+    if (w(e)) {
+      const u = Math.round(parseFloat(e) * 255).toString(16).padStart(2, "0");
+      return `#${c}${s}${l}${u}`;
+    }
+    return `#${c}${s}${l}`;
+  }
+  return r;
+}, Hr = ({ theme: r }) => ({
+  base: "vs",
+  inherit: !0,
+  rules: [
+    {
+      token: "",
+      foreground: m(r.code.text.gray),
+      fontStyle: "bold"
+    },
+    {
+      token: "keyword",
+      foreground: m(r.code.text.sky)
+    },
+    {
+      token: "delimiter",
+      foreground: m(r.code.text.gray)
+    },
+    {
+      token: "string",
+      foreground: m(r.code.text.pink)
+    },
+    {
+      token: "comment",
+      foreground: m(r.code.text.orange)
+    }
+  ],
+  colors: {
+    "editor.background": "#00000000",
+    "editorCursor.foreground": m(r.font.color.primary),
+    "editorLineNumber.foreground": m(r.font.color.extraLight),
+    "editorLineNumber.activeForeground": m(r.font.color.light),
+    "editor.lineHighlightBackground": m(r.background.tertiary)
+  }
+}), qr = /* @__PURE__ */ d("div", {
+  target: "e1hl8r0s0"
+})("align-items:center;display:flex;height:", ({ height: r }) => typeof r == "number" ? `${r}px` : r, ";justify-content:center;border:1px solid ", ({ theme: r }) => r.border.color.medium, ";background-color:", ({ theme: r }) => r.background.transparent.lighter, ";", ({ variant: r, theme: o }) => {
+  switch (r) {
+    case "default":
+      return p`
+          border-radius: ${o.border.radius.sm};
+        `;
+    case "borderless":
+      return p`
+          border: none;
+        `;
+    case "with-header":
+      return p`
+          border-radius: 0 0 ${o.border.radius.sm} ${o.border.radius.sm};
+          border-top: none;
+        `;
+  }
+}), Vr = /* @__PURE__ */ d("div", {
+  target: "e1hl8r0s1"
+})("display:contents;"), Or = /* @__PURE__ */ d(ur, {
+  target: "e1hl8r0s2"
+})(".monaco-editor{outline-width:0;", ({ theme: r, transparentBackground: o }) => !o && /* @__PURE__ */ p("background-color:", r.background.secondary, ";"), " ", ({ variant: r, theme: o }) => r !== "borderless" && /* @__PURE__ */ p("border-radius:", o.border.radius.sm, ";"), "}.overflow-guard{box-sizing:border-box;", ({ variant: r, theme: o }) => {
+  switch (r) {
+    case "default":
+      return /* @__PURE__ */ p("border:1px solid ", o.border.color.medium, ";border-radius:", o.border.radius.sm, ";");
+    case "with-header":
+      return /* @__PURE__ */ p("border:1px solid ", o.border.color.medium, ";border-radius:0 0 ", o.border.radius.sm, " ", o.border.radius.sm, ";border-top:none;");
+  }
+}, "}"), Vo = ({ value: r, language: o, onMount: n, onChange: a, setMarkers: t, onValidate: e, height: c = 450, variant: s = "default", transparentBackground: l, isLoading: u = !1, options: g }) => {
+  const y = k(), [x, v] = T(void 0), [F, I] = T(void 0), [j, D] = T(!1), C = (f, h) => {
+    const B = f?.getModel();
+    if (!w(B))
+      return;
+    const M = t?.(B.getValue());
+    w(M) && h?.editor.setModelMarkers(B, "customMarker", M);
+  };
+  return u ? /* @__PURE__ */ i(qr, {
+    height: c,
+    variant: s,
+    children: /* @__PURE__ */ i(pr, {})
+  }) : /* @__PURE__ */ b(Vr, {
+    onKeyDown: (f) => {
+      j && f.stopPropagation();
+    },
+    children: [
+      /* @__PURE__ */ i("input", {
+        type: "hidden",
+        "data-testid": "code-editor-value",
+        value: r ?? "",
+        readOnly: !0
+      }),
+      /* @__PURE__ */ i(Or, {
+        height: c,
+        variant: s,
+        value: r,
+        language: o,
+        loading: "",
+        transparentBackground: l,
+        onMount: (f, h) => {
+          v(h), I(f), h.editor.defineTheme(K, Hr({
+            theme: y
+          })), h.editor.setTheme(K), f.onDidFocusEditorWidget(() => {
+            D(!0);
+          }), f.onDidBlurEditorWidget(() => {
+            D(!1);
+          }), n?.(f, h), C(f, h);
+        },
+        onChange: (f) => {
+          w(f) && (a?.(f), C(F, x));
+        },
+        onValidate: (f) => {
+          e?.(f);
+        },
+        options: {
+          formatOnPaste: !0,
+          formatOnType: !0,
+          overviewRulerLanes: 0,
+          scrollbar: {
+            vertical: "hidden",
+            horizontal: "hidden"
+          },
+          minimap: {
+            enabled: !1
+          },
+          ...g
+        }
+      })
+    ]
+  });
+}, Kr = /* @__PURE__ */ d("div", {
+  target: "ez6hqbm0"
+})("align-items:center;background-color:", ({ theme: r }) => r.background.transparent.lighter, ";color:", ({ theme: r }) => r.font.color.tertiary, ";font-weight:", ({ theme: r }) => r.font.weight.medium, ";display:flex;height:", ({ theme: r }) => r.spacing(10), ";padding:", ({ theme: r }) => `0 ${r.spacing(2)}`, ";border:1px solid ", ({ theme: r }) => r.border.color.medium, ";border-top-left-radius:", ({ theme: r }) => r.border.radius.sm, ";border-top-right-radius:", ({ theme: r }) => r.border.radius.sm, ";justify-content:space-between;"), W = /* @__PURE__ */ d("div", {
+  target: "ez6hqbm1"
+})("align-content:flex-end;display:flex;gap:", ({ theme: r }) => r.spacing(2), ";"), Oo = ({ title: r, leftNodes: o, rightNodes: n }) => /* @__PURE__ */ b(Kr, {
+  children: [
+    /* @__PURE__ */ b(W, {
+      children: [
+        o && o.map((a, t) => /* @__PURE__ */ i("div", {
+          children: a
+        }, `left-${t}`)),
+        r
+      ]
+    }),
+    /* @__PURE__ */ i(W, {
+      children: n && n.map((a, t) => /* @__PURE__ */ i("div", {
+        children: a
+      }, `right-${t}`))
+    })
+  ]
+}), Wr = /* @__PURE__ */ d("div", {
+  target: "e1wbazos0"
+})("align-items:flex-end;background:", ({ variant: r }) => {
+  switch (r) {
+    case "Dark":
+      return z.gray4;
+    case "Light":
+    default:
+      return $.gray4;
+  }
+}, ";border:", ({ variant: r }) => {
+  switch (r) {
+    case "Dark":
+      return `1px solid ${z.gray5};`;
+    case "Light":
+    default:
+      return `1px solid ${$.gray5};`;
+  }
+}, ";border-radius:", ({ theme: r }) => r.border.radius.md, ";box-sizing:border-box;cursor:pointer;display:flex;height:80px;justify-content:flex-end;overflow:hidden;padding-left:", ({ theme: r }) => r.spacing(6), ";padding-top:", ({ theme: r }) => r.spacing(6), ";width:160px;"), Yr = /* @__PURE__ */ d(E.div, {
+  target: "e1wbazos1"
+})("background:", ({ variant: r }) => {
+  switch (r) {
+    case "Dark":
+      return z.gray1;
+    case "Light":
+      return $.gray1;
+  }
+}, ";border-left:", ({ variant: r }) => {
+  switch (r) {
+    case "Dark":
+      return `1px solid ${z.gray5};`;
+    case "Light":
+    default:
+      return `1px solid ${$.gray5};`;
+  }
+}, ";border-radius:", ({ theme: r }) => r.border.radius.md, " 0px 0px 0px;border-top:", ({ variant: r }) => {
+  switch (r) {
+    case "Dark":
+      return `1px solid ${z.gray5};`;
+    case "Light":
+    default:
+      return `1px solid ${$.gray5};`;
+  }
+}, ";box-sizing:border-box;color:", ({ variant: r }) => {
+  switch (r) {
+    case "Dark":
+      return z.gray12;
+    case "Light":
+    default:
+      return $.gray12;
+  }
+}, ";display:flex;flex:1;font-size:20px;height:56px;padding-left:", ({ theme: r }) => r.spacing(2), ";padding-top:", ({ theme: r }) => r.spacing(2), ";"), G = ({ variant: r, controls: o, style: n, className: a, onClick: t, onMouseEnter: e, onMouseLeave: c }) => /* @__PURE__ */ i(Wr, {
+  className: a,
+  variant: r,
+  style: n,
+  onClick: t,
+  onMouseEnter: e,
+  onMouseLeave: c,
+  children: /* @__PURE__ */ i(Yr, {
+    animate: o,
+    variant: r,
+    children: "Aa"
+  })
+}), Y = /* @__PURE__ */ d("div", {
+  target: "e1wbazos2"
+})("position:relative;width:160px;"), Ur = /* @__PURE__ */ d("div", {
+  target: "e1wbazos3"
+})("border-radius:", ({ theme: r }) => r.border.radius.md, ";cursor:pointer;display:flex;height:80px;overflow:hidden;position:relative;width:160px;"), U = /* @__PURE__ */ d(E.div, {
+  target: "e1wbazos4"
+})("bottom:0px;padding:", ({ theme: r }) => r.spacing(2), ";position:absolute;right:0px;"), J = {
+  initial: {
+    opacity: 0
+  },
+  animate: {
+    opacity: 1
+  },
+  exit: {
+    opacity: 0
+  }
+}, R = ({ variant: r, selected: o, onClick: n }) => {
+  const a = er(), t = () => {
+    a.start({
+      height: 61,
+      fontSize: "22px",
+      transition: {
+        duration: 0.1
+      }
+    });
+  }, e = () => {
+    a.start({
+      height: 56,
+      fontSize: "20px",
+      transition: {
+        duration: 0.1
+      }
+    });
+  };
+  return r === "System" ? /* @__PURE__ */ b(Y, {
+    children: [
+      /* @__PURE__ */ b(Ur, {
+        onMouseEnter: t,
+        onMouseLeave: e,
+        onClick: n,
+        children: [
+          /* @__PURE__ */ i(G, {
+            style: {
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0
+            },
+            controls: a,
+            variant: "Light"
+          }),
+          /* @__PURE__ */ i(G, {
+            style: {
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0
+            },
+            controls: a,
+            variant: "Dark"
+          })
+        ]
+      }),
+      /* @__PURE__ */ i(q, {
+        children: o && /* @__PURE__ */ i(U, {
+          variants: J,
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          transition: {
+            duration: 0.3
+          },
+          children: /* @__PURE__ */ i(V, {})
+        }, "system")
+      })
+    ]
+  }) : /* @__PURE__ */ b(Y, {
+    children: [
+      /* @__PURE__ */ i(G, {
+        onMouseEnter: t,
+        onMouseLeave: e,
+        controls: a,
+        variant: r,
+        onClick: n
+      }),
+      /* @__PURE__ */ i(q, {
+        children: o && /* @__PURE__ */ i(U, {
+          variants: J,
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          transition: {
+            duration: 0.3
+          },
+          children: /* @__PURE__ */ i(V, {})
+        }, r)
+      })
+    ]
+  });
+}, Jr = /* @__PURE__ */ d("div", {
+  target: "eh4rymo0"
+})("display:flex;flex-direction:row;> * + *{margin-left:", ({ theme: r }) => r.spacing(4), ";}@media (max-width:", gr, "px){overflow:scroll;}"), A = /* @__PURE__ */ d("div", {
+  target: "eh4rymo1"
+})("display:flex;flex-direction:column;"), P = /* @__PURE__ */ d("span", {
+  target: "eh4rymo2"
+})("color:", ({ theme: r }) => r.font.color.secondary, ";font-size:", ({ theme: r }) => r.font.size.xs, ";font-weight:", ({ theme: r }) => r.font.weight.medium, ";margin-top:", ({ theme: r }) => r.spacing(2), ";"), Ko = ({ value: r, onChange: o, className: n, lightLabel: a, darkLabel: t, systemLabel: e }) => /* @__PURE__ */ b(Jr, {
+  className: n,
+  children: [
+    /* @__PURE__ */ b(A, {
+      children: [
+        /* @__PURE__ */ i(R, {
+          onClick: () => o("Light"),
+          variant: "Light",
+          selected: r === "Light"
+        }),
+        /* @__PURE__ */ i(P, {
+          children: a
+        })
+      ]
+    }),
+    /* @__PURE__ */ b(A, {
+      children: [
+        /* @__PURE__ */ i(R, {
+          onClick: () => o("Dark"),
+          variant: "Dark",
+          selected: r === "Dark"
+        }),
+        /* @__PURE__ */ i(P, {
+          children: t
+        })
+      ]
+    }),
+    /* @__PURE__ */ b(A, {
+      children: [
+        /* @__PURE__ */ i(R, {
+          onClick: () => o("System"),
+          variant: "System",
+          selected: r === "System"
+        }),
+        /* @__PURE__ */ i(P, {
+          children: e
+        })
+      ]
+    })
+  ]
+}), Nr = ({ value: r, onChange: o, onValueChange: n, children: a }) => {
+  const t = k(), e = (c) => {
+    o?.(c), n?.(c.target.value);
+  };
+  return /* @__PURE__ */ i(N, {
+    children: S.Children.map(a, (c) => /* @__PURE__ */ S.isValidElement(c) ? /* @__PURE__ */ S.cloneElement(c, {
+      style: {
+        marginBottom: t.spacing(2)
+      },
+      checked: c.props.value === r,
+      onChange: e
+    }) : c)
+  });
+};
+var Wo = /* @__PURE__ */ function(r) {
+  return r.Large = "large", r.Small = "small", r;
+}({}), Yo = /* @__PURE__ */ function(r) {
+  return r.Left = "left", r.Right = "right", r;
+}({});
+const Qr = /* @__PURE__ */ d("div", {
+  target: "e1ihb4830"
+})(({ labelPosition: r }) => r === "left" ? `
+    flex-direction: row-reverse;
+  ` : `
+    flex-direction: row;
+  `, ";align-items:center;display:inline-flex;"), Xr = /* @__PURE__ */ d(E.input, {
+  target: "e1ihb4831"
+})("-webkit-appearance:none;appearance:none;background-color:transparent;border:1px solid ", ({ theme: r }) => r.font.color.secondary, ";border-radius:", ({ theme: r }) => r.border.radius.rounded, ";height:", ({ "radio-size": r }) => r === "large" ? "18px" : "16px", ";margin:0;margin-left:3px;position:relative;width:", ({ "radio-size": r }) => r === "large" ? "18px" : "16px", ";:hover{background-color:", ({ theme: r, checked: o }) => {
+  if (!o)
+    return r.background.tertiary;
+}, `;outline:4px solid
+      `, ({ theme: r, checked: o }) => o ? r.color.transparent.blue2 : r.background.tertiary, ";}&:checked{background-color:", ({ theme: r }) => r.color.blue, ";border:none;&::after{background-color:", ({ theme: r }) => r.grayScale.gray1, ";border-radius:50%;content:'';height:", ({ "radio-size": r }) => r === "large" ? "8px" : "6px", ";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:", ({ "radio-size": r }) => r === "large" ? "8px" : "6px", ";}}&:disabled{cursor:not-allowed;opacity:0.12;}"), Zr = /* @__PURE__ */ d("label", {
+  target: "e1ihb4832"
+})("color:", ({ theme: r }) => r.font.color.primary, ";cursor:pointer;font-size:", ({ theme: r }) => r.font.size.sm, ";font-weight:", ({ theme: r }) => r.font.weight.regular, ";margin-left:", ({ theme: r, labelPosition: o }) => o === "right" ? r.spacing(2) : "0px", ";margin-right:", ({ theme: r, labelPosition: o }) => o === "left" ? r.spacing(2) : "0px", ";opacity:", ({ disabled: r }) => r ? 0.32 : 1, ";"), Z = ({ checked: r, className: o, name: n = "input-radio", disabled: a = !1, label: t, labelPosition: e = "right", onChange: c, onCheckedChange: s, size: l = "small", value: u }) => {
+  const g = (x) => {
+    c?.(x), s?.(x.target.checked);
+  }, y = L.useId();
+  return /* @__PURE__ */ b(Qr, {
+    className: o,
+    labelPosition: e,
+    children: [
+      /* @__PURE__ */ i(Xr, {
+        type: "radio",
+        id: y,
+        name: n,
+        "data-testid": "input-radio",
+        tabIndex: -1,
+        checked: r,
+        value: u || t,
+        "radio-size": l,
+        disabled: a,
+        onChange: g,
+        initial: {
+          scale: 0.95
+        },
+        animate: {
+          scale: r ? 1.05 : 0.95
+        },
+        transition: {
+          type: "spring",
+          stiffness: 300,
+          damping: 20
+        }
+      }),
+      t && /* @__PURE__ */ i(Zr, {
+        htmlFor: y,
+        labelPosition: e,
+        disabled: a,
+        children: t
+      })
+    ]
+  });
+};
+Z.Group = Nr;
+const ro = /* @__PURE__ */ d("button", {
+  target: "e1krysxj0"
+})("background-color:", ({ theme: r }) => r.background.secondary, ";border:1px solid ", ({ theme: r }) => r.border.color.medium, ";border-radius:", ({ theme: r }) => r.border.radius.md, ";display:flex;padding:", ({ theme: r }) => r.spacing(4), " ", ({ theme: r }) => r.spacing(3), ";position:relative;width:100%;:hover{cursor:pointer;background:", ({ theme: r }) => r.background.tertiary, ";}"), oo = /* @__PURE__ */ d("div", {
+  target: "e1krysxj1"
+})("position:absolute;right:", ({ theme: r }) => r.spacing(2), ";top:", ({ theme: r }) => r.spacing(2), ";"), Uo = ({ children: r, checked: o, handleChange: n }) => /* @__PURE__ */ b(ro, {
+  onClick: n,
+  children: [
+    /* @__PURE__ */ i(oo, {
+      children: /* @__PURE__ */ i(Z, {
+        checked: o
+      })
+    }),
+    r
+  ]
+}), no = (r) => /* @__PURE__ */ L.createElement("svg", { width: 8, height: 32, xmlns: "http://www.w3.org/2000/svg", fill: "none", ...r }, /* @__PURE__ */ L.createElement("path", { stroke: "null", id: "svg_1", fill: "#D6D6D6", d: "m0,7.5l4.5,0c0.82843,0 1.5,0.67157 1.5,1.5c0,0.82843 -0.67157,1.5 -1.5,1.5l-4.5,0l0,-3z" }), /* @__PURE__ */ L.createElement("path", { id: "svg_2", fill: "#D6D6D6", d: "m0,14.5l4.5,0c0.82843,0 1.5,0.6716 1.5,1.5c0,0.8284 -0.67157,1.5 -1.5,1.5l-4.5,0l0,-3z" }), /* @__PURE__ */ L.createElement("path", { id: "svg_3", fill: "#D6D6D6", d: "m0,21.5l4.5,0c0.82843,0 1.5,0.6716 1.5,1.5c0,0.8284 -0.67157,1.5 -1.5,1.5l-4.5,0l0,-3z" })), Jo = (r) => {
+  const o = r.size ?? 8, n = r.size ?? 32;
+  return /* @__PURE__ */ i(no, {
+    height: n,
+    width: o
+  });
+}, to = /* @__PURE__ */ d("div", {
+  target: "ekfo3ff0"
+})("align-items:center;display:flex;gap:", ({ theme: r }) => r.spacing(2), ";width:100%;"), ao = /* @__PURE__ */ d("div", {
+  target: "ekfo3ff1"
+})("align-items:center;background-color:", ({ theme: r }) => r.background.transparent.lighter, ";border:1px solid ", ({ theme: r }) => r.border.color.medium, ";border-radius:", ({ theme: r }) => r.border.radius.sm, ";box-sizing:border-box;display:flex;flex:1;gap:", ({ theme: r }) => r.spacing(1), ";height:32px;padding:0 ", ({ theme: r }) => r.spacing(2), ";&:focus-within{border-color:", ({ theme: r }) => r.color.blue, ";}"), eo = /* @__PURE__ */ d("div", {
+  target: "ekfo3ff2"
+})("align-items:center;color:", ({ theme: r, isFocused: o }) => o ? r.font.color.secondary : r.font.color.light, ";display:flex;justify-content:center;"), io = /* @__PURE__ */ d("input", {
+  target: "ekfo3ff3"
+})("background:transparent;border:none;color:", ({ theme: r }) => r.font.color.primary, ";flex:1;font-family:", ({ theme: r }) => r.font.family, ";font-size:", ({ theme: r }) => r.font.size.md, ";font-weight:", ({ theme: r }) => r.font.weight.regular, ";outline:none;width:100%;&::placeholder{color:", ({ theme: r }) => r.font.color.light, ";font-weight:", ({ theme: r }) => r.font.weight.medium, ";}&:disabled{color:", ({ theme: r }) => r.font.color.tertiary, ";}"), No = ({ value: r, onChange: o, placeholder: n, filterDropdown: a, autoFocus: t, disabled: e, className: c }) => {
+  const s = k(), [l, u] = T(!1), g = /* @__PURE__ */ i(Dr, {
+    Icon: fr,
+    variant: "secondary"
+  });
+  return /* @__PURE__ */ b(to, {
+    className: c,
+    children: [
+      /* @__PURE__ */ b(ao, {
+        children: [
+          /* @__PURE__ */ i(eo, {
+            isFocused: l,
+            children: /* @__PURE__ */ i(br, {
+              size: s.icon.size.md
+            })
+          }),
+          /* @__PURE__ */ i(io, {
+            value: r,
+            onChange: (y) => o(y.target.value),
+            onFocus: () => u(!0),
+            onBlur: () => u(!1),
+            placeholder: n,
+            autoFocus: t,
+            disabled: e
+          })
+        ]
+      }),
+      a && a(g)
+    ]
+  });
+};
+export {
+  Io as AnimatedButton,
+  Do as AnimatedLightIconButton,
+  K as BASE_CODE_EDITOR_THEME_ID,
+  Zo as Button,
+  Mo as ButtonGroup,
+  Uo as CardPicker,
+  nn as Checkbox,
+  tn as CheckboxAccent,
+  an as CheckboxShape,
+  en as CheckboxSize,
+  cn as CheckboxVariant,
+  Vo as CodeEditor,
+  To as ColorPickerButton,
+  R as ColorSchemeCard,
+  Ko as ColorSchemePicker,
+  Oo as CoreEditorHeader,
+  Fo as FloatingButton,
+  jo as FloatingButtonGroup,
+  Lr as FloatingIconButton,
+  Go as FloatingIconButtonGroup,
+  Dr as IconButton,
+  Ro as IconButtonGroup,
+  Jo as IconListViewGrip,
+  Tr as InsideButton,
+  Yo as LabelPosition,
+  Ao as LightButton,
+  dr as LightIconButton,
+  dn as LightIconButtonGroup,
+  Po as MainButton,
+  Z as Radio,
+  Nr as RadioGroup,
+  Wo as RadioSize,
+  _o as RoundedIconButton,
+  No as SearchInput,
+  Ar as StyledTabButton,
+  Ho as StyledTabContainer,
+  Pr as StyledTabHover,
+  qo as TabButton,
+  _r as TabContent,
+  sn as Toggle,
+  rn as baseTransitionTiming,
+  Hr as getBaseCodeEditorTheme
+};