jcicl 1.0.78 → 1.1.1

package/DefaultTemplate/DefaultTemplate.js

@@ -1,40 +1,41 @@
-import { jsx as r, jsxs as g, Fragment as O } from "react/jsx-runtime";
-import { useState as b, useMemo as A } from "react";
-import { n as y } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as C } from "../.chunks/emotion-react.browser.esm.js";
-import o, { defaultTheme as T } from "../theme.js";
-import { getHueFromHex as u, updateTheme as p } from "../themeUtils.js";
-import { ThemeContext as L } from "../ThemeContext.js";
-import j from "../AppContainer/AppContainer.js";
-import D from "../WithLoading/WithLoading.js";
-import { TopFade as W, BottomFade as B } from "../Overlays/Overlays.js";
-import { SiteBanner as H } from "../SiteBanner/SiteBanner.js";
-import { P as G } from "../.chunks/AppHeader.js";
-import { u as S } from "../.chunks/useMediaQuery.js";
-const Q = ["loading", "hasPagination", "loadingColor", "hasFade", "isTablet"], N = y("div", { shouldForwardProp: (t) => !Q.includes(t) })(({ loading: t, hasPagination: i, hasFade: m, loadingColor: l = o.colors.green }) => ({
-  ...C`
+import { jsx as i, jsxs as u, Fragment as L } from "react/jsx-runtime";
+import { useState as S, useMemo as y } from "react";
+import { n as T } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as k } from "../.chunks/emotion-react.browser.esm.js";
+import o, { defaultTheme as v } from "../theme.js";
+import { getHueFromHex as p, updateTheme as f } from "../themeUtils.js";
+import { camelToKebab as D } from "../camelToKebab.js";
+import { ThemeContext as W } from "../ThemeContext.js";
+import B from "../AppContainer/AppContainer.js";
+import H from "../WithLoading/WithLoading.js";
+import { TopFade as G, BottomFade as N } from "../Overlays/Overlays.js";
+import { SiteBanner as Q } from "../SiteBanner/SiteBanner.js";
+import { P as K } from "../.chunks/AppHeader.js";
+import { u as C } from "../.chunks/useMediaQuery.js";
+const V = ["loading", "hasPagination", "loadingColor", "hasFade", "isTablet"], q = T("div", { shouldForwardProp: (r) => !V.includes(r) })(({ loading: r, hasPagination: m, hasFade: h, loadingColor: n = o.colors.green }) => ({
+  ...k`
     color: ${o.colors.midnight};
-    height: ${t ? "100%" : "auto"};
+    height: ${r ? "100%" : "auto"};
     padding: 19px;
     padding-top: 36px;
     display: flex;
     flex-direction: column;
-    justify-content: ${t ? "center" : "start"};
+    justify-content: ${r ? "center" : "start"};
     align-items: center;
     width: 100%;
     min-height: 100%;
     box-sizing: border-box;
-    padding-bottom: ${m ? i ? "114px" : "72px" : "19px"};
+    padding-bottom: ${h ? m ? "114px" : "72px" : "19px"};
     > * div {
       box-sizing: border-box;
     }
 
     .MuiCircularProgress-svg {
-      color: ${l};
+      color: ${n};
     }
   `
-})), q = y("div")(() => ({
-  ...C`
+})), E = T("div")(() => ({
+  ...k`
     border-radius: 8px;
     padding: 0;
     display: flex;
@@ -47,48 +48,48 @@ const Q = ["loading", "hasPagination", "loadingColor", "hasFade", "isTablet"], N
     box-sizing: border-box;
   `
 }));
