jcicl 0.0.233 → 0.0.237

package/LabeledCurrencyInput/LabeledCurrencyInput.d.ts

@@ -6,6 +6,7 @@ export interface LabeledCurrencyInputProps extends InputProps {
     label: string;
     grid?: boolean;
     noLabel?: boolean;
+    defaultValue?: string;
 }
 export declare const LabeledCurrencyInput: React.FC<LabeledCurrencyInputProps>;
 export default LabeledCurrencyInput;

package/LabeledCurrencyInput/LabeledCurrencyInput.js

@@ -1,10 +1,10 @@
-import { jsxs as s, jsx as m } from "react/jsx-runtime";
-import { useState as f } from "react";
-import { n as d } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as g } from "../.chunks/emotion-react.browser.esm.js";
-import { Input as h } from "../Input/Input.js";
-const w = d("div")(({ grid: t }) => ({
-  ...g`
+import { jsxs as p, jsx as g } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { n as w } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as x } from "../.chunks/emotion-react.browser.esm.js";
+import { Input as y } from "../Input/Input.js";
+const I = w("div")(({ grid: r }) => ({
+  ...x`
     display: flex;
     flex-wrap: nowrap;
     gap: 9px;
@@ -20,29 +20,35 @@ const w = d("div")(({ grid: t }) => ({
     }
 
     .MuiCurrencyInputBase-root {
-      width: ${t && "100%"};
+      width: ${r && "100%"};
     }
   `
 })), j = ({
-  label: t,
+  label: r,
   grid: l = !0,
-  noLabel: p = !1,
-  onChange: n,
-  ...u
+  noLabel: m = !1,
+  onChange: a,
+  defaultValue: n,
+  ...c
 }) => {
-  const [i, r] = f("");
-  return /* @__PURE__ */ s(w, { grid: l, className: "jcLabeledCurrencyInput", children: [
-    !p && /* @__PURE__ */ s("span", { children: [
-      t,
+  let t = (n == null ? void 0 : n.replace(/[^0-9.-]+/g, "")) ?? "";
+  t && (t = new Intl.NumberFormat("en-US", {
+    style: "decimal",
+    maximumFractionDigits: 2
+  }).format(Number(t)));
+  const [u, o] = d(t);
+  return /* @__PURE__ */ p(I, { grid: l, className: "jcLabeledCurrencyInput", children: [
+    !m && /* @__PURE__ */ p("span", { children: [
+      r,
       ":"
     ] }),
-    /* @__PURE__ */ m(h, { ...u, onChange: (a) => {
-      const { value: c } = a.target, e = c.replace(/[^0-9.-]+/g, ""), o = new Intl.NumberFormat("en-US", {
+    /* @__PURE__ */ g(y, { ...c, onChange: (i) => {
+      const { value: f } = i.target, e = f.replace(/[^0-9.-]+/g, ""), s = new Intl.NumberFormat("en-US", {
         style: "decimal",
         maximumFractionDigits: 2
       }).format(Number(e) || 0);
-      e && e.length > 1 && e[e.length - 1] === "." ? r(o + ".") : r(e ? o : ""), n && n(a);
-    }, value: `$${i}` })
+      e && e.length > 1 && e[e.length - 1] === "." ? o(s + ".") : o(e ? s : ""), a && a(i);
+    }, value: `$${u}` })
   ] });
 };
 export {

package/Stepper/Stepper.js

@@ -1,21 +1,22 @@
-import { jsxs as S, jsx as l } from "react/jsx-runtime";
-import * as w from "react";
-import { useState as V, Children as j } from "react";
-import { n as K } from "../.chunks/emotion-styled.browser.esm.js";
-import { k as R, c as M } from "../.chunks/emotion-react.browser.esm.js";
-import { Button as I } from "../Button/Button.js";
-import x from "../theme.js";
-import { g as T, a as q, s as y, c, u as z, b as $, P as o, d as U, l as X, j as Y, k as F } from "../.chunks/DefaultPropsProvider.js";
-import { m as h } from "../.chunks/memoTheme.js";
-import { P as G } from "../.chunks/Paper.js";
-import { u as H } from "../.chunks/index.js";
-import { c as P } from "../.chunks/createSimplePaletteValueFilter.js";
-import { i as D } from "../.chunks/integerPropType.js";
-function J(e) {
-  return T("MuiLinearProgress", e);
+import { jsxs as C, jsx as n, Fragment as j } from "react/jsx-runtime";
+import * as $ from "react";
+import { useState as D, Children as h } from "react";
+import { n as _ } from "../.chunks/emotion-styled.browser.esm.js";
+import { k as R, c as k } from "../.chunks/emotion-react.browser.esm.js";
+import { Button as T } from "../Button/Button.js";
+import M from "../theme.js";
+import { SlideIn as q, SlideOut as H, SlideInReverse as z, SlideOutReverse as J } from "../animation/Slide/Slide.js";
+import { g as V, a as K, s as g, c as f, u as F, b as B, P as o, d as X, l as Q, j as W, k as Z } from "../.chunks/DefaultPropsProvider.js";
+import { m as S } from "../.chunks/memoTheme.js";
+import { P as rr } from "../.chunks/Paper.js";
+import { u as er } from "../.chunks/index.js";
+import { c as w } from "../.chunks/createSimplePaletteValueFilter.js";
+import { i as U } from "../.chunks/integerPropType.js";
+function tr(e) {
+  return V("MuiLinearProgress", e);
 }
-q("MuiLinearProgress", ["root", "colorPrimary", "colorSecondary", "determinate", "indeterminate", "buffer", "query", "dashed", "dashedColorPrimary", "dashedColorSecondary", "bar", "barColorPrimary", "barColorSecondary", "bar1Indeterminate", "bar1Determinate", "bar1Buffer", "bar2Indeterminate", "bar2Buffer"]);
-const B = 4, O = R`
+K("MuiLinearProgress", ["root", "colorPrimary", "colorSecondary", "determinate", "indeterminate", "buffer", "query", "dashed", "dashedColorPrimary", "dashedColorSecondary", "bar", "barColorPrimary", "barColorSecondary", "bar1Indeterminate", "bar1Determinate", "bar1Buffer", "bar2Indeterminate", "bar2Buffer"]);
+const O = 4, A = R`
   0% {
     left: -35%;
     right: 100%;
@@ -30,9 +31,9 @@ const B = 4, O = R`
     left: 100%;
     right: -90%;
   }
-`, Q = typeof O != "string" ? M`
-        animation: ${O} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      ` : null, L = R`
+`, or = typeof A != "string" ? k`
+        animation: ${A} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      ` : null, N = R`
   0% {
     left: -200%;
     right: 100%;
@@ -47,9 +48,9 @@ const B = 4, O = R`
     left: 107%;
     right: -8%;
   }
-`, W = typeof L != "string" ? M`
-        animation: ${L} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
-      ` : null, N = R`
+`, ar = typeof N != "string" ? k`
+        animation: ${N} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
+      ` : null, L = R`
   0% {
     opacity: 1;
     background-position: 0 -23px;
@@ -64,30 +65,30 @@ const B = 4, O = R`
     opacity: 1;
     background-position: -200px -23px;
   }
-`, Z = typeof N != "string" ? M`
-        animation: ${N} 3s infinite linear;
-      ` : null, rr = (e) => {
+`, nr = typeof L != "string" ? k`
+        animation: ${L} 3s infinite linear;
+      ` : null, ir = (e) => {
   const {
     classes: r,
     variant: t,
     color: a
-  } = e, p = {
-    root: ["root", `color${c(a)}`, t],
-    dashed: ["dashed", `dashedColor${c(a)}`],
-    bar1: ["bar", `barColor${c(a)}`, (t === "indeterminate" || t === "query") && "bar1Indeterminate", t === "determinate" && "bar1Determinate", t === "buffer" && "bar1Buffer"],
-    bar2: ["bar", t !== "buffer" && `barColor${c(a)}`, t === "buffer" && `color${c(a)}`, (t === "indeterminate" || t === "query") && "bar2Indeterminate", t === "buffer" && "bar2Buffer"]
+  } = e, c = {
+    root: ["root", `color${f(a)}`, t],
+    dashed: ["dashed", `dashedColor${f(a)}`],
+    bar1: ["bar", `barColor${f(a)}`, (t === "indeterminate" || t === "query") && "bar1Indeterminate", t === "determinate" && "bar1Determinate", t === "buffer" && "bar1Buffer"],
+    bar2: ["bar", t !== "buffer" && `barColor${f(a)}`, t === "buffer" && `color${f(a)}`, (t === "indeterminate" || t === "query") && "bar2Indeterminate", t === "buffer" && "bar2Buffer"]
   };
-  return U(p, J, r);
-}, A = (e, r) => e.vars ? e.vars.palette.LinearProgress[`${r}Bg`] : e.palette.mode === "light" ? X(e.palette[r].main, 0.62) : Y(e.palette[r].main, 0.5), er = y("span", {
+  return X(c, tr, r);
+}, I = (e, r) => e.vars ? e.vars.palette.LinearProgress[`${r}Bg`] : e.palette.mode === "light" ? Q(e.palette[r].main, 0.62) : W(e.palette[r].main, 0.5), sr = g("span", {
   name: "MuiLinearProgress",
   slot: "Root",
   overridesResolver: (e, r) => {
     const {
       ownerState: t
     } = e;
-    return [r.root, r[`color${c(t.color)}`], r[t.variant]];
+    return [r.root, r[`color${f(t.color)}`], r[t.variant]];
   }
-})(h(({
+})(S(({
   theme: e
 }) => ({
   position: "relative",
@@ -99,12 +100,12 @@ const B = 4, O = R`
   "@media print": {
     colorAdjust: "exact"
   },
-  variants: [...Object.entries(e.palette).filter(P()).map(([r]) => ({
+  variants: [...Object.entries(e.palette).filter(w()).map(([r]) => ({
     props: {
       color: r
     },
     style: {
-      backgroundColor: A(e, r)
+      backgroundColor: I(e, r)
     }
   })), {
     props: ({
@@ -137,16 +138,16 @@ const B = 4, O = R`
       transform: "rotate(180deg)"
     }
   }]
-}))), tr = y("span", {
+}))), lr = g("span", {
   name: "MuiLinearProgress",
   slot: "Dashed",
   overridesResolver: (e, r) => {
     const {
       ownerState: t
     } = e;
-    return [r.dashed, r[`dashedColor${c(t.color)}`]];
+    return [r.dashed, r[`dashedColor${f(t.color)}`]];
   }
-})(h(({
+})(S(({
   theme: e
 }) => ({
   position: "absolute",
@@ -163,8 +164,8 @@ const B = 4, O = R`
       opacity: 0.3,
       backgroundImage: "radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)"
     }
-  }, ...Object.entries(e.palette).filter(P()).map(([r]) => {
-    const t = A(e, r);
+  }, ...Object.entries(e.palette).filter(w()).map(([r]) => {
+    const t = I(e, r);
     return {
       props: {
         color: r
@@ -174,19 +175,19 @@ const B = 4, O = R`
       }
     };
   })]
-})), Z || {
+})), nr || {
   // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
-  animation: `${N} 3s infinite linear`
-}), or = y("span", {
+  animation: `${L} 3s infinite linear`
+}), pr = g("span", {
   name: "MuiLinearProgress",
   slot: "Bar1",
   overridesResolver: (e, r) => {
     const {
       ownerState: t
     } = e;
-    return [r.bar, r[`barColor${c(t.color)}`], (t.variant === "indeterminate" || t.variant === "query") && r.bar1Indeterminate, t.variant === "determinate" && r.bar1Determinate, t.variant === "buffer" && r.bar1Buffer];
+    return [r.bar, r[`barColor${f(t.color)}`], (t.variant === "indeterminate" || t.variant === "query") && r.bar1Indeterminate, t.variant === "determinate" && r.bar1Determinate, t.variant === "buffer" && r.bar1Buffer];
   }
-})(h(({
+})(S(({
   theme: e
 }) => ({
   width: "100%",
@@ -203,7 +204,7 @@ const B = 4, O = R`
     style: {
       backgroundColor: "currentColor"
     }
-  }, ...Object.entries(e.palette).filter(P()).map(([r]) => ({
+  }, ...Object.entries(e.palette).filter(w()).map(([r]) => ({
     props: {
       color: r
     },
@@ -215,7 +216,7 @@ const B = 4, O = R`
       variant: "determinate"
     },
     style: {
-      transition: `transform .${B}s linear`
+      transition: `transform .${O}s linear`
     }
   }, {
     props: {
@@ -223,7 +224,7 @@ const B = 4, O = R`
     },
     style: {
       zIndex: 1,
-      transition: `transform .${B}s linear`
+      transition: `transform .${O}s linear`
     }
   }, {
     props: ({
@@ -236,20 +237,20 @@ const B = 4, O = R`
     props: ({
       ownerState: r
     }) => r.variant === "indeterminate" || r.variant === "query",
-    style: Q || {
-      animation: `${O} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
+    style: or || {
+      animation: `${A} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
     }
   }]
-}))), ar = y("span", {
+}))), cr = g("span", {
   name: "MuiLinearProgress",
   slot: "Bar2",
   overridesResolver: (e, r) => {
     const {
       ownerState: t
     } = e;
-    return [r.bar, r[`barColor${c(t.color)}`], (t.variant === "indeterminate" || t.variant === "query") && r.bar2Indeterminate, t.variant === "buffer" && r.bar2Buffer];
+    return [r.bar, r[`barColor${f(t.color)}`], (t.variant === "indeterminate" || t.variant === "query") && r.bar2Indeterminate, t.variant === "buffer" && r.bar2Buffer];
   }
-})(h(({
+})(S(({
   theme: e
 }) => ({
   width: "100%",
@@ -259,7 +260,7 @@ const B = 4, O = R`
   top: 0,
   transition: "transform 0.2s linear",
   transformOrigin: "left",
-  variants: [...Object.entries(e.palette).filter(P()).map(([r]) => ({
+  variants: [...Object.entries(e.palette).filter(w()).map(([r]) => ({
     props: {
       color: r
     },
@@ -287,14 +288,14 @@ const B = 4, O = R`
     style: {
       opacity: 0.3
     }
-  }, ...Object.entries(e.palette).filter(P()).map(([r]) => ({
+  }, ...Object.entries(e.palette).filter(w()).map(([r]) => ({
     props: {
       color: r,
       variant: "buffer"
     },
     style: {
-      backgroundColor: A(e, r),
-      transition: `transform .${B}s linear`
+      backgroundColor: I(e, r),
+      transition: `transform .${O}s linear`
     }
   })), {
     props: ({
@@ -307,62 +308,62 @@ const B = 4, O = R`
     props: ({
       ownerState: r
     }) => r.variant === "indeterminate" || r.variant === "query",
-    style: W || {
-      animation: `${L} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite`
+    style: ar || {
+      animation: `${N} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite`
     }
   }]
-}))), E = /* @__PURE__ */ w.forwardRef(function(r, t) {
-  const a = z({
+}))), Y = /* @__PURE__ */ $.forwardRef(function(r, t) {
+  const a = F({
     props: r,
     name: "MuiLinearProgress"
   }), {
-    className: p,
-    color: f = "primary",
-    value: b,
-    valueBuffer: m,
+    className: c,
+    color: s = "primary",
+    value: m,
+    valueBuffer: y,
     variant: d = "indeterminate",
-    ...C
-  } = a, i = {
+    ...v
+  } = a, l = {
     ...a,
-    color: f,
+    color: s,
     variant: d
-  }, s = rr(i), g = H(), u = {}, v = {
+  }, p = ir(l), P = er(), u = {}, b = {
     bar1: {},
     bar2: {}
   };
   if (d === "determinate" || d === "buffer")
-    if (b !== void 0) {
-      u["aria-valuenow"] = Math.round(b), u["aria-valuemin"] = 0, u["aria-valuemax"] = 100;
-      let n = b - 100;
-      g && (n = -n), v.bar1.transform = `translateX(${n}%)`;
+    if (m !== void 0) {
+      u["aria-valuenow"] = Math.round(m), u["aria-valuemin"] = 0, u["aria-valuemax"] = 100;
+      let i = m - 100;
+      P && (i = -i), b.bar1.transform = `translateX(${i}%)`;
     } else process.env.NODE_ENV !== "production" && console.error("MUI: You need to provide a value prop when using the determinate or buffer variant of LinearProgress .");
   if (d === "buffer")
-    if (m !== void 0) {
-      let n = (m || 0) - 100;
-      g && (n = -n), v.bar2.transform = `translateX(${n}%)`;
+    if (y !== void 0) {
+      let i = (y || 0) - 100;
+      P && (i = -i), b.bar2.transform = `translateX(${i}%)`;
     } else process.env.NODE_ENV !== "production" && console.error("MUI: You need to provide a valueBuffer prop when using the buffer variant of LinearProgress.");
-  return /* @__PURE__ */ S(er, {
-    className: $(s.root, p),
-    ownerState: i,
+  return /* @__PURE__ */ C(sr, {
+    className: B(p.root, c),
+    ownerState: l,
     role: "progressbar",
     ...u,
     ref: t,
-    ...C,
-    children: [d === "buffer" ? /* @__PURE__ */ l(tr, {
-      className: s.dashed,
-      ownerState: i
-    }) : null, /* @__PURE__ */ l(or, {
-      className: s.bar1,
-      ownerState: i,
-      style: v.bar1
-    }), d === "determinate" ? null : /* @__PURE__ */ l(ar, {
-      className: s.bar2,
-      ownerState: i,
-      style: v.bar2
+    ...v,
+    children: [d === "buffer" ? /* @__PURE__ */ n(lr, {
+      className: p.dashed,
+      ownerState: l
+    }) : null, /* @__PURE__ */ n(pr, {
+      className: p.bar1,
+      ownerState: l,
+      style: b.bar1
+    }), d === "determinate" ? null : /* @__PURE__ */ n(cr, {
+      className: p.bar2,
+      ownerState: l,
+      style: b.bar2
     })]
   });
 });
-process.env.NODE_ENV !== "production" && (E.propTypes = {
+process.env.NODE_ENV !== "production" && (Y.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -403,32 +404,32 @@ process.env.NODE_ENV !== "production" && (E.propTypes = {
    */
   variant: o.oneOf(["buffer", "determinate", "indeterminate", "query"])
 });
-function nr(e) {
-  return T("MuiMobileStepper", e);
+function dr(e) {
+  return V("MuiMobileStepper", e);
 }
-q("MuiMobileStepper", ["root", "positionBottom", "positionTop", "positionStatic", "dots", "dot", "dotActive", "progress"]);
-const ir = (e) => {
+K("MuiMobileStepper", ["root", "positionBottom", "positionTop", "positionStatic", "dots", "dot", "dotActive", "progress"]);
+const ur = (e) => {
   const {
     classes: r,
     position: t
   } = e, a = {
-    root: ["root", `position${c(t)}`],
+    root: ["root", `position${f(t)}`],
     dots: ["dots"],
     dot: ["dot"],
     dotActive: ["dotActive"],
     progress: ["progress"]
   };
-  return U(a, nr, r);
-}, sr = y(G, {
+  return X(a, dr, r);
+}, fr = g(rr, {
   name: "MuiMobileStepper",
   slot: "Root",
   overridesResolver: (e, r) => {
     const {
       ownerState: t
     } = e;
-    return [r.root, r[`position${c(t.position)}`]];
+    return [r.root, r[`position${f(t.position)}`]];
   }
-})(h(({
+})(S(({
   theme: e
 }) => ({
   display: "flex",
@@ -462,7 +463,7 @@ const ir = (e) => {
       bottom: 0
     }
   }]
-}))), lr = y("div", {
+}))), br = g("div", {
   name: "MuiMobileStepper",
   slot: "Dots",
   overridesResolver: (e, r) => r.dots
@@ -476,17 +477,17 @@ const ir = (e) => {
       flexDirection: "row"
     }
   }]
-}), pr = y("div", {
+}), mr = g("div", {
   name: "MuiMobileStepper",
   slot: "Dot",
-  shouldForwardProp: (e) => F(e) && e !== "dotActive",
+  shouldForwardProp: (e) => Z(e) && e !== "dotActive",
   overridesResolver: (e, r) => {
     const {
       dotActive: t
     } = e;
     return [r.dot, t && r.dotActive];
   }
-})(h(({
+})(S(({
   theme: e
 }) => ({
   variants: [{
@@ -512,7 +513,7 @@ const ir = (e) => {
       backgroundColor: (e.vars || e).palette.primary.main
     }
   }]
-}))), cr = y(E, {
+}))), vr = g(Y, {
   name: "MuiMobileStepper",
   slot: "Progress",
   overridesResolver: (e, r) => r.progress
@@ -525,56 +526,56 @@ const ir = (e) => {
       width: "50%"
     }
   }]
-}), _ = /* @__PURE__ */ w.forwardRef(function(r, t) {
-  const a = z({
+}), G = /* @__PURE__ */ $.forwardRef(function(r, t) {
+  const a = F({
     props: r,
     name: "MuiMobileStepper"
   }), {
-    activeStep: p = 0,
-    backButton: f,
-    className: b,
-    LinearProgressProps: m,
+    activeStep: c = 0,
+    backButton: s,
+    className: m,
+    LinearProgressProps: y,
     nextButton: d,
-    position: C = "bottom",
-    steps: i,
-    variant: s = "dots",
-    ...g
+    position: v = "bottom",
+    steps: l,
+    variant: p = "dots",
+    ...P
   } = a, u = {
     ...a,
-    activeStep: p,
-    position: C,
-    variant: s
+    activeStep: c,
+    position: v,
+    variant: p
   };
-  let v;
-  s === "progress" && (i === 1 ? v = 100 : v = Math.ceil(p / (i - 1) * 100));
-  const n = ir(u);
-  return /* @__PURE__ */ S(sr, {
+  let b;
+  p === "progress" && (l === 1 ? b = 100 : b = Math.ceil(c / (l - 1) * 100));
+  const i = ur(u);
+  return /* @__PURE__ */ C(fr, {
     square: !0,
     elevation: 0,
-    className: $(n.root, b),
+    className: B(i.root, m),
     ref: t,
     ownerState: u,
-    ...g,
-    children: [f, s === "text" && /* @__PURE__ */ S(w.Fragment, {
-      children: [p + 1, " / ", i]
-    }), s === "dots" && /* @__PURE__ */ l(lr, {
+    ...P,
+    children: [s, p === "text" && /* @__PURE__ */ C($.Fragment, {
+      children: [c + 1, " / ", l]
+    }), p === "dots" && /* @__PURE__ */ n(br, {
       ownerState: u,
-      className: n.dots,
-      children: [...new Array(i)].map((ur, k) => /* @__PURE__ */ l(pr, {
-        className: $(n.dot, k === p && n.dotActive),
+      className: i.dots,
+      children: [...new Array(l)].map((yr, x) => /* @__PURE__ */ n(mr, {
+        className: B(i.dot, x === c && i.dotActive),
         ownerState: u,
-        dotActive: k === p
-      }, k))
-    }), s === "progress" && /* @__PURE__ */ l(cr, {
+        dotActive: x === c
+      }, x))
+    }), p === "progress" && /* @__PURE__ */ n(vr, {
       ownerState: u,
-      className: n.progress,
+      className: i.progress,
       variant: "determinate",
-      value: v,
-      ...m
+      value: b,
+      ...y
     }), d]
   });
 });
-process.env.NODE_ENV !== "production" && (_.propTypes = {
+process.env.NODE_ENV !== "production" && (G.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -584,7 +585,7 @@ process.env.NODE_ENV !== "production" && (_.propTypes = {
    * Defines which dot is highlighted when the variant is 'dots'.
    * @default 0
    */
-  activeStep: D,
+  activeStep: U,
   /**
    * A back button element. For instance, it can be a `Button` or an `IconButton`.
    */
@@ -613,7 +614,7 @@ process.env.NODE_ENV !== "production" && (_.propTypes = {
   /**
    * The total steps.
    */
-  steps: D.isRequired,
+  steps: U.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -624,8 +625,8 @@ process.env.NODE_ENV !== "production" && (_.propTypes = {
    */
   variant: o.oneOf(["dots", "progress", "text"])
 });
-const dr = K("div")(() => ({
-  ...M`
+const gr = _("div")(() => ({
+  ...k`
     position: relative;
     display: flex;
     flex-direction: column;
@@ -636,6 +637,7 @@ const dr = K("div")(() => ({
     padding: 0;
     margin: 0;
     background-color: transparent;
+    overflow: hidden;
 
     .MuiPaper-root {
       width: 100%;
@@ -647,42 +649,58 @@ const dr = K("div")(() => ({
     .MuiLinearProgress-root {
       padding: 9px;
       margin: 0 9px;
-      background-color: ${x.colors.whiteGreenA};
-      border-color: ${x.colors.green};
+      background-color: ${M.colors.whiteGreenA};
+      border-color: ${M.colors.green};
 
       .MuiLinearProgress-bar {
-        background-color: ${x.colors.green};
+        background-color: ${M.colors.green};
       }
     }
   `
-})), xr = ({
+})), E = _("div")(() => ({
+  ...k`
+    position: absolute;
+    top: 0;
+  `
+})), Lr = ({
   onNext: e,
   onBack: r,
   onFinish: t,
   children: a,
-  ...p
+  ...c
 }) => {
-  const [f, b] = V(0), m = j.toArray(a).length, d = () => {
-    f === m - 1 ? t == null || t() : (b((g) => g + 1), e == null || e());
-  }, C = () => {
-    b((g) => g - 1), r == null || r();
-  }, i = () => /* @__PURE__ */ l(I, { onClick: d, children: f === m - 1 ? "Finish" : "Next" }), s = () => /* @__PURE__ */ l(I, { onClick: C, children: "Back" });
-  return /* @__PURE__ */ S(dr, { className: "jcStepContainer", children: [
-    j.toArray(a)[f] ?? null,
-    /* @__PURE__ */ l(
-      _,
+  const [s, m] = D(0), [y, d] = D("forward"), v = h.toArray(a).length, l = () => {
+    d("forward"), s === v - 1 ? t == null || t() : (m((i) => i + 1), e == null || e());
+  }, p = () => {
+    d("reverse"), m((i) => i - 1), r == null || r();
+  };
+  return /* @__PURE__ */ C(gr, { className: "jcStepContainer", children: [
+    /* @__PURE__ */ n(() => {
+      if (y === "forward")
+        return s === 0 ? /* @__PURE__ */ n(q, { children: h.toArray(a)[s] ?? null }) : /* @__PURE__ */ C(j, { children: [
+          /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(H, { children: h.toArray(a)[s - 1] ?? null }) }),
+          /* @__PURE__ */ n(q, { children: h.toArray(a)[s] ?? null })
+        ] });
+      if (y === "reverse")
+        return s === v - 1 ? /* @__PURE__ */ n(z, { children: h.toArray(a)[s] ?? null }) : /* @__PURE__ */ C(j, { children: [
+          /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(J, { children: h.toArray(a)[s + 1] ?? null }) }),
+          /* @__PURE__ */ n(z, { children: h.toArray(a)[s] ?? null })
+        ] });
+    }, {}),
+    /* @__PURE__ */ n(
+      G,
       {
         variant: "progress",
-        steps: m,
+        steps: v,
         position: "static",
-        activeStep: f,
-        nextButton: /* @__PURE__ */ l(i, {}),
-        backButton: f === 0 ? /* @__PURE__ */ l("div", { style: { width: "103px" } }) : /* @__PURE__ */ l(s, {}),
-        ...p
+        activeStep: s,
+        nextButton: /* @__PURE__ */ n(() => /* @__PURE__ */ n(T, { onClick: l, children: s === v - 1 ? "Finish" : "Next" }), {}),
+        backButton: s === 0 ? /* @__PURE__ */ n("div", { style: { width: "103px" } }) : /* @__PURE__ */ n(() => /* @__PURE__ */ n(T, { onClick: p, children: "Back" }), {}),
+        ...c
       }
     )
   ] });
 };
 export {
-  xr as default
+  Lr as default
 };

package/animation/Slide/Slide.d.ts

@@ -0,0 +1,16 @@
+export declare const SlideIn: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SlideInReverse: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SlideOut: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SlideOutReverse: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/animation/Slide/Slide.js

@@ -0,0 +1,85 @@
+import { n as t } from "../../.chunks/emotion-styled.browser.esm.js";
+import { c as e } from "../../.chunks/emotion-react.browser.esm.js";
+const r = 447, a = e`
+  height: 100%;
+  width: 100%;
+  animation-fill-mode: forwards !important;
+`, o = t("div")({
+  ...e`
+    ${a};
+    @keyframes slidein {
+      0% {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+      100% {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: slidein ${r}ms ease-in-out;
+    }
+  `
+}), s = t("div")({
+  ...e`
+    ${a};
+    @keyframes slideinrev {
+      0% {
+        transform: translateX(-100%);
+        opacity: 0;
+      }
+      100% {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: slideinrev ${r}ms ease-in-out;
+    }
+  `
+}), m = t("div")({
+  ...e`
+    ${a};
+    @keyframes slideout {
+      0% {
+        transform: translateX(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateX(-100%);
+        opacity: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: slideout ${r}ms ease-in-out;
+    }
+  `
+}), d = t("div")({
+  ...e`
+    ${a};
+    @keyframes slideoutrev {
+      0% {
+        transform: translateX(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateX(100%);
+        opacity: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: slideoutrev ${r}ms ease-in-out;
+    }
+  `
+});
+export {
+  o as SlideIn,
+  s as SlideInReverse,
+  m as SlideOut,
+  d as SlideOutReverse
+};

package/animation/Slide/index.d.ts

@@ -0,0 +1 @@
+export { SlideIn, SlideInReverse, SlideOut, SlideOutReverse } from './Slide.tsx';

package/animation/Slide/index.js

@@ -0,0 +1,7 @@
+import { SlideIn as i, SlideInReverse as l, SlideOut as r, SlideOutReverse as S } from "./Slide.js";
+export {
+  i as SlideIn,
+  l as SlideInReverse,
+  r as SlideOut,
+  S as SlideOutReverse
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.233",
+  "version": "0.0.237",
   "description": "Component library for the websites of Johnson County Iowa",
   "license": "MIT",
   "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",