jcicl 0.0.215 → 0.0.219

package/AppContainer/Default/Default.d.ts

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+import { AppContainerProps } from '../../../../../../../../../../src/components/templates/AppContainer';
+export declare const PageWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    loading: boolean;
+    hasPagination: boolean;
+    loadingColor?: string;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MainContentContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export interface DefaultTemplateProps extends AppContainerProps {
+    loading?: boolean;
+    hasPagination?: boolean;
+}
+declare const DefaultTemplate: React.FC<PropsWithChildren<DefaultTemplateProps>>;
+export default DefaultTemplate;

package/AppContainer/Default/Default.js

@@ -0,0 +1,125 @@
+import { jsx as l, jsxs as h } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { n as t } from "../../.chunks/emotion-styled.browser.esm.js";
+import { c as n } from "../../.chunks/emotion-react.browser.esm.js";
+import o from "../../theme.js";
+import { u as b, A as y } from "../../.chunks/AppContainer.js";
+import x from "../../WithLoading/WithLoading.js";
+import { Fade as f } from "../../Overlays/Overlays.js";
+const k = ["loading", "hasPagination", "loadingColor"], C = t("div", { shouldForwardProp: (r) => !k.includes(r) })(({ loading: r, hasPagination: s, loadingColor: e = o.colors.green }) => ({
+  ...n`
+    color: ${o.colors.midnight};
+    height: ${r ? "100%" : "auto"};
+    padding: 19px;
+    display: flex;
+    flex-direction: column;
+    justify-content: ${r ? "center" : "start"};
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+    padding-bottom: ${s ? "114px" : "72px"};
+    > * div {
+      box-sizing: border-box;
+    }
+
+    .MuiCircularProgress-svg {
+      color: ${e};
+    }
+  `
+})), w = t("div")(() => ({
+  ...n`
+    border-radius: 8px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 27px;
+    max-width: 1300px;
+    width: 100%;
+    box-sizing: border-box;
+  `
+})), p = {
+  green: o.colors.green,
+  blue: o.colors.darkBlue,
+  red: o.colors.darkRed
+}, S = {
+  green: o.colors.whiteGreen,
+  blue: o.colors.sky,
+  red: o.colors.lighterRed
+}, T = {
+  backgroundPrimary: o.colors.sky,
+  backgroundSecondary: o.colors.lovemist,
+  backgroundTertiary: o.colors.cornflower,
+  backgroundQuaternary: o.colors.sky,
+  borderPrimary: o.colors.darkBlue,
+  shadowPrimary: o.colors.indigo,
+  shadowSecondary: o.boxShadows.cobalt,
+  shadowTertiary: o.boxShadows.indigoThick,
+  iconPrimary: o.colors.cobalt,
+  scrollColor: `${o.colors.cobalt}99`,
+  iconColors: {
+    iconColor: o.colors.cobalt,
+    backgroundColor: o.colors.sky
+  }
+}, P = {
+  backgroundPrimary: o.colors.lighterRed,
+  backgroundSecondary: o.colors.lightRed,
+  backgroundTertiary: o.colors.cherryBlossom,
+  backgroundQuaternary: o.colors.lighterRed,
+  borderPrimary: o.colors.darkRed,
+  shadowPrimary: o.colors.maroon,
+  shadowSecondary: o.boxShadows.burgundy,
+  shadowTertiary: o.boxShadows.maroonThick,
+  iconPrimary: o.colors.maroon,
+  scrollColor: `${o.colors.maroon}99`,
+  iconColors: {
+    iconColor: o.colors.maroon,
+    backgroundColor: o.colors.lighterRed
+  }
+}, R = {
+  blue: T,
+  red: P,
+  green: void 0
+}, W = ({
+  children: r,
+  userProfileMenuItems: s,
+  ...e
+}) => {
+  const d = localStorage.getItem("theme") || "green", [a, i] = u(d), c = b(`(max-width: ${o.screenSizes.mobile})`), m = R[a], g = [
+    {
+      label: "Green Theme",
+      onClick: () => {
+        localStorage.setItem("theme", "green"), i("green");
+      }
+    },
+    {
+      label: "Blue Theme",
+      onClick: () => {
+        localStorage.setItem("theme", "blue"), i("blue");
+      }
+    },
+    {
+      label: "Red Theme",
+      onClick: () => {
+        localStorage.setItem("theme", "red"), i("red");
+      }
+    },
+    ...s || []
+  ];
+  return /* @__PURE__ */ l(
+    y,
+    {
+      ...e,
+      userProfileMenuItems: g,
+      themeColors: m ?? (e == null ? void 0 : e.themeColors),
+      children: /* @__PURE__ */ l(C, { loading: !1, loadingColor: p[a], hasPagination: !1, children: /* @__PURE__ */ h(x, { loading: !1, size: c ? 114 : 201, children: [
+        /* @__PURE__ */ l(f, { isMobile: c, hasPagination: !1, color: S[a] }),
+        /* @__PURE__ */ l(w, { children: r })
+      ] }) })
+    }
+  );
+};
+export {
+  w as MainContentContainer,
+  C as PageWrapper,
+  W as default
+};

