diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 534f12d2f..6ebacf305 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -136,9 +136,6 @@ module.exports = {
       opacity: {
         disabled: "var(--opacity--disabled)",
       },
-      boxShadow: {
-        "border": "0 0 0 2px rgba(var(--color--piccolo-100)) inset"
-      },
       animation: {
         loader: "loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite",
       },
@@ -148,176 +145,194 @@ module.exports = {
           "100%": { transform: "rotate(360deg)" },
         },
       },
-    },
-    fontWeight: {
-      normal: 400,
-      semibold: 500,
-    },
-    boxShadow: {
-      sm: "var(--box-shadow--sm)",
-      DEFAULT: "var(--box-shadow--default)",
-      md: "var(--box-shadow--default)",
-      lg: "var(--box-shadow--lg)",
-      xl: "var(--box-shadow--xl)",
-    },
-    // borderRadius: {
-    //   sm: "var(--radius--small)",
-    //   DEFAULT: "var(--radius--default)",
-    //   lg: "var(--radius--large)",
-    //   xl: "var(--radius--xlarge)",
-    // },
-    colors: {
-      transparent: "transparent",
-      text: "var(--color-text)",
-      background: "var(--color-background)",
-      "krillin-10": { 
-        DEFAULT: withOpacityValue("--color--krillin-10"), 
-      },
-      "krillin-60": { 
-        DEFAULT: withOpacityValue("--color--krillin-60") 
-      },
-      "krillin-100": { 
-        DEFAULT: withOpacityValue("--color--krillin-100") 
-      },
-      "chi-chi-10": { 
-        DEFAULT: withOpacityValue("--color--chi-chi-10") 
-      },
-      "chi-chi-60": { 
-        DEFAULT: withOpacityValue("--color--chi-chi-60") 
-      },
-      "chi-chi-100": { 
-        DEFAULT: withOpacityValue("--color--chi-chi-100") 
-      },
-      "roshi-10": { 
-        DEFAULT: withOpacityValue("--color--roshi-10") 
-      },
-      "roshi-60": { 
-        DEFAULT: withOpacityValue("--color--roshi-60") 
-      },
-      "roshi-100": { 
-        DEFAULT: withOpacityValue("--color--roshi-100") 
-      },
-      "dodoria-10": { 
-        DEFAULT: withOpacityValue("--color--dodoria-10") 
-      },
-      "dodoria-60": { 
-        DEFAULT: withOpacityValue("--color--dodoria-60") 
-      },
-      "dodoria-100": { 
-        DEFAULT: withOpacityValue("--color--dodoria-100") 
-      },
-      "cell-10": { 
-        DEFAULT: withOpacityValue("--color--cell-10") 
-      },
-      "cell-60": { 
-        DEFAULT: withOpacityValue("--color--cell-60") 
-      },
-      "cell-100": { 
-        DEFAULT: withOpacityValue("--color--cell-100") 
-      },
-      "raditz-10": { 
-        DEFAULT: withOpacityValue("--color--raditz-10") 
-      },
-      "raditz-60": { 
-        DEFAULT: withOpacityValue("--color--raditz-60") 
-      },
-      "raditz-100": { 
-        DEFAULT: withOpacityValue("--color--raditz-100") 
-      },
-      "whis-10": { 
-        DEFAULT: withOpacityValue("--color--whis-10") 
-      },
-      "whis-60": { 
-        DEFAULT: withOpacityValue("--color--whis-60") 
-      },
-      "whis-100": { 
-        DEFAULT: withOpacityValue("--color--whis-100") 
-      },
-      "frieza-10": { 
-        DEFAULT: withOpacityValue("--color--frieza-10") 
-      },
-      "frieza-60": { 
-        DEFAULT: withOpacityValue("--color--frieza-60") 
-      },
-      "frieza-100": { 
-        DEFAULT: withOpacityValue("--color--frieza-100") 
-      },
-      "nappa-10": { 
-        DEFAULT: withOpacityValue("--color--nappa-10") 
-      },
-      "nappa-60": { 
-        DEFAULT: withOpacityValue("--color--nappa-60") 
-      },
-      "nappa-100": { 
-        DEFAULT: withOpacityValue("--color--nappa-100") 
-      },
-      "piccolo-80": { 
-        DEFAULT: withOpacityValue("--color--piccolo-80") 
-      },
-      "piccolo-100": { 
-        DEFAULT: withOpacityValue("--color--piccolo-100") 
-      },
-      "piccolo-120": { 
-        DEFAULT: withOpacityValue("--color--piccolo-120") 
-      },
-      "hit-80": { 
-        DEFAULT: withOpacityValue("--color--hit-80") 
-      },
-      "hit-100": { 
-        DEFAULT: withOpacityValue("--color--hit-100") 
-      },
-      "hit-120": { 
-        DEFAULT: withOpacityValue("--color--hit-120") 
+      fontWeight: {
+        normal: 400,
+        semibold: 500,
       },
-      "goten-100": { 
-        DEFAULT: withOpacityValue("--color--goten-100") 
-      },
-      "goku-10": { 
-        DEFAULT: withOpacityValue("--color--goku-10") 
-      },
-      "goku-40": { 
-        DEFAULT: withOpacityValue("--color--goku-40") 
-      },
-      "goku-80": { 
-        DEFAULT: withOpacityValue("--color--goku-80") 
-      },
-      "goku-100": { 
-        DEFAULT: withOpacityValue("--color--goku-100") 
-      },
-      "goku-120": { 
-        DEFAULT: withOpacityValue("--color--goku-120") 
-      },
-      "gohan-10": { 
-        DEFAULT: withOpacityValue("--color--gohan-10") 
-      },
-      "gohan-40": { 
-        DEFAULT: withOpacityValue("--color--gohan-40") 
-      },
-      "gohan-80": { 
-        DEFAULT: withOpacityValue("--color--gohan-80") 
-      },
-      "gohan-100": { 
-        DEFAULT: withOpacityValue("--color--gohan-100") 
-      },
-      "gohan-120": { 
-        DEFAULT: withOpacityValue("--color--gohan-120") 
-      },
-      "beerus-100": { 
-        DEFAULT: withOpacityValue("--color--beerus-100") 
-      },
-      "bulma-100": { 
-        DEFAULT: withOpacityValue("--color--bulma-100") 
-      },
-      "trunks-100": { 
-        DEFAULT: withOpacityValue("--color--trunks-100") 
+      boxShadow: {
+        sm: "var(--box-shadow--sm)",
+        DEFAULT: "var(--box-shadow--default)",
+        md: "var(--box-shadow--default)",
+        lg: "var(--box-shadow--lg)",
+        xl: "var(--box-shadow--xl)",
+        border: "0 0 0 2px rgba(var(--color--piccolo-100)) inset",
+        inset: '0 0 0 1px rgb(var(--color--piccolo-100)) inset',
+        interactive: '0 0 0 2px rgb(var(--color--piccolo-100)) inset',
+        focus: `0 0 0 4px rgba(var(--color--piccolo-100), .13)`,
+        input: '0 0 0 var(--border-width) rgb(var(--color--beerus-100)) inset',
+        'input-hov':
+          '0 0 0 var(--border-i-width) rgb(var(--color--bulma-100) / 7%) inset, 0 0 0 var(--border-i-width) rgb(var(--color--beerus-100)) inset',
+        'input-err': '0 0 0 var(--border-i-width) rgb(var(--color--chi-chi-100)) inset',
+        'input-focus': '0 0 0 var(--border-i-width) rgb(var(--color--piccolo-100)) inset',
+        'moon-sm':
+          '0 6px 6px -6px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.4)',
+        'moon-md':
+          '0 12px 12px -6px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.4)',
+        'moon-lg':
+          '0 8px 24px -6px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.4)',
+        'moon-xl':
+          '0 32px 32px -8px rgba(0, 0, 0, 0.08), 0 0 32px -8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.2)',
+      },
+      // borderRadius: {
+      //   sm: "var(--radius--small)",
+      //   DEFAULT: "var(--radius--default)",
+      //   lg: "var(--radius--large)",
+      //   xl: "var(--radius--xlarge)",
+      // },
+      colors: {
+        transparent: "transparent",
+        text: "var(--color-text)",
+        background: "var(--color-background)",
+        "krillin-10": { 
+          DEFAULT: withOpacityValue("--color--krillin-10"), 
+        },
+        "krillin-60": { 
+          DEFAULT: withOpacityValue("--color--krillin-60") 
+        },
+        "krillin-100": { 
+          DEFAULT: withOpacityValue("--color--krillin-100") 
+        },
+        "chi-chi-10": { 
+          DEFAULT: withOpacityValue("--color--chi-chi-10") 
+        },
+        "chi-chi-60": { 
+          DEFAULT: withOpacityValue("--color--chi-chi-60") 
+        },
+        "chi-chi-100": { 
+          DEFAULT: withOpacityValue("--color--chi-chi-100") 
+        },
+        "roshi-10": { 
+          DEFAULT: withOpacityValue("--color--roshi-10") 
+        },
+        "roshi-60": { 
+          DEFAULT: withOpacityValue("--color--roshi-60") 
+        },
+        "roshi-100": { 
+          DEFAULT: withOpacityValue("--color--roshi-100") 
+        },
+        "dodoria-10": { 
+          DEFAULT: withOpacityValue("--color--dodoria-10") 
+        },
+        "dodoria-60": { 
+          DEFAULT: withOpacityValue("--color--dodoria-60") 
+        },
+        "dodoria-100": { 
+          DEFAULT: withOpacityValue("--color--dodoria-100") 
+        },
+        "cell-10": { 
+          DEFAULT: withOpacityValue("--color--cell-10") 
+        },
+        "cell-60": { 
+          DEFAULT: withOpacityValue("--color--cell-60") 
+        },
+        "cell-100": { 
+          DEFAULT: withOpacityValue("--color--cell-100") 
+        },
+        "raditz-10": { 
+          DEFAULT: withOpacityValue("--color--raditz-10") 
+        },
+        "raditz-60": { 
+          DEFAULT: withOpacityValue("--color--raditz-60") 
+        },
+        "raditz-100": { 
+          DEFAULT: withOpacityValue("--color--raditz-100") 
+        },
+        "whis-10": { 
+          DEFAULT: withOpacityValue("--color--whis-10") 
+        },
+        "whis-60": { 
+          DEFAULT: withOpacityValue("--color--whis-60") 
+        },
+        "whis-100": { 
+          DEFAULT: withOpacityValue("--color--whis-100") 
+        },
+        "frieza-10": { 
+          DEFAULT: withOpacityValue("--color--frieza-10") 
+        },
+        "frieza-60": { 
+          DEFAULT: withOpacityValue("--color--frieza-60") 
+        },
+        "frieza-100": { 
+          DEFAULT: withOpacityValue("--color--frieza-100") 
+        },
+        "nappa-10": { 
+          DEFAULT: withOpacityValue("--color--nappa-10") 
+        },
+        "nappa-60": { 
+          DEFAULT: withOpacityValue("--color--nappa-60") 
+        },
+        "nappa-100": { 
+          DEFAULT: withOpacityValue("--color--nappa-100") 
+        },
+        "piccolo-80": { 
+          DEFAULT: withOpacityValue("--color--piccolo-80") 
+        },
+        "piccolo-100": { 
+          DEFAULT: withOpacityValue("--color--piccolo-100") 
+        },
+        "piccolo-120": { 
+          DEFAULT: withOpacityValue("--color--piccolo-120") 
+        },
+        "hit-80": { 
+          DEFAULT: withOpacityValue("--color--hit-80") 
+        },
+        "hit-100": { 
+          DEFAULT: withOpacityValue("--color--hit-100") 
+        },
+        "hit-120": { 
+          DEFAULT: withOpacityValue("--color--hit-120") 
+        },
+        "goten-100": { 
+          DEFAULT: withOpacityValue("--color--goten-100") 
+        },
+        "goku-10": { 
+          DEFAULT: withOpacityValue("--color--goku-10") 
+        },
+        "goku-40": { 
+          DEFAULT: withOpacityValue("--color--goku-40") 
+        },
+        "goku-80": { 
+          DEFAULT: withOpacityValue("--color--goku-80") 
+        },
+        "goku-100": { 
+          DEFAULT: withOpacityValue("--color--goku-100") 
+        },
+        "goku-120": { 
+          DEFAULT: withOpacityValue("--color--goku-120") 
+        },
+        "gohan-10": { 
+          DEFAULT: withOpacityValue("--color--gohan-10") 
+        },
+        "gohan-40": { 
+          DEFAULT: withOpacityValue("--color--gohan-40") 
+        },
+        "gohan-80": { 
+          DEFAULT: withOpacityValue("--color--gohan-80") 
+        },
+        "gohan-100": { 
+          DEFAULT: withOpacityValue("--color--gohan-100") 
+        },
+        "gohan-120": { 
+          DEFAULT: withOpacityValue("--color--gohan-120") 
+        },
+        "beerus-100": { 
+          DEFAULT: withOpacityValue("--color--beerus-100") 
+        },
+        "bulma-100": { 
+          DEFAULT: withOpacityValue("--color--bulma-100") 
+        },
+        "trunks-100": { 
+          DEFAULT: withOpacityValue("--color--trunks-100") 
+        },
+        black: "#000",
+        hover: "rgba(34, 34, 37, 0.12)",
+        "primary-hover": "rgba(0, 0, 0, 0.08)",
+        "slate-200": "rgb(226 232 240)",
+        "for-designers": "rgb(52 72 240)",
+        "for-developers": "rgb(149 241 213)"
       },
-      black: "#000",
-      hover: "rgba(34, 34, 37, 0.12)",
-      "primary-hover": "rgba(0, 0, 0, 0.08)",
-      "slate-200": "rgb(226 232 240)",
-      "for-designers": "rgb(52 72 240)",
-      "for-developers": "rgb(149 241 213)"
     },
+    
   },
   plugins: [
     require("@tailwindcss/aspect-ratio"),
@@ -325,5 +340,156 @@ module.exports = {
     plugin(({ addUtilities }) => {
       addUtilities({});
     }),
+    plugin(({ addComponents }) => {
+      addComponents({
+        '.btn-primary': {
+          color: 'rgb(var(--color--goten-100))',
+          backgroundColor: `rgb(var(--color--piccolo-100))`,
+        },
+        '.btn-secondary': {
+          color: 'rgb(var(--color--bulma-100))',
+          background: 'none',
+          boxShadow: `inset 0 0 0 1px rgb(var(--color--trunks-100)/1)`,
+          '&:hover': {
+            boxShadow: `inset 0 0 0 1px rgb(var(--color--bulma-100))`,
+          },
+        },
+        '.btn-tertiary': {
+          color: 'rgb(var(--color--goten-100))',
+          backgroundColor: 'rgb(var(--color--hit-100))',
+        },
+        '.anim-error': {
+          transform: 'translate3d(0, 0, 0)',
+          backfaceVisibility: 'hidden',
+          perspective: '1000px',
+        },
+        '.anim-pulse': {
+          boxShadow: '0 0 0 0 rgb(var(--color--piccolo-100))',
+        },
+        '.input-number-clear': {
+          MozAppearance: 'textfield',
+          '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+            opacity: 0,
+          },
+        },
+        '.input-xl': {
+          '&:not(:focus):not([disabled])::placeholder': {
+            opacity: 0,
+          },
+          '&:not(:focus):not([disabled]):placeholder-shown + label': {
+            top: '50%',
+            marginTop: '-0.438rem',
+            fontSize: '1rem',
+            lineHeight: '1rem',
+          },
+        },
+        '.input-dt-shared': {
+          '&::-webkit-datetime-edit, &::-webkit-date-and-time-value': {
+            display: 'block',
+            padding: 0,
+            height: '2.375rem',
+            lineHeight: '2.375rem',
+          },
+          '&::-webkit-date-and-time-value': {
+            paddingTop: '0.5rem',
+          },
+          '&::-webkit-calendar-picker-indicator': {
+            position: 'absolute',
+          },
+        },
+        '.input-lg-dt-shared': {
+          '&::-webkit-datetime-edit': {
+            height: '2.875rem',
+            lineHeight: '2.875rem',
+          },
+          '&::-webkit-date-and-time-value': {
+            paddingTop: '0.625rem',
+          },
+        },
+        '.input-xl-dt-shared': {
+          '&::-webkit-datetime-edit': {
+            height: '3.5rem',
+            lineHeight: '3.5rem',
+          },
+          '&::-webkit-date-and-time-value': {
+            paddingTop: '1rem',
+          },
+        },
+        '.input-xl-dt-label': {
+          '&::-webkit-datetime-edit': {
+            height: '2.25rem',
+            lineHeight: '2.125rem',
+          },
+          '&::-webkit-date-and-time-value': {
+            paddingTop: 0,
+          },
+        },
+        '.input-d': {
+          '&::-webkit-calendar-picker-indicator': {
+            right: '0.875rem',
+          },
+        },
+        '.input-t': {
+          '&::-webkit-calendar-picker-indicator': {
+            right: '0.875rem',
+          },
+        },
+        '.input-d-rtl': {
+          //type === 'date' rtl
+          '&::-webkit-datetime-edit, &::-webkit-date-and-time-value': {
+            position: 'absolute',
+            right: '0',
+          },
+          '&::-webkit-calendar-picker-indicator': {
+            left: '0.5rem',
+          },
+        },
+        '.input-t-rtl': {
+          //type === 'time' rtl
+          '&::-webkit-datetime-edit, &::-webkit-date-and-time-value': {
+            position: 'absolute',
+            right: '0.5rem',
+          },
+          '&::-webkit-calendar-picker-indicator': {
+            left: '0.5rem',
+          },
+        },
+        '.input-dt-local-rtl': {
+          //type === 'datetime-local' rtl
+          '&::-webkit-datetime-edit, &::-webkit-date-and-time-value': {
+            position: 'absolute',
+            right: '0',
+          },
+          '&::-webkit-calendar-picker-indicator': {
+            left: '0.5rem',
+          },
+        },
+        '.input-rsb-hidden': {
+          '&:not(:hover):not(:focus):not(:invalid)': {
+            clipPath: `inset(calc(var(--border-i-width) * -1) 0.125rem calc(var(--border-i-width) * -1) 0)`,
+          },
+        },
+        '.input-lsb-hidden': {
+          '&:not(:hover):not(:focus):not(:invalid)': {
+            clipPath: `inset(calc(var(--border-i-width) * -1) 0 calc(var(--border-i-width) * -1) 0.125rem)`,
+          },
+        },
+        '.input-tbb-hidden': {
+          '&:not(:hover):not(:focus):not(:invalid)': {
+            clipPath: `inset(0.125rem calc(var(--border-i-width) * -1) 0 calc(var(--border-i-width) * -1))`,
+          },
+        },
+        '.input-bbb-hidden': {
+          '&:not(:hover):not(:focus):not(:invalid)': {
+            clipPath: `inset(0 calc(var(--border-i-width) * -1) 0.125rem calc(var(--border-i-width) * -1))`,
+          },
+        },
+        '.brcrumb-li': {
+          '& a, & span': {
+            padding: '0.5rem',
+          },
+        },
+      });
+    }),
   ],
 };
