jcicl 1.0.5 → 1.0.9

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
 };

package/SquareIconButton/SquareIconButton.js

@@ -1,9 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
 import { n as c } from "../.chunks/emotion-styled.browser.esm.js";
-import { c as l } from "../.chunks/emotion-react.browser.esm.js";
-import n from "../theme.js";
-const a = c("button")(({ backgroundColor: r, color: e, size: o }) => ({
-  ...l`
+import { c as a } from "../.chunks/emotion-react.browser.esm.js";
+import l from "../theme.js";
+import { useThemeColors as u } from "../ThemeContext.js";
+const m = c("button")(({ backgroundColor: r, color: e, size: o }) => ({
+  ...a`
     width: ${o}px;
     height: ${o}px;
     background-color: ${r};
@@ -31,13 +32,25 @@ const a = c("button")(({ backgroundColor: r, color: e, size: o }) => ({
       }
     }
   `
-})), d = ({
-  color: r = n.colors.white,
-  backgroundColor: e = n.colors.green,
+})), g = ({
+  color: r = l.colors.white,
+  backgroundColor: e,
   size: o = 20,
-  onClick: s,
-  icon: i
-}) => /* @__PURE__ */ t(a, { backgroundColor: e, color: r, size: o * 2, onClick: s, children: /* @__PURE__ */ t(i, { size: o }) });
+  onClick: n,
+  icon: s
+}) => {
+  const i = u();
+  return /* @__PURE__ */ t(
+    m,
+    {
+      backgroundColor: e || i.themeIconBackgroundA,
+      color: r,
+      size: o * 2,
+      onClick: n,
+      children: /* @__PURE__ */ t(s, { size: o })
+    }
+  );
+};
 export {
-  d as default
+  g as default
 };