jcicl 0.0.85 → 0.0.87

package/base/Flex/Flex.d.ts

@@ -1,10 +1,8 @@
 import { default as React, CSSProperties } from 'react';
-type AlignItems = 'flex-start' | 'center' | 'stretch' | 'flex-end';
-type JustifyContent = 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-export type FlexProps = {
+export interface FlexProps {
     children: React.ReactNode;
-    alignItems?: AlignItems;
-    justifyContent?: JustifyContent;
+    alignItems?: 'flex-start' | 'center' | 'stretch' | 'flex-end';
+    justifyContent?: 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
     placeContent?: string;
     column?: boolean;
     width?: string;
@@ -12,8 +10,9 @@ export type FlexProps = {
     wrap?: boolean;
     padding?: string;
     gap?: string;
+    /** Format: `{ reactCssProperty: value, reactCssProperty: value }` A React CSS property is simply any css property converted to camelCase */
     styles?: CSSProperties;
     id?: string;
-};
-declare const Flex: React.FC<FlexProps>;
+}
+export declare const Flex: React.FC<FlexProps>;
 export default Flex;

package/base/Flex/Flex.js

@@ -19,5 +19,6 @@ const w = p("div", {
   })
 ), u = ({ children: o, ...r }) => /* @__PURE__ */ d(w, { ...r, children: o });
 export {
+  u as Flex,
   u as default
 };

package/base/Flex/index.js

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

package/base/ListButton/ListButton.js

