jcicl 0.0.128 → 0.0.130

package/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps as MuiButtonProps } from '@mui/material/Button/Button';
 export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size' | 'color'> {
-    variant?: 1 | 2 | 'unstyled' | 'icon';
+    variant?: 1 | 2 | 'unstyled' | 'icon' | 'bibi' | 'bibiOutlined' | 'bibiInverse';
     size?: number;
     color?: string;
     highlightColor?: string;

package/Button/Button.js

@@ -1,39 +1,39 @@
-import { jsxs as D, jsx as d } from "react/jsx-runtime";
-import * as x from "react";
-import { g as U, a as _, s as c, r as H, c as i, f as A, u as q, b as I, P as t, d as J, e as b } from "../.chunks/DefaultPropsProvider.js";
-import { m as K } from "../.chunks/memoTheme.js";
-import { c as Q } from "../.chunks/createSimplePaletteValueFilter.js";
+import { jsxs as H, jsx as l } from "react/jsx-runtime";
+import * as g from "react";
+import { g as _, a as A, s as c, r as q, c as d, f as J, u as K, b as O, P as t, d as Q, e as v } from "../.chunks/DefaultPropsProvider.js";
+import { m as X } from "../.chunks/memoTheme.js";
+import { c as Y } from "../.chunks/createSimplePaletteValueFilter.js";
 import { B as S } from "../.chunks/ButtonBase.js";
-import { i as X } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as Y } from "../.chunks/emotion-react.browser.esm.js";
-import s from "../theme.js";
-function Z(o) {
-  return U("MuiButton", o);
+import { i as Z } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as f } from "../.chunks/emotion-react.browser.esm.js";
+import n from "../theme.js";
+function oo(o) {
+  return _("MuiButton", o);
 }
