@situaction/traq-ui-ste 1.0.18 → 1.0.20

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

@@ -2,16 +2,26 @@ import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
 import { Color, Size } from '../interface';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    mode?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'text'; /** Is this the principal call to action on the page? */
-    color?: Color; /** What background color to use (blue, red, ...)*/
-    colorMode?: 'light' | 'dark'; /** what mode do you use for light or dark color **/
-    size?: Size; /** How large should the button be? */
-    label: string; /** button contents */
-    error?: boolean; /** If true, the button will be styled to indicate an error state. */
-    selected?: boolean; /** If true, the button is activated */
-    childrenLeft?: ReactNode; /** Additional content inside the input */
-    childrenRight?: ReactNode; /** Additional content inside the input */
-    onClick?: () => void; /** Optional click handler */
+    /** 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;
+    /** button contents */
+    label: string;
+    /** If true, the button will be styled to indicate an error state. */
+    error?: boolean;
+    /** If true, the button is activated */
+    selected?: boolean;
+    /** Additional content inside the input */
+    childrenLeft?: ReactNode;
+    /** Additional content inside the input */
+    childrenRight?: ReactNode;
+    /** Optional click handler */
+    onClick?: () => void;
 }
 /**
  * Primary UI component for user interaction

package/dist/components/button/Button.js

@@ -1,68 +1,68 @@
-import { jsxs as k, jsx as i } from "react/jsx-runtime";
-import { useEffect as x } from "react";
-import { useTheme as d } from "../theme/ThemeContext.js";
-import '../../styles/Button.css';const g = "_button_1b5ik_21", v = "_flexHorizontalCenter_1b5ik_163", o = {
-  button: g,
-  "button-primary": "_button-primary_1b5ik_43",
-  "button-secondary": "_button-secondary_1b5ik_57",
-  "button-tertiary": "_button-tertiary_1b5ik_71",
-  "button-ghost": "_button-ghost_1b5ik_85",
-  "button-text": "_button-text_1b5ik_101",
-  "button-text-selected": "_button-text-selected_1b5ik_114",
-  "button-error": "_button-error_1b5ik_120",
-  "button-size-xl": "_button-size-xl_1b5ik_133",
-  "button-size-l": "_button-size-l_1b5ik_138",
-  "button-size-m": "_button-size-m_1b5ik_143",
-  "button-size-s": "_button-size-s_1b5ik_148",
-  "button-gap-xl": "_button-gap-xl_1b5ik_153",
-  "button-gap-l": "_button-gap-l_1b5ik_156",
-  "button-gap-m": "_button-gap-m_1b5ik_159",
-  "button-gap-s": "_button-gap-s_1b5ik_159",
-  flexHorizontalCenter: v
-}, $ = ({
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { useEffect as y } from "react";
+import { useTheme as x } from "../theme/ThemeContext.js";
+import '../../styles/Button.css';const d = "_button_tf4v4_21", g = "_flexHorizontalCenter_tf4v4_164", o = {
+  button: d,
+  "button-primary": "_button-primary_tf4v4_44",
+  "button-secondary": "_button-secondary_tf4v4_58",
+  "button-tertiary": "_button-tertiary_tf4v4_72",
+  "button-ghost": "_button-ghost_tf4v4_86",
+  "button-text": "_button-text_tf4v4_102",
+  "button-text-selected": "_button-text-selected_tf4v4_115",
+  "button-error": "_button-error_tf4v4_121",
+  "button-size-xl": "_button-size-xl_tf4v4_134",
+  "button-size-l": "_button-size-l_tf4v4_139",
+  "button-size-m": "_button-size-m_tf4v4_144",
+  "button-size-s": "_button-size-s_tf4v4_149",
+  "button-gap-xl": "_button-gap-xl_tf4v4_154",
+  "button-gap-l": "_button-gap-l_tf4v4_157",
+  "button-gap-m": "_button-gap-m_tf4v4_160",
+  "button-gap-s": "_button-gap-s_tf4v4_160",
+  flexHorizontalCenter: g
+}, C = ({
   mode: n = "primary",
-  size: a = "m",
+  size: s = "m",
   color: t,
   colorMode: r,
-  label: _,
-  error: u,
-  selected: l,
-  childrenLeft: b,
-  childrenRight: s,
+  label: u,
+  error: l,
+  selected: b,
+  childrenLeft: i,
+  childrenRight: _,
   ...c
 }) => {
-  const { mode: e } = d(), m = () => u ? "error" : n;
-  x(() => {
+  const { mode: e } = x(), m = () => l ? "error" : n;
+  y(() => {
     r && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
   }, [t]);
-  const p = [
+  const v = [
     o.button,
     o[`button-${m()}`],
-    o[`button-size-${a}`],
-    o[`button-gap-${a}`],
-    l && n === "text" && o["button-text-selected"],
+    o[`button-size-${s}`],
+    o[`button-gap-${s}`],
+    b && n === "text" && o["button-text-selected"],
     o.flexHorizontalCenter
-  ].join(" "), y = {
+  ].join(" "), f = {
     "--dynamic-color-text": t ? r === "dark" ? `var(--color-${t}-900)` : "var(--color-light-100)" : e === "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"})` : e === "light" ? "var(--primary-color-800)" : "var(--primary-color-100)",
     "--dynamic-color-activated": t ? `var(--color-${t}-${r === "dark" ? "50" : "700"})` : e === "light" ? "var(--primary-color-700)" : "var(--primary-color-50)"
   };
-  return /* @__PURE__ */ k(
+  return /* @__PURE__ */ p(
     "button",
     {
       type: "button",
-      className: p,
-      style: n === "primary" ? y : void 0,
+      className: v,
+      style: n === "primary" ? f : void 0,
       ...c,
       children: [
-        b && /* @__PURE__ */ i("span", { className: o.flexHorizontalCenter, children: b }),
-        /* @__PURE__ */ i("span", { children: _ }),
-        s && /* @__PURE__ */ i("span", { className: o.flexHorizontalCenter, children: s })
+        i && /* @__PURE__ */ a("span", { className: o.flexHorizontalCenter, children: i }),
+        /* @__PURE__ */ a("span", { children: u }),
+        _ && /* @__PURE__ */ a("span", { className: o.flexHorizontalCenter, children: _ })
       ]
     }
   );
 };
 export {
-  $ as Button
+  C as Button
 };

