@arkitektbedriftene/fe-lib 0.4.34 → 0.4.35

package/dist/ui.es.js

@@ -1,28 +1,458 @@
-import { P as l, y as p, z as i, B as t, R as m } from "./Checkbox-0c1030b1.js";
-import { H as D, Q as M, I as $, m as k, J as A, K as w, Y as O, C as P, q as z, v as j, L as N, D as G, W as H, a as R, n as q, p as E, U as J, N as K, r as L, O as Q, S as U, M as V, X as W, t as X, j as Y, T as F, k as Z, b as _, c as oo, l as ao, G as so, E as eo, A as ro, V as to, s as no } from "./Checkbox-0c1030b1.js";
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { useState as c } from "react";
+import { k as p, s as n, g as f, u as G, j as K, l as U, m as q, n as J, h as Q, e as Z, d as _, F as oo, a as eo, o as ro, f as to, c as no } from "./stitches.config-543644f4.js";
+import { q as Be, p as He } from "./stitches.config-543644f4.js";
+import { jsx as t, jsxs as c, Fragment as ao } from "react/jsx-runtime";
+import { forwardRef as u, createContext as io, useMemo as k, useContext as B, isValidElement as so, cloneElement as lo, useState as co, useId as C } from "react";
+import * as y from "@radix-ui/react-toolbar";
+import { b as $o, c as mo, d as uo } from "./index.esm-55efa2d1.js";
+import * as b from "@radix-ui/react-dialog";
+import * as m from "@radix-ui/react-dropdown-menu";
+import { f as go, g as H } from "./index.esm-e4db0c1f.js";
+import po from "react-select";
+import * as F from "@radix-ui/react-checkbox";
 import "react-dom";