-const u = _("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), h = /* @__PURE__ */ x.createContext({});
-process.env.NODE_ENV !== "production" && (h.displayName = "ButtonGroupContext");
-const O = /* @__PURE__ */ x.createContext(void 0);
-process.env.NODE_ENV !== "production" && (O.displayName = "ButtonGroupButtonContext");
-const oo = (o) => {
+const u = A("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), R = /* @__PURE__ */ g.createContext({});
+process.env.NODE_ENV !== "production" && (R.displayName = "ButtonGroupContext");
+const E = /* @__PURE__ */ g.createContext(void 0);
+process.env.NODE_ENV !== "production" && (E.displayName = "ButtonGroupButtonContext");
+const to = (o) => {
   const {
-    color: n,
-    disableElevation: a,
-    fullWidth: r,
-    size: e,
-    variant: l,
+    color: a,
+    disableElevation: r,
+    fullWidth: e,
+    size: i,
+    variant: s,
     classes: p
-  } = o, f = {
-    root: ["root", l, `${l}${i(n)}`, `size${i(e)}`, `${l}Size${i(e)}`, `color${i(n)}`, a && "disableElevation", r && "fullWidth"],
+  } = o, y = {
+    root: ["root", s, `${s}${d(a)}`, `size${d(i)}`, `${s}Size${d(i)}`, `color${d(a)}`, r && "disableElevation", e && "fullWidth"],
     label: ["label"],
-    startIcon: ["icon", "startIcon", `iconSize${i(e)}`],
-    endIcon: ["icon", "endIcon", `iconSize${i(e)}`]
-  }, y = J(f, Z, p);
+    startIcon: ["icon", "startIcon", `iconSize${d(i)}`],
+    endIcon: ["icon", "endIcon", `iconSize${d(i)}`]
+  }, B = Q(y, oo, p);
   return {
     ...p,
     // forward the focused, disabled, etc. classes to the ButtonBase
-    ...y
+    ...B
   };
-}, R = [{
+}, N = [{
   props: {
     size: "small"
   },
@@ -60,20 +60,20 @@ const oo = (o) => {
       fontSize: 22
     }
   }
-}], to = c(S, {
-  shouldForwardProp: (o) => H(o) || o === "classes",
+}], ro = c(S, {
+  shouldForwardProp: (o) => q(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
-  overridesResolver: (o, n) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: r
     } = o;
-    return [n.root, n[a.variant], n[`${a.variant}${i(a.color)}`], n[`size${i(a.size)}`], n[`${a.variant}Size${i(a.size)}`], a.color === "inherit" && n.colorInherit, a.disableElevation && n.disableElevation, a.fullWidth && n.fullWidth];
+    return [a.root, a[r.variant], a[`${r.variant}${d(r.color)}`], a[`size${d(r.size)}`], a[`${r.variant}Size${d(r.size)}`], r.color === "inherit" && a.colorInherit, r.disableElevation && a.disableElevation, r.fullWidth && a.fullWidth];
   }
-})(K(({
+})(X(({
   theme: o
 }) => {
-  const n = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], a = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
+  const a = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], r = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
   return {
     ...o.typography.button,
     minWidth: 64,
@@ -139,22 +139,22 @@ const oo = (o) => {
         color: "var(--variant-textColor)",
         backgroundColor: "var(--variant-textBg)"
       }
-    }, ...Object.entries(o.palette).filter(Q()).map(([r]) => ({
+    }, ...Object.entries(o.palette).filter(Y()).map(([e]) => ({
       props: {
-        color: r
+        color: e
       },
       style: {
-        "--variant-textColor": (o.vars || o).palette[r].main,
-        "--variant-outlinedColor": (o.vars || o).palette[r].main,
-        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / 0.5)` : b(o.palette[r].main, 0.5),
-        "--variant-containedColor": (o.vars || o).palette[r].contrastText,
-        "--variant-containedBg": (o.vars || o).palette[r].main,
+        "--variant-textColor": (o.vars || o).palette[e].main,
+        "--variant-outlinedColor": (o.vars || o).palette[e].main,
+        "--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / 0.5)` : v(o.palette[e].main, 0.5),
+        "--variant-containedColor": (o.vars || o).palette[e].contrastText,
+        "--variant-containedBg": (o.vars || o).palette[e].main,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": (o.vars || o).palette[r].dark,
-            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[r].main, o.palette.action.hoverOpacity),
-            "--variant-outlinedBorder": (o.vars || o).palette[r].main,
-            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[r].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette[r].main, o.palette.action.hoverOpacity)
+            "--variant-containedBg": (o.vars || o).palette[e].dark,
+            "--variant-textBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette[e].main, o.palette.action.hoverOpacity),
+            "--variant-outlinedBorder": (o.vars || o).palette[e].main,
+            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[e].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette[e].main, o.palette.action.hoverOpacity)
           }
         }
       }
@@ -165,12 +165,12 @@ const oo = (o) => {
       style: {
         color: "inherit",
         borderColor: "currentColor",
-        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : n,
+        "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
         "@media (hover: hover)": {
           "&:hover": {
-            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : a,
-            "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity),
-            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.text.primary, o.palette.action.hoverOpacity)
+            "--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : r,
+            "--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette.text.primary, o.palette.action.hoverOpacity),
+            "--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : v(o.palette.text.primary, o.palette.action.hoverOpacity)
           }
         }
       }
@@ -259,11 +259,11 @@ const oo = (o) => {
 })), ao = c("span", {
   name: "MuiButton",
   slot: "StartIcon",
-  overridesResolver: (o, n) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: r
     } = o;
-    return [n.startIcon, n[`iconSize${i(a.size)}`]];
+    return [a.startIcon, a[`iconSize${d(r.size)}`]];
   }
 })({
   display: "inherit",
@@ -276,15 +276,15 @@ const oo = (o) => {
     style: {
       marginLeft: -2
     }
-  }, ...R]
+  }, ...N]
 }), no = c("span", {
   name: "MuiButton",
   slot: "EndIcon",
-  overridesResolver: (o, n) => {
+  overridesResolver: (o, a) => {
     const {
-      ownerState: a
+      ownerState: r
     } = o;
-    return [n.endIcon, n[`iconSize${i(a.size)}`]];
+    return [a.endIcon, a[`iconSize${d(r.size)}`]];
   }
 })({
   display: "inherit",
@@ -297,62 +297,62 @@ const oo = (o) => {
     style: {
       marginRight: -2
     }
-  }, ...R]
-}), k = /* @__PURE__ */ x.forwardRef(function(n, a) {
-  const r = x.useContext(h), e = x.useContext(O), l = A(r, n), p = q({
-    props: l,
+  }, ...N]
+}), T = /* @__PURE__ */ g.forwardRef(function(a, r) {
+  const e = g.useContext(R), i = g.useContext(E), s = J(e, a), p = K({
+    props: s,
     name: "MuiButton"
   }), {
-    children: f,
-    color: y = "primary",
-    component: B = "button",
-    className: N,
-    disabled: z = !1,
-    disableElevation: P = !1,
-    disableFocusRipple: $ = !1,
-    endIcon: m,
-    focusVisibleClassName: T,
-    fullWidth: W = !1,
-    size: V = "medium",
-    startIcon: C,
-    type: w,
-    variant: M = "text",
-    ...j
-  } = p, g = {
+    children: y,
+    color: B = "primary",
+    component: w = "button",
+    className: P,
+    disabled: C = !1,
+    disableElevation: W = !1,
+    disableFocusRipple: m = !1,
+    endIcon: h,
+    focusVisibleClassName: V,
+    fullWidth: M = !1,
+    size: j = "medium",
+    startIcon: I,
+    type: k,
+    variant: G = "text",
+    ...L
+  } = p, x = {
     ...p,
-    color: y,
-    component: B,
-    disabled: z,
-    disableElevation: P,
-    disableFocusRipple: $,
-    fullWidth: W,
-    size: V,
-    type: w,
-    variant: M
-  }, v = oo(g), G = C && /* @__PURE__ */ d(ao, {
-    className: v.startIcon,
-    ownerState: g,
-    children: C
-  }), L = m && /* @__PURE__ */ d(no, {
-    className: v.endIcon,
-    ownerState: g,
-    children: m
-  }), F = e || "";
-  return /* @__PURE__ */ D(to, {
-    ownerState: g,
-    className: I(r.className, v.root, N, F),
-    component: B,
-    disabled: z,
-    focusRipple: !$,
-    focusVisibleClassName: I(v.focusVisible, T),
-    ref: a,
-    type: w,
-    ...j,
-    classes: v,
-    children: [G, f, L]
+    color: B,
+    component: w,
+    disabled: C,
+    disableElevation: W,
+    disableFocusRipple: m,
+    fullWidth: M,
+    size: j,
+    type: k,
+    variant: G
+  }, b = to(x), F = I && /* @__PURE__ */ l(ao, {
+    className: b.startIcon,
+    ownerState: x,
+    children: I
+  }), D = h && /* @__PURE__ */ l(no, {
+    className: b.endIcon,
+    ownerState: x,
+    children: h
+  }), U = i || "";
+  return /* @__PURE__ */ H(ro, {
+    ownerState: x,
+    className: O(e.className, b.root, P, U),
+    component: w,
+    disabled: C,
+    focusRipple: !m,
+    focusVisibleClassName: O(b.focusVisible, V),
+    ref: r,
+    type: k,
+    ...L,
+    classes: b,
+    children: [F, y, D]
   });
 });
-process.env.NODE_ENV !== "production" && (k.propTypes = {
+process.env.NODE_ENV !== "production" && (T.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -446,45 +446,84 @@ process.env.NODE_ENV !== "production" && (k.propTypes = {
    */
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
-const E = c(k)`
+const $ = c(T)`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
-    color: ${s.colors.black};
+    color: ${n.colors.black};
     display: flex;
     justify-content: center;
     align-items: center;
   }
-`, ro = c(E)`
-  background-color: ${s.colors.green};
+`, eo = c($)`
+  background-color: ${n.colors.green};
   border-radius: 0;
   height: 2.5rem;
   border: 2px solid transparent;
-  color: ${s.colors.white};
+  color: ${n.colors.white};
   transition: 313ms all ease-in;
   border-radius: 32px;
   font-weight: 400;
   padding: 0.75rem 2rem;
   font-size: 1rem;
-  box-shadow: ${s.boxShadows.gray63};
+  box-shadow: ${n.boxShadows.gray63};
   &:hover,
   :focus-visible {
-    background-color: ${s.colors.darkGreen};
-    box-shadow: ${s.boxShadows.black63};
+    background-color: ${n.colors.darkGreen};
+    box-shadow: ${n.boxShadows.black63};
   }
   &:disabled {
-    background-color: ${s.colors.darkGreen};
+    background-color: ${n.colors.darkGreen};
   }
-`, eo = c(E)`
-  color: ${s.colors.black};
-  border: 3px solid ${s.colors.blue};
+`, io = c($)`
+  color: ${n.colors.black};
+  border: 3px solid ${n.colors.blue};
   padding: 0.5rem 2rem;
-`, io = c(S)`
+`, z = c($)(({ width: o = "114px" }) => ({
+  ...f`
+    box-sizing: border-box;
+    background-color: ${n.colors.bibiBlue};
+    border-radius: 0;
+    height: 47px;
+    width: ${o};
+    border: 2px solid transparent;
+    color: ${n.colors.white};
+    transition: 108ms all ease-in;
+    font-weight: 500;
+    padding: 0;
+    font-size: 19px;
+    &:hover,
+    :focus-visible {
+      background-color: ${n.colors.bibiBlueHover};
+    }
+  `
+})), so = c(z)(({ active: o }) => ({
+  ...f`
+    background-color: ${o && n.colors.white};
+    color: ${o && n.colors.bibiBlue};
+    &:hover,
+    :focus-visible {
+      background-color: ${n.colors.white};
+      color: ${n.colors.bibiBlue};
+    }
+  `
+})), lo = c(z)(() => ({
+  ...f`
+    background-color: ${n.colors.white};
+    color: ${n.colors.bibiBlue};
+    &:hover,
+    :focus-visible {
+      background-color: ${n.colors.bibiBlue};
+      border: 2px solid ${n.colors.white};
+      color: ${n.colors.white};
+    }
+  `
+})), co = c(S)`
   border-radius: 8px;
-`, so = c(S, {
-  shouldForwardProp: (o) => typeof o == "string" && X(o)
-})(({ size: o, color: n, highlightColor: a }) => ({
-  ...Y`
+`, po = c(S, {
+  shouldForwardProp: (o) => typeof o == "string" && Z(o)
+})(({ size: o, color: a, highlightColor: r }) => ({
+  ...f`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -494,27 +533,27 @@ const E = c(k)`
     &:hover,
     :focus-visible {
       svg {
-        filter: drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a})
-          drop-shadow(0 0 6px ${a}) drop-shadow(0 0 6px ${a});
+        filter: drop-shadow(0 0 6px ${r}) drop-shadow(0 0 6px ${r})
+          drop-shadow(0 0 6px ${r}) drop-shadow(0 0 6px ${r});
       }
     }
 
     svg {
       transition: 313ms all ease-in-out;
-      fill: ${n};
+      fill: ${a};
       width: ${o}px;
       height: ${o}px;
     }
   `
-})), fo = ({
+})), So = ({
   variant: o = 1,
-  size: n = 50,
-  color: a = s.colors.darkGreen,
-  highlightColor: r = s.colors.dandelion,
-  children: e,
-  ...l
-}) => o === "unstyled" ? /* @__PURE__ */ d(io, { ...l, children: e }) : o === 2 ? /* @__PURE__ */ d(eo, { ...l, children: /* @__PURE__ */ d("span", { children: e }) }) : o === "icon" ? /* @__PURE__ */ d(so, { ...{ size: n, color: a, highlightColor: r }, ...l, children: e }) : /* @__PURE__ */ d(ro, { ...l, children: /* @__PURE__ */ d("span", { children: e }) });
+  size: a = 50,
+  color: r = n.colors.darkGreen,
+  highlightColor: e = n.colors.dandelion,
+  children: i,
+  ...s
+}) => o === "bibi" ? /* @__PURE__ */ l(z, { ...s, children: i }) : o === "bibiOutlined" ? /* @__PURE__ */ l(so, { ...s, children: i }) : o === "bibiInverse" ? /* @__PURE__ */ l(lo, { ...s, children: i }) : o === "unstyled" ? /* @__PURE__ */ l(co, { ...s, children: i }) : o === 2 ? /* @__PURE__ */ l(io, { ...s, children: /* @__PURE__ */ l("span", { children: i }) }) : o === "icon" ? /* @__PURE__ */ l(po, { ...{ size: a, color: r, highlightColor: e }, ...s, children: i }) : /* @__PURE__ */ l(eo, { ...s, children: /* @__PURE__ */ l("span", { children: i }) });
 export {
-  fo as Button,
-  fo as default
+  So as Button,
+  So as default
 };

