jcicl 1.0.7 → 1.0.11

package/CircularIconButton/CircularIconButton.js

@@ -26,18 +26,18 @@ const u = i("div")(({ backgroundColor: t, size: r, color: o }) => ({
   color: t = l.colors.white,
   backgroundColor: r,
   size: o = 20,
-  onClick: s,
-  icon: n
+  onClick: n,
+  icon: s
 }) => {
   const c = m();
   return /* @__PURE__ */ e(
     u,
     {
       color: t,
-      backgroundColor: r || c.themeColor,
+      backgroundColor: r || c.themeIconBackgroundA,
       size: o * 1.2,
-      onClick: s,
-      children: /* @__PURE__ */ e(n, { size: o * 0.8 })
+      onClick: n,
+      children: /* @__PURE__ */ e(s, { size: o * 0.8 })
     }
   );
 };

package/EditableDetailItemWithIcon/EditableDetailItemWithIcon.d.ts

@@ -11,6 +11,8 @@ export interface EditableDetailItemWithIconProps {
     onSave?: () => void;
     onCancel?: () => void;
     passedTheme?: any;
+    formattedValue?: string;
+    copyOnClick?: boolean;
 }
 declare const EditableDetailItemWithIcon: React.FC<EditableDetailItemWithIconProps>;
 export default EditableDetailItemWithIcon;

package/EditableDetailItemWithIcon/EditableDetailItemWithIcon.js

@@ -1,29 +1,25 @@
-import { jsx as o, jsxs as c } from "react/jsx-runtime";
-import { useState as y } from "react";
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { useState as B } from "react";
 import { n as k } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as g } from "../.chunks/emotion-react.browser.esm.js";