package/AppContainer/index.d.ts

@@ -1 +1 @@
-export { default } from './AppContainer';
+export { default, type AppContainerProps } from './AppContainer';

package/AppContainer/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./AppContainer.js";
+import { A as f } from "../.chunks/AppContainer.js";
 export {
-  o as default
+  f as default
 };

package/FormComponents/FormComponents.d.ts

@@ -0,0 +1,36 @@
+import { SerializedStyles } from '@emotion/react';
+export declare const FormSection: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    boxShadow?: string;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FormFieldGrid: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    columns?: number;
+    columnsOverride?: string;
+    gap?: number;
+    customStyles?: SerializedStyles;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FormFieldCheckboxContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FormSectionTitle: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const FormSubtitle: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    underlined?: boolean;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const FormSubsectionTitle: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    underlined?: boolean;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;

package/FormComponents/FormComponents.js

@@ -0,0 +1,89 @@
+import { n as e } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as t } from "../.chunks/emotion-react.browser.esm.js";
+import i from "../theme.js";
+const x = e("div")(
+  ({ boxShadow: o = i.boxShadows.darkGreen }) => ({
+    ...t`
+      background-color: ${i.colors.white};
+      border-radius: 8px;
+      box-shadow: ${o};
+      padding: 0px 36px 19px 36px;
+      display: flex;
+      flex-direction: column;
+      gap: 21px;
+      max-width: 1300px;
+      width: 100%;
+      box-sizing: border-box;
+    `
+  })
+), m = e("div")(({ columns: o = 3, columnsOverride: n, gap: r = 21, customStyles: a }) => ({
+  ...t`
+    display: grid;
+    grid-template-columns: repeat(${o}, 1fr);
+    ${n && t`
+      grid-template-columns: ${n};
+    `};
+    gap: ${r}px;
+    ${a};
+  `
+})), s = e("div")(() => ({
+  ...t`
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    gap: 13px;
+
+    span {
+      line-height: 1;
+    }
+
+    .jcLabeledInput,
+    .jcLabeledDropdown {
+      flex-grow: 1;
+      align-items: flex-end;
+    }
+  `
+})), g = e("h2")(() => ({
+  ...t`
+    font-size: 27px;
+    font-weight: 600;
+    text-align: left;
+    margin-top: 9px;
+    margin-bottom: -15px;
+  `
+})), c = e("h3")(({ underlined: o = !1 }) => ({
+  ...t`
+    font-size: 19px;
+    font-weight: 600;
+    text-align: left;
+    margin: 0;
+    margin-bottom: -15px;
+    width: 100%;
+    ${o && t`
+      text-decoration: underline;
+    `};
+  `
+})), f = e("h3")(({ underlined: o = !1 }) => ({
+  ...t`
+    font-size: 19px;
+    font-weight: 600;
+    text-align: left;
+    margin: 0;
+    margin-top: 9px;
+    margin-bottom: -6px;
+    border-bottom: 1px solid ${i.colors.gray};
+    width: 100%;
+    ${o && t`
+      text-decoration: underline;
+    `};
+  `
+}));
+export {
+  s as FormFieldCheckboxContainer,
+  m as FormFieldGrid,
+  x as FormSection,
+  g as FormSectionTitle,
+  f as FormSubsectionTitle,
+  c as FormSubtitle
+};

