nogbase-ui 1.0.0

package/dist/input.mjs

@@ -0,0 +1,1380 @@
+import { j as n } from "./jsx-runtime-R4VT8aVc.js";
+import { styled as l } from "@linaria/react";
+import { u as ar, g as cr } from "./useIsMobile-CVMKHNZ4.js";
+import { motion as A, useAnimation as dr, AnimatePresence as J } from "framer-motion";
+import * as w from "react";
+import j, { useContext as k, useMemo as tr, useState as M } from "react";
+import { Link as Y } from "react-router-dom";
+import { P as nr } from "./Pill-CzxYmDQR.js";
+import { t as e } from "./themeCssVariables-CBmoYPJ3.js";
+import { T as S } from "./ThemeProvider-CpY05Gd2.js";
+import { G as f } from "./MainColorNames-syigy4-h.js";
+import { C as N, I as lr, a as ir } from "./Checkmark-nXZm8BnM.js";
+import { B as wt, L as At, b as zt } from "./Checkmark-nXZm8BnM.js";
+import { o as B } from "./utils-BsFkjDy5.js";
+import { L as pr, C as ur } from "./ColorSample-tgmSZ-F7.js";
+import { C as Et, a as Tt, b as qt, c as Dt, d as Mt, L as Wt, T as Rt } from "./Toggle-DFCRkcpJ.js";
+import { a as xr, A as mr, T as gr } from "./AppTooltip-BGyiynP0.js";
+import br from "@monaco-editor/react";
+import { L as hr } from "./Loader-CVqckhmU.js";
+import { u as yr, R as fr } from "./useResizeHandle-BL0vTx8N.js";
+import { G as z } from "./GrayScaleDark-DLZkJnfs.js";
+const kr = (r, o, c, s, a, d) => {
+  const t = {
+    background: "transparent",
+    borderColor: "transparent",
+    borderWidthOverride: "",
+    boxShadow: "none",
+    color: e.font.color.secondary,
+    hoverBackground: "transparent",
+    activeBackground: "transparent"
+  };
+  switch (r) {
+    case "primary":
+      switch (c) {
+        case "default":
+          t.background = o ? e.background.primary : e.background.secondary, t.borderColor = o ? e.background.transparent.light : !s && a ? e.color.blue : e.background.transparent.light, t.borderWidthOverride = "1px 1px 1px 1px", t.boxShadow = !s && a ? `0 0 0 3px ${o ? e.background.transparent.medium : e.accent.tertiary}` : "none", t.color = o ? e.font.color.secondary : s ? e.font.color.extraLight : e.font.color.secondary, s ? (t.hoverBackground = t.background, t.activeBackground = t.background) : (t.hoverBackground = o ? e.background.secondary : e.background.tertiary, t.activeBackground = o ? e.background.tertiary : e.background.quaternary);
+          break;
+        case "blue":
+          t.background = o ? e.background.primary : e.color.blue, t.borderColor = o ? e.background.transparent.light : a ? e.color.blue : e.background.transparent.light, t.borderWidthOverride = "1px 1px 1px 1px", t.boxShadow = !s && a ? `0 0 0 3px ${o ? e.background.transparent.medium : e.accent.tertiary}` : "none", t.color = o ? e.color.blue : f.gray1, s ? (t.hoverBackground = t.background, t.activeBackground = t.background) : (t.hoverBackground = o ? e.background.secondary : e.color.blue10, t.activeBackground = o ? e.background.tertiary : e.color.blue12);
+          break;
+        case "danger":
+          t.background = o ? e.background.primary : e.color.red, t.borderColor = o ? e.background.transparent.light : a ? e.color.red : e.background.transparent.light, t.borderWidthOverride = "1px 1px", t.boxShadow = !s && a ? `0 0 0 3px ${o ? e.background.transparent.medium : e.color.red3}` : "none", t.color = o ? e.color.red : e.background.primary, s ? (t.hoverBackground = t.background, t.activeBackground = t.background) : (t.hoverBackground = o ? e.background.secondary : e.color.red8, t.activeBackground = o ? e.background.tertiary : e.color.red10);
+          break;
+      }
+      break;
+    case "secondary":
+    case "tertiary":
+      switch (c) {
+        case "default":
+          t.background = "transparent", t.borderColor = o ? r === "secondary" ? a || s ? f.gray1 : e.background.transparent.primary : a ? f.gray1 : "transparent" : r === "secondary" ? !s && a ? e.color.blue : e.background.transparent.medium : a ? e.color.blue : "transparent", t.borderWidthOverride = "1px 1px 1px 1px", t.boxShadow = !s && a ? `0 0 0 3px ${o ? e.background.transparent.medium : e.accent.tertiary}` : "none", t.color = o ? e.font.color.inverted : s ? e.font.color.extraLight : e.font.color.secondary, t.hoverBackground = o ? e.background.transparent.light : s ? "transparent" : e.background.transparent.light, t.activeBackground = o ? e.background.transparent.medium : s ? "transparent" : e.background.transparent.light;
+          break;
+        case "blue":
+          t.background = "transparent", t.borderColor = o ? r === "secondary" ? a || s ? f.gray1 : e.background.transparent.primary : a ? f.gray1 : "transparent" : r === "secondary" ? a ? e.color.blue : e.accent.primary : a ? e.color.blue : "transparent", t.borderWidthOverride = "1px 1px 1px 1px", t.boxShadow = !s && a ? `0 0 0 3px ${o ? e.background.transparent.medium : e.accent.tertiary}` : "none", t.color = o ? e.font.color.inverted : s ? e.accent.accent4060 : e.color.blue, t.hoverBackground = o ? e.background.transparent.light : s ? "transparent" : e.accent.tertiary, t.activeBackground = o ? e.background.transparent.medium : s ? "transparent" : e.accent.secondary;
+          break;
+        case "danger":
+          t.background = "transparent", t.borderColor = o ? r === "secondary" ? a || s ? f.gray1 : e.background.transparent.primary : a ? f.gray1 : "transparent" : r === "secondary" ? a ? e.color.red : e.border.color.danger : a ? e.color.red : "transparent", t.borderWidthOverride = "1px 1px 1px 1px", t.boxShadow = !s && a ? `0 0 0 3px ${o ? e.background.transparent.medium : e.color.red3}` : "none", t.color = o ? e.font.color.inverted : e.font.color.danger, t.hoverBackground = o ? e.background.transparent.light : s ? "transparent" : e.background.danger, t.activeBackground = o ? e.background.transparent.medium : s ? "transparent" : e.background.danger;
+          break;
+      }
+      break;
+  }
+  if (t.borderWidthOverride !== "" && d !== "standalone")
+    switch (d) {
+      case "left":
+        t.borderWidthOverride = "1px 0px 1px 1px";
+        break;
+      case "middle":
+        t.borderWidthOverride = "1px 0px 1px 0px";
+        break;
+      case "right":
+        t.borderWidthOverride = "1px 1px 1px 0px";
+        break;
+    }
+  return t;
+}, Sr = () => ({
+  position: r
+}) => {
+  switch (r) {
+    case "left":
+      return `${e.border.radius.sm} 0px 0px ${e.border.radius.sm}`;
+    case "right":
+      return `0px ${e.border.radius.sm} ${e.border.radius.sm} 0px`;
+    case "middle":
+      return "0px";
+    case "standalone":
+      return e.border.radius.sm;
+  }
+  return "";
+}, $r = () => ({
+  disabled: r
+}) => r ? "not-allowed" : "pointer", vr = () => ({
+  size: r
+}) => r === "small" ? "24px" : "32px", Cr = () => ({
+  justify: r
+}) => r ?? "", Br = () => ({
+  fullWidth: r
+}) => r ? "100%" : "auto", jr = /* @__PURE__ */ l("button")({
+  name: "StyledButton",
+  class: "s1viq0d",
+  propsAsIs: !1,
+  vars: {
+    "s1viq0d-0": [Sr()],
+    "s1viq0d-1": [$r()],
+    "s1viq0d-2": [vr()],
+    "s1viq0d-3": [Cr()],
+    "s1viq0d-4": [Br()]
+  }
+}), _r = /* @__PURE__ */ l("span")({
+  name: "StyledSoonPillContainer",
+  class: "s15swgyq",
+  propsAsIs: !1
+}), Ir = () => ({
+  accent: r
+}) => {
+  switch (r) {
+    case "blue":
+      return e.border.color.blue;
+    case "danger":
+      return e.border.color.danger;
+    default:
+      return e.font.color.light;
+  }
+}, wr = () => ({
+  buttonSize: r
+}) => r === "small" ? e.spacing[2] : e.spacing[4], Ar = /* @__PURE__ */ l("div")({
+  name: "StyledSeparator",
+  class: "s1u288ix",
+  propsAsIs: !1,
+  vars: {
+    "s1u288ix-0": [Ir()],
+    "s1u288ix-1": [wr()]
+  }
+}), zr = () => ({
+  variant: r,
+  accent: o
+}) => {
+  switch (o) {
+    case "blue":
+      return e.border.color.blue;
+    case "danger":
+      return r === "primary" ? e.border.color.danger : e.color.red8;
+    default:
+      return e.font.color.light;
+  }
+}, Lr = /* @__PURE__ */ l("div")({
+  name: "StyledShortcutLabel",
+  class: "s4om9oh",
+  propsAsIs: !1,
+  vars: {
+    "s4om9oh-0": [zr()]
+  }
+}), Er = () => A.div, Q = /* @__PURE__ */ l(Er())({
+  name: "StyledMotion",
+  class: "s1158gvo",
+  propsAsIs: !0
+}), lt = ({
+  className: r,
+  Icon: o,
+  animatedSvg: c,
+  title: s,
+  fullWidth: a = !1,
+  variant: d = "primary",
+  inverted: t = !1,
+  size: i = "medium",
+  accent: p = "default",
+  position: u = "standalone",
+  soon: x = !1,
+  disabled: g = !1,
+  justify: h = "flex-start",
+  focus: y = !1,
+  onClick: b,
+  to: L,
+  target: W,
+  dataTestId: R,
+  hotkeys: _,
+  ariaLabel: O,
+  animate: E,
+  transition: T,
+  dataClickOutsideId: F,
+  dataGloballyPreventClickOutside: G,
+  soonLabel: q = "Soon"
+}) => {
+  const {
+    theme: D
+  } = k(S), H = ar(), m = x || g, v = tr(() => {
+    const $ = kr(d, t, p, m, y, u);
+    return {
+      "--abtn-bg": $.background,
+      "--abtn-border-color": $.borderColor,
+      "--abtn-border-width": $.borderWidthOverride || void 0,
+      "--abtn-box-shadow": $.boxShadow,
+      "--abtn-color": $.color,
+      "--abtn-hover-bg": $.hoverBackground,
+      "--abtn-active-bg": $.activeBackground
+    };
+  }, [d, t, p, m, y, u]), I = L ? Y : "button";
+  return /* @__PURE__ */ n.jsxs(jr, { as: I, fullWidth: a, size: i, position: u, disabled: m, justify: h, className: r, style: v, onClick: b, to: L, target: W, "data-testid": R, "aria-label": O, "data-click-outside-id": F, "data-globally-prevent-click-outside": G, children: [
+    o && /* @__PURE__ */ n.jsx(Q, { animate: E, transition: T, children: /* @__PURE__ */ n.jsx(o, { size: D.icon.size.sm }) }),
+    c && /* @__PURE__ */ n.jsx(Q, { animate: E, transition: T, children: c }),
+    s,
+    _ && !H && /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+      /* @__PURE__ */ n.jsx(Ar, { buttonSize: i, accent: p }),
+      /* @__PURE__ */ n.jsx(Lr, { variant: d, accent: p, children: _.join(cr()) })
+    ] }),
+    x && /* @__PURE__ */ n.jsx(_r, { children: /* @__PURE__ */ n.jsx(nr, { label: q }) })
+  ] });
+}, Tr = () => ({
+  disabled: r,
+  focus: o
+}) => !r && o ? `1px solid ${e.color.blue}` : "none", qr = () => ({
+  disabled: r,
+  focus: o
+}) => !r && o ? `0 0 0 3px ${e.color.blue3}` : "none", Dr = () => ({
+  accent: r,
+  active: o,
+  disabled: c,
+  focus: s
+}) => {
+  switch (r) {
+    case "secondary":
+      return o || s ? e.color.blue : c ? e.font.color.extraLight : e.font.color.secondary;
+    case "tertiary":
+      return o || s ? e.color.blue : c ? e.font.color.extraLight : e.font.color.tertiary;
+  }
+  return "";
+}, Mr = () => ({
+  disabled: r
+}) => r ? "not-allowed" : "pointer", Wr = () => ({
+  size: r
+}) => r === "small" ? "24px" : "32px", Rr = () => ({
+  disabled: r
+}) => r ? "transparent" : e.background.transparent.light, Or = () => ({
+  disabled: r
+}) => r ? "transparent" : e.background.transparent.medium, Fr = /* @__PURE__ */ l("button")({
+  name: "StyledButton",
+  class: "se5o8nq",
+  propsAsIs: !1,
+  vars: {
+    "se5o8nq-0": [Tr()],
+    "se5o8nq-1": [qr()],
+    "se5o8nq-2": [Dr()],
+    "se5o8nq-3": [Mr()],
+    "se5o8nq-4": [Wr()],
+    "se5o8nq-5": [Rr()],
+    "se5o8nq-6": [Or()]
+  }
+}), Gr = () => A.div, Hr = /* @__PURE__ */ l(Gr())({
+  name: "StyledIconContainer",
+  class: "s1dbmpz0",
+  propsAsIs: !0
+}), it = ({
+  "aria-label": r,
+  className: o,
+  testId: c,
+  animate: s,
+  transition: a,
+  Icon: d,
+  active: t = !1,
+  size: i = "small",
+  accent: p = "secondary",
+  disabled: u = !1,
+  focus: x = !1,
+  onClick: g,
+  title: h
+}) => {
+  const {
+    theme: y
+  } = k(S);
+  return /* @__PURE__ */ n.jsx(Fr, { "data-testid": c, "aria-label": r, onClick: g, disabled: u, focus: x && !u, accent: p, className: o, size: i, active: t, title: h, children: /* @__PURE__ */ n.jsx(Hr, { animate: s, transition: a, children: d && /* @__PURE__ */ n.jsx(d, { size: i === "medium" ? y.icon.size.md : y.icon.size.sm }) }) });
+}, Pr = /* @__PURE__ */ l("div")({
+  name: "StyledButtonGroupContainer",
+  class: "shh5sp6",
+  propsAsIs: !1
+}), pt = ({
+  className: r,
+  children: o,
+  variant: c,
+  size: s,
+  accent: a
+}) => /* @__PURE__ */ n.jsx(Pr, { className: r, children: j.Children.map(o, (d, t) => {
+  if (!j.isValidElement(d)) return null;
+  let i;
+  t === 0 ? i = "left" : t === o.length - 1 ? i = "right" : i = "middle";
+  const p = {
+    position: i,
+    variant: c,
+    accent: a,
+    size: s
+  };
+  return B(c) && (p.variant = c), B(a) && (p.accent = a), B(s) && (p.size = s), j.cloneElement(d, p);
+}) }), Vr = () => ({
+  isSelected: r
+}) => r ? e.background.transparent.medium : "transparent", Kr = /* @__PURE__ */ l("div")({
+  name: "StyledButtonWrapper",
+  class: "s1xhwzl4",
+  propsAsIs: !1,
+  vars: {
+    "s1xhwzl4-0": [Vr()]
+  }
+}), ut = ({
+  colorName: r,
+  isSelected: o,
+  onClick: c
+}) => /* @__PURE__ */ n.jsx(Kr, { isSelected: o, children: /* @__PURE__ */ n.jsx(pr, { size: "medium", Icon: () => /* @__PURE__ */ n.jsx(ur, { colorName: r }), onClick: c }) }), Ur = () => ({
+  applyBlur: r
+}) => r ? "blur(20px)" : "none", Yr = () => ({
+  focus: r
+}) => r ? `1px solid ${e.color.blue}` : "none", Jr = () => ({
+  position: r
+}) => {
+  switch (r) {
+    case "left":
+      return `${e.border.radius.sm} 0px 0px ${e.border.radius.sm}`;
+    case "right":
+      return `0px ${e.border.radius.sm} ${e.border.radius.sm} 0px`;
+    case "middle":
+      return "0px";
+    case "standalone":
+      return e.border.radius.sm;
+  }
+  return "";
+}, Nr = () => ({
+  applyShadow: r,
+  focus: o
+}) => r ? `0px 2px 4px 0px ${e.background.transparent.light}, 0px 0px 4px 0px ${e.background.transparent.medium}${o ? `,0 0 0 3px ${e.color.blue3}` : ""}` : o ? `0 0 0 3px ${e.color.blue3}` : "none", Qr = () => ({
+  disabled: r,
+  focus: o
+}) => r ? e.font.color.extraLight : o ? e.color.blue : e.font.color.secondary, Xr = () => ({
+  disabled: r
+}) => r ? "not-allowed" : "pointer", Zr = () => ({
+  size: r
+}) => r === "small" ? "24px" : "32px", re = () => ({
+  disabled: r
+}) => r ? "transparent" : e.background.transparent.lighter, ee = () => ({
+  disabled: r
+}) => r ? "transparent" : e.background.transparent.medium, oe = /* @__PURE__ */ l("button")({
+  name: "StyledButton",
+  class: "seo7n1c",
+  propsAsIs: !1,
+  vars: {
+    "seo7n1c-0": [Ur()],
+    "seo7n1c-1": [Yr()],
+    "seo7n1c-2": [Jr()],
+    "seo7n1c-3": [Nr()],
+    "seo7n1c-4": [Qr()],
+    "seo7n1c-5": [Xr()],
+    "seo7n1c-6": [Zr()],
+    "seo7n1c-7": [re()],
+    "seo7n1c-8": [ee()]
+  }
+}), xt = ({
+  className: r,
+  Icon: o,
+  title: c,
+  size: s = "small",
+  position: a = "standalone",
+  applyBlur: d = !0,
+  applyShadow: t = !0,
+  disabled: i = !1,
+  focus: p = !1,
+  to: u
+}) => {
+  const {
+    theme: x
+  } = k(S);
+  return /* @__PURE__ */ n.jsxs(oe, { disabled: i, focus: p && !i, size: s, applyBlur: d, applyShadow: t, position: a, className: r, to: u, as: u ? Y : "button", children: [
+    o && /* @__PURE__ */ n.jsx(o, { size: x.icon.size.sm }),
+    c
+  ] });
+}, te = /* @__PURE__ */ l("div")({
+  name: "StyledFloatingButtonGroupContainer",
+  class: "s1o9b5vh",
+  propsAsIs: !1
+}), mt = ({
+  children: r,
+  size: o,
+  className: c
+}) => /* @__PURE__ */ n.jsx(te, { className: c, children: j.Children.map(r, (s, a) => {
+  let d;
+  a === 0 ? d = "left" : a === r.length - 1 ? d = "right" : d = "middle";
+  const t = {
+    position: d,
+    size: o,
+    applyShadow: !1,
+    applyBlur: !1
+  };
+  return B(o) && (t.size = o), j.cloneElement(s, t);
+}) }), ne = () => ({
+  applyBlur: r
+}) => r ? e.blur.medium : "none", se = () => ({
+  isActive: r
+}) => r ? e.background.transparent.medium : e.background.primary, ae = () => ({
+  focus: r
+}) => r ? `1px solid ${e.color.blue}` : `1px solid ${e.border.color.strong}`, ce = () => ({
+  position: r
+}) => {
+  switch (r) {
+    case "left":
+      return `${e.border.radius.sm} 0px 0px ${e.border.radius.sm}`;
+    case "right":
+      return `0px ${e.border.radius.sm} ${e.border.radius.sm} 0px`;
+    case "middle":
+      return "0px";
+    case "standalone":
+      return e.border.radius.sm;
+  }
+  return "";
+}, de = () => ({
+  applyShadow: r,
+  focus: o
+}) => r ? e.boxShadow.light : o ? `0 0 0 3px ${e.color.blue3}` : "none", le = () => ({
+  disabled: r,
+  focus: o
+}) => r ? e.font.color.extraLight : o ? e.color.blue : e.font.color.tertiary, ie = () => ({
+  disabled: r
+}) => r ? "not-allowed" : "pointer", pe = () => ({
+  position: r,
+  size: o
+}) => (o === "small" ? 24 : 32) - (r === "standalone" ? 0 : 4), ue = () => ({
+  disabled: r
+}) => r ? "transparent" : e.background.transparent.lighter, xe = () => ({
+  disabled: r
+}) => r ? "transparent" : e.background.transparent.medium, me = /* @__PURE__ */ l("button")({
+  name: "StyledButton",
+  class: "s1v80m03",
+  propsAsIs: !1,
+  vars: {
+    "s1v80m03-0": [ne()],
+    "s1v80m03-1": [se()],
+    "s1v80m03-2": [ae()],
+    "s1v80m03-3": [ce()],
+    "s1v80m03-4": [de()],
+    "s1v80m03-5": [le()],
+    "s1v80m03-6": [ie()],
+    "s1v80m03-7": [pe(), "px"],
+    "s1v80m03-8": [ue()],
+    "s1v80m03-9": [xe()]
+  }
+}), ge = ({
+  className: r,
+  Icon: o,
+  size: c = "small",
+  position: s = "standalone",
+  applyShadow: a = !0,
+  applyBlur: d = !0,
+  disabled: t = !1,
+  focus: i = !1,
+  onClick: p,
+  isActive: u
+}) => {
+  const {
+    theme: x
+  } = k(S);
+  return /* @__PURE__ */ n.jsx(me, { disabled: t, focus: i && !t, size: c, applyShadow: a, applyBlur: d, className: r, position: s, onClick: p, isActive: u, children: o && /* @__PURE__ */ n.jsx(o, { size: x.icon.size.md }) });
+}, be = /* @__PURE__ */ l("div")({
+  name: "StyledFloatingIconButtonGroupContainer",
+  class: "s1kppr65",
+  propsAsIs: !1
+}), gt = ({
+  iconButtons: r,
+  size: o,
+  className: c
+}) => /* @__PURE__ */ n.jsx(be, { className: c, children: r.map(({
+  Icon: s,
+  onClick: a,
+  isActive: d
+}, t) => {
+  const i = r.length === 1 ? "standalone" : t === 0 ? "left" : t === r.length - 1 ? "right" : "middle";
+  return /* @__PURE__ */ n.jsx(ge, { applyBlur: !1, applyShadow: !1, Icon: s, onClick: a, position: i, size: o, isActive: d }, `floating-icon-button-${t}`);
+}) }), he = (r, o, c, s) => {
+  const a = !c && s;
+  switch (r) {
+    case "primary":
+      switch (o) {
+        case "default":
+          return {
+            background: e.background.secondary,
+            borderColor: s ? e.color.blue : e.background.transparent.light,
+            borderWidthOverride: a ? "1px 1px" : void 0,
+            boxShadow: a ? `0 0 0 3px ${e.accent.tertiary}` : "none",
+            color: c ? e.font.color.extraLight : e.font.color.secondary,
+            opacity: 1,
+            hoverBackground: c ? e.background.secondary : e.background.tertiary,
+            activeBackground: c ? e.background.secondary : e.background.quaternary
+          };
+        case "blue":
+          return {
+            background: e.color.blue,
+            borderColor: c ? "transparent" : s ? e.color.blue : e.background.transparent.light,
+            borderWidthOverride: a ? "1px 1px" : void 0,
+            boxShadow: a ? `0 0 0 3px ${e.accent.tertiary}` : "none",
+            color: e.grayScale.gray1,
+            opacity: c ? 0.24 : 1,
+            hoverBackground: c ? e.color.blue : e.color.blue10,
+            activeBackground: c ? e.color.blue : e.color.blue12
+          };
+        case "danger":
+          return {
+            background: e.color.red,
+            borderColor: c ? "transparent" : s ? e.color.red : e.background.transparent.light,
+            borderWidthOverride: a ? "1px 1px" : void 0,
+            boxShadow: a ? `0 0 0 3px ${e.color.red3}` : "none",
+            color: e.grayScale.gray1,
+            opacity: c ? 0.24 : 1,
+            hoverBackground: c ? e.color.red : e.color.red10,
+            activeBackground: c ? e.color.red : e.color.red10
+          };
+      }
+      break;
+    case "secondary":
+    case "tertiary":
+      switch (o) {
+        case "default":
+          return {
+            background: s ? e.background.transparent.primary : "transparent",
+            borderColor: r === "secondary" ? a ? e.color.blue : e.background.transparent.medium : s ? e.color.blue : "transparent",
+            borderWidthOverride: a ? "1px 1px" : void 0,
+            boxShadow: a ? `0 0 0 3px ${e.accent.tertiary}` : "none",
+            color: c ? e.font.color.extraLight : r === "secondary" ? e.font.color.secondary : e.font.color.tertiary,
+            opacity: 1,
+            hoverBackground: c ? "transparent" : e.background.transparent.light,
+            activeBackground: c ? "transparent" : e.background.transparent.light
+          };
+        case "blue":
+          return {
+            background: s ? e.background.transparent.primary : "transparent",
+            borderColor: r === "secondary" ? c ? e.color.blue5 : e.color.blue : s ? e.color.blue : "transparent",
+            borderWidthOverride: a ? "1px 1px" : void 0,
+            boxShadow: a ? `0 0 0 3px ${e.accent.tertiary}` : "none",
+            color: c ? e.accent.accent4060 : e.color.blue,
+            opacity: 1,
+            hoverBackground: c ? "transparent" : e.accent.tertiary,
+            activeBackground: c ? "transparent" : e.accent.secondary
+          };
+        case "danger":
+          return {
+            background: "transparent",
+            borderColor: r === "secondary" ? e.border.color.danger : s ? e.color.red : "transparent",
+            borderWidthOverride: a ? "1px 1px" : void 0,
+            boxShadow: a ? `0 0 0 3px ${e.color.red3}` : "none",
+            color: c ? e.color.red5 : e.font.color.danger,
+            opacity: 1,
+            hoverBackground: c ? "transparent" : e.background.danger,
+            activeBackground: c ? "transparent" : e.background.danger
+          };
+      }
+  }
+  return {
+    background: "transparent",
+    borderColor: "transparent",
+    boxShadow: "none",
+    color: e.font.color.secondary,
+    opacity: 1,
+    hoverBackground: "transparent",
+    activeBackground: "transparent"
+  };
+}, ye = () => ({
+  position: r
+}) => {
+  switch (r) {
+    case "left":
+      return `${e.border.radius.sm} 0px 0px ${e.border.radius.sm}`;
+    case "right":
+      return `0px ${e.border.radius.sm} ${e.border.radius.sm} 0px`;
+    case "middle":
+      return "0px";
+    case "standalone":
+      return e.border.radius.sm;
+  }
+  return "";
+}, fe = () => ({
+  variant: r,
+  position: o
+}) => {
+  switch (r) {
+    case "primary":
+    case "secondary":
+      return o === "middle" ? "1px 0px" : "1px";
+    case "tertiary":
+      return "0";
+  }
+  return "";
+}, ke = () => ({
+  disabled: r
+}) => r ? "not-allowed" : "pointer", Se = () => ({
+  size: r
+}) => r === "small" ? "24px" : "32px", $e = /* @__PURE__ */ l("button")({
+  name: "StyledButton",
+  class: "s1kfpd8m",
+  propsAsIs: !1,
+  vars: {
+    "s1kfpd8m-0": [ye()],
+    "s1kfpd8m-1": [fe()],
+    "s1kfpd8m-2": [ke()],
+    "s1kfpd8m-3": [Se()]
+  }
+}), ve = ({
+  className: r,
+  Icon: o,
+  variant: c = "primary",
+  size: s = "medium",
+  accent: a = "default",
+  position: d = "standalone",
+  disabled: t = !1,
+  focus: i = !1,
+  dataTestId: p,
+  ariaLabel: u,
+  onClick: x,
+  to: g
+}) => {
+  const {
+    theme: h
+  } = k(S), y = tr(() => {
+    const b = he(c, a, t, i);
+    return {
+      "--ibtn-bg": b.background,
+      "--ibtn-border-color": b.borderColor,
+      "--ibtn-border-width": b.borderWidthOverride || void 0,
+      "--ibtn-box-shadow": b.boxShadow,
+      "--ibtn-color": b.color,
+      "--ibtn-opacity": b.opacity,
+      "--ibtn-hover-bg": b.hoverBackground,
+      "--ibtn-active-bg": b.activeBackground
+    };
+  }, [c, a, t, i]);
+  return /* @__PURE__ */ n.jsx($e, { "data-testid": p, variant: c, size: s, position: d, disabled: t, focus: i, accent: a, className: r, onClick: x, "aria-label": u, to: g, style: y, children: o && /* @__PURE__ */ n.jsx(o, { size: h.icon.size.md }) });
+}, Ce = () => ({
+  disabled: r
+}) => r ? "not-allowed" : "pointer", Be = /* @__PURE__ */ l("button")({
+  name: "StyledButton",
+  class: "su9t33x",
+  propsAsIs: !1,
+  vars: {
+    "su9t33x-0": [Ce()]
+  }
+}), je = ({
+  className: r,
+  Icon: o,
+  onClick: c,
+  disabled: s = !1
+}) => {
+  const {
+    theme: a
+  } = k(S);
+  return /* @__PURE__ */ n.jsx(Be, { className: r, onClick: c, disabled: s, children: o && /* @__PURE__ */ n.jsx(o, { size: a.icon.size.sm }) });
+}, _e = () => ({
+  disabled: r
+}) => r ? "inherit" : e.background.transparent.lighter, Ie = /* @__PURE__ */ l("div")({
+  name: "StyledIconButtonGroupContainer",
+  class: "s1ap29xl",
+  propsAsIs: !1,
+  vars: {
+    "s1ap29xl-0": [_e()]
+  }
+}), bt = ({
+  iconButtons: r,
+  disabled: o,
+  className: c
+}) => /* @__PURE__ */ n.jsx(Ie, { className: c, disabled: o, children: r.map(({
+  Icon: s,
+  onClick: a
+}, d) => /* @__PURE__ */ n.jsx(je, { Icon: s, onClick: a, disabled: o }, d)) }), we = () => ({
+  variant: r,
+  disabled: o
+}) => {
+  if (o === !0)
+    return e.background.secondary;
+  switch (r) {
+    case "primary":
+      return e.background.primaryInverted;
+    case "secondary":
+      return e.background.primary;
+    default:
+      return e.background.primary;
+  }
+}, Ae = () => ({
+  disabled: r,
+  variant: o
+}) => {
+  if (r === !0)
+    return e.background.transparent.lighter;
+  switch (o) {
+    case "primary":
+      return e.background.transparent.strong;
+    case "secondary":
+      return e.border.color.medium;
+    default:
+      return e.background.primary;
+  }
+}, ze = () => ({
+  disabled: r
+}) => r ? "none" : e.boxShadow.light, Le = () => ({
+  variant: r,
+  disabled: o
+}) => {
+  if (o === !0)
+    return e.font.color.light;
+  switch (r) {
+    case "primary":
+      return e.font.color.inverted;
+    case "secondary":
+      return e.font.color.primary;
+    default:
+      return e.font.color.primary;
+  }
+}, Ee = () => ({
+  disabled: r
+}) => r ? "not-allowed" : "pointer", Te = () => ({
+  fullWidth: r,
+  width: o
+}) => r ? "100%" : o ? `${o}px` : "auto", qe = () => ({
+  variant: r,
+  disabled: o
+}) => r === "secondary" ? e.background.tertiary : o ? e.background.secondary : e.background.primaryInvertedHover, De = /* @__PURE__ */ l("button")({
+  name: "StyledButton",
+  class: "s1pmufn7",
+  propsAsIs: !1,
+  vars: {
+    "s1pmufn7-0": [we()],
+    "s1pmufn7-1": [Ae()],
+    "s1pmufn7-2": [ze()],
+    "s1pmufn7-3": [Le()],
+    "s1pmufn7-4": [Ee()],
+    "s1pmufn7-5": [Te()],
+    "s1pmufn7-6": [qe()]
+  }
+}), ht = ({
+  Icon: r,
+  title: o,
+  width: c,
+  fullWidth: s = !1,
+  variant: a = "primary",
+  type: d,
+  onClick: t,
+  disabled: i,
+  className: p
+}) => {
+  const {
+    theme: u
+  } = k(S);
+  return /* @__PURE__ */ n.jsxs(De, { className: p, disabled: i, fullWidth: s, width: c, onClick: t, type: d, variant: a, children: [
+    r && /* @__PURE__ */ n.jsx(r, { size: u.icon.size.sm }),
+    o
+  ] });
+}, Me = () => ({
+  size: r
+}) => r === "small" ? "20px" : "24px", We = /* @__PURE__ */ l("button")({
+  name: "StyledIconButton",
+  class: "sfotzns",
+  propsAsIs: !1,
+  vars: {
+    "sfotzns-0": [Me()]
+  }
+}), yt = ({
+  Icon: r,
+  onClick: o,
+  disabled: c,
+  className: s,
+  size: a = "small"
+}) => {
+  const {
+    theme: d
+  } = k(S);
+  return /* @__PURE__ */ n.jsx(We, { className: s, disabled: c, onClick: o, size: a, children: /* @__PURE__ */ n.jsx(r, { size: d.icon.size.md }) });
+}, Re = () => ({
+  active: r,
+  disabled: o
+}) => r ? e.font.color.primary : o ? e.font.color.light : e.font.color.secondary, Oe = () => ({
+  disabled: r
+}) => r ? "none" : "", Fe = () => ({
+  active: r
+}) => r ? e.border.color.inverted : "transparent", Ge = /* @__PURE__ */ l("button")({
+  name: "StyledTabButton",
+  class: "sqtrnip",
+  propsAsIs: !1,
+  vars: {
+    "sqtrnip-0": [Re()],
+    "sqtrnip-1": [Oe()],
+    "sqtrnip-2": [Fe()]
+  }
+}), He = () => ({
+  active: r,
+  disabled: o
+}) => r ? e.font.color.primary : o ? e.font.color.light : e.font.color.secondary, Pe = () => ({
+  active: r
+}) => r ? e.border.color.inverted : "transparent", ft = /* @__PURE__ */ l("div")({
+  name: "StyledTabContainer",
+  class: "sitx1xn",
+  propsAsIs: !1,
+  vars: {
+    "sitx1xn-0": [He()],
+    "sitx1xn-1": [Pe()]
+  }
+}), Ve = () => ({
+  contentSize: r
+}) => r === "sm" ? `${e.spacing[1]} ${e.spacing[2]}` : `${e.spacing[2]} ${e.spacing[2]}`, Ke = /* @__PURE__ */ l("span")({
+  name: "StyledTabHover",
+  class: "svcqkat",
+  propsAsIs: !1,
+  vars: {
+    "svcqkat-0": [Ve()]
+  }
+}), Ue = ({
+  active: r,
+  disabled: o,
+  LeftIcon: c,
+  title: s,
+  logo: a,
+  RightIcon: d,
+  pill: t,
+  contentSize: i = "sm",
+  className: p
+}) => {
+  const { theme: u } = k(S), x = r ? u.font.color.primary : o ? u.font.color.extraLight : u.font.color.secondary;
+  return /* @__PURE__ */ n.jsxs(Ke, { contentSize: i, className: p, children: [
+    c && /* @__PURE__ */ n.jsx(c, { color: x, size: u.icon.size.md }),
+    a && /* @__PURE__ */ n.jsx(xr, { avatarUrl: a, size: "md", placeholder: s }),
+    s,
+    d && /* @__PURE__ */ n.jsx(d, { color: x, size: u.icon.size.md }),
+    t && (typeof t == "string" ? /* @__PURE__ */ n.jsx(nr, { label: t }) : t)
+  ] });
+}, Ye = /* @__PURE__ */ l("div")({
+  name: "StyledTabTooltipWrapper",
+  class: "salkq59",
+  propsAsIs: !1
+}), kt = ({
+  id: r,
+  active: o,
+  disabled: c,
+  to: s,
+  LeftIcon: a,
+  className: d,
+  title: t,
+  onClick: i,
+  logo: p,
+  RightIcon: u,
+  pill: x,
+  contentSize: g = "sm",
+  disableTestId: h = !1,
+  tooltipContent: y
+}) => {
+  const b = `tab-${r}`;
+  return /* @__PURE__ */ n.jsxs(Ye, { id: b, children: [
+    /* @__PURE__ */ n.jsx(Ge, { "data-testid": h ? void 0 : `tab-${r}`, active: o, disabled: c, as: s ? Y : "button", to: s, className: d, onClick: i, children: /* @__PURE__ */ n.jsx(Ue, { id: r, active: o, disabled: c, LeftIcon: a, title: t, logo: p, RightIcon: u, pill: x, contentSize: g }) }),
+    y && /* @__PURE__ */ n.jsx(mr, { anchorSelect: `#${b}`, content: y, noArrow: !0, place: "bottom", positionStrategy: "fixed", delay: gr.shortDelay })
+  ] }, r);
+}, X = "baseCodeEditorTheme", C = (r) => {
+  const o = r.match(
+    /color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/
+  );
+  if (B(o)) {
+    const [, c, s, a, d] = o, t = Math.round(parseFloat(c) * 255).toString(16).padStart(2, "0"), i = Math.round(parseFloat(s) * 255).toString(16).padStart(2, "0"), p = Math.round(parseFloat(a) * 255).toString(16).padStart(2, "0");
+    if (B(d)) {
+      const u = Math.round(parseFloat(d) * 255).toString(16).padStart(2, "0");
+      return `#${t}${i}${p}${u}`;
+    }
+    return `#${t}${i}${p}`;
+  }
+  return r;
+}, Je = (r) => ({
+  base: "vs",
+  inherit: !0,
+  rules: [
+    {
+      token: "",
+      foreground: C(r.code.text.gray),
+      fontStyle: "bold"
+    },
+    {
+      token: "keyword",
+      foreground: C(r.code.text.sky)
+    },
+    {
+      token: "delimiter",
+      foreground: C(r.code.text.gray)
+    },
+    {
+      token: "string",
+      foreground: C(r.code.text.pink)
+    },
+    {
+      token: "comment",
+      foreground: C(r.code.text.orange)
+    }
+  ],
+  colors: {
+    "editor.background": "#00000000",
+    "editorCursor.foreground": C(r.font.color.primary),
+    "editorLineNumber.foreground": C(
+      r.font.color.extraLight
+    ),
+    "editorLineNumber.activeForeground": C(
+      r.font.color.light
+    ),
+    "editor.lineHighlightBackground": C(
+      r.background.tertiary
+    )
+  }
+}), Ne = () => ({
+  height: r
+}) => typeof r == "number" ? `${r}px` : r, Qe = () => ({
+  variant: r
+}) => r === "borderless" ? "none" : `1px solid ${e.border.color.medium}`, Xe = () => ({
+  variant: r
+}) => r === "default" ? `1px solid ${e.border.color.medium}` : "none", Ze = () => ({
+  variant: r
+}) => {
+  switch (r) {
+    case "default":
+      return e.border.radius.sm;
+    case "with-header":
+      return `0 0 ${e.border.radius.sm} ${e.border.radius.sm}`;
+    default:
+      return "0";
+  }
+}, ro = /* @__PURE__ */ l("div")({
+  name: "StyledEditorLoader",
+  class: "spsmn0o",
+  propsAsIs: !1,
+  vars: {
+    "spsmn0o-0": [Ne()],
+    "spsmn0o-1": [Qe()],
+    "spsmn0o-2": [Xe()],
+    "spsmn0o-3": [Ze()]
+  }
+}), eo = /* @__PURE__ */ l("div")({
+  name: "StyledCodeEditorContainer",
+  class: "s1pdjlmf",
+  propsAsIs: !1
+}), oo = () => ({
+  transparentBackground: r
+}) => r ? "transparent" : e.background.secondary, to = () => ({
+  variant: r
+}) => r !== "borderless" ? e.border.radius.sm : "0", no = () => ({
+  variant: r
+}) => {
+  switch (r) {
+    case "default":
+    case "with-header":
+      return `1px solid ${e.border.color.medium}`;
+    default:
+      return "none";
+  }
+}, so = () => ({
+  variant: r
+}) => {
+  switch (r) {
+    case "default":
+      return e.border.radius.sm;
+    case "with-header":
+      return `0 0 ${e.border.radius.sm} ${e.border.radius.sm}`;
+    default:
+      return "0";
+  }
+}, ao = () => ({
+  variant: r
+}) => r === "with-header" ? "none" : r === "default" ? `1px solid ${e.border.color.medium}` : "none", co = /* @__PURE__ */ l("div")({
+  name: "StyledEditorWrapper",
+  class: "s1r0a801",
+  propsAsIs: !1,
+  vars: {
+    "s1r0a801-0": [oo()],
+    "s1r0a801-1": [to()],
+    "s1r0a801-2": [no()],
+    "s1r0a801-3": [so()],
+    "s1r0a801-4": [ao()]
+  }
+}), St = ({
+  value: r,
+  language: o,
+  onMount: c,
+  onChange: s,
+  setMarkers: a,
+  onValidate: d,
+  height: t = 450,
+  variant: i = "default",
+  transparentBackground: p,
+  isLoading: u = !1,
+  options: x,
+  resizable: g = !1
+}) => {
+  const {
+    theme: h
+  } = k(S), [y, b] = M(void 0), [L, W] = M(void 0), [R, _] = M(!1), O = typeof t == "number" ? t : 450, {
+    size: E,
+    handleResizeStart: T,
+    handleResizeMove: F,
+    handleResizeEnd: G
+  } = yr({
+    initialSize: O
+  }), q = g ? E : t, D = (m, v) => {
+    const I = m?.getModel();
+    if (!B(I))
+      return;
+    const $ = a?.(I.getValue());
+    B($) && v?.editor.setModelMarkers(I, "customMarker", $);
+  }, H = (m) => {
+    R && m.stopPropagation();
+  };
+  return u ? /* @__PURE__ */ n.jsx(ro, { height: q, variant: i, children: /* @__PURE__ */ n.jsx(hr, {}) }) : /* @__PURE__ */ n.jsxs(eo, { onKeyDown: H, children: [
+    /* @__PURE__ */ n.jsx("input", { type: "hidden", "data-testid": "code-editor-value", value: r ?? "", readOnly: !0 }),
+    /* @__PURE__ */ n.jsx(co, { variant: i, transparentBackground: p, children: /* @__PURE__ */ n.jsx(br, { height: q, value: r, language: o, loading: "", onMount: (m, v) => {
+      b(v), W(m), v.editor.defineTheme(X, Je(h)), v.editor.setTheme(X), m.onDidFocusEditorWidget(() => {
+        _(!0);
+      }), m.onDidBlurEditorWidget(() => {
+        _(!1);
+      }), c?.(m, v), D(m, v);
+    }, onChange: (m) => {
+      B(m) && (s?.(m), D(L, y));
+    }, onValidate: (m) => {
+      d?.(m);
+    }, options: {
+      formatOnPaste: !0,
+      formatOnType: !0,
+      overviewRulerLanes: 0,
+      scrollbar: {
+        vertical: "hidden",
+        horizontal: "hidden"
+      },
+      minimap: {
+        enabled: !1
+      },
+      ...x
+    } }) }),
+    g && /* @__PURE__ */ n.jsx(fr, { onPointerDown: T, onPointerMove: F, onPointerUp: G })
+  ] });
+}, lo = /* @__PURE__ */ l("div")({
+  name: "StyledEditorHeader",
+  class: "s1g8du2o",
+  propsAsIs: !1
+}), Z = /* @__PURE__ */ l("div")({
+  name: "StyledElementContainer",
+  class: "s1djmuxl",
+  propsAsIs: !1
+}), $t = ({
+  title: r,
+  leftNodes: o,
+  rightNodes: c
+}) => /* @__PURE__ */ n.jsxs(lo, { children: [
+  /* @__PURE__ */ n.jsxs(Z, { children: [
+    o && o.map((s, a) => /* @__PURE__ */ n.jsx("div", { children: s }, `left-${a}`)),
+    r
+  ] }),
+  /* @__PURE__ */ n.jsx(Z, { children: c && c.map((s, a) => /* @__PURE__ */ n.jsx("div", { children: s }, `right-${a}`)) })
+] }), io = () => ({
+  variant: r
+}) => r === "Dark" ? z.gray4 : f.gray4, po = () => ({
+  variant: r
+}) => r === "Dark" ? `1px solid ${z.gray5}` : `1px solid ${f.gray5}`, uo = /* @__PURE__ */ l("div")({
+  name: "StyledColorSchemeBackground",
+  class: "sdnoz1c",
+  propsAsIs: !1,
+  vars: {
+    "sdnoz1c-0": [io()],
+    "sdnoz1c-1": [po()]
+  }
+}), xo = () => ({
+  variant: r
+}) => {
+  switch (r) {
+    case "Dark":
+      return z.gray1;
+    case "Light":
+      return f.gray1;
+  }
+  return "";
+}, mo = () => ({
+  variant: r
+}) => r === "Dark" ? `1px solid ${z.gray5}` : `1px solid ${f.gray5}`, go = () => ({
+  variant: r
+}) => r === "Dark" ? z.gray12 : f.gray12, bo = /* @__PURE__ */ l("div")({
+  name: "StyledColorSchemeContentBase",
+  class: "s18c1ucb",
+  propsAsIs: !1,
+  vars: {
+    "s18c1ucb-0": [xo()],
+    "s18c1ucb-1": [mo()],
+    "s18c1ucb-2": [go()]
+  }
+}), ho = A.create(bo), P = ({
+  variant: r,
+  controls: o,
+  style: c,
+  className: s,
+  onClick: a,
+  onMouseEnter: d,
+  onMouseLeave: t
+}) => /* @__PURE__ */ n.jsx(uo, { className: s, variant: r, style: c, onClick: a, onMouseEnter: d, onMouseLeave: t, children: /* @__PURE__ */ n.jsx(ho, { animate: o, variant: r, children: "Aa" }) }), rr = /* @__PURE__ */ l("div")({
+  name: "StyledContainer",
+  class: "s116vstx",
+  propsAsIs: !1
+}), yo = /* @__PURE__ */ l("div")({
+  name: "StyledMixedColorSchemeSegment",
+  class: "s1my8hdh",
+  propsAsIs: !1
+}), fo = /* @__PURE__ */ l("div")({
+  name: "StyledCheckmarkContainerBase",
+  class: "s1qkiuk3",
+  propsAsIs: !1
+}), er = A.create(fo), or = {
+  initial: {
+    opacity: 0
+  },
+  animate: {
+    opacity: 1
+  },
+  exit: {
+    opacity: 0
+  }
+}, V = ({
+  variant: r,
+  selected: o,
+  onClick: c
+}) => {
+  const s = dr(), a = () => {
+    s.start({
+      height: 61,
+      fontSize: "22px",
+      transition: {
+        duration: 0.1
+      }
+    });
+  }, d = () => {
+    s.start({
+      height: 56,
+      fontSize: "20px",
+      transition: {
+        duration: 0.1
+      }
+    });
+  };
+  return r === "System" ? /* @__PURE__ */ n.jsxs(rr, { children: [
+    /* @__PURE__ */ n.jsxs(yo, { onMouseEnter: a, onMouseLeave: d, onClick: c, children: [
+      /* @__PURE__ */ n.jsx(P, { style: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      }, controls: s, variant: "Light" }),
+      /* @__PURE__ */ n.jsx(P, { style: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      }, controls: s, variant: "Dark" })
+    ] }),
+    /* @__PURE__ */ n.jsx(J, { children: o && /* @__PURE__ */ n.jsx(er, { variants: or, initial: "initial", animate: "animate", exit: "exit", transition: {
+      duration: 0.3
+    }, children: /* @__PURE__ */ n.jsx(N, {}) }, "system") })
+  ] }) : /* @__PURE__ */ n.jsxs(rr, { children: [
+    /* @__PURE__ */ n.jsx(P, { onMouseEnter: a, onMouseLeave: d, controls: s, variant: r, onClick: c }),
+    /* @__PURE__ */ n.jsx(J, { children: o && /* @__PURE__ */ n.jsx(er, { variants: or, initial: "initial", animate: "animate", exit: "exit", transition: {
+      duration: 0.3
+    }, children: /* @__PURE__ */ n.jsx(N, {}) }, r) })
+  ] });
+}, ko = /* @__PURE__ */ l("div")({
+  name: "StyledContainer",
+  class: "s1mtn0on",
+  propsAsIs: !1
+}), K = /* @__PURE__ */ l("div")({
+  name: "StyledCardContainer",
+  class: "s1tmrvj8",
+  propsAsIs: !1
+}), U = /* @__PURE__ */ l("span")({
+  name: "StyledLabel",
+  class: "stz89lx",
+  propsAsIs: !1
+}), vt = ({
+  value: r,
+  onChange: o,
+  className: c,
+  lightLabel: s,
+  darkLabel: a,
+  systemLabel: d
+}) => /* @__PURE__ */ n.jsxs(ko, { className: c, children: [
+  /* @__PURE__ */ n.jsxs(K, { children: [
+    /* @__PURE__ */ n.jsx(V, { onClick: () => o("Light"), variant: "Light", selected: r === "Light" }),
+    /* @__PURE__ */ n.jsx(U, { children: s })
+  ] }),
+  /* @__PURE__ */ n.jsxs(K, { children: [
+    /* @__PURE__ */ n.jsx(V, { onClick: () => o("Dark"), variant: "Dark", selected: r === "Dark" }),
+    /* @__PURE__ */ n.jsx(U, { children: a })
+  ] }),
+  /* @__PURE__ */ n.jsxs(K, { children: [
+    /* @__PURE__ */ n.jsx(V, { onClick: () => o("System"), variant: "System", selected: r === "System" }),
+    /* @__PURE__ */ n.jsx(U, { children: d })
+  ] })
+] }), So = ({
+  value: r,
+  onChange: o,
+  onValueChange: c,
+  children: s
+}) => {
+  const a = (d) => {
+    o?.(d), c?.(d.target.value);
+  };
+  return /* @__PURE__ */ n.jsx(n.Fragment, { children: j.Children.map(s, (d) => j.isValidElement(d) ? j.cloneElement(d, {
+    style: { marginBottom: e.spacing[2] },
+    checked: d.props.value === r,
+    onChange: a
+  }) : d) });
+};
+var $o = /* @__PURE__ */ ((r) => (r.Large = "large", r.Small = "small", r))($o || {}), vo = /* @__PURE__ */ ((r) => (r.Left = "left", r.Right = "right", r))(vo || {});
+const Co = () => ({
+  labelPosition: r
+}) => r === "left" ? `
+    flex-direction: row-reverse;
+  ` : `
+    flex-direction: row;
+  `, Bo = /* @__PURE__ */ l("div")({
+  name: "StyledContainer",
+  class: "s1qz10pl",
+  propsAsIs: !1,
+  vars: {
+    "s1qz10pl-0": [Co()]
+  }
+}), jo = () => ({
+  "radio-size": r
+}) => r === "large" ? "18px" : "16px", _o = () => ({
+  checked: r
+}) => r ? "" : e.background.tertiary, Io = () => ({
+  checked: r
+}) => r ? e.color.transparent.blue2 : e.background.tertiary, wo = () => ({
+  "radio-size": r
+}) => r === "large" ? "8px" : "6px", Ao = /* @__PURE__ */ l("input")({
+  name: "StyledRadioInputBase",
+  class: "s13b90o4",
+  propsAsIs: !1,
+  vars: {
+    "s13b90o4-0": [jo()],
+    "s13b90o4-1": [_o()],
+    "s13b90o4-2": [Io()],
+    "s13b90o4-3": [wo()]
+  }
+}), zo = A.create(Ao), Lo = () => ({
+  labelPosition: r
+}) => r === "right" ? e.spacing[2] : "0px", Eo = () => ({
+  labelPosition: r
+}) => r === "left" ? e.spacing[2] : "0px", To = () => ({
+  disabled: r
+}) => r ? 0.32 : 1, qo = /* @__PURE__ */ l("label")({
+  name: "StyledLabel",
+  class: "s1hru1qk",
+  propsAsIs: !1,
+  vars: {
+    "s1hru1qk-0": [Lo()],
+    "s1hru1qk-1": [Eo()],
+    "s1hru1qk-2": [To()]
+  }
+}), sr = ({
+  checked: r,
+  className: o,
+  name: c = "input-radio",
+  disabled: s = !1,
+  label: a,
+  labelPosition: d = "right",
+  onChange: t,
+  onCheckedChange: i,
+  size: p = "small",
+  value: u
+}) => {
+  const x = (h) => {
+    t?.(h), i?.(h.target.checked);
+  }, g = w.useId();
+  return /* @__PURE__ */ n.jsxs(Bo, { className: o, labelPosition: d, children: [
+    /* @__PURE__ */ n.jsx(zo, { type: "radio", id: g, name: c, "data-testid": "input-radio", tabIndex: -1, checked: r, value: u || a, "radio-size": p, disabled: s, onChange: x, initial: {
+      scale: 0.95
+    }, animate: {
+      scale: r ? 1.05 : 0.95
+    }, transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 20
+    } }),
+    a && /* @__PURE__ */ n.jsx(qo, { htmlFor: g, labelPosition: d, disabled: s, children: a })
+  ] });
+};
+sr.Group = So;
+const Do = /* @__PURE__ */ l("button")({
+  name: "StyledSubscriptionCardContainer",
+  class: "spn2m6g",
+  propsAsIs: !1
+}), Mo = /* @__PURE__ */ l("div")({
+  name: "StyledCardInner",
+  class: "sk1hi2j",
+  propsAsIs: !1
+}), Wo = /* @__PURE__ */ l("div")({
+  name: "StyledRadioContainer",
+  class: "s191djy0",
+  propsAsIs: !1
+}), Ct = ({
+  children: r,
+  checked: o,
+  handleChange: c
+}) => /* @__PURE__ */ n.jsxs(Do, { onClick: c, children: [
+  /* @__PURE__ */ n.jsx(Wo, { children: /* @__PURE__ */ n.jsx(sr, { checked: o }) }),
+  /* @__PURE__ */ n.jsx(Mo, { children: r })
+] }), Ro = (r) => /* @__PURE__ */ w.createElement("svg", { width: 8, height: 32, xmlns: "http://www.w3.org/2000/svg", fill: "none", ...r }, /* @__PURE__ */ w.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__ */ w.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__ */ w.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" })), Bt = (r) => {
+  const o = r.size ?? 8, c = r.size ?? 32;
+  return /* @__PURE__ */ n.jsx(Ro, { height: c, width: o });
+}, Oo = /* @__PURE__ */ l("div")({
+  name: "StyledWrapper",
+  class: "sbax95g",
+  propsAsIs: !1
+}), Fo = /* @__PURE__ */ l("div")({
+  name: "StyledInputContainer",
+  class: "s4b2e6d",
+  propsAsIs: !1
+}), Go = () => ({
+  isFocused: r
+}) => r ? e.font.color.secondary : e.font.color.light, Ho = /* @__PURE__ */ l("div")({
+  name: "StyledIconContainer",
+  class: "sj2a6tv",
+  propsAsIs: !1,
+  vars: {
+    "sj2a6tv-0": [Go()]
+  }
+}), Po = /* @__PURE__ */ l("input")({
+  name: "StyledInput",
+  class: "s1ktfsj4",
+  propsAsIs: !1
+}), jt = ({
+  value: r,
+  onChange: o,
+  placeholder: c,
+  filterDropdown: s,
+  autoFocus: a,
+  disabled: d,
+  className: t
+}) => {
+  const {
+    theme: i
+  } = k(S), [p, u] = M(!1), x = /* @__PURE__ */ n.jsx(ve, { Icon: ir, variant: "secondary" });
+  return /* @__PURE__ */ n.jsxs(Oo, { className: t, children: [
+    /* @__PURE__ */ n.jsxs(Fo, { children: [
+      /* @__PURE__ */ n.jsx(Ho, { isFocused: p, children: /* @__PURE__ */ n.jsx(lr, { size: i.icon.size.md }) }),
+      /* @__PURE__ */ n.jsx(Po, { value: r, onChange: (g) => o(g.target.value), onFocus: () => u(!0), onBlur: () => u(!1), placeholder: c, autoFocus: a, disabled: d })
+    ] }),
+    s && s(x)
+  ] });
+};
+export {
+  lt as AnimatedButton,
+  it as AnimatedLightIconButton,
+  X as BASE_CODE_EDITOR_THEME_ID,
+  wt as Button,
+  pt as ButtonGroup,
+  Ct as CardPicker,
+  Et as Checkbox,
+  Tt as CheckboxAccent,
+  qt as CheckboxShape,
+  Dt as CheckboxSize,
+  Mt as CheckboxVariant,
+  St as CodeEditor,
+  ut as ColorPickerButton,
+  V as ColorSchemeCard,
+  vt as ColorSchemePicker,
+  $t as CoreEditorHeader,
+  xt as FloatingButton,
+  mt as FloatingButtonGroup,
+  ge as FloatingIconButton,
+  gt as FloatingIconButtonGroup,
+  ve as IconButton,
+  bt as IconButtonGroup,
+  Bt as IconListViewGrip,
+  je as InsideButton,
+  vo as LabelPosition,
+  At as LightButton,
+  pr as LightIconButton,
+  Wt as LightIconButtonGroup,
+  ht as MainButton,
+  sr as Radio,
+  So as RadioGroup,
+  $o as RadioSize,
+  yt as RoundedIconButton,
+  jt as SearchInput,
+  Ge as StyledTabButton,
+  ft as StyledTabContainer,
+  Ke as StyledTabHover,
+  kt as TabButton,
+  Ue as TabContent,
+  Rt as Toggle,
+  zt as baseTransitionTiming,
+  Je as getBaseCodeEditorTheme
+};