jcicl 1.0.5 → 1.0.9

package/.chunks/DefaultPropsProvider.js

@@ -3269,10 +3269,10 @@ export {
   tt as g,
   rt as h,
   _o as i,
-  br as j,
-  Ro as k,
+  lr as j,
+  br as k,
   vr as l,
-  lr as m,
+  Ro as m,
   ye as n,
   ie as o,
   On as p,

package/.chunks/TextField.js

@@ -1,5 +1,5 @@
 import * as c from "react";
-import { P as e, m as Ot, i as Vo, T as Ho, a as oe, g as te, c as ce, s as j, u as de, b as ee, d as ne, n as qo, r as Se, o as bo, q as ho, k as xt } from "./DefaultPropsProvider.js";
+import { P as e, j as Ot, i as Vo, T as Ho, a as oe, g as te, c as ce, s as j, u as de, b as ee, d as ne, n as qo, r as Se, o as bo, q as ho, m as xt } from "./DefaultPropsProvider.js";
 import { u as ye } from "./useSlot.js";
 import { jsx as R, jsxs as he } from "react/jsx-runtime";
 import { u as De, F as _o } from "./useFormControl.js";

package/.chunks/x.js

@@ -0,0 +1,22 @@
+import { c } from "./createLucideIcon.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 o = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], d = c("check", o);
+/**
+ * @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 e = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+], n = c("x", e);
+export {
+  d as C,
+  n as X
+};

package/Button/Button.js

@@ -1,16 +1,16 @@
 import { jsxs as _, jsx as i } from "react/jsx-runtime";
 import * as S from "react";
-import { g as A, a as q, s, r as J, c as p, m as K, u as Q, b as R, P as t, d as X, e as $ } from "../.chunks/DefaultPropsProvider.js";
+import { g as A, a as q, s, r as J, c as p, j as K, u as Q, b as R, P as t, d as X, e as $ } from "../.chunks/DefaultPropsProvider.js";
 import { m as Y } from "../.chunks/memoTheme.js";
 import { c as Z } from "../.chunks/createSimplePaletteValueFilter.js";
-import { B as m } from "../.chunks/ButtonBase.js";
+import { B as h } from "../.chunks/ButtonBase.js";
 import { i as oo } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as g } from "../.chunks/emotion-react.browser.esm.js";
+import { c as v } from "../.chunks/emotion-react.browser.esm.js";
 import r from "../theme.js";
 function ro(o) {
   return A("MuiButton", o);
 }
-const v = q("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), E = /* @__PURE__ */ S.createContext({});
+const g = q("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), E = /* @__PURE__ */ S.createContext({});
 process.env.NODE_ENV !== "production" && (E.displayName = "ButtonGroupContext");
 const T = /* @__PURE__ */ S.createContext(void 0);
 process.env.NODE_ENV !== "production" && (T.displayName = "ButtonGroupButtonContext");
@@ -60,7 +60,7 @@ const to = (o) => {
       fontSize: 22
     }
   }
-}], ao = s(m, {
+}], ao = s(h, {
   shouldForwardProp: (o) => J(o) || o === "classes",
   name: "MuiButton",
   slot: "Root",
@@ -86,7 +86,7 @@ const to = (o) => {
     "&:hover": {
       textDecoration: "none"
     },
-    [`&.${v.disabled}`]: {
+    [`&.${g.disabled}`]: {
       color: (o.vars || o).palette.action.disabled
     },
     variants: [{
@@ -107,10 +107,10 @@ const to = (o) => {
         "&:active": {
           boxShadow: (o.vars || o).shadows[8]
         },
-        [`&.${v.focusVisible}`]: {
+        [`&.${g.focusVisible}`]: {
           boxShadow: (o.vars || o).shadows[6]
         },
-        [`&.${v.disabled}`]: {
+        [`&.${g.disabled}`]: {
           color: (o.vars || o).palette.action.disabled,
           boxShadow: (o.vars || o).shadows[0],
           backgroundColor: (o.vars || o).palette.action.disabledBackground
@@ -126,7 +126,7 @@ const to = (o) => {
         borderColor: "var(--variant-outlinedBorder, currentColor)",
         backgroundColor: "var(--variant-outlinedBg)",
         color: "var(--variant-outlinedColor)",
-        [`&.${v.disabled}`]: {
+        [`&.${g.disabled}`]: {
           border: `1px solid ${(o.vars || o).palette.action.disabledBackground}`
         }
       }
@@ -237,13 +237,13 @@ const to = (o) => {
         "&:hover": {
           boxShadow: "none"
         },
-        [`&.${v.focusVisible}`]: {
+        [`&.${g.focusVisible}`]: {
           boxShadow: "none"
         },
         "&:active": {
           boxShadow: "none"
         },
-        [`&.${v.disabled}`]: {
+        [`&.${g.disabled}`]: {
           boxShadow: "none"
         }
       }
@@ -298,7 +298,7 @@ const to = (o) => {
       marginRight: -2
     }
   }, ...P]
-}), W = /* @__PURE__ */ S.forwardRef(function(a, n) {
+}), j = /* @__PURE__ */ S.forwardRef(function(a, n) {
   const e = S.useContext(E), d = S.useContext(T), u = K(e, a), b = Q({
     props: u,
     name: "MuiButton"
@@ -306,7 +306,7 @@ const to = (o) => {
     children: x,
     color: f = "primary",
     component: l = "button",
-    className: h,
+    className: m,
     disabled: c = !1,
     disableElevation: C = !1,
     disableFocusRipple: k = !1,
@@ -340,7 +340,7 @@ const to = (o) => {
   }), U = d || "";
   return /* @__PURE__ */ _(ao, {
     ownerState: w,
-    className: R(e.className, y.root, h, U),
+    className: R(e.className, y.root, m, U),
     component: l,
     disabled: c,
     focusRipple: !k,
@@ -352,7 +352,7 @@ const to = (o) => {
     children: [H, x, D]
   });
 });
-process.env.NODE_ENV !== "production" && (W.propTypes = {
+process.env.NODE_ENV !== "production" && (j.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -446,14 +446,14 @@ process.env.NODE_ENV !== "production" && (W.propTypes = {
    */
   variant: t.oneOfType([t.oneOf(["contained", "outlined", "text"]), t.string])
 });
-const j = [
+const W = [
   "active",
   "customBackgroundColor",
   "customHoverColor",
   "customTextColor",
   "customShadow1",
   "customShadow2"
-], B = s(W, { shouldForwardProp: (o) => !j.includes(o) })`
+], B = s(j, { shouldForwardProp: (o) => !W.includes(o) })`
   text-transform: none;
   &:disabled {
     opacity: 0.5;
@@ -462,6 +462,10 @@ const j = [
     justify-content: center;
     align-items: center;
   }
+
+  span {
+    align-items: center !important;
+  }
 `, io = s(B)`
   background-color: ${r.colors.green};
   height: 2.5rem;
@@ -482,7 +486,7 @@ const j = [
     background-color: ${r.colors.darkGreen};
   }
 `, so = s(B, {
-  shouldForwardProp: (o) => !j.includes(o)
+  shouldForwardProp: (o) => !W.includes(o)
 })(
   ({
     customBackgroundColor: o = r.colors.green,
@@ -491,7 +495,7 @@ const j = [
     customShadow1: e = r.boxShadows.gray63,
     customShadow2: d = r.boxShadows.black63
   }) => ({
-    ...g`
+    ...v`
       background-color: ${o};
       border-radius: 0;
       height: 2.5rem;
@@ -533,7 +537,7 @@ const j = [
     background-color: ${r.colors.goldHover};
   }
 `, z = s(B)(({ width: o = "114px" }) => ({
-  ...g`
+  ...v`
     box-sizing: border-box;
     background-color: ${r.colors.bibiBlue};
     border-radius: 0;
@@ -551,7 +555,7 @@ const j = [
     }
   `
 })), co = s(z)(({ active: o }) => ({
-  ...g`
+  ...v`
     background-color: ${o && r.colors.white};
     color: ${o && r.colors.bibiBlue};
     &:hover,
@@ -561,7 +565,7 @@ const j = [
     }
   `
 })), po = s(z)(() => ({
-  ...g`
+  ...v`
     background-color: ${r.colors.white};
     color: ${r.colors.bibiBlue};
     &:hover,
@@ -571,13 +575,13 @@ const j = [
       color: ${r.colors.white};
     }
   `
-})), uo = s(m)`
+})), uo = s(h)`
   display: block;
-`, bo = s(m, {
+`, bo = s(h, {
   shouldForwardProp: (o) => typeof o == "string" && oo(o)
 })(
   ({ size: o, color: a, highlightColor: n, hoverColor: e }) => ({
-    ...g`
+    ...v`
       display: flex;
       align-items: center;
       justify-content: center;
@@ -601,8 +605,8 @@ const j = [
       }
     `
   })
-), vo = s(B)(({ active: o }) => ({
-  ...g`
+), go = s(B)(({ active: o }) => ({
+  ...v`
     box-sizing: border-box;
     background-color: ${o ? r.colors.black : r.colors.white};
     height: 28px;
@@ -620,7 +624,7 @@ const j = [
       background-color: ${o ? r.colors.charcoal : r.colors.gray2};
     }
   `
-})), ho = ({
+})), mo = ({
   variant: o = 1,
   size: a = 50,
   color: n = r.colors.darkGreen,
@@ -631,7 +635,7 @@ const j = [
   customShadow1: x = r.boxShadows.gray63,
   customShadow2: f = r.boxShadows.black63,
   children: l,
-  active: h,
+  active: m,
   ...c
 }) => o === "custom" ? /* @__PURE__ */ i(
   so,
@@ -645,8 +649,8 @@ const j = [
     ...c,
     children: l
   }
-) : o === "bibi" ? /* @__PURE__ */ i(z, { ...c, children: l }) : o === "bibiOutlined" ? /* @__PURE__ */ i(co, { ...c, children: l }) : o === "bibiInverse" ? /* @__PURE__ */ i(po, { ...c, children: l }) : o === "unstyled" ? /* @__PURE__ */ i(uo, { ...c, children: l }) : o === 2 ? /* @__PURE__ */ i(lo, { ...c, children: /* @__PURE__ */ i("span", { children: l }) }) : o === "icon" ? /* @__PURE__ */ i(bo, { className: "jcIconButton", ...{ size: a, color: n, highlightColor: e, hoverColor: d }, ...c, children: l }) : o === "filter" ? /* @__PURE__ */ i(vo, { className: "jcFilterButton", active: h, ...c, children: l }) : /* @__PURE__ */ i(io, { ...c, children: /* @__PURE__ */ i("span", { children: l }) });
+) : o === "bibi" ? /* @__PURE__ */ i(z, { ...c, children: l }) : o === "bibiOutlined" ? /* @__PURE__ */ i(co, { ...c, children: l }) : o === "bibiInverse" ? /* @__PURE__ */ i(po, { ...c, children: l }) : o === "unstyled" ? /* @__PURE__ */ i(uo, { ...c, children: l }) : o === 2 ? /* @__PURE__ */ i(lo, { ...c, children: /* @__PURE__ */ i("span", { children: l }) }) : o === "icon" ? /* @__PURE__ */ i(bo, { className: "jcIconButton", ...{ size: a, color: n, highlightColor: e, hoverColor: d }, ...c, children: l }) : o === "filter" ? /* @__PURE__ */ i(go, { className: "jcFilterButton", active: m, ...c, children: l }) : /* @__PURE__ */ i(io, { ...c, children: /* @__PURE__ */ i("span", { children: l }) });
 export {
-  ho as Button,
-  ho as default
+  mo as Button,
+  mo as default
 };

package/CircularIconButton/CircularIconButton.js

@@ -1,8 +1,9 @@
 import { jsx as e } from "react/jsx-runtime";
-import { n as c } from "../.chunks/emotion-styled.browser.esm.js";
+import { n as i } from "../.chunks/emotion-styled.browser.esm.js";
 import { c as a } from "../.chunks/emotion-react.browser.esm.js";
-import n from "../theme.js";
-const l = c("div")(({ backgroundColor: t, size: r, color: o }) => ({
+import l from "../theme.js";
+import { useThemeColors as m } from "../ThemeContext.js";
+const u = i("div")(({ backgroundColor: t, size: r, color: o }) => ({
   ...a`
     background-color: ${t};
     color: ${o};
@@ -21,22 +22,25 @@ const l = c("div")(({ backgroundColor: t, size: r, color: o }) => ({
       transform: scale(1.1);
     }
   `
-})), d = ({
-  color: t = n.colors.white,
-  backgroundColor: r = n.colors.green,
+})), x = ({
+  color: t = l.colors.white,
+  backgroundColor: r,
   size: o = 20,
-  onClick: s,
-  icon: i
-}) => /* @__PURE__ */ e(
-  l,
-  {
-    color: t,
-    backgroundColor: r,
-    size: o * 1.2,
-    onClick: s,
-    children: /* @__PURE__ */ e(i, { size: o * 0.8 })
-  }
-);
+  onClick: n,
+  icon: s
+}) => {
+  const c = m();
+  return /* @__PURE__ */ e(
+    u,
+    {
+      color: t,
+      backgroundColor: r || c.themeIconBackgroundA,
+      size: o * 1.2,
+      onClick: n,
+      children: /* @__PURE__ */ e(s, { size: o * 0.8 })
+    }
+  );
+};
 export {
-  d as default
+  x as default
 };

package/DefaultTemplate/DefaultTemplate.js

@@ -109,7 +109,7 @@ const _ = ({
     }),
     [e]
   );
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(z.Provider, { value: e, children: /* @__PURE__ */ r(
     O,
     {
       ...n,
@@ -129,12 +129,12 @@ const _ = ({
               /* @__PURE__ */ r(L, { color: e.themeLight }),
               /* @__PURE__ */ r(j, { hasPagination: m, isMobile: x, color: e.themeLight })
             ] }),
-            /* @__PURE__ */ r(z.Provider, { value: e, children: /* @__PURE__ */ r(H, { children: o }) })
+            /* @__PURE__ */ r(H, { children: o })
           ] })
         }
       )
     }
-  );
+  ) });
 };
 export {
   H as MainContentContainer,

package/DetailItemWithIcon/DetailItemWithIcon.js

@@ -1,31 +1,43 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { n as e } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as m } from "../.chunks/emotion-react.browser.esm.js";
-import c from "../theme.js";
-import { Flex as t } from "../Flex/Flex.js";
+import { jsx as o, jsxs as t } 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 s from "../theme.js";
+import { Flex as m } from "../Flex/Flex.js";
 import { DetailItemContainer as p } from "../DetailPageComponents/DetailPageComponents.js";
-import s from "../SquareIcon/SquareIcon.js";
-const f = e("p")(() => ({
-  ...m`
+import h from "../SquareIcon/SquareIcon.js";
+import { useThemeColors as f } from "../ThemeContext.js";
+const d = n("p")(() => ({
+  ...i`
     font-size: 0.875rem;
     font-weight: 500;
-    color: ${c.colors.charcoal} !important;
+    color: ${s.colors.charcoal} !important;
     margin: 0;
     margin-bottom: 0.25rem;
   `
-})), d = e("p")(() => ({
-  ...m`
+})), u = n("p")(() => ({
+  ...i`
     font-size: 1rem;
     word-wrap: break-word;
     margin: 0;
   `
-})), b = ({ icon: i, iconSize: n = 20, label: a, value: l }) => /* @__PURE__ */ r(p, { children: /* @__PURE__ */ o(t, { gap: "19px", children: [
-  /* @__PURE__ */ r(s, { icon: i, iconSize: n }),
-  /* @__PURE__ */ o(t, { column: !0, children: [
-    /* @__PURE__ */ r(f, { children: a }),
-    /* @__PURE__ */ r(d, { children: l })
-  ] })
-] }) });
+})), j = (r) => /* @__PURE__ */ o(I, { ...r }), I = ({ icon: r, iconSize: c = 20, label: a, value: l }) => {
+  const e = f();
+  return /* @__PURE__ */ o(p, { children: /* @__PURE__ */ t(m, { gap: "19px", children: [
+    /* @__PURE__ */ o(
+      h,
+      {
+        icon: r,
+        iconSize: c,
+        backgroundColor: e.themeIconBackgroundA,
+        color: e.themeIconColorA
+      }
+    ),
+    /* @__PURE__ */ t(m, { column: !0, children: [
+      /* @__PURE__ */ o(d, { children: a }),
+      /* @__PURE__ */ o(u, { children: l })
+    ] })
+  ] }) });
+};
 export {
-  b as default
+  j as default
 };

package/DetailPageComponents/DetailPageComponents.d.ts

@@ -1,3 +1,8 @@
+import { CustomThemeProps } from '../../../../../../../../../src/components/theme';
+import { PropsWithChildren } from 'react';
+interface WithCustomTheme {
+    customTheme: CustomThemeProps;
+}
 export declare const DetailHeader: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
@@ -10,15 +15,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: import('@emotion/styled').StyledComponent<{
+export declare const DetailItemContainer: React.FC<PropsWithChildren>;
+export declare const DetailItemContainerStyles: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & WithCustomTheme, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface DetailiconProps {
     iconColor?: string;
     backgroundColor?: string;
 }
-export declare const DetailHeaderIcon: import('@emotion/styled').StyledComponent<{
+export declare const DetailHeaderIcon: React.FC<PropsWithChildren & DetailiconProps>;
+export declare const DetailHeaderIconStyles: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-} & DetailiconProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & DetailiconProps & WithCustomTheme, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/DetailPageComponents/DetailPageComponents.js

@@ -1,8 +1,10 @@
-import { n as o } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as t } from "../.chunks/emotion-react.browser.esm.js";
-import e from "../theme.js";
-const p = o("div")(() => ({
-  ...t`
+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`
     display: flex;
     flex-direction: column;
     padding: 27px 0;
@@ -12,7 +14,7 @@ const p = o("div")(() => ({
       font-size: 36px;
     }
 
-    border-bottom: 1px solid ${e.colors.gray2};
+    border-bottom: 1px solid ${t.colors.gray2};
 
     button {
       font-size: 1rem;
@@ -24,9 +26,9 @@ const p = o("div")(() => ({
       }
     }
   `
-})), s = o("p")(() => ({
-  ...t`
-    color: ${e.colors.gray};
+})), u = i("p")(() => ({
+  ...r`
+    color: ${t.colors.gray};
     line-height: 1;
     display: flex;
     align-items: flex-end;
@@ -37,8 +39,8 @@ const p = o("div")(() => ({
       width: 18px;
     }
   `
-})), d = o("h2")(() => ({
-  ...t`
+})), b = i("h2")(() => ({
+  ...r`
     font-size: 27px;
     font-weight: 600;
     text-align: left;
@@ -51,13 +53,18 @@ const p = o("div")(() => ({
       margin-right: 9px;
     }
   `
-})), x = o("div")(() => ({
-  ...t`
-    font-family: ${e.fonts.roboto};
+})), 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};
     display: flex;
     flex-direction: column;
     gap: 13px;
-    background: ${e.colors.veryLightGray};
+    background: ${t.colors.veryLightGray};
     border-radius: 6px;
     padding: 21px;
     margin-bottom: 15px;
@@ -66,7 +73,7 @@ const p = o("div")(() => ({
     overflow: hidden;
 
     p {
-      color: ${e.colors.gray};
+      color: ${t.colors.gray};
       font-size: 18px;
       line-height: 1;
       display: flex;
@@ -90,7 +97,7 @@ const p = o("div")(() => ({
       left: 0;
       width: 100%;
       height: 1px;
-      background: linear-gradient(90deg, ${e.colors.gold}, ${e.colors.green});
+      background: linear-gradient(90deg, ${t.colors.gold}, ${e.themeIconBackgroundA});
     }
 
     &::after {
@@ -100,16 +107,23 @@ const p = o("div")(() => ({
       left: 0;
       width: 3px;
       height: 100%;
-      background: linear-gradient(180deg, ${e.colors.gold}, ${e.colors.green});
+      background: linear-gradient(180deg, ${t.colors.gold}, ${e.themeIconBackgroundA});
     }
   `
-})), g = o("div")(
-  ({ iconColor: i = e.colors.white, backgroundColor: r = e.colors.darkGreen }) => ({
-    ...t`
+})), w = ({
+  backgroundColor: e,
+  iconColor: o,
+  children: n
+}) => {
+  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`
       width: 72px;
       height: 72px;
-      background-color: ${r};
-      color: ${i};
+      background-color: ${o || n.themeDark};
+      color: ${e};
       border-radius: 36px;
       display: flex;
       align-items: center;
@@ -119,9 +133,11 @@ const p = o("div")(() => ({
   })
 );
 export {
-  p as DetailHeader,
-  g as DetailHeaderIcon,
-  x as DetailItemContainer,
-  d as DetailItemHeader,
-  s as DetailSubtext
+  f as DetailHeader,
+  w as DetailHeaderIcon,
+  d as DetailHeaderIconStyles,
+  y as DetailItemContainer,
+  p as DetailItemContainerStyles,
+  b as DetailItemHeader,
+  u as DetailSubtext
 };

package/EditableDetailItemWithIcon/EditableDetailItemWithIcon.d.ts

@@ -10,6 +10,7 @@ export interface EditableDetailItemWithIconProps {
     onValueChange?: (newValue: string) => void;
     onSave?: () => void;
     onCancel?: () => void;
+    passedTheme?: any;
 }
 declare const EditableDetailItemWithIcon: React.FC<EditableDetailItemWithIconProps>;
 export default EditableDetailItemWithIcon;