jcicl 0.0.116 → 0.0.118

package/.chunks/Input.js

@@ -6663,13 +6663,13 @@ const Dr = Yo(wo)({
     boxShadow: "0 0 0 0",
     "&:focus-visible": {
       borderColor: ye.colors.darkGreen,
-      boxShadow: ye.boxShadow.darkGreenThick
+      boxShadow: ye.boxShadows.darkGreenThick
     }
   },
   "&:hover, :focus-visible": {
     input: {
       borderColor: ye.colors.darkGreen,
-      boxShadow: ye.boxShadow.darkGreenThick
+      boxShadow: ye.boxShadows.darkGreenThick
     }
   },
   "&:focus-visible": {

package/Accordion/Accordion.js

@@ -50,7 +50,7 @@ const $ = y(/* @__PURE__ */ r("path", {
   title: t,
   children: e,
   padding: l = "1rem 2rem",
-  shadow: m = c.boxShadow.darkGreen,
+  shadow: m = c.boxShadows.darkGreen,
   width: p = "360px"
 }) => {
   const [i, f] = x(!1), h = { padding: l, shadow: m, width: p }, w = { expanded: i }, g = { expanded: i };

package/AppContainer/AppContainer.js

@@ -1668,7 +1668,7 @@ const Pt = Xe(/* @__PURE__ */ C("path", {
           ]
         }
       ),
-      R && /* @__PURE__ */ ue(
+      (R || p) && /* @__PURE__ */ ue(
         Rt,
         {
           anchor: "right",

package/Button/Button.js

@@ -465,11 +465,11 @@ const E = c(k)`
   font-weight: 400;
   padding: 0.75rem 2rem;
   font-size: 1rem;
-  box-shadow: ${s.boxShadow.gray63};
+  box-shadow: ${s.boxShadows.gray63};
   &:hover,
   :focus-visible {
     background-color: ${s.colors.darkGreen};
-    box-shadow: ${s.boxShadow.black63};
+    box-shadow: ${s.boxShadows.black63};
   }
   &:disabled {
     background-color: ${s.colors.darkGreen};

package/EditableInfoCard/EditableInfoCard.js

@@ -107,7 +107,7 @@ const eo = j(/* @__PURE__ */ o("path", {
   title: a,
   items: r = [],
   padding: u = "1rem 2rem",
-  shadow: c = d.boxShadow.darkGreen,
+  shadow: c = d.boxShadows.darkGreen,
   spacing: V = "2rem",
   titleSpacing: w = "1rem",
   canEditTitle: C = !0,

package/ImageWIthDetails/ImageWithDetails.d.ts

@@ -0,0 +1,13 @@
+export interface ImageWithDetailsProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    imageUrl: string;
+    imageAlt: string;
+    /** The total size of the component */
+    containerHeight?: string;
+    /** The size of the title header and details section */
+    detailsBarSize?: string;
+    detailsBarPadding?: string;
+}
+declare const ImageWithDetails: React.FC<ImageWithDetailsProps>;
+export default ImageWithDetails;

package/ImageWIthDetails/ImageWithDetails.js

@@ -0,0 +1,49 @@
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { n as r } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as n } from "../.chunks/emotion-react.browser.esm.js";
+import e from "../theme.js";
+const f = r("div")(({ height: o }) => ({
+  ...n`
+    display: flex;
+    flex-direction: column;
+    border-radius: 32px;
+    box-sizing: border-box;
+    height: ${o};
+    box-shadow: ${e.boxShadows.gray63};
+    background-color: ${e.colors.white};
+    width: min-content;
+  `
+})), a = r("div")(({ height: o, padding: t }) => ({
+  ...n`
+    font-family: ${e.fonts.roboto};
+    display: flex;
+    padding: ${t};
+    align-items: center;
+    justify-content: center;
+    height: ${o};
+    box-sizing: border-box;
+  `
+})), x = r("img")(({ heightOffset: o }) => ({
+  ...n`
+    max-height: calc(100% - 2 * ${o});
+    object-fit: contain;
+  `
+})), y = ({
+  title: o,
+  description: t,
+  imageUrl: d,
+  imageAlt: h,
+  detailsBarSize: s = "120px",
+  detailsBarPadding: l = "1rem",
+  containerHeight: m = "100%"
+}) => {
+  const c = { height: s, padding: l };
+  return /* @__PURE__ */ g(f, { height: m, children: [
+    /* @__PURE__ */ i(a, { ...c, children: o }),
+    /* @__PURE__ */ i(x, { heightOffset: s, src: d, alt: h }),
+    /* @__PURE__ */ i(a, { ...c, children: t })
+  ] });
+};
+export {
+  y as default
+};

package/ImageWIthDetails/index.d.ts

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

package/ImageWIthDetails/index.js

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

package/InfoCard/InfoCard.js

@@ -33,16 +33,16 @@ const x = d("div")(({ padding: r, shadow: o, styles: e }) => ({
   title: o,
   items: e,
   padding: m = "1rem 2rem",
-  shadow: c = l.boxShadow.darkGreen,
-  spacing: s = "2rem",
+  shadow: s = l.boxShadows.darkGreen,
+  spacing: c = "2rem",
   columns: p = 3,
   styles: f
-}) => /* @__PURE__ */ t(x, { ...{ padding: m, shadow: c, styles: f }, children: [
+}) => /* @__PURE__ */ t(x, { ...{ padding: m, shadow: s, styles: f }, children: [
   /* @__PURE__ */ t(g, { width: "100%", gap: "1rem", alignItems: "center", children: [
     r && r,
     /* @__PURE__ */ a("h3", { children: o })
   ] }),
-  /* @__PURE__ */ a(u, { ...{ spacing: s, columns: p }, children: e == null ? void 0 : e.map((n) => /* @__PURE__ */ a(h, { ...n }, n.label)) })
+  /* @__PURE__ */ a(u, { ...{ spacing: c, columns: p }, children: e == null ? void 0 : e.map((n) => /* @__PURE__ */ a(h, { ...n }, n.label)) })
 ] });
 export {
   j as InfoCard,

package/Nav/Nav.js

@@ -26,7 +26,7 @@ const w = c(k, {
       }
     },
     ...t && {
-      boxShadow: d.boxShadow.darkGreen,
+      boxShadow: d.boxShadows.darkGreen,
       backgroundColor: i
     }
   },

package/package.json

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

@@ -52,11 +52,15 @@ export interface ThemeScreenSizes {
     mobile: string;
     tablet: string;
 }
+export interface ThemeFonts {
+    roboto: string;
+}
 export interface Theme {
-    boxShadow: ThemeBoxShadows;
+    boxShadows: ThemeBoxShadows;
     colors: ThemeColors;
     constants: ThemeConstants;
     screenSizes: ThemeScreenSizes;
+    fonts: ThemeFonts;
 }
 declare const theme: Theme;
 export default theme;

package/theme.js

@@ -1,5 +1,8 @@
 const e = {
-  boxShadow: {},
+  fonts: {
+    roboto: "Roboto, sans-serif"
+  },
+  boxShadows: {},
   colors: {
     black: "black",
     blue: "#1976d2",
@@ -51,7 +54,7 @@ const e = {
     tablet: "963px"
   }
 };
-e.boxShadow = {
+e.boxShadows = {
   ...Object.fromEntries(
     Object.keys(e.colors).map((a) => [
       a,