jcicl 0.0.245 → 0.0.249

package/.chunks/AppContainer.js

@@ -680,7 +680,7 @@ const xe = se(/* @__PURE__ */ a("path", {
         height: calc(100vh - ${i.constants.appHeaderHeight}px);
         background-color: ${o};
         box-shadow: 0 3px 6px 3px ${e};
-        padding: 1rem;
+        padding: 13px;
         overflow: visible;
       }
 
@@ -727,7 +727,7 @@ const xe = se(/* @__PURE__ */ a("path", {
   width: "100%",
   height: "calc(100% + 2px)",
   boxSizing: "border-box",
-  padding: "1rem",
+  padding: "0 9px",
   h1: {
     margin: 0
   },

package/AppHeader/AppHeader.js

@@ -1,15 +1,15 @@
 import { jsx as t, jsxs as h } from "react/jsx-runtime";
 import * as M from "react";
-import Y, { useState as z, useLayoutEffect as Z } from "react";
+import Z, { useState as z, useLayoutEffect as T } from "react";
 import { n as f } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as b } from "../.chunks/emotion-react.browser.esm.js";
 import { Search as E } from "../Search/Search.js";
 import { Button as H } from "../Button/Button.js";
 import I from "../Icon/Icon.js";
-import T from "../WithLabel/WithLabel.js";
-import { c as V } from "../.chunks/createSvgIcon.js";
-import ee from "../theme.js";
-const te = Y[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], ne = (e) => {
+import ee from "../WithLabel/WithLabel.js";
+import { c as F } from "../.chunks/createSvgIcon.js";
+import L from "../theme.js";
+const te = Z[typeof document < "u" && document.createElement !== void 0 ? "useLayoutEffect" : "useEffect"], ne = (e) => {
   const n = M.useRef(e);
   return M.useEffect(() => {
     n.current = e;
@@ -67,12 +67,12 @@ function re(e) {
     }
   };
 }
-let O;
-const ce = (e) => O || (O = re(e)), se = V(/* @__PURE__ */ t("path", {
+let S;
+const ce = (e) => S || (S = re(e)), se = F(/* @__PURE__ */ t("path", {
   d: "M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"
-}), "Menu"), L = V(/* @__PURE__ */ t("path", {
+}), "Menu"), R = F(/* @__PURE__ */ t("path", {
   d: "M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4"
-}), "PersonOutlineOutlined"), R = f("div")(
+}), "PersonOutlineOutlined"), _ = f("div")(
   ({ mobile: e, shadowSecondary: n }) => ({
     ...b`
       z-index: 1313;
@@ -86,9 +86,9 @@ const ce = (e) => O || (O = re(e)), se = V(/* @__PURE__ */ t("path", {
       box-shadow: ${e && n};
     `
   })
-), _ = f("img")(({ width: e }) => ({
+), P = f("img")(({ width: e }) => ({
   width: `${e}px`
-})), P = f("div")(({ height: e }) => ({
+})), j = f("div")(({ height: e }) => ({
   ...b`
     display: flex;
     gap: 1rem;
@@ -106,14 +106,14 @@ const ce = (e) => O || (O = re(e)), se = V(/* @__PURE__ */ t("path", {
       white-space: nowrap;
     }
   `
-})), j = f("div")(({ visible: e }) => ({
+})), A = f("div")(({ visible: e }) => ({
   ...b`
     z-index: ${e ? 1 : 0};
     opacity: ${e ? 1 : 0};
     pointer-events: ${e ? "auto" : "none"};
     position: ${e ? "relative" : "absolute"};
   `
-})), A = f("div")(() => ({
+})), V = f("div")(() => ({
   ...b`
     display: flex;
     width: 1360px;
@@ -128,7 +128,13 @@ const ce = (e) => O || (O = re(e)), se = V(/* @__PURE__ */ t("path", {
       font-size: 32px;
       line-height: 1;
       margin: 0;
-      margin-left: calc(${ee.constants.navDefaultWidth}px * 2);
+      margin-left: calc(${L.constants.navDefaultWidth}px * 2);
+    }
+
+    @media screen and (max-width: ${L.screenSizes.tablet}) {
+      h1 {
+        margin: 0;
+      }
     }
   `
 })), xe = ({
@@ -144,61 +150,61 @@ const ce = (e) => O || (O = re(e)), se = V(/* @__PURE__ */ t("path", {
   searchFilters: s,
   onHamburgerMenuClick: m,
   onUserMenuClick: v,
-  onLogin: F,
-  onSearch: U = () => {
+  onLogin: U,
+  onSearch: B = () => {
   },
-  searchPlaceholder: B = "Search",
-  onInputChange: q,
+  searchPlaceholder: q = "Search",
+  onInputChange: D,
   headerType: g = "search",
-  appTitle: S
+  appTitle: O
 }) => {
-  const [x, $] = z(0), [u, D] = z(null), [w, G] = z(null), { logoSrc: W, logoWidth: k, logoHeight: C } = l, { shadowSecondary: J, shadowTertiary: K, iconPrimary: N, borderPrimary: Q } = d, y = {
-    shadowTertiary: K,
-    borderColor: Q,
-    borderFocusColor: N,
+  const [x, C] = z(0), [u, G] = z(null), [w, J] = z(null), { logoSrc: W, logoWidth: k, logoHeight: $ } = l, { shadowSecondary: K, shadowTertiary: N, iconPrimary: Q, borderPrimary: X } = d, y = {
+    shadowTertiary: N,
+    borderColor: X,
+    borderFocusColor: Q,
     filters: s,
-    onSearch: U,
-    placeholder: B,
-    onChange: q
+    onSearch: B,
+    placeholder: q,
+    onChange: D
   };
-  Z(() => {
-    u && u.clientWidth > x && $(u.clientWidth), w && w.clientWidth > x && $(w.clientWidth);
+  T(() => {
+    u && u.clientWidth > x && C(u.clientWidth), w && w.clientWidth > x && C(w.clientWidth);
   }, [u, w]);
-  const X = (p) => {
-    p != null && p.clientWidth && p.clientWidth > x && $(p.clientWidth);
+  const Y = (p) => {
+    p != null && p.clientWidth && p.clientWidth > x && C(p.clientWidth);
   };
-  return oe(u, () => X(u)), e ? /* @__PURE__ */ h(R, { mobile: !0, shadowSecondary: J, children: [
-    /* @__PURE__ */ t(P, { height: C, children: /* @__PURE__ */ t(_, { src: W, height: `${C}px`, width: k }) }),
-    /* @__PURE__ */ h(A, { children: [
+  return oe(u, () => Y(u)), e ? /* @__PURE__ */ h(_, { mobile: !0, shadowSecondary: K, children: [
+    /* @__PURE__ */ t(j, { height: $, children: /* @__PURE__ */ t(P, { src: W, height: `${$}px`, width: k }) }),
+    /* @__PURE__ */ h(V, { children: [
       g === "search" && /* @__PURE__ */ t(E, { ...y }),
-      g === "title" && /* @__PURE__ */ t("h1", { children: S })
+      g === "title" && /* @__PURE__ */ t("h1", { children: O })
     ] }),
     /* @__PURE__ */ t(
       I,
       {
-        icon: /* @__PURE__ */ t(L, {}),
+        icon: /* @__PURE__ */ t(R, {}),
         ...a,
         onClick: o ? v : void 0
       }
     )
-  ] }) : /* @__PURE__ */ h(R, { children: [
-    /* @__PURE__ */ h(P, { height: C, children: [
-      /* @__PURE__ */ t(_, { src: W, height: `${C}px`, width: k }),
+  ] }) : /* @__PURE__ */ h(_, { children: [
+    /* @__PURE__ */ h(j, { height: $, children: [
+      /* @__PURE__ */ t(P, { src: W, height: `${$}px`, width: k }),
       i && /* @__PURE__ */ t(H, { variant: "icon", onClick: m, color: c, children: /* @__PURE__ */ t(se, {}) })
     ] }),
-    /* @__PURE__ */ h(A, { children: [
+    /* @__PURE__ */ h(V, { children: [
       g === "search" && /* @__PURE__ */ t(E, { ...y }),
-      g === "title" && /* @__PURE__ */ t("h1", { children: S })
+      g === "title" && /* @__PURE__ */ t("h1", { children: O })
     ] }),
     /* @__PURE__ */ h(le, { width: x, loggedIn: !!n, children: [
-      /* @__PURE__ */ t(j, { visible: !!n, ref: D, children: /* @__PURE__ */ t(
-        T,
+      /* @__PURE__ */ t(A, { visible: !!n, ref: G, children: /* @__PURE__ */ t(
+        ee,
         {
           id: "accountMenuContainer",
           component: /* @__PURE__ */ t(
             I,
             {
-              icon: /* @__PURE__ */ t(L, {}),
+              icon: /* @__PURE__ */ t(R, {}),
               ...a,
               onClick: o ? v : void 0
             }
@@ -206,7 +212,7 @@ const ce = (e) => O || (O = re(e)), se = V(/* @__PURE__ */ t("path", {
           label: `Hi, ${r}!`
         }
       ) }),
-      /* @__PURE__ */ t(j, { visible: !n, ref: G, children: /* @__PURE__ */ t(H, { id: "loginButtonContainer", onClick: F, children: "Log In" }) })
+      /* @__PURE__ */ t(A, { visible: !n, ref: J, children: /* @__PURE__ */ t(H, { id: "loginButtonContainer", onClick: U, children: "Log In" }) })
     ] })
   ] });
 };

package/DefaultTemplate/DefaultTemplate.js

@@ -1,13 +1,14 @@
-import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { useState as x } from "react";
-import { n } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as m } from "../.chunks/emotion-react.browser.esm.js";
+import { jsx as e, jsxs as n, Fragment as k } from "react/jsx-runtime";
+import { useState as C } from "react";
+import { n as m } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as h } from "../.chunks/emotion-react.browser.esm.js";
 import o from "../theme.js";
-import { u as k, A as C } from "../.chunks/AppContainer.js";
-import f from "../WithLoading/WithLoading.js";
-import { Fade as p } from "../Overlays/Overlays.js";
-const w = ["loading", "hasPagination", "loadingColor"], S = n("div", { shouldForwardProp: (r) => !w.includes(r) })(({ loading: r, hasPagination: e, hasFade: l, loadingColor: s = o.colors.green }) => ({
-  ...m`
+import { u as f, A as p } from "../.chunks/AppContainer.js";
+import w from "../WithLoading/WithLoading.js";
+import { TopFade as T, BottomFade as S } from "../Overlays/Overlays.js";
+const P = ["loading", "hasPagination", "loadingColor"], R = m("div", { shouldForwardProp: (r) => !P.includes(r) })(({ loading: r, hasPagination: l, hasFade: c, loadingColor: s = o.colors.green }) => ({
+  ...h`
+    position: relative;
     color: ${o.colors.midnight};
     height: ${r ? "100%" : "auto"};
     padding: 19px;
@@ -18,7 +19,7 @@ const w = ["loading", "hasPagination", "loadingColor"], S = n("div", { shouldFor
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    padding-bottom: ${l ? e ? "114px" : "72px" : "19px"};
+    padding-bottom: ${c ? l ? "114px" : "72px" : "19px"};
     > * div {
       box-sizing: border-box;
     }
@@ -27,8 +28,8 @@ const w = ["loading", "hasPagination", "loadingColor"], S = n("div", { shouldFor
       color: ${s};
     }
   `
-})), T = n("div")(() => ({
-  ...m`
+})), $ = m("div")(() => ({
+  ...h`
     border-radius: 8px;
     padding: 0;
     display: flex;
@@ -36,18 +37,18 @@ const w = ["loading", "hasPagination", "loadingColor"], S = n("div", { shouldFor
     gap: 27px;
     max-width: 1300px;
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     box-sizing: border-box;
   `
-})), P = {
+})), v = {
   green: o.colors.green,
   blue: o.colors.darkBlue,
   red: o.colors.darkRed
-}, R = {
+}, d = {
   green: o.colors.whiteGreen,
   blue: o.colors.sky,
   red: o.colors.lighterRed
-}, $ = {
+}, M = {
   backgroundPrimary: o.colors.sky,
   backgroundSecondary: o.colors.lovemist,
   backgroundTertiary: o.colors.cornflower,
@@ -62,7 +63,7 @@ const w = ["loading", "hasPagination", "loadingColor"], S = n("div", { shouldFor
     iconColor: o.colors.cobalt,
     backgroundColor: o.colors.sky
   }
-}, M = {
+}, I = {
   backgroundPrimary: o.colors.lighterRed,
   backgroundSecondary: o.colors.lightRed,
   backgroundTertiary: o.colors.cherryBlossom,
@@ -77,19 +78,19 @@ const w = ["loading", "hasPagination", "loadingColor"], S = n("div", { shouldFor
     iconColor: o.colors.maroon,
     backgroundColor: o.colors.lighterRed
   }
-}, v = {
-  blue: $,
-  red: M,
+}, z = {
+  blue: M,
+  red: I,
   green: void 0
-}, G = ({
+}, L = ({
   children: r,
-  loading: e = !1,
-  hasPagination: l = !1,
+  loading: l = !1,
+  hasPagination: c = !1,
   fade: s = !0,
-  userProfileMenuItems: h,
-  ...c
+  userProfileMenuItems: g,
+  ...t
 }) => {
-  const g = localStorage.getItem("theme") || "green", [a, i] = x(g), d = k(`(max-width: ${o.screenSizes.mobile})`), u = v[a], b = [
+  const u = localStorage.getItem("theme") || "green", [a, i] = C(u), b = f(`(max-width: ${o.screenSizes.mobile})`), y = z[a], x = [
     {
       label: "Green Theme",
       onClick: () => {
@@ -108,25 +109,28 @@ const w = ["loading", "hasPagination", "loadingColor"], S = n("div", { shouldFor
         localStorage.setItem("theme", "red"), i("red");
       }
     },
-    ...h || []
+    ...g || []
   ];
-  return /* @__PURE__ */ t(
-    C,
+  return /* @__PURE__ */ e(
+    p,
     {
-      ...c,
-      userProfileMenuItems: b,
-      themeColors: u ?? (c == null ? void 0 : c.themeColors),
-      children: /* @__PURE__ */ t(
-        S,
+      ...t,
+      userProfileMenuItems: x,
+      themeColors: y ?? (t == null ? void 0 : t.themeColors),
+      children: /* @__PURE__ */ e(
+        R,
         {
           className: "jcPageWrapper",
-          loading: e,
-          loadingColor: P[a],
-          hasPagination: l,
+          loading: l,
+          loadingColor: v[a],
+          hasPagination: c,
           hasFade: s,
-          children: /* @__PURE__ */ y(f, { loading: e, size: d ? 114 : 201, children: [
-            s && /* @__PURE__ */ t(p, { isMobile: d, hasPagination: l, color: R[a] }),
-            /* @__PURE__ */ t(T, { children: r })
+          children: /* @__PURE__ */ n(w, { loading: l, size: b ? 114 : 201, children: [
+            s && /* @__PURE__ */ n(k, { children: [
+              /* @__PURE__ */ e(T, { color: d[a] }),
+              /* @__PURE__ */ e(S, { color: d[a] })
+            ] }),
+            /* @__PURE__ */ e($, { children: r })
           ] })
         }
       )
@@ -134,7 +138,7 @@ const w = ["loading", "hasPagination", "loadingColor"], S = n("div", { shouldFor
   );
 };
 export {
-  T as MainContentContainer,
-  S as PageWrapper,
-  G as default
+  $ as MainContentContainer,
+  R as PageWrapper,
+  L as default
 };

package/Overlays/Overlays.d.ts

@@ -1,8 +1,12 @@
-export declare const Fade: import('@emotion/styled').StyledComponent<{
+export declare const BottomFade: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    color?: string;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TopFade: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 } & {
-    isMobile: boolean;
-    hasPagination: boolean;
     color?: string;
 }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/Overlays/Overlays.js

@@ -1,24 +1,38 @@
-import { n as r } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as n } from "../.chunks/emotion-react.browser.esm.js";
-import p from "../theme.js";
-const m = r("div")(
-  ({ isMobile: e, hasPagination: t, color: o = p.colors.whiteGreen }) => ({
-    ...n`
-      width: calc(100% - 72px);
-      max-width: 1300px;
-      position: fixed;
-      bottom: ${t && e ? "128px" : t && !e ? "57px" : !t && e ? "74px" : "3px"};
-      background-image: linear-gradient(to top, ${o}, ${o}00);
-      pointer-events: none;
-      height: 92px;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 92;
-    `
-  })
-);
+import { n as t } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as o } from "../.chunks/emotion-react.browser.esm.js";
+import i from "../theme.js";
+const s = t("div")(({ color: e = i.colors.whiteGreen }) => ({
+  ...o`
+    width: calc(100% - 72px);
+    max-width: 1300px;
+    position: absolute;
+    bottom: 0;
+    background-image: linear-gradient(to top, ${e}, ${e}00);
+    pointer-events: none;
+    height: 92px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 92;
+  `
+})), d = t("div")(({ color: e = i.colors.whiteGreen }) => ({
+  ...o`
+    width: calc(100% - 72px);
+    max-width: 1300px;
+    position: absolute;
+    bottom: 0;
+    background-image: linear-gradient(to top, ${e}, ${e}00);
+    pointer-events: none;
+    height: 29px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 92;
+  `
+}));
 export {
-  m as Fade
+  s as BottomFade,
+  d as TopFade
 };

package/Overlays/index.d.ts

@@ -1 +1 @@
-export { Fade } from './Overlays';
+export { TopFade, BottomFade } from './Overlays';

package/Overlays/index.js

@@ -1,4 +1,5 @@
-import { Fade as r } from "./Overlays.js";
+import { BottomFade as t, TopFade as a } from "./Overlays.js";
 export {
-  r as Fade
+  t as BottomFade,
+  a as TopFade
 };

package/Stepper/Stepper.js

@@ -1,23 +1,23 @@
-import { jsxs as C, jsx as n, Fragment as D } from "react/jsx-runtime";
+import { jsxs as C, jsx as n, Fragment as T } from "react/jsx-runtime";
 import * as O from "react";
-import { useState as T, Children as h } from "react";
+import { useState as q, Children as h } from "react";
 import { flushSync as k } from "react-dom";
-import { n as _ } from "../.chunks/emotion-styled.browser.esm.js";
-import { k as R, c as M } from "../.chunks/emotion-react.browser.esm.js";
-import { Button as q } from "../Button/Button.js";
+import { n as R } from "../.chunks/emotion-styled.browser.esm.js";
+import { k as I, c as P } from "../.chunks/emotion-react.browser.esm.js";
+import { Button as z } from "../Button/Button.js";
 import N from "../theme.js";
-import { SlideOut as H, SlideIn as J, SlideInReverse as z, SlideOutReverse as Q } from "../animation/Slide/Slide.js";
-import { g as V, a as K, s as y, c as b, u as F, b as $, P as o, d as X, l as W, j as Z, k as rr } from "../.chunks/DefaultPropsProvider.js";
-import { m as P } from "../.chunks/memoTheme.js";
+import { SlideOut as H, SlideIn as J, SlideInReverse as U, SlideOutReverse as Q } from "../animation/Slide/Slide.js";
+import { g as V, a as K, s as y, c as m, u as F, b as $, P as o, d as X, l as W, j as Z, k as rr } from "../.chunks/DefaultPropsProvider.js";
+import { m as w } from "../.chunks/memoTheme.js";
 import { P as er } from "../.chunks/Paper.js";
 import { u as tr } from "../.chunks/index.js";
-import { c as w } from "../.chunks/createSimplePaletteValueFilter.js";
-import { i as U } from "../.chunks/integerPropType.js";
+import { c as M } from "../.chunks/createSimplePaletteValueFilter.js";
+import { i as E } from "../.chunks/integerPropType.js";
 function or(e) {
   return V("MuiLinearProgress", e);
 }
 K("MuiLinearProgress", ["root", "colorPrimary", "colorSecondary", "determinate", "indeterminate", "buffer", "query", "dashed", "dashedColorPrimary", "dashedColorSecondary", "bar", "barColorPrimary", "barColorSecondary", "bar1Indeterminate", "bar1Determinate", "bar1Buffer", "bar2Indeterminate", "bar2Buffer"]);
-const j = 4, A = R`
+const j = 4, A = I`
   0% {
     left: -35%;
     right: 100%;
@@ -32,9 +32,9 @@ const j = 4, A = R`
     left: 100%;
     right: -90%;
   }
-`, ar = typeof A != "string" ? M`
+`, ar = typeof A != "string" ? P`
         animation: ${A} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-      ` : null, B = R`
+      ` : null, B = I`
   0% {
     left: -200%;
     right: 100%;
@@ -49,9 +49,9 @@ const j = 4, A = R`
     left: 107%;
     right: -8%;
   }
-`, nr = typeof B != "string" ? M`
+`, nr = typeof B != "string" ? P`
         animation: ${B} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
-      ` : null, L = R`
+      ` : null, L = I`
   0% {
     opacity: 1;
     background-position: 0 -23px;
@@ -66,7 +66,7 @@ const j = 4, A = R`
     opacity: 1;
     background-position: -200px -23px;
   }
-`, ir = typeof L != "string" ? M`
+`, ir = typeof L != "string" ? P`
         animation: ${L} 3s infinite linear;
       ` : null, sr = (e) => {
   const {
@@ -74,22 +74,22 @@ const j = 4, A = R`
     variant: t,
     color: a
   } = e, f = {
-    root: ["root", `color${b(a)}`, t],
-    dashed: ["dashed", `dashedColor${b(a)}`],
-    bar1: ["bar", `barColor${b(a)}`, (t === "indeterminate" || t === "query") && "bar1Indeterminate", t === "determinate" && "bar1Determinate", t === "buffer" && "bar1Buffer"],
-    bar2: ["bar", t !== "buffer" && `barColor${b(a)}`, t === "buffer" && `color${b(a)}`, (t === "indeterminate" || t === "query") && "bar2Indeterminate", t === "buffer" && "bar2Buffer"]
+    root: ["root", `color${m(a)}`, t],
+    dashed: ["dashed", `dashedColor${m(a)}`],
+    bar1: ["bar", `barColor${m(a)}`, (t === "indeterminate" || t === "query") && "bar1Indeterminate", t === "determinate" && "bar1Determinate", t === "buffer" && "bar1Buffer"],
+    bar2: ["bar", t !== "buffer" && `barColor${m(a)}`, t === "buffer" && `color${m(a)}`, (t === "indeterminate" || t === "query") && "bar2Indeterminate", t === "buffer" && "bar2Buffer"]
   };
   return X(f, or, r);
-}, I = (e, r) => e.vars ? e.vars.palette.LinearProgress[`${r}Bg`] : e.palette.mode === "light" ? W(e.palette[r].main, 0.62) : Z(e.palette[r].main, 0.5), lr = y("span", {
+}, D = (e, r) => e.vars ? e.vars.palette.LinearProgress[`${r}Bg`] : e.palette.mode === "light" ? W(e.palette[r].main, 0.62) : Z(e.palette[r].main, 0.5), lr = y("span", {
   name: "MuiLinearProgress",
   slot: "Root",
   overridesResolver: (e, r) => {
     const {
       ownerState: t
     } = e;
-    return [r.root, r[`color${b(t.color)}`], r[t.variant]];
+    return [r.root, r[`color${m(t.color)}`], r[t.variant]];
   }
-})(P(({
+})(w(({
   theme: e
 }) => ({
   position: "relative",
@@ -101,12 +101,12 @@ const j = 4, A = R`
   "@media print": {
     colorAdjust: "exact"
   },
-  variants: [...Object.entries(e.palette).filter(w()).map(([r]) => ({
+  variants: [...Object.entries(e.palette).filter(M()).map(([r]) => ({
     props: {
       color: r
     },
     style: {
-      backgroundColor: I(e, r)
+      backgroundColor: D(e, r)
     }
   })), {
     props: ({
@@ -146,9 +146,9 @@ const j = 4, A = R`
     const {
       ownerState: t
     } = e;
-    return [r.dashed, r[`dashedColor${b(t.color)}`]];
+    return [r.dashed, r[`dashedColor${m(t.color)}`]];
   }
-})(P(({
+})(w(({
   theme: e
 }) => ({
   position: "absolute",
@@ -165,8 +165,8 @@ const j = 4, A = R`
       opacity: 0.3,
       backgroundImage: "radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)"
     }
-  }, ...Object.entries(e.palette).filter(w()).map(([r]) => {
-    const t = I(e, r);
+  }, ...Object.entries(e.palette).filter(M()).map(([r]) => {
+    const t = D(e, r);
     return {
       props: {
         color: r
@@ -186,9 +186,9 @@ const j = 4, A = R`
     const {
       ownerState: t
     } = e;
-    return [r.bar, r[`barColor${b(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${m(t.color)}`], (t.variant === "indeterminate" || t.variant === "query") && r.bar1Indeterminate, t.variant === "determinate" && r.bar1Determinate, t.variant === "buffer" && r.bar1Buffer];
   }
-})(P(({
+})(w(({
   theme: e
 }) => ({
   width: "100%",
@@ -205,7 +205,7 @@ const j = 4, A = R`
     style: {
       backgroundColor: "currentColor"
     }
-  }, ...Object.entries(e.palette).filter(w()).map(([r]) => ({
+  }, ...Object.entries(e.palette).filter(M()).map(([r]) => ({
     props: {
       color: r
     },
@@ -249,9 +249,9 @@ const j = 4, A = R`
     const {
       ownerState: t
     } = e;
-    return [r.bar, r[`barColor${b(t.color)}`], (t.variant === "indeterminate" || t.variant === "query") && r.bar2Indeterminate, t.variant === "buffer" && r.bar2Buffer];
+    return [r.bar, r[`barColor${m(t.color)}`], (t.variant === "indeterminate" || t.variant === "query") && r.bar2Indeterminate, t.variant === "buffer" && r.bar2Buffer];
   }
-})(P(({
+})(w(({
   theme: e
 }) => ({
   width: "100%",
@@ -261,7 +261,7 @@ const j = 4, A = R`
   top: 0,
   transition: "transform 0.2s linear",
   transformOrigin: "left",
-  variants: [...Object.entries(e.palette).filter(w()).map(([r]) => ({
+  variants: [...Object.entries(e.palette).filter(M()).map(([r]) => ({
     props: {
       color: r
     },
@@ -289,13 +289,13 @@ const j = 4, A = R`
     style: {
       opacity: 0.3
     }
-  }, ...Object.entries(e.palette).filter(w()).map(([r]) => ({
+  }, ...Object.entries(e.palette).filter(M()).map(([r]) => ({
     props: {
       color: r,
       variant: "buffer"
     },
     style: {
-      backgroundColor: I(e, r),
+      backgroundColor: D(e, r),
       transition: `transform .${j}s linear`
     }
   })), {
@@ -321,7 +321,7 @@ const j = 4, A = R`
     className: f,
     color: i = "primary",
     value: g,
-    valueBuffer: m,
+    valueBuffer: b,
     variant: s = "indeterminate",
     ...v
   } = a, p = {
@@ -339,8 +339,8 @@ const j = 4, A = R`
       S && (l = -l), u.bar1.transform = `translateX(${l}%)`;
     } 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 (s === "buffer")
-    if (m !== void 0) {
-      let l = (m || 0) - 100;
+    if (b !== void 0) {
+      let l = (b || 0) - 100;
       S && (l = -l), u.bar2.transform = `translateX(${l}%)`;
     } 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__ */ C(lr, {
@@ -414,23 +414,23 @@ const fr = (e) => {
     classes: r,
     position: t
   } = e, a = {
-    root: ["root", `position${b(t)}`],
+    root: ["root", `position${m(t)}`],
     dots: ["dots"],
     dot: ["dot"],
     dotActive: ["dotActive"],
     progress: ["progress"]
   };
   return X(a, ur, r);
-}, br = y(er, {
+}, mr = y(er, {
   name: "MuiMobileStepper",
   slot: "Root",
   overridesResolver: (e, r) => {
     const {
       ownerState: t
     } = e;
-    return [r.root, r[`position${b(t.position)}`]];
+    return [r.root, r[`position${m(t.position)}`]];
   }
-})(P(({
+})(w(({
   theme: e
 }) => ({
   display: "flex",
@@ -464,7 +464,7 @@ const fr = (e) => {
       bottom: 0
     }
   }]
-}))), mr = y("div", {
+}))), br = y("div", {
   name: "MuiMobileStepper",
   slot: "Dots",
   overridesResolver: (e, r) => r.dots
@@ -488,7 +488,7 @@ const fr = (e) => {
     } = e;
     return [r.dot, t && r.dotActive];
   }
-})(P(({
+})(w(({
   theme: e
 }) => ({
   variants: [{
@@ -535,7 +535,7 @@ const fr = (e) => {
     activeStep: f = 0,
     backButton: i,
     className: g,
-    LinearProgressProps: m,
+    LinearProgressProps: b,
     nextButton: s,
     position: v = "bottom",
     steps: p,
@@ -550,7 +550,7 @@ const fr = (e) => {
   let u;
   c === "progress" && (p === 1 ? u = 100 : u = Math.ceil(f / (p - 1) * 100));
   const l = fr(d);
-  return /* @__PURE__ */ C(br, {
+  return /* @__PURE__ */ C(mr, {
     square: !0,
     elevation: 0,
     className: $(l.root, g),
@@ -559,10 +559,10 @@ const fr = (e) => {
     ...S,
     children: [i, c === "text" && /* @__PURE__ */ C(O.Fragment, {
       children: [f + 1, " / ", p]
-    }), c === "dots" && /* @__PURE__ */ n(mr, {
+    }), c === "dots" && /* @__PURE__ */ n(br, {
       ownerState: d,
       className: l.dots,
-      children: [...new Array(p)].map((hr, x) => /* @__PURE__ */ n(vr, {
+      children: [...new Array(p)].map((Sr, x) => /* @__PURE__ */ n(vr, {
         className: $(l.dot, x === f && l.dotActive),
         ownerState: d,
         dotActive: x === f
@@ -572,7 +572,7 @@ const fr = (e) => {
       className: l.progress,
       variant: "determinate",
       value: u,
-      ...m
+      ...b
     }), s]
   });
 });
@@ -586,7 +586,7 @@ process.env.NODE_ENV !== "production" && (G.propTypes = {
    * Defines which dot is highlighted when the variant is 'dots'.
    * @default 0
    */
-  activeStep: U,
+  activeStep: E,
   /**
    * A back button element. For instance, it can be a `Button` or an `IconButton`.
    */
@@ -615,7 +615,7 @@ process.env.NODE_ENV !== "production" && (G.propTypes = {
   /**
    * The total steps.
    */
-  steps: U.isRequired,
+  steps: E.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -626,8 +626,8 @@ process.env.NODE_ENV !== "production" && (G.propTypes = {
    */
   variant: o.oneOf(["dots", "progress", "text"])
 });
-const yr = _("div")(() => ({
-  ...M`
+const yr = R("div")(() => ({
+  ...P`
     position: relative;
     display: flex;
     flex-direction: column;
@@ -658,35 +658,40 @@ const yr = _("div")(() => ({
       }
     }
   `
-})), E = _("div")(() => ({
-  ...M`
+})), _ = R("div")(() => ({
+  ...P`
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
   `
-})), Rr = ({
+})), hr = R("div")(() => ({
+  ...P`
+    width: 100%;
+    height: 100%;
+  `
+})), Ir = ({
   onNext: e,
   onBack: r,
   onFinish: t,
   children: a,
   ...f
 }) => {
-  const [i, g] = T(0), [m, s] = T("forward"), v = h.toArray(a).length, p = () => {
+  const [i, g] = q(0), [b, s] = q("forward"), v = h.toArray(a).length, p = () => {
     i === v - 1 ? t == null || t() : (k(() => s("none")), k(() => s("forward")), g((u) => u + 1), e == null || e());
   }, c = () => {
     k(() => s("none")), k(() => s("reverse")), g((u) => u - 1), r == null || r();
-  }, S = () => /* @__PURE__ */ n(q, { onClick: p, children: i === v - 1 ? "Finish" : "Next" }), d = () => /* @__PURE__ */ n(q, { onClick: c, children: "Back" });
+  }, S = () => /* @__PURE__ */ n(z, { onClick: p, children: i === v - 1 ? "Finish" : "Next" }), d = () => /* @__PURE__ */ n(z, { onClick: c, children: "Back" });
   return /* @__PURE__ */ C(yr, { className: "jcStepContainer", children: [
-    i === 0 && m === "forward" && (h.toArray(a)[i] ?? null),
-    i !== 0 && m === "forward" && /* @__PURE__ */ C(D, { children: [
-      /* @__PURE__ */ n(E, { className: "jcSlideOutContainer", children: /* @__PURE__ */ n(H, { className: "jcSlideContainer", children: h.toArray(a)[i - 1] ?? null }) }),
+    i === 0 && b === "forward" && /* @__PURE__ */ n(hr, { className: "jcSlideContainer", children: h.toArray(a)[i] ?? null }),
+    i !== 0 && b === "forward" && /* @__PURE__ */ C(T, { children: [
+      /* @__PURE__ */ n(_, { className: "jcSlideOutContainer", children: /* @__PURE__ */ n(H, { className: "jcSlideContainer", children: h.toArray(a)[i - 1] ?? null }) }),
       /* @__PURE__ */ n(J, { className: "jcSlideContainer", children: h.toArray(a)[i] ?? null })
     ] }),
-    i === v - 1 && m === "reverse" && /* @__PURE__ */ n(z, { children: h.toArray(a)[i] ?? null }),
-    i !== v - 1 && m === "reverse" && /* @__PURE__ */ C(D, { children: [
-      /* @__PURE__ */ n(E, { className: "jcSlideOutContainer", children: /* @__PURE__ */ n(Q, { className: "jcSlideContainer", children: h.toArray(a)[i + 1] ?? null }) }),
-      /* @__PURE__ */ n(z, { className: "jcSlideContainer", children: h.toArray(a)[i] ?? null })
+    i === v - 1 && b === "reverse" && /* @__PURE__ */ n(U, { className: "jcSlideContainer", children: h.toArray(a)[i] ?? null }),
+    i !== v - 1 && b === "reverse" && /* @__PURE__ */ C(T, { children: [
+      /* @__PURE__ */ n(_, { className: "jcSlideOutContainer", children: /* @__PURE__ */ n(Q, { className: "jcSlideContainer", children: h.toArray(a)[i + 1] ?? null }) }),
+      /* @__PURE__ */ n(U, { className: "jcSlideContainer", children: h.toArray(a)[i] ?? null })
     ] }),
     /* @__PURE__ */ n(
       G,
@@ -703,5 +708,5 @@ const yr = _("div")(() => ({
   ] });
 };
 export {
-  Rr as default
+  Ir as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.245",
+  "version": "0.0.249",
   "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",