package/package.json

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

package/theme.d.ts

@@ -1,4 +1,6 @@
 export interface ThemeColors {
+    bibiBlue: string;
+    bibiBlueHover: string;
     black: string;
     blue: string;
     burgundy: string;
@@ -40,11 +42,11 @@ export interface ThemeColors {
 }
 export interface ThemeBoxShadows extends Partial<ThemeColors> {
     black63?: string;
-    maroonThick?: string;
     darkGreenThick?: string;
     gray63?: string;
     greenThick?: string;
     indigoThick?: string;
+    maroonThick?: string;
 }
 export interface ThemeConstants {
     appHeaderHeight: number;
@@ -62,22 +64,22 @@ export interface Theme {
     boxShadows: ThemeBoxShadows;
     colors: ThemeColors;
     constants: ThemeConstants;
-    screenSizes: ThemeScreenSizes;
     fonts: ThemeFonts;
+    screenSizes: ThemeScreenSizes;
 }
 export interface TemplateThemeProps {
     backgroundPrimary: string;
     backgroundSecondary: string;
     backgroundTertiary: string;
     borderPrimary: string;
-    iconPrimary: string;
     highlightPrimary: string;
     highlightSecondary: string;
     highlightTertiary: string;
+    iconPrimary: string;
+    scrollColor: string;
     shadowPrimary: string;
     shadowSecondary: string;
     shadowTertiary: string;
-    scrollColor: string;
 }
 declare const theme: Theme;
 export default theme;

package/theme.js

@@ -4,6 +4,8 @@ const a = {
   },
   boxShadows: {},
   colors: {
+    bibiBlue: "#009dde",
+    bibiBlueHover: "#0088c0",
     black: "black",
     blue: "#1976d2",
     burgundy: "#920920",
@@ -68,8 +70,8 @@ a.boxShadows = {
       `0 0 2px 1px ${a.colors[e]}`
     ])
   ),
-  gray63: "0px 0px 2px 1px rgba(100, 100, 100, 0.63)",
-  black63: "0px 0px 2px 1px rgba(0, 0, 0, 0.63)"
+  black63: "0px 0px 2px 1px rgba(0, 0, 0, 0.63)",
+  gray63: "0px 0px 2px 1px rgba(100, 100, 100, 0.63)"
 };
 export {
   a as default