package/FormComponents/index.d.ts

@@ -0,0 +1 @@
+export { FormSection, FormFieldGrid, FormFieldCheckboxContainer, FormSectionTitle, FormSubtitle, FormSubsectionTitle, } from './FormComponents';

package/FormComponents/index.js

@@ -0,0 +1,9 @@
+import { FormFieldCheckboxContainer as i, FormFieldGrid as r, FormSection as t, FormSectionTitle as F, FormSubsectionTitle as m, FormSubtitle as l } from "./FormComponents.js";
+export {
+  i as FormFieldCheckboxContainer,
+  r as FormFieldGrid,
+  t as FormSection,
+  F as FormSectionTitle,
+  m as FormSubsectionTitle,
+  l as FormSubtitle
+};

package/LabeledCurrencyInput/LabeledCurrencyInput.js

@@ -27,10 +27,10 @@ const w = d("div")(({ grid: t }) => ({
   label: t,
   grid: l = !0,
   noLabel: p = !1,
-  onChange: r,
+  onChange: n,
   ...u
 }) => {
-  const [i, n] = f("");
+  const [i, r] = f("");
   return /* @__PURE__ */ s(w, { grid: l, className: "jcLabeledCurrencyInput", children: [
     !p && /* @__PURE__ */ s("span", { children: [
       t,
@@ -41,7 +41,7 @@ const w = d("div")(({ grid: t }) => ({
         style: "decimal",
         maximumFractionDigits: 2
       }).format(Number(e) || 0);
-      e && e.length > 1 && e[e.length - 1] === "." ? n(o + ".") : n(o), r && r(a);
+      e && e.length > 1 && e[e.length - 1] === "." ? r(o + ".") : r(e ? o : ""), n && n(a);
     }, value: `$${i}` })
   ] });
 };

package/Overlays/Overlays.d.ts

@@ -0,0 +1,8 @@
+export declare const Fade: 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

@@ -0,0 +1,24 @@
+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;
+    `
+  })
+);
+export {
+  m as Fade
+};

package/Overlays/index.d.ts

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

package/Overlays/index.js

@@ -0,0 +1,4 @@
+import { Fade as r } from "./Overlays.js";
+export {
+  r as Fade
+};

package/index.js

@@ -6,8 +6,8 @@ import { Grid as l } from "./Grid/Grid.js";
 import { default as i } from "./Icon/Icon.js";
 import { Input as s } from "./Input/Input.js";
 import { LabeledValue as I } from "./LabeledValue/LabeledValue.js";
-import { default as c } from "./ListButton/ListButton.js";
-import { default as A } from "./Loading/Loading.js";
+import { default as b } from "./ListButton/ListButton.js";
+import { default as g } from "./Loading/Loading.js";
 import { default as h } from "./ScrollContainer/ScrollContainer.js";
 import { Accordion as B } from "./Accordion/Accordion.js";
 import { default as E } from "./ErrorBoundary/ErrorBoundary.js";
@@ -21,7 +21,7 @@ import { default as z } from "./WithLoading/WithLoading.js";
 import { default as K } from "./AppHeader/AppHeader.js";
 import { EditableInfoCard as O } from "./EditableInfoCard/EditableInfoCard.js";
 import { Nav as Q } from "./Nav/Nav.js";
-import { default as U } from "./AppContainer/AppContainer.js";
+import { A as U } from "./.chunks/AppContainer.js";
 export {
   B as Accordion,
   U as AppContainer,
@@ -39,8 +39,8 @@ export {
   G as LabeledInput,
   I as LabeledValue,
   N as List,
-  c as ListButton,
-  A as Loading,
+  b as ListButton,
+  g as Loading,
   T as LogoLoop,
   Q as Nav,
   h as ScrollContainer,

package/package.json

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