jcicl 1.0.3 → 1.0.7

package/EditableInfoCard/EditableInfoCard.js

@@ -1,26 +1,27 @@
-import { jsx as o, jsxs as n, Fragment as k } from "react/jsx-runtime";
-import { useState as B, useEffect as N } from "react";
+import { jsx as o, jsxs as n, Fragment as P } from "react/jsx-runtime";
+import { useState as T, useEffect as O } from "react";
 import { n as l } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as m } from "../.chunks/emotion-react.browser.esm.js";
-import { c as j } from "../.chunks/createSvgIcon.js";
-import { X as O } from "../.chunks/Close.js";
-import d from "../theme.js";
-import { LabeledValue as Q } from "../LabeledValue/LabeledValue.js";
-import { LabeledInput as Z } from "../LabeledInput/LabeledInput.js";
+import { c as f } from "../.chunks/emotion-react.browser.esm.js";
+import { c as F } from "../.chunks/createSvgIcon.js";
+import { X as Q } from "../.chunks/Close.js";
+import C from "../theme.js";
+import { LabeledValue as Z } from "../LabeledValue/LabeledValue.js";
+import { LabeledInput as _ } from "../LabeledInput/LabeledInput.js";
 import L from "../Loading/Loading.js";
 import M from "../WithLoading/WithLoading.js";