diff --git a/lib/moon/backoffice_components/dropdown_multi_filter.ex b/lib/moon/backoffice_components/dropdown_multi_filter.ex
index 81f81c773..02b88aedf 100644
--- a/lib/moon/backoffice_components/dropdown_multi_filter.ex
+++ b/lib/moon/backoffice_components/dropdown_multi_filter.ex
@@ -3,7 +3,8 @@ defmodule Moon.BackofficeComponents.DropdownMultiFilterView do
 
   alias Moon.Assets.Icons.IconZoom
   alias Moon.Autolayouts.{LeftToRight, TopToDown}
-  alias Moon.Components.{Button, CheckboxMultiselect, Divider, Form, Popover, TextInput}
+  alias Moon.Components.{Button, CheckboxMultiselect, Divider, Form, Popover}
+  alias Moon.Components.Deprecated.TextInput
 
   prop show_filter, :boolean, required: true
   prop search_text, :string, required: true
diff --git a/lib/moon/components/text_input.ex b/lib/moon/components/deprecated/text_input.ex
similarity index 98%
rename from lib/moon/components/text_input.ex
rename to lib/moon/components/deprecated/text_input.ex
index 4a0935873..5eed5328c 100644
--- a/lib/moon/components/text_input.ex
+++ b/lib/moon/components/deprecated/text_input.ex
@@ -1,4 +1,4 @@
-defmodule Moon.Components.TextInput do
+defmodule Moon.Components.Deprecated.TextInput do
   @moduledoc false
 
   use Moon.StatelessComponent
diff --git a/lib/moon/components/dropdown.ex b/lib/moon/components/dropdown.ex
index cb4f8b3bc..025150f5d 100644
--- a/lib/moon/components/dropdown.ex
+++ b/lib/moon/components/dropdown.ex
@@ -5,7 +5,7 @@ defmodule Moon.Components.Dropdown do
 
   alias Moon.Assets.Icons.IconZoom
   alias Moon.Components.Form
-  alias Moon.Components.TextInput
+  alias Moon.Components.Deprecated.TextInput
 
   prop(on_search_change, :event)
   prop(search_placeholder, :string)
diff --git a/lib/moon/components/password_input.ex b/lib/moon/components/password_input.ex
index d24000a73..97dd82b74 100644
--- a/lib/moon/components/password_input.ex
+++ b/lib/moon/components/password_input.ex
@@ -2,7 +2,7 @@ defmodule Moon.Components.PasswordInput do
   @moduledoc false
 
   use Moon.StatefulComponent
-  alias Moon.Components.TextInput
+  alias Moon.Components.Deprecated.TextInput
 
   data hidden, :boolean, default: true
 