package/dist/components/checkbox/Checkbox.d.ts

@@ -2,10 +2,15 @@ import { FC, ReactNode } from 'react';
 import { Size } from '../interface';
 
 export interface CheckboxProps {
+    /** Indicates whether the checkbox is checked or not */
     checked?: boolean;
+    /** Icon to be displayed inside the checkbox */
     icon?: ReactNode;
+    /** Defines the size of the checkbox (e.g., small, medium, large) */
     size?: Size;
+    /** If true, the checkbox will be disabled and not interactable */
     disabled?: boolean;
+    /** Function to call when the checkbox state changes */
     onChange?: (checked: boolean) => void;
 }
 declare const Checkbox: FC<CheckboxProps>;

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

@@ -2,15 +2,25 @@ import { FC, ReactElement } from 'react';
 import { Color } from '../interface';
 
 export interface IconButtonProps {
-    mode?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'icon'; /** Specifies the visual style of the button. */
-    color?: Color; /** What background color to use (blue, red, ...)*/
-    colorMode?: 'light' | 'dark'; /** what mode do you use for light or dark color **/
-    size?: 's' | 'm' | 'l' | 'xl'; /** How large should the button be? */
-    round?: boolean; /** If true, the button will have rounded corners. */
-    error?: boolean; /** If true, the button will be styled to indicate an error state. */
-    selected?: boolean; /** If true, the button is activated */
-    disabled?: boolean; /** If true, the button will be disabled and non-interactive. */
-    children: ReactElement; /** Only icons (React elements) allowed inside the button */
-    onClick?: () => void; /** Optional click handler */
+    /** 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?: 's' | 'm' | 'l' | 'xl';
+    /** If true, the button will have rounded corners. */
+    round?: boolean;
+    /** If true, the button will be styled to indicate an error state. */
+    error?: boolean;
+    /** If true, the button is activated */
+    selected?: boolean;
+    /** If true, the button will be disabled and non-interactive. */
+    disabled?: boolean;
+    /** Only icons (React elements) allowed inside the button */
+    children: ReactElement;
+    /** Optional click handler */
+    onClick?: () => void;
 }
 export declare const IconButton: FC<IconButtonProps>;

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

