trepur_components 2.3.19 → 2.3.21

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

@@ -21,5 +21,6 @@ export declare const Default: Story;
 export declare const Secondary: Story;
 export declare const Bordered: Story;
 export declare const Ghost: Story;
+export declare const Basic: Story;
 export declare const Loading: Story;
 export declare const Link: Story;

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

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 
 export interface ButtonProps {
-    variant?: 'primary' | 'secondary' | 'ghost' | 'bordered';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'bordered' | 'basic';
     disabled?: boolean;
     loading?: boolean;
     type?: 'button' | 'link';

package/lib/components/Button/index.js

@@ -1,32 +1,33 @@
 import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
+import { forwardRef as n } from "react";
 import { Icon as m } from "../Icon/index.js";
 import s from "clsx";
-const g = b(({ children: o, ...e }) => /* @__PURE__ */ r("button", { type: "button", ...e, children: o })), h = b(({ children: o, ...e }) => /* @__PURE__ */ r("div", { className: "inline-block", children: /* @__PURE__ */ r("a", { type: "button", className: "inline-grid", ...e, children: o }) })), a = b(
+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(
   ({
     className: o,
     children: e,
     loading: t = !1,
-    variant: n = "primary",
-    type: d = "button",
-    disabled: l,
-    href: p,
-    target: i,
-    ...y
+    variant: b = "primary",
+    type: i = "button",
+    disabled: y,
+    href: d,
+    target: p,
+    ...l
   }) => /* @__PURE__ */ r(
-    d === "button" ? g : h,
+    i === "button" ? g : h,
     {
-      href: p,
-      target: i,
+      href: d,
+      target: p,
       disabled: t,
       className: s(
         "font-regular flex items-center gap-2 rounded-lg border px-8 py-3 text-center text-lg",
         {
           "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": n === "primary" && !t,
-          "border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-hover active:bg-button-secondary-active": n === "secondary" && !t,
-          "border-button-ghost-border bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": n === "ghost" && !t,
-          "border-button-bordered-border text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active": n === "bordered" && !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,
+          "border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-hover active:bg-button-secondary-active": b === "secondary" && !t,
+          "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
         },
         o
@@ -34,7 +35,7 @@ const g = b(({ children: o, ...e }) => /* @__PURE__ */ r("button", { type: "butt
       children: !t && e
     }
   )
-), c = b(({ className: o, ...e }, t) => /* @__PURE__ */ r("p", { className: s("text-md", o), ref: t, ...e })), u = b(({ icon: o }, e) => /* @__PURE__ */ r(m, { size: "md", ref: e, icon: o }));
+), 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";

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

@@ -13,7 +13,6 @@ declare const meta: {
     };
     args: {
         placeholder: string;
-        errors: string[];
         children: import("react/jsx-runtime").JSX.Element[];
     };
 };

package/lib/components/Input/index.js

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

package/lib/components/SplitCard/index.js

@@ -29,7 +29,7 @@ const a = u(null), x = d(({ id: l, className: e, children: r, swapDesktop: t, sw
       ref: t,
       ...r,
       className: p(
-        "mx-auto flex items-center px-4 py-2 text-center md:p-8 lg:py-20",
+        "mx-auto flex items-center px-4 py-2 text-center md:p-8 lg:py-12",
         {
           "md:order-last lg:pl-12 lg:pr-20": i,
           "lg:pl-20 lg:pr-12": !i,
@@ -48,7 +48,7 @@ const a = u(null), x = d(({ id: l, className: e, children: r, swapDesktop: t, sw
       ref: t,
       ...r,
       className: p(
-        "flex h-full items-center px-4 py-2 text-center md:p-8 lg:py-20",
+        "flex h-full items-center px-4 py-2 text-center md:p-8 lg:py-12",
         {
           "md:order-first lg:pl-20 lg:pr-12": i,
           "lg:pl-12 lg:pr-20": !i,

package/lib/components/TextArea/index.js

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

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

@@ -71,6 +71,12 @@ body.theme-penrithmrt {
   --color-button-bordered-text: #000000;
   --color-button-bordered-hover: #5f5f5f;
 
+  --color-button-basic-active: #acacac;
+  --color-button-basic-border: #ffffff;
+  --color-button-basic-bg: #ffffff;
+  --color-button-basic-text: #3C2F71;
+  --color-button-basic-hover: #cecece;
+
   /* Footer */
   --color-footer-bg: #1b54c6;
   --color-footer-text: #ffffff;

package/lib/tailwind/colors.ts

@@ -61,6 +61,13 @@ export default {
       text: 'var(--color-button-bordered-text)',
       hover: 'var(--color-button-bordered-hover)',
     },
+    basic: {
+      active: 'var(--color-button-basic-active)',
+      border: 'var(--color-button-basic-border)',
+      bg: 'var(--color-button-basic-bg)',
+      text: 'var(--color-button-basic-text)',
+      hover: 'var(--color-button-basic-hover)',
+    },
   },
   tubestop: {
     station: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trepur_components",
-  "version": "2.3.19",
+  "version": "2.3.21",
   "description": "component lib",
   "author": "trepur_ttenneb",
   "private": false,