diff --git a/lib/moon/components/text_input/styled/container.ex b/lib/moon/components/text_input/styled/container.ex
new file mode 100644
index 000000000..6588b852a
--- /dev/null
+++ b/lib/moon/components/text_input/styled/container.ex
@@ -0,0 +1,28 @@
+defmodule Moon.Components.TextInput.Container do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  alias Moon.Components.TextInput.Utils
+
+  prop id, :string
+  prop disabled, :boolean, default: false
+  prop size, :string, values: ["md", "lg", "xl"]
+
+  slot default
+
+  def render(assigns) do
+    ~F"""
+    <div
+      class={
+        "w-full max-w-full relative z-0",
+        Utils.get_border_radius(@size),
+        "opacity-30 cursor-not-allowed": @disabled
+      }
+      id={@id}
+    >
+      <#slot />
+    </div>
+    """
+  end
+end
diff --git a/lib/moon/components/text_input/styled/hint_text.ex b/lib/moon/components/text_input/styled/hint_text.ex
new file mode 100644
index 000000000..7ff74f56c
--- /dev/null
+++ b/lib/moon/components/text_input/styled/hint_text.ex
@@ -0,0 +1,20 @@
+defmodule Moon.Components.TextInput.HintText do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  prop is_error, :boolean, default: false
+
+  slot default
+
+  def render(assigns) do
+    ~F"""
+    <div
+      role="alert"
+      class={"inline-block mt-2 text-moon-12", "text-chi-chi-100": @is_error, "text-trunks-100": !@is_error}
+    >
+      <#slot />
+    </div>
+    """
+  end
+end
diff --git a/lib/moon/components/text_input/styled/input.ex b/lib/moon/components/text_input/styled/input.ex
new file mode 100644
index 000000000..50946ced0
--- /dev/null
+++ b/lib/moon/components/text_input/styled/input.ex
@@ -0,0 +1,152 @@
+defmodule Moon.Components.TextInput.Input do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  alias Moon.Components.TextInput.Utils
+
+  prop type, :string,
+    values: [
+      "date",
+      "datetime-local",
+      "email",
+      "number",
+      "password",
+      "search",
+      "tel",
+      "text",
+      "time",
+      "url"
+    ],
+    default: "text"
+
+  prop field, :atom
+  prop is_error, :boolean, default: false
+  prop background_color, :string, values: Moon.colors()
+  prop size, :string, values: ["md", "lg", "xl"]
+  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
+  prop with_label, :boolean, default: false
+  prop disabled, :boolean
+  prop placeholder, :string
+  prop required, :boolean
+  prop step, :string, default: "1"
+  prop is_first, :boolean
+  prop readonly, :boolean
+  prop value, :string
+
+  prop is_sharp_left_side, :boolean
+  prop is_sharp_right_side, :boolean
+  prop is_sharp_top_side, :boolean
+  prop is_sharp_bottom_side, :boolean
+  prop is_top_bottom_border_hidden, :boolean
+  prop is_side_border_hidden, :boolean
+
+  prop focus, :event
+  prop keydown, :event
+  prop keyup, :event
+  prop blur, :event
+
+  def render(assigns) do
+    ~F"""
+    <Surface.Components.Form.TextInput
+      opts={
+        placeholder: @placeholder,
+        disabled: @disabled,
+        required: @required && !@disabled,
+        type: @type,
+        "data-lpignore": "true",
+        step: @step,
+        readonly: @readonly,
+        dir: @dir
+      }
+      value={@value}
+      class={
+        "focus:ring-0 border-0",
+        "block w-full max-w-full py-0 px-4 m-0 appearance-none",
+        "text-[1rem] text-bulma transition-shadow box-border relative z-[2]",
+        "shadow-input hover:shadow-input-hov",
+        "focus:shadow-input-focus focus:outline-none",
+        "before:box-border after:box-border",
+        "placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75",
+        "read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
+        "input-dt-shared",
+        "invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err",
+        Utils.get_size_styles(@size),
+        get_class_left(
+          @is_sharp_left_side,
+          @is_sharp_top_side,
+          @is_sharp_bottom_side
+        ),
+        get_class_right(
+          @is_sharp_right_side,
+          @is_sharp_top_side,
+          @is_sharp_bottom_side
+        ),
+        get_class_for_date_type(@type, @dir == "rtl"),
+        get_class_for_time_type(@type, @dir == "rtl"),
+        "#{Utils.make_border_left(@is_side_border_hidden,
+        @is_first,
+        @dir == "rtl")}": !@is_error,
+        "#{Utils.make_border_right(@is_side_border_hidden,
+        @is_first,
+        @dir == "rtl")}": !@is_error,
+        "#{Utils.make_border_top_bottom(@is_top_bottom_border_hidden,
+        @is_first)}": !@is_error,
+        "input-number-clear": @type == "number",
+        "shadow-input-err hover:shadow-input-err focus:shadow-input-err": @is_error,
+        "bg-#{@background_color}": @background_color,
+        "bg-transparent": !@background_color,
+        "input-xl-dt-shared": @size == "xl",
+        "input-xl pt-[1.125rem] input-xl-dt-label": @size == "xl" && @with_label,
+        "input-lg-dt-shared": @size == "lg"
+      }
+      focus={@focus}
+      keyup={@keyup}
+      keydown={@keydown}
+      blur={@blur}
+      field={@field}
+    />
+    """
+  end
+
+  defp get_class_for_date_type(type, is_rtl) do
+    cond do
+      type == "date" || type == "datetime-local" -> "input-d"
+      type == "date" && is_rtl -> "input-d-rtl"
+      type == "datetime-local" && is_rtl -> "input-dt-local-rtl"
+      true -> ""
+    end
+  end
+
+  defp get_class_for_time_type(type, is_rtl) do
+    cond do
+      type == "time" -> "input-t"
+      type == "time" && is_rtl -> "input-t-rtl"
+      true -> ""
+    end
+  end
+
+  defp get_class_left(
+         is_sharp_left_side,
+         is_sharp_top_side,
+         is_sharp_bottom_side
+       ) do
+    cond do
+      is_sharp_left_side || is_sharp_top_side -> "rounded-tl-none"
+      is_sharp_left_side || is_sharp_bottom_side -> "rounded-bl-none"
+      true -> ""
+    end
+  end
+
+  defp get_class_right(
+         is_sharp_right_side,
+         is_sharp_top_side,
+         is_sharp_bottom_side
+       ) do
+    cond do
+      is_sharp_right_side || is_sharp_top_side -> "rounded-tr-none"
+      is_sharp_right_side || is_sharp_bottom_side -> "rounded-br-none"
+      true -> ""
+    end
+  end
+end
diff --git a/lib/moon/components/text_input/styled/password.ex b/lib/moon/components/text_input/styled/password.ex
new file mode 100644
index 000000000..1ac20c035
--- /dev/null
+++ b/lib/moon/components/text_input/styled/password.ex
@@ -0,0 +1,124 @@
+defmodule Moon.Components.TextInput.Password do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  alias Moon.Components.TextInput.Utils
+
+  prop type, :string,
+    values: [
+      "password",
+      "text"
+    ],
+    default: "text"
+
+  prop field, :atom
+  prop is_error, :boolean, default: false
+  prop background_color, :string, values: Moon.colors()
+  prop size, :string, values: ["md", "lg", "xl"]
+  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
+  prop with_label, :boolean, default: false
+  prop disabled, :boolean
+  prop placeholder, :string
+  prop required, :boolean
+  prop step, :string, default: "1"
+  prop is_first, :boolean
+  prop readonly, :boolean
+  prop value, :string
+  prop id, :string
+  prop on_keyup, :string
+  prop input_password_id, :string
+
+  prop is_sharp_left_side, :boolean
+  prop is_sharp_right_side, :boolean
+  prop is_sharp_top_side, :boolean
+  prop is_sharp_bottom_side, :boolean
+  prop is_top_bottom_border_hidden, :boolean
+  prop is_side_border_hidden, :boolean
+
+  prop focus, :event
+  prop keydown, :event
+  prop keyup, :event
+  prop blur, :event
+
+  def render(assigns) do
+    ~F"""
+    <Surface.Components.Form.PasswordInput
+      opts={
+        placeholder: @placeholder,
+        disabled: @disabled,
+        required: @required && !@disabled,
+        "data-lpignore": "true",
+        step: @step,
+        readonly: @readonly,
+        dir: @dir,
+        type: @type
+      }
+      value={@value}
+      class={
+        "focus:ring-0 border-0",
+        "block w-full max-w-full py-0 px-4 m-0 appearance-none",
+        "text-[1rem] text-bulma transition-shadow box-border relative z-[2]",
+        "shadow-input hover:shadow-input-hov",
+        "focus:shadow-input-focus focus:outline-none",
+        "before:box-border after:box-border",
+        "placeholder:text-trunks placeholder:opacity-100 placeholder:transition-opacity placeholder:delay-75",
+        "read-only:outline-0 read-only:border-none read-only:cursor-not-allowed read-only:hover:shadow-input read-only:focus:shadow-input",
+        "input-dt-shared",
+        "invalid:shadow-input-err invalid:hover:shadow-input-err invalid:focus:shadow-input-err",
+        Utils.get_size_styles(@size),
+        "#{Utils.make_border_left(@is_side_border_hidden,
+        @is_first,
+        @dir == "rtl")}": !@is_error,
+        "#{Utils.make_border_right(@is_side_border_hidden,
+        @is_first,
+        @dir == "rtl")}": !@is_error,
+        "#{Utils.make_border_top_bottom(@is_top_bottom_border_hidden,
+        @is_first)}": !@is_error,
+        "#{get_class_left(@is_sharp_left_side,
+        @is_sharp_top_side,
+        @is_sharp_bottom_side)}": !@is_error,
+        "#{get_class_right(@is_sharp_right_side,
+        @is_sharp_top_side,
+        @is_sharp_bottom_side)}": !@is_error,
+        "shadow-input-err hover:shadow-input-err focus:shadow-input-err": @is_error,
+        "bg-#{@background_color}": @background_color,
+        "bg-transparent": !@background_color,
+        "input-xl-dt-shared": @size == "xl",
+        "input-xl pt-[1.125rem] input-xl-dt-label": @size == "xl" && @with_label,
+        "input-lg-dt-shared": @size == "lg"
+      }
+      id={"#{@id}_input"}
+      keyup={@on_keyup, target: "##{@input_password_id}"}
+      focus={@focus}
+      keydown={@keydown}
+      blur={@blur}
+      field={@field}
+    />
+    """
+  end
+
+  defp get_class_left(
+         is_sharp_left_side,
+         is_sharp_top_side,
+         is_sharp_bottom_side
+       ) do
+    cond do
+      is_sharp_left_side || is_sharp_top_side -> "rounded-tl-none"
+      is_sharp_left_side || is_sharp_bottom_side -> "rounded-bl-none"
+      true -> ""
+    end
+  end
+
+  defp get_class_right(
+         is_sharp_right_side,
+         is_sharp_top_side,
+         is_sharp_bottom_side
+       ) do
+    cond do
+      is_sharp_right_side || is_sharp_top_side -> "rounded-tr-none"
+      is_sharp_right_side || is_sharp_bottom_side -> "rounded-br-none"
+      true -> ""
+    end
+  end
+end
diff --git a/lib/moon/components/text_input/styled/show_password.ex b/lib/moon/components/text_input/styled/show_password.ex
new file mode 100644
index 000000000..60138736c
--- /dev/null
+++ b/lib/moon/components/text_input/styled/show_password.ex
@@ -0,0 +1,35 @@
+defmodule Moon.Components.TextInput.ShowPassword do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+
+  prop input_password_id, :string
+  prop toggle, :string, default: "toggle_password_visibility"
+
+  prop is_rtl, :boolean, default: false
+
+  slot default
+
+  def render(assigns) do
+    ~F"""
+    <div
+      role="alert"
+      :on-click={@toggle, target: "##{@input_password_id}"}
+      class={
+        "text-moon-14 text-bulma absolute top-2/4 mt-[-0.75rem] z-[3] underline cursor-pointer",
+        get_direction_style(@is_rtl)
+      }
+    >
+      <#slot />
+    </div>
+    """
+  end
+
+  defp get_direction_style(is_rtl) do
+    if is_rtl do
+      "left-[0.938rem]"
+    else
+      "right-[0.938rem]"
+    end
+  end
+end
diff --git a/lib/moon/components/text_input/subcomponents/text_input_basic.ex b/lib/moon/components/text_input/subcomponents/text_input_basic.ex
new file mode 100644
index 000000000..1e41d3a50
--- /dev/null
+++ b/lib/moon/components/text_input/subcomponents/text_input_basic.ex
@@ -0,0 +1,92 @@
+defmodule Moon.Components.TextInput.TextInputBasic do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  alias Moon.Components.TextInput.Container
+  alias Moon.Components.TextInput.Input
+  alias Moon.Components.TextInput.HintText
+
+  prop type, :string,
+    values: [
+      "date",
+      "datetime-local",
+      "email",
+      "number",
+      "password",
+      "search",
+      "tel",
+      "text",
+      "time",
+      "url"
+    ],
+    default: "text"
+
+  prop id, :string
+  prop size, :string, values: ["md", "lg", "xl"]
+  prop placeholder, :string
+  prop is_error, :boolean
+  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
+  prop background_color, :string, values: Moon.colors(), default: "gohan-100"
+  prop is_first, :boolean
+  prop disabled, :boolean
+  prop label, :string
+  prop required, :boolean
+  prop step, :string, default: "1"
+  prop readonly, :boolean
+  prop value, :string
+
+  prop is_sharp_left_side, :boolean
+  prop is_sharp_right_side, :boolean
+  prop is_sharp_top_side, :boolean
+  prop is_sharp_bottom_side, :boolean
+  prop is_top_bottom_border_hidden, :boolean
+  prop is_side_border_hidden, :boolean
+
+  prop focus, :event
+  prop keydown, :event
+  prop keyup, :event
+  prop blur, :event
+
+  slot hint_text_slot
+
+  def render(assigns) do
+    ~F"""
+    <Container disabled={@disabled} size={@size}>
+      <label
+        dir={@dir}
+        :if={@label}
+        class={"block text-moon-16 text-bulma pb-2", "opacity-30 cursor-not-allowed": @disabled}
+      >
+        {@label}
+      </label>
+      <Input
+        is_error={@is_error}
+        size={@size}
+        type={@type}
+        dir={@dir}
+        with_label={@label}
+        placeholder={@placeholder}
+        required={@required}
+        readonly={@readonly}
+        value={@value}
+        step={@step}
+        background_color={@background_color}
+        is_sharp_left_side={@is_sharp_left_side}
+        is_sharp_right_side={@is_sharp_right_side}
+        is_sharp_top_side={@is_sharp_top_side}
+        is_sharp_bottom_side={@is_sharp_bottom_side}
+        is_top_bottom_border_hidden={@is_top_bottom_border_hidden}
+        is_side_border_hidden={@is_side_border_hidden}
+        is_first={@is_first}
+        focus={@focus}
+        keyup={@keyup}
+        keydown={@keydown}
+        blur={@blur}
+      />
+      <HintText :if={slot_assigned?(:hint_text_slot)} is_error={@is_error}>
+        <#slot name="hint_text_slot" />
+      </HintText>
+    </Container>
+    """
+  end
+end
diff --git a/lib/moon/components/text_input/subcomponents/text_input_inner_label.ex b/lib/moon/components/text_input/subcomponents/text_input_inner_label.ex
new file mode 100644
index 000000000..3521f1280
--- /dev/null
+++ b/lib/moon/components/text_input/subcomponents/text_input_inner_label.ex
@@ -0,0 +1,104 @@
+defmodule Moon.Components.TextInput.TextInputInnerLabel do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  alias Moon.Components.TextInput.Container
+  alias Moon.Components.TextInput.Input
+  alias Moon.Components.TextInput.HintText
+  alias Moon.Components.TextInput.Utils
+
+  prop type, :string,
+    values: [
+      "date",
+      "datetime-local",
+      "email",
+      "number",
+      "password",
+      "search",
+      "tel",
+      "text",
+      "time",
+      "url"
+    ],
+    default: "text"
+
+  prop id, :string
+  prop size, :string, values: ["md", "lg", "xl"]
+  prop placeholder, :string
+  prop is_error, :boolean
+  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
+  prop background_color, :string, values: Moon.colors(), default: "gohan-100"
+  prop is_first, :boolean
+  prop disabled, :boolean
+  prop label, :string
+  prop required, :boolean
+  prop step, :string, default: "1"
+  prop readonly, :boolean
+  prop value, :string
+
+  prop is_sharp_left_side, :boolean
+  prop is_sharp_right_side, :boolean
+  prop is_sharp_top_side, :boolean
+  prop is_sharp_bottom_side, :boolean
+  prop is_top_bottom_border_hidden, :boolean
+  prop is_side_border_hidden, :boolean
+
+  prop focus, :event
+  prop keydown, :event
+  prop keyup, :event
+  prop blur, :event
+
+  slot hint_text_slot
+
+  def render(assigns) do
+    ~F"""
+    <Container disabled={@disabled} size={@size}>
+      <div class={
+        "w-full max-w-full relative",
+        Utils.get_border_radius(@size),
+        "bg-transparent": !@background_color,
+        "bg-#{@background_color}": @background_color
+      }>
+        <Input
+          is_error={@is_error}
+          size={@size}
+          type={@type}
+          dir={@dir}
+          with_label={@label}
+          placeholder={@placeholder}
+          required={@required}
+          step={@step}
+          readonly={@readonly}
+          value={@value}
+          is_sharp_left_side={@is_sharp_left_side}
+          is_sharp_right_side={@is_sharp_right_side}
+          is_sharp_top_side={@is_sharp_top_side}
+          is_sharp_bottom_side={@is_sharp_bottom_side}
+          is_top_bottom_border_hidden={@is_top_bottom_border_hidden}
+          is_side_border_hidden={@is_side_border_hidden}
+          is_first={@is_first}
+          focus={@focus}
+          keyup={@keyup}
+          keydown={@keydown}
+          blur={@blur}
+        />
+        <label
+          dir={@dir}
+          :if={@label}
+          class={
+            "absolute text-[0.75rem] leading-3 text-trunks-100 top-3 z-[1] transition-all ease-in-out duration-200",
+            "opacity-30 cursor-not-allowed": @disabled,
+            "right-4": @dir == "rtl",
+            "left-4": @dir != "rtl"
+          }
+        >
+          {@label}
+        </label>
+      </div>
+      <HintText :if={slot_assigned?(:hint_text_slot)} is_error={@is_error}>
+        <#slot name="hint_text_slot" />
+      </HintText>
+    </Container>
+    """
+  end
+end
diff --git a/lib/moon/components/text_input/subcomponents/text_input_password.ex b/lib/moon/components/text_input/subcomponents/text_input_password.ex
new file mode 100644
index 000000000..64c8c9a9a
--- /dev/null
+++ b/lib/moon/components/text_input/subcomponents/text_input_password.ex
@@ -0,0 +1,152 @@
+defmodule Moon.Components.TextInput.TextInputPassword do
+  @moduledoc false
+
+  use Moon.StatefulComponent
+  alias Moon.Components.TextInput.Container
+  alias Moon.Components.TextInput.Password
+  alias Moon.Components.TextInput.HintText
+  alias Moon.Components.TextInput.Utils
+  alias Moon.Components.TextInput.ShowPassword
+
+  prop size, :string, values: ["md", "lg", "xl"]
+  prop placeholder, :string
+  prop is_error, :boolean
+  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
+  prop background_color, :string, values: Moon.colors(), default: "gohan-100"
+  prop is_first, :boolean
+  prop disabled, :boolean
+  prop label, :string
+  prop required, :boolean
+  prop step, :string, default: "1"
+  prop readonly, :boolean
+  prop value, :string
+
+  prop is_sharp_left_side, :boolean
+  prop is_sharp_right_side, :boolean
+  prop is_sharp_top_side, :boolean
+  prop is_sharp_bottom_side, :boolean
+  prop is_top_bottom_border_hidden, :boolean
+  prop is_side_border_hidden, :boolean
+  prop show_password_text, :string, default: "Show"
+
+  prop focus, :event
+  prop keydown, :event
+  prop blur, :event
+
+  data password_shown, :boolean, default: false
+  data password, :string, default: ""
+
+  slot hint_text_slot
+
+  def render(assigns) do
+    ~F"""
+    <Container disabled={@disabled} id={@id}>
+      {#if @size == "xl"}
+        <div
+          id={"#{@id}_text_input_password"}
+          class={
+            "w-full max-w-full relative",
+            Utils.get_border_radius(@size),
+            "bg-#{@background_color}": @background_color
+          }
+        >
+          <Password
+            size={@size}
+            is_error={@is_error}
+            background_color={@background_color}
+            value={@password}
+            on_keyup="on_keyup"
+            input_password_id={"#{@id}_text_input_password"}
+            id={@id}
+            with_label={@label}
+            type={get_type(@password_shown)}
+            focus={@focus}
+            keydown={@keydown}
+            blur={@blur}
+            placeholder={@placeholder}
+          />
+          <label class={
+            "absolute text-[0.75rem] leading-3 text-trunks-199 top-3 z-[1] transition-all",
+            "right-4": @dir == "rtl",
+            "left-4": @dir == "ltr"
+          }>
+            {@label}
+          </label>
+          <ShowPassword
+            toggle="toggle_password_visibility"
+            is_rtl={is_rtl(@dir)}
+            input_password_id={"#{@id}_text_input_password"}
+          >
+            {@show_password_text}
+          </ShowPassword>
+        </div>
+        <HintText :if={slot_assigned?(:hint_text_slot)} is_error={@is_error}>
+          <#slot name="hint_text_slot" />
+        </HintText>
+      {#else}
+        <label
+          dir={@dir}
+          :if={@label}
+          class={"block text-moon-16 text-bulma pb-2", "opacity-30 cursor-not-allowed": @disabled}
+        >
+          {@label}
+        </label>
+        <div
+          id={"#{@id}_text_input_password"}
+          class={
+            "w-full max-w-full relative",
+            Utils.get_border_radius(@size)
+          }
+        >
+          <Password
+            size={@size}
+            is_error={@is_error}
+            background_color={@background_color}
+            value={@password}
+            on_keyup="on_keyup"
+            input_password_id={"#{@id}_text_input_password"}
+            id={@id}
+            type={get_type(@password_shown)}
+            focus={@focus}
+            blur={@blur}
+            placeholder={@placeholder}
+          />
+
+          <ShowPassword
+            toggle="toggle_password_visibility"
+            is_rtl={is_rtl(@dir)}
+            input_password_id={"#{@id}_text_input_password"}
+          >
+            {@show_password_text}
+          </ShowPassword>
+        </div>
+        <div>
+        </div>
+        <HintText :if={slot_assigned?(:hint_text_slot)} is_error={@is_error}>
+          <#slot name="hint_text_slot" />
+        </HintText>
+      {/if}
+    </Container>
+    """
+  end
+
+  def handle_event("toggle_password_visibility", _, socket) do
+    {:noreply, assign(socket, password_shown: !socket.assigns.password_shown)}
+  end
+
+  def handle_event("on_keyup", params, socket) do
+    {:noreply, assign(socket, password: params["value"])}
+  end
+
+  defp get_type(password_shown) do
+    if password_shown do
+      "text"
+    else
+      "password"
+    end
+  end
+
+  defp is_rtl(dir) do
+    dir == "rtl"
+  end
+end
diff --git a/lib/moon/components/text_input/text_input.ex b/lib/moon/components/text_input/text_input.ex
new file mode 100644
index 000000000..5deaa605b
--- /dev/null
+++ b/lib/moon/components/text_input/text_input.ex
@@ -0,0 +1,137 @@
+defmodule Moon.Components.TextInput do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  alias Moon.Components.TextInput.TextInputBasic
+  alias Moon.Components.TextInput.TextInputInnerLabel
+  alias Moon.Components.TextInput.TextInputPassword
+
+  prop id, :string
+  prop size, :string, values: ["md", "lg", "xl"]
+
+  prop type, :string,
+    values: [
+      "date",
+      "datetime-local",
+      "email",
+      "number",
+      "password",
+      "search",
+      "tel",
+      "text",
+      "time",
+      "url"
+    ],
+    default: "text"
+
+  prop placeholder, :string
+  prop is_error, :boolean
+  prop dir, :string, values: ["ltr", "rtl"], default: "ltr"
+  prop background_color, :string, values: Moon.colors(), default: "gohan-100"
+  prop is_first, :boolean
+  prop disabled, :boolean
+  prop label, :string
+  prop required, :boolean
+  prop step, :string, default: "1"
+
+  prop is_sharp_left_side, :boolean
+  prop is_sharp_right_side, :boolean
+  prop is_sharp_top_side, :boolean
+  prop is_sharp_bottom_side, :boolean
+  prop is_top_bottom_border_hidden, :boolean
+  prop is_side_border_hidden, :boolean
+  prop readonly, :boolean
+  prop value, :string
+
+  prop focus, :event
+  prop keydown, :event
+  prop keyup, :event
+  prop blur, :event
+
+  slot hint_text_slot
+  slot show_password_text
+
+  def render(assigns) do
+    ~F"""
+    {#if @size == "xl"}
+      <TextInputInnerLabel
+        disabled={@disabled}
+        dir={@dir}
+        label={@label}
+        is_error={@is_error}
+        size={@size}
+        type={@type}
+        step={@step}
+        required={@required}
+        placeholder={@placeholder}
+        readonly={@readonly}
+        value={@value}
+        background_color={@background_color}
+        is_sharp_left_side={@is_sharp_left_side}
+        is_sharp_right_side={@is_sharp_right_side}
+        is_sharp_top_side={@is_sharp_top_side}
+        is_sharp_bottom_side={@is_sharp_bottom_side}
+        is_top_bottom_border_hidden={@is_top_bottom_border_hidden}
+        is_side_border_hidden={@is_side_border_hidden}
+        is_first={@is_first}
+      >
+        <:hint_text_slot>
+          <#slot name="hint_text_slot" />
+        </:hint_text_slot>
+      </TextInputInnerLabel>
+    {#elseif @type == "password"}
+      <TextInputPassword
+        id={@id}
+        disabled={@disabled}
+        dir={@dir}
+        label={@label}
+        is_error={@is_error}
+        size={@size}
+        step={@step}
+        required={@required}
+        placeholder={@placeholder}
+        readonly={@readonly}
+        value={@value}
+        background_color={@background_color}
+        is_sharp_left_side={@is_sharp_left_side}
+        is_sharp_right_side={@is_sharp_right_side}
+        is_sharp_top_side={@is_sharp_top_side}
+        is_sharp_bottom_side={@is_sharp_bottom_side}
+        is_top_bottom_border_hidden={@is_top_bottom_border_hidden}
+        is_side_border_hidden={@is_side_border_hidden}
+        is_first={@is_first}
+      >
+        <:hint_text_slot>
+          <#slot name="hint_text_slot" />
+        </:hint_text_slot>
+      </TextInputPassword>
+    {#else}
+      <TextInputBasic
+        disabled={@disabled}
+        dir={@dir}
+        label={@label}
+        is_error={@is_error}
+        size={@size}
+        type={@type}
+        step={@step}
+        readonly={@readonly}
+        value={@value}
+        required={@required}
+        placeholder={@placeholder}
+        background_color={@background_color}
+        is_sharp_left_side={@is_sharp_left_side}
+        is_sharp_right_side={@is_sharp_right_side}
+        is_sharp_top_side={@is_sharp_top_side}
+        is_sharp_bottom_side={@is_sharp_bottom_side}
+        is_top_bottom_border_hidden={@is_top_bottom_border_hidden}
+        is_side_border_hidden={@is_side_border_hidden}
+        is_first={@is_first}
+      >
+        <:hint_text_slot>
+          <#slot name="hint_text_slot" />
+        </:hint_text_slot>
+      </TextInputBasic>
+    {/if}
+    """
+  end
+end
diff --git a/lib/moon/components/text_input/utils/utils.ex b/lib/moon/components/text_input/utils/utils.ex
new file mode 100644
index 000000000..28fc3d86e
--- /dev/null
+++ b/lib/moon/components/text_input/utils/utils.ex
@@ -0,0 +1,59 @@
+defmodule Moon.Components.TextInput.Utils do
+  @moduledoc false
+
+  def get_border_radius(size) do
+    case size do
+      "xl" -> "rounded-moon-i-md"
+      "lg" -> "rounded-moon-i-sm"
+      _ -> "rounded-moon-i-sm"
+    end
+  end
+
+  def get_size_styles(size) do
+    case size do
+      "xl" ->
+        "h-14 leading-[3.5rem] rounded-moon-i-md hover:rounded-moon-i-md focus:rounded-moon-i-md invalid:rounded-moon-i-md"
+
+      "lg" ->
+        "h-12 leading-[3rem] rounded-moon-i-sm hover:rounded-moon-i-sm focus:rounded-moon-i-sm invalid:rounded-moon-i-sm"
+
+      _ ->
+        "h-10 leading-10 rounded-moon-i-sm hover:rounded-moon-i-sm focus:rounded-moon-i-sm invalid:rounded-moon-i-sm"
+    end
+  end
+
+  def make_border_left(
+        is_side_border_hidden,
+        is_first,
+        is_rtl
+      ) do
+    cond do
+      is_side_border_hidden && is_rtl && is_first -> "input-lsb-hidden"
+      is_side_border_hidden -> "input-lsb-hidden"
+      true -> ""
+    end
+  end
+
+  def make_border_right(
+        is_side_border_hidden,
+        is_first,
+        is_rtl
+      ) do
+    cond do
+      is_side_border_hidden && is_rtl -> "input-rsb-hidden"
+      is_side_border_hidden && is_first -> "input-rsb-hidden"
+      true -> ""
+    end
+  end
+
+  def make_border_top_bottom(
+        is_top_bottom_border_hidden,
+        is_first
+      ) do
+    cond do
+      is_top_bottom_border_hidden && is_first -> "input-bbb-hidden"
+      is_top_bottom_border_hidden -> "input-tbb-hidden"
+      true -> ""
+    end
+  end
+end
diff --git a/lib/moon_web/components/left_menu.ex b/lib/moon_web/components/left_menu.ex
index cfac1a7c9..73330a91f 100644
--- a/lib/moon_web/components/left_menu.ex
+++ b/lib/moon_web/components/left_menu.ex
@@ -160,27 +160,7 @@ defmodule MoonWeb.Components.LeftMenu do
                       <SidebarLink route={Pages.Components.TabsPage}>Tabs</SidebarLink>
                       <SidebarLink route={Pages.Components.TablePage}>Table</SidebarLink>
 
