@caspeco/casper-ui-library 8.4.0 → 9.0.0-alpha.0

package/dist/components/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../lib/components/select/select.tsx"],"names":[],"mappings":"AACA,OAAO,EACN,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAChB,KAAK,YAAY,EAEjB,MAAM,SAAS,CAAC;AACjB,OAAO,EAEN,KAAK,WAAW,IAAI,iBAAiB,EACrC,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,WAAW,GAAG;IAClB,iDAAiD;IACjD,IAAI,CAAC,EAAE,eAAe,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACvE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B,CAAC;AACF,KAAK,sBAAsB,GAAG,IAAI,CACjC,iBAAiB,EACf,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,cAAc,GACd,aAAa,GACb,UAAU,GACV,MAAM,GACN,cAAc,GACd,WAAW,CACb,CAAC;AACF,MAAM,MAAM,WAAW,GAAG,sBAAsB,GAC/C,WAAW,GACX,oBAAoB,GACpB,WAAW,GACX,WAAW,GACX,YAAY,CAAC;AAEd,eAAO,MAAM,MAAM,kLAgBlB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../lib/components/select/select.tsx"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,IAAI,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGvF,KAAK,WAAW,GAAG;IAClB,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAG9B,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,sBAAsB,GAAG,IAAI,CACjC,YAAY,CAAC,UAAU,EACrB,UAAU,GACV,QAAQ,GACR,OAAO,GACP,cAAc,GACd,aAAa,GACb,UAAU,GACV,MAAM,GACN,cAAc,GACd,WAAW,CACb,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,sBAAsB,GAC/C,WAAW,GACX,oBAAoB,GACpB,WAAW,GACX,WAAW,GACX,YAAY,CAAC;AAEd,eAAO,MAAM,MAAM,sMAajB,CAAC"}

package/dist/components/select/select.js

@@ -1,15 +1,15 @@
-import { jsx as o, Fragment as n } from "react/jsx-runtime";
-import { Select as f } from "@chakra-ui/react";
-import r from "react";
-import { Icon as s } from "../icon/icon.js";
-import { Icons as p } from "../icon/types.js";
-import { ThemeIconSizeVariable as a } from "../../theme/theme-types.js";
-const h = r.forwardRef(
-  ({ children: t, size: m = "md", variant: e = "outline", ...c }, i) => {
-    const l = r.useCallback(() => e === "ghost" ? /* @__PURE__ */ o(n, {}) : /* @__PURE__ */ o(s, { icon: p.TreeViewCollapse, size: a.Small }), [e]);
-    return /* @__PURE__ */ o(f, { ref: i, size: m, icon: l(), variant: e, ...c, children: t });
-  }
-);
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { NativeSelect as r } from "@chakra-ui/react";
+import { forwardRef as c } from "react";
+import { TreeViewCollapseIcon as d } from "../icon/icons/tree-view-collapse-icon.js";
+import { ThemeIconSizeVariable as f } from "../../theme/theme-types.js";
+const z = c((i, o) => {
+  const { children: t, size: l = "md", variant: m = "outline", isDisabled: s, ...a } = i;
+  return /* @__PURE__ */ n(r.Root, { size: l, variant: m, disabled: s, children: [
+    /* @__PURE__ */ e(r.Field, { ref: o, ...a, children: t }),
+    /* @__PURE__ */ e(r.Indicator, { children: /* @__PURE__ */ e(d, { size: f.Small }) })
+  ] });
+});
 export {
-  h as Select
+  z as Select
 };

package/dist/components/skeleton/skeleton-text.d.ts

@@ -4,5 +4,5 @@ import { SkeletonTextProps } from './types.js';
  *
  * @see Docs https://caspeco.github.io/casper-ui-library/components/skeleton
  */