@@ -1,22 +1,22 @@
-import { jsx as d } from "react/jsx-runtime";
-import { useEffect as w } from "react";
+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 v = "_button_1tm5w_21", x = "_flexHorizontalCenter_1tm5w_158", o = {
-  button: v,
-  "button-round": "_button-round_1tm5w_49",
-  "button-primary": "_button-primary_1tm5w_52",
-  "button-secondary": "_button-secondary_1tm5w_65",
-  "button-tertiary": "_button-tertiary_1tm5w_79",
-  "button-ghost": "_button-ghost_1tm5w_93",
-  "button-text": "_button-text_1tm5w_106",
-  "button-text-selected": "_button-text-selected_1tm5w_118",
-  "button-error": "_button-error_1tm5w_124",
-  "button-size-xl": "_button-size-xl_1tm5w_137",
-  "button-size-l": "_button-size-l_1tm5w_142",
-  "button-size-m": "_button-size-m_1tm5w_147",
-  "button-size-s": "_button-size-s_1tm5w_152",
-  flexHorizontalCenter: x
-}, h = ({
+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
+}, $ = ({
   mode: e = "primary",
   color: t,
   colorMode: r,
@@ -29,7 +29,7 @@ import '../../styles/IconButton.css';const v = "_button_1tm5w_21", x = "_flexHor
   onClick: b
 }) => {
   const { mode: n } = p(), l = () => a ? "error" : e;
-  w(() => {
+  d(() => {
     r && !t && console.warn("`colorMode` is defined but `color` is missing. `colorMode` will be ignored.");
   }, [t]);
   const c = [
@@ -39,17 +39,17 @@ import '../../styles/IconButton.css';const v = "_button_1tm5w_21", x = "_flexHor
     o[`button-size-${i}`],
     u && e === "icon" && o["button-text-selected"],
     o.flexHorizontalCenter
-  ].join(" "), y = {
+  ].join(" "), v = {
     "--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)",
     "--dynamic-color-activated": t ? `var(--color-${t}-${r === "dark" ? "50" : "700"})` : n === "light" ? "var(--primary-color-700)" : "var(--primary-color-50)"
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ y(
     "button",
     {
       className: c,
-      style: y,
+      style: v,
       onClick: b,
       disabled: m,
       children: _
@@ -57,5 +57,5 @@ import '../../styles/IconButton.css';const v = "_button_1tm5w_21", x = "_flexHor
   );
 };
 export {
-  h as IconButton
+  $ as IconButton
 };

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

@@ -1,19 +1,24 @@
 import { FC, InputHTMLAttributes, ReactNode } from 'react';
+import { Size } from '../interface';
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-    sizeStyle?: 's' | 'm' | 'l' | 'xl'; /** How large should the input be? */
-    label: string; /** The label or placeholder text for the input field */
-    labelUnit?: string; /** Optional unit or additional label to display next to the input */
-    dark?: boolean; /** Toggle for dark mode styling */
-    color?: string; /** red, green, blue, pink **/
-    classNames?: string; /** class names for parent div due to general input props (input elem takes every other props in <Input/> component) **/
-    focusBackground?: boolean; /** Whether to change the background color when the input is focused */
-    status?: 'default' | 'error' | 'success' | 'ternary'; /** input status style **/
-    ghost?: boolean; /** Whether to apply a ghost style (transparent background) */
-    round?: boolean; /** If true, the input will have rounded corners */
-    iconLeft?: ReactNode; /** Icon or element to display on the left side of the input */
-    iconRight?: ReactNode; /** Icon or element to display on the right side of the input */
-    defaultValue?: string; /** Default value for the input field */
-    disabled?: boolean; /** Disable the input field */
+    /** How large should the input be? **/
+    sizeStyle?: Size;
+    /** input status style **/
+    status?: 'default' | 'error' | 'success' | 'secondary';
+    /** 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 **/
+    round?: boolean;
+    /** Icon or element to display on the left side of the input **/
+    childrenLeft?: ReactNode;
+    /** Icon or element to display on the right side of the input **/
+    childrenRight?: ReactNode;
+    /** Default value for the input field **/
+    defaultValue?: string;
+    /** Disable the input field **/
+    disabled?: boolean;
 }
 export declare const Input: FC<InputProps>;

package/dist/components/input/Input.js

@@ -1,111 +1,89 @@
-import { jsxs as _, jsx as s, Fragment as R } from "react/jsx-runtime";
-import { useState as y, useRef as q } from "react";
-import '../../styles/Input.css';const A = "_flexHorizontalBetween_1edvz_165", E = "_flexHorizontal_1edvz_165", e = {
-  "input-style": "_input-style_1edvz_33",
-  "input-style-ghost": "_input-style-ghost_1edvz_44",
-  "input-style-disabled": "_input-style-disabled_1edvz_49",
-  "input-style-focused": "_input-style-focused_1edvz_58",
-  "input-style-error": "_input-style-error_1edvz_63",
-  "input-style-error-focused": "_input-style-error-focused_1edvz_70",
-  "input-style-error-focus-background": "_input-style-error-focus-background_1edvz_76",
-  "input-style-error-disabled": "_input-style-error-disabled_1edvz_79",
-  "input-style-success": "_input-style-success_1edvz_87",
-  "input-style-success-focused": "_input-style-success-focused_1edvz_94",
-  "input-style-success-focus-background": "_input-style-success-focus-background_1edvz_100",
-  "input-style-success-disabled": "_input-style-success-disabled_1edvz_103",
-  "input-container": "_input-container_1edvz_111",
-  "floating-input": "_floating-input_1edvz_115",
-  "floating-input-size-xl": "_floating-input-size-xl_1edvz_121",
-  "floating-input-size-l": "_floating-input-size-l_1edvz_125",
-  "floating-input-size-m": "_floating-input-size-m_1edvz_129",
-  "floating-input-size-s": "_floating-input-size-s_1edvz_133",
-  "input-style-size-xl": "_input-style-size-xl_1edvz_137",
-  "input-style-size-l": "_input-style-size-l_1edvz_143",
-  "input-style-size-m": "_input-style-size-m_1edvz_149",
-  "input-style-size-s": "_input-style-size-s_1edvz_155",
-  "input-style-radius": "_input-style-radius_1edvz_161",
-  flexHorizontalBetween: A,
-  flexHorizontal: E
-}, K = ({
-  sizeStyle: u = "m",
-  label: z,
-  labelUnit: o,
-  color: n,
-  dark: r,
-  focusBackground: l,
-  status: a = "default",
-  ghost: f = !1,
-  iconLeft: c,
-  iconRight: p,
-  round: v,
-  classNames: g,
-  disabled: i,
-  defaultValue: m,
-  ...b
+import { jsxs as u, jsx as l, 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_17x9g_150", I = "_flexHorizontal_17x9g_150", e = {
+  "input-style": "_input-style_17x9g_37",
+  "input-style-disabled": "_input-style-disabled_17x9g_49",
+  "input-style-focused": "_input-style-focused_17x9g_60",
+  "input-style-secondary": "_input-style-secondary_17x9g_68",
+  "input-style-error": "_input-style-error_17x9g_82",
+  "input-style-success": "_input-style-success_17x9g_92",
+  "input-container": "_input-container_17x9g_102",
+  "input-style-size-xl": "_input-style-size-xl_17x9g_106",
+  "input-style-size-l": "_input-style-size-l_17x9g_116",
+  "input-style-size-m": "_input-style-size-m_17x9g_126",
+  "input-style-size-s": "_input-style-size-s_17x9g_136",
+  "input-style-radius": "_input-style-radius_17x9g_146",
+  flexHorizontalBetween: k,
+  flexHorizontal: I
+}, M = ({
+  sizeStyle: d = "m",
+  label: p,
+  labelUnit: s,
+  status: n = "default",
+  childrenLeft: o,
+  childrenRight: i,
+  round: _,
+  disabled: r,
+  defaultValue: g,
+  ...x
 }) => {
-  const [t, d] = y(!1), [h, x] = y(m || ""), $ = q(null), H = () => d(!0), S = () => d(!1), j = (D) => {
-    x(D.target.value);
-  }, B = [
+  const { mode: t } = N(), [f, a] = y(!1), [m, h] = y(g || ""), z = j(null), v = () => a(!0), B = () => a(!1), H = (F) => {
+    h(F.target.value);
+  }, b = [
     e["input-style"],
-    e[`input-style-size-${u}`],
-    e[`input-style-gap-${a}`],
-    v && e["input-style-radius"],
-    e.flexHorizontalBetween,
-    "gap4",
-    f && e["input-style-ghost"]
-  ].filter(Boolean).join(" "), N = [
-    t && e["input-style-focused"],
-    i && e["input-style-disabled"]
-  ].filter(Boolean).join(" "), C = [
-    e["input-style-error"],
-    i && e["input-style-error-disabled"],
-    t && e["input-style-error-focused"],
-    t && l && e["input-style-error-focus-background"]
-  ].filter(Boolean).join(" "), w = [
-    e["input-style-success"],
-    i && e["input-style-success-disabled"],
-    t && e["input-style-success-focused"],
-    t && l && e["input-style-success-focus-background"]
-  ].filter(Boolean).join(" "), F = () => {
-    switch (a) {
+    e[`input-style-size-${d}`],
+    _ && e["input-style-radius"],
+    e.flexHorizontalBetween
+  ].filter(Boolean).join(" "), S = [
+    f && e["input-style-focused"],
+    r && e["input-style-disabled"],
+    n === "secondary" && e["input-style-secondary"]
+  ].filter(Boolean).join(" "), w = () => {
+    switch (n) {
       case "error":
-        return C;
+        return e["input-style-error"];
       case "success":
-        return w;
+        return e["input-style-success"];
       default:
-        return N;
+        return S;
     }
-  }, k = [
-    e["floating-input"],
-    e[`floating-input-size-${u}`]
-  ].join(" "), I = {
-    "--dynamic-color": `var(--color-${n}-${r ? "800" : "300"})`,
-    "--dynamic-color-border": `var(--color-${n}-${r ? "800" : "300"})`,
-    "--dynamic-background-color": `${l ? `var(--color-${n}-50)` : "transparent"}`
-  }, V = {
-    "--dynamic-color": "var(--color-blue-situaction-800)",
-    "--dynamic-color-border": "var(--color-blue-situaction-800)",
-    "--dynamic-background-color": `${l ? "var(--color-blue-situaction-50)" : "transparent"}`
+  }, C = {
+    "--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__ */ _("div", { ref: $, className: `input-style ${B} ${g} ${F()} gap-xs-2`, onFocus: H, onBlur: S, style: n ? I : V, children: [
-    c && /* @__PURE__ */ s("span", { className: "", children: c }),
-    /* @__PURE__ */ s("div", { className: e["input-container"], children: /* @__PURE__ */ s(
-      "input",
-      {
-        autoCorrect: "false",
-        className: k,
-        placeholder: z,
-        value: h,
-        onChange: j,
-        ...b
-      }
-    ) }),
-    /* @__PURE__ */ _(R, { children: [
-      o && /* @__PURE__ */ s("div", { children: o }),
-      p && /* @__PURE__ */ s("span", { className: e.flexHorizontal, children: p })
-    ] })
-  ] });
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: z,
+      className: `input-style ${b} ${w()}`,
+      onFocus: v,
+      onBlur: B,
+      style: C,
+      children: [
+        o && /* @__PURE__ */ l(c, { children: o }),
+        /* @__PURE__ */ l("div", { className: e["input-container"], children: /* @__PURE__ */ l(
+          "input",
+          {
+            autoCorrect: "false",
+            placeholder: p,
+            disabled: r,
+            value: m,
+            onChange: H,
+            ...x
+          }
+        ) }),
+        /* @__PURE__ */ u(c, { children: [
+          s && /* @__PURE__ */ l("div", { children: s }),
+          i && /* @__PURE__ */ l("span", { className: e.flexHorizontal, children: i })
+        ] })
+      ]
+    }
+  );
 };
 export {
-  K as Input
+  M as Input
 };

package/dist/components/interface.d.ts

@@ -1,2 +1,3 @@
 export type Color = 'light' | 'dark' | 'grey' | 'blue-grey' | 'blue' | 'blue-situaction' | 'purple' | 'pink' | 'gold' | 'brown' | 'emerald';
 export type Size = 's' | 'm' | 'l' | 'xl';
+export type SizeTooltip = 'xs-5' | 'xs-3' | 'xs' | 'm-1';

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

@@ -1,8 +1,11 @@
 import { FC } from 'react';
 
 export interface TabsProps {
-    listItems: string[]; /** Array of strings representing the labels of the tabs */
-    defaultActiveTab?: number; /** Index of the tab that should be active by default */
-    onTabSelect: (selectedItem: string) => void; /** Callback function to handle tab selection, receiving the selected tab's label */
+    /** Array of strings representing the labels of the tabs */
+    listItems: string[];
+    /** Index of the tab that should be active by default */
+    defaultActiveTab?: number;
+    /** Callback function to handle tab selection, receiving the selected tab's label */
+    onTabSelect: (selectedItem: string) => void;
 }
 export declare const Tabs: FC<TabsProps>;

package/dist/components/tag/Tag.d.ts

@@ -1,12 +1,18 @@
 import { FC, ReactNode } from 'react';
-import { Color } from '../interface';
+import { Color, Size } from '../interface';
 
 export interface TagProps {
-    label?: string; /** The text label for the tag. This will be displayed if provided. */
-    color?: Color; /** The color of the tag, must be one of the defined valid colors. */
-    deletable?: boolean; /** Indicates if the tag can be deleted; when true, a delete icon is shown. */
-    size?: 's' | 'm' | 'l' | 'xl'; /** The size of the tag, which affects its styling. */
-    children?: ReactNode; /** Additional content to be displayed inside the tag, like icons or other elements. */
-    onClick?: () => void; /** A callback function to be called when the tag is clicked. */
+    /** The text label for the tag. This will be displayed if provided. */
+    label?: string;
+    /** The color of the tag, must be one of the defined valid colors. */
+    color?: Color;
+    /** Indicates if the tag can be deleted; when true, a delete icon is shown. */
+    deletable?: boolean;
+    /** The size of the tag, which affects its styling. */
+    size?: Size;
+    /** Additional content to be displayed inside the tag, like icons or other elements. */
+    children?: ReactNode;
+    /** A callback function to be called when the tag is clicked. */
+    onClick?: () => void;
 }
 export declare const Tag: FC<TagProps>;

package/dist/components/theme/ThemeContext.js

@@ -1,32 +1,27 @@
-import { jsx as v } from "react/jsx-runtime";
-import { createContext as F, useState as g, useEffect as P, useContext as S } from "react";
+import { jsx as f } from "react/jsx-runtime";
+import { createContext as k, useState as h, useContext as w } from "react";
 import { baseTheme as r } from "./createTheme.js";
-import '../../styles/ThemeContext.css';const f = F(void 0), M = ({ children: y, theme: e, mode: h }) => {
-  const [o] = g(e ?? r), [t, $] = g(h ?? "light"), x = () => {
-    $((a) => a === "light" ? "dark" : "light");
-  }, b = (a) => [950, 900, 800, 700, 600, 500, 400, 300, 200, 100, 50].reduce((l, i) => (l[`--primary-color-${i}`] = `var(--color-${a}-${i})`, l), {});
-  return P(() => {
-    var c, l, i, s, p, d, m, n;
-    const a = {
-      "--font-family": ((c = o == null ? void 0 : o.typography) == null ? void 0 : c.fontFamily) ?? r.typography.fontFamily,
-      "--font-family-secondary": ((l = o == null ? void 0 : o.typography) == null ? void 0 : l.fontFamilySecondary) ?? r.typography.fontFamilySecondary,
-      ...b(((i = o == null ? void 0 : o.color) == null ? void 0 : i.primary) ?? r.color.primary),
-      "--primary-dark-color-disabled": e === void 0 ? "var(--color-blue-grey-800)" : "var(--color-dark-10)",
-      "--primary-color": t === "light" ? `var(--color-${((s = o == null ? void 0 : o.color) == null ? void 0 : s.primary) ?? r.color.primary}-900)` : `var(--color-${((p = o == null ? void 0 : o.color) == null ? void 0 : p.primary) ?? r.color.primary}-200)`,
-      "--secondary-color": t === "light" ? `var(--color-${((d = o == null ? void 0 : o.color) == null ? void 0 : d.primary) ?? r.color.primary}-200)` : `var(--color-${((m = o == null ? void 0 : o.color) == null ? void 0 : m.primary) ?? r.color.primary}-900)`,
-      "--color-text": t === "light" ? `var(--color-${((n = o == null ? void 0 : o.color) == null ? void 0 : n.primary) ?? r.color.primary}-900)` : "var(--color-light-100)"
-    };
-    Object.entries(a).forEach(([C, E]) => {
-      document.documentElement.style.setProperty(C, E);
-    });
-  }, [o, t]), /* @__PURE__ */ v(f.Provider, { value: { theme: o, mode: t, toggleMode: x }, children: /* @__PURE__ */ v("div", { style: { height: "100%" }, children: y }) });
-}, j = () => {
-  const y = S(f);
-  if (y === void 0)
+import '../../styles/ThemeContext.css';const $ = k(void 0), V = ({ children: a, theme: t, mode: x }) => {
+  var y, c, p, s, d, m, e, n;
+  const [o] = h(t ?? r), [l, b] = h(x ?? "light"), C = () => {
+    b((i) => i === "light" ? "dark" : "light");
+  }, F = (i) => [950, 900, 800, 700, 600, 500, 400, 300, 200, 100, 50].reduce((v, g) => (v[`--primary-color-${g}`] = `var(--color-${i}-${g})`, v), {}), S = {
+    "--font-family": ((y = o == null ? void 0 : o.typography) == null ? void 0 : y.fontFamily) ?? r.typography.fontFamily,
+    "--font-family-secondary": ((c = o == null ? void 0 : o.typography) == null ? void 0 : c.fontFamilySecondary) ?? r.typography.fontFamilySecondary,
+    ...F(((p = o == null ? void 0 : o.color) == null ? void 0 : p.primary) ?? r.color.primary),
+    "--primary-dark-color-disabled": t === void 0 ? "var(--color-blue-grey-800)" : "var(--color-dark-10)",
+    "--primary-color": l === "light" ? `var(--color-${((s = o == null ? void 0 : o.color) == null ? void 0 : s.primary) ?? r.color.primary}-900)` : `var(--color-${((d = o == null ? void 0 : o.color) == null ? void 0 : d.primary) ?? r.color.primary}-200)`,
+    "--secondary-color": l === "light" ? `var(--color-${((m = o == null ? void 0 : o.color) == null ? void 0 : m.primary) ?? r.color.primary}-200)` : `var(--color-${((e = o == null ? void 0 : o.color) == null ? void 0 : e.primary) ?? r.color.primary}-900)`,
+    "--color-text": l === "light" ? `var(--color-${((n = o == null ? void 0 : o.color) == null ? void 0 : n.primary) ?? r.color.primary}-900)` : "var(--color-light-100)"
+  };
+  return /* @__PURE__ */ f($.Provider, { value: { theme: o, mode: l, toggleMode: C }, children: /* @__PURE__ */ f("div", { style: { ...S, height: "100%" }, children: a }) });
+}, q = () => {
+  const a = w($);
+  if (a === void 0)
     throw new Error("useTheme must be used within a ThemeProvider");
-  return y;
+  return a;
 };
 export {
-  M as ThemeProvider,
-  j as useTheme
+  V as ThemeProvider,
+  q as useTheme
 };

package/dist/components/title/Title.d.ts

@@ -1,7 +1,9 @@
 import { FC, ReactNode } from 'react';
 
 export interface TitleProps {
-    title: string; /** The main title text to be displayed in the heading. */
-    children?: ReactNode; /** Optional additional content to be displayed alongside the title, such as icons or other elements. */
+    /** The main title text to be displayed in the heading. */
+    title: string;
+    /** Optional additional content to be displayed alongside the title, such as icons or other elements. */
+    children?: ReactNode;
 }
 export declare const Title: FC<TitleProps>;

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+import { SizeTooltip } from '../interface';
+
+export type TooltipProps = {
+    /** Elements concerned by hover events in order to show the tooltip. */
+    children: ReactNode;
+    /** Content to put in tooltip (mandatory). */
+    content: ReactNode;
+    /** Where to show tooltip in relation to the element. */
+    position?: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'right';
+    /** How big is the gap between element and tooltip. */
+    gap?: SizeTooltip;
+    /** How large padding is. */
+    padding?: SizeTooltip;
+    /** Option to force color mode, dark or light. */
+    colorMode?: 'light' | 'dark';
+};
+export declare const Tooltip: FC<TooltipProps>;
+export default Tooltip;

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,46 @@
+import { jsxs as d, jsx as h } from "react/jsx-runtime";
+import { useState as _ } from "react";
+import { useTheme as u } from "../theme/ThemeContext.js";
+import '../../styles/Tooltip.css';const x = "_tooltip_1w7yx_21", o = {
+  "tooltip-container": "_tooltip-container_1w7yx_21",
+  tooltip: x,
+  "tooltip-dark": "_tooltip-dark_1w7yx_42",
+  "tooltip-light": "_tooltip-light_1w7yx_47"
+}, k = ({ children: s, content: a, colorMode: e, position: n = "top", gap: r = "xs-5", padding: p = "xs-5" }) => {
+  const [c, l] = _(!1), { mode: m } = u(), f = [
+    o.tooltip,
+    o[e ? `tooltip-${e}` : m === "light" ? "tooltip-light" : "tooltip-dark"]
+  ].filter(Boolean).join(" "), g = {
+    "--dynamic-gap": `var(--spacing-${r})`,
+    "--dynamic-padding": `var(--spacing-${p})`
+  }, y = () => {
+    const t = "calc(100% + var(--dynamic-gap))", i = {
+      top: { bottom: t, left: "50%", transform: "translateX(-50%)" },
+      topLeft: { bottom: t, right: "100%" },
+      topRight: { bottom: t, left: "100%" },
+      bottom: { top: t, left: "50%", transform: "translateX(-50%)" },
+      bottomLeft: { top: t, right: "100%" },
+      bottomRight: { top: t, left: "100%" },
+      left: { top: "50%", right: t, transform: "translateY(-50%)" },
+      right: { top: "50%", left: t, transform: "translateY(-50%)" }
+    };
+    return { ...i[n] || i.top };
+  };
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: o["tooltip-container"],
+      style: g,
+      onMouseEnter: () => l(!0),
+      onMouseLeave: () => l(!1),
+      children: [
+        s,
+        c && /* @__PURE__ */ h("div", { className: f, style: y(), children: a })
+      ]
+    }
+  );
+};
+export {
+  k as Tooltip,
+  k as default
+};

package/dist/styles/Button.css

@@ -1 +1 @@
-@font-face{font-family:Urbanist-Thin;src:url(../fonts/Urbanist-Thin.ttf) format("truetype");font-weight:100;font-style:normal}@font-face{font-family:Urbanist-Extra-Light;src:url(../fonts/Urbanist-ExtraLight.ttf) format("truetype");font-weight:200;font-style:normal}@font-face{font-family:Urbanist-Light;src:url(../fonts/Urbanist-Light.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Urbanist-Regular;src:url(../fonts/Urbanist-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Urbanist;src:url(../fonts/Urbanist-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Urbanist-Back;src:url(../fonts/Urbanist-Black.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:Urbanist-Semi-Bold;src:url(../fonts/Urbanist-SemiBold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Urbanist-Bold;src:url(../fonts/Urbanist-Bold.ttf) format("truetype");font-weight:800;font-style:normal}@font-face{font-family:Urbanist-Extra-Bold;src:url(../fonts/Urbanist-ExtraBold.ttf) format("truetype");font-weight:900;font-style:normal}:root,body{font-family:Urbanist,sans-serif;line-height:1;width:100vw;height:100vh}._button_1b5ik_21{font-family:var(--font-family);font-weight:500;border:0;border-radius:8px;cursor:pointer;width:fit-content}._button_1b5ik_21:focus{outline:none}._button_1b5ik_21:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_1b5ik_21:disabled *{fill:#0f0f0f66}._button-primary_1b5ik_43{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_1b5ik_43:hover{background-color:var(--dynamic-color-hover)}._button-primary_1b5ik_43:active{background-color:var(--dynamic-color-activated);outline:none}._button-primary_1b5ik_43 *{fill:var(--dynamic-color-text)}._button-secondary_1b5ik_57{color:var(--color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_1b5ik_57:hover{background-color:#96b4ee66}._button-secondary_1b5ik_57:active{background-color:#96b4ee99}._button-secondary_1b5ik_57 *{fill:var(--color-text)}._button-tertiary_1b5ik_71{color:var(--color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_1b5ik_71:hover{background-color:#96b4ee1a}._button-tertiary_1b5ik_71:active{background-color:#96b4ee33}._button-tertiary_1b5ik_71 *{fill:var(--color-text)}._button-ghost_1b5ik_85{color:var(--color-text);background-color:transparent}._button-ghost_1b5ik_85:hover{background-color:#96b4ee1a}._button-ghost_1b5ik_85:active{background-color:#96b4ee33}._button-ghost_1b5ik_85:disabled{border:none}._button-ghost_1b5ik_85 *{fill:var(--color-text)}._button-text_1b5ik_101{color:#96b4eecc;background-color:transparent;padding:0!important}._button-text_1b5ik_101:hover{color:#96b4ee}._button-text_1b5ik_101:disabled{border:none;background-color:transparent;color:#a5b4bb}._button-text-selected_1b5ik_114,._button-text-selected_1b5ik_114:hover{color:var(--color-text)}._button-error_1b5ik_120{color:#fff;background-color:#ff4747}._button-error_1b5ik_120:hover{background-color:#ed1515}._button-error_1b5ik_120:active{background-color:#c80d0d}._button-error_1b5ik_120 *{fill:var(--color-text)}._button-size-xl_1b5ik_133{padding:1rem 2rem;font-size:1.125em;line-height:28px}._button-size-l_1b5ik_138{padding:.75rem 1.5rem;font-size:1em;line-height:24px}._button-size-m_1b5ik_143{padding:.5rem 1rem;font-size:.875em;line-height:22px}._button-size-s_1b5ik_148{padding:.375rem .75rem;font-size:.75em;line-height:16px}._button-gap-xl_1b5ik_153{gap:12px}._button-gap-l_1b5ik_156{gap:8px}._button-gap-m_1b5ik_159,._button-gap-s_1b5ik_159{gap:4px}._flexHorizontalCenter_1b5ik_163{display:flex;justify-content:center;align-items:center;flex-direction:row}
+@font-face{font-family:Urbanist-Thin;src:url(../fonts/Urbanist-Thin.ttf) format("truetype");font-weight:100;font-style:normal}@font-face{font-family:Urbanist-Extra-Light;src:url(../fonts/Urbanist-ExtraLight.ttf) format("truetype");font-weight:200;font-style:normal}@font-face{font-family:Urbanist-Light;src:url(../fonts/Urbanist-Light.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Urbanist-Regular;src:url(../fonts/Urbanist-Regular.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Urbanist;src:url(../fonts/Urbanist-Medium.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Urbanist-Back;src:url(../fonts/Urbanist-Black.ttf) format("truetype");font-weight:600;font-style:normal}@font-face{font-family:Urbanist-Semi-Bold;src:url(../fonts/Urbanist-SemiBold.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Urbanist-Bold;src:url(../fonts/Urbanist-Bold.ttf) format("truetype");font-weight:800;font-style:normal}@font-face{font-family:Urbanist-Extra-Bold;src:url(../fonts/Urbanist-ExtraBold.ttf) format("truetype");font-weight:900;font-style:normal}:root,body{font-family:Urbanist,sans-serif;line-height:1;width:100vw;height:100vh}._button_tf4v4_21{font-family:var(--font-family);font-weight:500;border:0;border-radius:8px;cursor:pointer;width:fit-content}._button_tf4v4_21:focus-visible{outline:2px solid var(--dynamic-color);outline-offset:2px}._button_tf4v4_21:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_tf4v4_21:disabled *{fill:#0f0f0f66}._button-primary_tf4v4_44{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_tf4v4_44:hover{background-color:var(--dynamic-color-hover)}._button-primary_tf4v4_44:active{background-color:var(--dynamic-color-activated);outline:none}._button-primary_tf4v4_44 *{fill:var(--dynamic-color-text)}._button-secondary_tf4v4_58{color:var(--color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_tf4v4_58:hover{background-color:#96b4ee66}._button-secondary_tf4v4_58:active{background-color:#96b4ee99}._button-secondary_tf4v4_58 *{fill:var(--color-text)}._button-tertiary_tf4v4_72{color:var(--color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_tf4v4_72:hover{background-color:#96b4ee1a}._button-tertiary_tf4v4_72:active{background-color:#96b4ee33}._button-tertiary_tf4v4_72 *{fill:var(--color-text)}._button-ghost_tf4v4_86{color:var(--color-text);background-color:transparent}._button-ghost_tf4v4_86:hover{background-color:#96b4ee1a}._button-ghost_tf4v4_86:active{background-color:#96b4ee33}._button-ghost_tf4v4_86:disabled{border:none}._button-ghost_tf4v4_86 *{fill:var(--color-text)}._button-text_tf4v4_102{color:#96b4eecc;background-color:transparent;padding:0!important}._button-text_tf4v4_102:hover{color:#96b4ee}._button-text_tf4v4_102:disabled{border:none;background-color:transparent;color:#a5b4bb}._button-text-selected_tf4v4_115,._button-text-selected_tf4v4_115:hover{color:var(--color-text)}._button-error_tf4v4_121{color:#fff;background-color:#ff4747}._button-error_tf4v4_121:hover{background-color:#ed1515}._button-error_tf4v4_121:active{background-color:#c80d0d}._button-error_tf4v4_121 *{fill:var(--color-text)}._button-size-xl_tf4v4_134{padding:1rem 2rem;font-size:1.125em;line-height:28px}._button-size-l_tf4v4_139{padding:.75rem 1.5rem;font-size:1em;line-height:24px}._button-size-m_tf4v4_144{padding:.5rem 1rem;font-size:.875em;line-height:22px}._button-size-s_tf4v4_149{padding:.375rem .75rem;font-size:.75em;line-height:16px}._button-gap-xl_tf4v4_154{gap:12px}._button-gap-l_tf4v4_157{gap:8px}._button-gap-m_tf4v4_160,._button-gap-s_tf4v4_160{gap:4px}._flexHorizontalCenter_tf4v4_164{display:flex;justify-content:center;align-items:center;flex-direction:row}

package/dist/styles/IconButton.css

@@ -1 +1 @@
-._button_1tm5w_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_1tm5w_21:focus{outline:none}._button_1tm5w_21:disabled{background-color:#0f0f0f0d;color:#0f0f0f66;border:1px solid rgba(15,15,15,.1);cursor:initial;pointer-events:none}._button_1tm5w_21:disabled *{fill:#0f0f0f66}._button-round_1tm5w_49._button_1tm5w_21{border-radius:50%}._button-primary_1tm5w_52{color:var(--dynamic-color-text);background-color:var(--dynamic-color)}._button-primary_1tm5w_52:hover{background-color:var(--dynamic-color-hover)}._button-primary_1tm5w_52:active{background-color:var(--dynamic-color-activated)}._button-primary_1tm5w_52 *{fill:var(--dynamic-color-text)}._button-secondary_1tm5w_65{color:var(--color-text);background-color:#96b4ee33;border:1px solid rgba(150,180,238,.5)}._button-secondary_1tm5w_65:hover{background-color:#96b4ee66}._button-secondary_1tm5w_65:active{background-color:#96b4ee99}._button-secondary_1tm5w_65 *{fill:var(--color-text)}._button-tertiary_1tm5w_79{color:var(--color-text);background-color:transparent;border:1px solid rgba(150,180,238,.5)}._button-tertiary_1tm5w_79:hover{background-color:#96b4ee1a}._button-tertiary_1tm5w_79:active{background-color:#96b4ee33}._button-tertiary_1tm5w_79 *{fill:var(--color-text)}._button-ghost_1tm5w_93{color:var(--color-text);background-color:transparent}._button-ghost_1tm5w_93:hover{background-color:#96b4ee1a}._button-ghost_1tm5w_93:active{background-color:#96b4ee33}._button-ghost_1tm5w_93 *{fill:var(--dynamic-color-text)}._button-text_1tm5w_106{color:#96b4eecc;background-color:transparent}._button-text_1tm5w_106:hover{color:#96b4ee}._button-text_1tm5w_106:disabled{border:none;background-color:transparent;color:#a5b4bb}._button-text-selected_1tm5w_118,._button-text-selected_1tm5w_118:hover{color:var(--color-text)}._button-error_1tm5w_124{color:#fff;background-color:#ff4747}._button-error_1tm5w_124:hover{background-color:#ed1515}._button-error_1tm5w_124:active{background-color:#c80d0d}._button-error_1tm5w_124 *{fill:var(--color-text)}._button-size-xl_1tm5w_137{border-radius:.5rem;padding:1rem;font-size:1.125em}._button-size-l_1tm5w_142{border-radius:.5rem;padding:.75rem;font-size:1em}._button-size-m_1tm5w_147{border-radius:.25rem;padding:.5rem;font-size:.875em}._button-size-s_1tm5w_152{border-radius:.25rem;padding:.375rem;font-size:.75em}._flexHorizontalCenter_1tm5w_158{display:flex;justify-content:center;align-items:center;flex-direction:row}
+._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}

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-style_1edvz_33{font-family:Urbanist,sans-serif;border:1px solid var(--dynamic-color-border);box-shadow:0 4px 5px #0000000a;color:var(--dynamic-color);position:relative}._input-style_1edvz_33 input{color:var(--dynamic-color)}._input-style-ghost_1edvz_44{border-bottom:solid #A5B4BB;border-width:0 0 1px 0;border-radius:0!important}._input-style-disabled_1edvz_49{background-color:#fff;border-color:#a5b4bb;pointer-events:none;color:#a5b4bb}._input-style-disabled_1edvz_49 input{color:#a5b4bb}._input-style-focused_1edvz_58{color:var(--dynamic-color);border-color:var(--dynamic-color-border);background-color:var(--dynamic-background-color)}._input-style-error_1edvz_63{border-color:#ff4747;color:#ff4747}._input-style-error_1edvz_63 input,._input-style-error-focused_1edvz_70,._input-style-error-focused_1edvz_70 input{color:#ff4747}._input-style-error-focus-background_1edvz_76{background-color:#fff1f1}._input-style-error-disabled_1edvz_79{background-color:#fff1f1;border-color:#ff9d9d;color:#ff9d9d}._input-style-error-disabled_1edvz_79 input{color:#ff9d9d}._input-style-success_1edvz_87{border-color:#33b449;color:#33b449}._input-style-success_1edvz_87 input,._input-style-success-focused_1edvz_94,._input-style-success-focused_1edvz_94 input{color:#33b449}._input-style-success-focus-background_1edvz_100{background-color:#f1fcf3}._input-style-success-disabled_1edvz_103{background-color:#f1fcf3;border-color:#91e49e;color:#91e49e}._input-style-success-disabled_1edvz_103 input{color:#91e49e}._input-style_1edvz_33 ._input-container_1edvz_111{position:relative;width:100%}._input-style_1edvz_33 ._floating-input_1edvz_115{display:block;width:100%;box-sizing:border-box}._input-style_1edvz_33 ._floating-input-size-xl_1edvz_121{font-size:1.125em;line-height:28px}._input-style_1edvz_33 ._floating-input-size-l_1edvz_125{font-size:1em;line-height:24px}._input-style_1edvz_33 ._floating-input-size-m_1edvz_129{font-size:.875em;line-height:22px}._input-style_1edvz_33 ._floating-input-size-s_1edvz_133{font-size:.875em;line-height:20px}._input-style-size-xl_1edvz_137{padding:1rem;font-size:1.125em;line-height:28px;border-radius:8px}._input-style-size-l_1edvz_143{padding:.75rem;font-size:1em;line-height:24px;border-radius:8px}._input-style-size-m_1edvz_149{padding:.5rem;font-size:.875em;line-height:22px;border-radius:8px}._input-style-size-s_1edvz_155{padding:.375rem;font-size:.875em;line-height:20px;border-radius:4px}._input-style-radius_1edvz_161{border-radius:50px}._flexHorizontalBetween_1edvz_165{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontal_1edvz_165{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
+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_17x9g_37{font-family:Urbanist,sans-serif;border:1px solid rgba(150,180,238,.5);color:var(--dynamic-color)}._input-style_17x9g_37 input{color:var(--dynamic-color-activated)}._input-style_17x9g_37 *{fill:var(--dynamic-color)}._input-style-disabled_17x9g_49{background-color:#0f0f0f0d;border-color:var(--dynamic-color-border-disabled);pointer-events:none}._input-style-disabled_17x9g_49 input{color:var(--dynamic-color-disabled)}._input-style-disabled_17x9g_49 *{fill:var(--dynamic-color-disabled)}._input-style-focused_17x9g_60{color:var(--dynamic-color);border-color:var(--dynamic-color-border);background-color:var(--dynamic-background-color)}._input-style-focused_17x9g_60 *{fill:var(--dynamic-color-activated)}._input-style-secondary_17x9g_68{background-color:#96b4ee33;color:var(--dynamic-color-secondary);border:1px solid rgba(150,180,238,.5)}._input-style-secondary_17x9g_68 input{color:var(--dynamic-color-secondary)}._input-style-secondary_17x9g_68 input::placeholder{color:var(--dynamic-color-secondary)}._input-style-secondary_17x9g_68 *{fill:var(--dynamic-color-secondary)}._input-style-error_17x9g_82{border-color:#ff4747;color:#ff4747}._input-style-error_17x9g_82 input::placeholder{color:#ff4747}._input-style-error_17x9g_82 *{fill:#ff4747}._input-style-success_17x9g_92{border-color:#33b449;color:#33b449}._input-style-success_17x9g_92 input::placeholder{color:#33b449}._input-style-success_17x9g_92 *{fill:#33b449}._input-style_17x9g_37 ._input-container_17x9g_102{position:relative;width:100%}._input-style-size-xl_17x9g_106{padding:1rem;font-size:1.125em;line-height:28px;border-radius:8px;gap:.625rem}._input-style-size-xl_17x9g_106 input{line-height:28px}._input-style-size-l_17x9g_116{padding:.75rem;font-size:1em;line-height:24px;border-radius:8px;gap:.5rem}._input-style-size-l_17x9g_116 input{line-height:24px}._input-style-size-m_17x9g_126{padding:.5rem;font-size:.875em;line-height:20px;border-radius:4px;gap:.375rem}._input-style-size-m_17x9g_126 input{line-height:20px}._input-style-size-s_17x9g_136{padding:.375rem;font-size:.75em;line-height:16px;border-radius:4px;gap:.25rem}._input-style-size-s_17x9g_136 input{line-height:16px}._input-style-radius_17x9g_146{border-radius:50px}._flexHorizontalBetween_17x9g_150{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontal_17x9g_150{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}

package/dist/styles/Tooltip.css

@@ -0,0 +1 @@
+._tooltip-container_1w7yx_21{position:relative;display:inline-block;width:auto;height:auto;display:flex;justify-content:center;align-items:center;cursor:pointer}._tooltip-container_1w7yx_21 ._tooltip_1w7yx_21{position:absolute;padding:var(--dynamic-padding);border-radius:4px;font-size:12px;white-space:nowrap;z-index:10;opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s}._tooltip-container_1w7yx_21 ._tooltip-dark_1w7yx_42{background-color:#3a4047;box-shadow:0 0 10.9px #0000001a;color:#fff}._tooltip-container_1w7yx_21 ._tooltip-light_1w7yx_47{background-color:#fff;box-shadow:0 0 10.9px #0000001a;color:#1d3557}._tooltip-container_1w7yx_21:hover ._tooltip_1w7yx_21{opacity:1;visibility:visible}

package/package.json

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