-import r from "../theme.js";
-import { Flex as n } from "../Flex/Flex.js";
-import { Input as w } from "../Input/Input.js";
-import { DetailItemContainer as x } from "../DetailPageComponents/DetailPageComponents.js";
-import B from "../SquareIcon/SquareIcon.js";
-import m from "../SquareIconButton/SquareIconButton.js";
-import { useThemeColors as _ } from "../ThemeContext.js";
-import { c as s } from "../.chunks/createLucideIcon.js";
+import { c as I } from "../.chunks/emotion-react.browser.esm.js";
+import e from "../theme.js";
+import { Flex as c } from "../Flex/Flex.js";
+import { Input as y } from "../Input/Input.js";
+import { DetailItemContainer as D } from "../DetailPageComponents/DetailPageComponents.js";
+import z from "../SquareIcon/SquareIcon.js";
+import s from "../SquareIconButton/SquareIconButton.js";
+import { Button as j } from "../Button/Button.js";
+import { useThemeColors as G } from "../ThemeContext.js";
+import { c as L } from "../.chunks/createLucideIcon.js";
+import { X as S } from "../.chunks/x.js";
+import { C as W } from "../.chunks/check.js";
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const D = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], z = s("check", D);
-/**
- * @license lucide-react v0.525.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const j = [
+const q = [
   [
     "path",
     {
@@ -32,88 +28,88 @@ const j = [
     }
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
-], G = s("pencil", j);
-/**
- * @license lucide-react v0.525.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const L = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], N = s("x", L), S = k("p")(() => ({
-  ...g`
+], E = L("pencil", q), T = k("p")(() => ({
+  ...I`
     font-size: 0.875rem;
     font-weight: 500;
-    color: ${r.colors.charcoal} !important;
+    color: ${e.colors.charcoal} !important;
     margin: 0;
     margin-bottom: 0.25rem;
   `
-})), W = k("p")(() => ({
-  ...g`
+})), g = k("p")(() => ({
+  ...I`
     font-size: 1rem;
     word-wrap: break-word;
     margin: 0;
   `
-})), O = (i) => /* @__PURE__ */ o($, { ...i }), $ = ({
+})), Z = (i) => /* @__PURE__ */ o(_, { ...i }), _ = ({
   icon: i,
-  iconSize: I = 20,
+  iconSize: C = 20,
   onValueChange: p,
   onSave: d,
-  onCancel: h,
-  customEditForm: l,
-  editButtonMarginTop: f,
+  onCancel: f,
+  customEditForm: a,
+  editButtonMarginTop: h,
   label: b,
-  value: u
+  value: l,
+  formattedValue: w,
+  copyOnClick: u = !1
 }) => {
-  const [e, a] = y(!1), t = _();
-  return /* @__PURE__ */ o(x, { children: /* @__PURE__ */ c(n, { gap: "19px", children: [
+  const [r, m] = B(!1), t = G();
+  return /* @__PURE__ */ o(D, { children: /* @__PURE__ */ n(c, { gap: "19px", children: [
     /* @__PURE__ */ o(
-      B,
+      z,
       {
         icon: i,
-        iconSize: I,
+        iconSize: C,
         color: t.themeIconColorB,
         backgroundColor: t.themeIconBackgroundB
       }
     ),
-    /* @__PURE__ */ c(n, { justifyContent: "space-between", width: "100%", gap: "12px", children: [
-      /* @__PURE__ */ c(n, { column: !0, styles: { flexGrow: 1 }, children: [
-        /* @__PURE__ */ o(S, { children: b }),
-        !e && /* @__PURE__ */ o(W, { children: u }),
-        e && !l && /* @__PURE__ */ o(w, { defaultValue: u, onChange: (C) => p && p(C.target.value) }),
-        e && l && l
+    /* @__PURE__ */ n(c, { justifyContent: "space-between", width: "100%", gap: "12px", children: [
+      /* @__PURE__ */ n(c, { column: !0, styles: { flexGrow: 1 }, children: [
+        /* @__PURE__ */ o(T, { children: b }),
+        !r && !u && /* @__PURE__ */ o(g, { children: l }),
+        !r && u && /* @__PURE__ */ o(g, { children: /* @__PURE__ */ o(j, { variant: "copy", children: l }) }),
+        r && !a && /* @__PURE__ */ o(
+          y,
+          {
+            defaultValue: l,
+            value: w,
+            onChange: (x) => p && p(x.target.value)
+          }
+        ),
+        r && a && a
       ] }),
-      !e && /* @__PURE__ */ o(
-        m,
+      !r && /* @__PURE__ */ o(
+        s,
         {
           backgroundColor: t.themeIconBackgroundB,
           color: t.themeIconColorB,
-          icon: G,
-          onClick: () => a(!0)
+          icon: E,
+          onClick: () => m(!0)
         }
       ),
-      e && /* @__PURE__ */ c(n, { gap: "9px", styles: { marginTop: f || "0" }, children: [
+      r && /* @__PURE__ */ n(c, { gap: "9px", styles: { marginTop: h || "0" }, children: [
         /* @__PURE__ */ o(
-          m,
+          s,
           {
-            backgroundColor: r.colors.cherryBlossom,
-            color: r.colors.maroon,
-            icon: N,
+            backgroundColor: e.colors.cherryBlossom,
+            color: e.colors.maroon,
+            icon: S,
             onClick: () => {
-              a(!1), h && h();
+              m(!1), f && f();
             }
           }
         ),
         /* @__PURE__ */ o(
-          m,
+          s,
           {
-            icon: z,
-            backgroundColor: r.colors.whiteGreenA,
-            color: r.colors.darkGreen,
+            icon: W,
+            backgroundColor: e.colors.whiteGreenA,
+            color: e.colors.darkGreen,
             onClick: () => {
-              a(!1), d && d();
+              m(!1), d && d();
             }
           }
         )
@@ -122,5 +118,5 @@ const L = [
   ] }) });
 };
 export {
-  O as default
+  Z as default
 };

package/FormFields/FormFields.d.ts

@@ -6,7 +6,7 @@ export type FormField = {
     type: 'checkbox' | 'currency' | 'date' | 'dropdown' | 'email' | 'multiDropdown' | 'number' | 'phone' | 'radio' | 'text' | 'textarea' | 'url';
     options?: DropdownOption[];
     limit?: number;
-    defaultValue?: string | number | boolean;
+    defaultValue?: string | number;
 };
 export type FormFieldsProps = {
     title?: string;

package/FormFields/FormFields.js

@@ -1,43 +1,58 @@
-import { jsxs as j, Fragment as C, jsx as r } from "react/jsx-runtime";
-import { FormInput as D } from "../FormInput/FormInput.js";
-import { FormSectionTitle as S, FormFieldGrid as b, FormFieldCheckboxContainer as z } from "../FormComponents/FormComponents.js";
-import G from "../theme.js";
-import { u as I } from "../.chunks/useMediaQuery.js";
-const q = ({
-  title: i,
-  fields: d,
-  columns: s = I(`(max-width: ${G.screenSizes.tablet})`) ? 2 : 3,
-  columnsOverride: u,
-  gap: a = 21,
-  noLabel: F = !1,
-  checkboxContainer: m = !1,
-  formDefaults: t,
-  onChange: p
-}) => {
-  const n = () => d.map(({ key: o, label: c, type: e, limit: f, options: h, defaultValue: l, ...x }) => {
-    const w = t[o] ? t[o] : l || (e === "multiDropdown" ? [] : "");
-    return /* @__PURE__ */ r(
-      D,
+import { jsxs as g, Fragment as j, jsx as i } from "react/jsx-runtime";
+import { FormInput as w } from "../FormInput/FormInput.js";
+import { FormSectionTitle as C, FormFieldGrid as S, FormFieldCheckboxContainer as b } from "../FormComponents/FormComponents.js";
+import v from "../theme.js";
+import { formatPhoneNumber as z } from "../utils.js";
+import { u as G } from "../.chunks/useMediaQuery.js";
+const V = ({
+  title: p,
+  fields: s,
+  columns: f = G(`(max-width: ${v.screenSizes.tablet})`) ? 2 : 3,
+  columnsOverride: x,
+  gap: D = 21,
+  noLabel: h = !1,
+  checkboxContainer: F = !1,
+  formDefaults: n,
+  onChange: c
+}) => /* @__PURE__ */ g(j, { children: [
+  p && /* @__PURE__ */ i(C, { children: p }),
+  !F && /* @__PURE__ */ i(S, { columns: f, columnsOverride: x, gap: D, children: s.map(({ key: o, label: l, type: r, limit: u, options: e, defaultValue: m, ...d }) => {
+    const t = n[o] ? n[o] : m || (r === "multiDropdown" ? [] : "");
+    return /* @__PURE__ */ i(
+      w,
       {
-        onChange: (g) => p(o, g, e),
-        label: c,
-        type: e,
-        limit: f,
-        defaultValue: w,
-        noLabel: F,
-        options: h,
-        multiple: e === "multiDropdown",
-        ...x
+        onChange: (a) => c(o, a, r),
+        label: l,
+        type: r,
+        limit: u,
+        value: r === "phone" ? z(t)[0] : t,
+        noLabel: h,
+        options: e,
+        multiple: r === "multiDropdown",
+        ...d
       },
       o
     );
-  });
-  return /* @__PURE__ */ j(C, { children: [
-    i && /* @__PURE__ */ r(S, { children: i }),
-    !m && /* @__PURE__ */ r(b, { columns: s, columnsOverride: u, gap: a, children: /* @__PURE__ */ r(n, {}) }),
-    m && /* @__PURE__ */ r(z, { children: /* @__PURE__ */ r(n, {}) })
-  ] });
-};
+  }) }),
+  F && /* @__PURE__ */ i(b, { children: s.map(({ key: o, label: l, type: r, limit: u, options: e, defaultValue: m, ...d }) => {
+    const t = n[o] ? n[o] : m || (r === "multiDropdown" ? [] : "");
+    return /* @__PURE__ */ i(
+      w,
+      {
+        onChange: (a) => c(o, a, r),
+        label: l,
+        type: r,
+        limit: u,
+        defaultValue: t,
+        noLabel: h,
+        options: e,
+        multiple: r === "multiDropdown",
+        ...d
+      },
+      o
+    );
+  }) })
+] });
 export {
-  q as default
+  V as default
 };

package/LabeledDropdown/LabeledDropdown.js

@@ -14,7 +14,7 @@ import { B as So } from "../.chunks/ButtonBase.js";
 import { c as wo } from "../.chunks/chainPropTypes.js";
 import { P as Wo } from "../.chunks/Popper.js";
 import { P as Ko } from "../.chunks/Paper.js";
-import { u as Zo } from "../.chunks/Portal.js";
+import { b as Zo } from "../.chunks/Portal.js";
 import { u as Po } from "../.chunks/useControlled.js";
 import { c as io, s as et, a as ot } from "../.chunks/TransitionGroupContext.js";
 import { i as tt } from "../.chunks/integerPropType.js";
@@ -2592,7 +2592,6 @@ const Et = ["colon", "borderFocusColor", "minWidth", "noLabel"], zt = Yo("div",
     }
 
     .MuiInputBase-root {
-      height: 18px;
       padding: 0 !important;
 
       ${a && No`
@@ -2621,9 +2620,9 @@ const Et = ["colon", "borderFocusColor", "minWidth", "noLabel"], zt = Yo("div",
       }
 
       .MuiButtonBase-root {
-        max-height: calc(100% - 0px);
-        padding: 0 2px;
-        margin: 0;
+        max-height: 20px;
+        padding: 1px 2px;
+        margin: 1px 2px 2px 2px;
       }
 
       .MuiChip-label {

package/Pill/Pill.d.ts

@@ -1,6 +1,7 @@
 export interface PillProps {
     backgroundColor?: string;
     textColor?: string;
+    type?: 'primary' | 'secondary';
 }
 export declare const Pill: React.FC<PillProps & {
     children: React.ReactNode;

package/Pill/Pill.js

@@ -1,23 +1,30 @@
-import { jsx as l } from "react/jsx-runtime";
-import { n as c } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as m } from "../.chunks/emotion-react.browser.esm.js";
-import o from "../theme.js";
-import { useThemeColors as i } from "../ThemeContext.js";
-const p = c("span")(
-  ({ backgroundColor: r = o.colors.whiteGreen, textColor: e = o.colors.darkGreen }) => ({
-    ...m`
-      font-family: ${o.fonts.roboto};
+import { jsx as s } from "react/jsx-runtime";
+import { n as a } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as i } from "../.chunks/emotion-react.browser.esm.js";
+import e from "../theme.js";
+import { useThemeColors as p } from "../ThemeContext.js";
+const l = a("span")(
+  ({ backgroundColor: r = e.colors.whiteGreen, textColor: o = e.colors.white }) => ({
+    ...i`
+      font-family: ${e.fonts.roboto};
       font-size: 13px;
       font-weight: 500;
-      color: ${e};
+      color: ${o};
       background-color: ${r};
       padding: 3px 13px;
       border-radius: 21px;
     `
   })
 ), x = (r) => {
-  const e = i(), { backgroundColor: t, textColor: s = o.colors.white, children: n } = r;
-  return /* @__PURE__ */ l(p, { backgroundColor: t || e.themeColor, textColor: s, children: n });
+  const o = p(), { backgroundColor: t, textColor: n, type: m = "primary", children: c } = r;
+  return m == "secondary" ? /* @__PURE__ */ s(
+    l,
+    {
+      backgroundColor: t || o.themeIconBackgroundB,
+      textColor: n || o.themeIconColorB,
+      children: c
+    }
+  ) : /* @__PURE__ */ s(l, { backgroundColor: t || o.themeIconBackgroundA, textColor: n, children: c });
 };
 export {
   x as Pill,