lawgic-dev-kit 0.17.2 → 0.17.6

package/dist/components/atoms/TextInput/TextInput.js

@@ -6,21 +6,21 @@ const C = ({
   control: d,
   name: e,
   placeholder: c,
-  className: g = "",
+  className: x = "",
   disabled: t = !1,
   leftSide: a,
   rightSide: s,
-  translateKey: i = "",
-  ...x
+  translateKey: f = "",
+  ...g
 }) => {
   const {
-    field: { value: n = "", onChange: f, ref: p, onBlur: b },
+    field: { value: n = "", onChange: i, ref: p, onBlur: b },
     fieldState: { error: l }
-  } = j({ name: e, control: d }), { t: o } = w(), h = o(e), m = o(i);
+  } = j({ name: e, control: d }), { t: o } = w(), h = o(e), m = o(f);
   return /* @__PURE__ */ r.jsxs(
     "label",
     {
-      className: `flex flex-col group gap-8 select-none ${t && "cursor-not-allowed"} ${g}`,
+      className: `flex flex-col group gap-8 select-none ${t && "cursor-not-allowed"} ${x}`,
       htmlFor: e,
       children: [
         /* @__PURE__ */ r.jsx(
@@ -39,7 +39,7 @@ const C = ({
 				
 				${l && "border-red-500!"} 
 
-				bg-light
+				!bg-blue-50
 				
 				w-full h-full rounded-full border 
 				
@@ -61,11 +61,11 @@ const C = ({
                   disabled: t,
                   placeholder: c,
                   value: n,
-                  onChange: (y) => f(y.target.value),
+                  onChange: (y) => i(y.target.value),
                   onBlur: b,
                   ref: p,
                   className: "group bg-transparent w-full h-full font-600 placeholder:font-600 text-body-m disabled:text-gray-300 disabled:placeholder:text-gray-300 placeholder:text-gray-400 disabled:cursor-not-allowed overflow-visible outline-hidden",
-                  ...x
+                  ...g
                 }
               ),
               s && s

package/dist/components/molecules/CalendarSelector/CalendarSelector.d.ts

@@ -1,11 +1,14 @@
 import { default as React } from 'react';
+import { CalendarColor } from './CalendarSelector.styles';
 export type CalendarSelectorProps = {
     date: Date;
     onDateChange: (date: Date) => void;
     showTimeSelector?: boolean;
+    minDate?: Date;
     maxDate?: Date;
     futureDates?: boolean;
     pastDates?: boolean;
+    color?: CalendarColor;
 };
 declare const CalendarSelector: React.FC<CalendarSelectorProps>;
 export default CalendarSelector;

package/dist/components/molecules/CalendarSelector/CalendarSelector.js

@@ -1,146 +1,170 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { faChevronRight as se } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
-import { faChevronLeft as ae } from "../../../node_modules/@fortawesome/pro-solid-svg-icons/index.js";
-import { useState as u, useEffect as H, useRef as $ } from "react";
-import { FontAwesomeIcon as ie } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
+import { faChevronRight as le } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { faChevronLeft as ce } from "../../../node_modules/@fortawesome/pro-solid-svg-icons/index.js";
+import { useState as x, useEffect as I, useRef as U } from "react";
+import { FontAwesomeIcon as me } from "../../../node_modules/@fortawesome/react-fontawesome/index.es.js";
 import "../../../_virtual/lodash.js";
-import { useTheme as le } from "../../../hooks/useTheme.js";
-import Y from "../FloatingMenu/FloatingMenu.js";
-import ce from "./PeriodToggle.js";
-import me from "./TimeDisplay.js";
-import { faChevronDown as de } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
+import { useTheme as de } from "../../../hooks/useTheme.js";
+import R from "../FloatingMenu/FloatingMenu.js";
+import pe from "./PeriodToggle.js";
+import ue from "./TimeDisplay.js";
+import { faChevronDown as fe } from "../../../node_modules/@fortawesome/pro-regular-svg-icons/index.js";
+import { getColorVariants as ge } from "./CalendarSelector.styles.js";
 import "react-hook-form";
 import "../InformationContainer/InformationContainer.js";
 import "../../../constants/countries.js";
-import I from "../../atoms/IconButton/IconButton.js";
+import W from "../../atoms/IconButton/IconButton.js";
 import "../../atoms/ImageProfileInput/ImageProfileInput.validators.js";
 import "fuse.js";
-import { AnimatePresence as pe } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
-import { motion as B } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
-import { startOfWeek as ue } from "../../../node_modules/date-fns/startOfWeek.js";
-import { startOfMonth as fe } from "../../../node_modules/date-fns/startOfMonth.js";
-import { endOfWeek as xe } from "../../../node_modules/date-fns/endOfWeek.js";
-import { endOfMonth as he } from "../../../node_modules/date-fns/endOfMonth.js";
-import { eachDayOfInterval as ge } from "../../../node_modules/date-fns/eachDayOfInterval.js";
-import { isSameDay as Me } from "../../../node_modules/date-fns/isSameDay.js";
-import { isSameMonth as ye } from "../../../node_modules/date-fns/isSameMonth.js";
-import { isToday as ve } from "../../../node_modules/date-fns/isToday.js";
-import { subMonths as we } from "../../../node_modules/date-fns/subMonths.js";
-import { addMonths as be } from "../../../node_modules/date-fns/addMonths.js";
-import { setHours as U } from "../../../node_modules/date-fns/setHours.js";
-import { setMinutes as R } from "../../../node_modules/date-fns/setMinutes.js";
-import { setSeconds as L } from "../../../node_modules/date-fns/setSeconds.js";
-import { formatDate as f } from "../../../node_modules/date-fns/format.js";
-import { es as g } from "../../../node_modules/date-fns/locale/es.js";
-const nt = ({
-  date: c,
-  onDateChange: S,
-  showTimeSelector: _ = !0,
-  maxDate: M,
-  futureDates: W = !1,
-  pastDates: q = !0
+import { AnimatePresence as xe } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
+import { motion as _ } from "../../../node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
+import { startOfWeek as he } from "../../../node_modules/date-fns/startOfWeek.js";
+import { startOfMonth as Me } from "../../../node_modules/date-fns/startOfMonth.js";
+import { endOfWeek as ye } from "../../../node_modules/date-fns/endOfWeek.js";
+import { endOfMonth as ve } from "../../../node_modules/date-fns/endOfMonth.js";
+import { eachDayOfInterval as Ce } from "../../../node_modules/date-fns/eachDayOfInterval.js";
+import { isSameDay as we } from "../../../node_modules/date-fns/isSameDay.js";
+import { isSameMonth as be } from "../../../node_modules/date-fns/isSameMonth.js";
+import { isToday as je } from "../../../node_modules/date-fns/isToday.js";
+import { subMonths as Ne } from "../../../node_modules/date-fns/subMonths.js";
+import { addMonths as ke } from "../../../node_modules/date-fns/addMonths.js";
+import { setHours as B } from "../../../node_modules/date-fns/setHours.js";
+import { setMinutes as V } from "../../../node_modules/date-fns/setMinutes.js";
+import { setSeconds as q } from "../../../node_modules/date-fns/setSeconds.js";
+import { formatDate as h } from "../../../node_modules/date-fns/format.js";
+import { es as v } from "../../../node_modules/date-fns/locale/es.js";
+const ct = ({
+  date: p,
+  onDateChange: E,
+  showTimeSelector: z = !0,
+  minDate: u,
+  maxDate: C,
+  futureDates: G = !1,
+  pastDates: J = !0,
+  color: b = "blue"
 }) => {
-  const [i, y] = u(c), [E, w] = u(c), [v, k] = u(c.getHours() % 12 || 12), [b, A] = u(
-    c.getHours() >= 12 ? "PM" : "AM"
-  ), [C, P] = u(0), { t: z } = le(), [O, j] = u(!1), [T, D] = u(!1);
-  H(() => {
-    y(c), w(c), k(c.getHours() % 12 || 12), A(c.getHours() >= 12 ? "PM" : "AM");
-  }, [c]);
-  const G = () => {
-    P(-1), setTimeout(() => {
-      y(we(i));
+  const [n, w] = x(p), [O, j] = x(p), [f, Y] = x(p.getHours() % 12 || 12), [N, A] = x(
+    p.getHours() >= 12 ? "PM" : "AM"
+  ), [k, H] = x(0), { t: K } = de(), c = ge(b), [L, F] = x(!1), [$, S] = x(!1);
+  I(() => {
+    w(p), j(p), Y(p.getHours() % 12 || 12), A(p.getHours() >= 12 ? "PM" : "AM");
+  }, [p]);
+  const Q = () => {
+    H(-1), setTimeout(() => {
+      const t = Ne(n);
+      (!u || t >= u) && w(t);
     }, 10);
-  }, J = () => {
-    P(1), setTimeout(() => {
-      y(be(i, 1));
+  }, X = () => {
+    H(1), setTimeout(() => {
+      w(ke(n, 1));
     }, 10);
-  }, K = (t) => {
-    if (M && t > M)
+  }, Z = (t) => {
+    if (C && t > C || u && t < u)
       return;
-    const a = U(
-      R(L(t, 0), 0),
-      b === "AM" ? v % 12 : v % 12 + 12
+    const m = B(
+      V(q(t, 0), 0),
+      N === "AM" ? f % 12 : f % 12 + 12
     );
-    w(a), S(a);
-  }, Q = (t) => {
-    k(t);
-    const a = U(
-      R(L(E, 0), 0),
-      b === "AM" ? t % 12 : t % 12 + 12
+    j(m), E(m);
+  }, ee = (t) => {
+    Y(t);
+    const m = B(
+      V(q(O, 0), 0),
+      N === "AM" ? t % 12 : t % 12 + 12
     );
-    w(a), S(a), j(!1);
-  }, V = (t) => {
+    j(m), E(m), F(!1);
+  }, te = (t) => {
     A(t);
-  }, X = () => {
-    const t = /* @__PURE__ */ new Date(), a = 20, m = 5, [d, l] = u(() => Array.from({ length: a + 1 }, (r, n) => {
-      const o = new Date(t.getFullYear(), t.getMonth() - n, 1);
+  }, re = () => {
+    const t = /* @__PURE__ */ new Date(), m = 20, a = 5, [i, d] = x(() => Array.from({ length: m + 1 }, (r, l) => {
+      const o = new Date(t.getFullYear(), t.getMonth() - l, 1);
       return {
-        name: f(o, "MMMM", { locale: g }).replace(/^./, (s) => s.toUpperCase()),
+        name: h(o, "MMMM", { locale: v }).replace(
+          /^./,
+          (s) => s.toUpperCase()
+        ),
         index: o.getMonth(),
         year: o.getFullYear(),
-        displayName: `${f(o, "MMMM", { locale: g }).replace(
+        displayName: `${h(o, "MMMM", { locale: v }).replace(
           /^./,
           (s) => s.toUpperCase()
         )} ${o.getFullYear()}`
       };
-    })), x = $(null), p = $(null);
-    H(() => {
-      x.current && x.current.disconnect(), x.current = new IntersectionObserver((r) => {
-        r[0].isIntersecting && l((n) => {
-          const o = n[n.length - 1], s = new Date(o.year, o.index - 1, 1), re = Array.from({ length: m }, (Ce, ne) => {
-            const h = new Date(s.getFullYear(), s.getMonth() - ne, 1);
+    })), M = U(null), g = U(null);
+    I(() => {
+      M.current && M.current.disconnect(), M.current = new IntersectionObserver((r) => {
+        r[0].isIntersecting && d((l) => {
+          const o = l[l.length - 1], s = new Date(o.year, o.index - 1, 1), T = Array.from({ length: a }, (Fe, ie) => {
+            const y = new Date(
+              s.getFullYear(),
+              s.getMonth() - ie,
+              1
+            );
             return {
-              name: f(h, "MMMM", { locale: g }).replace(/^./, (F) => F.toUpperCase()),
-              index: h.getMonth(),
-              year: h.getFullYear(),
-              displayName: `${f(h, "MMMM", { locale: g }).replace(
+              name: h(y, "MMMM", { locale: v }).replace(
+                /^./,
+                (P) => P.toUpperCase()
+              ),
+              index: y.getMonth(),
+              year: y.getFullYear(),
+              displayName: `${h(y, "MMMM", { locale: v }).replace(
                 /^./,
-                (F) => F.toUpperCase()
-              )} ${h.getFullYear()}`
+                (P) => P.toUpperCase()
+              )} ${y.getFullYear()}`
             };
           });
-          return [...n, ...re];
+          return [...l, ...T];
         });
-      }), p.current && x.current.observe(p.current);
-    }, [d]);
-    const N = (r, n) => {
-      const o = new Date(i);
-      o.setMonth(r), o.setFullYear(n), y(o), D(!1);
+      }), g.current && M.current.observe(g.current);
+    }, [i]);
+    const D = (r, l) => {
+      const o = new Date(n);
+      o.setMonth(r), o.setFullYear(l), (!u || o >= u) && w(o), S(!1);
     };
-    return /* @__PURE__ */ e.jsx("div", { className: "flex flex-col p-8 max-h-200 overflow-y-auto bg-light gap-4", children: d.map((r, n) => {
-      const o = n === d.length - 1;
+    return /* @__PURE__ */ e.jsx("div", { className: "flex flex-col p-8 max-h-200 overflow-y-auto bg-light gap-4", children: i.map((r, l) => {
+      const o = l === i.length - 1;
       return /* @__PURE__ */ e.jsx(
         "button",
         {
-          ref: o ? p : null,
-          onClick: () => N(r.index, r.year),
-          className: `text-start p-6 font-600 transition-all duration-100 rounded-lg hover:bg-gray-100 ${i.getMonth() === r.index && i.getFullYear() === r.year ? "bg-blue-100" : ""}`,
+          ref: o ? g : null,
+          onClick: () => D(r.index, r.year),
+          className: "text-start p-6 font-600 transition-all duration-100 rounded-lg",
+          style: {
+            backgroundColor: n.getMonth() === r.index && n.getFullYear() === r.year ? c.hoverLight : "transparent",
+            color: n.getMonth() === r.index && n.getFullYear() === r.year ? c.text : "inherit"
+          },
+          onMouseEnter: (s) => {
+            n.getMonth() === r.index && n.getFullYear() === r.year || (s.currentTarget.style.backgroundColor = "#F3F4F6");
+          },
+          onMouseLeave: (s) => {
+            n.getMonth() === r.index && n.getFullYear() === r.year || (s.currentTarget.style.backgroundColor = "transparent");
+          },
           children: r.displayName
         },
-        `${r.name}-${r.year}-${n}`
+        `${r.name}-${r.year}-${l}`
       );
     }) });
-  }, Z = () => /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center mb-8", children: [
+  }, oe = () => /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center mb-8", children: [
     /* @__PURE__ */ e.jsx(
-      Y,
+      R,
       {
-        open: T,
-        onClose: () => D(!1),
-        component: X,
+        open: $,
+        onClose: () => S(!1),
+        component: re,
         placement: "bottom",
         className: "!p-0 overflow-hidden bg-light",
         strategy: "fixed",
         children: /* @__PURE__ */ e.jsxs(
           "button",
           {
-            onClick: () => D(!T),
-            className: "hover:text-blue-500 transition-colors duration-150 flex gap-6 items-center",
+            onClick: () => S(!$),
+            className: "transition-colors duration-150 flex gap-6 items-center !text-black",
             children: [
-              /* @__PURE__ */ e.jsx("h4", { className: "text-header-4", children: f(i, "MMMM yyyy", { locale: g }).replace(
+              /* @__PURE__ */ e.jsx("h4", { className: "text-header-4", children: h(n, "MMMM yyyy", { locale: v }).replace(
                 /^./,
                 (t) => t.toUpperCase()
               ) }),
-              /* @__PURE__ */ e.jsx(ie, { icon: de, className: "w-12 h-12" })
+              /* @__PURE__ */ e.jsx(me, { icon: fe, className: "w-12 h-12" })
             ]
           }
         )
@@ -148,41 +172,40 @@ const nt = ({
     ),
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-8", children: [
       /* @__PURE__ */ e.jsx(
-        I,
+        W,
         {
           variant: "transparent",
-          color: "gray",
-          icon: ae,
-          onClick: G
+          color: b,
+          icon: ce,
+          onClick: Q
         }
       ),
       /* @__PURE__ */ e.jsx(
-        I,
+        W,
         {
           variant: "transparent",
-          color: "gray",
-          icon: se,
-          onClick: J
+          color: b,
+          icon: le,
+          onClick: X
         }
       )
     ] })
-  ] }), ee = () => {
-    const t = ue(fe(i)), a = xe(he(i)), m = ge({ start: t, end: a }), d = /* @__PURE__ */ new Date();
-    return d.setHours(0, 0, 0, 0), /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-7 gap-2", children: m.map((l, x) => {
-      const p = Me(l, E), N = ye(l, i), r = ve(l), n = l < d, o = l > d, s = !N || n && !q || o && !W || M && l > M;
+  ] }), ne = () => {
+    const t = he(Me(n)), m = ye(ve(n)), a = Ce({ start: t, end: m }), i = /* @__PURE__ */ new Date();
+    return i.setHours(0, 0, 0, 0), /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-7 gap-2", children: a.map((d, M) => {
+      const g = we(d, O), D = be(d, n), r = je(d), l = d < i, o = d > i, s = !D || l && !J || o && !G || u && d < u || C && d > C;
       return /* @__PURE__ */ e.jsx(
-        B.div,
+        _.div,
         {
           className: `
               p-2 text-center w-[40px] h-[40px] rounded-full flex items-center justify-center font-600 select-none
               ${s ? "text-gray-400 pointer-events-none" : "cursor-pointer"}
-              ${r && !p ? "text-blue-600" : ""}
             `,
-          onClick: () => !s && K(l),
+          onClick: () => !s && Z(d),
           initial: !1,
           animate: {
-            backgroundColor: p ? "#93C5FD" : "transparent",
-            color: p ? "#FFFFFF" : r ? "#2563EB" : s ? "#9CA3AF" : "#000000"
+            backgroundColor: g ? c.primaryLight : "transparent",
+            color: g ? c.textLight : r ? c.text : s ? "#9CA3AF" : "#000000"
           },
           transition: {
             duration: 0.2,
@@ -192,62 +215,74 @@ const nt = ({
               ease: "easeOut"
             }
           },
-          whileHover: !s && !p ? {
-            backgroundColor: "#E5E7EB"
+          whileHover: !s && !g ? {
+            backgroundColor: c.hoverLight
           } : {},
           whileTap: s ? {} : {
-            backgroundColor: p ? "#7AA5E0" : "#D1D5DB"
+            backgroundColor: g ? c.primaryDark : c.hoverLight
           },
-          children: f(l, "d")
+          children: h(d, "d")
         },
-        x
+        M
       );
     }) });
-  }, te = () => {
-    const t = Array.from({ length: 12 }, (m, d) => d + 1), a = () => /* @__PURE__ */ e.jsx("div", { className: "bg-white rounded-lg shadow-lg w-80 max-h-[150px] overflow-y-auto p-4 flex flex-col gap-4", children: t.map((m) => /* @__PURE__ */ e.jsxs(
+  }, se = () => {
+    const t = Array.from({ length: 12 }, (a, i) => i + 1), m = () => /* @__PURE__ */ e.jsx("div", { className: "bg-white rounded-lg shadow-lg w-80 max-h-[150px] overflow-y-auto p-4 flex flex-col gap-4", children: t.map((a) => /* @__PURE__ */ e.jsxs(
       "button",
       {
-        onClick: () => Q(m),
-        className: `w-full text-center py-2 transition-all duration-100 rounded-lg hover:bg-gray-100 ${m === v ? "text-blue-500 font-medium" : ""}`,
+        onClick: () => ee(a),
+        className: "w-full text-center py-2 transition-all duration-100 rounded-lg",
+        style: {
+          backgroundColor: a === f ? c.hoverLight : "transparent",
+          color: a === f ? c.text : "inherit",
+          fontWeight: a === f ? "500" : "normal"
+        },
+        onMouseEnter: (i) => {
+          a !== f && (i.currentTarget.style.backgroundColor = "#F3F4F6");
+        },
+        onMouseLeave: (i) => {
+          a !== f && (i.currentTarget.style.backgroundColor = "transparent");
+        },
         children: [
-          String(m).padStart(2, "0"),
+          String(a).padStart(2, "0"),
           ":00"
         ]
       },
-      m
+      a
     )) });
     return /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center mt-4 mb-4", children: [
-      /* @__PURE__ */ e.jsx("h4", { className: "text-body-m font-medium", children: z("time") }),
+      /* @__PURE__ */ e.jsx("h4", { className: "text-body-m font-medium", children: K("time") }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-6", children: [
         /* @__PURE__ */ e.jsx(
-          Y,
+          R,
           {
-            open: O,
-            onClose: () => j(!1),
-            component: a,
+            open: L,
+            onClose: () => F(!1),
+            component: m,
             placement: "bottom",
             className: "!p-0 overflow-hidden",
             strategy: "fixed",
             children: /* @__PURE__ */ e.jsx(
-              me,
+              ue,
               {
-                setHourMenuOpen: j,
-                hourMenuOpen: O,
-                selectedHour: v
+                setHourMenuOpen: F,
+                hourMenuOpen: L,
+                selectedHour: f
               }
             )
           }
         ),
         /* @__PURE__ */ e.jsx(
-          ce,
+          pe,
           {
-            selectedPeriod: b,
-            handlePeriodChange: V
+            selectedPeriod: N,
+            handlePeriodChange: te,
+            colorVariants: c
           }
         )
       ] })
     ] });
-  }, oe = {
+  }, ae = {
     slideNextEnter: {
       x: 300,
       opacity: 0
@@ -282,22 +317,22 @@ const nt = ({
     }
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "rounded-3xl max-w-[300px] mx-auto bg-white p-24 relative overflow-hidden", children: [
-    Z(),
-    /* @__PURE__ */ e.jsx(pe, { initial: !1, mode: "popLayout", children: /* @__PURE__ */ e.jsx(
-      B.div,
+    oe(),
+    /* @__PURE__ */ e.jsx(xe, { initial: !1, mode: "popLayout", children: /* @__PURE__ */ e.jsx(
+      _.div,
       {
-        variants: oe,
-        initial: C === 1 ? "slideNextEnter" : C === -1 ? "slidePrevEnter" : !1,
+        variants: ae,
+        initial: k === 1 ? "slideNextEnter" : k === -1 ? "slidePrevEnter" : !1,
         animate: "center",
-        exit: C === 1 ? "slideNextExit" : "slidePrevExit",
+        exit: k === 1 ? "slideNextExit" : "slidePrevExit",
         className: "w-full",
-        children: ee()
+        children: ne()
       },
-      f(i, "yyyy-MM")
+      h(n, "yyyy-MM")
     ) }),
-    _ && te()
+    z && se()
   ] });
 };
 export {
-  nt as default
+  ct as default
 };

package/dist/components/molecules/CalendarSelector/CalendarSelector.styles.d.ts

@@ -0,0 +1,36 @@
+export declare const blueVariants: {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    hover: string;
+    hoverLight: string;
+    text: string;
+    textLight: string;
+};
+export declare const aquaVariants: {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    hover: string;
+    hoverLight: string;
+    text: string;
+    textLight: string;
+};
+export type CalendarColor = 'blue' | 'aqua';
+export declare const getColorVariants: (color: CalendarColor) => {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    hover: string;
+    hoverLight: string;
+    text: string;
+    textLight: string;
+} | {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    hover: string;
+    hoverLight: string;
+    text: string;
+    textLight: string;
+};

package/dist/components/molecules/CalendarSelector/CalendarSelector.styles.js

@@ -0,0 +1,37 @@
+const t = {
+  primary: "#375ABC",
+  // blue-600
+  primaryLight: "#8FA9F3",
+  // blue-300
+  primaryDark: "#29438D",
+  // blue-700
+  hover: "#4570EB",
+  // blue-500
+  hoverLight: "#ECF1FD",
+  // blue-100
+  text: "#375ABC",
+  // blue-600
+  textLight: "#FFFFFF"
+}, F = {
+  primary: "#06B6D4",
+  // cyan-500
+  primaryLight: "#67E8F9",
+  // cyan-300
+  primaryDark: "#0891B2",
+  // cyan-600
+  hover: "#0891B2",
+  // cyan-600
+  hoverLight: "#CFFAFE",
+  // cyan-100
+  text: "#06B6D4",
+  // cyan-500
+  textLight: "#FFFFFF"
+}, a = (r) => ({
+  blue: t,
+  aqua: F
+})[r];
+export {
+  F as aquaVariants,
+  t as blueVariants,
+  a as getColorVariants
+};

package/dist/components/molecules/CalendarSelector/PeriodToggle.d.ts

@@ -1,6 +1,15 @@
 interface PeriodToggleProps {
     selectedPeriod: string;
     handlePeriodChange: (period: string) => void;
+    colorVariants?: {
+        primary: string;
+        primaryLight: string;
+        primaryDark: string;
+        hover: string;
+        hoverLight: string;
+        text: string;
+        textLight: string;
+    };
 }
-declare const PeriodToggle: ({ selectedPeriod, handlePeriodChange, }: PeriodToggleProps) => import("react/jsx-runtime").JSX.Element;
+declare const PeriodToggle: ({ selectedPeriod, handlePeriodChange, colorVariants, }: PeriodToggleProps) => import("react/jsx-runtime").JSX.Element;
 export default PeriodToggle;