@caspeco/casper-ui-library 10.3.1 → 10.5.0

package/dist/components/stack/stack.js

@@ -1,19 +1,19 @@
-import { jsx as c } from "react/jsx-runtime";
-import { c as m } from "../../_virtual/compiler-runtime.js";
-import { Stack as l } from "@chakra-ui/react";
-import { forwardRef as f } from "react";
-const S = f((s, a) => {
-  const r = m.c(11);
-  let t, o, e, i;
-  r[0] !== s ? ({
-    children: t,
-    divider: o,
-    spacing: i,
-    ...e
-  } = s, r[0] = s, r[1] = t, r[2] = o, r[3] = e, r[4] = i) : (t = r[1], o = r[2], e = r[3], i = r[4]);
-  let p;
-  return r[5] !== t || r[6] !== o || r[7] !== e || r[8] !== a || r[9] !== i ? (p = /* @__PURE__ */ c(l, { ref: a, separator: o, gap: i, ...e, children: t }), r[5] = t, r[6] = o, r[7] = e, r[8] = a, r[9] = i, r[10] = p) : p = r[10], p;
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { forwardRef as t } from "react";
+import { Stack as n } from "@chakra-ui/react";
+import { jsx as r } from "react/jsx-runtime";
+//#region lib/components/stack/stack.tsx
+var i = e(), a = t((e, t) => {
+	let a = (0, i.c)(11), o, s, c, l;
+	a[0] === e ? (o = a[1], s = a[2], c = a[3], l = a[4]) : ({children: o, divider: s, spacing: l, ...c} = e, a[0] = e, a[1] = o, a[2] = s, a[3] = c, a[4] = l);
+	let u;
+	return a[5] !== o || a[6] !== s || a[7] !== c || a[8] !== t || a[9] !== l ? (u = /* @__PURE__ */ r(n, {
+		ref: t,
+		separator: s,
+		gap: l,
+		...c,
+		children: o
+	}), a[5] = o, a[6] = s, a[7] = c, a[8] = t, a[9] = l, a[10] = u) : u = a[10], u;
 });
-export {
-  S as Stack
-};
+//#endregion
+export { a as Stack };

package/dist/components/stepper/check-icon.js

@@ -1,5 +1,5 @@
-import { createCasperIcon as c } from "../icon/create-icon.js";
-const e = c("CheckIcon", "M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z", {}, "0 0 512 512");
-export {
-  e as CheckIcon
-};
+import { createCasperIcon as e } from "../icon/create-icon.js";
+//#region lib/components/stepper/check-icon.tsx
+var t = e("CheckIcon", "M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z", {}, "0 0 512 512");
+//#endregion
+export { t as CheckIcon };

package/dist/components/stepper/step-context.js

@@ -1,5 +1,5 @@
-import { createContext as t } from "react";
-const o = t({});
-export {
-  o as StepContext
-};
+import { createContext as e } from "react";
+//#region lib/components/stepper/step-context.ts
+var t = e({});
+//#endregion
+export { t as StepContext };

package/dist/components/stepper/step.js

@@ -1,112 +1,117 @@
-import { jsx as m, jsxs as d } from "react/jsx-runtime";
-import { c as S } from "../../_virtual/compiler-runtime.js";
-import { Text as y, Box as h, Flex as C, Spinner as I } from "@chakra-ui/react";
-import { useContext as x } from "react";
-import { CheckIcon as H } from "./check-icon.js";
-import { StepContext as b } from "./step-context.js";
-import { TimesIcon as R } from "./times-icon.js";
-import { ThemeColorVariable as k, ThemeFontSizeVariable as B, ThemeFontVariable as F, ThemeRadiusVariable as w, ThemeSpaceVariable as z, ThemeIconSizeVariable as g } from "../../theme/theme-types.js";
-const T = (e, i) => {
-  switch (!0) {
-    case e:
-      return "32px";
-    case !!i:
-      return "24px";
-    default:
-      return "13px";
-  }
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { ThemeColorVariable as t, ThemeFontSizeVariable as n, ThemeFontVariable as r, ThemeIconSizeVariable as i, ThemeRadiusVariable as a, ThemeSpaceVariable as o } from "../../theme/theme-types.js";
+import { StepContext as s } from "./step-context.js";
+import { CheckIcon as c } from "./check-icon.js";
+import { TimesIcon as l } from "./times-icon.js";
+import { useContext as u } from "react";
+import { Box as d, Flex as f, Spinner as p, Text as m } from "@chakra-ui/react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region lib/components/stepper/step.tsx
+var _ = e(), v = (e, t) => {
+	switch (!0) {
+		case e: return "32px";
+		case !!t: return "24px";
+		default: return "13px";
+	}
 };
-function _(e, i) {
-  if (!i) return "0px";
-  switch (e) {
-    case "32px":
-      return "4px";
-    case "13px":
-      return "-6px";
-    default:
-      return "0px";
-  }
+function y(e, t) {
+	if (!t) return "0px";
+	switch (e) {
+		case "32px": return "4px";
+		case "13px": return "-6px";
+		default: return "0px";
+	}
 }
-function V() {
-  const e = S.c(19), {
-    isActiveStep: i,
-    iconColor: l,
-    color: o,
-    icon: t
-  } = x(b);
-  let r;
-  e[0] !== t || e[1] !== i ? (r = T(i, t), e[0] = t, e[1] = i, e[2] = r) : r = e[2];
-  const n = r, c = i ? g.Small : g.XSmall;
-  let s;
-  e[3] !== t || e[4] !== c ? (s = t === "check" && /* @__PURE__ */ m(H, { size: c }), e[3] = t, e[4] = c, e[5] = s) : s = e[5];
-  let p;
-  e[6] !== t || e[7] !== i ? (p = t === "spinner" && /* @__PURE__ */ m(I, { css: {
-    "--spinner-size": i ? g.XSmall : "0.75rem"
-  } }), e[6] = t, e[7] = i, e[8] = p) : p = e[8];
-  let f;
-  e[9] !== t || e[10] !== c ? (f = t === "times" && /* @__PURE__ */ m(R, { size: c }), e[9] = t, e[10] = c, e[11] = f) : f = e[11];
-  let a;
-  return e[12] !== n || e[13] !== o || e[14] !== l || e[15] !== s || e[16] !== p || e[17] !== f ? (a = /* @__PURE__ */ d(h, { backgroundColor: o, borderRadius: "full", w: n, minW: n, h: n, minH: n, display: "flex", alignItems: "center", justifyContent: "center", color: l, children: [
-    s,
-    p,
-    f
-  ] }), e[12] = n, e[13] = o, e[14] = l, e[15] = s, e[16] = p, e[17] = f, e[18] = a) : a = e[18], a;
+function b() {
+	let e = (0, _.c)(19), { isActiveStep: t, iconColor: n, color: r, icon: a } = u(s), o;
+	e[0] !== a || e[1] !== t ? (o = v(t, a), e[0] = a, e[1] = t, e[2] = o) : o = e[2];
+	let f = o, m = t ? i.Small : i.XSmall, y;
+	e[3] !== a || e[4] !== m ? (y = a === "check" && /* @__PURE__ */ h(c, { size: m }), e[3] = a, e[4] = m, e[5] = y) : y = e[5];
+	let b;
+	e[6] !== a || e[7] !== t ? (b = a === "spinner" && /* @__PURE__ */ h(p, { css: { "--spinner-size": t ? i.XSmall : "0.75rem" } }), e[6] = a, e[7] = t, e[8] = b) : b = e[8];
+	let x;
+	e[9] !== a || e[10] !== m ? (x = a === "times" && /* @__PURE__ */ h(l, { size: m }), e[9] = a, e[10] = m, e[11] = x) : x = e[11];
+	let S;
+	return e[12] !== f || e[13] !== r || e[14] !== n || e[15] !== y || e[16] !== b || e[17] !== x ? (S = /* @__PURE__ */ g(d, {
+		backgroundColor: r,
+		borderRadius: "full",
+		w: f,
+		minW: f,
+		h: f,
+		minH: f,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		color: n,
+		children: [
+			y,
+			b,
+			x
+		]
+	}), e[12] = f, e[13] = r, e[14] = n, e[15] = y, e[16] = b, e[17] = x, e[18] = S) : S = e[18], S;
 }
-function $() {
-  const e = S.c(6), {
-    showDivider: i,
-    dividerColor: l
-  } = x(b);
-  let o;
-  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ m(V, {}), e[0] = o) : o = e[0];
-  let t;
-  e[1] !== l || e[2] !== i ? (t = i && /* @__PURE__ */ m(h, { width: "3px", minH: "46px", bg: l, borderRadius: w.Small }), e[1] = l, e[2] = i, e[3] = t) : t = e[3];
-  let r;
-  return e[4] !== t ? (r = /* @__PURE__ */ d(C, { direction: "column", alignItems: "center", w: "48px", gap: z.Small, children: [
-    o,
-    t
-  ] }), e[4] = t, e[5] = r) : r = e[5], r;
+function x() {
+	let e = (0, _.c)(6), { showDivider: t, dividerColor: n } = u(s), r;
+	e[0] === Symbol.for("react.memo_cache_sentinel") ? (r = /* @__PURE__ */ h(b, {}), e[0] = r) : r = e[0];
+	let i;
+	e[1] !== n || e[2] !== t ? (i = t && /* @__PURE__ */ h(d, {
+		width: "3px",
+		minH: "46px",
+		bg: n,
+		borderRadius: a.Small
+	}), e[1] = n, e[2] = t, e[3] = i) : i = e[3];
+	let c;
+	return e[4] === i ? c = e[5] : (c = /* @__PURE__ */ g(f, {
+		direction: "column",
+		alignItems: "center",
+		w: "48px",
+		gap: o.Small,
+		children: [r, i]
+	}), e[4] = i, e[5] = c), c;
 }
-function j() {
-  const e = S.c(6), {
-    showDivider: i,
-    dividerColor: l
-  } = x(b);
-  let o;
-  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ m(V, {}), e[0] = o) : o = e[0];
-  let t;
-  e[1] !== l || e[2] !== i ? (t = i && /* @__PURE__ */ m(h, { w: "100%", h: "3px", bg: l, borderRadius: w.Small }), e[1] = l, e[2] = i, e[3] = t) : t = e[3];
-  let r;
-  return e[4] !== t ? (r = /* @__PURE__ */ d(C, { direction: "row", alignItems: "center", h: "48px", gap: z.Small, children: [
-    o,
-    t
-  ] }), e[4] = t, e[5] = r) : r = e[5], r;
+function S() {
+	let e = (0, _.c)(6), { showDivider: t, dividerColor: n } = u(s), r;
+	e[0] === Symbol.for("react.memo_cache_sentinel") ? (r = /* @__PURE__ */ h(b, {}), e[0] = r) : r = e[0];
+	let i;
+	e[1] !== n || e[2] !== t ? (i = t && /* @__PURE__ */ h(d, {
+		w: "100%",
+		h: "3px",
+		bg: n,
+		borderRadius: a.Small
+	}), e[1] = n, e[2] = t, e[3] = i) : i = e[3];
+	let c;
+	return e[4] === i ? c = e[5] : (c = /* @__PURE__ */ g(f, {
+		direction: "row",
+		alignItems: "center",
+		h: "48px",
+		gap: o.Small,
+		children: [r, i]
+	}), e[4] = i, e[5] = c), c;
 }
-function q() {
-  const e = S.c(13), {
-    isActiveStep: i,
-    orientation: l,
-    label: o,
-    icon: t
-  } = x(b), r = l === "vertical";
-  let n;
-  if (e[0] !== t || e[1] !== i || e[2] !== r) {
-    const v = T(i, t);
-    n = _(v, r), e[0] = t, e[1] = i, e[2] = r, e[3] = n;
-  } else
-    n = e[3];
-  const c = n;
-  let s;
-  e[4] !== o || e[5] !== c ? (s = typeof o == "string" ? /* @__PURE__ */ m(y, { mt: c, fontFamily: F.SubHeader, fontSize: B.Medium, color: k.OnBackgroundHeader, fontWeight: "medium", children: o }) : /* @__PURE__ */ m(h, { mt: c, children: o }), e[4] = o, e[5] = c, e[6] = s) : s = e[6];
-  const p = s, f = r ? "row" : "column";
-  let a;
-  e[7] !== r ? (a = r ? /* @__PURE__ */ m($, {}) : /* @__PURE__ */ m(j, {}), e[7] = r, e[8] = a) : a = e[8];
-  let u;
-  return e[9] !== p || e[10] !== f || e[11] !== a ? (u = /* @__PURE__ */ d(C, { w: "100%", h: "100%", direction: f, children: [
-    a,
-    p
-  ] }), e[9] = p, e[10] = f, e[11] = a, e[12] = u) : u = e[12], u;
+function C() {
+	let e = (0, _.c)(13), { isActiveStep: i, orientation: a, label: o, icon: c } = u(s), l = a === "vertical", p;
+	e[0] !== c || e[1] !== i || e[2] !== l ? (p = y(v(i, c), l), e[0] = c, e[1] = i, e[2] = l, e[3] = p) : p = e[3];
+	let b = p, C;
+	e[4] !== o || e[5] !== b ? (C = typeof o == "string" ? /* @__PURE__ */ h(m, {
+		mt: b,
+		fontFamily: r.SubHeader,
+		fontSize: n.Medium,
+		color: t.OnBackgroundHeader,
+		fontWeight: "medium",
+		children: o
+	}) : /* @__PURE__ */ h(d, {
+		mt: b,
+		children: o
+	}), e[4] = o, e[5] = b, e[6] = C) : C = e[6];
+	let w = C, T = l ? "row" : "column", E;
+	e[7] === l ? E = e[8] : (E = h(l ? x : S, {}), e[7] = l, e[8] = E);
+	let D;
+	return e[9] !== w || e[10] !== T || e[11] !== E ? (D = /* @__PURE__ */ g(f, {
+		w: "100%",
+		h: "100%",
+		direction: T,
+		children: [E, w]
+	}), e[9] = w, e[10] = T, e[11] = E, e[12] = D) : D = e[12], D;
 }
-export {
-  q as Step
-};
+//#endregion
+export { C as Step };

package/dist/components/stepper/stepper.js

@@ -1,44 +1,43 @@
-import { jsx as u } from "react/jsx-runtime";
-import { c as B } from "../../_virtual/compiler-runtime.js";
-import { Stack as k } from "@chakra-ui/react";
-import { Step as x } from "./step.js";
-import { StepContext as O } from "./step-context.js";
-import { ThemeSpaceVariable as V, ThemeColorVariable as h } from "../../theme/theme-types.js";
-function P(d) {
-  const o = B.c(19);
-  let e, r, c, t;
-  o[0] !== d ? ({
-    activeStep: e,
-    orientation: c,
-    steps: t,
-    ...r
-  } = d, o[0] = d, o[1] = e, o[2] = r, o[3] = c, o[4] = t) : (e = o[1], r = o[2], c = o[3], t = o[4]);
-  const i = c === void 0 ? "vertical" : c;
-  let a;
-  o[5] !== t ? (a = t === void 0 ? [] : t, o[5] = t, o[6] = a) : a = o[6];
-  const l = a, g = i === "vertical";
-  let s;
-  if (o[7] !== e || o[8] !== i || o[9] !== l) {
-    let p;
-    o[11] !== e || o[12] !== i || o[13] !== l.length ? (p = (n, C) => {
-      const S = C + 1, b = {
-        orientation: i,
-        isActiveStep: e === S,
-        showDivider: C !== l.length - 1,
-        label: n.label,
-        icon: n.icon,
-        color: n.color ?? h.OnBackgroundBorder,
-        iconColor: n.iconColor ?? h.OnBackground,
-        dividerColor: (n.dividerColor || n.color) ?? h.OnBackgroundBorder
-      };
-      return /* @__PURE__ */ u(O.Provider, { value: b, children: /* @__PURE__ */ u(x, {}) }, S);
-    }, o[11] = e, o[12] = i, o[13] = l.length, o[14] = p) : p = o[14], s = l.map(p), o[7] = e, o[8] = i, o[9] = l, o[10] = s;
-  } else
-    s = o[10];
-  const f = s, v = g ? "column" : "row";
-  let m;
-  return o[15] !== r || o[16] !== f || o[17] !== v ? (m = /* @__PURE__ */ u(k, { gap: V.Small, direction: v, ...r, children: f }), o[15] = r, o[16] = f, o[17] = v, o[18] = m) : m = o[18], m;
+import { require_compiler_runtime as e } from "../../node_modules/react/compiler-runtime.js";
+import { ThemeColorVariable as t, ThemeSpaceVariable as n } from "../../theme/theme-types.js";
+import { StepContext as r } from "./step-context.js";
+import { Step as i } from "./step.js";
+import { Stack as a } from "@chakra-ui/react";
+import { jsx as o } from "react/jsx-runtime";
+//#region lib/components/stepper/stepper.tsx
+var s = e();
+function c(e) {
+	let c = (0, s.c)(19), l, u, d, f;
+	c[0] === e ? (l = c[1], u = c[2], d = c[3], f = c[4]) : ({activeStep: l, orientation: d, steps: f, ...u} = e, c[0] = e, c[1] = l, c[2] = u, c[3] = d, c[4] = f);
+	let p = d === void 0 ? "vertical" : d, m;
+	c[5] === f ? m = c[6] : (m = f === void 0 ? [] : f, c[5] = f, c[6] = m);
+	let h = m, g = p === "vertical", _;
+	if (c[7] !== l || c[8] !== p || c[9] !== h) {
+		let e;
+		c[11] !== l || c[12] !== p || c[13] !== h.length ? (e = (e, n) => {
+			let a = n + 1, s = {
+				orientation: p,
+				isActiveStep: l === a,
+				showDivider: n !== h.length - 1,
+				label: e.label,
+				icon: e.icon,
+				color: e.color ?? t.OnBackgroundBorder,
+				iconColor: e.iconColor ?? t.OnBackground,
+				dividerColor: (e.dividerColor || e.color) ?? t.OnBackgroundBorder
+			};
+			return /* @__PURE__ */ o(r.Provider, {
+				value: s,
+				children: /* @__PURE__ */ o(i, {})
+			}, a);
+		}, c[11] = l, c[12] = p, c[13] = h.length, c[14] = e) : e = c[14], _ = h.map(e), c[7] = l, c[8] = p, c[9] = h, c[10] = _;
+	} else _ = c[10];
+	let v = _, y = g ? "column" : "row", b;
+	return c[15] !== u || c[16] !== v || c[17] !== y ? (b = /* @__PURE__ */ o(a, {
+		gap: n.Small,
+		direction: y,
+		...u,
+		children: v
+	}), c[15] = u, c[16] = v, c[17] = y, c[18] = b) : b = c[18], b;
 }
-export {
-  P as Stepper
-};
+//#endregion
+export { c as Stepper };

package/dist/components/stepper/times-icon.js

@@ -1,5 +1,5 @@
-import { createCasperIcon as c } from "../icon/create-icon.js";
-const o = c("TimesIcon", "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z", {}, "0 0 320 512");
-export {
-  o as TimesIcon
-};
+import { createCasperIcon as e } from "../icon/create-icon.js";
+//#region lib/components/stepper/times-icon.tsx
+var t = e("TimesIcon", "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z", {}, "0 0 320 512");
+//#endregion
+export { t as TimesIcon };

package/dist/components/switch/hover-styles.js

@@ -1,45 +1,31 @@
 import { ThemeColorVariable as e } from "../../theme/theme-types.js";
-const t = "& label:not([data-state='checked']):not([data-disabled]):hover", c = "& label[data-state='checked']:not([data-disabled]):hover", o = "& label[data-disabled]:not([data-state='checked']):hover", r = "& label[data-disabled][data-state='checked']:hover", d = {
-  // Target only device that supports hover (excludes thouch screen devices):
-  "@media(hover: hover)": {
-    // General hover styles for entire switch:
-    [t]: {
-      "& .switch__control": {
-        borderColor: e.OnSurface
-      },
-      "& .switch__thumb": {
-        bg: e.OnSurface
-      }
-    },
-    [c]: {
-      "& .switch__control": {
-        bg: e.AccentHover,
-        borderColor: e.AccentHover
-      },
-      "& .switch__thumb": {
-        bg: e.OnAccent
-      }
-    },
-    [o]: {
-      "& .switch__control": {
-        bg: e.Surface,
-        borderColor: e.OnSurfaceSubdued
-      },
-      "& .switch__thumb": {
-        bg: e.OnSurfaceSubdued
-      }
-    },
-    [r]: {
-      "& .switch__control": {
-        bg: e.Accent,
-        borderColor: e.Accent
-      },
-      "& .switch__thumb": {
-        bg: e.OnAccent
-      }
-    }
-  }
-};
-export {
-  d as hoverStyles
-};
+//#region lib/components/switch/hover-styles.ts
+var t = "& label:not([data-state='checked']):not([data-disabled]):hover", n = "& label[data-state='checked']:not([data-disabled]):hover", r = "& label[data-disabled]:not([data-state='checked']):hover", i = "& label[data-disabled][data-state='checked']:hover", a = { "@media(hover: hover)": {
+	[t]: {
+		"& .switch__control": { borderColor: e.OnSurface },
+		"& .switch__thumb": { bg: e.OnSurface }
+	},
+	[n]: {
+		"& .switch__control": {
+			bg: e.AccentHover,
+			borderColor: e.AccentHover
+		},
+		"& .switch__thumb": { bg: e.OnAccent }
+	},
+	[r]: {
+		"& .switch__control": {
+			bg: e.Surface,
+			borderColor: e.OnSurfaceSubdued
+		},
+		"& .switch__thumb": { bg: e.OnSurfaceSubdued }
+	},
+	[i]: {
+		"& .switch__control": {
+			bg: e.Accent,
+			borderColor: e.Accent
+		},
+		"& .switch__thumb": { bg: e.OnAccent }
+	}
+} };
+//#endregion
+export { a as hoverStyles };

package/dist/components/switch/switch-recipe.js

@@ -1,86 +1,78 @@
 import { ThemeColorToken as e } from "../../theme/theme-tokens.js";
-import { defineSlotRecipe as c } from "@chakra-ui/react";
-import { switchAnatomy as h } from "@chakra-ui/react/anatomy";
-const t = {
-  background: e.Surface,
-  borderColor: e.OnSurfaceSubdued,
-  borderStyle: "solid",
-  borderWidth: "2px",
-  alignItems: "center",
-  padding: "0.125rem",
-  _checked: {
-    background: e.Accent,
-    borderColor: e.Accent
-  },
-  _disabled: {
-    opacity: 0.48
-  }
-}, o = {
-  background: e.OnSurfaceSubdued,
-  _checked: {
-    background: e.OnAccent
-  },
-  _disabled: {
-    opacity: 0.48
-  }
-}, a = c({
-  className: "switch",
-  slots: h.keys(),
-  base: {
-    control: t,
-    thumb: o
-  },
-  variants: {
-    variant: {
-      solid: {
-        control: t,
-        thumb: o
-      }
-    },
-    size: {
-      sm: {
-        thumb: {
-          width: "12px",
-          height: "12px",
-          scale: "1.0",
-          _checked: {
-            translate: "11px 0",
-            width: "14px",
-            height: "14px"
-          }
-        },
-        control: {
-          width: "32px",
-          height: "20px"
-        },
-        root: {
-          width: "32px",
-          height: "20px"
-        }
-      },
-      md: {
-        thumb: {
-          width: "16px",
-          height: "16px",
-          scale: "1.0",
-          _checked: {
-            translate: "15px 0",
-            width: "18px",
-            height: "18px"
-          }
-        },
-        control: {
-          width: "40px",
-          height: "24px"
-        },
-        root: {
-          width: "40px",
-          height: "24px"
-        }
-      }
-    }
-  }
+import { defineSlotRecipe as t } from "@chakra-ui/react";
+import { switchAnatomy as n } from "@chakra-ui/react/anatomy";
+//#region lib/components/switch/switch-recipe.ts
+var r = {
+	background: e.Surface,
+	borderColor: e.OnSurfaceSubdued,
+	borderStyle: "solid",
+	borderWidth: "2px",
+	alignItems: "center",
+	padding: "0.125rem",
+	_checked: {
+		background: e.Accent,
+		borderColor: e.Accent
+	},
+	_disabled: { opacity: .48 }
+}, i = {
+	background: e.OnSurfaceSubdued,
+	_checked: { background: e.OnAccent },
+	_disabled: { opacity: .48 }
+}, a = t({
+	className: "switch",
+	slots: n.keys(),
+	base: {
+		control: r,
+		thumb: i
+	},
+	variants: {
+		variant: { solid: {
+			control: r,
+			thumb: i
+		} },
+		size: {
+			sm: {
+				thumb: {
+					width: "12px",
+					height: "12px",
+					scale: "1.0",
+					_checked: {
+						translate: "11px 0",
+						width: "14px",
+						height: "14px"
+					}
+				},
+				control: {
+					width: "32px",
+					height: "20px"
+				},
+				root: {
+					width: "32px",
+					height: "20px"
+				}
+			},
+			md: {
+				thumb: {
+					width: "16px",
+					height: "16px",
+					scale: "1.0",
+					_checked: {
+						translate: "15px 0",
+						width: "18px",
+						height: "18px"
+					}
+				},
+				control: {
+					width: "40px",
+					height: "24px"
+				},
+				root: {
+					width: "40px",
+					height: "24px"
+				}
+			}
+		}
+	}
 });
-export {
-  a as switchRecipe
-};
+//#endregion
+export { a as switchRecipe };