-export declare function SkeletonText({ startColor, endColor, ...props }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonText({ backgroundColor, variant, isLoaded, ...props }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=skeleton-text.d.ts.map

package/dist/components/skeleton/skeleton-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton-text.d.ts","sourceRoot":"","sources":["../../../lib/components/skeleton/skeleton-text.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD;;;;GAIG;AAEH,wBAAgB,YAAY,CAAC,EAC5B,UAAkD,EAClD,QAAgD,EAChD,GAAG,KAAK,EACR,EAAE,iBAAiB,2CAUnB"}
+{"version":3,"file":"skeleton-text.d.ts","sourceRoot":"","sources":["../../../lib/components/skeleton/skeleton-text.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD;;;;GAIG;AAEH,wBAAgB,YAAY,CAAC,EAC5B,eAAuD,EACvD,OAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,iBAAiB,2CAKnB"}

package/dist/components/skeleton/skeleton-text.js

@@ -1,22 +1,15 @@
-import { jsx as n } from "react/jsx-runtime";
-import { SkeletonText as a } from "@chakra-ui/react";
-import { ThemeColorVariable as e } from "../../theme/theme-types.js";
-function l({
-  startColor: o = e.BackgroundDisabled,
-  endColor: r = e.OnBackgroundBorder,
-  ...t
+import { jsx as a } from "react/jsx-runtime";
+import { SkeletonText as i } from "@chakra-ui/react";
+import { ThemeColorVariable as l } from "../../theme/theme-types.js";
+function u({
+  backgroundColor: e = l.OnBackgroundBorder,
+  variant: r = "pulse",
+  isLoaded: t,
+  ...n
 }) {
-  return /* @__PURE__ */ n(
-    a,
-    {
-      speed: 0.8,
-      fadeDuration: 0.4,
-      startColor: o,
-      endColor: r,
-      ...t
-    }
-  );
+  const o = !t;
+  return /* @__PURE__ */ a(i, { loading: o, background: o ? e : void 0, variant: r, ...n });
 }
 export {
-  l as SkeletonText
+  u as SkeletonText
 };

package/dist/components/skeleton/skeleton.d.ts

@@ -4,5 +4,5 @@ import { SkeletonProps } from './types.js';
  *
  * @see Docs https://caspeco.github.io/casper-ui-library/components/skeleton
  */
-export declare function Skeleton({ startColor, endColor, children, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton({ backgroundColor, variant, isLoaded, children, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../lib/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;GAIG;AAEH,wBAAgB,QAAQ,CAAC,EACxB,UAAkD,EAClD,QAAgD,EAChD,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,aAAa,2CAMf"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../lib/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACxB,eAAuD,EACvD,OAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,aAAa,2CASf"}

package/dist/components/skeleton/skeleton.js

@@ -1,14 +1,16 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Skeleton as a } from "@chakra-ui/react";
-import { ThemeColorVariable as o } from "../../theme/theme-types.js";
-function d({
-  startColor: r = o.BackgroundDisabled,
-  endColor: e = o.OnBackgroundBorder,
-  children: n,
-  ...t
+import { jsx as i } from "react/jsx-runtime";
+import { Skeleton as l } from "@chakra-ui/react";
+import { ThemeColorVariable as m } from "../../theme/theme-types.js";
+function p({
+  backgroundColor: r = m.OnBackgroundBorder,
+  variant: e = "pulse",
+  isLoaded: n,
+  children: t,
+  ...a
 }) {
-  return /* @__PURE__ */ m(a, { startColor: r, endColor: e, ...t, children: n });
+  const o = !n;
+  return /* @__PURE__ */ i(l, { loading: o, background: o ? r : void 0, variant: e, ...a, children: t });
 }
 export {
-  d as Skeleton
+  p as Skeleton
 };

package/dist/components/skeleton/types.d.ts

@@ -1,12 +1,9 @@
-import { LayoutProps, MarginProps, PaddingProps, ThemeColorVariable } from '../../theme/index.js';
+import { LayoutProps, MarginProps, PaddingProps } from '../../theme/index.js';
 import { SkeletonProps as ChakraSkeletonProps, SkeletonTextProps as ChakraSkeletonTextProps } from '@chakra-ui/react';
-type SkeletonCustomProps = {
-    /** The color at the animation start */
-    startColor?: ThemeColorVariable;
-    /** The color at the animation end */
-    endColor?: ThemeColorVariable;
+type CustomSkeletonProps = {
+    isLoaded?: boolean;
 };
-export type SkeletonProps = SkeletonCustomProps & ChakraSkeletonProps & MarginProps & LayoutProps;
-export type SkeletonTextProps = SkeletonCustomProps & ChakraSkeletonTextProps & MarginProps & LayoutProps & PaddingProps;
+export type SkeletonProps = CustomSkeletonProps & ChakraSkeletonProps & MarginProps & LayoutProps;
+export type SkeletonTextProps = CustomSkeletonProps & ChakraSkeletonTextProps & MarginProps & LayoutProps & PaddingProps;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/skeleton/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACpG,OAAO,KAAK,EACX,aAAa,IAAI,mBAAmB,EACpC,iBAAiB,IAAI,uBAAuB,EAC5C,MAAM,kBAAkB,CAAC;AAE1B,KAAK,mBAAmB,GAAG;IAC1B,uCAAuC;IACvC,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC9B,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,WAAW,GAAG,WAAW,CAAC;AAElG,MAAM,MAAM,iBAAiB,GAAG,mBAAmB,GAClD,uBAAuB,GACvB,WAAW,GACX,WAAW,GACX,YAAY,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAChF,OAAO,KAAK,EACX,aAAa,IAAI,mBAAmB,EACpC,iBAAiB,IAAI,uBAAuB,EAC5C,MAAM,kBAAkB,CAAC;AAE1B,KAAK,mBAAmB,GAAG;IAE1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,WAAW,GAAG,WAAW,CAAC;AAElG,MAAM,MAAM,iBAAiB,GAAG,mBAAmB,GAClD,uBAAuB,GACvB,WAAW,GACX,WAAW,GACX,YAAY,CAAC"}

package/dist/components/stack/stack.d.ts

@@ -1,9 +1,10 @@
-import { ThemeSpaceVariable, ThemeStyleProps } from '../../theme/index.js';
-import { StackProps as ChakraStackProps, ComponentWithAs, ResponsiveValue } from '@chakra-ui/react';
+import { ThemeStyleProps } from '../../theme/index.js';
+import { StackProps as ChakraStackProps } from '@chakra-ui/react';
 type CustomStackProps = {
-    spacing?: ResponsiveValue<ThemeSpaceVariable | (string & {})> | undefined;
+    divider?: ChakraStackProps["separator"];
+    spacing?: ChakraStackProps["gap"];
 };
-export type StackProps = Pick<ChakraStackProps, "direction" | "children" | "divider"> & CustomStackProps & ThemeStyleProps;
+export type StackProps = Pick<ChakraStackProps, "direction" | "children"> & CustomStackProps & ThemeStyleProps;
 /**
  * Stacks help you easily create flexible and automatically distributed layouts
  * You can stack elements in the horizontal or vertical direction, and apply a space or/and divider between each element.
@@ -11,6 +12,6 @@ export type StackProps = Pick<ChakraStackProps, "direction" | "children" | "divi
  *
  * @see Docs https://caspeco.github.io/casper-ui-library/components/stack
  */
-export declare const Stack: ComponentWithAs<"div", StackProps>;
+export declare const Stack: import('react').ForwardRefExoticComponent<Pick<ChakraStackProps, "direction" | "children"> & CustomStackProps & ThemeStyleProps & import('react').RefAttributes<HTMLDivElement>>;
 export {};
 //# sourceMappingURL=stack.d.ts.map

package/dist/components/stack/stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../lib/components/stack/stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,EAEN,KAAK,UAAU,IAAI,gBAAgB,EACnC,KAAK,eAAe,EAEpB,KAAK,eAAe,EACpB,MAAM,kBAAkB,CAAC;AAE1B,KAAK,gBAAgB,GAAG;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC,kBAAkB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,GAAG,SAAS,CAAC;CAC1E,CAAC;AACF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC,GACpF,gBAAgB,GAChB,eAAe,CAAC;AAEjB;;;;;;GAMG;AAGH,eAAO,MAAM,KAAK,EAMZ,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../lib/components/stack/stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAwB,KAAK,UAAU,IAAI,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAG7F,KAAK,gBAAgB,GAAG;IAEvB,OAAO,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,UAAU,CAAC,GACxE,gBAAgB,GAChB,eAAe,CAAC;AAEjB;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,kLAQjB,CAAC"}

package/dist/components/stack/stack.js

@@ -1,6 +1,9 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as c, Stack as f } from "@chakra-ui/react";
-const k = c(({ children: r, ...t }, o) => /* @__PURE__ */ a(f, { ref: o, ...t, children: r }));
+import { jsx as p } from "react/jsx-runtime";
+import { Stack as f } from "@chakra-ui/react";
+import { forwardRef as c } from "react";
+const k = c(
+  ({ children: r, divider: o, spacing: t, ...a }, m) => /* @__PURE__ */ p(f, { ref: m, separator: o, gap: t, ...a, children: r })
+);
 export {
   k as Stack
 };

package/dist/components/stepper/check-icon.d.ts

@@ -1,3 +1,2 @@
-import { ComponentWithAs, IconProps } from '@chakra-ui/react';
-export declare const CheckIcon: ComponentWithAs<"svg", IconProps>;
+export declare const CheckIcon: import('../icon/index.js').CasperIconComponent;
 //# sourceMappingURL=check-icon.d.ts.map

package/dist/components/stepper/check-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"check-icon.d.ts","sourceRoot":"","sources":["../../../lib/components/stepper/check-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAc,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEpF,eAAO,MAAM,SAAS,EAAE,eAAe,CAAC,KAAK,EAAE,SAAS,CAItD,CAAC"}
+{"version":3,"file":"check-icon.d.ts","sourceRoot":"","sources":["../../../lib/components/stepper/check-icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,iDAKrB,CAAC"}

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

@@ -1,9 +1,10 @@
-import { createIcon as c } from "@chakra-ui/react";
-const e = c({
-  displayName: "CheckIcon",
-  viewBox: "0 0 512 512",
-  d: "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"
-});
+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
 };

package/dist/components/stepper/step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../lib/components/stepper/step.tsx"],"names":[],"mappings":"AAyFA;;GAEG;AACH,wBAAgB,IAAI,4CA2BnB"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../lib/components/stepper/step.tsx"],"names":[],"mappings":"AAgGA;;GAEG;AACH,wBAAgB,IAAI,4CA2BnB"}

package/dist/components/stepper/step.js

@@ -1,11 +1,11 @@
 import { jsx as i, jsxs as l } from "react/jsx-runtime";
-import { Text as g, Box as a, Flex as m, Icon as d, Spinner as C } from "@chakra-ui/react";
+import { Text as g, Box as a, Flex as u, Spinner as C } from "@chakra-ui/react";
 import { useContext as s } from "react";
 import { CheckIcon as w } from "./check-icon.js";
-import { StepContext as p } from "./step-context.js";
+import { StepContext as m } from "./step-context.js";
 import { TimesIcon as z } from "./times-icon.js";
-import { ThemeColorVariable as T, ThemeFontSizeVariable as v, ThemeFontVariable as V, ThemeSpaceVariable as x, ThemeRadiusVariable as h } from "../../theme/theme-types.js";
-const S = (e, r) => {
+import { ThemeColorVariable as T, ThemeFontSizeVariable as V, ThemeFontVariable as v, ThemeSpaceVariable as S, ThemeRadiusVariable as h, ThemeIconSizeVariable as p } from "../../theme/theme-types.js";
+const x = (e, r) => {
   switch (!0) {
     case e:
       return "32px";
@@ -27,56 +27,63 @@ function I(e, r) {
   }
 }
 function f() {
-  const { isActiveStep: e, iconColor: r, color: n, icon: t } = s(p), o = S(e, t), c = e ? "20px" : "16px";
+  const { isActiveStep: e, iconColor: r, color: o, icon: n } = s(m), t = x(e, n), c = e ? p.Small : p.XSmall;
   return /* @__PURE__ */ l(
     a,
     {
-      backgroundColor: n,
+      backgroundColor: o,
       borderRadius: "full",
-      w: o,
-      minW: o,
-      h: o,
-      minH: o,
+      w: t,
+      minW: t,
+      h: t,
+      minH: t,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       color: r,
       children: [
-        t === "check" && /* @__PURE__ */ i(d, { as: w, boxSize: c }),
-        t === "spinner" && /* @__PURE__ */ i(C, { size: e ? "sm" : "xs" }),
-        t === "times" && /* @__PURE__ */ i(d, { as: z, boxSize: c })
+        n === "check" && /* @__PURE__ */ i(w, { size: c }),
+        n === "spinner" && /* @__PURE__ */ i(
+          C,
+          {
+            css: {
+              "--spinner-size": e ? p.XSmall : "0.75rem"
+            }
+          }
+        ),
+        n === "times" && /* @__PURE__ */ i(z, { size: c })
       ]
     }
   );
 }
 function H() {
-  const { showDivider: e, dividerColor: r } = s(p);
-  return /* @__PURE__ */ l(m, { direction: "column", alignItems: "center", w: "48px", gap: x.Small, children: [
+  const { showDivider: e, dividerColor: r } = s(m);
+  return /* @__PURE__ */ l(u, { direction: "column", alignItems: "center", w: "48px", gap: S.Small, children: [
     /* @__PURE__ */ i(f, {}),
     e && /* @__PURE__ */ i(a, { width: "3px", minH: "46px", bg: r, borderRadius: h.Small })
   ] });
 }
 function k() {
-  const { showDivider: e, dividerColor: r } = s(p);
-  return /* @__PURE__ */ l(m, { direction: "row", alignItems: "center", h: "48px", gap: x.Small, children: [
+  const { showDivider: e, dividerColor: r } = s(m);
+  return /* @__PURE__ */ l(u, { direction: "row", alignItems: "center", h: "48px", gap: S.Small, children: [
     /* @__PURE__ */ i(f, {}),
     e && /* @__PURE__ */ i(a, { w: "100%", h: "3px", bg: r, borderRadius: h.Small })
   ] });
 }
 function D() {
-  const { isActiveStep: e, orientation: r, label: n, icon: t } = s(p), o = r === "vertical", c = S(e, t), u = I(c, o), b = typeof n == "string" ? /* @__PURE__ */ i(
+  const { isActiveStep: e, orientation: r, label: o, icon: n } = s(m), t = r === "vertical", c = x(e, n), d = I(c, t), b = typeof o == "string" ? /* @__PURE__ */ i(
     g,
     {
-      mt: u,
-      fontFamily: V.SubHeader,
-      fontSize: v.Medium,
+      mt: d,
+      fontFamily: v.SubHeader,
+      fontSize: V.Medium,
       color: T.OnBackgroundHeader,
       fontWeight: "medium",
-      children: n
+      children: o
     }
-  ) : /* @__PURE__ */ i(a, { mt: u, children: n });
-  return /* @__PURE__ */ l(m, { w: "100%", h: "100%", direction: o ? "row" : "column", children: [
-    o ? /* @__PURE__ */ i(H, {}) : /* @__PURE__ */ i(k, {}),
+  ) : /* @__PURE__ */ i(a, { mt: d, children: o });
+  return /* @__PURE__ */ l(u, { w: "100%", h: "100%", direction: t ? "row" : "column", children: [
+    t ? /* @__PURE__ */ i(H, {}) : /* @__PURE__ */ i(k, {}),
     b
   ] });
 }

package/dist/components/stepper/stepper.js

@@ -3,7 +3,7 @@ import { Stack as u } from "@chakra-ui/react";
 import { Step as v } from "./step.js";
 import { StepContext as C } from "./step-context.js";
 import { ThemeColorVariable as e, ThemeSpaceVariable as S } from "../../theme/theme-types.js";
-function B({ activeStep: t, orientation: i = "vertical", steps: c = [], ...a }) {
+function k({ activeStep: t, orientation: i = "vertical", steps: c = [], ...a }) {
   const m = i === "vertical", d = c.map((o, n) => {
     const l = n + 1, p = {
       orientation: i,
@@ -17,8 +17,8 @@ function B({ activeStep: t, orientation: i = "vertical", steps: c = [], ...a })
     };
     return /* @__PURE__ */ r(C.Provider, { value: p, children: /* @__PURE__ */ r(v, {}) }, l);
   });
-  return /* @__PURE__ */ r(u, { spacing: S.Small, direction: m ? "column" : "row", ...a, children: d });
+  return /* @__PURE__ */ r(u, { gap: S.Small, direction: m ? "column" : "row", ...a, children: d });
 }
 export {
-  B as Stepper
+  k as Stepper
 };

package/dist/components/stepper/times-icon.d.ts

@@ -1,3 +1,2 @@
-import { ComponentWithAs, IconProps } from '@chakra-ui/react';
-export declare const TimesIcon: ComponentWithAs<"svg", IconProps>;
+export declare const TimesIcon: import('../icon/index.js').CasperIconComponent;
 //# sourceMappingURL=times-icon.d.ts.map

package/dist/components/stepper/times-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"times-icon.d.ts","sourceRoot":"","sources":["../../../lib/components/stepper/times-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAc,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEpF,eAAO,MAAM,SAAS,EAAE,eAAe,CAAC,KAAK,EAAE,SAAS,CAItD,CAAC"}
+{"version":3,"file":"times-icon.d.ts","sourceRoot":"","sources":["../../../lib/components/stepper/times-icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,iDAKrB,CAAC"}

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

@@ -1,9 +1,10 @@
-import { createIcon as c } from "@chakra-ui/react";
-const s = c({
-  displayName: "TimesIcon",
-  viewBox: "0 0 320 512",
-  d: "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"
-});
+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 {
-  s as TimesIcon
+  o as TimesIcon
 };

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

@@ -1,40 +1,40 @@
 import { ThemeColorVariable as e } from "../../theme/theme-types.js";
-const c = "label:not([data-checked]):not([data-disabled]):hover", a = "label[data-checked]:not([data-disabled]):hover", r = "label[data-disabled]:not([data-checked]):hover", t = "label[data-disabled][data-checked]:hover", d = {
+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:
-    [c]: {
-      ".chakra-switch__track": {
+    [t]: {
+      "& .switch__control": {
         borderColor: e.OnSurface
       },
-      ".chakra-switch__thumb": {
+      "& .switch__thumb": {
         bg: e.OnSurface
       }
     },
-    [a]: {
-      ".chakra-switch__track": {
+    [c]: {
+      "& .switch__control": {
         bg: e.AccentHover,
         borderColor: e.AccentHover
       },
-      ".chakra-switch__thumb": {
+      "& .switch__thumb": {
         bg: e.OnAccent
       }
     },
-    [r]: {
-      ".chakra-switch__track": {
+    [o]: {
+      "& .switch__control": {
         bg: e.Surface,
         borderColor: e.OnSurfaceSubdued
       },
-      ".chakra-switch__thumb": {
+      "& .switch__thumb": {
         bg: e.OnSurfaceSubdued
       }
     },
-    [t]: {
-      ".chakra-switch__track": {
+    [r]: {
+      "& .switch__control": {
         bg: e.Accent,
         borderColor: e.Accent
       },
-      ".chakra-switch__thumb": {
+      "& .switch__thumb": {
         bg: e.OnAccent
       }
     }

package/dist/components/switch/switch-recipe.d.ts

@@ -0,0 +1,3 @@
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+export declare const switchRecipe: SlotRecipeDefinition;
+//# sourceMappingURL=switch-recipe.d.ts.map

package/dist/components/switch/switch-recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/switch/switch-recipe.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,oBAAoB,EAA4C,MAAM,kBAAkB,CAAC;AA6BvG,eAAO,MAAM,YAAY,EAAE,oBA0DzB,CAAC"}

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

@@ -0,0 +1,86 @@
+import { ThemeColorToken as e } from "../../theme/theme-tokens.js";
+import { defineSlotRecipe as c } from "@chakra-ui/react";
+import { switchAnatomy as h } from "../../node_modules/@chakra-ui/react/dist/esm/anatomy.js";
+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"
+        }
+      }
+    }
+  }
+});
+export {
+  a as switchRecipe
+};

package/dist/components/switch/switch.d.ts

@@ -1,10 +1,8 @@
+import { Switch as ChakraSwitch } from '@chakra-ui/react';
 import { default as React } from 'react';
-export declare const Switch: React.ForwardRefExoticComponent<{
-    value?: string | number | undefined;
-    onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
-    isDisabled?: boolean | undefined;
-    isChecked?: boolean | undefined;
-} & import('../../index.js').CustomChakraBoxProps & import('../../index.js').LayoutProps & import('../../index.js').MarginProps & import('../../index.js').PaddingProps & import('@chakra-ui/styled-system').ColorProps & {
+export declare const Switch: React.ForwardRefExoticComponent<Pick<ChakraSwitch.RootProps, "value"> & Pick<ChakraSwitch.ControlProps, "onChange"> & import('../../index.js').CustomChakraBoxProps & import('../../index.js').LayoutProps & import('../../index.js').MarginProps & import('../../index.js').PaddingProps & import('../../index.js').ColorProps & {
     size?: import('./types.js').SwitchSize;
+    isDisabled?: boolean;
+    isChecked?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=switch.d.ts.map

package/dist/components/switch/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../lib/components/switch/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,MAAM;;;;;;;0CAwBlB,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../lib/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAQ,MAAM,kBAAkB,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,MAAM;;;;0CA8BjB,CAAC"}

package/dist/components/switch/switch.js

@@ -1,26 +1,35 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Flex as i, Switch as s } from "@chakra-ui/react";
-import l from "react";
-import { hoverStyles as a } from "./hover-styles.js";
-const n = l.forwardRef(
-  ({
-    size: t = "md",
-    display: e = "flex",
-    alignItems: o = "center",
-    justifyContent: f = "flex-start",
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { Flex as f, Switch as t } from "@chakra-ui/react";
+import p from "react";
+import { hoverStyles as x } from "./hover-styles.js";
+const b = p.forwardRef((r, i) => {
+  const {
+    size: o = "md",
+    isDisabled: s,
+    isChecked: n,
+    display: c = "flex",
+    alignItems: d = "center",
+    justifyContent: l = "flex-start",
+    onChange: h,
     ...m
-  }, c) => /* @__PURE__ */ r(i, { __css: a, children: /* @__PURE__ */ r(
-    s,
+  } = r;
+  return /* @__PURE__ */ e(f, { css: x, children: /* @__PURE__ */ a(
+    t.Root,
     {
-      size: t,
-      display: e,
-      alignItems: o,
-      justifyContent: f,
-      ref: c,
-      ...m
+      size: o,
+      display: c,
+      alignItems: d,
+      justifyContent: l,
+      disabled: s,
+      checked: n,
+      ...m,
+      children: [
+        /* @__PURE__ */ e(t.HiddenInput, { ref: i, onChange: h }),
+        /* @__PURE__ */ e(t.Control, { children: /* @__PURE__ */ e(t.Thumb, {}) })
+      ]
     }
-  ) })
-);
+  ) });
+});
 export {
-  n as Switch
+  b as Switch
 };