@@ -1,22 +1,24 @@
-import { n as p } from "../../.chunks/emotion-styled.browser.esm.js";
-import e from "../../theme.js";
-import { B as s } from "../../.chunks/ButtonBase.js";
-const a = p(s)(({ padding: t = "1rem", active: o, activeStyles: r }) => ({
+import { n as s, i } from "../../.chunks/emotion-styled.browser.esm.js";
+import t from "../../theme.js";
+import { B as p } from "../../.chunks/ButtonBase.js";
+const l = s(p, {
+  shouldForwardProp: (o) => i(o) && typeof o == "string"
+})(({ padding: o = "1rem", active: e, activeStyles: r }) => ({
   display: "flex",
   width: "100%",
   height: "100%",
-  padding: t,
+  padding: o,
   fontSize: "inherit",
   justifyContent: "flex-start",
   transition: "201ms all ease-in-out",
-  ...o && {
-    boxShadow: `inset 0px -11px 6px -10px ${e.colors.darkGreen}, inset 0px 11px 6px -10px ${e.colors.darkGreen}`,
+  ...e && {
+    boxShadow: `inset 0px -11px 6px -10px ${t.colors.darkGreen}, inset 0px 11px 6px -10px ${t.colors.darkGreen}`,
     ...r
   },
   "&:hover, :focus": {
-    boxShadow: `inset 0px -11px 6px -10px ${e.colors.green}, inset 0px 11px 6px -10px ${e.colors.green}`
+    boxShadow: `inset 0px -11px 6px -10px ${t.colors.green}, inset 0px 11px 6px -10px ${t.colors.green}`
   }
 }));
 export {
-  a as default
+  l as default
 };

package/base/ScrollContainer/ScrollContainer.js

@@ -1382,10 +1382,6 @@ const Bs = () => {
     overflow: {
       x: s === "all" || s === "horizontal" ? "scroll" : "hidden",
       y: s === "all" || s === "vertical" ? "scroll" : "hidden"
-    },
-    scrollbars: {
-      autoHide: "leave",
-      autoHideDelay: 29
     }
   } };
   return /* @__PURE__ */ _o(Zs, { defer: !0, ...a, children: t });

package/base/index.js

@@ -2,9 +2,9 @@ import { default as t } from "./Avatar/Avatar.js";
 import { AvatarWithImage as a } from "./AvatarWithImage/AvatarWithImage.js";
 import { Button as m } from "./Button/Button.js";
 import { Divider as x } from "./Divider/Divider.js";
-import { default as d } from "./Flex/Flex.js";
-import { Grid as s } from "./Grid/Grid.js";
-import { default as n } from "./Icon/Icon.js";
+import { Flex as d } from "./Flex/Flex.js";
+import { Grid as i } from "./Grid/Grid.js";
+import { default as s } from "./Icon/Icon.js";
 import { I as v } from "../.chunks/Input.js";
 import { LabeledValue as c } from "./LabeledValue/LabeledValue.js";
 import { default as A } from "./ListButton/ListButton.js";
@@ -16,8 +16,8 @@ export {
   m as Button,
   x as Divider,
   d as Flex,
-  s as Grid,
-  n as Icon,
+  i as Grid,
+  s as Icon,
   v as Input,
   c as LabeledValue,
   A as ListButton,

package/composite/Accordion/Accordion.d.ts

@@ -1,4 +1,6 @@
 export interface AccordionProps {
+    /** The element placed before the title. This can be any valid React Node */
+    decorativeElement?: React.ReactNode;
     /** The title of the accordion. H3 element */
     title: React.ReactNode;
     /** The content of the accordion. */

package/composite/Accordion/Accordion.js

@@ -1,15 +1,15 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { useState as w } from "react";
-import { n } from "../../.chunks/emotion-styled.browser.esm.js";
-import { c as s } from "../../.chunks/emotion-react.browser.esm.js";
-import a from "../../theme.js";
-import x from "../../base/Flex/Flex.js";
-import { c as u } from "../../.chunks/createSvgIcon.js";
-import { B as g } from "../../.chunks/ButtonBase.js";
-const b = u(/* @__PURE__ */ r("path", {
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { useState as x } from "react";
+import { n, i as u } from "../../.chunks/emotion-styled.browser.esm.js";
+import { c as d } from "../../.chunks/emotion-react.browser.esm.js";
+import c from "../../theme.js";
+import { Flex as a } from "../../base/Flex/Flex.js";
+import { c as y } from "../../.chunks/createSvgIcon.js";
+import { B as b } from "../../.chunks/ButtonBase.js";
+const $ = y(/* @__PURE__ */ r("path", {
   d: "M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z"
-}), "ArrowForwardIos"), y = n("div")(({ padding: o, shadow: t, width: e }) => ({
-  ...s`
+}), "ArrowForwardIos"), v = n("div")(({ padding: o, shadow: t, width: e }) => ({
+  ...d`
     h3 {
       margin: 0;
       width: 100%;
@@ -21,11 +21,11 @@ const b = u(/* @__PURE__ */ r("path", {
     flex-direction: column;
     box-shadow: ${t};
     border-radius: 5px;
-    background-color: ${a.colors.white};
+    background-color: ${c.colors.white};
     width: ${e};
   `
-})), $ = n("div")(({ expanded: o }) => ({
-  ...s`
+})), A = n("div")(({ expanded: o }) => ({
+  ...d`
     margin-top: ${o ? "1rem" : 0};
     transition: 313ms all ease-in-out;
     display: grid;
@@ -34,8 +34,10 @@ const b = u(/* @__PURE__ */ r("path", {
       overflow: hidden;
     }
   `
-})), v = n(g)(({ expanded: o }) => ({
-  ...s`
+})), B = n(b, {
+  shouldForwardProp: (o) => u(o) && typeof o == "string"
+})(({ expanded: o }) => ({
+  ...d`
     transition: 201ms all linear;
     transform: ${o ? "rotate(90deg)" : "rotate(0deg)"};
     border-radius: 50%;
@@ -43,23 +45,27 @@ const b = u(/* @__PURE__ */ r("path", {
     height: 24px;
     aspect-ratio: 1;
   `
-})), z = ({
-  title: o,
-  children: t,
-  padding: e = "1rem 2rem",
-  shadow: c = a.boxShadow.darkGreen,
-  width: l = "360px"
+})), G = ({
+  decorativeElement: o,
+  title: t,
+  children: e,
+  padding: l = "1rem 2rem",
+  shadow: m = c.boxShadow.darkGreen,
+  width: p = "360px"
 }) => {
-  const [i, m] = w(!1), p = { padding: e, shadow: c, width: l }, f = { expanded: i }, h = { expanded: i };
-  return /* @__PURE__ */ d(y, { ...p, children: [
-    /* @__PURE__ */ d(x, { alignItems: "center", justifyContent: "space-between", children: [
-      /* @__PURE__ */ r("h3", { children: o }),
-      /* @__PURE__ */ r(v, { ...f, onClick: () => m(!i), children: /* @__PURE__ */ r(b, {}) })
+  const [i, f] = x(!1), h = { padding: l, shadow: m, width: p }, w = { expanded: i }, g = { expanded: i };
+  return /* @__PURE__ */ s(v, { ...h, children: [
+    /* @__PURE__ */ s(a, { alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ s(a, { width: "100%", gap: "1rem", alignItems: "center", children: [
+        o && o,
+        /* @__PURE__ */ r("h3", { children: t })
+      ] }),
+      /* @__PURE__ */ r(B, { ...w, onClick: () => f(!i), children: /* @__PURE__ */ r($, {}) })
     ] }),
-    /* @__PURE__ */ r($, { ...h, children: /* @__PURE__ */ r("div", { children: t }) })
+    /* @__PURE__ */ r(A, { ...g, children: /* @__PURE__ */ r("div", { children: e }) })
   ] });
 };
 export {
-  z as Accordion,
-  z as default
+  G as Accordion,
+  G as default
 };

package/composite/ErrorBoundary/ErrorBoundary.js

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import m from "react";
 import { n as a } from "../../.chunks/emotion-styled.browser.esm.js";
-import i from "../../base/Flex/Flex.js";
+import { Flex as i } from "../../base/Flex/Flex.js";
 import s from "../../theme.js";
 const h = a(i)`
   width: 100%;

package/composite/InfoCard/InfoCard.js

@@ -3,7 +3,7 @@ import { n as d } from "../../.chunks/emotion-styled.browser.esm.js";
 import { c as i } from "../../.chunks/emotion-react.browser.esm.js";
 import l from "../../theme.js";
 import { LabeledValue as h } from "../../base/LabeledValue/LabeledValue.js";
-import g from "../../base/Flex/Flex.js";
+import { Flex as g } from "../../base/Flex/Flex.js";
 const x = d("div")(({ padding: r, shadow: o, styles: e }) => ({
   ...i`
     h3 {

package/composite/WithLabel/WithLabel.js

@@ -1,5 +1,5 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import s from "../../base/Flex/Flex.js";
+import { Flex as s } from "../../base/Flex/Flex.js";
 import { n as m } from "../../.chunks/emotion-styled.browser.esm.js";
 const a = m("label")`
   text-align: left;

package/index.js

@@ -4,7 +4,7 @@ import { default as p } from "./base/Avatar/Avatar.js";
 import { AvatarWithImage as x } from "./base/AvatarWithImage/AvatarWithImage.js";
 import { Button as l } from "./base/Button/Button.js";
 import { Divider as n } from "./base/Divider/Divider.js";
-import { default as i } from "./base/Flex/Flex.js";
+import { Flex as i } from "./base/Flex/Flex.js";
 import { Grid as I } from "./base/Grid/Grid.js";
 import { default as A } from "./base/Icon/Icon.js";
 import { I as g } from "./.chunks/Input.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jcicl",
   "private": false,
-  "version": "0.0.85",
+  "version": "0.0.87",
   "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/supercomposite/EditableInfoCard/EditableInfoCard.js

@@ -8,7 +8,7 @@ import { LabeledValue as Q } from "../../base/LabeledValue/LabeledValue.js";
 import { LabeledInput as X } from "../../composite/LabeledInput/LabeledInput.js";
 import L from "../../base/Loading/Loading.js";
 import P from "../../composite/WithLoading/WithLoading.js";
-import f from "../../base/Flex/Flex.js";
+import { Flex as f } from "../../base/Flex/Flex.js";
 import { Tooltip as x } from "../../composite/Tooltip/Tooltip.js";
 import { T as Z } from "../../.chunks/Input.js";
 import { B as _ } from "../../.chunks/ButtonBase.js";