jcicl 0.0.53 → 0.0.55

package/base/Flex/Flex.d.ts

@@ -1,5 +1,5 @@
 import { default as React, CSSProperties } from 'react';
-type AlignItems = 'start' | 'center' | 'stretch' | 'end';
+type AlignItems = 'flex-start' | 'center' | 'stretch' | 'flex-end';
 type JustifyContent = 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
 export type FlexProps = {
     children: React.ReactNode;
@@ -13,6 +13,7 @@ export type FlexProps = {
     padding?: string;
     gap?: string;
     styles?: CSSProperties;
+    id?: string;
 };
 declare const Flex: React.FC<FlexProps>;
 export default Flex;

package/base/Icon/Icon.js

@@ -1,23 +1,26 @@
 import { jsx as i } from "react/jsx-runtime";
 import { B as c } from "../../.chunks/ButtonBase.js";
-import a from "../../theme.js";
-import { n as t, i as p } from "../../.chunks/emotion-styled.browser.esm.js";
-const d = t("div", {
+import t from "../../theme.js";
+import { n as d, i as p } from "../../.chunks/emotion-styled.browser.esm.js";
+const a = d("div", {
   shouldForwardProp: (r) => p(r)
 })(
-  ({ iconColor: r = a.colors.darkGreen, backgroundColor: n = a.colors.mint, size: o = 40 }) => ({
+  ({ iconColor: r = t.colors.darkGreen, backgroundColor: n = t.colors.mint, size: e = 40 }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     svg: {
       border: `1px solid ${r}`,
       backgroundColor: n,
       borderRadius: "50%",
       padding: "8px",
       fill: r,
-      width: `${o - 18}px`,
-      height: `${o - 18}px`,
+      width: `${e - 18}px`,
+      height: `${e - 18}px`,
       pointerEvents: "none"
     }
   })
-), m = t(c)({
+), m = d(c)({
   backgroundColor: "transparent",
   borderRadius: "50%",
   span: {
@@ -25,18 +28,18 @@ const d = t("div", {
   },
   "&:hover, :focus": {
     span: {
-      backgroundColor: a.colors.grayO44
+      backgroundColor: t.colors.grayO44
     }
   }
 }), x = ({
   icon: r,
   iconColor: n,
-  backgroundColor: o,
+  backgroundColor: e,
   size: l,
-  ...e
+  ...o
 }) => {
-  const s = { iconColor: n, backgroundColor: o, size: l };
-  return e != null && e.onClick ? /* @__PURE__ */ i(m, { ...e, children: /* @__PURE__ */ i(d, { ...s, children: r }) }) : /* @__PURE__ */ i(d, { ...s, children: r });
+  const s = { iconColor: n, backgroundColor: e, size: l };
+  return o != null && o.onClick ? /* @__PURE__ */ i(m, { ...o, children: /* @__PURE__ */ i(a, { ...s, children: r }) }) : /* @__PURE__ */ i(a, { ...s, children: r });
 };
 export {
   x as default

package/composite/InfoCard/InfoCard.js

@@ -4,12 +4,12 @@ import { c as i } from "../../.chunks/emotion-react.browser.esm.js";
 import l from "../../theme.js";
 import { LabeledValue as f } from "../../base/LabeledValue/LabeledValue.js";
 import h from "../../base/Flex/Flex.js";
-const g = d("div")(({ padding: r, shadow: o }) => ({
+const x = d("div")(({ padding: r, shadow: o }) => ({
   ...i`
     h3 {
       margin: 0;
       width: 100%;
-      font-size: 24px;
+      font-size: 32px;
     }
     font-family: 'Roboto', sans-serif;
     padding: ${r};
@@ -19,7 +19,7 @@ const g = d("div")(({ padding: r, shadow: o }) => ({
     border-radius: 5px;
     background-color: ${l.colors.white};
   `
-})), x = d("div")(({ spacing: r, columns: o }) => ({
+})), g = d("div")(({ spacing: r, columns: o }) => ({
   ...i`
     margin-top: calc(${r} * 0.75);
     grid-row-gap: ${r};
@@ -32,15 +32,15 @@ const g = d("div")(({ padding: r, shadow: o }) => ({
   title: o,
   items: e,
   padding: m = "1rem 2rem",
-  shadow: c = l.boxShadow.darkGreen,
-  spacing: s = "2rem",
+  shadow: s = l.boxShadow.darkGreen,
+  spacing: c = "2rem",
   columns: p = 3
-}) => /* @__PURE__ */ t(g, { ...{ padding: m, shadow: c }, children: [
-  /* @__PURE__ */ t(h, { width: "100%", gap: "1rem", alignItems: "center", children: [
+}) => /* @__PURE__ */ t(x, { ...{ padding: m, shadow: s }, children: [
+  /* @__PURE__ */ t(h, { width: "100%", gap: "1rem", alignItems: "flex-end", children: [
     r && r,
     /* @__PURE__ */ a("h3", { children: o })
   ] }),
-  /* @__PURE__ */ a(x, { ...{ spacing: s, columns: p }, children: e == null ? void 0 : e.map((n) => /* @__PURE__ */ a(f, { ...n }, n.label)) })
+  /* @__PURE__ */ a(g, { ...{ spacing: c, columns: p }, children: e == null ? void 0 : e.map((n) => /* @__PURE__ */ a(f, { ...n }, n.label)) })
 ] });
 export {
   P as InfoCard,

package/composite/WithLabel/WithLabel.d.ts

@@ -2,6 +2,7 @@ import { FlexProps } from '../../../../../../../../../src/components/base/Flex/F
 export interface WithLabelProps extends Omit<FlexProps, 'children'> {
     label: string;
     fontSize?: string;
+    gap?: string;
     component: JSX.Element;
 }
 declare const WithLabel: React.FC<WithLabelProps>;

package/package.json

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