@situaction/traq-ui-ste 1.0.28 → 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,96 +1,56 @@
-import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { useTheme as j } from "../theme/ThemeContext.js";
-import '../../styles/Button.css';const h = "_button_1j0bt_23", $ = "_flexHorizontalCenter_1j0bt_178", r = {
-  button: h,
-  "button-primary": "_button-primary_1j0bt_45",
-  "button-secondary": "_button-secondary_1j0bt_59",
-  "button-tertiary": "_button-tertiary_1j0bt_73",
-  "button-ghost": "_button-ghost_1j0bt_87",
-  "button-text": "_button-text_1j0bt_103",
-  "button-text-selected": "_button-text-selected_1j0bt_116",
-  "button-error": "_button-error_1j0bt_122",
-  "button-size-xl": "_button-size-xl_1j0bt_135",
-  "button-size-l": "_button-size-l_1j0bt_141",
-  "button-size-m": "_button-size-m_1j0bt_147",
-  "button-size-s": "_button-size-s_1j0bt_153",
-  "button-size-menu": "_button-size-menu_1j0bt_159",
-  "button-gap-menu": "_button-gap-menu_1j0bt_165",
-  "button-gap-xl": "_button-gap-xl_1j0bt_168",
-  "button-gap-l": "_button-gap-l_1j0bt_171",
-  "button-gap-m": "_button-gap-m_1j0bt_165",
-  "button-gap-s": "_button-gap-s_1j0bt_174",
-  flexHorizontalCenter: $
-}, C = ({
-  mode: a = "primary",
-  size: n = "m",
-  color: t,
-  colorMode: e,
-  label: l,
-  error: b,
-  selected: d,
-  childrenLeft: c,
-  childrenRight: i,
-  ...m
+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: y } = j(), s = () => b ? "error" : a, _ = [
-    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(" "), u = {
-    "--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)",
-    "--dynamic-color-disabled": "var(--color-light-40)",
-    "--dynamic-border-disabled": "var(--color-light-10)",
-    "--dynamic-back-disabled": "var(--color-light-05)"
-  }, 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)",
-    "--dynamic-color-disabled": "var(--color-dark-40)",
-    "--dynamic-border-disabled": "var(--color-dark-10)",
-    "--dynamic-back-disabled": "var(--color-dark-05)"
-  }, 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)",
-    "--dynamic-color-disabled": "var(--color-light-40)",
-    "--dynamic-border-disabled": "var(--color-light-10)",
-    "--dynamic-back-disabled": "var(--color-light-05)"
-  }, x = {
-    "--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)",
-    "--dynamic-color-disabled": "var(--color-dark-40)",
-    "--dynamic-border-disabled": "var(--color-dark-10)",
-    "--dynamic-back-disabled": "var(--color-dark-05)"
-  };
-  return /* @__PURE__ */ g(
+  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: _,
-      style: e ? e === "dark" ? p : x : y === "dark" ? u : v,
-      ...m,
+      className: g,
+      ...a,
       children: [
-        c && /* @__PURE__ */ o("span", { className: r.flexHorizontalCenter, children: c }),
-        /* @__PURE__ */ o("span", { children: l }),
-        i && /* @__PURE__ */ o("span", { className: r.flexHorizontalCenter, children: i })
+        e && /* @__PURE__ */ n("span", { className: t.flexHorizontalCenter, children: e }),
+        /* @__PURE__ */ n("span", { children: b }),
+        _ && /* @__PURE__ */ n("span", { className: t.flexHorizontalCenter, children: _ })
       ]
     }
   );
 };
 export {
-  C 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,88 +1,48 @@
-import { jsx as h } from "react/jsx-runtime";
-import { useTheme as $ } from "../theme/ThemeContext.js";
-import '../../styles/IconButton.css';const x = "_button_151my_23", g = "_flexHorizontalCenter_151my_168", o = {
-  button: x,
-  "button-round": "_button-round_151my_50",
-  "button-primary": "_button-primary_151my_53",
-  "button-secondary": "_button-secondary_151my_66",
-  "button-tertiary": "_button-tertiary_151my_80",
-  "button-ghost": "_button-ghost_151my_94",
-  "button-icon": "_button-icon_151my_107",
-  "button-icon-selected": "_button-icon-selected_151my_119",
-  "button-error": "_button-error_151my_128",
-  "button-size-xl": "_button-size-xl_151my_141",
-  "button-size-l": "_button-size-l_151my_146",
-  "button-size-m": "_button-size-m_151my_151",
-  "button-size-s": "_button-size-s_151my_156",
-  "button-size-menu": "_button-size-menu_151my_161",
-  flexHorizontalCenter: g
-}, C = ({
-  mode: t = "primary",
-  color: r,
-  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: c,
-  selected: i,
-  round: e,
-  disabled: l,
-  children: d,
-  onClick: y
+  error: e,
+  selected: _,
+  round: u,
+  disabled: r,
+  children: b,
+  onClick: s
 }) => {
-  const { mode: m } = $(), s = () => c ? "error" : t, b = [
-    o.button,
-    o[`button-${s()}`],
-    e && o["button-round"],
-    o[`button-size-${n}`],
-    i && t === "icon" && o["button-icon-selected"],
-    o.flexHorizontalCenter
-  ].filter(Boolean).join(" "), v = {
-    "--dynamic-color-primary-text": r ? `var(--color-${r}-900)` : "var(--primary-color-900)",
-    "--dynamic-color-text": "var(--color-light-100)",
-    "--dynamic-color": r ? `var(--color-${r}-200)` : "var(--primary-color)",
-    "--dynamic-color-hover": r ? `var(--color-${r}-200)` : "var(--primary-color-100)",
-    "--dynamic-color-activated": r ? `var(--color-${r}-50)` : "var(--primary-color-50)",
-    "--dynamic-color-disabled": "var(--color-light-40)",
-    "--dynamic-border-disabled": "var(--color-light-10)",
-    "--dynamic-back-disabled": "var(--color-light-05)"
-  }, u = {
-    "--dynamic-color-primary-text": "var(--color-light-100)",
-    "--dynamic-color-text": r ? `var(--color-${r}-900)` : "var(--primary-color-900)",
-    "--dynamic-color": r ? `var(--color-${r}-900)` : "var(--primary-color)",
-    "--dynamic-color-hover": r ? `var(--color-${r}-800)` : "var(--primary-color-800)",
-    "--dynamic-color-activated": r ? `var(--color-${r}-700)` : "var(--primary-color-700)",
-    "--dynamic-color-disabled": "var(--color-dark-40)",
-    "--dynamic-border-disabled": "var(--color-dark-10)",
-    "--dynamic-back-disabled": "var(--color-dark-05)"
-  }, _ = {
-    "--dynamic-color-primary-text": r ? `var(--color-${r}-900)` : "var(--primary-color-950)",
-    "--dynamic-color-text": "var(--color-light-100)",
-    "--dynamic-color": r ? `var(--color-${r}-200)` : "var(--primary-color-200)",
-    "--dynamic-color-hover": r ? `var(--color-${r}-200)` : "var(--primary-color-100)",
-    "--dynamic-color-activated": r ? `var(--color-${r}-50)` : "var(--primary-color-50)",
-    "--dynamic-color-disabled": "var(--color-light-40)",
-    "--dynamic-border-disabled": "var(--color-light-10)",
-    "--dynamic-back-disabled": "var(--color-light-05)"
-  }, p = {
-    "--dynamic-color-primary-text": "var(--color-light-100)",
-    "--dynamic-color-text": r ? `var(--color-${r}-900)` : "var(--secondary-color)",
-    "--dynamic-color": r ? `var(--color-${r}-900})` : "var(--secondary-color)",
-    "--dynamic-color-hover": r ? `var(--color-${r}-800)` : "var(--primary-color-800)",
-    "--dynamic-color-activated": r ? `var(--color-${r}-700)` : "var(--primary-color-700)",
-    "--dynamic-color-disabled": "var(--color-dark-40)",
-    "--dynamic-border-disabled": "var(--color-dark-10)",
-    "--dynamic-back-disabled": "var(--color-dark-05)"
-  };
-  return /* @__PURE__ */ h(
+  const i = () => e ? "error" : o, l = [
+    t.button,
+    t[`button-${i()}`],
+    u && t["button-round"],
+    t[`button-size-${n}`],
+    _ && o === "icon" && t["button-icon-selected"],
+    t.flexHorizontalCenter
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ p(
     "button",
     {
-      className: b,
-      style: a ? a === "dark" ? _ : p : m === "dark" ? v : u,
-      onClick: y,
-      disabled: l,
-      children: d
+      className: l,
+      onClick: s,
+      disabled: r,
+      children: b
     }
   );
 };
 export {
-  C 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
 };