-import { Flex as f } from "../Flex/Flex.js";
-import { Tooltip as x } from "../Tooltip/Tooltip.js";
-import { T as _ } from "../.chunks/TextField.js";
-import { B as oo } from "../.chunks/ButtonBase.js";
-const eo = j(/* @__PURE__ */ o("path", {
+import { Flex as h } from "../Flex/Flex.js";
+import { Tooltip as $ } from "../Tooltip/Tooltip.js";
+import { useThemeColors as oo } from "../ThemeContext.js";
+import { T as eo } from "../.chunks/TextField.js";
+import { B as to } from "../.chunks/ButtonBase.js";
+const ro = F(/* @__PURE__ */ o("path", {
   d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
-}), "Edit"), to = j(/* @__PURE__ */ o("path", {
+}), "Edit"), no = F(/* @__PURE__ */ o("path", {
   d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-}), "Check"), T = l("div")(
-  ({ width: t, padding: a, shadow: r, styles: u, isEditing: c }) => ({
-    ...m`
-      width: ${t};
+}), "Check"), V = l("div")(
+  ({ width: e, padding: a, shadow: r, styles: m, isEditing: d, customTheme: u }) => ({
+    ...f`
+      width: ${e};
       max-width: 100%;
       box-sizing: border-box;
       h3 {
@@ -32,19 +33,21 @@ const eo = j(/* @__PURE__ */ o("path", {
       padding: ${a};
       display: flex;
       flex-direction: column;
-      box-shadow: ${r};
+      box-shadow: ${r || u.themeShadowB};
       border-radius: 5px;
-      background-color: ${d.colors.white};
-      ${u};
-      z-index: ${c ? 0 : 1};
+      background-color: ${C.colors.white};
+      ${m};
+      z-index: ${d ? 0 : 1};
       position: relative;
-      transform: ${c ? "rotateY(-180deg)" : "rotateY(0deg)"};
+      transform: ${d ? "rotateY(-180deg)" : "rotateY(0deg)"};
       transition: 920ms all ease-in-out;
-      opacity: ${c ? "0" : "1"};
+      opacity: ${d ? "0" : "1"};
     `
   })
-), ro = l(_)({
-  backgroundColor: d.colors.white,
+), ao = l(eo, {
+  shouldForwardProp: (e) => !["customTheme"].includes(e)
+})(({ customTheme: e }) => ({
+  backgroundColor: C.colors.white,
   borderRadius: "0",
   input: {
     fontSize: "28px",
@@ -52,14 +55,14 @@ const eo = j(/* @__PURE__ */ o("path", {
     transition: "313ms all ease-out",
     padding: "0",
     borderRadius: "0",
-    borderBottom: `1px solid ${d.colors.gray}`,
+    borderBottom: `1px solid ${C.colors.gray}`,
     "&:focus-visible": {
-      boxShadow: `0 3px 2px -2px ${d.colors.darkGreen}`
+      boxShadow: `0 3px 2px -2px ${e.themeDark}`
     }
   },
   "&:hover, :focus-visible": {
     input: {
-      boxShadow: `0 3px 2px -2px ${d.colors.darkGreen}`
+      boxShadow: `0 3px 2px -2px ${e.themeDark}`
     }
   },
   fieldset: {
@@ -71,82 +74,82 @@ const eo = j(/* @__PURE__ */ o("path", {
       border: "none"
     }
   }
-}), no = l(T)(({ isEditing: t }) => ({
-  ...m`
+})), io = l(V)(({ isEditing: e }) => ({
+  ...f`
     position: absolute;
     top: 0;
-    z-index: ${t ? 1 : 0};
-    transform: ${t ? "rotateY(0deg)" : "rotateY(-180deg)"};
-    opacity: ${t ? "1" : "0"};
+    z-index: ${e ? 1 : 0};
+    transform: ${e ? "rotateY(0deg)" : "rotateY(-180deg)"};
+    opacity: ${e ? "1" : "0"};
     transition: 920ms all ease-in-out;
   `
-})), P = l("div")(
-  ({ spacing: t, columns: a, numRows: r }) => ({
-    ...m`
-      margin-top: calc(${t} * 0.75);
-      grid-row-gap: ${t};
-      grid-column-gap: calc(${t} * 1.5);
+})), R = l("div")(
+  ({ spacing: e, columns: a, numRows: r }) => ({
+    ...f`
+      margin-top: calc(${e} * 0.75);
+      grid-row-gap: ${e};
+      grid-column-gap: calc(${e} * 1.5);
       display: grid;
       grid-template-columns: repeat(${a}, 1fr);
       grid-template-rows: repeat(${r}, 1fr);
     `
   })
-), $ = l(oo)(() => ({
-  ...m`
+), w = l(to)(() => ({
+  ...f`
     width: 40px;
     height: 40px;
     border-radius: 50%;
   `
-})), ao = l("div")`
+})), lo = l("div")`
   position: relative;
   width: 100%;
-`, R = l("div")`
+`, j = l("div")`
   height: 19px;
-`, vo = ({
-  decorativeElement: t,
+`, yo = ({
+  decorativeElement: e,
   title: a,
   items: r = [],
-  padding: u = "1rem 2rem",
-  shadow: c = d.boxShadows.darkGreen,
-  spacing: V = "2rem",
-  titleSpacing: w = "1rem",
-  canEditTitle: C = !0,
-  columns: v = 3,
+  padding: m = "1rem 2rem",
+  shadow: d,
+  spacing: u = "2rem",
+  titleSpacing: v = "1rem",
+  canEditTitle: I = !0,
+  columns: z = 3,
   styles: Y,
   width: E = "100%",
-  loading: I = !1,
-  titleLoading: z = !1,
-  onSave: F = () => {
+  loading: y = !1,
+  titleLoading: S = !1,
+  onSave: D = () => {
   },
-  onCancel: G = () => {
+  onCancel: W = () => {
   },
-  onEdit: W = () => {
+  onEdit: X = () => {
   }
 }) => {
-  const b = r.reduce((e, i) => ({ ...e, [i.label]: i.value }), { titleValue: a }), [X, g] = B(!1), [p, h] = B(b);
-  N(() => {
-    h(b);
+  const b = r.reduce((t, i) => ({ ...t, [i.label]: i.value }), { titleValue: a }), [U, g] = T(!1), [c, p] = T(b);
+  O(() => {
+    p(b);
   }, [r]);
-  const U = () => {
-    W(), g(!0);
-  }, q = () => {
-    F(p), g(!1);
+  const q = () => {
+    X(), g(!0);
   }, A = () => {
-    G(), h(b), g(!1);
-  }, D = (e, i) => {
-    h((K) => ({ ...K, [e]: i }));
-  }, H = (e) => {
-    h((i) => ({ ...i, titleValue: e }));
-  }, J = Math.ceil(r.length / v), s = 50, y = { width: E, padding: u, shadow: c, styles: Y, isEditing: X }, S = { spacing: V, columns: v, numRows: J };
-  return /* @__PURE__ */ n(ao, { children: [
-    /* @__PURE__ */ n(T, { ...y, children: [
-      /* @__PURE__ */ n(f, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
-        /* @__PURE__ */ n(f, { width: "100%", gap: w, alignItems: "center", children: [
-          t && t,
-          /* @__PURE__ */ o(M, { size: 36, loading: C && z, children: /* @__PURE__ */ o("h3", { children: a }) })
+    D(c), g(!1);
+  }, G = () => {
+    W(), p(b), g(!1);
+  }, H = (t, i) => {
+    p((N) => ({ ...N, [t]: i }));
+  }, J = (t) => {
+    p((i) => ({ ...i, titleValue: t }));
+  }, K = Math.ceil(r.length / z), s = 50, k = { width: E, padding: m, shadow: d, styles: Y, isEditing: U }, B = { spacing: u, columns: z, numRows: K }, x = oo();
+  return /* @__PURE__ */ n(lo, { children: [
+    /* @__PURE__ */ n(V, { ...k, customTheme: x, children: [
+      /* @__PURE__ */ n(h, { width: "100%", gap: "1rem", justifyContent: "space-between", children: [
+        /* @__PURE__ */ n(h, { width: "100%", gap: v, alignItems: "center", children: [
+          e && e,
+          /* @__PURE__ */ o(M, { size: 36, loading: I && S, children: /* @__PURE__ */ o("h3", { children: a }) })
         ] }),
         /* @__PURE__ */ o(
-          x,
+          $,
           {
             title: "Edit",
             placement: "top",
@@ -162,12 +165,12 @@ const eo = j(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: U, children: /* @__PURE__ */ o(eo, {}) })
+            children: /* @__PURE__ */ o(w, { onClick: q, children: /* @__PURE__ */ o(ro, {}) })
           }
         )
       ] }),
-      /* @__PURE__ */ o(P, { ...S, children: I ? /* @__PURE__ */ n(k, { children: [
-        /* @__PURE__ */ o(R, {}),
+      /* @__PURE__ */ o(R, { ...B, children: y ? /* @__PURE__ */ n(P, { children: [
+        /* @__PURE__ */ o(j, {}),
         /* @__PURE__ */ o(
           L,
           {
@@ -179,22 +182,23 @@ const eo = j(/* @__PURE__ */ o("path", {
             }
           }
         )
-      ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(Q, { ...e }, e.label)) })
+      ] }) : r == null ? void 0 : r.map((t) => /* @__PURE__ */ o(Z, { ...t }, t.label)) })
     ] }),
-    /* @__PURE__ */ n(no, { ...y, children: [
-      /* @__PURE__ */ n(f, { width: "100%", justifyContent: "space-between", children: [
-        /* @__PURE__ */ n(f, { width: "100%", gap: w, alignItems: "center", children: [
-          t && t,
-          C ? /* @__PURE__ */ o(M, { size: 36, loading: z, children: /* @__PURE__ */ o(
-            ro,
+    /* @__PURE__ */ n(io, { ...k, customTheme: x, children: [
+      /* @__PURE__ */ n(h, { width: "100%", justifyContent: "space-between", children: [
+        /* @__PURE__ */ n(h, { width: "100%", gap: v, alignItems: "center", children: [
+          e && e,
+          I ? /* @__PURE__ */ o(M, { size: 36, loading: S, children: /* @__PURE__ */ o(
+            ao,
             {
-              onChange: (e) => H(e.target.value),
-              value: (p == null ? void 0 : p.titleValue) ?? a
+              onChange: (t) => J(t.target.value),
+              value: (c == null ? void 0 : c.titleValue) ?? a,
+              customTheme: x
             }
           ) }) : /* @__PURE__ */ o("h3", { children: a })
         ] }),
         /* @__PURE__ */ o(
-          x,
+          $,
           {
             title: "Cancel",
             placement: "top",
@@ -210,11 +214,11 @@ const eo = j(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: A, children: /* @__PURE__ */ o(O, {}) })
+            children: /* @__PURE__ */ o(w, { onClick: G, children: /* @__PURE__ */ o(Q, {}) })
           }
         ),
         /* @__PURE__ */ o(
-          x,
+          $,
           {
             title: "Save",
             placement: "top",
@@ -230,12 +234,12 @@ const eo = j(/* @__PURE__ */ o("path", {
                 ]
               }
             },
-            children: /* @__PURE__ */ o($, { onClick: q, children: /* @__PURE__ */ o(to, {}) })
+            children: /* @__PURE__ */ o(w, { onClick: A, children: /* @__PURE__ */ o(no, {}) })
           }
         )
       ] }),
-      /* @__PURE__ */ o(P, { ...S, children: I ? /* @__PURE__ */ n(k, { children: [
-        /* @__PURE__ */ o(R, {}),
+      /* @__PURE__ */ o(R, { ...B, children: y ? /* @__PURE__ */ n(P, { children: [
+        /* @__PURE__ */ o(j, {}),
         /* @__PURE__ */ o(
           L,
           {
@@ -247,19 +251,19 @@ const eo = j(/* @__PURE__ */ o("path", {
             }
           }
         )
-      ] }) : r == null ? void 0 : r.map((e) => /* @__PURE__ */ o(
-        Z,
+      ] }) : r == null ? void 0 : r.map((t) => /* @__PURE__ */ o(
+        _,
         {
-          label: e.label,
-          value: p[e.label],
-          onChange: (i) => D(e.label, i.target.value)
+          label: t.label,
+          value: c[t.label],
+          onChange: (i) => H(t.label, i.target.value)
         },
-        e.label
+        t.label
       )) })
     ] })
   ] });
 };
 export {
-  vo as EditableInfoCard,
-  vo as default
+  yo as EditableInfoCard,
+  yo as default
 };

package/FormComponents/FormComponents.d.ts

@@ -1,10 +1,16 @@
 import { SerializedStyles } from '@emotion/react';
-export declare const FormSection: import('@emotion/styled').StyledComponent<{
+import { CustomThemeProps } from '../../../../../../../../../src/components/theme';
+import { PropsWithChildren, HTMLAttributes } from 'react';
+interface WithCustomTheme {
+    customTheme: CustomThemeProps;
+}
+interface FormSectionProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare const FormSection: React.FC<PropsWithChildren<FormSectionProps>>;
+export declare const FormSectionStyles: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-} & {
-    boxShadow?: string;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & WithCustomTheme, import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FormFieldGrid: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
@@ -13,30 +19,31 @@ export declare const FormFieldGrid: import('@emotion/styled').StyledComponent<{
     columnsOverride?: string;
     gap?: number;
     customStyles?: SerializedStyles;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FormFieldCheckboxContainer: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FormSectionTitle: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 export declare const FormSubtitle: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 } & {
     underlined?: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 export declare const FormTextLine: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 } & {
     underlined?: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 export declare const FormSubsectionTitle: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 } & {
     underlined?: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+}, import('react').DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export {};

package/FormComponents/FormComponents.js

@@ -1,33 +1,38 @@
-import { n as o } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as t } from "../.chunks/emotion-react.browser.esm.js";
-import i from "../theme.js";
-const x = o("div")(
-  ({ boxShadow: e = i.boxShadows.darkGreen }) => ({
-    ...t`
-      background-color: ${i.colors.white};
-      border-radius: 8px;
-      box-shadow: ${e};
-      padding: 0px 36px 19px 36px;
-      display: flex;
-      flex-direction: column;
-      gap: 21px;
-      max-width: 1300px;
-      width: 100%;
-      box-sizing: border-box;
-    `
-  })
-), m = o("div")(({ columns: e = 3, columnsOverride: n, gap: r = 21, customStyles: a }) => ({
-  ...t`
+import { jsx as a } from "react/jsx-runtime";
+import { n as e } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as o } from "../.chunks/emotion-react.browser.esm.js";
+import r from "../theme.js";
+import { useThemeColors as m } from "../ThemeContext.js";
+const f = ({ children: t, ...i }) => {
+  const n = m();
+  return /* @__PURE__ */ a(d, { customTheme: n, ...i, children: t });
+}, d = e("div", {
+  shouldForwardProp: (t) => !["customTheme"].includes(t)
+})(({ customTheme: t }) => ({
+  ...o`
+    background-color: ${r.colors.white};
+    border-radius: 8px;
+    box-shadow: ${t.themeShadowB};
+    padding: 0px 36px 19px 36px;
+    display: flex;
+    flex-direction: column;
+    gap: 21px;
+    max-width: 1300px;
+    width: 100%;
+    box-sizing: border-box;
+  `
+})), h = e("div")(({ columns: t = 3, columnsOverride: i, gap: n = 21, customStyles: l }) => ({
+  ...o`
     display: grid;
-    grid-template-columns: repeat(${e}, 1fr);
-    ${n && t`
-      grid-template-columns: ${n};
+    grid-template-columns: repeat(${t}, 1fr);
+    ${i && o`
+      grid-template-columns: ${i};
     `};
-    gap: ${r}px;
-    ${a};
+    gap: ${n}px;
+    ${l};
   `
-})), s = o("div")(() => ({
-  ...t`
+})), w = e("div")(() => ({
+  ...o`
     width: 100%;
     display: flex;
     align-items: flex-end;
@@ -44,59 +49,60 @@ const x = o("div")(
       align-items: flex-end;
     }
   `
-})), g = o("h2")(() => ({
-  ...t`
+})), b = e("h2")(() => ({
+  ...o`
     font-size: 27px;
     font-weight: 600;
     text-align: left;
     margin-top: 9px;
     margin-bottom: -15px;
   `
-})), f = o("h3")(({ underlined: e = !1 }) => ({
-  ...t`
+})), u = e("h3")(({ underlined: t = !1 }) => ({
+  ...o`
     font-size: 19px;
     font-weight: 600;
     text-align: left;
     margin: 0;
     margin-bottom: -15px;
     width: 100%;
-    ${e && t`
+    ${t && o`
       text-decoration: underline;
     `};
   `
-})), c = o("p")(({ underlined: e = !1 }) => ({
-  ...t`
+})), F = e("p")(({ underlined: t = !1 }) => ({
+  ...o`
     text-align: left;
     font-size: inherit;
     font-weight: bold;
     margin: 0;
     margin-bottom: -19px;
     width: 100%;
-    ${e && t`
+    ${t && o`
       text-decoration: underline;
     `};
   `
-})), h = o("h3")(({ underlined: e = !1 }) => ({
-  ...t`
+})), $ = e("h3")(({ underlined: t = !1 }) => ({
+  ...o`
     font-size: 19px;
     font-weight: 600;
     text-align: left;
     margin: 0;
     margin-top: 9px;
     margin-bottom: -6px;
-    border-bottom: 1px solid ${i.colors.gray};
+    border-bottom: 1px solid ${r.colors.gray};
     width: 100%;
-    ${e && t`
+    ${t && o`
       text-decoration: underline;
     `};
   `
 }));
 export {
-  s as FormFieldCheckboxContainer,
-  m as FormFieldGrid,
-  x as FormSection,
-  g as FormSectionTitle,
-  h as FormSubsectionTitle,
-  f as FormSubtitle,
-  c as FormTextLine
+  w as FormFieldCheckboxContainer,
+  h as FormFieldGrid,
+  f as FormSection,
+  d as FormSectionStyles,
+  b as FormSectionTitle,
+  $ as FormSubsectionTitle,
+  u as FormSubtitle,
+  F as FormTextLine
 };

package/Icon/Icon.js

@@ -1,29 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { B as p } from "../.chunks/ButtonBase.js";
-import i from "../theme.js";
-import { n as l, i as m } from "../.chunks/emotion-styled.browser.esm.js";
-const a = l("div", {
-  shouldForwardProp: (r) => m(r)
+import { jsx as s } from "react/jsx-runtime";
+import { B as h } from "../.chunks/ButtonBase.js";
+import c from "../theme.js";
+import { n as m, i as p } from "../.chunks/emotion-styled.browser.esm.js";
+import { useThemeColors as u } from "../ThemeContext.js";
+const l = m("div", {
+  shouldForwardProp: (e) => p(e) && !["customTheme"].includes(e)
 })(
-  ({ iconColor: r = i.colors.darkGreen, backgroundColor: n = i.colors.mint, size: o = 40, padding: s = 8 }) => ({
+  ({ iconColor: e, backgroundColor: n, size: o = 40, padding: t = 8, customTheme: r }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     borderRadius: "50%",
-    boxShadow: `0 0 2px ${i.colors.midnight}`,
+    boxShadow: `0 0 2px ${c.colors.midnight}`,
     svg: {
       boxSizing: "border-box",
-      border: `1px solid ${r}`,
-      backgroundColor: n,
+      border: `1px solid ${e || r.themeDark}`,
+      backgroundColor: n || r.themeMediumA,
       borderRadius: "50%",
-      padding: `${s}px`,
-      fill: r,
+      padding: `${t}px`,
+      fill: e || r.themeDark,
       width: `${o}px`,
       height: `${o}px`,
       pointerEvents: "none"
     }
   })
-), h = l(p)({
+), f = m(h)({
   backgroundColor: "transparent",
   borderRadius: "50%",
   span: {
@@ -31,20 +32,20 @@ const a = l("div", {
   },
   "&:hover, :focus-visible": {
     span: {
-      backgroundColor: i.colors.grayO44
+      backgroundColor: c.colors.grayO44
     }
   }
-}), b = ({
-  icon: r,
+}), v = ({
+  icon: e,
   iconColor: n,
   backgroundColor: o,
-  size: s,
-  padding: c,
-  ...e
+  size: t,
+  padding: r,
+  ...i
 }) => {
-  const d = { iconColor: n, backgroundColor: o, size: s, padding: c };
-  return e != null && e.onClick ? /* @__PURE__ */ t(h, { ...e, children: /* @__PURE__ */ t(a, { ...d, children: r }) }) : /* @__PURE__ */ t(a, { ...d, children: r });
+  const d = { iconColor: n, backgroundColor: o, size: t, padding: r }, a = u();
+  return i != null && i.onClick ? /* @__PURE__ */ s(f, { ...i, children: /* @__PURE__ */ s(l, { ...d, customTheme: a, children: e }) }) : /* @__PURE__ */ s(l, { ...d, customTheme: a, children: e });
 };
 export {
-  b as default
+  v as default
 };