-                      <Accordion
-                        is_content_inside={false}
-                        id="left-menu-components-text"
-                        open_by_default={active_page_contains(@active_page, Pages.Components.TextInput)}
-                      >
-                        <:title>Text Input</:title>
-                        <:content>
-                          <div class="flex-grow flex flex-col gap-2 pl-8">
-                            <SidebarLink route={Pages.Components.TextInput.TextInputPage}>Text input</SidebarLink>
-                            <SidebarLink route={Pages.Components.TextInput.NumberPage}>Number *</SidebarLink>
-                            <SidebarLink route={Pages.Components.TextInput.DatePage}>Date *</SidebarLink>
-                            <SidebarLink route={Pages.Components.TextInput.TimePage}>Time *</SidebarLink>
-                            <SidebarLink route={Pages.Components.TextInput.DateTimePage}>DateTime *</SidebarLink>
-                            <SidebarLink route={Pages.Components.TextInput.EmailPage}>Email *</SidebarLink>
-                            <SidebarLink route={Pages.Components.TextInput.PasswordPage}>Password</SidebarLink>
-                            <SidebarLink route={Pages.Components.TextInput.SearchPage}>Search *</SidebarLink>
-                            <SidebarLink route={Pages.Components.TextInput.TelephonePage}>Telephone *</SidebarLink>
-                            <SidebarLink route={Pages.Components.TextInput.UrlPage}>Url *</SidebarLink>
-                          </div>
-                        </:content>
-                      </Accordion>
+                      <SidebarLink route={Pages.Components.TextInputPage}>Text input</SidebarLink>
 
                       <SidebarLink route={Pages.Components.TextInputGroupPage}>Text input group</SidebarLink>
                       <SidebarLink route={Pages.Components.ToastPage}>Toast</SidebarLink>
diff --git a/lib/moon_web/pages/components/deprecated/text_input/text_input_page.ex b/lib/moon_web/pages/components/deprecated/text_input/text_input_page.ex
new file mode 100644
index 000000000..ef848e9cc
--- /dev/null
+++ b/lib/moon_web/pages/components/deprecated/text_input/text_input_page.ex
@@ -0,0 +1,267 @@
+defmodule MoonWeb.Pages.Components.TextInput.Deprecated.TextInputPage do
+  @moduledoc false
+
+  use MoonWeb, :live_view
+
+  alias Moon.Assets.Icons.IconMail
+  alias Moon.Assets.Icons.IconUser
+  alias Moon.Autolayouts.TopToDown
+  alias Moon.Components.Button
+  alias Moon.Components.ErrorTag
+  alias Moon.Components.Field
+  alias Moon.Components.Form
+  alias Moon.Components.Heading
+  alias Moon.Components.Deprecated.TextInput
+  alias MoonWeb.Components.ExampleAndCode
+  alias MoonWeb.Components.Page
+  alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
+  alias MoonWeb.Components.Table.Table
+  alias MoonWeb.Components.Table.Column
+
+  data breadcrumbs, :any,
+    default: [
+      %{
+        to: "#",
+        name: "Components"
+      },
+      %{
+        to: "/components/text_input",
+        name: "Text Input"
+      }
+    ]
+
+  data props_info_array, :list,
+    default: [
+      %{
+        :name => 'type',
+        :type =>
+          'date | datetime-local" | email | number | password | search | tel | text | url | time | url',
+        :required => 'false',
+        :default => 'text',
+        :description => 'Different types of input'
+      },
+      %{
+        :name => 'size',
+        :type => 'medium | large | xlarge',
+        :required => '-',
+        :default => 'medium',
+        :description =>
+          'TODO - Size variant (currently only medium | large, with large as default)'
+      },
+      %{
+        :name => 'label',
+        :type => 'string',
+        :required => 'true',
+        :default => '-',
+        :description => 'TODO - Should be required for medium size only'
+      },
+      %{
+        :name => 'placeholder',
+        :type => 'string',
+        :required => 'false',
+        :default => '-',
+        :description => 'Placeholder for input'
+      },
+      %{
+        :name => 'field',
+        :type => 'atom',
+        :required => 'true',
+        :default => '-',
+        :description => 'Field value for underlying pheonix text input component'
+      },
+      %{
+        :name => 'hint_text',
+        :type => 'slot',
+        :required => 'false',
+        :default => '-',
+        :description => 'Informative or error message under input'
+      },
+      %{
+        :name => 'error',
+        :type => 'boolean',
+        :required => 'false',
+        :default => '-',
+        :description => 'Set error state for input'
+      },
+      %{
+        :name => 'show_password_text',
+        :type => '-',
+        :required => '-',
+        :default => '-',
+        :description =>
+          'TODO - Only for input type password. Text for toggle button: show/hide password'
+      },
+      %{
+        :name => 'background_color',
+        :type => 'string',
+        :required => 'false',
+        :default => '-',
+        :description => 'Background color'
+      }
+    ]
+
+  def render(assigns) do
+    ~F"""
+    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
+      <TopToDown>
+        <Heading size={56} class="mb-4">Text Input</Heading>
+
+        <div>
+          The input component is used when you need to let users enter the text of some kind, such as their name or phone number etc.
+        </div>
+
+        <Context put={theme_class: @theme_name}>
+          <ExampleAndCode id="example_1">
+            <:example>
+              <Form
+                for={@user_changeset}
+                change="register_form_update"
+                submit="register_form_submit"
+                autocomplete="off"
+              >
+                <TopToDown>
+                  <Field name={:username}>
+                    <TextInput label="Username" placeholder="Username">
+                      <:left_icon><IconUser /></:left_icon>
+                      <:right_icon>
+                        {#if String.length(@user_changeset.changes[:username] || @user.username || "") > 0}
+                          <Moon.Icons.ControlsClose class="pointer" click="clear_username" />
+                        {/if}
+                      </:right_icon>
+                    </TextInput>
+                    <ErrorTag />
+                  </Field>
+                  <Field name={:email}>
+                    <TextInput
+                      label="Email"
+                      placeholder="Email"
+                      type="email"
+                      disabled={!get_has_valid_username(@user_changeset)}
+                    >
+                      <:left_icon><IconMail /></:left_icon>
+                    </TextInput>
+                    <ErrorTag />
+                  </Field>
+                  <div>
+                    <Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
+                  </div>
+                </TopToDown>
+              </Form>
+            </:example>
+
+            <:code>{example_1_code()}</:code>
+
+            <:state>{example_1_state(assigns)}</:state>
+          </ExampleAndCode>
+        </Context>
+
+        <div>
+          <div class="text-bulma-100 items-center text-moon-20 font-normal my-4">TabLink Props Tabs</div>
+          <Table items={@props_info_array}>
+            <Column name="name" label="Name" :let={item: item} is_row_header>
+              {item.name}
+            </Column>
+            <Column name="type" label="Type" :let={item: item}>
+              {item.type}
+            </Column>
+            <Column name="required" label="Required" :let={item: item}>
+              {item.required}
+            </Column>
+            <Column name="default" label="Default" :let={item: item}>
+              {item.default}
+            </Column>
+            <Column name="description" label="Description" :let={item: item}>
+              {item.description}
+            </Column>
+          </Table>
+        </div>
+      </TopToDown>
+    </Page>
+    """
+  end
+
+  def mount(params, _session, socket) do
+    user = %User{}
+    user_changeset = User.changeset(user, %{})
+
+    {:ok,
+     assign(socket,
+       theme_name: params["theme_name"] || "moon-design-light",
+       active_page: __MODULE__,
+       user: user,
+       user_changeset: user_changeset
+     )}
+  end
+
+  def handle_params(_params, uri, socket) do
+    {:noreply, assign(socket, uri: uri)}
+  end
+
+  def get_has_valid_username(user_changeset) do
+    !Keyword.has_key?(user_changeset.errors, :username)
+  end
+
+  def handle_event("register_form_update", params, socket) do
+    user_changeset = User.changeset(socket.assigns.user, params["user"])
+
+    {:noreply, assign(socket, user_changeset: user_changeset)}
+  end
+
+  def handle_event("register_form_submit", params, socket) do
+    user_changeset =
+      User.changeset(socket.assigns.user, params["user"]) |> Map.merge(%{action: :insert})
+
+    {:noreply, assign(socket, user_changeset: user_changeset)}
+  end
+
+  def handle_event("clear_username", _, socket) do
+    user_changeset =
+      User.changeset(socket.assigns.user, %{
+        username: "",
+        email: socket.assigns.user_changeset.changes["email"]
+      })
+
+    {:noreply, assign(socket, user_changeset: user_changeset)}
+  end
+
+  def example_1_code do
+    """
+    <Form
+      for={@user_changeset}
+      change="register_form_update"
+      submit="register_form_submit"
+      autocomplete="off"
+    >
+      <TopToDown>
+        <Field name={:username}>
+          <TextInput label="Username" placeholder="Username">
+            <:left_icon><IconUser /></:left_icon>
+            <:right_icon>
+              {#if String.length(@username)> 0}
+                <Moon.Icons.ControlsClose class="pointer" click="clear_username" />
+              {/if}
+            </:right_icon>
+          </TextInput>
+          <ErrorTag />
+        </Field>
+        <Field name={:email}>
+          <TextInput label="Email" placeholder="Email" type="email" disabled={!get_has_valid_username(@user_changeset)}>
+            <:left_icon><IconMail /></:left_icon>
+          </TextInput>
+          <ErrorTag />
+        </Field>
+        <div>
+          <Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
+        </div>
+      </TopToDown>
+    </Form>
+    """
+  end
+
+  def example_1_state(assigns) do
+    ~F"""
+    @user_changeset = {inspect(@user_changeset, pretty: true)}
+    @user = {inspect(@user, pretty: true)}
+    """
+  end
+end
diff --git a/lib/moon_web/pages/components/select/dropdown_page.ex b/lib/moon_web/pages/components/select/dropdown_page.ex
index b1e750a52..6af413945 100644
--- a/lib/moon_web/pages/components/select/dropdown_page.ex
+++ b/lib/moon_web/pages/components/select/dropdown_page.ex
@@ -16,7 +16,7 @@ defmodule MoonWeb.Pages.Components.Select.DropdownPage do
   alias Moon.Components.ListItems.SingleLineItem
   alias Moon.Components.Tabs
   alias Moon.Components.Tabs.TabLink
