jcicl 1.0.3 → 1.0.7

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 })
-  }
-);
+  icon: n
+}) => {
+  const c = m();
+  return /* @__PURE__ */ e(
+    u,
+    {
+      color: t,
+      backgroundColor: r || c.themeColor,
+      size: o * 1.2,
+      onClick: s,
+      children: /* @__PURE__ */ e(n, { 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;

package/EditableDetailItemWithIcon/EditableDetailItemWithIcon.js

@@ -1,28 +1,29 @@
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import { useState as y } from "react";
-import { n as h } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as k } from "../.chunks/emotion-react.browser.esm.js";
-import o from "../theme.js";
-import { Flex as c } from "../Flex/Flex.js";
-import { Input as x } from "../Input/Input.js";
-import { DetailItemContainer as C } from "../DetailPageComponents/DetailPageComponents.js";
-import I from "../SquareIcon/SquareIcon.js";
-import l from "../SquareIconButton/SquareIconButton.js";
-import { c as a } from "../.chunks/createLucideIcon.js";
+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";
 /**
  * @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 G = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], _ = a("check", G);
+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 z = [
+const j = [
   [
     "path",
     {
@@ -31,88 +32,88 @@ const z = [
     }
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
-], D = a("pencil", z);
+], 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 j = [
+const L = [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], A = a("x", j), L = h("p")(() => ({
-  ...k`
+], N = s("x", L), S = k("p")(() => ({
+  ...g`
     font-size: 0.875rem;
     font-weight: 500;
-    color: ${o.colors.charcoal} !important;
+    color: ${r.colors.charcoal} !important;
     margin: 0;
     margin-bottom: 0.25rem;
   `
-})), N = h("p")(() => ({
-  ...k`
+})), W = k("p")(() => ({
+  ...g`
     font-size: 1rem;
     word-wrap: break-word;
     margin: 0;
   `
-})), H = ({
-  icon: u,
-  iconSize: g = 20,
-  onValueChange: s,
-  onSave: m,
-  onCancel: d,
-  customEditForm: n,
-  editButtonMarginTop: p,
+})), O = (i) => /* @__PURE__ */ o($, { ...i }), $ = ({
+  icon: i,
+  iconSize: I = 20,
+  onValueChange: p,
+  onSave: d,
+  onCancel: h,
+  customEditForm: l,
+  editButtonMarginTop: f,
   label: b,
-  value: f
+  value: u
 }) => {
-  const [e, i] = y(!1);
-  return /* @__PURE__ */ r(C, { children: /* @__PURE__ */ t(c, { gap: "19px", children: [
-    /* @__PURE__ */ r(
-      I,
+  const [e, a] = y(!1), t = _();
+  return /* @__PURE__ */ o(x, { children: /* @__PURE__ */ c(n, { gap: "19px", children: [
+    /* @__PURE__ */ o(
+      B,
       {
-        icon: u,
-        iconSize: g,
-        color: o.colors.darkGreen,
-        backgroundColor: o.colors.whiteGreenA
+        icon: i,
+        iconSize: I,
+        color: t.themeIconColorB,
+        backgroundColor: t.themeIconBackgroundB
       }
     ),
-    /* @__PURE__ */ t(c, { justifyContent: "space-between", width: "100%", gap: "12px", children: [
-      /* @__PURE__ */ t(c, { column: !0, styles: { flexGrow: 1 }, children: [
-        /* @__PURE__ */ r(L, { children: b }),
-        !e && /* @__PURE__ */ r(N, { children: f }),
-        e && !n && /* @__PURE__ */ r(x, { defaultValue: f, onChange: (w) => s && s(w.target.value) }),
-        e && n && n
+    /* @__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
       ] }),
-      !e && /* @__PURE__ */ r(
-        l,
+      !e && /* @__PURE__ */ o(
+        m,
         {
-          backgroundColor: o.colors.whiteGreenA,
-          color: o.colors.darkGreen,
-          icon: D,
-          onClick: () => i(!0)
+          backgroundColor: t.themeIconBackgroundB,
+          color: t.themeIconColorB,
+          icon: G,
+          onClick: () => a(!0)
         }
       ),
-      e && /* @__PURE__ */ t(c, { gap: "9px", styles: { marginTop: p || "0" }, children: [
-        /* @__PURE__ */ r(
-          l,
+      e && /* @__PURE__ */ c(n, { gap: "9px", styles: { marginTop: f || "0" }, children: [
+        /* @__PURE__ */ o(
+          m,
           {
-            backgroundColor: o.colors.cherryBlossom,
-            color: o.colors.maroon,
-            icon: A,
+            backgroundColor: r.colors.cherryBlossom,
+            color: r.colors.maroon,
+            icon: N,
             onClick: () => {
-              i(!1), d && d();
+              a(!1), h && h();
             }
           }
         ),
-        /* @__PURE__ */ r(
-          l,
+        /* @__PURE__ */ o(
+          m,
           {
-            icon: _,
-            backgroundColor: o.colors.whiteGreenA,
-            color: o.colors.darkGreen,
+            icon: z,
+            backgroundColor: r.colors.whiteGreenA,
+            color: r.colors.darkGreen,
             onClick: () => {
-              i(!1), m && m();
+              a(!1), d && d();
             }
           }
         )
@@ -121,5 +122,5 @@ const j = [
   ] }) });
 };
 export {
-  H as default
+  O as default
 };