jcicl 1.0.3 → 1.0.7

package/LabeledInput/LabeledInput.js

@@ -2,9 +2,9 @@ import { jsxs as r, jsx as s } from "react/jsx-runtime";
 import { n as l } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as e } from "../.chunks/emotion-react.browser.esm.js";
 import { Input as d } from "../Input/Input.js";
-const c = ["noLabel"], u = l("div", {
-  shouldForwardProp: (t) => !c.includes(t)
-})(({ grid: t, displayMode: o }) => ({
+const c = ["noLabel", "displayMode", "grid"], u = l("div", {
+  shouldForwardProp: (o) => !c.includes(o)
+})(({ grid: o, displayMode: t }) => ({
   ...e`
     display: flex;
     flex-wrap: nowrap;
@@ -21,10 +21,10 @@ const c = ["noLabel"], u = l("div", {
     }
 
     .MuiInputBase-root {
-      width: ${t && "100%"};
+      width: ${o && "100%"};
     }
 
-    ${o && e`
+    ${t && e`
       .Mui-disabled {
         color: inherit !important;
         -webkit-text-fill-color: inherit !important;
@@ -35,18 +35,18 @@ const c = ["noLabel"], u = l("div", {
     `}
   `
 })), b = ({
-  label: t,
-  grid: o = !0,
+  label: o,
+  grid: t = !0,
   displayMode: a = !1,
-  noLabel: n = !1,
+  noLabel: i = !1,
   limit: p,
-  ...i
-}) => /* @__PURE__ */ r(u, { grid: o, displayMode: a, className: "jcLabeledInput", children: [
-  !n && /* @__PURE__ */ r("span", { children: [
-    t,
+  ...n
+}) => /* @__PURE__ */ r(u, { grid: t, displayMode: a, className: "jcLabeledInput", children: [
+  !i && /* @__PURE__ */ r("span", { children: [
+    o,
     ":"
   ] }),
-  /* @__PURE__ */ s(d, { ...i, slotProps: { htmlInput: { limit: p } } })
+  /* @__PURE__ */ s(d, { ...n, slotProps: { htmlInput: { limit: p } } })
 ] });
 export {
   b as LabeledInput,

package/LabeledTextArea/LabeledTextArea.js

@@ -1,10 +1,13 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { n as a } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as s } from "../.chunks/emotion-react.browser.esm.js";
-import o from "../theme.js";
-import { T as n } from "../.chunks/TextField.js";
-const d = a("div")(() => ({
-  ...s`
+import { c as n } from "../.chunks/emotion-react.browser.esm.js";
+import t from "../theme.js";
+import { useThemeColors as d } from "../ThemeContext.js";
+import { T as l } from "../.chunks/TextField.js";
+const m = a("div", { shouldForwardProp: (e) => !["customTheme"].includes(e) })(({ customTheme: e }) => {
+  var o;
+  return {
+    ...n`
     display: flex;
     flex-direction: column;
     font-family: 'Roboto', sans-serif;
@@ -20,11 +23,11 @@ const d = a("div")(() => ({
       textarea {
         &:hover,
         :focus {
-          box-shadow: ${o.boxShadows.green} inset;
+          box-shadow: ${(o = t.boxShadows.green) == null ? void 0 : o.split("#")[0]} ${e.themeColor} inset;
         }
         width: 100%;
         padding: 13px;
-        border: 1px solid ${o.colors.gray};
+        border: 1px solid ${t.colors.gray};
         border-radius: 9px;
         resize: vertical;
         min-height: 130px;
@@ -44,11 +47,15 @@ const d = a("div")(() => ({
       }
     }
   `
-})), c = ({ label: e, ...t }) => /* @__PURE__ */ i(d, { className: "jcLabeledTextArea", children: [
-  e && /* @__PURE__ */ r("span", { children: e }),
-  /* @__PURE__ */ r(n, { ...t, multiline: !0, fullWidth: !0, rows: 1 })
-] });
+  };
+}), b = ({ label: e, ...o }) => {
+  const s = d();
+  return /* @__PURE__ */ i(m, { className: "jcLabeledTextArea", customTheme: s, children: [
+    e && /* @__PURE__ */ r("span", { children: e }),
+    /* @__PURE__ */ r(l, { ...o, multiline: !0, fullWidth: !0, rows: 1 })
+  ] });
+};
 export {
-  c as LabeledTextArea,
-  c as default
+  b as LabeledTextArea,
+  b as default
 };

package/List/List.js

@@ -1,39 +1,40 @@
-import { jsx as n } from "react/jsx-runtime";
-import { n as m } from "../.chunks/emotion-styled.browser.esm.js";
-import i from "../theme.js";
-const d = m("div")(
-  ({ width: o, borderColor: t, bordered: s, backgroundColor: r }) => ({
+import { jsx as i } from "react/jsx-runtime";
+import { n } from "../.chunks/emotion-styled.browser.esm.js";
+import d from "../theme.js";
+import { useThemeColors as u } from "../ThemeContext.js";
+const x = n("div")(
+  ({ width: o, borderColor: t, bordered: r, backgroundColor: e }) => ({
     display: "flex",
     flexDirection: "column",
     fontFamily: "Roboto, sans-serif",
-    backgroundColor: r,
-    ...s && { border: `1px solid ${t}` },
+    backgroundColor: e,
+    ...r && { border: `1px solid ${t}` },
     borderRadius: "4px",
     ...o && {
       width: o
     }
   })
-), x = m("div")(
-  ({ padding: o, borderColor: t, bordered: s }) => ({
+), b = n("div")(
+  ({ padding: o, borderColor: t, bordered: r }) => ({
     padding: o,
-    ...s && {
+    ...r && {
       borderBottom: `1px solid ${t}`,
       "&:last-child": {
         borderBottom: "none"
       }
     }
   })
-), v = ({
+), k = ({
   bordered: o = !1,
   width: t,
-  padding: s = "0",
-  borderColor: r = i.colors.darkGreen,
-  backgroundColor: a = i.colors.white,
-  children: e
+  padding: r = "0",
+  borderColor: e,
+  backgroundColor: a = d.colors.white,
+  children: s
 }) => {
-  const l = { width: t, borderColor: r, bordered: o, backgroundColor: a }, p = { padding: s, borderColor: r, bordered: o };
-  return /* @__PURE__ */ n(d, { ...l, children: e == null ? void 0 : e.map((c, f) => /* @__PURE__ */ n(x, { ...p, children: c }, f)) });
+  const m = u(), l = { width: t, bordered: o, backgroundColor: a }, p = { padding: r, bordered: o };
+  return /* @__PURE__ */ i(x, { borderColor: e || m.themeDark, ...l, children: s == null ? void 0 : s.map((c, f) => /* @__PURE__ */ i(b, { borderColor: e || m.themeDark, ...p, children: c }, f)) });
 };
 export {
-  v as default
+  k as default
 };

package/ListButton/ListButton.d.ts

@@ -1,11 +1,9 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, PropsWithChildren } from 'react';
 import { ButtonBaseProps } from '@mui/material/ButtonBase/ButtonBase';
 export interface ListButtonProps extends ButtonBaseProps {
     padding?: string;
     active?: boolean;
     activeStyles?: CSSProperties;
 }
-declare const ListButton: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonBaseOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef"> & {
-    theme?: import('@emotion/react').Theme;
-} & ListButtonProps, {}, {}>;
+declare const ListButton: React.FC<ListButtonProps & PropsWithChildren>;
 export default ListButton;

package/ListButton/ListButton.js

@@ -1,24 +1,33 @@
-import { n as s, i } from "../.chunks/emotion-styled.browser.esm.js";
-import e from "../theme.js";
+import { jsx as r } from "react/jsx-runtime";
+import { n, i as x } from "../.chunks/emotion-styled.browser.esm.js";
 import { B as p } from "../.chunks/ButtonBase.js";
-const l = s(p, {
-  shouldForwardProp: (o) => i(o) && typeof o == "string"
-})(({ padding: o = "1rem", active: t, activeStyles: r }) => ({
+import { useThemeColors as a } from "../ThemeContext.js";
+const l = n(p, {
+  shouldForwardProp: (t) => x(t) && typeof t == "string" && !["customTheme"].includes(t)
+})(({ padding: t = "1rem", active: o, activeStyles: s, customTheme: e }) => ({
   display: "flex",
   width: "100%",
   height: "100%",
-  padding: o,
+  padding: t,
   fontSize: "inherit",
   justifyContent: "flex-start",
   transition: "201ms all ease-in-out",
-  ...t && {
-    boxShadow: `inset 0px -11px 6px -10px ${e.colors.darkGreen}, inset 0px 11px 6px -10px ${e.colors.darkGreen}`,
-    ...r
+  ...o && {
+    boxShadow: `inset 0px -11px 6px -10px ${e.themeDark}, inset 0px 11px 6px -10px ${e.themeDark}`,
+    ...s
   },
   "&:hover, :focus-visible": {
-    boxShadow: `inset 0px -11px 6px -10px ${e.colors.green}, inset 0px 11px 6px -10px ${e.colors.green}`
+    boxShadow: `inset 0px -11px 6px -10px ${e.themeColor}, inset 0px 11px 6px -10px ${e.themeColor}`
   }
-}));
+})), u = ({
+  padding: t,
+  active: o,
+  activeStyles: s,
+  children: e
+}) => {
+  const i = a();
+  return /* @__PURE__ */ r(l, { padding: t, active: o, activeStyles: s, customTheme: i, children: e });
+};
 export {
-  l as default
+  u as default
 };

package/Loading/Loading.js

@@ -1,14 +1,19 @@
-import { jsx as o } from "react/jsx-runtime";
-import { n as s } from "../.chunks/emotion-styled.browser.esm.js";
+import { jsx as s } from "react/jsx-runtime";
+import { n as e } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as t } from "../.chunks/emotion-react.browser.esm.js";
-import e from "../theme.js";
-import { C as m } from "../.chunks/CircularProgress.js";
-const i = s(m)(({ styles: r }) => ({
+import { useThemeColors as m } from "../ThemeContext.js";
+import { C as c } from "../.chunks/CircularProgress.js";
+const i = e(c, {
+  shouldForwardProp: (o) => !["customTheme"].includes(o)
+})(({ styles: o, customTheme: r }) => ({
   ...t`
-    color: ${e.colors.green};
-    ${r};
+    color: ${r.themeColor};
+    ${o};
   `
-})), p = ({ ...r }) => /* @__PURE__ */ o(i, { size: 47, ...r });
+})), d = ({ ...o }) => {
+  const r = m();
+  return /* @__PURE__ */ s(i, { size: 47, customTheme: r, ...o });
+};
 export {
-  p as default
+  d as default
 };

package/Memo/Memo.js

@@ -1,15 +1,16 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as r, jsx as t } 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 n from "../theme.js";
-import { DetailItemContainer as c } from "../DetailPageComponents/DetailPageComponents.js";
-const l = e("div")(() => ({
+import i from "../theme.js";
+import { DetailItemContainer as a } from "../DetailPageComponents/DetailPageComponents.js";
+import { formatTimestamp as p } from "../utils.js";
+const c = e("div")(() => ({
   ...o`
     display: flex;
     justify-content: space-between;
     align-items: center;
   `
-})), a = e("h3")(() => ({
+})), l = e("h3")(() => ({
   ...o`
     font-size: 21px;
     font-weight: 600;
@@ -20,25 +21,25 @@ const l = e("div")(() => ({
       margin-right: 9px;
     }
   `
-})), p = e("span")(() => ({
+})), f = e("span")(() => ({
   ...o`
     font-size: 15px;
-    color: ${n.colors.gray};
+    color: ${i.colors.gray};
     margin: 0px;
   `
-})), f = e("p")(() => ({
+})), d = e("p")(() => ({
   ...o`
-    color: ${n.colors.gray};
+    color: ${i.colors.gray};
     font-size: 18px;
     margin: 0px;
   `
-})), M = ({ username: r, createDateTime: s, note: m }) => /* @__PURE__ */ i(c, { children: [
-  /* @__PURE__ */ i(l, { children: [
-    /* @__PURE__ */ t(a, { children: r }),
-    /* @__PURE__ */ t(p, { children: s })
+})), j = ({ username: n, createDateTime: m, note: s }) => /* @__PURE__ */ r(a, { children: [
+  /* @__PURE__ */ r(c, { children: [
+    /* @__PURE__ */ t(l, { children: n }),
+    /* @__PURE__ */ t(f, { children: p(m) })
   ] }),
-  /* @__PURE__ */ t(f, { children: m })
+  /* @__PURE__ */ t(d, { children: s })
 ] });
 export {
-  M as default
+  j as default
 };

package/Pill/Pill.js

@@ -1,24 +1,25 @@
-import { jsx as s } from "react/jsx-runtime";
-import { n as l } from "../.chunks/emotion-styled.browser.esm.js";
-import { c } from "../.chunks/emotion-react.browser.esm.js";
+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";
-const i = l("span")(
-  ({ backgroundColor: r = o.colors.whiteGreen, textColor: t = o.colors.darkGreen }) => ({
-    ...c`
+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};
       font-size: 13px;
       font-weight: 500;
-      color: ${t};
+      color: ${e};
       background-color: ${r};
       padding: 3px 13px;
       border-radius: 21px;
     `
   })
-), m = (r) => {
-  const { backgroundColor: t = o.colors.green, textColor: e = o.colors.white, children: n } = r;
-  return /* @__PURE__ */ s(i, { backgroundColor: t, textColor: e, children: n });
+), 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 });
 };
 export {
-  m as Pill,
-  m as default
+  x as Pill,
+  x as default
 };

package/Search/Search.js

@@ -1,31 +1,32 @@
-import { jsx as o, jsxs as v } from "react/jsx-runtime";
-import { useState as S } from "react";
-import { n as s } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as l } from "../.chunks/emotion-react.browser.esm.js";
-import e from "../theme.js";
-import y from "../Icon/Icon.js";
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { useState as C } from "react";
+import { n as a } from "../.chunks/emotion-styled.browser.esm.js";
+import { c } from "../.chunks/emotion-react.browser.esm.js";
+import o from "../theme.js";
+import S from "../Icon/Icon.js";
 import { Button as p } from "../Button/Button.js";
-import { c as m } from "../.chunks/createSvgIcon.js";
+import { c as h } from "../.chunks/createSvgIcon.js";
+import { useThemeColors as y } from "../ThemeContext.js";
 import { T as z } from "../.chunks/TextField.js";
-const F = m(/* @__PURE__ */ o("path", {
+const F = h(/* @__PURE__ */ r("path", {
   d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
-}), "Search"), C = m(/* @__PURE__ */ o("path", {
+}), "Search"), j = h(/* @__PURE__ */ r("path", {
   d: "M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"
-}), "FilterList"), j = ["borderColor", "borderFocusColor", "shadowTertiary"], k = s("div")(() => ({
-  ...l`
+}), "FilterList"), k = ["borderColor", "borderFocusColor", "shadowTertiary"], I = a("div")(() => ({
+  ...c`
     position: relative;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
   `
-})), I = s(z, {
-  shouldForwardProp: (r) => !j.includes(r)
-})(({ borderColor: r, borderFocusColor: i, shadowTertiary: a }) => ({
-  backgroundColor: e.colors.white,
+})), M = a(z, {
+  shouldForwardProp: (e) => !k.includes(e)
+})(({ borderColor: e, borderFocusColor: t, shadowTertiary: d }) => ({
+  backgroundColor: o.colors.white,
   borderRadius: "1rem",
   height: "2rem",
-  border: `1px solid ${r}`,
+  border: `1px solid ${e}`,
   transition: "313ms all ease-out",
   zIndex: 1327,
   ".MuiInputBase-root": {
@@ -44,7 +45,7 @@ const F = m(/* @__PURE__ */ o("path", {
     },
     "&:hover": {
       svg: {
-        boxShadow: `0 0 2px ${e.colors.midnight}`
+        boxShadow: `0 0 2px ${o.colors.midnight}`
       }
     }
   },
@@ -52,8 +53,8 @@ const F = m(/* @__PURE__ */ o("path", {
     borderRadius: "50%",
     "&:hover": {
       svg: {
-        backgroundColor: i,
-        fill: e.colors.white
+        backgroundColor: t,
+        fill: o.colors.white
       },
       ".MuiTouchRipple-root": {
         backgroundColor: "transparent"
@@ -72,11 +73,11 @@ const F = m(/* @__PURE__ */ o("path", {
     padding: "0 6px"
   },
   "&:hover, :focus-visible, :focus-within": {
-    borderColor: i,
-    boxShadow: a
+    borderColor: t,
+    boxShadow: d
   },
   "&:focus-visible": {
-    borderColor: r,
+    borderColor: e,
     borderWidth: "2px"
   },
   fieldset: {
@@ -93,8 +94,8 @@ const F = m(/* @__PURE__ */ o("path", {
       padding: "2px"
     }
   }
-})), M = s("div")(({ open: r }) => ({
-  ...l`
+})), R = a("div")(({ open: e }) => ({
+  ...c`
     box-sizing: border-box;
     position: absolute;
     width: calc(50%);
@@ -103,23 +104,23 @@ const F = m(/* @__PURE__ */ o("path", {
     z-index: 1313;
     display: flex;
     gap: 1rem;
-    background-color: ${e.colors.white};
-    box-shadow: ${e.boxShadows.midnight};
-    padding: ${r ? "2rem 1rem 1rem 1rem" : 0};
+    background-color: ${o.colors.white};
+    box-shadow: ${o.boxShadows.midnight};
+    padding: ${e ? "2rem 1rem 1rem 1rem" : 0};
     transition: 313ms all ease-in-out;
     display: grid;
-    grid-template-rows: ${r ? "1fr" : "0fr"};
+    grid-template-rows: ${e ? "1fr" : "0fr"};
 
     .jcFiltersWrapper {
       overflow: hidden;
     }
 
-    @media screen and (max-width: ${e.screenSizes.tablet}) {
+    @media screen and (max-width: ${o.screenSizes.tablet}) {
       width: calc(100% - 6px);
     }
   `
-})), R = s("div")(() => ({
-  ...l`
+})), $ = a("div")(() => ({
+  ...c`
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-row-gap: 1.3rem;
@@ -128,7 +129,7 @@ const F = m(/* @__PURE__ */ o("path", {
     box-sizing: border-box;
     width: 100%;
 
-    @media screen and (max-width: ${e.screenSizes.tablet}) {
+    @media screen and (max-width: ${o.screenSizes.tablet}) {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
     }
@@ -142,44 +143,42 @@ const F = m(/* @__PURE__ */ o("path", {
       justify-self: center;
     }
   `
-})), D = ({
-  borderColor: r = e.colors.green,
-  // border primary
-  borderFocusColor: i = e.colors.darkGreen,
-  // icon primary
-  shadowTertiary: a = e.boxShadows.darkGreenThick,
-  filters: t,
-  onSearch: d,
-  ...h
+})), K = ({
+  borderColor: e,
+  borderFocusColor: t,
+  shadowTertiary: d,
+  filters: i,
+  onSearch: l,
+  ...u
 }) => {
-  const [c, g] = S(!1), u = (n) => {
-    n.preventDefault(), n.key === "Enter" && d && d();
-  }, x = { borderColor: r, borderFocusColor: i, shadowTertiary: a, ...h }, b = t && t.length > 0;
-  return /* @__PURE__ */ v(k, { className: "jcInputContainer", children: [
-    /* @__PURE__ */ o(
-      I,
+  const n = y(), [m, g] = C(!1), b = (s) => {
+    s.preventDefault(), s.key === "Enter" && l && l();
+  }, x = i && i.length > 0;
+  return /* @__PURE__ */ v(I, { className: "jcInputContainer", children: [
+    /* @__PURE__ */ r(
+      M,
       {
         slotProps: {
           input: {
-            startAdornment: /* @__PURE__ */ o(
+            startAdornment: /* @__PURE__ */ r(
               p,
               {
                 variant: "icon",
                 size: 28,
-                onClick: d,
-                color: i,
+                onClick: l,
+                color: t || n.themeDark,
                 highlightColor: "transparent",
                 className: "searchIcon",
-                children: /* @__PURE__ */ o(F, {})
+                children: /* @__PURE__ */ r(F, {})
               }
             ),
-            endAdornment: b && /* @__PURE__ */ o(
-              y,
+            endAdornment: x && /* @__PURE__ */ r(
+              S,
               {
-                onClick: () => g(!c),
-                icon: /* @__PURE__ */ o(C, {}),
-                backgroundColor: r,
-                iconColor: e.colors.white,
+                onClick: () => g(!m),
+                icon: /* @__PURE__ */ r(j, {}),
+                backgroundColor: e || n.themeColor,
+                iconColor: o.colors.white,
                 size: 28,
                 padding: 3
               }
@@ -187,14 +186,17 @@ const F = m(/* @__PURE__ */ o("path", {
           }
         },
         type: "search",
-        ...x,
-        onKeyUp: u
+        borderColor: e || n.themeColor,
+        borderFocusColor: t || n.themeDark,
+        shadowTertiary: d || n.themeShadowC,
+        ...u,
+        onKeyUp: b
       }
     ),
-    /* @__PURE__ */ o(M, { open: c, className: "jcFiltersContainer", children: /* @__PURE__ */ o(R, { className: "jcFiltersWrapper", children: t == null ? void 0 : t.map(({ name: n, onClick: f, active: w }) => /* @__PURE__ */ o(p, { className: "jcFiltersButton", variant: "filter", onClick: f, active: w, children: n }, n)) }) })
+    /* @__PURE__ */ r(R, { open: m, className: "jcFiltersContainer", children: /* @__PURE__ */ r($, { className: "jcFiltersWrapper", children: i == null ? void 0 : i.map(({ name: s, onClick: f, active: w }) => /* @__PURE__ */ r(p, { className: "jcFiltersButton", variant: "filter", onClick: f, active: w, children: s }, s)) }) })
   ] });
 };
 export {
-  D as Search,
-  D as default
+  K as Search,
+  K as default
 };

package/SquareIcon/SquareIcon.js

@@ -1,27 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { n as i } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as n } from "../.chunks/emotion-react.browser.esm.js";
-import s from "../theme.js";
-const l = i("div")(
-  ({ size: r, backgroundColor: o, color: e }) => ({
-    ...n`
-      flex-shrink: 0;
-      width: ${r}px;
-      height: ${r}px;
-      background-color: ${o};
-      border-radius: 17%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: ${e};
-    `
-  })
-), f = ({
-  icon: r,
-  iconSize: o = 20,
-  color: e = s.colors.white,
-  backgroundColor: c = s.colors.green
-}) => /* @__PURE__ */ t(l, { size: o * 2, backgroundColor: c, color: e, children: /* @__PURE__ */ t(r, { size: o }) });
+import { jsx as s } from "react/jsx-runtime";
+import { n } from "../.chunks/emotion-styled.browser.esm.js";
+import { c as i } from "../.chunks/emotion-react.browser.esm.js";
+import m from "../theme.js";
+import { useThemeColors as l } from "../ThemeContext.js";
+const d = n("div", { shouldForwardProp: (o) => !["customTheme"].includes(o) })(({ size: o, backgroundColor: r, color: t, customTheme: e }) => ({
+  ...i`
+    flex-shrink: 0;
+    width: ${o}px;
+    height: ${o}px;
+    background-color: ${r || e.themeIconBackgroundA};
+    border-radius: 17%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${t || e.themeIconColorA};
+  `
+})), x = ({
+  icon: o,
+  iconSize: r = 20,
+  color: t = m.colors.white,
+  backgroundColor: e
+  //green
+}) => {
+  const c = l();
+  return /* @__PURE__ */ s(d, { size: r * 2, backgroundColor: e, color: t, customTheme: c, children: /* @__PURE__ */ s(o, { size: r }) });
+};
 export {
-  f as default
+  x as default
 };