-  alias Moon.Components.TextInput
+  alias Moon.Components.Deprecated.TextInput
   alias MoonWeb.Components.ExampleAndCode
   alias MoonWeb.Components.Page
   alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
diff --git a/lib/moon_web/pages/components/text_input/date_page.ex b/lib/moon_web/pages/components/text_input/date_page.ex
deleted file mode 100644
index 2cef13914..000000000
--- a/lib/moon_web/pages/components/text_input/date_page.ex
+++ /dev/null
@@ -1,40 +0,0 @@
-defmodule MoonWeb.Pages.Components.TextInput.DatePage do
-  @moduledoc false
-
-  use MoonWeb, :live_view
-
-  alias Moon.Autolayouts.TopToDown
-  alias Moon.Components.Heading
-  alias MoonWeb.Components.Page
-
-  data breadcrumbs, :any,
-    default: [
-      %{
-        to: "#",
-        name: "Components"
-      },
-      %{
-        to: "/components/text-input/date",
-        name: "Date"
-      }
-    ]
-
-  def mount(params, _session, socket) do
-    {:ok,
-     assign(socket,
-       theme_name: params["theme_name"] || "moon-design-light",
-       active_page: __MODULE__
-     )}
-  end
-
-  def render(assigns) do
-    ~F"""
-    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <TopToDown>
-        <Heading size={32}>Date</Heading>
-      </TopToDown>
-      Coming soon
-    </Page>
-    """
-  end
-end
diff --git a/lib/moon_web/pages/components/text_input/date_time_page.ex b/lib/moon_web/pages/components/text_input/date_time_page.ex
deleted file mode 100644
index 9b780ddd1..000000000
--- a/lib/moon_web/pages/components/text_input/date_time_page.ex
+++ /dev/null
@@ -1,40 +0,0 @@
-defmodule MoonWeb.Pages.Components.TextInput.DateTimePage do
-  @moduledoc false
-
-  use MoonWeb, :live_view
-
-  alias Moon.Autolayouts.TopToDown
-  alias Moon.Components.Heading
-  alias MoonWeb.Components.Page
-
-  data breadcrumbs, :any,
-    default: [
-      %{
-        to: "#",
-        name: "Components"
-      },
-      %{
-        to: "/components/text-input/date-time",
-        name: "Date Time"
-      }
-    ]
-
-  def mount(params, _session, socket) do
-    {:ok,
-     assign(socket,
-       theme_name: params["theme_name"] || "moon-design-light",
-       active_page: __MODULE__
-     )}
-  end
-
-  def render(assigns) do
-    ~F"""
-    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <TopToDown>
-        <Heading size={32}>Date Time</Heading>
-      </TopToDown>
-      Coming soon
-    </Page>
-    """
-  end
-end
diff --git a/lib/moon_web/pages/components/text_input/email_page.ex b/lib/moon_web/pages/components/text_input/email_page.ex
deleted file mode 100644
index def92094f..000000000
--- a/lib/moon_web/pages/components/text_input/email_page.ex
+++ /dev/null
@@ -1,40 +0,0 @@
-defmodule MoonWeb.Pages.Components.TextInput.EmailPage do
-  @moduledoc false
-
-  use MoonWeb, :live_view
-
-  alias Moon.Autolayouts.TopToDown
-  alias Moon.Components.Heading
-  alias MoonWeb.Components.Page
-
-  data breadcrumbs, :any,
-    default: [
-      %{
-        to: "#",
-        name: "Components"
-      },
-      %{
-        to: "/components/text-input/date-time",
-        name: "Date Time"
-      }
-    ]
-
-  def mount(params, _session, socket) do
-    {:ok,
-     assign(socket,
-       theme_name: params["theme_name"] || "moon-design-light",
-       active_page: __MODULE__
-     )}
-  end
-
-  def render(assigns) do
-    ~F"""
-    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <TopToDown>
-        <Heading size={32}>Date Time</Heading>
-      </TopToDown>
-      Coming soon
-    </Page>
-    """
-  end
-end
diff --git a/lib/moon_web/pages/components/text_input/number_page.ex b/lib/moon_web/pages/components/text_input/number_page.ex
deleted file mode 100644
index 0a6385783..000000000
--- a/lib/moon_web/pages/components/text_input/number_page.ex
+++ /dev/null
@@ -1,40 +0,0 @@
-defmodule MoonWeb.Pages.Components.TextInput.NumberPage do
-  @moduledoc false
-
-  use MoonWeb, :live_view
-
-  alias Moon.Autolayouts.TopToDown
-  alias Moon.Components.Heading
-  alias MoonWeb.Components.Page
-
-  data breadcrumbs, :any,
-    default: [
-      %{
-        to: "#",
-        name: "Components"
-      },
-      %{
-        to: "/components/text-input/number",
-        name: "Number"
-      }
-    ]
-
-  def mount(params, _session, socket) do
-    {:ok,
-     assign(socket,
-       theme_name: params["theme_name"] || "moon-design-light",
-       active_page: __MODULE__
-     )}
-  end
-
-  def render(assigns) do
-    ~F"""
-    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <TopToDown>
-        <Heading size={32}>Number</Heading>
-      </TopToDown>
-      Coming soon
-    </Page>
-    """
-  end
-end
diff --git a/lib/moon_web/pages/components/text_input/password_page.ex b/lib/moon_web/pages/components/text_input/password_page.ex
deleted file mode 100644
index 6e0f06a64..000000000
--- a/lib/moon_web/pages/components/text_input/password_page.ex
+++ /dev/null
@@ -1,137 +0,0 @@
-defmodule MoonWeb.Pages.Components.TextInput.PasswordPage do
-  @moduledoc false
-
-  use MoonWeb, :live_view
-
-  alias Moon.Autolayouts.TopToDown
-  alias Moon.Components.Button
-  alias Moon.Components.ErrorTag
-  alias Moon.Components.Field
-  alias Moon.Components.Form
-  alias Moon.Components.Heading
-  alias Moon.Components.PasswordInput
-  alias MoonWeb.Components.ExampleAndCode
-  alias MoonWeb.Components.Page
-  alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
-
-  data breadcrumbs, :any,
-    default: [
-      %{
-        to: "#",
-        name: "Components"
-      },
-      %{
-        to: "/components/text-input/password",
-        name: "Password"
-      }
-    ]
-
-  def mount(params, _session, socket) do
-    user_changeset =
-      User.changeset(%User{}, %{
-        password: ""
-      })
-
-    {:ok,
-     assign(socket,
-       theme_name: params["theme_name"] || "moon-design-light",
-       active_page: __MODULE__,
-       user_changeset: user_changeset
-     )}
-  end
-
-  def handle_params(_params, uri, socket) do
-    {:noreply, assign(socket, uri: uri)}
-  end
-
-  def render(assigns) do
-    ~F"""
-    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <TopToDown>
-        <Heading size={56} class="mb-4">Password Input</Heading>
-
-        <Context put={theme_class: @theme_name}>
-          <ExampleAndCode id="example_1">
-            <:example>
-              <Form
-                for={@user_changeset}
-                change="login_form_update"
-                submit="login_form_submit"
-                autocomplete="off"
-              >
-                <TopToDown>
-                  <Field name={:password}>
-                    <PasswordInput label="Password" placeholder="Password" id="login_password">
-                      <:left_icon><Moon.Icons.SecurityLock /></:left_icon>
-                    </PasswordInput>
-                    <ErrorTag />
-                  </Field>
-                  <div>
-                    <Button type="submit" right_icon="arrows_right" variant="primary">Login</Button>
-                  </div>
-                </TopToDown>
-              </Form>
-            </:example>
-
-            <:code>{example_1_code()}</:code>
-
-            <:state>{example_1_state(assigns)}</:state>
-          </ExampleAndCode>
-        </Context>
-      </TopToDown>
-    </Page>
-    """
-  end
-
-  def handle_event(
-        "login_form_update",
-        %{
-          "user" => %{
-            "password" => password
-          }
-        },
-        socket
-      ) do
-    user_changeset =
-      User.changeset(%User{}, %{
-        password: password
-      })
-
-    {:noreply, assign(socket, user_changeset: user_changeset)}
-  end
-
-  def handle_event("login_form_submit", _, socket) do
-    user_changeset = Map.merge(socket.assigns.user_changeset, %{action: :insert})
-
-    {:noreply, assign(socket, user_changeset: user_changeset)}
-  end
-
-  def example_1_code do
-    """
-    <Form
-      for={@user_changeset}
-      change="login_form_update"
-      submit="login_form_submit"
-      autocomplete="off"
-    >
-      <TopToDown>
-        <Field name={:password}>
-          <PasswordInput label="Password" placeholder="Password" id="login_password">
-            <:left_icon><Moon.Icons.SecurityLock /></:left_icon>
-          </PasswordInput>
-          <ErrorTag />
-        </Field>
-        <div>
-          <Button type="submit" right_icon="arrows_right" variant="primary">Login</Button>
-        </div>
-      </TopToDown>
-    </Form>
-    """
-  end
-
-  def example_1_state(assigns) do
-    ~F"""
-    @user_changeset = {inspect(@user_changeset, pretty: true)}
-    """
-  end
-end
diff --git a/lib/moon_web/pages/components/text_input/search_page.ex b/lib/moon_web/pages/components/text_input/search_page.ex
deleted file mode 100644
index 7b8cbca17..000000000
--- a/lib/moon_web/pages/components/text_input/search_page.ex
+++ /dev/null
@@ -1,40 +0,0 @@
-defmodule MoonWeb.Pages.Components.TextInput.SearchPage do
-  @moduledoc false
-
-  use MoonWeb, :live_view
-
-  alias Moon.Autolayouts.TopToDown
-  alias Moon.Components.Heading
-  alias MoonWeb.Components.Page
-
-  data breadcrumbs, :any,
-    default: [
-      %{
-        to: "#",
-        name: "Components"
-      },
-      %{
-        to: "/components/text-input/search",
-        name: "Search"
-      }
-    ]
-
-  def mount(params, _session, socket) do
-    {:ok,
-     assign(socket,
-       theme_name: params["theme_name"] || "moon-design-light",
-       active_page: __MODULE__
-     )}
-  end
-
-  def render(assigns) do
-    ~F"""
-    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <TopToDown>
-        <Heading size={32}>Search</Heading>
-      </TopToDown>
-      Coming soon
-    </Page>
-    """
-  end
-end
diff --git a/lib/moon_web/pages/components/text_input/telephone_page.ex b/lib/moon_web/pages/components/text_input/telephone_page.ex
deleted file mode 100644
index 1d8c9b376..000000000
--- a/lib/moon_web/pages/components/text_input/telephone_page.ex
+++ /dev/null
@@ -1,40 +0,0 @@
-defmodule MoonWeb.Pages.Components.TextInput.TelephonePage do
-  @moduledoc false
-
-  use MoonWeb, :live_view
-
-  alias Moon.Autolayouts.TopToDown
-  alias Moon.Components.Heading
-  alias MoonWeb.Components.Page
-
-  data breadcrumbs, :any,
-    default: [
-      %{
-        to: "#",
-        name: "Components"
-      },
-      %{
-        to: "/components/text-input/telephone",
-        name: "Telephone"
-      }
-    ]
-
-  def mount(params, _session, socket) do
-    {:ok,
-     assign(socket,
-       theme_name: params["theme_name"] || "moon-design-light",
-       active_page: __MODULE__
-     )}
-  end
-
-  def render(assigns) do
-    ~F"""
-    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <TopToDown>
-        <Heading size={32}>Telephone</Heading>
-      </TopToDown>
-      Coming soon
-    </Page>
-    """
-  end
-end
diff --git a/lib/moon_web/pages/components/text_input/text_input_page.ex b/lib/moon_web/pages/components/text_input/text_input_page.ex
index 7276a367a..25162dd86 100644
--- a/lib/moon_web/pages/components/text_input/text_input_page.ex
+++ b/lib/moon_web/pages/components/text_input/text_input_page.ex
@@ -1,20 +1,19 @@
-defmodule MoonWeb.Pages.Components.TextInput.TextInputPage do
+defmodule MoonWeb.Pages.Components.TextInputPage do
   @moduledoc false
 
   use MoonWeb, :live_view
 
-  alias Moon.Assets.Icons.IconMail
-  alias Moon.Assets.Icons.IconUser
   alias Moon.Autolayouts.TopToDown
