@situaction/traq-ui-ste 1.0.21 → 1.0.22

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

@@ -1,22 +1,22 @@
 import { jsx as y } from "react/jsx-runtime";
 import { useEffect as d } from "react";
-import { useTheme as p } from "../theme/ThemeContext.js";
-import '../../styles/IconButton.css';const x = "_button_1v64m_21", z = "_flexHorizontalCenter_1v64m_158", o = {
-  button: x,
-  "button-round": "_button-round_1v64m_49",
-  "button-primary": "_button-primary_1v64m_52",
-  "button-secondary": "_button-secondary_1v64m_65",
-  "button-tertiary": "_button-tertiary_1v64m_79",
-  "button-ghost": "_button-ghost_1v64m_93",
-  "button-text": "_button-text_1v64m_106",
-  "button-text-selected": "_button-text-selected_1v64m_118",
-  "button-error": "_button-error_1v64m_124",
-  "button-size-xl": "_button-size-xl_1v64m_137",
-  "button-size-l": "_button-size-l_1v64m_142",
-  "button-size-m": "_button-size-m_1v64m_147",
-  "button-size-s": "_button-size-s_1v64m_152",
-  flexHorizontalCenter: z
-}, $ = ({
+import { useTheme as j } from "../theme/ThemeContext.js";
+import '../../styles/IconButton.css';const w = "_button_pjwt4_21", v = "_flexHorizontalCenter_pjwt4_160", o = {
+  button: w,
+  "button-round": "_button-round_pjwt4_48",
+  "button-primary": "_button-primary_pjwt4_51",
+  "button-secondary": "_button-secondary_pjwt4_64",
+  "button-tertiary": "_button-tertiary_pjwt4_78",
+  "button-ghost": "_button-ghost_pjwt4_92",
+  "button-icon": "_button-icon_pjwt4_105",
+  "button-icon-selected": "_button-icon-selected_pjwt4_117",
+  "button-error": "_button-error_pjwt4_126",
+  "button-size-xl": "_button-size-xl_pjwt4_139",
+  "button-size-l": "_button-size-l_pjwt4_144",
+  "button-size-m": "_button-size-m_pjwt4_149",
+  "button-size-s": "_button-size-s_pjwt4_154",
+  flexHorizontalCenter: v
+}, h = ({
   mode: e = "primary",
   color: t,
   colorMode: r,
@@ -24,22 +24,22 @@ import '../../styles/IconButton.css';const x = "_button_1v64m_21", z = "_flexHor
   error: a,
   selected: u,
   round: s,
-  disabled: m,
-  children: _,
-  onClick: b
+  disabled: _,
+  children: b,
+  onClick: l
 }) => {
-  const { mode: n } = p(), l = () => a ? "error" : e;
+  const { mode: n } = j(), c = () => a ? "error" : e;
   d(() => {
     r && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
   }, [t]);
-  const c = [
+  const m = [
     o.button,
-    o[`button-${l()}`],
+    o[`button-${c()}`],
     s && o["button-round"],
     o[`button-size-${i}`],
-    u && e === "icon" && o["button-text-selected"],
+    u && e === "icon" && o["button-icon-selected"],
     o.flexHorizontalCenter
-  ].join(" "), v = {
+  ].join(" "), p = {
     "--dynamic-color-text": t ? r === "dark" ? "var(--primary-color-900)" : "var(--color-light-100)" : n === "light" ? "var(--color-light-100)" : "var(--primary-color-900)",
     "--dynamic-color": t ? `var(--color-${t}-${r === "dark" ? "200" : "900"})` : "var(--primary-color)",
     "--dynamic-color-hover": t ? `var(--color-${t}-${r === "dark" ? "100" : "800"})` : n === "light" ? "var(--primary-color-800)" : "var(--primary-color-100)",
@@ -48,14 +48,14 @@ import '../../styles/IconButton.css';const x = "_button_1v64m_21", z = "_flexHor
   return /* @__PURE__ */ y(
     "button",
     {
-      className: c,
-      style: v,
-      onClick: b,
-      disabled: m,
-      children: _
+      className: m,
+      style: p,
+      onClick: l,
+      disabled: _,
+      children: b
     }
   );
 };
 export {
-  $ as IconButton
+  h as IconButton
 };

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

@@ -6,8 +6,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     sizeStyle?: Size;
     /** input status style **/
     status?: 'default' | 'error' | 'success' | 'secondary' | 'ghost';
-    /** The label or placeholder text for the input field **/
-    label: string;
     /** 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,56 +1,55 @@
 import { jsxs as a, jsx as s, Fragment as c } from "react/jsx-runtime";
-import { useState as y, useRef as j } from "react";
-import { useTheme as N } from "../theme/ThemeContext.js";
-import '../../styles/Input.css';const k = "_flexHorizontalBetween_115tz_153", I = "_flexHorizontal_115tz_153", t = {
-  "input-style": "_input-style_115tz_37",
-  "input-style-disabled": "_input-style-disabled_115tz_49",
-  "input-style-focused": "_input-style-focused_115tz_60",
-  "input-style-secondary": "_input-style-secondary_115tz_68",
-  "input-style-ghost": "_input-style-ghost_115tz_82",
-  "input-style-error": "_input-style-error_115tz_85",
-  "input-style-success": "_input-style-success_115tz_95",
-  "input-container": "_input-container_115tz_105",
-  "input-style-size-xl": "_input-style-size-xl_115tz_109",
-  "input-style-size-l": "_input-style-size-l_115tz_119",
-  "input-style-size-m": "_input-style-size-m_115tz_129",
-  "input-style-size-s": "_input-style-size-s_115tz_139",
-  "input-style-radius": "_input-style-radius_115tz_149",
-  flexHorizontalBetween: k,
-  flexHorizontal: I
-}, M = ({
+import { useState as y, useRef as F } from "react";
+import { useTheme as j } from "../theme/ThemeContext.js";
+import '../../styles/Input.css';const N = "_flexHorizontalBetween_tg8sh_154", k = "_flexHorizontal_tg8sh_154", t = {
+  "input-style": "_input-style_tg8sh_38",
+  "input-style-disabled": "_input-style-disabled_tg8sh_50",
+  "input-style-focused": "_input-style-focused_tg8sh_61",
+  "input-style-secondary": "_input-style-secondary_tg8sh_69",
+  "input-style-ghost": "_input-style-ghost_tg8sh_83",
+  "input-style-error": "_input-style-error_tg8sh_86",
+  "input-style-success": "_input-style-success_tg8sh_96",
+  "input-container": "_input-container_tg8sh_106",
+  "input-style-size-xl": "_input-style-size-xl_tg8sh_110",
+  "input-style-size-l": "_input-style-size-l_tg8sh_120",
+  "input-style-size-m": "_input-style-size-m_tg8sh_130",
+  "input-style-size-s": "_input-style-size-s_tg8sh_140",
+  "input-style-radius": "_input-style-radius_tg8sh_150",
+  flexHorizontalBetween: N,
+  flexHorizontal: k
+}, D = ({
   sizeStyle: p = "m",
-  label: d,
   labelUnit: n,
   status: l = "default",
   childrenLeft: o,
   childrenRight: i,
-  round: _,
+  round: d,
   disabled: r,
-  defaultValue: z,
+  defaultValue: _,
   ...h
 }) => {
-  const { mode: e } = N(), [f, u] = y(!1), [m, g] = y(z || ""), v = j(null), x = () => u(!0), B = () => u(!1), H = (F) => {
-    g(F.target.value);
-  }, b = [
+  const { mode: e } = j(), [g, u] = y(!1), [f, m] = y(_ || ""), z = F(null), v = () => u(!0), x = () => u(!1), B = (C) => {
+    m(C.target.value);
+  }, H = [
     t["input-style"],
     t[`input-style-size-${p}`],
-    _ && t["input-style-radius"],
+    d && t["input-style-radius"],
     t.flexHorizontalBetween
-  ].filter(Boolean).join(" "), S = [
-    f && t["input-style-focused"],
+  ].filter(Boolean).join(" "), b = [
+    g && t["input-style-focused"],
     r && t["input-style-disabled"],
     l === "secondary" && t["input-style-secondary"],
     l === "ghost" && t["input-style-ghost"]
-  ].filter(Boolean).join(" "), w = () => {
+  ].filter(Boolean).join(" "), S = () => {
     switch (l) {
       case "error":
         return t["input-style-error"];
       case "success":
         return t["input-style-success"];
       default:
-        return S;
+        return b;
     }
-  }, C = {
+  }, w = {
     "--dynamic-color": e === "light" ? "var(--color-blue-grey-400)" : "var(--color-blue-grey-200)",
     "--dynamic-color-activated": e === "light" ? "var(--color-dark-100)" : "var(--color-light-100)",
     "--dynamic-color-disabled": e === "light" ? "var(--color-dark-40)" : "var(--color-light-40)",
@@ -60,21 +59,20 @@ import '../../styles/Input.css';const k = "_flexHorizontalBetween_115tz_153", I
   return /* @__PURE__ */ a(
     "div",
     {
-      ref: v,
-      className: `input-style ${b} ${w()}`,
-      onFocus: x,
-      onBlur: B,
-      style: C,
+      ref: z,
+      className: `input-style ${H} ${S()}`,
+      onFocus: v,
+      onBlur: x,
+      style: w,
       children: [
         o && /* @__PURE__ */ s(c, { children: o }),
         /* @__PURE__ */ s("div", { className: t["input-container"], children: /* @__PURE__ */ s(
           "input",
           {
             autoCorrect: "false",
-            placeholder: d,
             disabled: r,
-            value: m,
-            onChange: H,
+            value: f,
+            onChange: B,
             ...h
           }
         ) }),
@@ -87,5 +85,5 @@ import '../../styles/Input.css';const k = "_flexHorizontalBetween_115tz_153", I
   );
 };
 export {
-  M as Input
+  D as Input
 };

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

@@ -1,11 +1,15 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 export interface TabsProps {
+    /** select the type of data text or icon that we put in tabs */
+    type: 'text' | 'icon';
     /** Array of strings representing the labels of the tabs */
-    listItems: string[];
+    listItems: (string | ReactNode)[];
     /** Index of the tab that should be active by default */
     defaultActiveTab?: number;
+    /** Position Tabs */
+    position?: 'center' | 'right' | 'left';
     /** Callback function to handle tab selection, receiving the selected tab's label */
-    onTabSelect: (selectedItem: string) => void;
+    onTabSelect: (selectedItem: string | ReactNode) => void;
 }
 export declare const Tabs: FC<TabsProps>;

package/dist/components/tabs/Tabs.js

@@ -1,39 +1,53 @@
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { useState as u, useRef as a, useLayoutEffect as g } from "react";
+import { jsxs as z, jsx as n } from "react/jsx-runtime";
+import { useState as d, useRef as i, useLayoutEffect as H } from "react";
 import { Button as v } from "../button/Button.js";
-import '../../styles/Tabs.css';const y = "_underline_eo8ix_34", $ = "_flexHorizontal_eo8ix_42", l = {
-  "tab-container": "_tab-container_eo8ix_21",
-  "tab-items": "_tab-items_eo8ix_28",
-  underline: y,
-  flexHorizontal: $
-}, w = ({ listItems: o, onTabSelect: f, defaultActiveTab: d = 0 }) => {
-  const [r, b] = u(d), [x, m] = u({}), i = a(null), _ = a(null), s = a(new Array(o.length).fill(null)), p = (e) => {
-    b(e), f(o[e]);
+import { IconButton as C } from "../icon-button/IconButton.js";
+import '../../styles/Tabs.css';const B = "_underline_6d6ac_34", o = {
+  "tab-container": "_tab-container_6d6ac_21",
+  "tab-items": "_tab-items_6d6ac_29",
+  underline: B,
+  "flexHorizontal-center": "_flexHorizontal-center_6d6ac_42",
+  "flexHorizontal-left": "_flexHorizontal-left_6d6ac_48",
+  "flexHorizontal-right": "_flexHorizontal-right_6d6ac_54"
+}, k = ({ listItems: r, type: u, onTabSelect: _, defaultActiveTab: m = 0, position: b = "left" }) => {
+  const [l, x] = d(m), [h, p] = d({}), c = i(null), g = i(null), s = i(new Array(r.length).fill(null)), f = (e) => {
+    x(e), _(r[e]);
   }, R = (e) => {
-    if (i.current && e) {
-      const t = e.getBoundingClientRect(), c = i.current.getBoundingClientRect();
-      m({
-        left: `${t.left - c.left}px`,
+    if (c.current && e) {
+      const t = e.getBoundingClientRect(), a = c.current.getBoundingClientRect();
+      p({
+        left: `${t.left - a.left}px`,
         width: `${t.width}px`
       });
     }
-  };
-  return g(() => {
-    const e = s.current[r];
+  }, y = [
+    o[`flexHorizontal-${b}`],
+    o["tab-items"]
+  ].filter(Boolean).join(" ");
+  return H(() => {
+    const e = s.current[l];
     e && R(e);
-  }, [r]), /* @__PURE__ */ h("div", { className: `tab ${l["tab-container"]}`, ref: i, children: [
-    /* @__PURE__ */ n("div", { className: `${l.flexHorizontal} ${l["tab-items"]}`, children: o.map((e, t) => /* @__PURE__ */ n("div", { ref: (c) => s.current[t] = c, children: /* @__PURE__ */ n(
+  }, [l]), /* @__PURE__ */ z("div", { className: `tab ${o["tab-container"]}`, ref: c, children: [
+    /* @__PURE__ */ n("div", { className: y, children: r.map((e, t) => /* @__PURE__ */ n("div", { ref: (a) => s.current[t] = a, children: u === "text" ? /* @__PURE__ */ n(
       v,
       {
         label: e,
         mode: "text",
-        selected: t === r,
-        onClick: () => p(t)
+        selected: t === l,
+        onClick: () => f(t)
+      }
+    ) : /* @__PURE__ */ n(
+      C,
+      {
+        mode: "icon",
+        selected: t === l,
+        onClick: () => f(t),
+        children: e
       }
     ) }, t)) }),
-    /* @__PURE__ */ n("div", { ref: _, className: l.underline, style: x })
+    /* @__PURE__ */ n("div", { ref: g, className: o.underline, style: h })
   ] });
 };
 export {
-  w as Tabs
+  k as Tabs
 };

package/dist/styles/IconButton.css

@@ -1 +1 @@
-._button_1v64m_21{font-family:var(--font-family);font-weight:500;border:0;cursor:pointer;line-height:1;box-shadow:0 4px 10px #00000008;display:inline-flex;justify-content:center;align-items:center;min-width:12px;min-height:12px;aspect-ratio:1/1}._button_1v64m_21:focus-visible{outline:none}._button_1v64m_21:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_1v64m_21:disabled *{fill:#0f0f0f66}._button-round_1v64m_49._button_1v64m_21{border-radius:50%}._button-primary_1v64m_52{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_1v64m_52:hover{background-color:var(--dynamic-color-hover)}._button-primary_1v64m_52:active{background-color:var(--dynamic-color-activated)}._button-primary_1v64m_52 *{fill:var(--dynamic-color-text)}._button-secondary_1v64m_65{color:var(--color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_1v64m_65:hover{background-color:#96b4ee66}._button-secondary_1v64m_65:active{background-color:#96b4ee99}._button-secondary_1v64m_65 *{fill:var(--color-text)}._button-tertiary_1v64m_79{color:var(--color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_1v64m_79:hover{background-color:#96b4ee1a}._button-tertiary_1v64m_79:active{background-color:#96b4ee33}._button-tertiary_1v64m_79 *{fill:var(--color-text)}._button-ghost_1v64m_93{color:var(--color-text);background-color:transparent}._button-ghost_1v64m_93:hover{background-color:#96b4ee1a}._button-ghost_1v64m_93:active{background-color:#96b4ee33}._button-ghost_1v64m_93 *{fill:var(--color-text)}._button-text_1v64m_106{color:#96b4eecc;background-color:transparent}._button-text_1v64m_106:hover{color:#96b4ee}._button-text_1v64m_106:disabled{border:none;background-color:transparent;color:#a5b4bb}._button-text-selected_1v64m_118,._button-text-selected_1v64m_118:hover{color:var(--color-text)}._button-error_1v64m_124{color:#fff;background-color:#ff4747}._button-error_1v64m_124:hover{background-color:#ed1515}._button-error_1v64m_124:active{background-color:#c80d0d}._button-error_1v64m_124 *{fill:var(--color-text)}._button-size-xl_1v64m_137{border-radius:.5rem;padding:1rem;font-size:1.125em}._button-size-l_1v64m_142{border-radius:.5rem;padding:.75rem;font-size:1em}._button-size-m_1v64m_147{border-radius:.25rem;padding:.5rem;font-size:.875em}._button-size-s_1v64m_152{border-radius:.25rem;padding:.375rem;font-size:.75em}._flexHorizontalCenter_1v64m_158{display:flex;justify-content:center;align-items:center;flex-direction:row}
+._button_pjwt4_21{font-family:var(--font-family);font-weight:500;border:0;cursor:pointer;line-height:1;display:inline-flex;justify-content:center;align-items:center;min-width:12px;min-height:12px;aspect-ratio:1/1}._button_pjwt4_21:focus-visible{outline:none}._button_pjwt4_21:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_pjwt4_21:disabled *{fill:#0f0f0f66}._button-round_pjwt4_48._button_pjwt4_21{border-radius:50%}._button-primary_pjwt4_51{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_pjwt4_51:hover{background-color:var(--dynamic-color-hover)}._button-primary_pjwt4_51:active{background-color:var(--dynamic-color-activated)}._button-primary_pjwt4_51 *{fill:var(--dynamic-color-text)}._button-secondary_pjwt4_64{color:var(--color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_pjwt4_64:hover{background-color:#96b4ee66}._button-secondary_pjwt4_64:active{background-color:#96b4ee99}._button-secondary_pjwt4_64 *{fill:var(--color-text)}._button-tertiary_pjwt4_78{color:var(--color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_pjwt4_78:hover{background-color:#96b4ee1a}._button-tertiary_pjwt4_78:active{background-color:#96b4ee33}._button-tertiary_pjwt4_78 *{fill:var(--color-text)}._button-ghost_pjwt4_92{color:var(--color-text);background-color:transparent}._button-ghost_pjwt4_92:hover{background-color:#96b4ee1a}._button-ghost_pjwt4_92:active{background-color:#96b4ee33}._button-ghost_pjwt4_92 *{fill:var(--color-text)}._button-icon_pjwt4_105{fill:#96b4eecc;background-color:transparent}._button-icon_pjwt4_105:hover{fill:#96b4ee}._button-icon_pjwt4_105:disabled{border:none;background-color:transparent;fill:#a5b4bb}._button-icon-selected_pjwt4_117,._button-icon-selected_pjwt4_117:hover{fill:var(--color-text)}._button-icon_pjwt4_105 svg{fill:inherit}._button-error_pjwt4_126{color:#fff;background-color:#ff4747}._button-error_pjwt4_126:hover{background-color:#ed1515}._button-error_pjwt4_126:active{background-color:#c80d0d}._button-error_pjwt4_126 *{fill:var(--color-text)}._button-size-xl_pjwt4_139{border-radius:.5rem;padding:1rem;font-size:1.125em}._button-size-l_pjwt4_144{border-radius:.5rem;padding:.75rem;font-size:1em}._button-size-m_pjwt4_149{border-radius:.25rem;padding:.5rem;font-size:.875em}._button-size-s_pjwt4_154{border-radius:.25rem;padding:.375rem;font-size:.75em}._flexHorizontalCenter_pjwt4_160{display:flex;justify-content:center;align-items:center;flex-direction:row}

package/dist/styles/Input.css

@@ -1 +1 @@
-input{font-family:Urbanist,sans-serif;border:none;background-color:transparent}input:focus{outline:none;box-shadow:none;border-color:transparent}input::placeholder{font-family:Urbanist,sans-serif;color:var(--dynamic-color)}._input-style_115tz_37{font-family:Urbanist,sans-serif;border:1px solid rgba(150,180,238,.5);color:var(--dynamic-color)}._input-style_115tz_37 input{color:var(--dynamic-color-activated)}._input-style_115tz_37 *{fill:var(--dynamic-color)}._input-style-disabled_115tz_49{background-color:#0f0f0f0d;border-color:var(--dynamic-color-border-disabled);pointer-events:none}._input-style-disabled_115tz_49 input{color:var(--dynamic-color-disabled)}._input-style-disabled_115tz_49 *{fill:var(--dynamic-color-disabled)}._input-style-focused_115tz_60{color:var(--dynamic-color);border-color:var(--dynamic-color-border);background-color:var(--dynamic-background-color)}._input-style-focused_115tz_60 *{fill:var(--dynamic-color-activated)}._input-style-secondary_115tz_68{background-color:#96b4ee33;color:var(--dynamic-color-secondary);border:1px solid rgba(150,180,238,.5)}._input-style-secondary_115tz_68 input{color:var(--dynamic-color-secondary)}._input-style-secondary_115tz_68 input::placeholder{color:var(--dynamic-color-secondary)}._input-style-secondary_115tz_68 *{fill:var(--dynamic-color-secondary)}._input-style-ghost_115tz_82{border:none}._input-style-error_115tz_85{border-color:#ff4747;color:#ff4747}._input-style-error_115tz_85 input::placeholder{color:#ff4747}._input-style-error_115tz_85 *{fill:#ff4747}._input-style-success_115tz_95{border-color:#33b449;color:#33b449}._input-style-success_115tz_95 input::placeholder{color:#33b449}._input-style-success_115tz_95 *{fill:#33b449}._input-style_115tz_37 ._input-container_115tz_105{position:relative;width:100%}._input-style-size-xl_115tz_109{padding:1rem;font-size:1.125em;line-height:28px;border-radius:8px;gap:.625rem}._input-style-size-xl_115tz_109 input{line-height:28px}._input-style-size-l_115tz_119{padding:.75rem;font-size:1em;line-height:24px;border-radius:8px;gap:.5rem}._input-style-size-l_115tz_119 input{line-height:24px}._input-style-size-m_115tz_129{padding:.5rem;font-size:.875em;line-height:20px;border-radius:4px;gap:.375rem}._input-style-size-m_115tz_129 input{line-height:20px}._input-style-size-s_115tz_139{padding:.375rem;font-size:.75em;line-height:16px;border-radius:4px;gap:.25rem}._input-style-size-s_115tz_139 input{line-height:16px}._input-style-radius_115tz_149{border-radius:50px}._flexHorizontalBetween_115tz_153{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontal_115tz_153{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
+input{font-family:Urbanist,sans-serif;border:none;background-color:transparent;width:auto}input:focus{outline:none;box-shadow:none;border-color:transparent}input::placeholder{font-family:Urbanist,sans-serif;color:var(--dynamic-color)}._input-style_tg8sh_38{font-family:Urbanist,sans-serif;border:1px solid rgba(150,180,238,.5);color:var(--dynamic-color)}._input-style_tg8sh_38 input{color:var(--dynamic-color-activated)}._input-style_tg8sh_38 *{fill:var(--dynamic-color)}._input-style-disabled_tg8sh_50{background-color:#0f0f0f0d;border-color:var(--dynamic-color-border-disabled);pointer-events:none}._input-style-disabled_tg8sh_50 input{color:var(--dynamic-color-disabled)}._input-style-disabled_tg8sh_50 *{fill:var(--dynamic-color-disabled)}._input-style-focused_tg8sh_61{color:var(--dynamic-color);border-color:var(--dynamic-color-border);background-color:var(--dynamic-background-color)}._input-style-focused_tg8sh_61 *{fill:var(--dynamic-color-activated)}._input-style-secondary_tg8sh_69{background-color:#96b4ee33;color:var(--dynamic-color-secondary);border:1px solid rgba(150,180,238,.5)}._input-style-secondary_tg8sh_69 input{color:var(--dynamic-color-secondary)}._input-style-secondary_tg8sh_69 input::placeholder{color:var(--dynamic-color-secondary)}._input-style-secondary_tg8sh_69 *{fill:var(--dynamic-color-secondary)}._input-style-ghost_tg8sh_83{border:none}._input-style-error_tg8sh_86{border-color:#ff4747;color:#ff4747}._input-style-error_tg8sh_86 input::placeholder{color:#ff4747}._input-style-error_tg8sh_86 *{fill:#ff4747}._input-style-success_tg8sh_96{border-color:#33b449;color:#33b449}._input-style-success_tg8sh_96 input::placeholder{color:#33b449}._input-style-success_tg8sh_96 *{fill:#33b449}._input-style_tg8sh_38 ._input-container_tg8sh_106{position:relative;width:100%}._input-style-size-xl_tg8sh_110{padding:1rem;font-size:1.125em;line-height:28px;border-radius:8px;gap:.625rem}._input-style-size-xl_tg8sh_110 input{line-height:28px}._input-style-size-l_tg8sh_120{padding:.75rem;font-size:1em;line-height:24px;border-radius:8px;gap:.5rem}._input-style-size-l_tg8sh_120 input{line-height:24px}._input-style-size-m_tg8sh_130{padding:.5rem;font-size:.875em;line-height:20px;border-radius:4px;gap:.375rem}._input-style-size-m_tg8sh_130 input{line-height:20px}._input-style-size-s_tg8sh_140{padding:.375rem;font-size:.75em;line-height:16px;border-radius:4px;gap:.25rem}._input-style-size-s_tg8sh_140 input{line-height:16px}._input-style-radius_tg8sh_150{border-radius:50px}._flexHorizontalBetween_tg8sh_154{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontal_tg8sh_154{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}

package/dist/styles/Tabs.css

@@ -1 +1 @@
-._tab-container_eo8ix_21{position:relative;color:#a5b4bb;font-weight:500;font-size:.875em;line-height:1.25rem}._tab-items_eo8ix_28{gap:2.25rem;padding:.625rem .125rem;border-bottom:1px solid rgba(150,180,238,.8)}._underline_eo8ix_34{position:absolute;bottom:0;height:2px;background-color:var(--primary-color);transition:all .3s ease}._flexHorizontal_eo8ix_42{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
+._tab-container_6d6ac_21{position:relative;color:#a5b4bb;font-weight:500;font-size:.875em;line-height:1.25rem;border-bottom:1px solid rgba(150,180,238,.8)}._tab-items_6d6ac_29{gap:2.25rem;padding:.625rem .125rem}._underline_6d6ac_34{position:absolute;bottom:0;height:2px;background-color:var(--primary-color);transition:all .3s ease}._flexHorizontal-center_6d6ac_42{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal-left_6d6ac_48{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}._flexHorizontal-right_6d6ac_54{display:flex;justify-content:flex-end;align-items:center;flex-direction:row}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",