trepur_components 2.3.23 → 2.3.25

package/lib/components/Button/Button.stories.d.ts

@@ -24,3 +24,6 @@ export declare const Ghost: Story;
 export declare const Basic: Story;
 export declare const Loading: Story;
 export declare const Link: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;

package/lib/components/Button/index.d.ts

@@ -4,9 +4,10 @@ export interface ButtonProps {
     variant?: 'primary' | 'secondary' | 'ghost' | 'bordered' | 'basic';
     disabled?: boolean;
     loading?: boolean;
-    type?: 'button' | 'link';
+    type?: 'button' | 'link' | 'submit';
     href?: string;
     target?: string;
+    size?: 'sm' | 'md' | 'lg';
 }
 declare const Button: import('react').ForwardRefExoticComponent<((HTMLAttributes<HTMLButtonElement> | HTMLAttributes<HTMLAnchorElement>) & ButtonProps) & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & {
     Icon: import('react').ForwardRefExoticComponent<{

package/lib/components/Button/index.js

@@ -1,26 +1,26 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { Icon as m } from "../Icon/index.js";
+import { Icon as g } from "../Icon/index.js";
 import s from "clsx";
-const g = n(({ children: o, ...e }) => /* @__PURE__ */ r("button", { type: "button", ...e, children: o })), h = n(({ children: o, ...e }) => /* @__PURE__ */ r("div", { className: "inline-block", children: /* @__PURE__ */ r("a", { type: "button", className: "inline-grid", ...e, children: o }) })), a = n(
+const l = n(({ children: o, ...e }) => /* @__PURE__ */ r("button", { type: "button", ...e, children: o })), x = n(({ children: o, ...e }) => /* @__PURE__ */ r("div", { className: "inline-block", children: /* @__PURE__ */ r("a", { type: "button", className: "inline-grid", ...e, children: o }) })), c = n(
   ({
     className: o,
     children: e,
     loading: t = !1,
     variant: b = "primary",
     type: i = "button",
-    disabled: y,
-    href: d,
+    disabled: h,
+    href: m,
     target: p,
-    ...l
+    size: a = "md"
   }) => /* @__PURE__ */ r(
-    i === "button" ? g : h,
+    i === "button" ? l : x,
     {
-      href: d,
+      href: m,
       target: p,
       disabled: t,
       className: s(
-        "font-regular flex items-center gap-2 rounded-lg border px-8 py-3 text-center text-lg",
+        "flex items-center gap-3 rounded border text-center",
         {
           "duration-200": !t,
           "border-button-primary-border bg-button-primary-bg text-button-primary-text hover:bg-button-primary-hover active:bg-button-primary-active": b === "primary" && !t,
@@ -28,20 +28,23 @@ const g = n(({ children: o, ...e }) => /* @__PURE__ */ r("button", { type: "butt
           "border-button-ghost-border bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": b === "ghost" && !t,
           "border-button-bordered-border text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": b === "bordered" && !t,
           "border-button-basic-border bg-button-basic-bg text-button-basic-text hover:bg-button-basic-hover active:bg-button-basic-active": b === "basic" && !t,
-          "w-40 animate-pulse border-loading bg-loading": t
+          "w-40 animate-pulse border-loading bg-loading": t,
+          "px-12 py-3 text-base font-normal leading-4": a === "sm",
+          "px-12 py-3 text-lg font-normal leading-8": a === "md",
+          "px-12 py-4 text-xl font-normal leading-8": a === "lg"
         },
         o
       ),
       children: !t && e
     }
   )
-), c = n(({ className: o, ...e }, t) => /* @__PURE__ */ r("p", { className: s("text-md", o), ref: t, ...e })), u = n(({ icon: o }, e) => /* @__PURE__ */ r(m, { size: "md", ref: e, icon: o }));
-a.displayName = "Button";
-u.displayName = "Button.Icon";
-c.displayName = "Button.Label";
-const I = Object.assign(a, {
-  Icon: u,
-  Label: c
+), u = n(({ className: o, ...e }, t) => /* @__PURE__ */ r("p", { className: s("text-md", o), ref: t, ...e })), d = n(({ icon: o }, e) => /* @__PURE__ */ r(g, { size: "md", ref: e, icon: o }));
+c.displayName = "Button";
+d.displayName = "Button.Icon";
+u.displayName = "Button.Label";
+const I = Object.assign(c, {
+  Icon: d,
+  Label: u
 });
 export {
   I as Button

package/lib/components/Input/index.js

@@ -1,82 +1,82 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { createContext as I, forwardRef as s, useMemo as b, useRef as N, useContext as i } from "react";
-import h from "clsx";
-const d = I(null), u = s(({ children: n, errors: t, placeholder: e, ...r }, l) => {
-  const a = b(
+import { jsx as o, jsxs as I } from "react/jsx-runtime";
+import { createContext as b, forwardRef as a, useMemo as N, useRef as h, useContext as i } from "react";
+import m from "clsx";
+const d = b(null), p = a(({ children: r, errors: t, placeholder: n, ...e }, l) => {
+  const s = N(
     () => ({
       errors: t,
-      placeholder: e,
-      ...r
+      placeholder: n,
+      ...e
     }),
-    [t, r]
+    [t, e]
   );
-  return /* @__PURE__ */ o(d.Provider, { value: a, children: /* @__PURE__ */ o("div", { ref: l, children: n }) });
-}), m = s(
-  ({ children: n, ...t }, e) => {
-    const r = N(null);
+  return /* @__PURE__ */ o(d.Provider, { value: s, children: /* @__PURE__ */ o("div", { ref: l, children: r }) });
+}), u = a(
+  ({ children: r, ...t }, n) => {
+    const e = h(null);
     return /* @__PURE__ */ o(
       "div",
       {
         className: "mt-4 w-full",
         onClick: () => {
           var l;
-          return (l = r.current) == null ? void 0 : l.focus();
+          return (l = e.current) == null ? void 0 : l.focus();
         },
-        ref: e,
+        ref: n,
         ...t,
-        children: n
+        children: r
       }
     );
   }
-), p = s(({ children: n, required: t = !1 }, e) => /* @__PURE__ */ f(
+), c = a(({ className: r, children: t, required: n = !1 }, e) => /* @__PURE__ */ I(
   "div",
   {
     ref: e,
-    className: "text-md flex items-center rounded-2xl px-1 font-semibold",
+    className: m("flex px-1 text-sm font-normal leading-5", r),
     children: [
-      /* @__PURE__ */ o("p", { children: n }),
-      t && /* @__PURE__ */ o("p", { className: "font-semiBold text-lg", children: " *" })
+      /* @__PURE__ */ o("p", { children: t }),
+      n && /* @__PURE__ */ o("p", { className: "text-sm font-normal", children: " *" })
     ]
   }
-)), c = s(
-  ({ ...n }) => {
-    const { errors: t, placeholder: e } = i(d) || {};
+)), x = a(
+  ({ ...r }) => {
+    const { errors: t, placeholder: n } = i(d) || {};
     return /* @__PURE__ */ o(
       "input",
       {
-        placeholder: e,
-        className: h(
+        placeholder: n,
+        className: m(
           "text-ink text-md w-full rounded-md border border-gray-300 bg-white py-2 pl-4",
           {
             "border-error border-2": t != null
           }
         ),
-        ...n
+        ...r
       }
     );
   }
-), x = s(({ children: n, ...t }, e) => {
-  const { errors: r } = i(d) || {};
+), f = a(({ children: r, ...t }, n) => {
+  const { errors: e } = i(d) || {};
   return /* @__PURE__ */ o(
     "div",
     {
-      ref: e,
+      ref: n,
       className: "text-md gap-y-2 pl-1 pt-2 font-semibold text-error-default",
       ...t,
-      children: r == null ? void 0 : r.map((l, a) => /* @__PURE__ */ o("p", { children: l }, `error-msg-${a + 1}`))
+      children: e == null ? void 0 : e.map((l, s) => /* @__PURE__ */ o("p", { children: l }, `error-msg-${s + 1}`))
     }
   );
 });
-u.displayName = "Input";
-m.displayName = "Input.Item";
-p.displayName = "Input.Label";
-c.displayName = "Input.Box";
-x.displayName = "Input.Validation";
-const C = Object.assign(u, {
-  Item: m,
-  Label: p,
-  Box: c,
-  Validation: x
+p.displayName = "Input";
+u.displayName = "Input.Item";
+c.displayName = "Input.Label";
+x.displayName = "Input.Box";
+f.displayName = "Input.Validation";
+const C = Object.assign(p, {
+  Item: u,
+  Label: c,
+  Box: x,
+  Validation: f
 });
 export {
   C as Input

package/lib/components/Nav/Nav.stories.d.ts

@@ -29,3 +29,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof Nav>;
 export declare const Default: Story;
+export declare const Loading: Story;

package/lib/components/Nav/index.d.ts

@@ -4,6 +4,7 @@ import { HTMLAttributes } from 'react';
 export interface NavContextProps {
     expanded?: boolean;
     setExpanded?: (val: boolean) => void;
+    loading?: boolean;
 }
 declare const Nav: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & NavContextProps & import('react').RefAttributes<HTMLDivElement>> & {
     Header: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/lib/components/Nav/index.js

@@ -1,117 +1,136 @@
-import { jsx as e, jsxs as i, Fragment as H } from "react/jsx-runtime";
-import { createContext as C, forwardRef as r, useState as m, useMemo as k, useContext as p, useRef as w } from "react";
+import { jsx as e, jsxs as c, Fragment as v } from "react/jsx-runtime";
+import { createContext as C, forwardRef as n, useState as N, useMemo as k, useContext as m, useRef as w } from "react";
 import { HamburgerIcon as M } from "../HamburgerIcon/index.js";
 import { faChevronDown as j } from "@fortawesome/fontawesome-free-solid";
-import d from "clsx";
+import l from "clsx";
 import { Icon as D } from "../Icon/index.js";
-const c = C(null), v = r(({ className: a, children: s }, t) => {
-  const [o, n] = m(!1), l = k(
+import { NavItem as F } from "../NavItem/index.js";
+const i = C(null), f = n(({ className: a, children: t, loading: r }, o) => {
+  const [s, d] = N(!1), p = k(
     () => ({
-      expanded: o,
-      setExpanded: n
+      expanded: s,
+      setExpanded: d,
+      loading: r
     }),
-    [o, n]
+    [s, d]
   );
-  return /* @__PURE__ */ e(c.Provider, { value: l, children: /* @__PURE__ */ e("div", { className: a, ref: t, children: s }) });
-}), N = r(
-  ({ className: a, children: s }, t) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(i.Provider, { value: p, children: /* @__PURE__ */ e("div", { className: a, ref: o, children: t }) });
+}), g = n(
+  ({ className: a, children: t }, r) => /* @__PURE__ */ e(
     "div",
     {
-      ref: t,
-      className: d("relative h-24 w-full bg-nav-bg px-2 py-2", a),
-      children: s
+      ref: r,
+      className: l("relative h-24 w-full bg-nav-bg px-2 py-2", a),
+      children: t
     }
   )
-), g = r(({ className: a, children: s }, t) => {
-  const { setExpanded: o, expanded: n } = p(c) || {};
-  return /* @__PURE__ */ i("div", { ref: t, className: d("flex h-full md:hidden", a), children: [
-    /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
+), u = n(({ className: a, children: t }, r) => {
+  const { loading: o, setExpanded: s, expanded: d } = m(i) || {};
+  return /* @__PURE__ */ c("div", { ref: r, className: l("flex h-full md:hidden", a), children: [
+    !o && /* @__PURE__ */ e("div", { className: "my-auto", children: /* @__PURE__ */ e(
       M,
       {
         variant: "ghost",
-        onClick: () => o == null ? void 0 : o(!n),
+        onClick: () => s == null ? void 0 : s(!d),
         className: "aspect-square"
       }
     ) }),
-    /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: s })
+    /* @__PURE__ */ e("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: t })
   ] });
-}), f = r(({ className: a, children: s }, t) => /* @__PURE__ */ e(
+}), x = n(({ className: a, children: t }, r) => /* @__PURE__ */ e(
   "div",
   {
-    ref: t,
-    className: d(
+    ref: r,
+    className: l(
       "hidden justify-between md:flex md:gap-4 md:px-4 lg:gap-8 lg:px-20",
       a
     ),
-    children: s
+    children: t
   }
-)), u = r(
-  ({ className: a, children: s }, t) => {
-    const { expanded: o } = p(c) || {};
+)), h = n(
+  ({ className: a, children: t }, r) => {
+    const { expanded: o } = m(i) || {};
     return o ? /* @__PURE__ */ e(
       "div",
       {
-        ref: t,
-        className: d(
+        ref: r,
+        className: l(
           "h-screen bg-nav-bg px-8 pb-12 pt-2 md:hidden",
           a
         ),
-        children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:hidden", children: s })
+        children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:hidden", children: t })
       }
-    ) : /* @__PURE__ */ e(H, {});
+    ) : /* @__PURE__ */ e(v, {});
   }
-), x = r(
-  ({ className: a, children: s }, t) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: t,
-      className: d("my-4 md:flex md:gap-4 lg:gap-8", a),
-      children: s
-    }
-  )
-), h = r(({ className: a, label: s, children: t, active: o = !1 }) => {
-  const [n, l] = m(!1), y = w(null);
-  return /* @__PURE__ */ i(
+), b = n(
+  ({ className: a, children: t }, r) => {
+    const { loading: o } = m(i) || {};
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: r,
+        className: l("my-4 md:flex md:gap-4 lg:gap-6", a),
+        children: /* @__PURE__ */ c(v, { children: [
+          o && [...Array(5)].map((s) => /* @__PURE__ */ e(F, { loading: !0 })),
+          !o && t
+        ] })
+      }
+    );
+  }
+), y = n(({ className: a, label: t, children: r, active: o = !1 }) => {
+  const [s, d] = N(!1), p = w(null);
+  return /* @__PURE__ */ c(
     "div",
     {
-      ref: y,
-      onClick: () => l(!0),
-      onMouseLeave: () => l(!1),
-      className: d(
-        "relative m-auto text-xl tracking-wider text-nav-text hover:cursor-pointer",
+      ref: p,
+      onClick: () => d(!0),
+      onMouseLeave: () => d(!1),
+      className: l(
+        "relative m-auto py-0 text-nav-text after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
         {
           "font-bold": o,
-          "font-normal": !o
+          "font-light": !o
         },
         a
       ),
       children: [
-        /* @__PURE__ */ i("div", { className: "flex items-center gap-px ", children: [
-          /* @__PURE__ */ e("p", { children: s }),
-          /* @__PURE__ */ e(D, { icon: j })
+        /* @__PURE__ */ c("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ e("p", { className: "text-lg", children: t }),
+          /* @__PURE__ */ e(D, { size: "xs", icon: j })
         ] }),
-        n && /* @__PURE__ */ e("div", { className: "absolute -left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-y-2 bg-nav-bg px-4 py-4", children: t }) })
+        s && /* @__PURE__ */ e("div", { className: "absolute -left-5 top-7 z-50 w-40 bg-nav-bg", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-y-2 bg-nav-bg px-4 py-4", children: r }) })
       ]
     }
   );
-}), b = r(({ className: a, src: s, ...t }, o) => /* @__PURE__ */ e("img", { className: d("h-20", a), ref: o, src: s, ...t }));
-v.displayName = "Nav";
-N.displayName = "Nav.Header";
-f.displayName = "Nav.DesktopHeader";
-g.displayName = "Nav.MobileHeader";
-b.displayName = "Nav.Logo";
-x.displayName = "Nav.Section";
-u.displayName = "Nav.Body";
-h.displayName = "Nav.Folder";
-const q = Object.assign(v, {
-  Header: N,
-  DesktopHeader: f,
-  MobileHeader: g,
-  Section: x,
-  Logo: b,
-  Body: u,
-  Folder: h
+}), H = n(({ className: a, src: t, ...r }, o) => {
+  const { loading: s } = m(i) || {};
+  return s ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "h-20 w-20 animate-pulse bg-gray-300" }) }) : /* @__PURE__ */ e(
+    "img",
+    {
+      className: l("h-20 flex-none", a),
+      ref: o,
+      src: t,
+      ...r
+    }
+  );
+});
+f.displayName = "Nav";
+g.displayName = "Nav.Header";
+x.displayName = "Nav.DesktopHeader";
+u.displayName = "Nav.MobileHeader";
+H.displayName = "Nav.Logo";
+b.displayName = "Nav.Section";
+h.displayName = "Nav.Body";
+y.displayName = "Nav.Folder";
+const A = Object.assign(f, {
+  Header: g,
+  DesktopHeader: x,
+  MobileHeader: u,
+  Section: b,
+  Logo: H,
+  Body: h,
+  Folder: y
 });
 export {
-  q as Nav
+  A as Nav
 };

package/lib/components/NavItem/NavItem.stories.d.ts

@@ -4,8 +4,9 @@ import { NavItem } from './';
 declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLAnchorElement> & {
-        href: string;
+        href?: string | undefined;
         active?: boolean | undefined;
+        loading?: boolean | undefined;
     } & import('react').RefAttributes<HTMLAnchorElement>> & {
         Label: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
     };
@@ -17,3 +18,4 @@ export default meta;
 type Story = StoryObj<typeof NavItem>;
 export declare const Default: Story;
 export declare const Active: Story;
+export declare const Loading: Story;

package/lib/components/NavItem/index.d.ts

@@ -1,8 +1,9 @@
 import { HTMLAttributes } from 'react';
 
 declare const NavItem: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLAnchorElement> & {
-    href: string;
+    href?: string | undefined;
     active?: boolean | undefined;
+    loading?: boolean | undefined;
 } & import('react').RefAttributes<HTMLAnchorElement>> & {
     Label: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
 };

package/lib/components/NavItem/index.js

@@ -1,35 +1,28 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as o } from "react";
 import c from "clsx";
-const n = o(({ active: e, children: t, className: a, href: m, ...l }, f) => /* @__PURE__ */ r(
+const s = o(({ loading: r = !1, active: e, children: t, className: n, href: m, ...f }, i) => r ? /* @__PURE__ */ a("div", { className: "m-auto", children: /* @__PURE__ */ a("div", { className: "h-7 w-20 animate-pulse rounded-md bg-gray-300" }) }) : /* @__PURE__ */ a(
   "a",
   {
     href: m,
-    ref: f,
+    ref: i,
     className: c(
-      "m-auto h-8 py-0 text-nav-text after:block after:scale-x-0 after:border-b-4 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
+      "m-auto inline-block py-0 text-nav-text after:block after:scale-x-0 after:border-b-2 after:border-nav-text after:transition-all after:duration-300 after:ease-in-out hover:cursor-pointer hover:after:scale-x-100",
       {
         "font-bold": e,
-        "font-normal": !e
+        "font-light": !e
       },
-      a
+      n
     ),
-    ...l,
+    ...f,
     children: t
   }
-)), s = o(({ className: e, ...t }, a) => /* @__PURE__ */ r(
-  "p",
-  {
-    className: "flex-none text-nowrap text-xl tracking-wider",
-    ref: a,
-    ...t
-  }
-));
-n.displayName = "NavItem";
-s.displayName = "NavItem.Label";
-const N = Object.assign(n, {
-  Label: s
+)), l = o(({ className: r, ...e }, t) => /* @__PURE__ */ a("p", { className: "flex-none text-nowrap text-lg", ref: t, ...e }));
+s.displayName = "NavItem";
+l.displayName = "NavItem.Label";
+const b = Object.assign(s, {
+  Label: l
 });
 export {
-  N as NavItem
+  b as NavItem
 };

package/lib/style.css

@@ -1 +1 @@
-.keen-slider:not([data-keen-slider-disabled]){-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;align-content:flex-start;display:flex;overflow:hidden;position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none;-khtml-user-select:none;width:100%}.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide{min-height:100%;overflow:hidden;position:relative;width:100%}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse]{flex-direction:row-reverse}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v]{flex-wrap:wrap}.react-calendar{width:410px;background:#fff;border:none;border-radius:25px;border:1px solid #fff;box-shadow:0 12px 24px #0003;padding:8px;line-height:1.125em}.react-calendar--doubleView .react-calendar__viewContainer{display:flex;margin:-.5em}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{display:flex;height:50px;margin-bottom:1em}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font-size:.75em}.react-calendar--doubleView{width:800px}.react-calendar__month-view{padding-left:20px;padding-right:20px}.react-calendar__tile{height:50px;width:50px}.react-calendar__tile:disabled{background-color:#fff;color:#bebebe}.react-calendar__month-view__days__day--weekend,.react-calendar__month-view__days__day{color:#000}.react-calendar__month-view__days__day--neighboringMonth{visibility:hidden}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{border-radius:50%;border:1px solid;border-color:#000;background:#fff;color:#000}.react-calendar__tile--now{background:#fff;color:#000}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{border-radius:50%;border:1px solid;border-color:#000;background:#fff;color:#000}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#f8f8fa}.react-calendar__tile--active{background:#000;border-radius:50%;color:#fff}.react-calendar__tile--rangeEnd.react-calendar__tile--active:enabled:hover,.react-calendar__tile--rangeEnd.react-calendar__tile--active:enabled:focus,.react-calendar__tile--rangeEnd:enabled{border-radius:0 50% 50% 0;border:1px solid;border-color:#000;background:#000;color:#fff}.react-calendar__tile--rangeStart.react-calendar__tile--active:enabled:hover,.react-calendar__tile--rangeStart.react-calendar__tile--active:enabled:focus,.react-calendar__tile--rangeStart:enabled{border-radius:50% 0 0 50%;border:1px solid;border-color:#000;background:#000;color:#fff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#dfdfe1}.react-calendar--selectRange .react-calendar__tile--rangeStart{background-color:#000;color:#fff}.react-calendar__tile--range{background:#dfdfe1;color:#000;border-radius:0}.react-calendar__tile--rangeStart{border-radius:50% 0 0 50%;background:#000;color:#fff}.react-calendar__tile--rangeEnd{border-radius:0 50% 50% 0;background:#000;color:#fff}.react-calendar__navigation__prev-button,.react-calendar__navigation__next-button{background:#fff}.react-calendar__navigation__prev2-button,.react-calendar__navigation__next2-button{display:none}.react-calendar__navigation__label__labelText{color:#000}.react-calendar__navigation{height:50px}.react-calendar__navigation button{color:#000;width:50px;background:none;font-size:16px}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#bebebe;color:#000;border-radius:50%}.react-calendar__navigation button:disabled{background:#fff;color:#bebebe}abbr[title]{text-decoration:none}.react-calendar__navigation__label__divider{display:none}.react-calendar__navigation__label{padding-top:20px;display:flex;flex-grow:1;justify-content:space-between}.react-calendar__navigation__label__labelText--from{margin-left:80px}.react-calendar__navigation__label__labelText--to{margin-right:100px}button.react-calendar__tile.react-calendar__tile--active.react-calendar__tile--range.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd.react-calendar__tile--rangeBothEnds.react-calendar__tile--hover.react-calendar__tile--hoverStart.react-calendar__tile--hoverEnd.react-calendar__tile--hoverBothEnds.react-calendar__month-view__days__day.react-calendar__month-view__days__day--weekend{background-color:#000}
+.react-calendar{width:410px;background:#fff;border:none;border-radius:25px;border:1px solid #fff;box-shadow:0 12px 24px #0003;padding:8px;line-height:1.125em}.react-calendar--doubleView .react-calendar__viewContainer{display:flex;margin:-.5em}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{display:flex;height:50px;margin-bottom:1em}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font-size:.75em}.react-calendar--doubleView{width:800px}.react-calendar__month-view{padding-left:20px;padding-right:20px}.react-calendar__tile{height:50px;width:50px}.react-calendar__tile:disabled{background-color:#fff;color:#bebebe}.react-calendar__month-view__days__day--weekend,.react-calendar__month-view__days__day{color:#000}.react-calendar__month-view__days__day--neighboringMonth{visibility:hidden}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{border-radius:50%;border:1px solid;border-color:#000;background:#fff;color:#000}.react-calendar__tile--now{background:#fff;color:#000}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{border-radius:50%;border:1px solid;border-color:#000;background:#fff;color:#000}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#f8f8fa}.react-calendar__tile--active{background:#000;border-radius:50%;color:#fff}.react-calendar__tile--rangeEnd.react-calendar__tile--active:enabled:hover,.react-calendar__tile--rangeEnd.react-calendar__tile--active:enabled:focus,.react-calendar__tile--rangeEnd:enabled{border-radius:0 50% 50% 0;border:1px solid;border-color:#000;background:#000;color:#fff}.react-calendar__tile--rangeStart.react-calendar__tile--active:enabled:hover,.react-calendar__tile--rangeStart.react-calendar__tile--active:enabled:focus,.react-calendar__tile--rangeStart:enabled{border-radius:50% 0 0 50%;border:1px solid;border-color:#000;background:#000;color:#fff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#dfdfe1}.react-calendar--selectRange .react-calendar__tile--rangeStart{background-color:#000;color:#fff}.react-calendar__tile--range{background:#dfdfe1;color:#000;border-radius:0}.react-calendar__tile--rangeStart{border-radius:50% 0 0 50%;background:#000;color:#fff}.react-calendar__tile--rangeEnd{border-radius:0 50% 50% 0;background:#000;color:#fff}.react-calendar__navigation__prev-button,.react-calendar__navigation__next-button{background:#fff}.react-calendar__navigation__prev2-button,.react-calendar__navigation__next2-button{display:none}.react-calendar__navigation__label__labelText{color:#000}.react-calendar__navigation{height:50px}.react-calendar__navigation button{color:#000;width:50px;background:none;font-size:16px}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#bebebe;color:#000;border-radius:50%}.react-calendar__navigation button:disabled{background:#fff;color:#bebebe}abbr[title]{text-decoration:none}.react-calendar__navigation__label__divider{display:none}.react-calendar__navigation__label{padding-top:20px;display:flex;flex-grow:1;justify-content:space-between}.react-calendar__navigation__label__labelText--from{margin-left:80px}.react-calendar__navigation__label__labelText--to{margin-right:100px}button.react-calendar__tile.react-calendar__tile--active.react-calendar__tile--range.react-calendar__tile--rangeStart.react-calendar__tile--rangeEnd.react-calendar__tile--rangeBothEnds.react-calendar__tile--hover.react-calendar__tile--hoverStart.react-calendar__tile--hoverEnd.react-calendar__tile--hoverBothEnds.react-calendar__month-view__days__day.react-calendar__month-view__days__day--weekend{background-color:#000}.keen-slider:not([data-keen-slider-disabled]){-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;align-content:flex-start;display:flex;overflow:hidden;position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none;-khtml-user-select:none;width:100%}.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide{min-height:100%;overflow:hidden;position:relative;width:100%}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse]{flex-direction:row-reverse}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v]{flex-wrap:wrap}

package/lib/styles/themes/penrithmrt.css

@@ -1,36 +1,6 @@
 body.theme-penrithmrt {
-  --color-ink: #495863;
-  --color-transparent: transparent;
-  --color-white: #ffffff;
-  --color-black: #000000;
-  --color-red: #bb0a1e;
-  --color-grey: #2c373b;
-  --color-light-grey: #495c63;
-  --color-lightest-grey: #f5f5f5;
-  --color-primary-strict: #ff007d;
-  --color-border: #d0d0d0;
-  --color-border-lightest: #eeeeee;
-  --color-border-light: #d8d8d8;
-  --color-border-dark: #616161;
-  --color-facebook: #3b5999;
-  --color-whatsapp: #25d366;
-  --color-twitter: #55acee;
-  --color-linkedin: #0a66c2;
-  --color-email: #c71610;
-  --color-github: #171515;
-  --color-instagram: #8a3ab9;
-  --color-interactive-facebook: #2d4474;
-  --color-interactive-whatsapp: #25d566;
-  --color-interactive-twitter: #55acee;
-  --color-interactive-linkedin: #0a66c2;
-  --color-interactive-instagram: #6d2e92;
-  --color-interactive-email: #9f110c;
-  --color-interactive-github: #000000;
-  --color-gold: #e2b13c;
-  --color-linkedin: #0e76a8;
-
   --color-primary: #3C2F71;
-  --color-secondary: #c71f1f;
+  --color-secondary: #E94439;
   --color-tertiary: #921457;
 
   --color-loading: #a3a3a3;
@@ -55,7 +25,7 @@ body.theme-penrithmrt {
 
   --color-button-secondary-active: #c71f1f;
   --color-button-secondary-border: #c71f1f;
-  --color-button-secondary-bg: #c71f1f;
+  --color-button-secondary-bg: #E94439;
   --color-button-secondary-text: #ffffff;
   --color-button-secondary-hover: #c71f1f;
 

package/lib/tailwind/preset.ts

@@ -23,46 +23,7 @@ const presetConfig: Config = {
       colors,
 
       fontFamily: {
-        noto: ['Noto Sans JP', 'DM Sans', ...defaultTheme.fontFamily.sans],
-        sans: ['DM Sans', 'Noto Sans JP', ...defaultTheme.fontFamily.sans],
-      },
-      fontSize: {
-        xs: [
-          '0.75rem',
-          {
-            lineHeight: '1.1rem',
-          },
-        ],
-        xl: [
-          '1.25rem',
-          {
-            lineHeight: '1.875rem',
-          },
-        ],
-        '2xl': [
-          '1.5rem',
-          {
-            lineHeight: '2.25rem',
-          },
-        ],
-        '3xl': [
-          '1.875rem',
-          {
-            lineHeight: '2.75rem',
-          },
-        ],
-        '4xl': [
-          '2.25rem',
-          {
-            lineHeight: '3.25rem',
-          },
-        ],
-        '5xl': [
-          '3rem',
-          {
-            lineHeight: '4rem',
-          },
-        ],
+        sans: ['Poppins', 'sans-serif'],
       },
       keyframes: {
         'rest-bounce': {

package/lib/tailwind/spacing.ts

@@ -10,5 +10,4 @@ export default {
   '8.5': '2.125rem' /* 34px */,
   '9.5': '2.375rem' /* 38px */,
   13: '3.25rem' /* 52px */,
-  'app-header-height': 'var(--app-header-height, 0)',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.3.23",
+  "version": "2.3.25",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,
@@ -47,6 +47,7 @@
     "@fortawesome/fontawesome-free-regular": "^5.1.0-3",
     "@fortawesome/fontawesome-free-solid": "^5.1.0-3",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",