-  alias Moon.Components.Button
-  alias Moon.Components.ErrorTag
-  alias Moon.Components.Field
-  alias Moon.Components.Form
-  alias Moon.Components.Heading
-  alias Moon.Components.TextInput
   alias MoonWeb.Components.ExampleAndCode
   alias MoonWeb.Components.Page
+  alias Moon.Components.TextInput
+  alias Moon.Components.Heading
+  alias Moon.Autolayouts.LeftToRight
+  alias Moon.Components.Form
+  alias Moon.Components.Button
   alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
+  alias Moon.Components.Field
+  alias Moon.Components.ErrorTag
   alias MoonWeb.Components.Table.Table
   alias MoonWeb.Components.Table.Column
 
@@ -45,15 +44,14 @@ defmodule MoonWeb.Pages.Components.TextInput.TextInputPage do
         :type => 'medium | large | xlarge',
         :required => '-',
         :default => 'medium',
-        :description =>
-          'TODO - Size variant (currently only medium | large, with large as default)'
+        :description => 'Size variant (currently only medium | large, with large as default)'
       },
       %{
         :name => 'label',
         :type => 'string',
         :required => 'true',
         :default => '-',
-        :description => 'TODO - Should be required for medium size only'
+        :description => 'Required for medium size only'
       },
       %{
         :name => 'placeholder',
@@ -88,8 +86,7 @@ defmodule MoonWeb.Pages.Components.TextInput.TextInputPage do
         :type => '-',
         :required => '-',
         :default => '-',
-        :description =>
-          'TODO - Only for input type password. Text for toggle button: show/hide password'
+        :description => 'Only for input type password. Text for toggle button: show/hide password'
       },
       %{
         :name => 'background_color',
@@ -97,6 +94,13 @@ defmodule MoonWeb.Pages.Components.TextInput.TextInputPage do
         :required => 'false',
         :default => '-',
         :description => 'Background color'
+      },
+      %{
+        :name => 'id',
+        :type => 'string',
+        :required => 'false | required (for password type)',
+        :default => '-',
+        :description => 'Unique id'
       }
     ]
 
@@ -106,54 +110,305 @@ defmodule MoonWeb.Pages.Components.TextInput.TextInputPage do
       <TopToDown>
         <Heading size={56} class="mb-4">Text Input</Heading>
 
-        <div>
-          The input component is used when you need to let users enter the text of some kind, such as their name or phone number etc.
-        </div>
+        <ExampleAndCode id="input_020" title="Sizes">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput label="Medium (Default: md)" placeholder="Placeholder" />
+              <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" />
+              <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_020_code()}</:code>
+        </ExampleAndCode>
+
+        <Heading size={32} class="mt-16 mb-4">Text Input Types</Heading>
+
+        <ExampleAndCode id="input_010" title="Number">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput type="number" size="md" label="Medium (Default: md)" placeholder="e.g. 1234" />
+              <TextInput type="number" size="lg" label="Large (lg)" placeholder="e.g. 1234" />
+              <TextInput type="number" size="xl" label="Xlarge (xl)" placeholder="e.g. 1234" />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_010_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_009" title="Date">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput type="date" size="md" label="Medium (Default: md)" placeholder="Placeholder" />
+              <TextInput type="date" size="lg" label="Large (lg)" placeholder="Placeholder" />
+              <TextInput type="date" size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_009_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_008" title="Time">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput type="time" size="md" label="Medium (Default: md)" placeholder="Placeholder" />
+              <TextInput type="time" size="lg" label="Large (lg)" placeholder="Placeholder" />
+              <TextInput type="time" size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_008_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_007" title="Date Time">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput
+                type="datetime-local"
+                size="md"
+                label="Medium (Default: md)"
+                placeholder="Placeholder"
+              />
+              <TextInput type="datetime-local" size="lg" label="Large (lg)" placeholder="Placeholder" />
+              <TextInput type="datetime-local" size="xl" label="Xlarge (xl)" placeholder="Placeholder" />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_007_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_006" title="Email">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput
+                type="email"
+                size="md"
+                label="Medium (Default: md)"
+                placeholder="e.g. jake.weary@sportsbet.io"
+              />
+              <TextInput type="email" size="lg" label="Large (lg)" placeholder="e.g. jake.weary@sportsbet.io" />
+              <TextInput
+                type="email"
+                size="xl"
+                label="Xlarge (xl)"
+                placeholder="e.g. jake.weary@sportsbet.io"
+              />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_006_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_005" title="Password">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput
+                id="txt_password_1"
+                type="password"
+                size="md"
+                label="Medium (Default: md)"
+                placeholder="Password"
+              />
+              <TextInput
+                id="txt_password_2"
+                type="password"
+                size="lg"
+                label="Large (lg)"
+                placeholder="Password"
+              />
+              <TextInput
+                id="txt_password_3"
+                type="password"
+                size="xl"
+                label="Xlarge (xl)"
+                placeholder="Password"
+              />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_005_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_004" title="Search">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput
+                type="email"
+                size="md"
+                label="Medium (Default: md)"
+                placeholder="e.g. jake.weary@sportsbet.io"
+              />
+              <TextInput type="email" size="lg" label="Large (lg)" placeholder="e.g. jake.weary@sportsbet.io" />
+              <TextInput
+                type="email"
+                size="xl"
+                label="Xlarge (xl)"
+                placeholder="e.g. jake.weary@sportsbet.io"
+              />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_004_code()}</:code>
+        </ExampleAndCode>
+
+        <Heading size={32} class="mt-16 mb-4">Text input attributes</Heading>
+
+        <ExampleAndCode id="input_20" title="Disabled">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput label="Medium (Default: md)" placeholder="Placeholder" disabled />
+              <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" disabled />
+              <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" disabled />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_20_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_30" title="Error">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput label="Medium (Default: md)" placeholder="Placeholder" is_error>
+                <:hint_text_slot>Informative message holder</:hint_text_slot>
+              </TextInput>
+              <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" is_error>
+                <:hint_text_slot>Informative message holder</:hint_text_slot>
+              </TextInput>
+              <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" is_error>
+                <:hint_text_slot>Informative message holder</:hint_text_slot>
+              </TextInput>
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_30_code()}</:code>
+        </ExampleAndCode>
 
-        <Context put={theme_class: @theme_name}>
-          <ExampleAndCode id="example_1">
-            <:example>
-              <Form
-                for={@user_changeset}
-                change="register_form_update"
-                submit="register_form_submit"
-                autocomplete="off"
-              >
-                <TopToDown>
-                  <Field name={:username}>
-                    <TextInput label="Username" placeholder="Username">
-                      <:left_icon><IconUser /></:left_icon>
-                      <:right_icon>
-                        {#if String.length(@user_changeset.changes[:username] || @user.username || "") > 0}
-                          <Moon.Icons.ControlsClose class="pointer" click="clear_username" />
-                        {/if}
-                      </:right_icon>
-                    </TextInput>
-                    <ErrorTag />
-                  </Field>
-                  <Field name={:email}>
-                    <TextInput
-                      label="Email"
-                      placeholder="Email"
-                      type="email"
-                      disabled={!get_has_valid_username(@user_changeset)}
-                    >
-                      <:left_icon><IconMail /></:left_icon>
-                    </TextInput>
-                    <ErrorTag />
-                  </Field>
-                  <div>
-                    <Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
-                  </div>
-                </TopToDown>
-              </Form>
-            </:example>
-
-            <:code>{example_1_code()}</:code>
-
-            <:state>{example_1_state(assigns)}</:state>
-          </ExampleAndCode>
-        </Context>
+        <ExampleAndCode id="input_40" title="Readonly">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput
+                label="Medium (Default: md)"
+                value="Read only text"
+                placeholder="Placeholder"
+                readonly
+              />
+              <TextInput
+                size="lg"
+                label="Large (lg)"
+                value="Read only text"
+                placeholder="Placeholder"
+                readonly
+              />
+              <TextInput
+                size="xl"
+                label="Xlarge (xl)"
+                value="Read only text"
+                placeholder="Placeholder"
+                readonly
+              />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_40_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_50" title="Size RTL">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput label="Medium (Default: md)" placeholder="Placeholder" dir="rtl" />
+              <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" dir="rtl" />
+              <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" dir="rtl" />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_50_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_60" title="Without label">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput placeholder="Placeholder" dir="rtl" />
+              <TextInput size="lg" placeholder="Placeholder" dir="rtl" />
+              <TextInput size="xl" placeholder="Placeholder" dir="rtl" />
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_60_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_70" title="Hint Text">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput placeholder="Placeholder" label="Medium (Default: md)">
+                <:hint_text_slot>Informative message holder</:hint_text_slot>
+              </TextInput>
+              <TextInput size="lg" placeholder="Placeholder" label="Large (lg)">
+                <:hint_text_slot>Informative message holder</:hint_text_slot>
+              </TextInput>
+              <TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)">
+                <:hint_text_slot>Informative message holder</:hint_text_slot>
+              </TextInput>
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_70_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_80" title="Input with background color">
+          <:example>
+            <LeftToRight class="justify-between w-full items-end">
+              <TextInput placeholder="Placeholder" label="Medium (Default: md)" background_color="goku-100">
+                <:hint_text_slot>Informative message holder</:hint_text_slot>
+              </TextInput>
+              <TextInput size="lg" placeholder="Placeholder" label="Large (lg)" background_color="goku-100">
+                <:hint_text_slot>Informative message holder</:hint_text_slot>
+              </TextInput>
+              <TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)" background_color="goku-100">
+                <:hint_text_slot>Informative message holder</:hint_text_slot>
+              </TextInput>
+            </LeftToRight>
+          </:example>
+
+          <:code>{text_input_70_code()}</:code>
+        </ExampleAndCode>
+
+        <ExampleAndCode id="input_90" title="Form example">
+          <:example>
+            <Form
+              for={@user_changeset}
+              change="register_form_update"
+              submit="register_form_submit"
+              autocomplete="off"
+            >
+              <TopToDown>
+                <Field name={:username}>
+                  <TextInput label="Username" placeholder="Username" />
+                  <ErrorTag />
+                </Field>
+                <Field name={:email}>
+                  <TextInput
+                    label="Email"
+                    placeholder="Email"
+                    type="email"
+                    disabled={!get_has_valid_username(@user_changeset)}
+                  />
+                  <ErrorTag />
+                </Field>
+                <Field name={:password}>
+                  <TextInput id="password" label="Password" placeholder="Password" type="password" />
+                  <ErrorTag />
+                </Field>
+                <div>
+                  <Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
+                </div>
+              </TopToDown>
+            </Form>
+          </:example>
+
+          <:code>{text_input_90_code()}</:code>
+
+          <:state>{text_input_90_state(assigns)}</:state>
+        </ExampleAndCode>
 
         <div>
           <div class="text-bulma-100 items-center text-moon-20 font-normal my-4">TabLink Props Tabs</div>
@@ -180,51 +435,253 @@ defmodule MoonWeb.Pages.Components.TextInput.TextInputPage do
     """
   end
 
-  def mount(params, _session, socket) do
-    user = %User{}
-    user_changeset = User.changeset(user, %{})
+  def text_input_020_code do
+    """
+    <TextInput label="Medium (Default: md)" />
+    <TextInput size="lg" label="Large (lg)" />
+    <TextInput size="xl" label="Xlarge (xl)" />
+    """
+  end
 
-    {:ok,
-     assign(socket,
-       theme_name: params["theme_name"] || "moon-design-light",
-       active_page: __MODULE__,
-       user: user,
-       user_changeset: user_changeset
-     )}
+  def text_input_010_code do
+    """
+    <TextInput
+      type="number"
+      size="md"
+      label="Medium (Default: md)"
+      placeholder="e.g. 1234"
+    />
+    <TextInput
+      type="number"
+      size="lg"
+      label="Large (lg)"
+      placeholder="e.g. 1234"
+    />
+    <TextInput
+      type="number"
+      size="xl"
+      label="Xlarge (xl)"
+      placeholder="e.g. 1234"
+    />
+    """
   end
 
-  def handle_params(_params, uri, socket) do
-    {:noreply, assign(socket, uri: uri)}
+  def text_input_009_code do
+    """
+    <TextInput
+      type="date"
+      size="md"
+      label="Medium (Default: md)"
+      placeholder="Placeholder"
+    />
+    <TextInput
+      type="date"
+      size="lg"
+      label="Large (lg)"
+      placeholder="Placeholder"
+    />
+    <TextInput
+      type="date"
+      size="xl"
+      label="Xlarge (xl)"
+      placeholder="Placeholder"
+    />
+    """
   end
 
-  def get_has_valid_username(user_changeset) do
-    !Keyword.has_key?(user_changeset.errors, :username)
+  def text_input_008_code do
+    """
+    <TextInput
+      type="time"
+      size="md"
+      label="Medium (Default: md)"
+      placeholder="Placeholder"
+    />
+    <TextInput
+      type="time"
+      size="lg"
+      label="Large (lg)"
+      placeholder="Placeholder"
+    />
+    <TextInput
+      type="time"
+      size="xl"
+      label="Xlarge (xl)"
+      placeholder="Placeholder"
+    />
+    """
   end
 
-  def handle_event("register_form_update", params, socket) do
-    user_changeset = User.changeset(socket.assigns.user, params["user"])
+  def text_input_007_code do
+    """
+    <TextInput
+      type="datetime-local"
+      size="md"
+      label="Medium (Default: md)"
+      placeholder="Placeholder"
+    />
+    <TextInput
+      type="datetime-local"
+      size="lg"
+      label="Large (lg)"
+      placeholder="Placeholder"
+    />
+    <TextInput
+      type="datetime-local"
+      size="xl"
+      label="Xlarge (xl)"
+      placeholder="Placeholder"
+    />
+    """
+  end
 
-    {:noreply, assign(socket, user_changeset: user_changeset)}
+  def text_input_006_code do
+    """
+    <TextInput
+      type="email"
+      size="md"
+      label="Medium (Default: md)"
+      placeholder="e.g. jake.weary@sportsbet.io"
+    />
+    <TextInput
+      type="email"
+      size="lg"
+      label="Large (lg)"
+      placeholder="e.g. jake.weary@sportsbet.io"
+    />
+    <TextInput
+      type="email"
+      size="xl"
+      label="Xlarge (xl)"
+      placeholder="e.g. jake.weary@sportsbet.io"
+    />
+    """
   end
 
-  def handle_event("register_form_submit", params, socket) do
-    user_changeset =
-      User.changeset(socket.assigns.user, params["user"]) |> Map.merge(%{action: :insert})
+  def text_input_005_code do
+    """
+    <TextInput
+      id="txt_password_1"
+      type="password"
+      size="md"
+      label="Medium (Default: md)"
+      placeholder="Password"
+    />
+    <TextInput
+      id="txt_password_2"
+      type="password"
+      size="lg"
+      label="Large (lg)"
+      placeholder="Password"
+    />
+    <TextInput
+      id="txt_password_3"
+      type="password"
+      size="xl"
+      label="Xlarge (xl)"
+      placeholder="Password"
+    />
+    """
+  end
 
-    {:noreply, assign(socket, user_changeset: user_changeset)}
+  def text_input_004_code do
+    """
+    <TextInput
+      type="email"
+      size="md"
+      label="Medium (Default: md)"
+      placeholder="e.g. jake.weary@sportsbet.io"
+    />
+    <TextInput
+      type="email"
+      size="lg"
+      label="Large (lg)"
+      placeholder="e.g. jake.weary@sportsbet.io"
+    />
+    <TextInput
+      type="email"
+      size="xl"
+      label="Xlarge (xl)"
+      placeholder="e.g. jake.weary@sportsbet.io"
+    />
+    """
   end
 
-  def handle_event("clear_username", _, socket) do
-    user_changeset =
-      User.changeset(socket.assigns.user, %{
-        username: "",
-        email: socket.assigns.user_changeset.changes["email"]
-      })
+  def text_input_20_code do
+    """
+    <TextInput label="Medium (Default: md)" placeholder="Placeholder" disabled/>
+    <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" disabled/>
+    <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" disabled/>
+    """
+  end
 
-    {:noreply, assign(socket, user_changeset: user_changeset)}
+  def text_input_30_code do
+    """
+    <TextInput label="Medium (Default: md)" placeholder="Placeholder" is_error>
+      <:hint_text_slot>Informative message holder</:hint_text_slot>
+    </TextInput>
+    <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" is_error>
+      <:hint_text_slot>Informative message holder</:hint_text_slot>
+    </TextInput>
+      <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" is_error>
+      <:hint_text_slot>Informative message holder</:hint_text_slot>
+    </TextInput>
+    """
+  end
+
+  def text_input_40_code do
+    """
+    <TextInput label="Medium (Default: md)" placeholder="Placeholder" readonly/>
+    <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" readonly/>
+    <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" readonly/>
+    """
   end
 
-  def example_1_code do
+  def text_input_50_code do
+    """
+    <TextInput label="Medium (Default: md)" placeholder="Placeholder" dir="rtl"/>
+    <TextInput size="lg" label="Large (lg)" placeholder="Placeholder" dir="rtl"/>
+    <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" dir="rtl"/>
+    """
+  end
+
+  def text_input_60_code do
+    """
+    <TextInput (Default: md)" placeholder="Placeholder" dir="rtl"/>
+    <TextInput size="lg" placeholder="Placeholder" dir="rtl"/>
+    <TextInput size="xl" placeholder="Placeholder" dir="rtl"/>
+    """
+  end
+
+  def text_input_70_code do
+    """
+    <TextInput placeholder="Placeholder" label="Medium (Default: md)">
+      <:hint_text_slot>Informative message holder</:hint_text_slot>
+    </TextInput>
+    <TextInput size="lg" placeholder="Placeholder" label="Large (lg)">
+      <:hint_text_slot>Informative message holder</:hint_text_slot>
+    </TextInput>
+    <TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)">
+      <:hint_text_slot>Informative message holder</:hint_text_slot>
+    </TextInput>
+    """
+  end
+
+  def text_input_80_code do
+    """
+    <TextInput placeholder="Placeholder" label="Medium (Default: md)" background_color="goku-100">
+      <:hint_text_slot>Informative message holder</:hint_text_slot>
+    </TextInput>
+    <TextInput size="lg" placeholder="Placeholder" label="Large (lg)" background_color="goku-100">
+      <:hint_text_slot>Informative message holder</:hint_text_slot>
+    </TextInput>
+    <TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)" background_color="goku-100">
+      <:hint_text_slot>Informative message holder</:hint_text_slot>
+    </TextInput>
+    """
+  end
+
+  def text_input_90_code do
     """
     <Form
       for={@user_changeset}