-import "@radix-ui/react-toolbar";
-import "./index.esm-3266b7f8.js";
-import "@radix-ui/react-dialog";
-import "@radix-ui/react-dropdown-menu";
-import "react-select";
-import "@radix-ui/react-checkbox";
-const h = ({ children: s, content: e }) => {
-  const [o, r] = c(!1);
-  return /* @__PURE__ */ n(
-    l,
+const ho = p({
+  "0%": {
+    transform: "rotate(0)"
+  },
+  "100%": {
+    transform: "rotate(360deg)"
+  }
+}), bo = p({
+  "0%": {
+    strokeDashoffset: 600
+  },
+  "100%": {
+    strokeDashoffset: 0
+  }
+}), fo = n("svg", {
+  animation: `${ho} 2s linear infinite`
+}), yo = n("circle", {
+  animation: `${bo} 1.6s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite`,
+  fill: "transparent",
+  stroke: "currentColor",
+  strokeDasharray: 300,
+  strokeDashoffset: 600,
+  strokeLinecap: "round",
+  strokeMiterlimit: 10,
+  strokeWidth: 12
+}), xo = n("div", {
+  lineHeight: 0,
+  flexShrink: 0,
+  variants: {
+    size: {
+      xs: {
+        width: "1rem",
+        height: "1rem"
+      },
+      sm: {
+        width: "1.25rem",
+        height: "1.25rem"
+      },
+      md: {
+        width: "1.75rem",
+        height: "1.75rem"
+      },
+      lg: {
+        width: "2.25rem",
+        height: "2.25rem"
+      }
+    },
+    color: {
+      light: {
+        color: "$gray200"
+      },
+      dark: {
+        color: "$gray800"
+      },
+      inherit: {
+        color: "inherit"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "sm",
+    color: "dark"
+  }
+}), vo = u(
+  (o, e) => /* @__PURE__ */ t(
+    xo,
+    {
+      ref: e,
+      ...o,
+      children: /* @__PURE__ */ t(
+        fo,
+        {
+          x: "0px",
+          y: "0px",
+          viewBox: "0 0 150 150",
+          children: /* @__PURE__ */ t(
+            yo,
+            {
+              cx: "75",
+              cy: "75",
+              r: "60"
+            }
+          )
+        }
+      )
+    }
+  )
+), ko = n("button", {
+  appearance: "none",
+  margin: 0,
+  padding: 0,
+  border: "none",
+  background: "none",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left",
+  textDecoration: "none",
+  textIndent: 0,
+  lineHeight: 1.25,
+  display: "inline-flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "$2",
+  position: "relative",
+  fontWeight: "$medium",
+  borderRadius: "$sm",
+  whiteSpace: "nowrap",
+  transition: "background 0.2s ease-in-out",
+  "&:focus, &:focus-visible": {
+    outline: "none"
+  },
+  "&:focus-visible": {
+    boxShadow: "0 0 0 2px white, 0 0 0 4px $colors$focusRing"
+  },
+  "&:disabled": {
+    cursor: "not-allowed"
+  },
+  variants: {
+    color: {
+      primary: {
+        $$solid: "$colors$blue600",
+        $$solidHover: "$colors$blue700",
+        $$outline: "$colors$blue600",
+        $$outlineHover: "$colors$blue100",
+        $$outlineText: "$colors$blue600",
+        $$disabled: "$colors$blue200"
+      },
+      secondary: {
+        $$solid: "$colors$gray600",
+        $$solidHover: "$colors$gray700",
+        $$outline: "$colors$gray400",
+        $$outlineHover: "$colors$gray100",
+        $$outlineText: "$colors$gray600",
+        $$disabled: "$colors$gray200"
+      },
+      success: {
+        $$solid: "$colors$green600",
+        $$solidHover: "$colors$green700",
+        $$outline: "$colors$green600",
+        $$outlineHover: "$colors$green100",
+        $$outlineText: "$colors$green600",
+        $$disabled: "$colors$green200"
+      },
+      danger: {
+        $$solid: "$colors$red600",
+        $$solidHover: "$colors$red700",
+        $$outline: "$colors$red600",
+        $$outlineHover: "$colors$red100",
+        $$outlineText: "$colors$red600",
+        $$disabled: "$colors$red200"
+      },
+      warning: {
+        $$solid: "$colors$yellow600",
+        $$solidHover: "$colors$yellow700",
+        $$outline: "$colors$yellow400",
+        $$outlineHover: "$colors$yellow50",
+        $$outlineText: "$colors$yellow600",
+        $$disabled: "$colors$yellow100"
+      }
+    },
+    size: {
+      sm: {
+        fontSize: "$sm",
+        padding: "$1 $2",
+        height: "1.75rem"
+      },
+      md: {
+        fontSize: "$sm",
+        padding: "$2 $4",
+        height: "2.25rem"
+      },
+      lg: {
+        fontSize: "$md",
+        padding: "$3 $6",
+        height: "2.75rem"
+      }
+    },
+    variant: {
+      primary: {
+        background: "$$solid",
+        color: "white",
+        "&:hover:not(:disabled)": {
+          backgroundColor: "$$solidHover"
+        },
+        "&:disabled": {
+          backgroundColor: "$$disabled"
+        }
+      },
+      outline: {
+        boxShadow: "inset 0 0 0 1px $$outline",
+        color: "$$outlineText",
+        "&:hover:not(:disabled)": {
+          backgroundColor: "$$outlineHover"
+        },
+        "&:disabled": {
+          boxShadow: "inset 0 0 0 1px $$disabled",
+          color: "$$disabled"
+        }
+      },
+      transparent: {
+        backgroundColor: "transparent",
+        color: "$$outlineText",
+        "&:hover:not(:disabled)": {
+          backgroundColor: "$$outlineHover"
+        },
+        "&:disabled": {
+          color: "$$disabled"
+        }
+      }
+    },
+    icon: {
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      icon: !0,
+      size: "sm",
+      css: {
+        padding: "$1",
+        width: "1.75rem"
+      }
+    },
+    {
+      icon: !0,
+      size: "md",
+      css: {
+        padding: "$2",
+        width: "2.25rem"
+      }
+    },
     {
-      open: o,
-      onOpenChange: r,
+      icon: !0,
+      size: "lg",
+      css: {
+        padding: "$2",
+        width: "2.75rem"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "outline",
+    color: "secondary",
+    size: "md"
+  }
+}), M = u(
+  ({ children: o, disabled: e, isLoading: r, variant: a, color: i, ...s }, l) => (!i && a === "primary" && (i = "primary"), /* @__PURE__ */ c(
+    ko,
+    {
+      ref: l,
+      type: "button",
+      role: "button",
+      disabled: e || r,
+      variant: a,
+      color: i,
+      ...s,
+      children: [
+        o,
+        r && /* @__PURE__ */ t(vo, { color: "inherit" })
+      ]
+    }
+  ))
+), Co = n("div", {
+  padding: "$3",
+  borderRadius: "$md",
+  variants: {
+    color: {
+      warning: {
+        background: "$yellow200",
+        border: "1px solid $yellow400",
+        color: "$yellow900"
+      },
+      danger: {
+        background: "$red200",
+        border: "1px solid $red400",
+        color: "$red900"
+      },
+      info: {
+        background: "$blue200",
+        border: "1px solid $blue400",
+        color: "$blue900"
+      },
+      success: {
+        background: "$green200",
+        border: "1px solid $green400",
+        color: "$green900"
+      }
+    },
+    size: {
+      sm: {
+        fontSize: "$sm"
+      },
+      md: {
+        fontSize: "$md"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "info",
+    size: "md"
+  }
+}), te = u(
+  ({ children: o, ...e }, r) => /* @__PURE__ */ t(
+    Co,
+    {
+      ref: r,
+      role: "alert",
+      ...e,
+      children: o
+    }
+  )
+), wo = p({
+  "0%": { opacity: 0, transform: "translateY(0.5rem)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+}), So = p({
+  "0%": { opacity: 0, transform: "translateX(-0.5rem)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+}), Io = p({
+  "0%": { opacity: 0, transform: "translateY(-0.5rem)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+}), zo = p({
+  "0%": { opacity: 0, transform: "translateX(0.5rem)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+}), Ro = f({
+  backgroundColor: "white",
+  boxShadow: "$overlayCard",
+  borderRadius: "$sm",
+  overflow: "hidden",
+  zIndex: "$overlayCard",
+  // radix dialogs sets `pointer-events: none;` on body,
+  // so for other popups that uses `OverlayCard` to work
+  // we need to explicitly set this.
+  pointerEvents: "auto"
+}), To = f({
+  animationDuration: "400ms",
+  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+  willChange: "transform, opacity",
+  '&[data-state="open"]': {
+    '&[data-side="top"]': { animationName: Io },
+    '&[data-side="right"]': { animationName: zo },
+    '&[data-side="bottom"]': { animationName: wo },
+    '&[data-side="left"]': { animationName: So }
+  }
+}), P = n(
+  "div",
+  Ro,
+  To
+), d = n("div"), w = io(
+  {}
+), Do = ({
+  children: o,
+  offset: e,
+  open: r,
+  onOpenChange: a,
+  trigger: i = "click",
+  hoverDelay: s,
+  placement: l = "bottom",
+  role: $ = "dialog"
+}) => {
+  const { refs: g, floatingStyles: x, context: h } = G({
+    open: r,
+    onOpenChange: a,
+    placement: l,
+    whileElementsMounted: eo,
+    middleware: [ro(e), to(), no()]
+  }), { isMounted: I, styles: z } = K(h, {
+    initial: ({ side: L }) => ({
+      opacity: 0,
+      transform: {
+        top: "translateY(-0.5rem)",
+        right: "translateX(0.5rem)",
+        bottom: "translateY(0.5rem)",
+        left: "translateX(-0.5rem)"
+      }[L]
+    })
+  }), O = U(h, { enabled: i === "click" }), N = q(h, {
+    enabled: i === "hover",
+    delay: s,
+    handleClose: J()
+  }), X = Q(h), Y = Z(h, { role: $ }), { getFloatingProps: R, getReferenceProps: T } = _([
+    O,
+    N,
+    X,
+    Y
+  ]), E = k(
+    () => ({
+      getFloatingProps: R,
+      getReferenceProps: T,
+      floatingStyles: x,
+      refs: g,
+      isMounted: I,
+      transitionStyles: z
+    }),
+    [
+      R,
+      T,
+      I,
+      g,
+      x,
+      z
+    ]
+  );
+  return /* @__PURE__ */ t(w.Provider, { value: E, children: o });
+}, Bo = ({ children: o }) => {
+  const { getReferenceProps: e, refs: r } = B(w);
+  return /* @__PURE__ */ t(ao, { children: so(o) && lo(o, {
+    ref: r.setReference,
+    ...e()
+  }) });
+}, Ho = ({ children: o, overlayCardProps: e }) => {
+  const {
+    getFloatingProps: r,
+    isMounted: a,
+    refs: i,
+    floatingStyles: s,
+    transitionStyles: l
+  } = B(w);
+  return a ? /* @__PURE__ */ t(oo, { children: /* @__PURE__ */ t(
+    d,
+    {
+      ref: i.setFloating,
+      style: s,
+      ...r(),
+      css: {
+        zIndex: "$overlayCard"
+      },
+      children: /* @__PURE__ */ t(P, { ...e, style: l, children: o })
+    }
+  ) }) : null;
+}, ne = ({ children: o, content: e }) => {
+  const [r, a] = co(!1);
+  return /* @__PURE__ */ c(
+    Do,
+    {
+      open: r,
+      onOpenChange: a,
       trigger: "hover",
       placement: "top",
       offset: { mainAxis: 8 },
       role: "tooltip",
       children: [
-        /* @__PURE__ */ a(p, { children: s }),
-        /* @__PURE__ */ a(i, { overlayCardProps: {
+        /* @__PURE__ */ t(Bo, { children: o }),
+        /* @__PURE__ */ t(Ho, { overlayCardProps: {
           css: {
             background: "rgba(0,0,0, 0.9)",
             color: "#fff",
@@ -33,14 +463,465 @@ const h = ({ children: s, content: e }) => {
       ]
     }
   );
-}, I = ({
-  label: s,
-  css: e,
-  error: o,
+}, ae = n("span", {
+  flex: "0 0 auto",
+  display: "inline-flex",
+  padding: "$1 $2",
+  fontSize: "$xs",
+  fontWeight: "$medium",
+  lineHeight: "1",
+  whiteSpace: "nowrap",
+  borderRadius: "$sm",
+  overflow: "hidden",
+  variants: {
+    color: {
+      success: {
+        backgroundColor: "$green200",
+        color: "$green800"
+      },
+      warning: {
+        backgroundColor: "$yellow100",
+        color: "$yellow700"
+      },
+      danger: {
+        backgroundColor: "$red200",
+        color: "$red800"
+      },
+      primary: {
+        backgroundColor: "$blue200",
+        color: "$blue800"
+      },
+      secondary: {
+        backgroundColor: "$gray200",
+        color: "$gray800"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+}), ie = n(y.Root, {
+  backgroundColor: "$gray50",
+  display: "flex",
+  alignItems: "center",
+  padding: "$1",
+  gap: "$1"
+}), se = n(y.ToggleGroup, {
+  display: "flex",
+  gap: "$1",
+  alignItems: "center"
+}), le = n(y.Separator, {
+  width: "1px",
+  height: "1.5rem",
+  my: "$1",
+  mx: "$1",
+  backgroundColor: "$border"
+}), A = u(({ css: o, ...e }, r) => /* @__PURE__ */ t(
+  M,
+  {
+    ref: r,
+    icon: !0,
+    css: {
+      width: "auto",
+      "&[data-state='on']": {
+        backgroundColor: "$blue200",
+        color: "$blue800"
+      },
+      ...o
+    },
+    ...e
+  }
+)), de = u(
+  ({ children: o, dropdown: e, ...r }, a) => /* @__PURE__ */ t(
+    y.Button,
+    {
+      asChild: !0,
+      ref: a,
+      children: /* @__PURE__ */ c(
+        A,
+        {
+          variant: "transparent",
+          color: "primary",
+          ...r,
+          children: [
+            o,
+            e && /* @__PURE__ */ t($o, {})
+          ]
+        }
+      )
+    }
+  )
+), ce = u(({
+  children: o,
+  value: e,
+  ...r
+}, a) => /* @__PURE__ */ t(
+  y.ToggleItem,
+  {
+    value: e,
+    asChild: !0,
+    ref: a,
+    children: /* @__PURE__ */ t(
+      A,
+      {
+        variant: "transparent",
+        color: "primary",
+        icon: !0,
+        ...r,
+        children: o
+      }
+    )
+  }
+)), $e = n("div", {
+  color: "$$cardText",
+  backgroundColor: "$$cardBackground",
+  borderRadius: "$md",
+  padding: "$4",
+  variants: {
+    variant: {
+      primary: {
+        $$cardBackground: "white",
+        $$cardText: "$text"
+      }
+    },
+    elevation: {
+      none: {
+        boxShadow: "none"
+      },
+      raised: {
+        boxShadow: "$md"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    elevation: "raised"
+  }
+}), Fo = n("div", {
+  borderRadius: "$md",
+  padding: "$1",
+  border: "2px solid $blue100",
+  background: "white",
+  display: "flex",
+  alignItems: "center",
+  gap: "$1"
+}), me = (o) => /* @__PURE__ */ t(Fo, { ...o }), ue = ({
+  children: o,
+  active: e = !1,
   ...r
-}) => /* @__PURE__ */ n(t, { css: e, children: [
-  s && /* @__PURE__ */ a(
-    t,
+}) => /* @__PURE__ */ t(
+  M,
+  {
+    variant: "transparent",
+    color: "primary",
+    "data-active": e,
+    css: {
+      '&[aria-current="page"],&[data-active="true"]': {
+        background: "$blue100"
+      }
+    },
+    ...r,
+    children: o
+  }
+), Mo = n(b.Overlay, {
+  backgroundColor: "rgba(0, 0, 0, 0.7)",
+  position: "fixed",
+  zIndex: "$overlayCard",
+  inset: 0
+}), Po = n(b.Content, {
+  backgroundColor: "white",
+  borderRadius: "$md",
+  position: "fixed",
+  zIndex: "$overlayCard",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "auto",
+  maxWidth: "90wv",
+  minWidth: "600px",
+  maxHeight: "85vh",
+  padding: "$8",
+  "&:focus": { outline: "none" }
+}), ge = ({
+  children: o,
+  open: e,
+  onOpenChange: r,
+  trigger: a,
+  css: i,
+  contentProps: s
+}) => /* @__PURE__ */ c(b.Root, { open: e, onOpenChange: r, children: [
+  a && /* @__PURE__ */ t(b.Trigger, { asChild: !0, children: a }),
+  /* @__PURE__ */ c(b.Portal, { children: [
+    /* @__PURE__ */ t(Mo, {}),
+    /* @__PURE__ */ t(Po, { css: i, ...s, children: o })
+  ] })
+] }), pe = n("h2", {
+  fontSize: "$xl",
+  fontWeight: "$medium",
+  marginBottom: "$6"
+}), he = n("div", {
+  display: "flex",
+  gap: "$2",
+  justifyContent: "flex-end",
+  background: "$gray100",
+  margin: "$6 -$8 -$8 -$8",
+  padding: "$4",
+  borderBottomRightRadius: "$md",
+  borderBottomLeftRadius: "$md"
+}), be = n("div", {
+  display: "flex",
+  variants: {
+    direction: {
+      row: {
+        flexDirection: "row"
+      },
+      column: {
+        flexDirection: "column"
+      }
+    },
+    align: {
+      start: {
+        alignItems: "flex-start"
+      },
+      center: {
+        alignItems: "center"
+      }
+    },
+    gap: {
+      0: { gap: 0 },
+      1: { gap: "$1" },
+      2: { gap: "$2" },
+      3: { gap: "$3" },
+      4: { gap: "$4" },
+      5: { gap: "$5" },
+      6: { gap: "$6" },
+      7: { gap: "$7" },
+      8: { gap: "$8" }
+    }
+  },
+  defaultVariants: {
+    direction: "column",
+    gap: 4
+  }
+}), D = /* @__PURE__ */ new Map(), Ao = (o) => {
+  const e = D.get(o);
+  if (e)
+    return e;
+  let r = 0;
+  for (let $ = 0; $ < o.length; $++)
+    r = o.charCodeAt($) + ((r << 5) - r);
+  const l = `hsl(${r % 360}, 80%, 40%)`;
+  return D.set(o, l), l;
+}, Wo = n("div", {
+  flex: "0 0 auto",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "white",
+  borderRadius: "$full",
+  transition: "background-color 150ms",
+  userSelect: "none",
+  variants: {
+    size: {
+      xs: {
+        fontSize: "0.6rem",
+        width: "1.50rem",
+        height: "1.50rem"
+      },
+      sm: {
+        fontSize: "0.8rem",
+        width: "1.75rem",
+        height: "1.75rem"
+      },
+      md: {
+        fontSize: "0.9rem",
+        width: "2rem",
+        height: "2rem"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), fe = ({
+  css: o,
+  colorString: e,
+  ...r
+}) => {
+  const a = k(
+    () => e ? Ao(e) : "$gray200",
+    [e]
+  );
+  return /* @__PURE__ */ t(Wo, { css: { backgroundColor: a, ...o }, ...r });
+}, Vo = n(P, {
+  minWidth: "max(var(--radix-popper-anchor-width), 12rem)",
+  padding: "$1"
+}), S = f({
+  padding: "$2 $2 $2 1.5rem",
+  fontSize: "$sm",
+  lineHeight: "1.25",
+  cursor: "pointer",
+  borderRadius: "$sm",
+  position: "relative",
+  color: "$primaryTextOnWhite",
+  display: "flex",
+  alignItems: "center",
+  ":focus-visisble": {
+    outline: "none"
+  },
+  "&[data-highlighted], &:hover": {
+    outline: "none",
+    backgroundColor: "$hoverDarker"
+  },
+  "&[data-disabled]": {
+    color: "$gray500",
+    "&:hover": {
+      backgroundColor: "transparent"
+    }
+  }
+}), ye = ({
+  side: o = "bottom",
+  align: e = "center",
+  trigger: r,
+  children: a,
+  sideOffset: i,
+  modal: s
+}) => /* @__PURE__ */ c(m.Root, { modal: s, children: [
+  /* @__PURE__ */ t(m.Trigger, { asChild: !0, children: r }),
+  /* @__PURE__ */ t(m.Portal, { children: /* @__PURE__ */ t(
+    m.Content,
+    {
+      asChild: !0,
+      side: o,
+      align: e,
+      collisionPadding: 10,
+      sideOffset: i,
+      children: /* @__PURE__ */ t(Vo, { children: a })
+    }
+  ) })
+] }), jo = n(m.ItemIndicator, {
+  position: "absolute",
+  left: 0,
+  top: 0,
+  bottom: 0,
+  width: "1.5rem",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+}), xe = n(m.Separator, {
+  height: 1,
+  backgroundColor: "$gray200",
+  margin: 1
+}), ve = n(m.Item, S), ke = n(m.Item, S, {
+  padding: "$2",
+  display: "flex",
+  alignItems: "center",
+  gap: "$2"
+}), Oo = n(m.CheckboxItem, S), Ce = ({
+  value: o,
+  onChange: e,
+  children: r
+}) => /* @__PURE__ */ c(
+  Oo,
+  {
+    checked: o,
+    onCheckedChange: e,
+    children: [
+      /* @__PURE__ */ t(jo, { children: /* @__PURE__ */ t(go, { size: "0.75rem" }) }),
+      r
+    ]
+  }
+), v = {
+  container: (o) => ({
+    ...o,
+    minWidth: "200px"
+  }),
+  control: (o, { isFocused: e }) => ({
+    ...o,
+    "&:hover": {},
+    border: e ? "1px solid var(--colors-blue300)" : "1px solid var(--colors-gray300)",
+    outline: "none",
+    borderRadius: "var(--radii-md)",
+    boxShadow: e ? "0 0 0 4px var(--colors-blue100)" : "none"
+  }),
+  menu: (o) => ({
+    ...o,
+    boxShadow: "var(--shadows-overlayCard)",
+    borderRadius: "var(--radii-md)",
+    border: "none",
+    padding: "var(--space-1)"
+  }),
+  option: (o, { isFocused: e, isSelected: r }) => ({
+    ...o,
+    background: e ? "var(--colors-gray100)" : r ? "var(--colors-blue100)" : "transparent",
+    "&:active": {
+      background: "var(--colors-gray200)"
+    },
+    borderRadius: "var(--radii-sm)",
+    color: "var(--colors-text)"
+  }),
+  menuList: (o) => ({
+    ...o,
+    padding: 0
+  }),
+  multiValueRemove: (o) => ({
+    ...o,
+    background: "transparent",
+    color: "var(--colors-text)",
+    "&:hover": {
+      background: "var(--colors-red200)",
+      color: "var(--colors-red800)"
+    }
+  }),
+  clearIndicator: (o) => ({
+    ...o,
+    paddingLeft: 0,
+    paddingRight: 0
+  }),
+  menuPortal: (o) => ({
+    ...o,
+    zIndex: "var(--zIndices-overlayCard)"
+  })
+}, No = {
+  control: (o, e) => {
+    var r;
+    return {
+      ...(r = v.control) == null ? void 0 : r.call(v, o, e),
+      border: "1px solid var(--colors-red500)",
+      boxShadow: e.isFocused ? "0 0 0 4px var(--colors-red100)" : "none"
+    };
+  }
+}, Xo = {
+  IndicatorSeparator: () => null
+}, W = ({
+  styles: o,
+  components: e,
+  error: r,
+  ...a
+}) => {
+  const i = k(
+    () => ({
+      ...v,
+      ...o,
+      ...r ? No : void 0
+    }),
+    [o, r]
+  ), s = k(
+    () => ({
+      ...Xo,
+      ...e
+    }),
+    [e]
+  );
+  return /* @__PURE__ */ t(po, { components: s, styles: i, ...a });
+}, we = (o) => /* @__PURE__ */ t(W, { ...o, isSearchable: !0 }), Se = ({
+  label: o,
+  css: e,
+  error: r,
+  ...a
+}) => /* @__PURE__ */ c(d, { css: e, children: [
+  o && /* @__PURE__ */ t(
+    d,
     {
       as: "label",
       css: {
@@ -48,60 +929,282 @@ const h = ({ children: s, content: e }) => {
         marginBottom: "$2",
         fontSize: "$md"
       },
-      children: s
+      children: o
     }
   ),
-  /* @__PURE__ */ a(
-    m,
+  /* @__PURE__ */ t(
+    W,
     {
-      ...r,
-      error: o,
+      ...a,
+      error: r,
       isSearchable: !1,
       isMulti: !1
     }
   ),
-  typeof o == "string" && /* @__PURE__ */ a(t, { css: { color: "$red600", fontSize: "$sm", marginTop: "$2" }, children: o })
-] });
+  typeof r == "string" && /* @__PURE__ */ t(d, { css: { color: "$red600", fontSize: "$sm", marginTop: "$2" }, children: r })
+] }), V = f({
+  display: "block",
+  width: "100%",
+  padding: "0.5rem 0.75rem",
+  background: "transparent",
+  borderRadius: "none",
+  outline: "none",
+  border: "none",
+  fontSize: "$md",
+  "-webkit-appearance": "none",
+  "-moz-appearance": "none",
+  appearance: "none"
+}), j = f({
+  display: "block",
+  width: "100%",
+  background: "#fff",
+  border: "1px solid $colors$gray300",
+  borderRadius: "$md",
+  outline: "none",
+  transition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
+  "&:focus-within": {
+    border: "1px solid $colors$blue300",
+    boxShadow: "0 0 0 4px $colors$blue100",
+    background: "#fff"
+  },
+  variants: {
+    error: {
+      true: {
+        border: "1px solid $colors$red500",
+        "&:focus-within": {
+          border: "1px solid $colors$red500",
+          boxShadow: "0 0 0 4px $colors$red100"
+        }
+      }
+    }
+  }
+}), Yo = n("input", V), Eo = n("div", j, {
+  display: "flex",
+  alignItems: "center",
+  gap: "$2",
+  width: "100%"
+}), Ie = u(
+  ({ type: o = "text", label: e, error: r, style: a, css: i, suffix: s, id: l, ...$ }, g) => {
+    const x = C();
+    return l = l || x, /* @__PURE__ */ c(d, { css: i, children: [
+      e && /* @__PURE__ */ t(
+        d,
+        {
+          as: "label",
+          htmlFor: l,
+          css: {
+            display: "block",
+            marginBottom: "$2",
+            fontSize: "$md"
+          },
+          children: e
+        }
+      ),
+      /* @__PURE__ */ c(Eo, { error: !!r, children: [
+        /* @__PURE__ */ t(
+          Yo,
+          {
+            id: l,
+            ref: g,
+            type: o,
+            "aria-invalid": r ? "true" : "false",
+            ...$
+          }
+        ),
+        s && /* @__PURE__ */ t(
+          d,
+          {
+            css: {
+              fontSize: "$sm",
+              fontWeight: "$medium",
+              marginRight: "$2"
+            },
+            children: s
+          }
+        ),
+        r && /* @__PURE__ */ t(
+          d,
+          {
+            as: H,
+            css: { color: "$red600", marginRight: "$2" },
+            size: 24
+          }
+        )
+      ] }),
+      typeof r == "string" && /* @__PURE__ */ t(d, { css: { color: "$red600", fontSize: "$sm", marginTop: "$2" }, children: r })
+    ] });
+  }
+), Lo = n("textarea", V), Go = n("div", j, {
+  display: "flex",
+  alignItems: "center",
+  gap: "$2",
+  width: "100%"
+}), ze = u(
+  ({ label: o, error: e, style: r, css: a, suffix: i, id: s, ...l }, $) => {
+    const g = C();
+    return s = s || g, /* @__PURE__ */ c(d, { css: a, children: [
+      o && /* @__PURE__ */ t(
+        d,
+        {
+          as: "label",
+          htmlFor: s,
+          css: {
+            display: "block",
+            marginBottom: "$2",
+            fontSize: "$md"
+          },
+          children: o
+        }
+      ),
+      /* @__PURE__ */ c(Go, { error: !!e, children: [
+        /* @__PURE__ */ t(
+          Lo,
+          {
+            id: s,
+            ref: $,
+            "aria-invalid": e ? "true" : "false",
+            ...l
+          }
+        ),
+        i && /* @__PURE__ */ t(
+          d,
+          {
+            css: {
+              fontSize: "$sm",
+              fontWeight: "$medium",
+              marginRight: "$2"
+            },
+            children: i
+          }
+        ),
+        e && /* @__PURE__ */ t(
+          d,
+          {
+            as: H,
+            css: { color: "$red600", marginRight: "$2" },
+            size: 24
+          }
+        )
+      ] }),
+      typeof e == "string" && /* @__PURE__ */ t(d, { css: { color: "$red600", fontSize: "$sm", marginTop: "$2" }, children: e })
+    ] });
+  }
+), Ko = n(F.Root, {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "$2",
+  color: "#fff",
+  border: "2px solid $blue600",
+  backgroundColor: "transparent",
+  borderRadius: "$sm",
+  "&[data-state=checked], &[data-state=indeterminate]": {
+    backgroundColor: "$blue500"
+  },
+  "&[data-disabled]": {
+    borderColor: "$gray200",
+    backgroundColor: "$gray100",
+    color: "$gray400"
+  },
+  variants: {
+    size: {
+      sm: {
+        width: "1.2rem",
+        height: "1.2rem"
+      },
+      md: {
+        width: "1.5rem",
+        height: "1.5rem"
+      },
+      lg: {
+        width: "2rem",
+        height: "2rem"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), Uo = n(F.Indicator, {
+  "[data-icon]": {
+    display: "none"
+  },
+  "&[data-state=checked] [data-icon=checked], &[data-state=indeterminate] [data-icon=indeterminate]": {
+    display: "block"
+  }
+}), qo = n("label", {
+  flex: "0 1 auto",
+  variants: {
+    size: {
+      sm: {
+        fontSize: "$sm"
+      },
+      md: {
+        fontSize: "$md"
+      },
+      lg: {
+        fontSize: "$lg"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), Re = ({
+  id: o,
+  size: e,
+  label: r,
+  ...a
+}) => {
+  const i = C();
+  return o = o || i, /* @__PURE__ */ c(d, { css: { display: "flex", alignItems: "center", gap: "$2" }, children: [
+    /* @__PURE__ */ t(Ko, { id: o, size: e, ...a, children: /* @__PURE__ */ c(Uo, { children: [
+      /* @__PURE__ */ t(mo, { "data-icon": "indeterminate" }),
+      /* @__PURE__ */ t(uo, { "data-icon": "checked" })
+    ] }) }),
+    r && /* @__PURE__ */ t(qo, { htmlFor: o, size: e, children: r })
+  ] });
+};
 export {
-  D as Alert,
-  M as Avatar,
-  $ as Badge,
-  t as Box,
-  k as Button,
+  te as Alert,
+  fe as Avatar,
+  ae as Badge,
+  d as Box,
+  M as Button,
   A as ButtonInToolbar,
-  w as Card,
-  O as Checkbox,
-  P as Combobox,
-  z as Dialog,
-  j as DialogActions,
-  N as DialogHeader,
-  G as DropdownMenu,
-  H as DropdownMenuCheckboxItem,
-  R as DropdownMenuIconItem,
-  q as DropdownMenuItem,
-  E as DropdownMenuSeparator,
-  J as MenuOverlayCard,
-  K as NavBar,
-  L as NavBarItem,
-  Q as OverlayCard,
-  l as Popover,
-  i as PopoverContent,
-  p as PopoverTrigger,
-  I as Select,
-  U as Spinner,
-  V as Stack,
-  W as TextArea,
-  X as TextInput,
-  Y as Toolbar,
-  F as ToolbarButton,
-  Z as ToolbarSeparator,
-  _ as ToolbarToggleGroup,
-  oo as ToolbarToggleItem,
-  h as Tooltip,
-  ao as css,
-  so as getCssText,
-  eo as globalCss,
-  ro as keyframes,
-  to as menuItemStyles,
-  no as styled
+  $e as Card,
+  Re as Checkbox,
+  we as Combobox,
+  ge as Dialog,
+  he as DialogActions,
+  pe as DialogHeader,
+  ye as DropdownMenu,
+  Ce as DropdownMenuCheckboxItem,
+  ke as DropdownMenuIconItem,
+  ve as DropdownMenuItem,
+  xe as DropdownMenuSeparator,
+  Vo as MenuOverlayCard,
+  me as NavBar,
+  ue as NavBarItem,
+  P as OverlayCard,
+  Do as Popover,
+  Ho as PopoverContent,
+  Bo as PopoverTrigger,
+  Se as Select,
+  vo as Spinner,
+  be as Stack,
+  ze as TextArea,
+  Ie as TextInput,
+  ie as Toolbar,
+  de as ToolbarButton,
+  le as ToolbarSeparator,
+  se as ToolbarToggleGroup,
+  ce as ToolbarToggleItem,
+  ne as Tooltip,
+  f as css,
+  Be as getCssText,
+  He as globalCss,
+  p as keyframes,
+  S as menuItemStyles,
+  n as styled
 };