@situaction/traq-ui-ste 1.0.27 → 1.1.0

package/dist/components/button/Button.d.ts

@@ -1,13 +1,9 @@
 import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
-import { Color, Size } from '../interface';
+import { Size } from '../interface';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Is this the principal call to action on the page? */
     mode?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'text';
-    /** What background color to use (blue, red, ...)*/
-    color?: Color;
-    /** what mode do you use for light or dark color **/
-    colorMode?: 'light' | 'dark';
     /** How large should the button be? */
     size?: Size | 'menu';
     /** button contents */

package/dist/components/button/Button.js

@@ -1,84 +1,56 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { useTheme as x } from "../theme/ThemeContext.js";
-import '../../styles/Button.css';const k = "_button_zk0df_23", g = "_flexHorizontalCenter_zk0df_178", r = {
-  button: k,
-  "button-primary": "_button-primary_zk0df_45",
-  "button-secondary": "_button-secondary_zk0df_59",
-  "button-tertiary": "_button-tertiary_zk0df_73",
-  "button-ghost": "_button-ghost_zk0df_87",
-  "button-text": "_button-text_zk0df_103",
-  "button-text-selected": "_button-text-selected_zk0df_116",
-  "button-error": "_button-error_zk0df_122",
-  "button-size-xl": "_button-size-xl_zk0df_135",
-  "button-size-l": "_button-size-l_zk0df_141",
-  "button-size-m": "_button-size-m_zk0df_147",
-  "button-size-s": "_button-size-s_zk0df_153",
-  "button-size-menu": "_button-size-menu_zk0df_159",
-  "button-gap-menu": "_button-gap-menu_zk0df_165",
-  "button-gap-xl": "_button-gap-xl_zk0df_168",
-  "button-gap-l": "_button-gap-l_zk0df_171",
-  "button-gap-m": "_button-gap-m_zk0df_165",
-  "button-gap-s": "_button-gap-s_zk0df_174",
-  flexHorizontalCenter: g
-}, H = ({
-  mode: a = "primary",
-  size: n = "m",
-  color: t,
-  colorMode: e,
-  label: l,
-  error: m,
-  selected: d,
-  childrenLeft: i,
-  childrenRight: c,
-  ...y
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import '../../styles/Button.css';const i = "_button_vdgnu_23", p = "_flexHorizontalCenter_vdgnu_184", t = {
+  button: i,
+  "button-primary": "_button-primary_vdgnu_47",
+  "button-secondary": "_button-secondary_vdgnu_61",
+  "button-tertiary": "_button-tertiary_vdgnu_77",
+  "button-ghost": "_button-ghost_vdgnu_93",
+  "button-text": "_button-text_vdgnu_109",
+  "button-text-selected": "_button-text-selected_vdgnu_122",
+  "button-error": "_button-error_vdgnu_128",
+  "button-size-xl": "_button-size-xl_vdgnu_141",
+  "button-size-l": "_button-size-l_vdgnu_147",
+  "button-size-m": "_button-size-m_vdgnu_153",
+  "button-size-s": "_button-size-s_vdgnu_159",
+  "button-size-menu": "_button-size-menu_vdgnu_165",
+  "button-gap-menu": "_button-gap-menu_vdgnu_171",
+  "button-gap-xl": "_button-gap-xl_vdgnu_174",
+  "button-gap-l": "_button-gap-l_vdgnu_177",
+  "button-gap-m": "_button-gap-m_vdgnu_171",
+  "button-gap-s": "_button-gap-s_vdgnu_180",
+  flexHorizontalCenter: p
+}, x = ({
+  mode: o = "primary",
+  size: u = "m",
+  label: b,
+  error: s,
+  selected: r,
+  childrenLeft: e,
+  childrenRight: _,
+  ...a
 }) => {
-  const { mode: _ } = x(), s = () => m ? "error" : a, u = [
-    r.button,
-    r[`button-${s()}`],
-    r[`button-size-${n}`],
-    r[`button-gap-${n}`],
-    d && a === "text" && r["button-text-selected"],
-    r.flexHorizontalCenter
-  ].filter(Boolean).join(" "), b = {
-    "--dynamic-color-primary-text": t ? `var(--color-${t}-900)` : "var(--primary-color-900)",
-    "--dynamic-color-text": "var(--color-light-100)",
-    "--dynamic-color": t ? `var(--color-${t}-200)` : "var(--primary-color)",
-    "--dynamic-color-hover": t ? `var(--color-${t}-200)` : "var(--primary-color-100)",
-    "--dynamic-color-activated": t ? `var(--color-${t}-50)` : "var(--primary-color-50)"
-  }, v = {
-    "--dynamic-color-primary-text": "var(--color-light-100)",
-    "--dynamic-color-text": t ? `var(--color-${t}-900)` : "var(--primary-color-900)",
-    "--dynamic-color": t ? `var(--color-${t}-900})` : "var(--primary-color)",
-    "--dynamic-color-hover": t ? `var(--color-${t}-800)` : "var(--primary-color-800)",
-    "--dynamic-color-activated": t ? `var(--color-${t}-700})` : "var(--primary-color-700)"
-  }, p = {
-    "--dynamic-color-primary-text": t ? `var(--color-${t}-900)` : "var(--primary-color-950)",
-    "--dynamic-color-text": "var(--color-light-100)",
-    "--dynamic-color": t ? `var(--color-${t}-200)` : "var(--primary-color-200)",
-    "--dynamic-color-hover": t ? `var(--color-${t}-200})` : "var(--primary-color-100)",
-    "--dynamic-color-activated": t ? `var(--color-${t}-50})` : "var(--primary-color-50)"
-  }, z = {
-    "--dynamic-color-primary-text": "var(--color-light-100)",
-    "--dynamic-color-text": t ? `var(--color-${t}-900)` : "var(--secondary-color)",
-    "--dynamic-color": t ? `var(--color-${t}-900)` : "var(--secondary-color)",
-    "--dynamic-color-hover": t ? `var(--color-${t}-800)` : "var(--primary-color-800)",
-    "--dynamic-color-activated": t ? `var(--color-${t}-700)` : "var(--primary-color-700)"
-  };
-  return /* @__PURE__ */ f(
+  const l = () => s ? "error" : o, g = [
+    t.button,
+    t[`button-${l()}`],
+    t[`button-size-${u}`],
+    t[`button-gap-${u}`],
+    r && o === "text" && t["button-text-selected"],
+    t.flexHorizontalCenter
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ d(
     "button",
     {
       type: "button",
-      className: u,
-      style: e ? e === "dark" ? p : z : _ === "dark" ? b : v,
-      ...y,
+      className: g,
+      ...a,
       children: [
-        i && /* @__PURE__ */ o("span", { className: r.flexHorizontalCenter, children: i }),
-        /* @__PURE__ */ o("span", { children: l }),
-        c && /* @__PURE__ */ o("span", { className: r.flexHorizontalCenter, children: c })
+        e && /* @__PURE__ */ n("span", { className: t.flexHorizontalCenter, children: e }),
+        /* @__PURE__ */ n("span", { children: b }),
+        _ && /* @__PURE__ */ n("span", { className: t.flexHorizontalCenter, children: _ })
       ]
     }
   );
 };
 export {
-  H as Button
+  x as Button
 };

package/dist/components/checkbox/Checkbox.js

@@ -1,47 +1,49 @@
-import { jsx as h } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { useTheme as m } from "../theme/ThemeContext.js";
-import '../../styles/Checkbox.css';const n = "_checkbox_hj8dh_23", r = "_checked_hj8dh_34", j = "_disabled_hj8dh_46", e = {
+import { jsx as o } from "react/jsx-runtime";
+import { useState as d, useEffect as a } from "react";
+import '../../styles/Checkbox.css';const n = "_checkbox_owci7_23", w = "_checked_owci7_31", r = "_disabled_owci7_37", c = {
   checkbox: n,
-  "dark-mode": "_dark-mode_hj8dh_31",
-  checked: r,
-  disabled: j,
-  "checkbox-size-s": "_checkbox-size-s_hj8dh_60",
-  "checkbox-size-m": "_checkbox-size-m_hj8dh_65",
-  "checkbox-size-l": "_checkbox-size-l_hj8dh_70",
-  "checkbox-size-xl": "_checkbox-size-xl_hj8dh_75"
-}, p = ({
-  checked: d = !1,
-  icon: t = /* @__PURE__ */ h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 256 256", children: /* @__PURE__ */ h(
+  checked: w,
+  disabled: r,
+  "checkbox-size-xs": "_checkbox-size-xs_owci7_45",
+  "checkbox-size-s": "_checkbox-size-s_owci7_50",
+  "checkbox-size-m": "_checkbox-size-m_owci7_55",
+  "checkbox-size-l": "_checkbox-size-l_owci7_60",
+  "checkbox-size-xl": "_checkbox-size-xl_owci7_65"
+}, f = ({
+  checked: e = !1,
+  icon: x = /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 256 256", children: /* @__PURE__ */ o(
     "path",
     {
       d: "M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
     }
   ) }),
-  size: i = "m",
-  disabled: k = !1,
-  onChange: s
+  size: k = "m",
+  disabled: _ = !1,
+  onChange: i
 }) => {
-  const { mode: _ } = m(), [c, a] = b(d), l = () => {
-    const o = !c;
-    a(o), s && s(o);
-  }, x = [
-    e.checkbox,
-    e[`checkbox-size-${i}`],
-    c && e.checked,
-    k && e.disabled,
-    _ === "dark" && e["dark-mode"]
+  const [s, h] = d(e);
+  a(() => {
+    h(e);
+  }, [e]);
+  const l = () => {
+    const t = !s;
+    h(t), i && i(t);
+  }, b = [
+    c.checkbox,
+    c[`checkbox-size-${k}`],
+    s && c.checked,
+    _ && c.disabled
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ o(
     "div",
     {
       "data-testid": "checkbox",
-      className: x,
+      className: b,
       onClick: l,
-      children: c && t
+      children: s && x
     }
   );
 };
 export {
-  p as Checkbox
+  f as Checkbox
 };

package/dist/components/icon-button/IconButton.d.ts

@@ -1,13 +1,9 @@
 import { FC, ReactElement } from 'react';
-import { Color, Size } from '../interface';
+import { Size } from '../interface';
 
 export interface IconButtonProps {
     /** Specifies the visual style of the button. */
     mode?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'icon';
-    /** What background color to use (blue, red, ...)*/
-    color?: Color;
-    /** what mode do you use for light or dark color **/
-    colorMode?: 'light' | 'dark';
     /** How large should the button be? */
     size?: Size | 'menu';
     /** If true, the button will have rounded corners. */

package/dist/components/icon-button/IconButton.js

@@ -1,76 +1,48 @@
-import { jsx as $ } from "react/jsx-runtime";
-import { useTheme as x } from "../theme/ThemeContext.js";
-import '../../styles/IconButton.css';const z = "_button_67ovb_23", h = "_flexHorizontalCenter_67ovb_168", t = {
-  button: z,
-  "button-round": "_button-round_67ovb_50",
-  "button-primary": "_button-primary_67ovb_53",
-  "button-secondary": "_button-secondary_67ovb_66",
-  "button-tertiary": "_button-tertiary_67ovb_80",
-  "button-ghost": "_button-ghost_67ovb_94",
-  "button-icon": "_button-icon_67ovb_107",
-  "button-icon-selected": "_button-icon-selected_67ovb_119",
-  "button-error": "_button-error_67ovb_128",
-  "button-size-xl": "_button-size-xl_67ovb_141",
-  "button-size-l": "_button-size-l_67ovb_146",
-  "button-size-m": "_button-size-m_67ovb_151",
-  "button-size-s": "_button-size-s_67ovb_156",
-  "button-size-menu": "_button-size-menu_67ovb_161",
-  flexHorizontalCenter: h
-}, S = ({
-  mode: r = "primary",
-  color: o,
-  colorMode: a,
+import { jsx as p } from "react/jsx-runtime";
+import '../../styles/IconButton.css';const c = "_button_kop64_23", a = "_flexHorizontalCenter_kop64_177", t = {
+  button: c,
+  "button-round": "_button-round_kop64_51",
+  "button-primary": "_button-primary_kop64_54",
+  "button-secondary": "_button-secondary_kop64_68",
+  "button-tertiary": "_button-tertiary_kop64_84",
+  "button-ghost": "_button-ghost_kop64_100",
+  "button-icon": "_button-icon_kop64_116",
+  "button-icon-selected": "_button-icon-selected_kop64_128",
+  "button-error": "_button-error_kop64_137",
+  "button-size-xl": "_button-size-xl_kop64_150",
+  "button-size-l": "_button-size-l_kop64_155",
+  "button-size-m": "_button-size-m_kop64_160",
+  "button-size-s": "_button-size-s_kop64_165",
+  "button-size-menu": "_button-size-menu_kop64_170",
+  flexHorizontalCenter: a
+}, z = ({
+  mode: o = "primary",
   size: n = "m",
   error: e,
-  selected: i,
-  round: c,
-  disabled: l,
-  children: v,
-  onClick: y
+  selected: _,
+  round: u,
+  disabled: r,
+  children: b,
+  onClick: s
 }) => {
-  const { mode: m } = x(), b = () => e ? "error" : r, u = [
+  const i = () => e ? "error" : o, l = [
     t.button,
-    t[`button-${b()}`],
-    c && t["button-round"],
+    t[`button-${i()}`],
+    u && t["button-round"],
     t[`button-size-${n}`],
-    i && r === "icon" && t["button-icon-selected"],
+    _ && o === "icon" && t["button-icon-selected"],
     t.flexHorizontalCenter
-  ].filter(Boolean).join(" "), s = {
-    "--dynamic-color-primary-text": o ? `var(--color-${o}-900)` : "var(--primary-color-900)",
-    "--dynamic-color-text": "var(--color-light-100)",
-    "--dynamic-color": o ? `var(--color-${o}-200)` : "var(--primary-color)",
-    "--dynamic-color-hover": o ? `var(--color-${o}-200)` : "var(--primary-color-100)",
-    "--dynamic-color-activated": o ? `var(--color-${o}-50)` : "var(--primary-color-50)"
-  }, _ = {
-    "--dynamic-color-primary-text": "var(--color-light-100)",
-    "--dynamic-color-text": o ? `var(--color-${o}-900)` : "var(--primary-color-900)",
-    "--dynamic-color": o ? `var(--color-${o}-900)` : "var(--primary-color)",
-    "--dynamic-color-hover": o ? `var(--color-${o}-800)` : "var(--primary-color-800)",
-    "--dynamic-color-activated": o ? `var(--color-${o}-700)` : "var(--primary-color-700)"
-  }, d = {
-    "--dynamic-color-primary-text": o ? `var(--color-${o}-900)` : "var(--primary-color-950)",
-    "--dynamic-color-text": "var(--color-light-100)",
-    "--dynamic-color": o ? `var(--color-${o}-200)` : "var(--primary-color-200)",
-    "--dynamic-color-hover": o ? `var(--color-${o}-200)` : "var(--primary-color-100)",
-    "--dynamic-color-activated": o ? `var(--color-${o}-50)` : "var(--primary-color-50)"
-  }, p = {
-    "--dynamic-color-primary-text": "var(--color-light-100)",
-    "--dynamic-color-text": o ? `var(--color-${o}-900)` : "var(--secondary-color)",
-    "--dynamic-color": o ? `var(--color-${o}-900})` : "var(--secondary-color)",
-    "--dynamic-color-hover": o ? `var(--color-${o}-800)` : "var(--primary-color-800)",
-    "--dynamic-color-activated": o ? `var(--color-${o}-700)` : "var(--primary-color-700)"
-  };
-  return /* @__PURE__ */ $(
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ p(
     "button",
     {
-      className: u,
-      style: a ? a === "dark" ? d : p : m === "dark" ? s : _,
-      onClick: y,
-      disabled: l,
-      children: v
+      className: l,
+      onClick: s,
+      disabled: r,
+      children: b
     }
   );
 };
 export {
-  S as IconButton
+  z as IconButton
 };

package/dist/components/input/Input.d.ts

@@ -5,7 +5,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     /** How large should the input be? **/
     sizeStyle?: Size;
     /** input status style **/
-    status?: 'default' | 'error' | 'success' | 'secondary' | 'ghost';
+    status?: 'default' | 'error' | 'secondary' | 'ghost';
     /** Optional unit or additional label to display next to the input **/
     labelUnit?: string;
     /** If true, the input will have rounded corners **/

package/dist/components/input/Input.js

@@ -1,94 +1,82 @@
-import { jsxs as y, jsx as s, Fragment as p } from "react/jsx-runtime";
-import { useState as d, useRef as _ } from "react";
-import { useTheme as N } from "../theme/ThemeContext.js";
-import '../../styles/Input.css';const I = "_flexHorizontalBetween_8cbxu_156", $ = "_flexHorizontal_8cbxu_156", e = {
-  "input-style": "_input-style_8cbxu_40",
-  "input-style-disabled": "_input-style-disabled_8cbxu_52",
-  "input-style-focused": "_input-style-focused_8cbxu_63",
-  "input-style-secondary": "_input-style-secondary_8cbxu_71",
-  "input-style-ghost": "_input-style-ghost_8cbxu_85",
-  "input-style-error": "_input-style-error_8cbxu_88",
-  "input-style-success": "_input-style-success_8cbxu_98",
-  "input-container": "_input-container_8cbxu_108",
-  "input-style-size-xl": "_input-style-size-xl_8cbxu_112",
-  "input-style-size-l": "_input-style-size-l_8cbxu_122",
-  "input-style-size-m": "_input-style-size-m_8cbxu_132",
-  "input-style-size-s": "_input-style-size-s_8cbxu_142",
-  "input-style-radius": "_input-style-radius_8cbxu_152",
-  flexHorizontalBetween: I,
-  flexHorizontal: $
-}, M = ({
-  sizeStyle: f = "m",
-  labelUnit: o,
+import { jsxs as a, jsx as t, Fragment as c } from "react/jsx-runtime";
+import { useState as p, useRef as _ } from "react";
+import '../../styles/Input.css';const j = "_flexHorizontalBetween_1og0n_145", N = "_flexHorizontal_1og0n_145", e = {
+  "input-style": "_input-style_1og0n_40",
+  "input-style-disabled": "_input-style-disabled_1og0n_52",
+  "input-style-focused": "_input-style-focused_1og0n_63",
+  "input-style-secondary": "_input-style-secondary_1og0n_70",
+  "input-style-ghost": "_input-style-ghost_1og0n_84",
+  "input-style-error": "_input-style-error_1og0n_87",
+  "input-container": "_input-container_1og0n_97",
+  "input-style-size-xl": "_input-style-size-xl_1og0n_101",
+  "input-style-size-l": "_input-style-size-l_1og0n_111",
+  "input-style-size-m": "_input-style-size-m_1og0n_121",
+  "input-style-size-s": "_input-style-size-s_1og0n_131",
+  "input-style-radius": "_input-style-radius_1og0n_141",
+  flexHorizontalBetween: j,
+  flexHorizontal: N
+}, R = ({
+  sizeStyle: y = "m",
+  labelUnit: l,
   status: n = "default",
-  childrenLeft: i,
-  childrenRight: u,
-  round: x,
-  disabled: r,
-  defaultValue: h,
-  ...m
+  childrenLeft: o,
+  childrenRight: i,
+  round: d,
+  disabled: u,
+  defaultValue: f,
+  ...g
 }) => {
-  const { mode: t } = N(), [b, c] = d(!1), [g, z] = d(h || ""), v = _(null), a = _(null), B = () => c(!0), C = () => c(!1), H = (l) => {
-    z(l.target.value);
+  const [z, r] = p(!1), [h, x] = p(f || ""), m = _(null), s = _(null), B = () => r(!0), C = () => r(!1), H = (F) => {
+    x(F.target.value);
   }, S = () => {
-    var l;
-    (l = a.current) == null || l.focus();
-  }, k = [
+    s.current && s.current.focus();
+  }, v = [
     e["input-style"],
-    e[`input-style-size-${f}`],
-    x && e["input-style-radius"],
+    e[`input-style-size-${y}`],
+    d && e["input-style-radius"],
     e.flexHorizontalBetween
   ].filter(Boolean).join(" "), w = [
-    b && e["input-style-focused"],
-    r && e["input-style-disabled"],
+    z && e["input-style-focused"],
+    u && e["input-style-disabled"],
     n === "secondary" && e["input-style-secondary"],
     n === "ghost" && e["input-style-ghost"]
-  ].filter(Boolean).join(" "), F = () => {
-    switch (n) {
-      case "error":
-        return e["input-style-error"];
-      case "success":
-        return e["input-style-success"];
-      default:
-        return w;
-    }
-  }, j = {
-    "--dynamic-color": t === "light" ? "var(--color-blue-grey-400)" : "var(--color-blue-grey-200)",
-    "--dynamic-color-activated": t === "light" ? "var(--color-dark-100)" : "var(--color-light-100)",
-    "--dynamic-color-disabled": t === "light" ? "var(--color-dark-40)" : "var(--color-light-40)",
-    "--dynamic-color-border-disabled": t === "light" ? "var(--color-dark-10)" : "var(--color-light-10)",
-    "--dynamic-color-secondary": t === "light" ? "var(--color-blue-situaction-900)" : "var(--color-light-100)"
-  };
-  return /* @__PURE__ */ y(
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(
     "div",
     {
-      ref: v,
-      className: `input-style ${k} ${F()}`,
+      ref: m,
+      className: `input-style ${v} ${(() => {
+        switch (n) {
+          case "error":
+            return e["input-style-error"];
+          default:
+            return w;
+        }
+      })()}`,
       onFocus: B,
       onBlur: C,
       onClick: S,
-      style: j,
       children: [
-        i && /* @__PURE__ */ s(p, { children: i }),
-        /* @__PURE__ */ s("div", { className: e["input-container"], children: /* @__PURE__ */ s(
+        o && /* @__PURE__ */ t(c, { children: o }),
+        /* @__PURE__ */ t("div", { className: e["input-container"], children: /* @__PURE__ */ t(
           "input",
           {
             autoCorrect: "false",
-            disabled: r,
-            value: g,
+            disabled: u,
+            value: h,
             onChange: H,
-            ref: a,
-            ...m
+            ref: s,
+            ...g
           }
         ) }),
-        /* @__PURE__ */ y(p, { children: [
-          o && /* @__PURE__ */ s("div", { children: o }),
-          u && /* @__PURE__ */ s("span", { className: e.flexHorizontal, children: u })
+        /* @__PURE__ */ a(c, { children: [
+          l && /* @__PURE__ */ t("div", { children: l }),
+          i && /* @__PURE__ */ t("span", { className: e.flexHorizontal, children: i })
         ] })
       ]
     }
   );
 };
 export {
-  M as Input
+  R as Input
 };

package/dist/components/select/Select.js

@@ -1,46 +1,42 @@
-import { jsxs as v, jsx as s } from "react/jsx-runtime";
-import { useState as r, useRef as g, useEffect as w } from "react";
-import { Button as S } from "../button/Button.js";
-import { useTheme as k } from "../theme/ThemeContext.js";
-import '../../styles/Select.css';const b = "_customSelect_e5r04_40", x = "_selectOptions_e5r04_46", N = "_option_e5r04_70", t = {
-  customSelect: b,
-  selectOptions: x,
-  "selectOptions-top": "_selectOptions-top_e5r04_54",
-  "selectOptions-bottom": "_selectOptions-bottom_e5r04_57",
-  "selectOptions-dark": "_selectOptions-dark_e5r04_60",
-  "selectOptions-light": "_selectOptions-light_e5r04_63",
-  "selectOptions-s": "_selectOptions-s_e5r04_66",
-  option: N,
-  "icon-size-s": "_icon-size-s_e5r04_98"
-}, E = ({
+import { jsxs as b, jsx as s } from "react/jsx-runtime";
+import { useState as r, useRef as f, useEffect as v } from "react";
+import { Button as h } from "../button/Button.js";
+import '../../styles/Select.css';const w = "_customSelect_12bxx_40", S = "_selectOptions_12bxx_46", g = "_option_12bxx_65", t = {
+  customSelect: w,
+  selectOptions: S,
+  "selectOptions-top": "_selectOptions-top_12bxx_55",
+  "selectOptions-bottom": "_selectOptions-bottom_12bxx_58",
+  "selectOptions-s": "_selectOptions-s_12bxx_61",
+  option: g,
+  "icon-size-s": "_icon-size-s_12bxx_73"
+}, k = ({
   options: a,
   placeholder: p = "",
-  onChange: n,
-  disabled: d,
-  top: m = !1
+  onChange: l,
+  disabled: m,
+  top: d = !1
   // size = "m",
 }) => {
-  const { mode: _ } = k(), [o, l] = r(!1), [c, u] = r(null), i = g(null);
-  w(() => {
-    const e = (f) => {
-      i.current && !i.current.contains(f.target) && l(!1);
+  const [o, n] = r(!1), [c, u] = r(null), i = f(null);
+  v(() => {
+    const e = (O) => {
+      i.current && !i.current.contains(O.target) && n(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []);
-  const O = () => [
+  const _ = () => [
     t.selectOptions,
-    _ === "dark" ? t["selectOptions-dark"] : t["selectOptions-light"],
-    m ? t["selectOptions-top"] : t["selectOptions-bottom"],
+    d ? t["selectOptions-top"] : t["selectOptions-bottom"],
     t["selectOptions-s"]
-  ].join(" "), h = (e) => {
-    u(e), l(!1), n && n(e.value);
+  ].join(" "), x = (e) => {
+    u(e), n(!1), l && l(e.value);
   };
-  return /* @__PURE__ */ v("div", { className: `${t.customSelect}`, children: [
+  return /* @__PURE__ */ b("div", { className: `${t.customSelect}`, children: [
     /* @__PURE__ */ s(
-      S,
+      h,
       {
-        onClick: () => l(!o),
-        disabled: d,
+        onClick: () => n(!o),
+        disabled: m,
         size: "s",
         mode: "tertiary",
         childrenRight: /* @__PURE__ */ s(
@@ -59,12 +55,12 @@ import '../../styles/Select.css';const b = "_customSelect_e5r04_40", x = "_selec
         label: c ? c.label : p
       }
     ),
-    o && /* @__PURE__ */ s("div", { className: O(), children: a.map((e) => /* @__PURE__ */ s(
+    o && /* @__PURE__ */ s("div", { className: _(), children: a.map((e) => /* @__PURE__ */ s(
       "div",
       {
         className: t.option,
         role: "option",
-        onClick: () => h(e),
+        onClick: () => x(e),
         children: e.label
       },
       e.value
@@ -72,5 +68,5 @@ import '../../styles/Select.css';const b = "_customSelect_e5r04_40", x = "_selec
   ] });
 };
 export {
-  E as Select
+  k as Select
 };

package/dist/components/tabs/Tabs.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 
 export interface TabsProps {
     /** select the type of data text or icon that we put in tabs */
-    type: 'text' | 'icon';
+    type: 'text' | 'icon' | 'button';
     /** Array of strings representing the labels of the tabs */
     listItems: (string | ReactNode)[];
     /** Index of the tab that should be active by default */