@arkitektbedriftene/fe-lib 1.2.1 → 1.4.0

package/dist/ui.es.js

@@ -1,34 +1,35 @@
 import { k as p, s as n, c as f } from "./stitches.config-00c23cdb.js";
-import { a as He, g as Fe } from "./stitches.config-00c23cdb.js";
-import { jsx as t, jsxs as c, Fragment as G } from "react/jsx-runtime";
-import { forwardRef as u, createContext as K, useMemo as k, useContext as B, isValidElement as U, cloneElement as q, useState as J, useId as C } from "react";
-import { useFloating as Q, autoUpdate as Z, offset as _, flip as oo, shift as eo, useTransitionStyles as ro, useClick as to, useHover as no, safePolygon as ao, useDismiss as io, useRole as so, useInteractions as lo, FloatingPortal as co } from "@floating-ui/react";
+import { a as We, g as Ve } from "./stitches.config-00c23cdb.js";
+import { jsx as t, jsxs as c, Fragment as K } from "react/jsx-runtime";
+import { forwardRef as g, createContext as U, useMemo as w, useContext as B, isValidElement as q, cloneElement as J, useState as Q, useId as k } from "react";
+import { useFloating as Z, autoUpdate as _, offset as oo, flip as eo, shift as ro, useTransitionStyles as to, useClick as no, useHover as ao, safePolygon as io, useDismiss as so, useRole as lo, useInteractions as co, FloatingPortal as $o } from "@floating-ui/react";
 import * as y from "@radix-ui/react-toolbar";
-import { b as $o, c as mo, d as uo } from "./index.esm-ab03d8db.js";
+import { b as mo, c as go, d as uo } from "./index.esm-ab03d8db.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-67eba761.js";
-import po from "react-select";
+import { f as po, g as H } from "./index.esm-67eba761.js";
+import ho from "react-select";
 import * as F from "@radix-ui/react-checkbox";
+import * as M from "@radix-ui/react-switch";
 import "@stitches/react";
