jcicl 1.1.5 → 1.2.1

package/Button/Button.d.ts

@@ -11,6 +11,7 @@ export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size' | '
     textColor?: string;
     customShadow1?: string;
     customShadow2?: string;
+    borderColor?: string;
     textToCopy?: string;
 }
 export declare const Button: React.FC<ButtonProps & {

package/Button/Button.js

@@ -1,28 +1,29 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { useState as $ } from "react";
-import { B as k } from "../.chunks/Button.js";
-import { i as _ } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as g } from "../.chunks/emotion-react.browser.esm.js";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { useState as k } from "react";
+import { B as _ } from "../.chunks/Button.js";
+import { i as N } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as w } from "../.chunks/emotion-react.browser.esm.js";
 import { cn as b } from "../cn.js";
-import a from "../theme.js";
-import { Tooltip as N } from "../Tooltip/Tooltip.js";
-import { useThemeColors as j } from "../ThemeContext.js";
-import { logger as S } from "../logger.js";
+import t from "../theme.js";
+import { Tooltip as j } from "../Tooltip/Tooltip.js";
+import { useThemeColors as S } from "../ThemeContext.js";
+import { logger as T } from "../logger.js";
 import { s as x } from "../.chunks/DefaultPropsProvider.js";
 import { B as p } from "../.chunks/ButtonBase.js";