@@ -234,20 +691,25 @@ defmodule MoonWeb.Pages.Components.TextInput.TextInputPage do
     >
       <TopToDown>
         <Field name={:username}>
-          <TextInput label="Username" placeholder="Username">
-            <:left_icon><IconUser /></:left_icon>
-            <:right_icon>
-              {#if String.length(@username)> 0}
-                <Moon.Icons.ControlsClose class="pointer" click="clear_username" />
-              {/if}
-            </:right_icon>
-          </TextInput>
+          <TextInput label="Username" placeholder="Username" />
           <ErrorTag />
         </Field>
         <Field name={:email}>
-          <TextInput label="Email" placeholder="Email" type="email" disabled={!get_has_valid_username(@user_changeset)}>
-            <:left_icon><IconMail /></:left_icon>
-          </TextInput>
+          <TextInput
+            label="Email"
+            placeholder="Email"
+            type="email"
+            disabled={!get_has_valid_username(@user_changeset)}
+          />
+          <ErrorTag />
+        </Field>
+        <Field name={:password}>
+          <TextInput
+            id="password"
+            label="Password"
+            placeholder="Password"
+            type="password"
+          />
           <ErrorTag />
         </Field>
         <div>
@@ -258,10 +720,44 @@ defmodule MoonWeb.Pages.Components.TextInput.TextInputPage do
     """
   end
 
-  def example_1_state(assigns) do
+  def text_input_90_state(assigns) do
     ~F"""
     @user_changeset = {inspect(@user_changeset, pretty: true)}
     @user = {inspect(@user, pretty: true)}
     """
   end
+
+  def mount(params, _session, socket) do
+    user = %User{}
+    user_changeset = User.changeset(user, %{})
+
+    {:ok,
+     assign(socket,
+       theme_name: params["theme_name"] || "moon-design-light",
+       active_page: __MODULE__,
+       user: user,
+       user_changeset: user_changeset
+     )}
+  end
+
+  def handle_params(_params, uri, socket) do
+    {:noreply, assign(socket, uri: uri)}
+  end
+
+  def get_has_valid_username(user_changeset) do
+    !Keyword.has_key?(user_changeset.errors, :username)
+  end
+
+  def handle_event("register_form_update", params, socket) do
+    user_changeset = User.changeset(socket.assigns.user, params["user"])
+
+    {:noreply, assign(socket, user_changeset: user_changeset)}
+  end
+
+  def handle_event("register_form_submit", params, socket) do
+    user_changeset =
+      User.changeset(socket.assigns.user, params["user"]) |> Map.merge(%{action: :insert})
+
+    {:noreply, assign(socket, user_changeset: user_changeset)}
+  end
 end
diff --git a/lib/moon_web/pages/components/text_input/time_page.ex b/lib/moon_web/pages/components/text_input/time_page.ex
deleted file mode 100644
index a9b6c3f1a..000000000
--- a/lib/moon_web/pages/components/text_input/time_page.ex
+++ /dev/null
@@ -1,40 +0,0 @@
-defmodule MoonWeb.Pages.Components.TextInput.TimePage do
-  @moduledoc false
-
-  use MoonWeb, :live_view
-
-  alias Moon.Autolayouts.TopToDown
-  alias Moon.Components.Heading
-  alias MoonWeb.Components.Page
-
-  data breadcrumbs, :any,
-    default: [
-      %{
-        to: "#",
-        name: "Components"
-      },
-      %{
-        to: "/components/text-input/time",
-        name: "Time"
-      }
-    ]
-
-  def mount(params, _session, socket) do
-    {:ok,
-     assign(socket,
-       theme_name: params["theme_name"] || "moon-design-light",
-       active_page: __MODULE__
-     )}
-  end
-
-  def render(assigns) do
-    ~F"""
-    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <TopToDown>
-        <Heading size={32}>Time</Heading>
-      </TopToDown>
-      Coming soon
-    </Page>
-    """
-  end
-end
diff --git a/lib/moon_web/pages/components/text_input/url_page.ex b/lib/moon_web/pages/components/text_input/url_page.ex
deleted file mode 100644
index aba1dbca2..000000000
--- a/lib/moon_web/pages/components/text_input/url_page.ex
+++ /dev/null
@@ -1,40 +0,0 @@
-defmodule MoonWeb.Pages.Components.TextInput.UrlPage do
-  @moduledoc false
-
-  use MoonWeb, :live_view
-
-  alias Moon.Autolayouts.TopToDown
-  alias Moon.Components.Heading
-  alias MoonWeb.Components.Page
-
-  data breadcrumbs, :any,
-    default: [
-      %{
-        to: "#",
-        name: "Components"
-      },
-      %{
-        to: "/components/text-input/url",
-        name: "Url"
-      }
-    ]
-
-  def mount(params, _session, socket) do
-    {:ok,
-     assign(socket,
-       theme_name: params["theme_name"] || "moon-design-light",
-       active_page: __MODULE__
-     )}
-  end
-
-  def render(assigns) do
-    ~F"""
-    <Page theme_name={@theme_name} active_page={@active_page} breadcrumbs={@breadcrumbs}>
-      <TopToDown>
-        <Heading size={32}>Url</Heading>
-      </TopToDown>
-      Coming soon
-    </Page>
-    """
-  end
-end
diff --git a/lib/moon_web/pages/example_pages/affliliates_page.ex b/lib/moon_web/pages/example_pages/affliliates_page.ex
index eaedfbf17..340a6b53a 100644
--- a/lib/moon_web/pages/example_pages/affliliates_page.ex
+++ b/lib/moon_web/pages/example_pages/affliliates_page.ex
@@ -7,7 +7,8 @@ defmodule MoonWeb.Pages.ExamplePages.AffiliatesPage do
   alias Moon.Autolayouts.{ButtonsList, TopToDown}
   alias Moon.BackofficeComponents.Table
   alias Moon.Components.{Button, Chip, Divider, Heading}
-  alias Moon.Components.{Button, Form, TextInput}
+  alias Moon.Components.{Button, Form}
+  alias Moon.Components.Deprecated.TextInput
   alias MoonWeb.Components.Breadcrumbs
   alias MoonWeb.MockDB.{Affiliates, Segments}
   alias MoonWeb.Pages.ExamplePages.Helpers
diff --git a/lib/moon_web/pages/example_pages/customers_page.ex b/lib/moon_web/pages/example_pages/customers_page.ex
index 2d1d26672..0c0dcce0a 100644
--- a/lib/moon_web/pages/example_pages/customers_page.ex
+++ b/lib/moon_web/pages/example_pages/customers_page.ex
@@ -7,7 +7,8 @@ defmodule MoonWeb.Pages.ExamplePages.CustomersPage do
   alias Moon.Autolayouts.{ButtonsList, TopToDown}
   alias Moon.BackofficeComponents.Table
   alias Moon.Components.{Button, Chip, Divider, Heading}
-  alias Moon.Components.{Button, Form, TextInput}
+  alias Moon.Components.{Button, Form}
+  alias Moon.Components.Deprecated.TextInput
   alias MoonWeb.Components.Breadcrumbs
   alias MoonWeb.MockDB.{Segments, Users, Utils}
   alias MoonWeb.Pages.ExamplePages.Customers.CustomerPreview
diff --git a/lib/moon_web/pages/example_pages/shared/top_menu/search.ex b/lib/moon_web/pages/example_pages/shared/top_menu/search.ex
index e32b2c1d7..8c0f1d5e5 100644
--- a/lib/moon_web/pages/example_pages/shared/top_menu/search.ex
+++ b/lib/moon_web/pages/example_pages/shared/top_menu/search.ex
@@ -6,7 +6,7 @@ defmodule MoonWeb.Pages.ExamplePages.Shared.TopMenu.Search do
   alias Moon.Assets.Icons.IconZoom
   alias Moon.Components.Form
   alias Moon.Components.Popover
-  alias Moon.Components.TextInput
+  alias Moon.Components.Deprecated.TextInput
 
   alias __MODULE__.SearchResults
 
diff --git a/lib/moon_web/pages/example_pages/transactions_page/transactions_filters.ex b/lib/moon_web/pages/example_pages/transactions_page/transactions_filters.ex
index dfac423b3..e8d822796 100644
--- a/lib/moon_web/pages/example_pages/transactions_page/transactions_filters.ex
+++ b/lib/moon_web/pages/example_pages/transactions_page/transactions_filters.ex
@@ -22,7 +22,7 @@ defmodule MoonWeb.Pages.ExamplePages.TransactionsPage.TransactionsFilters do
   alias Moon.Components.Datepicker
   alias Moon.Components.Form
   alias Moon.Components.Popover
-  alias Moon.Components.TextInput
+  alias Moon.Components.Deprecated.TextInput
   alias MoonWeb.Pages.ExamplePages.TransactionsPage.TransactionFilter
 
   data clicked_name, :string, default: ""
diff --git a/lib/moon_web/pages/tutorials/add_data_using_form.ex b/lib/moon_web/pages/tutorials/add_data_using_form.ex
index b2b038781..2d3f37bb4 100644
--- a/lib/moon_web/pages/tutorials/add_data_using_form.ex
+++ b/lib/moon_web/pages/tutorials/add_data_using_form.ex
@@ -8,7 +8,7 @@ defmodule MoonWeb.Pages.Tutorials.AddDataUsingForm do
   alias Moon.Components.Form
   alias Moon.Components.Link
   alias Moon.Components.Select
-  alias Moon.Components.TextInput
+  alias Moon.Components.Deprecated.TextInput
   alias MoonWeb.Components.ExampleAndCode
   alias MoonWeb.Components.Page
   alias MoonWeb.Pages.Tutorials.AddDataUsingForm.User
diff --git a/lib/moon_web/router.ex b/lib/moon_web/router.ex
index c3867bea1..67f63e492 100644
--- a/lib/moon_web/router.ex
+++ b/lib/moon_web/router.ex
@@ -115,16 +115,7 @@ defmodule MoonWeb.Router do
       live "/components/tabs/:tab_id", MoonWeb.Pages.Components.TabsPage
       live "/components/table", MoonWeb.Pages.Components.TablePage
 
-      live "/components/text-input/text-input", MoonWeb.Pages.Components.TextInput.TextInputPage
-      live "/components/text-input/number", MoonWeb.Pages.Components.TextInput.NumberPage
-      live "/components/text-input/date", MoonWeb.Pages.Components.TextInput.DatePage
-      live "/components/text-input/time", MoonWeb.Pages.Components.TextInput.TimePage
-      live "/components/text-input/date-time", MoonWeb.Pages.Components.TextInput.DateTimePage
-      live "/components/text-input/email", MoonWeb.Pages.Components.TextInput.EmailPage
-      live "/components/text-input/password", MoonWeb.Pages.Components.TextInput.PasswordPage
-      live "/components/text-input/search", MoonWeb.Pages.Components.TextInput.SearchPage
-      live "/components/text-input/telephone", MoonWeb.Pages.Components.TextInput.TelephonePage
-      live "/components/text-input/url", MoonWeb.Pages.Components.TextInput.UrlPage
+      live "/components/text-input", MoonWeb.Pages.Components.TextInputPage
 
       live "/components/text-input-group", MoonWeb.Pages.Components.TextInputGroupPage
       live "/components/toast", MoonWeb.Pages.Components.ToastPage
diff --git a/priv/static/css/aposta10-dark.css b/priv/static/css/aposta10-dark.css
index 22d246d06..cb4b63244 100644
--- a/priv/static/css/aposta10-dark.css
+++ b/priv/static/css/aposta10-dark.css
@@ -20,6 +20,7 @@
   --base--line-height: 20px;
   --border-style: solid;
   --border-width: 1px;
+  --border-i-width: 2px;
   --border: 1px solid;
   --box-shadow: 0px 0px 1px 0px #00000066, 0px 8px 24px -6px #00000029;
   --breakpoint--small: 500px;
@@ -98,6 +99,15 @@
   --color--beerus-100: #4E535A;
   --color--bulma-100: #FFFFFF;
   --color--trunks-100: #C8D0D5;
+
+  --radius-i-xs: 0.25rem; /* 4px */
+  --radius-i-sm: 0.5rem; /* 8px */
+  --radius-i-md: 0.75rem; /* 12px */
+  --radius-s-xs: 0.25rem; /* 4px */
+  --radius-s-sm: 0.5rem; /* 8px */
+  --radius-s-md: 0.75rem; /* 12px */
+  --radius-s-lg: 1rem; /* 16px */
+
   space: var(--base--space);
   font-size: var(--base--font-size);
   line-height: var(--base--line-height);
diff --git a/priv/static/css/aposta10-light.css b/priv/static/css/aposta10-light.css
index 796a29687..2f750d035 100644
--- a/priv/static/css/aposta10-light.css
+++ b/priv/static/css/aposta10-light.css
@@ -20,6 +20,7 @@
   --base--line-height: 20px;
   --border-style: solid;
   --border-width: 1px;
+  --border-i-width: 2px;
   --border: 1px solid;
   --box-shadow: 0px 0px 1px 0px #00000066, 0px 8px 24px -6px #00000029;
   --breakpoint--small: 500px;
@@ -98,6 +99,15 @@
   --color--beerus-100: #DADFE2;
   --color--bulma-100: #010913;
   --color--trunks-100: #8697A2;
+
+  --radius-i-xs: 0.25rem; /* 4px */
+  --radius-i-sm: 0.5rem; /* 8px */
+  --radius-i-md: 0.75rem; /* 12px */
+  --radius-s-xs: 0.25rem; /* 4px */
+  --radius-s-sm: 0.5rem; /* 8px */
+  --radius-s-md: 0.75rem; /* 12px */
+  --radius-s-lg: 1rem; /* 16px */
+
   space: var(--base--space);
   font-size: var(--base--font-size);
   line-height: var(--base--line-height);
diff --git a/priv/static/themes/aposta10-dark.css b/priv/static/themes/aposta10-dark.css
index 83f356972..be58b7000 100644
--- a/priv/static/themes/aposta10-dark.css
+++ b/priv/static/themes/aposta10-dark.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 0px 1px 0px #00000066, 0px 8px 24px -6px #00000029;
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 255 255 255; /* #ffffff */
 --color--trunks-100: 200 208 213; /* #c8d0d5 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/aposta10-light.css b/priv/static/themes/aposta10-light.css
index e2214875e..2114e456a 100644
--- a/priv/static/themes/aposta10-light.css
+++ b/priv/static/themes/aposta10-light.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 0px 1px 0px #00000066, 0px 8px 24px -6px #00000029;
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 1 9 19; /* #010913 */
 --color--trunks-100: 134 151 162; /* #8697a2 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/bitcasino-dark.css b/priv/static/themes/bitcasino-dark.css
index eb14241ca..53690ee07 100644
--- a/priv/static/themes/bitcasino-dark.css
+++ b/priv/static/themes/bitcasino-dark.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 255 255 255; /* #ffffff */
 --color--trunks-100: 161 142 180; /* #a18eb4 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/bitcasino-light.css b/priv/static/themes/bitcasino-light.css
index 88b6b1d69..ae97065c8 100644
--- a/priv/static/themes/bitcasino-light.css
+++ b/priv/static/themes/bitcasino-light.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 15 22 31; /* #0f161f */
 --color--trunks-100: 134 151 162; /* #8697a2 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/bombay-club.css b/priv/static/themes/bombay-club.css
index bcf627ad3..fd5c58f3b 100644
--- a/priv/static/themes/bombay-club.css
+++ b/priv/static/themes/bombay-club.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 0px 1px 0px #00000066, 0px 8px 24px -6px #00000029;
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 255 255 255; /* #ffffff */
 --color--trunks-100: 154 133 101; /* #9a8565 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/btcxe.css b/priv/static/themes/btcxe.css
index 11e1f546f..0bc079259 100644
--- a/priv/static/themes/btcxe.css
+++ b/priv/static/themes/btcxe.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 0 0 0; /* #000000 */
 --color--trunks-100: 122 122 129; /* #7a7a81 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/hub88.css b/priv/static/themes/hub88.css
index 284c69cf1..844e61bd0 100644
--- a/priv/static/themes/hub88.css
+++ b/priv/static/themes/hub88.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 0px 1px 0px #00000066, 0px 8px 24px -6px #00000029;
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 1 9 19; /* #010913 */
 --color--trunks-100: 134 151 162; /* #8697a2 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/lab-dark.css b/priv/static/themes/lab-dark.css
index cfbff8344..7d7595c7f 100644
--- a/priv/static/themes/lab-dark.css
+++ b/priv/static/themes/lab-dark.css
@@ -24,8 +24,9 @@
   --base--font-size: 16;
   --base--line-height: 20px;
 
-  --border-style: undefined;
-  --border-width: undefined;
+  --border-style: Solid;
+  --border-width: 1px;
+  --border-i-width: 2px;
   --border: 1px solid;
 
   --breakpoint--small: 640px;
@@ -99,44 +100,44 @@
 
   
   --color--krillin-100: #F5A300;
-  --color--krillin-60: #undefined;
+  --color--krillin-60: #FFC95C;
   --color--krillin-10: #FDF5E2;
   --color--chi-chi-100: #FF1F39;
-  --color--chi-chi-60: #undefined;
+  --color--chi-chi-60: #FF5C6F;
   --color--chi-chi-10: #FFEBED;
   --color--roshi-100: #0BC15A;
-  --color--roshi-60: #undefined;
+  --color--roshi-60: #0DE76C;
   --color--roshi-10: #DAFDE9;
   --color--dodoria-100: #DC3618;
-  --color--dodoria-60: #undefined;
+  --color--dodoria-60: #ED705A;
   --color--dodoria-10: #FCE4E0;
   --color--cell-100: #28697B;
-  --color--cell-60: #undefined;
+  --color--cell-60: #3791A9;
   --color--cell-10: #E0F0F5;
-  --color--raditz-100: #undefined;
-  --color--raditz-60: #undefined;
+  --color--raditz-100: #91673B;
+  --color--raditz-60: #C49A6E;
   --color--raditz-10: #F3EBE2;
   --color--whis-100: #0D53D3;
-  --color--whis-60: #undefined;
+  --color--whis-60: #3F7EF3;
   --color--whis-10: #E4ECF9;
   --color--frieza-100: #5C33CF;
-  --color--frieza-60: #undefined;
-  --color--frieza-10: #F0ECFE;
+  --color--frieza-60: #8A67F4;
+  --color--frieza-10: #b6a3e9;
   --color--nappa-100: #A52755;
-  --color--nappa-60: #undefined;
+  --color--nappa-60: #D75B88;
   --color--nappa-10: #F9E7EE;
-  --color--piccolo-120: #undefined;
-  --color--piccolo-100: #4E46B4;
-  --color--piccolo-80: #undefined;
-  --color--hit-120: #undefined;
-  --color--hit-100: #0B0B0B;
-  --color--hit-80: #undefined;
-  --color--beerus-100: #1F1F1F;
-  --color--goku-120: #undefined;
-  --color--goku-100: #0B0B0B;
-  --color--gohan-120: #undefined;
-  --color--gohan-100: #1F1F1F;
+  --color--piccolo-120: #080917;
+  --color--piccolo-100: #080917;
+  --color--piccolo-80: #080917;
+  --color--hit-120: #353c44;
+  --color--hit-100: #4c5159;
+  --color--hit-80: #62676d;
+  --color--beerus-100: #31373f;
+  --color--goku-120: #4c5159;
+  --color--goku-100: #353c44;
+  --color--gohan-120: #62676d;
+  --color--gohan-100: #080917;
   --color--goten-100: #FFFFFF;
   --color--bulma-100: #FFFFFF;
-  --color--trunks-100: #999CA0;
+  --color--trunks-100: #8697a2;
 }
diff --git a/priv/static/themes/lab-light.css b/priv/static/themes/lab-light.css
index dccaf54a6..925d32f85 100644
--- a/priv/static/themes/lab-light.css
+++ b/priv/static/themes/lab-light.css
@@ -26,6 +26,7 @@
 
   --border-style: Solid;
   --border-width: 1px;
+  --border-i-width: 2px;
   --border: 1px solid;
 
   --breakpoint--small: 640px;
diff --git a/priv/static/themes/livecasino-dark.css b/priv/static/themes/livecasino-dark.css
index 3c5e7a696..a4d3cffef 100644
--- a/priv/static/themes/livecasino-dark.css
+++ b/priv/static/themes/livecasino-dark.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 255 255 255; /* #ffffff */
 --color--trunks-100: 134 151 162; /* #8697a2 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/livecasino-light.css b/priv/static/themes/livecasino-light.css
index e32120abf..037f1a87b 100644
--- a/priv/static/themes/livecasino-light.css
+++ b/priv/static/themes/livecasino-light.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 15 22 31; /* #0f161f */
 --color--trunks-100: 134 151 162; /* #8697a2 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/luckyslots.css b/priv/static/themes/luckyslots.css
index 96cace575..11fb24969 100644
--- a/priv/static/themes/luckyslots.css
+++ b/priv/static/themes/luckyslots.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 0px 1px 0px #00000066, 0px 8px 24px -6px #00000029;
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 255 255 255; /* #ffffff */
 --color--trunks-100: 219 226 245; /* #dbe2f5 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/missions-tool-dark.css b/priv/static/themes/missions-tool-dark.css
index da94e4915..3eb42ff81 100644
--- a/priv/static/themes/missions-tool-dark.css
+++ b/priv/static/themes/missions-tool-dark.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 1 9 19; /* #010913 */
 --color--trunks-100: 134 151 162; /* #8697a2 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/missions-tool-light.css b/priv/static/themes/missions-tool-light.css
index 079f78515..0e9fddcb2 100644
--- a/priv/static/themes/missions-tool-light.css
+++ b/priv/static/themes/missions-tool-light.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 1 9 19; /* #010913 */
 --color--trunks-100: 134 151 162; /* #8697a2 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/moneyball-dark.css b/priv/static/themes/moneyball-dark.css
index 904cdd0b9..ecc9333d0 100644
--- a/priv/static/themes/moneyball-dark.css
+++ b/priv/static/themes/moneyball-dark.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 0 0 0; /* #000000 */
 --color--trunks-100: 134 151 162; /* #8697a2 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/moneyball-light.css b/priv/static/themes/moneyball-light.css
index 4407016ac..b19cc1bbc 100644
--- a/priv/static/themes/moneyball-light.css
+++ b/priv/static/themes/moneyball-light.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 0 0 0; /* #000000 */
 --color--trunks-100: 134 151 162; /* #8697a2 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/moon-design-dark.css b/priv/static/themes/moon-design-dark.css
index ddd5fd8fa..12867b1cc 100644
--- a/priv/static/themes/moon-design-dark.css
+++ b/priv/static/themes/moon-design-dark.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
diff --git a/priv/static/themes/moon-design-light.css b/priv/static/themes/moon-design-light.css
index b76164f04..1f5b27378 100644
--- a/priv/static/themes/moon-design-light.css
+++ b/priv/static/themes/moon-design-light.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
diff --git a/priv/static/themes/slots-dark.css b/priv/static/themes/slots-dark.css
index c0b4dcb10..ca69013c8 100644
--- a/priv/static/themes/slots-dark.css
+++ b/priv/static/themes/slots-dark.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 0px 1px 0px #00000066, 0px 8px 24px -6px #00000029;
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 255 255 255; /* #ffffff */
 --color--trunks-100: 158 158 158; /* #9e9e9e */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/slots-light.css b/priv/static/themes/slots-light.css
index ea57e29f5..5f7456b73 100644
--- a/priv/static/themes/slots-light.css
+++ b/priv/static/themes/slots-light.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 0px 1px 0px #00000066, 0px 8px 24px -6px #00000029;
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 3 6 12; /* #03060c */
 --color--trunks-100: 166 166 166; /* #a6a6a6 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/sportsbet-dark.css b/priv/static/themes/sportsbet-dark.css
index 694f17273..b067ad586 100644
--- a/priv/static/themes/sportsbet-dark.css
+++ b/priv/static/themes/sportsbet-dark.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 255 255 255; /* #ffffff */
 --color--trunks-100: 134 151 162; /* #8697a2 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/priv/static/themes/sportsbet-light.css b/priv/static/themes/sportsbet-light.css
index 7c6995029..648acc400 100644
--- a/priv/static/themes/sportsbet-light.css
+++ b/priv/static/themes/sportsbet-light.css
@@ -24,6 +24,7 @@
 
 --border-style: solid;
 --border-width: 1px;
+--border-i-width: 2px;
 --border: 1px solid;
 --box-shadow: 0px 2.4px 7.2px rgba(0, 0, 0, 0.18), 0px 12.8px 28.8px rgba(0, 0, 0, 0.22);
 
@@ -115,6 +116,14 @@
 --color--bulma-100: 26 33 42; /* #1a212a */
 --color--trunks-100: 96 118 128; /* #607680 */
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);
diff --git a/run-formatters.sh b/run-formatters.sh
old mode 100644
new mode 100755
diff --git a/run-install.sh b/run-install.sh
old mode 100644
new mode 100755
diff --git a/run-locally-dev.sh b/run-locally-dev.sh
old mode 100644
new mode 100755
diff --git a/run-locally-prod.sh b/run-locally-prod.sh
old mode 100644
new mode 100755
diff --git a/scripts/typescript/theme-importer.ts b/scripts/typescript/theme-importer.ts
index 7dce6db69..e188d77cf 100644
--- a/scripts/typescript/theme-importer.ts
+++ b/scripts/typescript/theme-importer.ts
@@ -121,6 +121,7 @@ const writeTheme = (jsTheme: any, exThemePath: string) => {
 
 --border-style: ${s(exObj.border_style)};
 --border-width: ${s(exObj.border_width)}px;
+--border-i-width: ${s(exObj.border_width_interactive)}px;
 --border: ${s(exObj.border)};
 --box-shadow: ${s(exObj.box_shadow)};
 
@@ -218,6 +219,14 @@ ${Object.keys(exObj.color)
   )
   .join("\n")}
 
+--radius-i-xs: 0.25rem; /* 4px */
+--radius-i-sm: 0.5rem; /* 8px */
+--radius-i-md: 0.75rem; /* 12px */
+--radius-s-xs: 0.25rem; /* 4px */
+--radius-s-sm: 0.5rem; /* 8px */
+--radius-s-md: 0.75rem; /* 12px */
+--radius-s-lg: 1rem; /* 16px */
+
 space: var(--base--space);
 font-size: var(--base--font-size);
 line-height: var(--base--line-height);