-const ho = p({
+const bo = p({
   "0%": {
     transform: "rotate(0)"
   },
   "100%": {
     transform: "rotate(360deg)"
   }
-}), bo = p({
+}), fo = 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`,
+}), yo = n("svg", {
+  animation: `${bo} 2s linear infinite`
+}), xo = n("circle", {
+  animation: `${fo} 1.6s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite`,
   fill: "transparent",
   stroke: "currentColor",
   strokeDasharray: 300,
@@ -36,7 +37,7 @@ const ho = p({
   strokeLinecap: "round",
   strokeMiterlimit: 10,
   strokeWidth: 12
-}), xo = n("div", {
+}), vo = n("div", {
   lineHeight: 0,
   flexShrink: 0,
   variants: {
@@ -74,20 +75,20 @@ const ho = p({
     size: "sm",
     color: "dark"
   }
-}), vo = u(
+}), wo = g(
   (o, e) => /* @__PURE__ */ t(
-    xo,
+    vo,
     {
       ref: e,
       ...o,
       children: /* @__PURE__ */ t(
-        fo,
+        yo,
         {
           x: "0px",
           y: "0px",
           viewBox: "0 0 150 150",
           children: /* @__PURE__ */ t(
-            yo,
+            xo,
             {
               cx: "75",
               cy: "75",
@@ -256,7 +257,7 @@ const ho = p({
     color: "secondary",
     size: "md"
   }
-}), M = u(
+}), P = g(
   ({ children: o, disabled: e, isLoading: r, variant: a, color: i, ...s }, l) => (!i && a === "primary" && (i = "primary"), /* @__PURE__ */ c(
     ko,
     {
@@ -269,7 +270,7 @@ const ho = p({
       ...s,
       children: [
         o,
-        r && /* @__PURE__ */ t(vo, { color: "inherit" })
+        r && /* @__PURE__ */ t(wo, { color: "inherit" })
       ]
     }
   ))
@@ -312,7 +313,7 @@ const ho = p({
     color: "info",
     size: "md"
   }
-}), ne = u(
+}), de = g(
   ({ children: o, ...e }, r) => /* @__PURE__ */ t(
     Co,
     {
@@ -322,19 +323,19 @@ const ho = p({
       children: o
     }
   )
-), wo = p({
+), So = p({
   "0%": { opacity: 0, transform: "translateY(0.5rem)" },
   "100%": { opacity: 1, transform: "translateY(0)" }
-}), So = p({
+}), zo = 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({
+}), Ro = p({
   "0%": { opacity: 0, transform: "translateX(0.5rem)" },
   "100%": { opacity: 1, transform: "translateX(0)" }
-}), Ro = f({
+}), To = f({
   backgroundColor: "white",
   boxShadow: "$overlayCard",
   borderRadius: "$sm",
@@ -344,23 +345,23 @@ const ho = p({
   // so for other popups that uses `OverlayCard` to work
   // we need to explicitly set this.
   pointerEvents: "auto"
-}), To = f({
+}), Do = 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 }
+    '&[data-side="right"]': { animationName: Ro },
+    '&[data-side="bottom"]': { animationName: So },
+    '&[data-side="left"]': { animationName: zo }
   }
-}), P = n(
+}), A = n(
   "div",
-  Ro,
-  To
-), d = n("div"), w = K(
+  To,
+  Do
+), d = n("div"), C = U(
   {}
-), Do = ({
+), Bo = ({
   children: o,
   offset: e,
   open: r,
@@ -370,65 +371,65 @@ const ho = p({
   placement: l = "bottom",
   role: $ = "dialog"
 }) => {
-  const { refs: g, floatingStyles: x, context: h } = Q({
+  const { refs: u, floatingStyles: x, context: h } = Z({
     open: r,
     onOpenChange: a,
     placement: l,
-    whileElementsMounted: Z,
-    middleware: [_(e), oo(), eo()]
-  }), { isMounted: I, styles: z } = ro(h, {
-    initial: ({ side: L }) => ({
+    whileElementsMounted: _,
+    middleware: [oo(e), eo(), ro()]
+  }), { isMounted: z, styles: I } = to(h, {
+    initial: ({ side: G }) => ({
       opacity: 0,
       transform: {
         top: "translateY(-0.5rem)",
         right: "translateX(0.5rem)",
         bottom: "translateY(0.5rem)",
         left: "translateX(-0.5rem)"
-      }[L]
+      }[G]
     })
-  }), j = to(h, { enabled: i === "click" }), N = no(h, {
+  }), j = no(h, { enabled: i === "click" }), L = ao(h, {
     enabled: i === "hover",
     delay: s,
-    handleClose: ao()
-  }), X = io(h), Y = so(h, { role: $ }), { getFloatingProps: R, getReferenceProps: T } = lo([
+    handleClose: io()
+  }), N = so(h), Y = lo(h, { role: $ }), { getFloatingProps: R, getReferenceProps: T } = co([
     j,
+    L,
     N,
-    X,
     Y
-  ]), E = k(
+  ]), E = w(
     () => ({
       getFloatingProps: R,
       getReferenceProps: T,
       floatingStyles: x,
-      refs: g,
-      isMounted: I,
-      transitionStyles: z
+      refs: u,
+      isMounted: z,
+      transitionStyles: I
     }),
     [
       R,
       T,
-      I,
-      g,
+      z,
+      u,
       x,
-      z
+      I
     ]
   );
-  return /* @__PURE__ */ t(w.Provider, { value: E, children: o });
-}, Bo = ({ children: o }) => {
-  const { getReferenceProps: e, refs: r } = B(w);
-  return /* @__PURE__ */ t(G, { children: U(o) && q(o, {
+  return /* @__PURE__ */ t(C.Provider, { value: E, children: o });
+}, Ho = ({ children: o }) => {
+  const { getReferenceProps: e, refs: r } = B(C);
+  return /* @__PURE__ */ t(K, { children: q(o) && J(o, {
     ref: r.setReference,
     ...e()
   }) });
-}, Ho = ({ children: o, overlayCardProps: e }) => {
+}, Fo = ({ children: o, overlayCardProps: e }) => {
   const {
     getFloatingProps: r,
     isMounted: a,
     refs: i,
     floatingStyles: s,
     transitionStyles: l
-  } = B(w);
-  return a ? /* @__PURE__ */ t(co, { children: /* @__PURE__ */ t(
+  } = B(C);
+  return a ? /* @__PURE__ */ t($o, { children: /* @__PURE__ */ t(
     d,
     {
       ref: i.setFloating,
@@ -437,13 +438,13 @@ const ho = p({
       css: {
         zIndex: "$overlayCard"
       },
-      children: /* @__PURE__ */ t(P, { ...e, style: l, children: o })
+      children: /* @__PURE__ */ t(A, { ...e, style: l, children: o })
     }
   ) }) : null;
-}, ae = ({ children: o, content: e }) => {
-  const [r, a] = J(!1);
+}, ce = ({ children: o, content: e }) => {
+  const [r, a] = Q(!1);
   return /* @__PURE__ */ c(
-    Do,
+    Bo,
     {
       open: r,
       onOpenChange: a,
@@ -452,8 +453,8 @@ const ho = p({
       offset: { mainAxis: 8 },
       role: "tooltip",
       children: [
-        /* @__PURE__ */ t(Bo, { children: o }),
-        /* @__PURE__ */ t(Ho, { overlayCardProps: {
+        /* @__PURE__ */ t(Ho, { children: o }),
+        /* @__PURE__ */ t(Fo, { overlayCardProps: {
           css: {
             background: "rgba(0,0,0, 0.9)",
             color: "#fff",
@@ -464,7 +465,7 @@ const ho = p({
       ]
     }
   );
-}, ie = n("span", {
+}, $e = n("span", {
   flex: "0 0 auto",
   display: "inline-flex",
   padding: "$1 $2",
@@ -501,24 +502,24 @@ const ho = p({
   defaultVariants: {
     color: "primary"
   }
-}), se = n(y.Root, {
+}), me = n(y.Root, {
   backgroundColor: "$gray50",
   display: "flex",
   alignItems: "center",
   padding: "$1",
   gap: "$1"
-}), le = n(y.ToggleGroup, {
+}), ge = n(y.ToggleGroup, {
   display: "flex",
   gap: "$1",
   alignItems: "center"
-}), de = n(y.Separator, {
+}), ue = n(y.Separator, {
   width: "1px",
   height: "1.5rem",
   my: "$1",
   mx: "$1",
   backgroundColor: "$border"
-}), A = u(({ css: o, ...e }, r) => /* @__PURE__ */ t(
-  M,
+}), W = g(({ css: o, ...e }, r) => /* @__PURE__ */ t(
+  P,
   {
     ref: r,
     icon: !0,
@@ -532,27 +533,27 @@ const ho = p({
     },
     ...e
   }
-)), ce = u(
+)), pe = g(
   ({ children: o, dropdown: e, ...r }, a) => /* @__PURE__ */ t(
     y.Button,
     {
       asChild: !0,
       ref: a,
       children: /* @__PURE__ */ c(
-        A,
+        W,
         {
           variant: "transparent",
           color: "primary",
           ...r,
           children: [
             o,
-            e && /* @__PURE__ */ t($o, {})
+            e && /* @__PURE__ */ t(mo, {})
           ]
         }
       )
     }
   )
-), $e = u(({
+), he = g(({
   children: o,
   value: e,
   ...r
@@ -563,7 +564,7 @@ const ho = p({
     asChild: !0,
     ref: a,
     children: /* @__PURE__ */ t(
-      A,
+      W,
       {
         variant: "transparent",
         color: "primary",
@@ -573,7 +574,7 @@ const ho = p({
       }
     )
   }
-)), me = n("div", {
+)), be = n("div", {
   color: "$$cardText",
   backgroundColor: "$$cardBackground",
   borderRadius: "$md",
@@ -598,7 +599,7 @@ const ho = p({
     variant: "primary",
     elevation: "raised"
   }
-}), Fo = n("div", {
+}), Mo = n("div", {
   borderRadius: "$md",
   padding: "$1",
   border: "2px solid $blue100",
@@ -606,12 +607,12 @@ const ho = p({
   display: "flex",
   alignItems: "center",
   gap: "$1"
-}), ue = (o) => /* @__PURE__ */ t(Fo, { ...o }), ge = ({
+}), fe = (o) => /* @__PURE__ */ t(Mo, { ...o }), ye = ({
   children: o,
   active: e = !1,
   ...r
 }) => /* @__PURE__ */ t(
-  M,
+  P,
   {
     variant: "transparent",
     color: "primary",
@@ -624,12 +625,12 @@ const ho = p({
     ...r,
     children: o
   }
-), Mo = n(b.Overlay, {
+), Po = n(b.Overlay, {
   backgroundColor: "rgba(0, 0, 0, 0.7)",
   position: "fixed",
   zIndex: "$overlayCard",
   inset: 0
-}), Po = n(b.Content, {
+}), Ao = n(b.Content, {
   backgroundColor: "white",
   borderRadius: "$md",
   position: "fixed",
@@ -643,7 +644,7 @@ const ho = p({
   maxHeight: "85vh",
   padding: "$8",
   "&:focus": { outline: "none" }
-}), pe = ({
+}), xe = ({
   children: o,
   open: e,
   onOpenChange: r,
@@ -653,14 +654,14 @@ const ho = p({
 }) => /* @__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 })
+    /* @__PURE__ */ t(Po, {}),
+    /* @__PURE__ */ t(Ao, { css: i, ...s, children: o })
   ] })
-] }), he = n("h2", {
+] }), ve = n("h2", {
   fontSize: "$xl",
   fontWeight: "$medium",
   marginBottom: "$6"
-}), be = n("div", {
+}), we = n("div", {
   display: "flex",
   gap: "$2",
   justifyContent: "flex-end",
@@ -669,7 +670,7 @@ const ho = p({
   padding: "$4",
   borderBottomRightRadius: "$md",
   borderBottomLeftRadius: "$md"
-}), fe = n("div", {
+}), Wo = n("div", {
   display: "flex",
   variants: {
     direction: {
@@ -704,7 +705,7 @@ const ho = p({
     direction: "column",
     gap: 4
   }
-}), D = /* @__PURE__ */ new Map(), Ao = (o) => {
+}), D = /* @__PURE__ */ new Map(), Vo = (o) => {
   const e = D.get(o);
   if (e)
     return e;
@@ -713,7 +714,7 @@ const ho = p({
     r = o.charCodeAt($) + ((r << 5) - r);
   const l = `hsl(${r % 360}, 80%, 40%)`;
   return D.set(o, l), l;
-}, Wo = n("div", {
+}, Oo = n("div", {
   flex: "0 0 auto",
   display: "inline-flex",
   alignItems: "center",
@@ -744,17 +745,17 @@ const ho = p({
   defaultVariants: {
     size: "md"
   }
-}), ye = ({
+}), ke = ({
   css: o,
   colorString: e,
   ...r
 }) => {
-  const a = k(
-    () => e ? Ao(e) : "$gray200",
+  const a = w(
+    () => e ? Vo(e) : "$gray200",
     [e]
   );
-  return /* @__PURE__ */ t(Wo, { css: { backgroundColor: a, ...o }, ...r });
-}, Vo = n(P, {
+  return /* @__PURE__ */ t(Oo, { css: { backgroundColor: a, ...o }, ...r });
+}, Xo = n(A, {
   minWidth: "max(var(--radix-popper-anchor-width), 12rem)",
   padding: "$1"
 }), S = f({
@@ -780,7 +781,7 @@ const ho = p({
       backgroundColor: "transparent"
     }
   }
-}), xe = ({
+}), Ce = ({
   side: o = "bottom",
   align: e = "center",
   trigger: r,
@@ -797,10 +798,10 @@ const ho = p({
       align: e,
       collisionPadding: 10,
       sideOffset: i,
-      children: /* @__PURE__ */ t(Vo, { children: a })
+      children: /* @__PURE__ */ t(Xo, { children: a })
     }
   ) })
-] }), Oo = n(m.ItemIndicator, {
+] }), jo = n(m.ItemIndicator, {
   position: "absolute",
   left: 0,
   top: 0,
@@ -809,26 +810,26 @@ const ho = p({
   display: "flex",
   justifyContent: "center",
   alignItems: "center"
-}), ve = n(m.Separator, {
+}), Se = n(m.Separator, {
   height: 1,
   backgroundColor: "$gray200",
   margin: 1
-}), ke = n(m.Item, S), Ce = n(m.Item, S, {
+}), ze = n(m.Item, S), Ie = n(m.Item, S, {
   padding: "$2",
   display: "flex",
   alignItems: "center",
   gap: "$2"
-}), jo = n(m.CheckboxItem, S), we = ({
+}), Lo = n(m.CheckboxItem, S), Re = ({
   value: o,
   onChange: e,
   children: r
 }) => /* @__PURE__ */ c(
-  jo,
+  Lo,
   {
     checked: o,
     onCheckedChange: e,
     children: [
-      /* @__PURE__ */ t(Oo, { children: /* @__PURE__ */ t(go, { size: "0.75rem" }) }),
+      /* @__PURE__ */ t(jo, { children: /* @__PURE__ */ t(po, { size: "0.75rem" }) }),
       r
     ]
   }
@@ -892,30 +893,30 @@ const ho = p({
       boxShadow: e.isFocused ? "0 0 0 4px var(--colors-red100)" : "none"
     };
   }
-}, Xo = {
+}, Yo = {
   IndicatorSeparator: () => null
-}, W = ({
+}, V = ({
   styles: o,
   components: e,
   error: r,
   ...a
 }) => {
-  const i = k(
+  const i = w(
     () => ({
       ...v,
       ...o,
       ...r ? No : void 0
     }),
     [o, r]
-  ), s = k(
+  ), s = w(
     () => ({
-      ...Xo,
+      ...Yo,
       ...e
     }),
     [e]
   );
-  return /* @__PURE__ */ t(po, { components: s, styles: i, ...a });
-}, Se = (o) => /* @__PURE__ */ t(W, { ...o, isSearchable: !0 }), Ie = ({
+  return /* @__PURE__ */ t(ho, { components: s, styles: i, ...a });
+}, Te = (o) => /* @__PURE__ */ t(V, { ...o, isSearchable: !0 }), De = ({
   label: o,
   css: e,
   error: r,
@@ -934,7 +935,7 @@ const ho = p({
     }
   ),
   /* @__PURE__ */ t(
-    W,
+    V,
     {
       ...a,
       error: r,
@@ -943,7 +944,7 @@ const ho = p({
     }
   ),
   typeof r == "string" && /* @__PURE__ */ t(d, { css: { color: "$red600", fontSize: "$sm", marginTop: "$2" }, children: r })
-] }), V = f({
+] }), O = f({
   display: "block",
   width: "100%",
   padding: "0.5rem 0.75rem",
@@ -955,7 +956,7 @@ const ho = p({
   "-webkit-appearance": "none",
   "-moz-appearance": "none",
   appearance: "none"
-}), O = f({
+}), X = f({
   display: "block",
   width: "100%",
   background: "#fff",
@@ -979,14 +980,14 @@ const ho = p({
       }
     }
   }
-}), Yo = n("input", V), Eo = n("div", O, {
+}), Eo = n("input", O), Go = n("div", X, {
   display: "flex",
   alignItems: "center",
   gap: "$2",
   width: "100%"
-}), ze = u(
-  ({ type: o = "text", label: e, error: r, style: a, css: i, suffix: s, id: l, ...$ }, g) => {
-    const x = C();
+}), Be = g(
+  ({ type: o = "text", label: e, error: r, style: a, css: i, suffix: s, id: l, ...$ }, u) => {
+    const x = k();
     return l = l || x, /* @__PURE__ */ c(d, { css: i, children: [
       e && /* @__PURE__ */ t(
         d,
@@ -1001,12 +1002,12 @@ const ho = p({
           children: e
         }
       ),
-      /* @__PURE__ */ c(Eo, { error: !!r, children: [
+      /* @__PURE__ */ c(Go, { error: !!r, children: [
         /* @__PURE__ */ t(
-          Yo,
+          Eo,
           {
             id: l,
-            ref: g,
+            ref: u,
             type: o,
             "aria-invalid": r ? "true" : "false",
             ...$
@@ -1035,15 +1036,15 @@ const ho = p({
       typeof r == "string" && /* @__PURE__ */ t(d, { css: { color: "$red600", fontSize: "$sm", marginTop: "$2" }, children: r })
     ] });
   }
-), Lo = n("textarea", V), Go = n("div", O, {
+), Ko = n("textarea", O), Uo = n("div", X, {
   display: "flex",
   alignItems: "center",
   gap: "$2",
   width: "100%"
-}), Re = u(
+}), He = g(
   ({ 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: [
+    const u = k();
+    return s = s || u, /* @__PURE__ */ c(d, { css: a, children: [
       o && /* @__PURE__ */ t(
         d,
         {
@@ -1057,9 +1058,9 @@ const ho = p({
           children: o
         }
       ),
-      /* @__PURE__ */ c(Go, { error: !!e, children: [
+      /* @__PURE__ */ c(Uo, { error: !!e, children: [
         /* @__PURE__ */ t(
-          Lo,
+          Ko,
           {
             id: s,
             ref: $,
@@ -1090,7 +1091,7 @@ const ho = p({
       typeof e == "string" && /* @__PURE__ */ t(d, { css: { color: "$red600", fontSize: "$sm", marginTop: "$2" }, children: e })
     ] });
   }
-), Ko = n(F.Root, {
+), qo = n(F.Root, {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -1126,14 +1127,14 @@ const ho = p({
   defaultVariants: {
     size: "md"
   }
-}), Uo = n(F.Indicator, {
+}), Jo = n(F.Indicator, {
   "[data-icon]": {
     display: "none"
   },
   "&[data-state=checked] [data-icon=checked], &[data-state=indeterminate] [data-icon=indeterminate]": {
     display: "block"
   }
-}), qo = n("label", {
+}), Qo = n("label", {
   flex: "0 1 auto",
   variants: {
     size: {
@@ -1151,60 +1152,115 @@ const ho = p({
   defaultVariants: {
     size: "md"
   }
-}), Te = ({
+}), Fe = ({
   id: o,
   size: e,
   label: r,
   ...a
 }) => {
-  const i = C();
+  const i = k();
   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(qo, { id: o, size: e, ...a, children: /* @__PURE__ */ c(Jo, { children: [
+      /* @__PURE__ */ t(go, { "data-icon": "indeterminate" }),
       /* @__PURE__ */ t(uo, { "data-icon": "checked" })
     ] }) }),
-    r && /* @__PURE__ */ t(qo, { htmlFor: o, size: e, children: r })
+    r && /* @__PURE__ */ t(Qo, { htmlFor: o, size: e, children: r })
   ] });
-};
+}, Zo = n(M.Root, {
+  width: "42px",
+  height: "25px",
+  backgroundColor: "$gray200",
+  borderRadius: "9999px",
+  position: "relative",
+  border: "none",
+  "-webkit-tap-highlight-color": "rgba(0, 0, 0, 0)",
+  "&:focus": {
+    boxShadow: "0 0 0 2px $gray100"
+  },
+  "&[data-state='checked']": {
+    backgroundColor: "$green400"
+  }
+}), _o = n(M.Thumb, {
+  display: "block",
+  width: "21px",
+  height: "21px",
+  backgroundColor: "white",
+  borderRadius: "9999px",
+  boxShadow: "0 2px 2px $gray600",
+  transition: "transform 100ms",
+  transform: "translateX(2px)",
+  willChange: "transform",
+  "&[data-state='checked']": {
+    transform: "translateX(19px)"
+  }
+}), oe = n("div", {
+  fontWeight: "$bold",
+  variants: {
+    size: {
+      sm: {
+        fontSize: "$sm"
+      },
+      md: {
+        fontSize: "$md"
+      },
+      lg: {
+        fontSize: "$lg"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), Me = ({
+  label: o,
+  stackProps: e,
+  labelProps: r,
+  size: a,
+  ...i
+}) => /* @__PURE__ */ c(Wo, { direction: "row", align: "center", ...e, children: [
+  o && /* @__PURE__ */ t(oe, { size: a, ...r, children: o }),
+  /* @__PURE__ */ t(Zo, { ...i, children: /* @__PURE__ */ t(_o, {}) })
+] });
 export {
-  ne as Alert,
-  ye as Avatar,
-  ie as Badge,
+  de as Alert,
+  ke as Avatar,
+  $e as Badge,
   d as Box,
-  M as Button,
-  A as ButtonInToolbar,
-  me as Card,
-  Te as Checkbox,
-  Se as Combobox,
-  pe as Dialog,
-  be as DialogActions,
-  he as DialogHeader,
-  xe as DropdownMenu,
-  we as DropdownMenuCheckboxItem,
-  Ce as DropdownMenuIconItem,
-  ke as DropdownMenuItem,
-  ve as DropdownMenuSeparator,
-  Vo as MenuOverlayCard,
-  ue as NavBar,
-  ge as NavBarItem,
-  P as OverlayCard,
-  Do as Popover,
-  Ho as PopoverContent,
-  Bo as PopoverTrigger,
-  Ie as Select,
-  vo as Spinner,
-  fe as Stack,
-  Re as TextArea,
-  ze as TextInput,
-  se as Toolbar,
-  ce as ToolbarButton,
-  de as ToolbarSeparator,
-  le as ToolbarToggleGroup,
-  $e as ToolbarToggleItem,
-  ae as Tooltip,
+  P as Button,
+  W as ButtonInToolbar,
+  be as Card,
+  Fe as Checkbox,
+  Te as Combobox,
+  xe as Dialog,
+  we as DialogActions,
+  ve as DialogHeader,
+  Ce as DropdownMenu,
+  Re as DropdownMenuCheckboxItem,
+  Ie as DropdownMenuIconItem,
+  ze as DropdownMenuItem,
+  Se as DropdownMenuSeparator,
+  Xo as MenuOverlayCard,
+  fe as NavBar,
+  ye as NavBarItem,
+  A as OverlayCard,
+  Bo as Popover,
+  Fo as PopoverContent,
+  Ho as PopoverTrigger,
+  De as Select,
+  wo as Spinner,
+  Wo as Stack,
+  Me as Switch,
+  He as TextArea,
+  Be as TextInput,
+  me as Toolbar,
+  pe as ToolbarButton,
+  ue as ToolbarSeparator,
+  ge as ToolbarToggleGroup,
+  he as ToolbarToggleItem,
+  ce as Tooltip,
   f as css,
-  He as getCssText,
-  Fe as globalCss,
+  We as getCssText,
+  Ve as globalCss,
   p as keyframes,
   S as menuItemStyles,
   n as styled