-import { C as T } from "../.chunks/check.js";
-const C = [
+import { C } from "../.chunks/check.js";
+const F = [
   "active",
   "customBackgroundColor",
   "customHoverColor",
   "customTextColor",
   "customShadow1",
-  "customShadow2"
-], l = x(k, { shouldForwardProp: (t) => !C.includes(t) })`
+  "customShadow2",
+  "borderColor"
+], c = x(_, { shouldForwardProp: (o) => !F.includes(o) })`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
-    color: ${a.colors.black};
+    color: ${t.colors.black};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -33,11 +34,11 @@ const C = [
     align-items: center !important;
     gap: 0.5rem;
   }
-`, F = "!bg-[#009200] !h-10 !border-2 !border-transparent !text-white transition-all duration-[313ms] ease-in !rounded-[32px] !font-normal !py-3 !px-8 !text-base shadow-[0px_0px_2px_1px_rgba(100,100,100,0.63)] hover:!bg-[#005c00] hover:shadow-[0px_0px_2px_1px_rgba(0,0,0,0.63)] focus-visible:!bg-[#005c00] focus-visible:shadow-[0px_0px_2px_1px_rgba(0,0,0,0.63)] disabled:!bg-[#005c00]", h = "!bg-[#fab62d] !h-10 !border-2 !border-transparent !text-[#131313] transition-all duration-[313ms] ease-in !rounded-[32px] !font-normal !py-3 !px-8 !text-base shadow-[0px_0px_2px_1px_rgba(100,100,100,0.63)] hover:!bg-[#e0a022] focus-visible:!bg-[#e0a022] disabled:!bg-[#e0a022]", I = "!h-10 !border-2 !border-transparent transition-all duration-[313ms] ease-in !rounded-[32px] !font-normal !py-3 !px-8 !text-base !bg-[var(--btn-bg)] hover:!bg-[var(--btn-hover)] focus-visible:!bg-[var(--btn-hover)] disabled:!bg-[var(--btn-hover)] !text-[var(--btn-text)] !shadow-[var(--btn-shadow)] hover:!shadow-[var(--btn-shadow-hover)] focus-visible:!shadow-[var(--btn-shadow-hover)]", z = x(p, {
-  shouldForwardProp: (t) => typeof t == "string" && _(t)
+`, I = `!bg-[${t.colors.green}] !h-10 !border-2 !border-transparent !text-white transition-all duration-[313ms] ease-in !rounded-[32px] !font-normal !py-3 !px-8 !text-base shadow-[0px_0px_2px_1px_rgba(100,100,100,0.63)] hover:!bg-[${t.colors.darkGreen}] hover:shadow-[0px_0px_2px_1px_rgba(0,0,0,0.63)] focus-visible:!bg-[${t.colors.darkGreen}] focus-visible:shadow-[0px_0px_2px_1px_rgba(0,0,0,0.63)] disabled:!bg-[${t.colors.darkGreen}]`, g = `!bg-[${t.colors.gold}] !h-10 !border-2 !border-transparent !text-[${t.colors.midnight}] transition-all duration-[313ms] ease-in !rounded-[32px] !font-normal !py-3 !px-8 !text-base shadow-[0px_0px_2px_1px_rgba(100,100,100,0.63)] hover:!bg-[${t.colors.goldHover}] focus-visible:!bg-[${t.colors.goldHover}] disabled:!bg-[${t.colors.goldHover}]`, G = "!h-10 !border-2 !border-[var(--btn-border)] transition-all duration-[313ms] ease-in !rounded-[32px] !font-normal !py-3 !px-8 !text-base !bg-[var(--btn-bg)] hover:!bg-[var(--btn-hover)] focus-visible:!bg-[var(--btn-hover)] disabled:!bg-[var(--btn-hover)] !text-[var(--btn-text)] !shadow-[var(--btn-shadow)] hover:!shadow-[var(--btn-shadow-hover)] focus-visible:!shadow-[var(--btn-shadow-hover)]", H = x(p, {
+  shouldForwardProp: (o) => typeof o == "string" && N(o)
 })(
-  ({ size: t, color: o, highlightColor: s, hoverColor: i }) => ({
-    ...g`
+  ({ size: o, color: r, highlightColor: s, hoverColor: i }) => ({
+    ...w`
       display: flex;
       align-items: center;
       justify-content: center;
@@ -49,28 +50,28 @@ const C = [
         svg {
           filter: drop-shadow(0 0 6px ${s}) drop-shadow(0 0 6px ${s})
             drop-shadow(0 0 6px ${s}) drop-shadow(0 0 6px ${s});
-          fill: ${i || o};
+          fill: ${i || r};
         }
       }
 
       svg {
         transition: 313ms all ease-in-out;
-        fill: ${o};
-        width: ${t}px;
-        height: ${t}px;
+        fill: ${r};
+        width: ${o}px;
+        height: ${o}px;
       }
     `
   })
-), A = x(p)(
-  ({ backgroundColor: t, borderColor: o }) => ({
-    ...g`
+), z = x(p)(
+  ({ backgroundColor: o, borderColor: r }) => ({
+    ...w`
       height: 28px;
       border-radius: 20px;
       border-width: 2px;
       border-style: solid;
-      border-color: ${o}aa ${o} ${o} ${o}aa;
-      background: ${t};
-      color: ${o};
+      border-color: ${r}aa ${r} ${r} ${r}aa;
+      background: ${o};
+      color: ${r};
       padding: 10px;
       font-size: 0.9rem !important;
       font-weight: 500;
@@ -86,7 +87,7 @@ const C = [
         height: 15px;
         margin-left: 5px;
         margin-right: -8px;
-        stroke: ${o};
+        stroke: ${r};
         transition: all 313ms ease;
       }
 
@@ -97,79 +98,81 @@ const C = [
       }
     `
   })
-), X = ({
-  variant: t = 1,
-  size: o = 50,
+), Y = ({
+  variant: o = 1,
+  size: r = 50,
   color: s,
   highlightColor: i,
-  hoverColor: d,
+  hoverColor: l,
   backgroundColor: m,
-  textColor: c,
-  customShadow1: w,
+  textColor: d,
+  customShadow1: v,
   customShadow2: y,
-  children: r,
-  textToCopy: v,
+  borderColor: u,
+  children: n,
+  textToCopy: $,
   active: B,
-  ...n
+  ...a
 }) => {
-  const u = j();
-  return t === "custom" ? /* @__PURE__ */ e(
+  const f = S();
+  return o === "custom" ? /* @__PURE__ */ e(
     "div",
     {
       style: {
-        "--btn-bg": m || a.colors.green,
-        "--btn-hover": d || a.colors.darkGreen,
-        "--btn-text": c || a.colors.white,
-        "--btn-shadow": w || a.boxShadows.gray63,
-        "--btn-shadow-hover": y || a.boxShadows.black63,
+        "--btn-bg": m || t.colors.green,
+        "--btn-hover": l || t.colors.darkGreen,
+        "--btn-text": d || t.colors.white,
+        "--btn-shadow": v || t.boxShadows.gray63,
+        "--btn-shadow-hover": y || t.boxShadows.black63,
+        "--btn-border": u || "transparent",
         display: "contents"
       },
-      children: /* @__PURE__ */ e(l, { className: b("jcCustomButton", I), ...n, children: r })
+      children: /* @__PURE__ */ e(c, { className: b("jcCustomButton", G), ...a, children: n })
     }
-  ) : t === "unstyled" ? /* @__PURE__ */ e(p, { className: "block", ...n, children: r }) : t === "copy" ? /* @__PURE__ */ e(G, { textToCopy: v, muiProps: n, children: r }) : t === 2 ? /* @__PURE__ */ e(l, { className: h, ...n, children: /* @__PURE__ */ e("span", { children: r }) }) : t === "icon" ? (s = s || a.colors.green, i = i || a.colors.dandelion, d = d || a.colors.green, /* @__PURE__ */ e(z, { className: "jcIconButton", ...{ size: o, color: s, highlightColor: i, hoverColor: d }, ...n, children: r })) : t === "filter" ? /* @__PURE__ */ e(
-    l,
+  ) : o === "unstyled" ? /* @__PURE__ */ e(p, { className: "block", ...a, children: n }) : o === "copy" ? /* @__PURE__ */ e(A, { textToCopy: $, muiProps: a, children: n }) : o === 2 ? /* @__PURE__ */ e(c, { className: g, ...a, children: /* @__PURE__ */ e("span", { children: n }) }) : o === "icon" ? (s = s || t.colors.green, i = i || t.colors.dandelion, l = l || t.colors.green, /* @__PURE__ */ e(H, { className: "jcIconButton", ...{ size: r, color: s, highlightColor: i, hoverColor: l }, ...a, children: n })) : o === "filter" ? /* @__PURE__ */ e(
+    c,
     {
       className: b(
         "jcFilterButton",
         "!box-border !h-[28px] !rounded-[18px] !flex !items-center !justify-center !border-2 transition-all duration-[108ms] ease-in !font-medium",
-        B ? "!bg-black !border-transparent !text-white hover:!bg-[#404040]" : "!bg-white !border-black !text-black hover:!bg-[#dddddd]"
+        B ? `!bg-black !border-transparent !text-white hover:!bg-[${t.colors.charcoal}]` : `!bg-white !border-black !text-black hover:!bg-[${t.colors.gray2}]`
       ),
-      ...n,
-      children: r
+      ...a,
+      children: n
     }
-  ) : t === "form" ? /* @__PURE__ */ e(l, { className: b("jcFormButton", h, "!w-[447px] !self-center"), ...n, children: /* @__PURE__ */ e("span", { children: r }) }) : t === "pill" ? /* @__PURE__ */ e(
-    A,
+  ) : o === "form" ? /* @__PURE__ */ e(c, { className: b("jcFormButton", g, "!w-[447px] !self-center"), ...a, children: /* @__PURE__ */ e("span", { children: n }) }) : o === "pill" ? /* @__PURE__ */ e(
+    z,
     {
-      backgroundColor: m || u.themeIconBackgroundB,
-      borderColor: c || u.themeIconBackgroundA,
-      ...n,
-      children: /* @__PURE__ */ e("span", { children: r })
+      backgroundColor: m || f.themeIconBackgroundB,
+      borderColor: d || f.themeIconBackgroundA,
+      ...a,
+      children: /* @__PURE__ */ e("span", { children: n })
     }
-  ) : /* @__PURE__ */ e(l, { className: F, ...n, children: /* @__PURE__ */ e("span", { children: r }) });
-}, G = ({ textToCopy: t, muiProps: o, children: s }) => {
-  const [i, d] = $(!1);
-  return /* @__PURE__ */ f("div", { className: "flex", onClick: async () => {
+  ) : /* @__PURE__ */ e(c, { className: I, ...a, children: /* @__PURE__ */ e("span", { children: n }) });
+}, A = ({ textToCopy: o, muiProps: r, children: s }) => {
+  const [i, l] = k(!1);
+  return /* @__PURE__ */ h("div", { className: "flex", onClick: async () => {
     try {
-      await navigator.clipboard.writeText(t || String(s)), d(!0), setTimeout(() => d(!1), 1100);
-    } catch (c) {
-      S.error("Failed to copy text: ", c);
+      await navigator.clipboard.writeText(o || String(s)), l(!0), setTimeout(() => l(!1), 1100);
+    } catch (d) {
+      T.error("Failed to copy text: ", d);
     }
   }, children: [
-    /* @__PURE__ */ e(N, { title: "Copy to clipboard", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(j, { title: "Copy to clipboard", children: /* @__PURE__ */ e(
       p,
       {
         className: "block [font-family:inherit] [font-size:inherit] [font-weight:inherit]",
-        ...o,
+        ...r,
         children: s
       }
     ) }),
-    i && /* @__PURE__ */ f("span", { className: "inline ml-2 text-sm text-[#727272] content-center", children: [
-      /* @__PURE__ */ e(T, { size: 12, className: "inline align-middle !h-[14px] !w-[14px] m-0" }),
+    i && /* @__PURE__ */ h("span", { className: `inline ml-2 text-sm text-[${t.colors.gray}] content-center`, children: [
+      /* @__PURE__ */ e(C, { size: 12, className: "inline align-middle !h-[14px] !w-[14px] m-0" }),
       " Copied"
     ] })
   ] });
 };
 export {
-  X as Button,
-  X as default
+  Y as Button,
+  Y as default
 };

package/DesktopStepper/DesktopStepper.d.ts

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react';
+export type StepProps = {
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare const Step: React.FC<PropsWithChildren<StepProps>>;
+/** Imperative handle for driving the stepper from a parent (e.g. jumping to a step with errors). */
+export type DesktopStepperHandle = {
+    /** Animate to the given step index (clamped to the valid range). */
+    goToStep: (index: number) => void;
+};
+export type DesktopStepperProps = {
+    onNext?: (step?: number) => boolean;
+    onFinish: () => Promise<void>;
+    onBack?: () => void;
+    /** If true, the stepper will maintain the height of the tallest step. */
+    staticHeight?: boolean;
+    /** Optional imperative handle exposing `goToStep` for programmatic navigation. */
+    ref?: React.Ref<DesktopStepperHandle>;
+    children: React.ReactElement<StepProps>[];
+};
+declare const DesktopStepper: ({ onNext, onBack, onFinish, staticHeight, ref, children, }: PropsWithChildren<DesktopStepperProps>) => import("react/jsx-runtime").JSX.Element;
+export default DesktopStepper;

package/DesktopStepper/DesktopStepper.js

@@ -0,0 +1,204 @@
+import { jsx as t, jsxs as p, Fragment as G } from "react/jsx-runtime";
+import { useState as y, useRef as N, Children as le, isValidElement as se, useLayoutEffect as oe, useEffect as ie, useCallback as J, useImperativeHandle as ne, Fragment as ce } from "react";
+import { flushSync as C } from "react-dom";
+import { cn as s } from "../cn.js";
+import { Button as K } from "../Button/Button.js";
+import { Flex as T } from "../Flex/Flex.js";
+import { SlideOut as ae, SlideIn as ue, SlideInReverse as P, SlideOutReverse as de } from "../animation/Slide/Slide.js";
+import { useThemeColors as O } from "../ThemeContext.js";
+import x from "../theme.js";
+import { useIsMobile as U } from "../utils.js";
+import { C as me } from "../.chunks/check.js";
+const Me = ({ title: i, children: n, className: o }) => /* @__PURE__ */ t("div", { title: i, className: s("p-2.5 w-full", o), children: n }), pe = ({ label: i, number: n, completed: o, active: c }) => {
+  const h = O(), R = U(), e = {
+    "--item-circle-transition-delay": c ? "0.3s" : "0s",
+    "--item-circle-border": h.themeColor,
+    "--item-circle-bg": c || o ? h.themeColor : "transparent",
+    "--item-circle-color": c || o ? x.colors.white : h.themeColor,
+    "--label-color": h.themeColor,
+    "--label-opacity": c ? 1 : 0.7
+  };
+  return /* @__PURE__ */ t("div", { style: e, className: s("stepperTitleItem font-medium justify-center items-center"), children: /* @__PURE__ */ p(T, { column: !0, alignItems: "center", gap: "4px", children: [
+    /* @__PURE__ */ t("div", { className: s("itemCircle", "justify-center flex box-border items-center select-none transition-all duration-300 delay-(--item-circle-transition-delay) ease-in-out w-[35px] h-[35px] mx-[8px] rounded-full border-[2px] border-(--item-circle-border) bg-(--item-circle-bg) text-(--item-circle-color)"), children: o ? /* @__PURE__ */ t(me, { size: 18, strokeWidth: 3 }) : n }),
+    /* @__PURE__ */ t("div", { className: s("label", "text-(--label-color) text-center opacity-(--label-opacity) transition-[all_0.5s_ease]", R && "px-[5px]"), children: i })
+  ] }) });
+}, he = ({ activated: i }) => {
+  const n = O(), o = {
+    "--title-slider-active-color": n.themeColor,
+    "--title-slider-active-percent": i ? "50%" : "49%",
+    "--title-slider-inactive-color": n.themeLightA,
+    "--title-slider-position": i ? "left bottom" : "right bottom"
+  };
+  return /* @__PURE__ */ t("div", { className: s("flex-1 h-[3px] rounded-[2px] self-start mt-[16px] bg-[linear-gradient(to_right,var(--title-slider-active-color)_var(--title-slider-active-percent),var(--title-slider-inactive-color)_50%)] bg-size-[200%_100%] bg-[position:var(--title-slider-position)] transition-background-position duration-500 ease-in-out"), style: o });
+}, fe = "relative w-full h-full flex items-center justify-between flex-col gap-[15px] m-0 bg-transparent overflow-hidden", Q = "absolute top-0 w-full h-full", be = "relative w-full [&_.jcSlideContainer]:justify-items-center", Ce = "will-change-[height] transition-[height] duration-500 ease-[cubic-bezier(0.2,0,0,1)]", Ee = ({
+  onNext: i = () => !0,
+  onBack: n,
+  onFinish: o,
+  staticHeight: c = !1,
+  ref: h,
+  children: R
+}) => {
+  const [e, w] = y(0), [v, f] = y("forward"), [z, I] = y(null), [B, k] = y(!1), [_, A] = y(!1), D = N(null), L = N([]), M = N(null), g = N(0), d = O(), H = U(), a = le.toArray(R).filter(
+    (l) => se(l)
+  ), E = a.map((l) => l.props.title || ""), X = E.some((l) => l !== ""), u = a.length, Y = {
+    "--progress-bar-bg": d.themeLightA,
+    "--progress-bar-border": d.themeColor,
+    "--progress-bar-color": d.themeColor
+  };
+  oe(() => {
+    if (c) {
+      const $ = L.current, V = () => {
+        let m = 0;
+        $.forEach((S) => {
+          if (S) {
+            const F = S.getBoundingClientRect().height;
+            F > m && (m = F);
+          }
+        }), I(m ? Math.ceil(m) : null);
+      };
+      if (V(), typeof ResizeObserver > "u") return;
+      const q = [];
+      return $.forEach((m) => {
+        if (m) {
+          const S = new ResizeObserver(V);
+          S.observe(m), q.push(S);
+        }
+      }), () => q.forEach((m) => m.disconnect());
+    }
+    const l = D.current;
+    if (!l) return;
+    const r = () => {
+      I(Math.ceil(l.getBoundingClientRect().height));
+    };
+    if (r(), typeof ResizeObserver > "u") return;
+    const b = new ResizeObserver(r);
+    return b.observe(l), () => b.disconnect();
+  }, [e, u, c]), ie(() => () => clearTimeout(M.current ?? void 0), []);
+  const j = J(() => {
+    A(!0), clearTimeout(M.current ?? void 0), M.current = setTimeout(() => {
+      A(!1);
+    }, 550);
+  }, []), Z = async () => {
+    if (e === u - 1) {
+      k(!0);
+      try {
+        await (o == null ? void 0 : o());
+      } finally {
+        k(!1);
+      }
+    } else {
+      if (!(i == null ? void 0 : i(e))) {
+        k(!1);
+        return;
+      }
+      j(), g.current = e, C(() => f("none")), C(() => f("forward")), w((r) => r + 1);
+    }
+  }, ee = () => {
+    j(), g.current = e, C(() => f("none")), C(() => f("reverse")), w((l) => l - 1), n == null || n();
+  }, W = J(
+    (l) => {
+      const r = Math.max(0, Math.min(l, u - 1));
+      if (r === e) return;
+      j(), g.current = e;
+      const b = r > e ? "forward" : "reverse";
+      C(() => f("none")), C(() => f(b)), w(r);
+    },
+    [e, u, j]
+  );
+  ne(h, () => ({ goToStep: W }), [W]);
+  const te = () => /* @__PURE__ */ t(
+    K,
+    {
+      variant: "custom",
+      onClick: Z,
+      backgroundColor: e === u - 1 ? x.colors.gold : d.themeColor,
+      hoverColor: e === u - 1 ? x.colors.goldHover : d.themeDark,
+      textColor: e === u - 1 ? x.colors.black : x.colors.white,
+      disabled: B,
+      children: e === u - 1 ? B ? "Submitting..." : "Submit" : "Next"
+    }
+  ), re = () => /* @__PURE__ */ t(
+    K,
+    {
+      variant: "custom",
+      onClick: ee,
+      backgroundColor: d.themeLight,
+      borderColor: d.themeColor,
+      hoverColor: d.themeMediumB,
+      textColor: d.themeColor,
+      children: "Back"
+    }
+  );
+  return /* @__PURE__ */ p(T, { column: !0, justifyContent: "center", gap: "10px", className: s("jcStep"), children: [
+    /* @__PURE__ */ t(T, { justifyContent: "space-between", width: "90%", className: s("jcDesktopStepHeader", "self-center"), children: E.map((l, r) => /* @__PURE__ */ p(ce, { children: [
+      /* @__PURE__ */ t(
+        pe,
+        {
+          label: l,
+          number: r + 1,
+          completed: r < e,
+          active: r === e
+        },
+        r
+      ),
+      r < E.length - 1 && (H !== X || !H) && /* @__PURE__ */ t(he, { activated: r < e })
+    ] }, r)) }),
+    /* @__PURE__ */ p("div", { className: s("jcStep", fe), style: Y, children: [
+      /* @__PURE__ */ p(
+        "div",
+        {
+          className: s(be, _ && Ce),
+          style: {
+            height: c || z != null && _ ? `${z}px` : "auto"
+          },
+          children: [
+            c ? /* @__PURE__ */ t(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "jcStepperMeasure pointer-events-none absolute left-0 top-0 invisible w-full",
+                children: a.map((l, r) => /* @__PURE__ */ t(
+                  "div",
+                  {
+                    ref: (b) => {
+                      L.current[r] = b;
+                    },
+                    className: "w-full",
+                    children: l
+                  },
+                  r
+                ))
+              }
+            ) : /* @__PURE__ */ t(
+              "div",
+              {
+                ref: D,
+                "aria-hidden": "true",
+                className: "jcStepperMeasure pointer-events-none absolute left-0 top-0 invisible w-full",
+                children: a[e] ?? null
+              }
+            ),
+            e === 0 && v === "forward" && /* @__PURE__ */ t("div", { className: s("jcSlideContainer"), children: a[e] ?? null }),
+            e !== 0 && v === "forward" && /* @__PURE__ */ p(G, { children: [
+              /* @__PURE__ */ t("div", { className: s("jcSlideOutContainer", Q), children: /* @__PURE__ */ t(ae, { className: "jcSlideContainer", children: a[g.current] ?? null }) }),
+              /* @__PURE__ */ t(ue, { className: "jcSlideContainer", children: a[e] ?? null })
+            ] }),
+            e === u - 1 && v === "reverse" && /* @__PURE__ */ t(P, { className: "jcSlideContainer", children: a[e] ?? null }),
+            e !== u - 1 && v === "reverse" && /* @__PURE__ */ p(G, { children: [
+              /* @__PURE__ */ t("div", { className: s("jcSlideOutContainer", Q), children: /* @__PURE__ */ t(de, { className: "jcSlideContainer", children: a[g.current] ?? null }) }),
+              /* @__PURE__ */ t(P, { className: "jcSlideContainer", children: a[e] ?? null })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ p(T, { gap: "10px", className: "self-end mb-[5px] mr-[5px]", children: [
+        e !== 0 && re(),
+        te()
+      ] })
+    ] })
+  ] });
+};
+export {
+  Me as Step,
+  Ee as default
+};

package/DesktopStepper/index.d.ts

@@ -0,0 +1 @@
+export { default, Step, type DesktopStepperProps, type DesktopStepperHandle, type StepProps, } from './DesktopStepper';

package/DesktopStepper/index.js

@@ -0,0 +1,5 @@
+import { Step as f, default as o } from "./DesktopStepper.js";
+export {
+  f as Step,
+  o as default
+};

package/FieldGroup/FieldGroup.js

@@ -1,20 +1,23 @@
-import { jsx as e } from "react/jsx-runtime";
-import { use as n } from "react";
-import f from "../FormFields/FormFields.js";
-function p({
-  context: o,
-  ...r
+import { jsx as u } from "react/jsx-runtime";
+import { use as f } from "react";
+import s from "../FormFields/FormFields.js";
+function c({
+  context: t,
+  ...e
 }) {
-  const { onFormInputChange: t, formData: m } = n(o);
-  return /* @__PURE__ */ e(
-    f,
+  const { onFormInputChange: n, formData: m, fieldErrors: o } = f(t), a = o ? e.fields.map(
+    (r) => o[r.key] ? { ...r, error: !0, helperText: o[r.key] } : r
+  ) : e.fields;
+  return /* @__PURE__ */ u(
+    s,
     {
-      ...r,
-      onChange: t,
+      ...e,
+      fields: a,
+      onChange: n,
       formDefaults: m
     }
   );
 }
 export {
-  p as default
+  c as default
 };

package/FieldVisibilityWrapper/FieldVisibilityWrapper.d.ts

@@ -0,0 +1,11 @@
+export type FieldVisibilityWrapperProps = {
+    visible: boolean;
+    children: React.ReactNode;
+    /**  Optional duration for the transition in milliseconds */
+    duration?: number;
+    /**  Optional gap between child elements */
+    gap?: string;
+    className?: string;
+};
+declare const FieldVisibilityWrapper: ({ visible, duration, gap, children, className }: FieldVisibilityWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export default FieldVisibilityWrapper;

package/FieldVisibilityWrapper/FieldVisibilityWrapper.js

@@ -0,0 +1,48 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useRef as E, useState as r, useLayoutEffect as H } from "react";
+import { cn as N } from "../cn.js";
+const $ = ({ visible: t, duration: u, gap: p, children: g, className: h }) => {
+  const s = E(null), [i, x] = r(), [n, w] = r(null), [y, o] = r(!1), [b, v] = r(t);
+  b !== t && (v(t), o(!0)), H(() => {
+    var f;
+    const e = s.current;
+    if (!e) return;
+    const d = (f = e.parentElement) == null ? void 0 : f.parentElement;
+    if (d) {
+      const a = getComputedStyle(d);
+      w(a.gap);
+    }
+    const l = () => {
+      const a = Math.ceil(e.getBoundingClientRect().height);
+      x(a);
+    };
+    if (l(), typeof ResizeObserver > "u") return;
+    const c = new ResizeObserver(l);
+    return c.observe(e), () => c.disconnect();
+  }, [p, n]);
+  const R = u ?? (i ? i ** (1 / 4) * 125 : 300), z = {
+    "--field-wrapper-max-height": t ? `${i}px` : "0px",
+    "--field-wrapper-margin-top": t ? "0px" : `-${n ?? "0px"}`,
+    "--field-wrapper-duration": `${R}ms`,
+    "--field-wrapper-gap": p ?? n ?? "0px"
+  };
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: N(
+        "jcFieldVisibilityWrapper",
+        "overflow-hidden max-h-(--field-wrapper-max-height) mt-(--field-wrapper-margin-top) ",
+        y && "transition-[max-height,margin-top] duration-(--field-wrapper-duration) ease-[cubic-bezier(0.2,0,0,1)]",
+        h
+      ),
+      style: z,
+      onTransitionEnd: (e) => {
+        e.target === e.currentTarget && e.propertyName === "max-height" && o(!1);
+      },
+      children: /* @__PURE__ */ m("div", { ref: s, className: "grid pb-0.5 gap-(--field-wrapper-gap)", children: g })
+    }
+  );
+};
+export {
+  $ as default
+};

package/FieldVisibilityWrapper/index.d.ts

@@ -0,0 +1 @@
+export { default, type FieldVisibilityWrapperProps } from './FieldVisibilityWrapper';

package/FieldVisibilityWrapper/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./FieldVisibilityWrapper.js";
+export {
+  o as default
+};