-function E(t, i) {
-  return t == "green" ? T : p(i);
+function J(r, m) {
+  return r == "green" ? v : f(m);
 }
-const ie = ({
-  children: t,
-  loading: i = !1,
-  hasPagination: m = !1,
-  fade: l = !0,
-  siteBannerText: n,
+const ne = ({
+  children: r,
+  loading: m = !1,
+  hasPagination: h = !1,
+  fade: n = !0,
+  siteBannerText: l,
   siteBannerBackgroundColor: w,
-  siteBannerTextColor: k,
-  userProfileMenuItems: I,
+  siteBannerTextColor: I,
+  userProfileMenuItems: M,
   ...s
 }) => {
-  const M = localStorage.getItem("theme") || "green", f = localStorage.getItem("hue") || u(o.themeOptions.green).toString(), x = S(`(max-width: ${o.screenSizes.mobile})`), P = S(`(max-width: ${o.screenSizes.tablet})`), [e, d] = b(
-    () => E(M, parseFloat(f))
-  ), [v, c] = b({ h: Math.max(parseFloat(f), 0) * 360, s: 0, v: 68, a: 1 }), F = [
+  const P = localStorage.getItem("theme") || "green", b = localStorage.getItem("hue") || p(o.themeOptions.green).toString(), x = C(`(max-width: ${o.screenSizes.mobile})`), F = C(`(max-width: ${o.screenSizes.tablet})`), [e, d] = S(
+    () => J(P, parseFloat(b))
+  ), [$, g] = S({ h: Math.max(parseFloat(b), 0) * 360, s: 0, v: 68, a: 1 }), O = [
     {
       label: "Default Theme",
       onClick: () => {
-        localStorage.setItem("theme", "green"), localStorage.setItem("hue", u(o.themeOptions.green).toString()), c((h) => ({ ...h, h: u(o.themeOptions.green) * 360 })), d(T);
+        localStorage.setItem("theme", "green"), localStorage.setItem("hue", p(o.themeOptions.green).toString()), g((a) => ({ ...a, h: p(o.themeOptions.green) * 360 })), d(v);
       }
     },
     {
       label: "Grayscale",
       onClick: () => {
-        localStorage.setItem("theme", "grayscale"), localStorage.setItem("hue", "-1"), c((h) => ({ ...h, h: 0 }));
-        const a = p(-1);
-        d(a);
+        localStorage.setItem("theme", "grayscale"), localStorage.setItem("hue", "-1"), g((a) => ({ ...a, h: 0 }));
+        const t = f(-1);
+        d(t);
       }
     },
     {
       label: "Hue",
-      hue: v.h,
-      onChange: (a) => {
-        localStorage.setItem("theme", "custom"), localStorage.setItem("hue", (a.h / 360).toString()), c((z) => ({ ...z, h: a.h }));
-        const h = p(a.h / 360);
-        d(h);
+      hue: $.h,
+      onChange: (t) => {
+        localStorage.setItem("theme", "custom"), localStorage.setItem("hue", (t.h / 360).toString()), g((c) => ({ ...c, h: t.h }));
+        const a = f(t.h / 360);
+        d(a);
       }
     },
-    ...I || []
-  ], $ = A(
+    ...M || []
+  ], j = y(
     () => ({
       backgroundPrimary: e.themeLight,
       backgroundSecondary: e.themeLightA,
@@ -102,7 +103,7 @@ const ie = ({
       scrollColor: e.themeShadowA,
       loadingColor: e.themeColor,
       iconColors: {
-        icon: /* @__PURE__ */ r(G, {}),
+        icon: /* @__PURE__ */ i(K, {}),
         iconColor: e.themeDark ?? o.colors.darkGreen,
         backgroundColor: e.themeMediumA ?? o.colors.mint
       },
@@ -111,47 +112,55 @@ const ie = ({
       highlightTertiary: e.highlightTertiary
     }),
     [e]
-  );
-  return /* @__PURE__ */ g(L.Provider, { value: e, children: [
-    n && /* @__PURE__ */ r(
-      H,
+  ), z = y(() => {
+    const t = {};
+    for (const [a, c] of Object.entries(e)) {
+      if (typeof c != "string") continue;
+      const A = D(a).replace(/^theme-?/, "");
+      t[`--jc-theme-${A}`] = c;
+    }
+    return t;
+  }, [e]);
+  return /* @__PURE__ */ i(W.Provider, { value: e, children: /* @__PURE__ */ u("div", { className: "contents", style: z, children: [
+    l && /* @__PURE__ */ i(
+      Q,
       {
-        text: n,
+        text: l,
         backgroundColor: w,
-        textColor: k
+        textColor: I
       }
     ),
-    /* @__PURE__ */ r(
-      j,
+    /* @__PURE__ */ i(
+      B,
       {
         ...s,
-        userProfileMenuItems: F,
-        themeColors: $ ?? (s == null ? void 0 : s.themeColors),
-        hasSiteBanner: !!n,
-        children: /* @__PURE__ */ r(
-          N,
+        userProfileMenuItems: O,
+        themeColors: j ?? (s == null ? void 0 : s.themeColors),
+        hasSiteBanner: !!l,
+        children: /* @__PURE__ */ i(
+          q,
           {
             className: "jcPageWrapper",
-            loading: i,
+            loading: m,
             loadingColor: e.themeColor,
-            hasPagination: m,
-            hasFade: l,
-            isTablet: P,
-            children: /* @__PURE__ */ g(D, { loading: i, size: x ? 114 : 201, children: [
-              l && /* @__PURE__ */ g(O, { children: [
-                /* @__PURE__ */ r(W, { color: e.themeLight, hasSiteBanner: !!n }),
-                /* @__PURE__ */ r(B, { hasPagination: m, isMobile: x, color: e.themeLight })
+            hasPagination: h,
+            hasFade: n,
+            isTablet: F,
+            children: /* @__PURE__ */ u(H, { loading: m, size: x ? 114 : 201, children: [
+              n && /* @__PURE__ */ u(L, { children: [
+                /* @__PURE__ */ i(G, { color: e.themeLight, hasSiteBanner: !!l }),
+                /* @__PURE__ */ i(N, { hasPagination: h, isMobile: x, color: e.themeLight })
               ] }),
-              /* @__PURE__ */ r(q, { children: t })
+              /* @__PURE__ */ i(E, { children: r })
             ] })
           }
         )
       }
     )
-  ] });
+  ] }) });
 };
 export {
-  q as MainContentContainer,
-  N as PageWrapper,
-  ie as default
+  E as MainContentContainer,
+  q as PageWrapper,
+  ne as default
 };

package/DetailPageComponents/DetailPageComponents.d.ts

@@ -3,6 +3,18 @@ import { PropsWithChildren } from 'react';
 interface WithCustomTheme {
     customTheme: CustomThemeProps;
 }
+interface DetailItemContainerProps {
+    /** Override the default grey hover shadow with a custom value (e.g. `customTheme.themeShadowC` for a theme-primary glow). */
+    hoverShadow?: string;
+    /** Disable the hover slide + shadow entirely. Useful for static header cards. */
+    disableHover?: boolean;
+    className?: string;
+    role?: string;
+    tabIndex?: number;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    style?: React.CSSProperties;
+}
 export declare const DetailHeader: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
@@ -15,11 +27,18 @@ export declare const DetailItemHeader: import('@emotion/styled').StyledComponent
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
-export declare const DetailItemContainer: React.FC<PropsWithChildren>;
+export declare const DetailItemContainer: React.FC<PropsWithChildren<DetailItemContainerProps>>;
+/**
+ * @deprecated Prefer the `DetailItemContainer` wrapper. This Emotion-based styled
+ * component is kept for backward compatibility with consumers that pass a `customTheme`
+ * directly. New code should use `<DetailItemContainer>`.
+ */
 export declare const DetailItemContainerStyles: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-} & WithCustomTheme, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & WithCustomTheme & {
+    hoverShadow?: string;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface DetailiconProps {
     iconColor?: string;
     backgroundColor?: string;

package/DetailPageComponents/DetailPageComponents.js

@@ -1,10 +1,10 @@
-import { jsx as a } from "react/jsx-runtime";
-import { n as i } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as r } from "../.chunks/emotion-react.browser.esm.js";
-import t from "../theme.js";
-import { useThemeColors as l } from "../ThemeContext.js";
-const f = i("div")(() => ({
-  ...r`
+import { jsxs as m, jsx as l } 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 o from "../theme.js";
+import { useThemeColors as d } from "../ThemeContext.js";
+const k = r("div")(() => ({
+  ...n`
     display: flex;
     flex-direction: column;
     padding: 27px 0;
@@ -14,7 +14,7 @@ const f = i("div")(() => ({
       font-size: 36px;
     }
 
-    border-bottom: 1px solid ${t.colors.gray2};
+    border-bottom: 1px solid ${o.colors.gray2};
 
     button {
       font-size: 1rem;
@@ -26,9 +26,9 @@ const f = i("div")(() => ({
       }
     }
   `
-})), u = i("p")(() => ({
-  ...r`
-    color: ${t.colors.gray};
+})), I = r("p")(() => ({
+  ...n`
+    color: ${o.colors.gray};
     line-height: 1;
     display: flex;
     align-items: flex-end;
@@ -39,8 +39,8 @@ const f = i("div")(() => ({
       width: 18px;
     }
   `
-})), b = i("h2")(() => ({
-  ...r`
+})), D = r("h2")(() => ({
+  ...n`
     font-size: 27px;
     font-weight: 600;
     text-align: left;
@@ -53,18 +53,54 @@ const f = i("div")(() => ({
       margin-right: 9px;
     }
   `
-})), y = ({ children: e }) => {
-  const o = l();
-  return /* @__PURE__ */ a(p, { customTheme: o, children: e });
-}, p = i("div", {
-  shouldForwardProp: (e) => !["customTheme"].includes(e)
-})(({ customTheme: e }) => ({
-  ...r`
-    font-family: ${t.fonts.roboto};
+})), f = "relative overflow-hidden flex flex-col gap-[13px] bg-jc-very-light-gray rounded-md p-[21px] mb-[15px] transition-all duration-[313ms] ease-out", u = "hover:translate-x-[5px] hover:shadow-[var(--detail-hover-shadow)]", A = ({
+  children: e,
+  hoverShadow: t,
+  disableHover: i = !1,
+  className: a = "",
+  style: p,
+  ...c
+}) => {
+  const s = d(), g = `linear-gradient(90deg, ${o.colors.gold}, ${s.themeIconBackgroundA})`, x = `linear-gradient(180deg, ${o.colors.gold}, ${s.themeIconBackgroundA})`, h = {
+    ...p ?? {},
+    "--detail-hover-shadow": t ?? "0 5px 15px rgba(0, 0, 0, 0.1)"
+  };
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ...c,
+      className: [f, i ? "" : u, a].join(" "),
+      style: h,
+      children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            "aria-hidden": !0,
+            className: "absolute top-0 left-0 w-full h-[3px] pointer-events-none",
+            style: { background: g }
+          }
+        ),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            "aria-hidden": !0,
+            className: "absolute top-0 left-0 w-[3px] h-full pointer-events-none",
+            style: { background: x }
+          }
+        ),
+        e
+      ]
+    }
+  );
+}, j = r("div", {
+  shouldForwardProp: (e) => !["customTheme", "hoverShadow"].includes(e)
+})(({ customTheme: e, hoverShadow: t }) => ({
+  ...n`
+    font-family: ${o.fonts.roboto};
     display: flex;
     flex-direction: column;
     gap: 13px;
-    background: ${t.colors.veryLightGray};
+    background: ${o.colors.veryLightGray};
     border-radius: 6px;
     padding: 21px;
     margin-bottom: 15px;
@@ -73,7 +109,7 @@ const f = i("div")(() => ({
     overflow: hidden;
 
     p {
-      color: ${t.colors.gray};
+      color: ${o.colors.gray};
       font-size: 18px;
       line-height: 1;
       display: flex;
@@ -87,17 +123,17 @@ const f = i("div")(() => ({
 
     &:hover {
       transform: translateX(5px);
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+      box-shadow: ${t ?? "0 5px 15px rgba(0, 0, 0, 0.1)"};
     }
 
     &::before {
       content: '';
       position: absolute;
-      top: 1px;
+      top: 0;
       left: 0;
       width: 100%;
-      height: 1px;
-      background: linear-gradient(90deg, ${t.colors.gold}, ${e.themeIconBackgroundA});
+      height: 3px;
+      background: linear-gradient(90deg, ${o.colors.gold}, ${e.themeIconBackgroundA});
     }
 
     &::after {
@@ -107,22 +143,22 @@ const f = i("div")(() => ({
       left: 0;
       width: 3px;
       height: 100%;
-      background: linear-gradient(180deg, ${t.colors.gold}, ${e.themeIconBackgroundA});
+      background: linear-gradient(180deg, ${o.colors.gold}, ${e.themeIconBackgroundA});
     }
   `
-})), w = ({
+})), B = ({
   backgroundColor: e,
-  iconColor: o,
-  children: n
+  iconColor: t,
+  children: i
 }) => {
-  const s = l();
-  return /* @__PURE__ */ a(d, { backgroundColor: e, iconColor: o, customTheme: s, children: n });
-}, d = i("div")(
-  ({ iconColor: e = t.colors.white, backgroundColor: o, customTheme: n }) => ({
-    ...r`
+  const a = d();
+  return /* @__PURE__ */ l(b, { backgroundColor: e, iconColor: t, customTheme: a, children: i });
+}, b = r("div")(
+  ({ iconColor: e = o.colors.white, backgroundColor: t, customTheme: i }) => ({
+    ...n`
       width: 72px;
       height: 72px;
-      background-color: ${o || n.themeDark};
+      background-color: ${t || i.themeDark};
       color: ${e};
       border-radius: 36px;
       display: flex;
@@ -133,11 +169,11 @@ const f = i("div")(() => ({
   })
 );
 export {
-  f as DetailHeader,
-  w as DetailHeaderIcon,
-  d as DetailHeaderIconStyles,
-  y as DetailItemContainer,
-  p as DetailItemContainerStyles,
-  b as DetailItemHeader,
-  u as DetailSubtext
+  k as DetailHeader,
+  B as DetailHeaderIcon,
+  b as DetailHeaderIconStyles,
+  A as DetailItemContainer,
+  j as DetailItemContainerStyles,
+  D as DetailItemHeader,
+  I as DetailSubtext
 };

package/ExpandableSection/ExpandableSection.d.ts

@@ -0,0 +1,19 @@
+import { default as React, PropsWithChildren } from 'react';
+export interface ExpandableSectionProps {
+    /** When true, the section animates from 0fr to 1fr (collapsed to expanded). */
+    expanded: boolean;
+    /** Optional top margin when expanded. Defaults to '0.25rem'. */
+    expandedMarginTop?: string;
+    /** Duration of the expand/collapse transition. Defaults to '300ms'. */
+    duration?: string;
+}
+/**
+ * Smooth height-animated expand/collapse using the grid-template-rows 0fr ↔ 1fr
+ * trick. Renders children inside an overflow-hidden wrapper so they're clipped
+ * during collapse without an explicit max-height calculation.
+ *
+ * Used by ClientMatchCard, IntakeMatchHeader, and similar cards that toggle
+ * expanded body content via a chevron.
+ */
+export declare const ExpandableSection: React.FC<PropsWithChildren<ExpandableSectionProps>>;
+export default ExpandableSection;

package/ExpandableSection/ExpandableSection.js

@@ -0,0 +1,23 @@
+import { jsx as s } from "react/jsx-runtime";
+const r = ({
+  expanded: e,
+  expandedMarginTop: t = "0.25rem",
+  duration: o = "300ms",
+  children: a
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: "grid",
+    style: {
+      gridTemplateRows: e ? "1fr" : "0fr",
+      opacity: e ? 1 : 0,
+      marginTop: e ? t : 0,
+      transition: `grid-template-rows ${o} ease-out, opacity ${o} ease-out, margin-top ${o} ease-out`
+    },
+    children: /* @__PURE__ */ s("div", { className: "overflow-hidden", children: a })
+  }
+);
+export {
+  r as ExpandableSection,
+  r as default
+};

package/ExpandableSection/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './ExpandableSection';
+export { ExpandableSection } from './ExpandableSection';
+export type { ExpandableSectionProps } from './ExpandableSection';

package/ExpandableSection/index.js

@@ -0,0 +1,5 @@
+import { ExpandableSection as n, ExpandableSection as o } from "./ExpandableSection.js";
+export {
+  n as ExpandableSection,
+  o as default
+};

package/FormFields/FormFields.js

@@ -22,15 +22,21 @@ import "../InfoCard/InfoCard.js";
 import "../LabeledInput/LabeledInput.js";
 import "../List/List.js";
 import "../LogoLoop/LogoLoop.js";
+import "../Pagination/Pagination.js";
 import "../SiteBanner/SiteBanner.js";
 import "../WithLabel/WithLabel.js";
 import "../WithLoading/WithLoading.js";
 import "../RecordCard/RecordCard.js";
+import "../theme.js";
+import "../ThemeContext.js";
+import "../DetailPageComponents/DetailPageComponents.js";
+import "../Toast/Toast.js";
 import "../.chunks/AppHeader.js";
 import "../EditableInfoCard/EditableInfoCard.js";
 import "../Nav/Nav.js";
 import "../AppContainer/AppContainer.js";
-const eo = ({
+import "../DefaultTemplate/DefaultTemplate.js";
+const Fo = ({
   title: a,
   fields: h,
   columns: f,
@@ -39,20 +45,20 @@ const eo = ({
   noLabel: x = !1,
   checkboxContainer: F = !1,
   compact: v = !1,
-  formDefaults: n,
+  formDefaults: l,
   onChange: d
 }) => {
   const D = G();
   return /* @__PURE__ */ b(T, { children: [
     a && /* @__PURE__ */ m(g, { children: a }),
-    !F && /* @__PURE__ */ m(j, { columns: f ?? (D ? 2 : 3), columnsOverride: w, gap: C, children: h.map(({ key: r, label: p, type: o, limit: c, options: e, defaultValue: t, ...u }) => {
-      const i = n[r] !== void 0 ? n[r] : t !== void 0 ? t : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
+    !F && /* @__PURE__ */ m(j, { columns: f ?? (D ? 2 : 3), columnsOverride: w, gap: C, children: h.map(({ key: r, label: n, type: o, limit: c, options: e, defaultValue: t, ...u }) => {
+      const i = l[r] !== void 0 ? l[r] : t !== void 0 ? t : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
       return v ? /* @__PURE__ */ b(V, { column: !0, gap: "21px", children: [
-        /* @__PURE__ */ m(I, { children: p }),
+        /* @__PURE__ */ m(I, { children: n }),
         /* @__PURE__ */ m(
           s,
           {
-            onChange: (l) => d(r, l, o),
+            onChange: (p) => d(r, p, o),
             type: o,
             limit: c,
             ...o === "checkbox" ? { checked: !!i } : { value: i },
@@ -65,8 +71,8 @@ const eo = ({
       ] }, r) : /* @__PURE__ */ m(
         s,
         {
-          onChange: (l) => d(r, l, o),
-          label: p,
+          onChange: (p) => d(r, p, o),
+          label: n,
           type: o,
           limit: c,
           ...o === "checkbox" ? { checked: !!i } : { value: i },
@@ -78,13 +84,13 @@ const eo = ({
         r
       );
     }) }),
-    F && /* @__PURE__ */ m(L, { children: h.map(({ key: r, label: p, type: o, limit: c, options: e, defaultValue: t, ...u }) => {
-      const i = n[r] !== void 0 ? n[r] : t !== void 0 ? t : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
+    F && /* @__PURE__ */ m(L, { children: h.map(({ key: r, label: n, type: o, limit: c, options: e, defaultValue: t, ...u }) => {
+      const i = l[r] !== void 0 ? l[r] : t !== void 0 ? t : o === "multiDropdown" ? [] : o === "checkbox" ? !1 : "";
       return /* @__PURE__ */ m(
         s,
         {
-          onChange: (l) => d(r, l, o),
-          label: p,
+          onChange: (p) => d(r, p, o),
+          label: n,
           type: o,
           limit: c,
           ...o === "checkbox" ? { checked: !!i } : { defaultValue: i },
@@ -99,5 +105,5 @@ const eo = ({
   ] });
 };
 export {
-  eo as default
+  Fo as default
 };

package/Pill/Pill.d.ts

@@ -3,6 +3,19 @@ export interface PillProps {
     textColor?: string;
     type?: 'primary' | 'secondary';
     squared?: boolean;
+    /** Optional icon rendered before the children. */
+    icon?: React.ReactNode;
+    /**
+     * Size variant.
+     * - `'sm'` (default): 13px text, 3px×13px padding — original Pill size.
+     * - `'md'`: 16px text, 8px×14px padding — for prominent badges (e.g. "Currently assigned to client #N").
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Optional 1px ring around the pill, using the textColor (or a custom color string).
+     * Use `true` for the default textColor-based ring, or pass a CSS color for a custom ring.
+     */
+    ring?: boolean | string;
 }
 export declare const Pill: React.FC<PillProps & {
     children: React.ReactNode;