diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs
index 32c43aff2..1dfe8715c 100644
--- a/frontend/src/app/main/ui/components/editable_select.cljs
+++ b/frontend/src/app/main/ui/components/editable_select.cljs
@@ -10,7 +10,7 @@
    [app.common.math :as mth]
    [app.common.uuid :as uuid]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
@@ -143,11 +143,11 @@
     [:div.editable-select {:class class
                            :ref on-node-load}
      (if (= type "number")
-       [:> numeric-input {:value (or (some-> @state :current-value value->label) "")
-                          :on-change set-value
-                          :on-focus handle-focus
-                          :on-blur handle-blur
-                          :placeholder placeholder}]
+       [:> numeric-input* {:value (or (some-> @state :current-value value->label) "")
+                           :on-change set-value
+                           :on-focus handle-focus
+                           :on-blur handle-blur
+                           :placeholder placeholder}]
        [:input.input-text {:value (or (some-> @state :current-value value->label) "")
                            :on-change handle-change-input
                            :on-key-down handle-key-down
diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs
index e9acffbde..e501a85f7 100644
--- a/frontend/src/app/main/ui/components/numeric_input.cljs
+++ b/frontend/src/app/main/ui/components/numeric_input.cljs
@@ -20,7 +20,7 @@
    [goog.events :as events]
    [rumext.v2 :as mf]))
 
-(mf/defc numeric-input
+(mf/defc numeric-input*
   {::mf/wrap-props false
    ::mf/forward-ref true}
   [props external-ref]
diff --git a/frontend/src/app/main/ui/workspace/nudge.cljs b/frontend/src/app/main/ui/workspace/nudge.cljs
index 1b466ba4b..0d6e079e1 100644
--- a/frontend/src/app/main/ui/workspace/nudge.cljs
+++ b/frontend/src/app/main/ui/workspace/nudge.cljs
@@ -10,7 +10,7 @@
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -49,12 +49,12 @@
        [:div.input-wrapper
         [:span
          [:p.nudge-subtitle (tr "modals.small-nudge")]
-         [:> numeric-input {:min 0.01
-                            :value (:small nudge)
-                            :on-change update-small}]]]
+         [:> numeric-input* {:min 0.01
+                             :value (:small nudge)
+                             :on-change update-small}]]]
        [:div.input-wrapper
         [:span
          [:p.nudge-subtitle (tr "modals.big-nudge")]
-         [:> numeric-input {:min 0.01
-                            :value (:big nudge)
-                            :on-change update-big}]]]]]]))
+         [:> numeric-input* {:min 0.01
+                             :value (:big nudge)
+                             :on-change update-big}]]]]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
index 1ee194d91..654244c60 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
@@ -11,7 +11,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.editable-select :refer [editable-select]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
@@ -138,10 +138,10 @@
 
       (if (= type :square)
         [:div.input-element.pixels {:title (tr "workspace.options.size")}
-         [:> numeric-input {:min 0.01
-                            :value (or (:size params) "")
-                            :no-validate true
-                            :on-change (handle-change :params :size)}]]
+         [:> numeric-input* {:min 0.01
+                             :value (or (:size params) "")
+                             :no-validate true
+                             :on-change (handle-change :params :size)}]]
 
         [:& editable-select {:value (:size params)
                              :type  "number"
@@ -202,7 +202,7 @@
           :label (if (= :row type)
                    (tr "workspace.options.grid.params.height")
                    (tr "workspace.options.grid.params.width"))}
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "Auto"
            :value (or (:item-length params) "")
            :nillable true
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
index d99ee185b..c2f03f1d7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
@@ -10,7 +10,7 @@
    [app.common.data.macros :as dm]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.layout-container :as lyc]
    [app.util.dom :as dom]
@@ -125,7 +125,7 @@
           [:div.grid-columns-auto
            [:span.icon i/layout-rows]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-click #(dom/select-target %)
               :on-change (partial on-change :all :column)
@@ -133,7 +133,7 @@
           [:div.grid-rows-auto
            [:span.icon i/layout-columns]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-click #(dom/select-target %)
               :on-change (partial on-change :all :row)
@@ -156,12 +156,12 @@
           [:div.grid-columns-auto
            [:span.icon i/layout-rows]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :start :column)
               :value column}]
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :end :column)
@@ -169,12 +169,12 @@
           [:div.grid-rows-auto
            [:span.icon i/layout-columns]
            [:div.input-wrapper
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :start :row)
               :value row}]
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-pointer-down #(dom/select-target %)
               :on-change (partial on-change :end :row)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
index a672a1f1b..74ad4399a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
@@ -17,7 +17,7 @@
    [app.main.data.workspace.interactions :as dwi]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -29,7 +29,7 @@
 (defn- event-type-names
   []
   {:click (tr "workspace.options.interaction-on-click")
-   ; TODO: need more UX research
+                                        ; TODO: need more UX research
    ;; :mouse-over (tr "workspace.options.interaction-while-hovering")
    ;; :mouse-press (tr "workspace.options.interaction-while-pressing")
    :mouse-enter (tr "workspace.options.interaction-mouse-enter")
@@ -57,7 +57,7 @@
     :open-overlay (tr "workspace.options.interaction-open-overlay-dest"
                       (get destination :name (tr "workspace.options.interaction-none")))
     :toggle-overlay (tr "workspace.options.interaction-toggle-overlay-dest"
-                      (get destination :name (tr "workspace.options.interaction-none")))
+                        (get destination :name (tr "workspace.options.interaction-none")))
     :close-overlay (tr "workspace.options.interaction-close-overlay-dest"
                        (get destination :name (tr "workspace.options.interaction-self")))
     :prev-screen (tr "workspace.options.interaction-prev-screen")
@@ -78,8 +78,8 @@
 (defn- animation-type-names
   [interaction]
   (cond->
-    {:dissolve (tr "workspace.options.interaction-animation-dissolve")
-     :slide (tr "workspace.options.interaction-animation-slide")}
+      {:dissolve (tr "workspace.options.interaction-animation-dissolve")
+       :slide (tr "workspace.options.interaction-animation-slide")}
 
     (ctsi/allow-push? (:action-type interaction))
     (assoc :push (tr "workspace.options.interaction-animation-push"))))
@@ -121,22 +121,22 @@
                       (when (kbd/esc? event) (cancel-edit)))]
 
     (mf/use-effect
-      (fn []
-        #(when editing?
-           (cancel-edit))))
+     (fn []
+       #(when editing?
+          (cancel-edit))))
 
     (mf/use-effect
-      (mf/deps flow-for-rename)
-      #(when (and (= flow-for-rename (:id flow))
-                  (not @editing?))
-         (start-edit)))
+     (mf/deps flow-for-rename)
+     #(when (and (= flow-for-rename (:id flow))
+                 (not @editing?))
+        (start-edit)))
 
     (mf/use-effect
-      (mf/deps @editing?)
-      #(when @editing?
-         (let [name-input (mf/ref-val name-ref)]
-           (dom/select-text! name-input))
-         nil))
+     (mf/deps @editing?)
+     #(when @editing?
+        (let [name-input (mf/ref-val name-ref)]
+          (dom/select-text! name-input))
+        nil))
 
     [:div.flow-element
      [:div.flow-button {:on-click #(st/emit! (dw/select-shape (:starting-frame flow)))}
@@ -301,9 +301,9 @@
 
     [:*
      [:div.element-set-options-group {:class (dom/classnames
-                                               :open @extended-open?)}
+                                              :open @extended-open?)}
 
-      ; Summary
+                                        ; Summary
       [:div.element-set-actions-button {:on-click #(swap! extended-open? not)}
        i/actions]
       [:div.interactions-summary {:on-click #(swap! extended-open? not)}
@@ -315,7 +315,7 @@
       (when @extended-open?
         [:div.element-set-content
 
-         ; Trigger select
+                                        ; Trigger select
          [:div.interactions-element.separator
           [:span.element-set-subtitle.wide (tr "workspace.options.interaction-trigger")]
           [:select.input-select
@@ -327,18 +327,18 @@
                [:option {:key (dm/str value)
                          :value (dm/str value)} name]))]]
 
-         ; Delay
+                                        ; Delay
          (when (ctsi/has-delay interaction)
            [:div.interactions-element
             [:span.element-set-subtitle.wide (tr "workspace.options.interaction-delay")]
             [:div.input-element {:title (tr "workspace.options.interaction-ms")}
-             [:> numeric-input {:ref ext-delay-ref
-                                :on-change change-delay
-                                :value (:delay interaction)
-                                :title (tr "workspace.options.interaction-ms")}]
+             [:> numeric-input* {:ref ext-delay-ref
+                                 :on-change change-delay
+                                 :value (:delay interaction)
+                                 :title (tr "workspace.options.interaction-ms")}]
              [:span.after (tr "workspace.options.interaction-ms")]]])
 
-         ; Action select
+                                        ; Action select
          [:div.interactions-element.separator
           [:span.element-set-subtitle.wide (tr "workspace.options.interaction-action")]
           [:select.input-select
@@ -348,7 +348,7 @@
              [:option {:key (dm/str "action-" value)
                        :value (str value)} name])]]
 
-         ; Destination
+                                        ; Destination
          (when (ctsi/has-destination interaction)
            [:div.interactions-element
             [:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")]
@@ -364,7 +364,7 @@
                  [:option {:key (dm/str "destination-" (:id frame))
                            :value (str (:id frame))} (:name frame)]))]])
 
-         ; Preserve scroll
+                                        ; Preserve scroll
          (when (ctsi/has-preserve-scroll interaction)
            [:div.interactions-element
             [:div.input-checkbox
@@ -375,7 +375,7 @@
              [:label {:for (str "preserve-" index)}
               (tr "workspace.options.interaction-preserve-scroll")]]])
 
-         ; URL
+                                        ; URL
          (when (ctsi/has-url interaction)
            [:div.interactions-element
             [:span.element-set-subtitle.wide (tr "workspace.options.interaction-url")]
@@ -386,7 +386,7 @@
 
          (when (ctsi/has-overlay-opts interaction)
            [:*
-            ; Overlay position relative-to (select)
+                                        ; Overlay position relative-to (select)
             [:div.interactions-element
              [:span.element-set-subtitle.wide (tr "workspace.options.interaction-relative-to")]
              [:select.input-select
@@ -401,7 +401,7 @@
               [:option {:key (dm/str "position-relative-to-" (:id shape))
                         :value (str (:id shape))} (:name shape) " (" (tr "workspace.options.interaction-self") ")"]]]
 
-            ; Overlay position (select)
+                                        ; Overlay position (select)
             [:div.interactions-element
              [:span.element-set-subtitle.wide (tr "workspace.options.interaction-position")]
              [:select.input-select
@@ -410,7 +410,7 @@
               (for [[value name] (overlay-pos-type-names)]
                 [:option {:value (str value)} name])]]
 
-            ; Overlay position (buttons)
+                                        ; Overlay position (buttons)
             [:div.interactions-element.interactions-pos-buttons
              [:div.element-set-actions-button
               {:class (dom/classnames :active (= overlay-pos-type :center))
@@ -441,7 +441,7 @@
                :on-click #(toggle-overlay-pos-type :bottom-center)}
               i/position-bottom-center]]
 
-            ; Overlay click outside
+                                        ; Overlay click outside
             [:div.interactions-element
              [:div.input-checkbox
               [:input {:type "checkbox"
@@ -451,7 +451,7 @@
               [:label {:for (str "close-" index)}
                (tr "workspace.options.interaction-close-outside")]]]
 
-            ; Overlay background
+                                        ; Overlay background
             [:div.interactions-element
              [:div.input-checkbox
               [:input {:type "checkbox"
@@ -463,94 +463,94 @@
 
          (when (ctsi/has-animation? interaction)
            [:*
-             ; Animation select
-             [:div.interactions-element.separator
-              [:span.element-set-subtitle.wide (tr "workspace.options.interaction-animation")]
-              [:select.input-select
-               {:value (str (-> interaction :animation :animation-type))
-                :on-change change-animation-type}
-               [:option {:value ""} (tr "workspace.options.interaction-animation-none")]
-               (for [[value name] (animation-type-names interaction)]
-                 [:option {:value (str value)} name])]]
+                                        ; Animation select
+            [:div.interactions-element.separator
+             [:span.element-set-subtitle.wide (tr "workspace.options.interaction-animation")]
+             [:select.input-select
+              {:value (str (-> interaction :animation :animation-type))
+               :on-change change-animation-type}
+              [:option {:value ""} (tr "workspace.options.interaction-animation-none")]
+              (for [[value name] (animation-type-names interaction)]
+                [:option {:value (str value)} name])]]
 
-             ; Direction
-             (when (ctsi/has-way? interaction)
-               [:div.interactions-element.interactions-way-buttons
-                [:div.input-radio
-                 [:input {:type "radio"
-                          :id "way-in"
-                          :checked (= :in way)
-                          :name "animation-way"
-                          :value ":in"
-                          :on-change change-way}]
-                 [:label {:for "way-in"} (tr "workspace.options.interaction-in")]]
-                [:div.input-radio
-                 [:input {:type "radio"
-                          :id "way-out"
-                          :checked (= :out way)
-                          :name "animation-way"
-                          :value ":out"
-                          :on-change change-way}]
-                 [:label {:for "way-out"} (tr "workspace.options.interaction-out")]]])
+                                        ; Direction
+            (when (ctsi/has-way? interaction)
+              [:div.interactions-element.interactions-way-buttons
+               [:div.input-radio
+                [:input {:type "radio"
+                         :id "way-in"
+                         :checked (= :in way)
+                         :name "animation-way"
+                         :value ":in"
+                         :on-change change-way}]
+                [:label {:for "way-in"} (tr "workspace.options.interaction-in")]]
+               [:div.input-radio
+                [:input {:type "radio"
+                         :id "way-out"
+                         :checked (= :out way)
+                         :name "animation-way"
+                         :value ":out"
+                         :on-change change-way}]
+                [:label {:for "way-out"} (tr "workspace.options.interaction-out")]]])
 
-             ; Direction
-             (when (ctsi/has-direction? interaction)
-               [:div.interactions-element.interactions-direction-buttons
-                [:div.element-set-actions-button
-                 {:class (dom/classnames :active (= direction :right))
-                   :on-click #(change-direction :right)}
-                  i/animate-right]
-                [:div.element-set-actions-button
-                 {:class (dom/classnames :active (= direction :down))
-                   :on-click #(change-direction :down)}
-                  i/animate-down]
-                [:div.element-set-actions-button
-                 {:class (dom/classnames :active (= direction :left))
-                   :on-click #(change-direction :left)}
-                  i/animate-left]
-                [:div.element-set-actions-button
-                 {:class (dom/classnames :active (= direction :up))
-                   :on-click #(change-direction :up)}
-                  i/animate-up]])
+                                        ; Direction
+            (when (ctsi/has-direction? interaction)
+              [:div.interactions-element.interactions-direction-buttons
+               [:div.element-set-actions-button
+                {:class (dom/classnames :active (= direction :right))
+                 :on-click #(change-direction :right)}
+                i/animate-right]
+               [:div.element-set-actions-button
+                {:class (dom/classnames :active (= direction :down))
+                 :on-click #(change-direction :down)}
+                i/animate-down]
+               [:div.element-set-actions-button
+                {:class (dom/classnames :active (= direction :left))
+                 :on-click #(change-direction :left)}
+                i/animate-left]
+               [:div.element-set-actions-button
+                {:class (dom/classnames :active (= direction :up))
+                 :on-click #(change-direction :up)}
+                i/animate-up]])
 
-             ; Duration
-             (when (ctsi/has-duration? interaction)
-               [:div.interactions-element
-                [:span.element-set-subtitle.wide (tr "workspace.options.interaction-duration")]
-                [:div.input-element {:title (tr "workspace.options.interaction-ms")}
-                 [:> numeric-input {:ref ext-duration-ref
+                                        ; Duration
+            (when (ctsi/has-duration? interaction)
+              [:div.interactions-element
+               [:span.element-set-subtitle.wide (tr "workspace.options.interaction-duration")]
+               [:div.input-element {:title (tr "workspace.options.interaction-ms")}
+                [:> numeric-input* {:ref ext-duration-ref
                                     :on-change change-duration
                                     :value (-> interaction :animation :duration)
                                     :title (tr "workspace.options.interaction-ms")}]
-                 [:span.after (tr "workspace.options.interaction-ms")]]])
+                [:span.after (tr "workspace.options.interaction-ms")]]])
 
-             ; Easing
-             (when (ctsi/has-easing? interaction)
-               [:div.interactions-element
-                [:span.element-set-subtitle.wide (tr "workspace.options.interaction-easing")]
-                [:select.input-select
-                 {:value (str (-> interaction :animation :easing))
-                  :on-change change-easing}
-                 (for [[value name] (easing-names)]
-                   [:option {:value (str value)} name])]
-                [:div.interactions-easing-icon
-                 (case (-> interaction :animation :easing)
-                   :linear i/easing-linear
-                   :ease i/easing-ease
-                   :ease-in i/easing-ease-in
-                   :ease-out i/easing-ease-out
-                   :ease-in-out i/easing-ease-in-out)]])
+                                        ; Easing
+            (when (ctsi/has-easing? interaction)
+              [:div.interactions-element
+               [:span.element-set-subtitle.wide (tr "workspace.options.interaction-easing")]
+               [:select.input-select
+                {:value (str (-> interaction :animation :easing))
+                 :on-change change-easing}
+                (for [[value name] (easing-names)]
+                  [:option {:value (str value)} name])]
+               [:div.interactions-easing-icon
+                (case (-> interaction :animation :easing)
+                  :linear i/easing-linear
+                  :ease i/easing-ease
+                  :ease-in i/easing-ease-in
+                  :ease-out i/easing-ease-out
+                  :ease-in-out i/easing-ease-in-out)]])
 
-             ; Offset effect
-             (when (ctsi/has-offset-effect? interaction)
-               [:div.interactions-element
-                [:div.input-checkbox
-                 [:input {:type "checkbox"
-                          :id (str "offset-effect-" index)
-                          :checked (-> interaction :animation :offset-effect)
-                          :on-change change-offset-effect}]
-                 [:label {:for (str "offset-effect-" index)}
-                  (tr "workspace.options.interaction-offset-effect")]]])])])]]))
+                                        ; Offset effect
+            (when (ctsi/has-offset-effect? interaction)
+              [:div.interactions-element
+               [:div.input-checkbox
+                [:input {:type "checkbox"
+                         :id (str "offset-effect-" index)
+                         :checked (-> interaction :animation :offset-effect)
+                         :on-change change-offset-effect}]
+                [:label {:for (str "offset-effect-" index)}
+                 (tr "workspace.options.interaction-offset-effect")]]])])])]]))
 
 (mf/defc interactions-menu
   [{:keys [shape] :as props}]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
index f8c8bb32d..90234e91c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
@@ -11,7 +11,7 @@
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.changes :as dch]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.icons :as i]
    [app.util.i18n :as i18n :refer [tr]]
@@ -162,7 +162,7 @@
 
        [:div.input-element {:title (tr "workspace.options.opacity")
                             :class "percentail"}
-        [:> numeric-input
+        [:> numeric-input*
          {:value (opacity->string current-opacity)
           :placeholder (tr "settings.multiple")
           :on-change handle-opacity-change
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
index 2d030cdff..c47566371 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
@@ -15,7 +15,7 @@
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -278,7 +278,7 @@
         [:div.padding-item.tooltip.tooltip-bottom-left
          {:alt "Vertical padding"}
          [:span.icon.rotated i/auto-padding-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-change (partial on-change :simple :p1)
            :on-focus #(do
@@ -289,7 +289,7 @@
         [:div.padding-item.tooltip.tooltip-bottom-left
          {:alt "Horizontal padding"}
          [:span.icon i/auto-padding-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-change (partial on-change :simple :p2)
            :on-focus #(do (dom/select-target %)
@@ -308,7 +308,7 @@
                    :p3 "Bottom"
                    :p4 "Left")}
            [:div.input-element.auto
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-change (partial on-change :multiple num)
               :on-focus #(do (dom/select-target %)
@@ -342,35 +342,35 @@
        {:alt "Column gap"}
        [:span.icon
         i/auto-gap]
-       [:> numeric-input {:no-validate true
-                          :placeholder "--"
-                          :on-focus (fn [event]
-                                      (select-gap :column-gap)
-                                      (reset! gap-selected? :column-gap)
-                                      (dom/select-target event))
-                          :on-change (partial set-gap (= :nowrap wrap-type) :column-gap)
-                          :on-blur (fn [_]
-                                     (select-gap nil)
-                                     (reset! gap-selected? :none))
-                          :value (:column-gap gap-value)
-                          :disabled (and (= :nowrap wrap-type) is-col?)}]]
+       [:> numeric-input* {:no-validate true
+                           :placeholder "--"
+                           :on-focus (fn [event]
+                                       (select-gap :column-gap)
+                                       (reset! gap-selected? :column-gap)
+                                       (dom/select-target event))
+                           :on-change (partial set-gap (= :nowrap wrap-type) :column-gap)
+                           :on-blur (fn [_]
+                                      (select-gap nil)
+                                      (reset! gap-selected? :none))
+                           :value (:column-gap gap-value)
+                           :disabled (and (= :nowrap wrap-type) is-col?)}]]
 
       [:div.gap-row.tooltip.tooltip-bottom-left
        {:alt "Row gap"}
        [:span.icon.rotated
         i/auto-gap]
-       [:> numeric-input {:no-validate true
-                          :placeholder "--"
-                          :on-focus (fn [event]
-                                      (select-gap :row-gap)
-                                      (reset! gap-selected? :row-gap)
-                                      (dom/select-target event))
-                          :on-change (partial set-gap (= :nowrap wrap-type) :row-gap)
-                          :on-blur (fn [_]
-                                     (select-gap nil)
-                                     (reset! gap-selected? :none))
-                          :value (:row-gap gap-value)
-                          :disabled (and (= :nowrap wrap-type) (not is-col?))}]]]]))
+       [:> numeric-input* {:no-validate true
+                           :placeholder "--"
+                           :on-focus (fn [event]
+                                       (select-gap :row-gap)
+                                       (reset! gap-selected? :row-gap)
+                                       (dom/select-target event))
+                           :on-change (partial set-gap (= :nowrap wrap-type) :row-gap)
+                           :on-blur (fn [_]
+                                      (select-gap nil)
+                                      (reset! gap-selected? :none))
+                           :value (:row-gap gap-value)
+                           :disabled (and (= :nowrap wrap-type) (not is-col?))}]]]]))
 
 (mf/defc grid-edit-mode
   [{:keys [id] :as props}]
@@ -465,11 +465,11 @@
               i/layout-columns)]
 
            [:div.grid-column-value
-            [:> numeric-input {:no-validate true
-                               :value (:value column)
-                               :on-change #(set-column-value type index %)
-                               :placeholder "--"
-                               :disabled (= :auto (:type column))}]]
+            [:> numeric-input* {:no-validate true
+                                :value (:value column)
+                                :on-change #(set-column-value type index %)
+                                :placeholder "--"
+                                :disabled (= :auto (:type column))}]]
            [:div.grid-column-unit
             [:& select
              {:class "grid-column-unit-selector"
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index b93240228..332addd63 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -13,7 +13,7 @@
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
    [app.util.dom :as dom]
@@ -68,7 +68,7 @@
         [:div.margin-item.tooltip.tooltip-bottom-left
          {:alt "Vertical margin"}
          [:span.icon i/auto-margin-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-focus (fn [event]
                        (select-margins true false true false)
@@ -80,7 +80,7 @@
         [:div.margin-item.tooltip.tooltip-bottom-left
          {:alt "Horizontal margin"}
          [:span.icon.rotated i/auto-margin-both-sides]
-         [:> numeric-input
+         [:> numeric-input*
           {:placeholder "--"
            :on-focus (fn [event]
                        (select-margins false true false true)
@@ -100,7 +100,7 @@
                    :m3 "Bottom"
                    :m4 "Left")}
            [:div.input-element.auto
-            [:> numeric-input
+            [:> numeric-input*
              {:placeholder "--"
               :on-focus (fn [event]
                           (select-margin num)
@@ -269,7 +269,7 @@
 
           [:div.tooltip.tooltip-bottom-left.z-index {:alt "z-index"}
            i/layers
-           [:> numeric-input
+           [:> numeric-input*
             {:placeholder "--"
              :on-focus #(dom/select-target %)
              :on-change #(on-change-z-index %)
@@ -317,7 +317,7 @@
                                     "minW" (= item :layout-item-min-w))}
             [:div.input-element
              {:alt   (tr (dm/str "workspace.options.layout-item." (d/name item)))}
-             [:> numeric-input
+             [:> numeric-input*
               {:no-validate true
                :min 0
                :data-wrap true
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
index 0a1703388..3bf1fee2b 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@@ -18,7 +18,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -316,20 +316,20 @@
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.size")]
           [:div.input-element.width {:title (tr "workspace.options.width")}
-           [:> numeric-input {:min 0.01
-                              :no-validate true
-                              :placeholder "--"
-                              :on-change on-width-change
-                              :disabled disabled-width-sizing?
-                              :value (:width values)}]]
+           [:> numeric-input* {:min 0.01
+                               :no-validate true
+                               :placeholder "--"
+                               :on-change on-width-change
+                               :disabled disabled-width-sizing?
+                               :value (:width values)}]]
 
           [:div.input-element.height {:title (tr "workspace.options.height")}
-           [:> numeric-input {:min 0.01
-                              :no-validate true
-                              :placeholder "--"
-                              :on-change on-height-change
-                              :disabled disabled-height-sizing?
-                              :value (:height values)}]]
+           [:> numeric-input* {:min 0.01
+                               :no-validate true
+                               :placeholder "--"
+                               :on-change on-height-change
+                               :disabled disabled-height-sizing?
+                               :value (:height values)}]]
 
           [:div.lock-size {:class (dom/classnames
                                    :selected (true? proportion-lock)
@@ -344,24 +344,24 @@
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.position")]
           [:div.input-element.Xaxis {:title (tr "workspace.options.x")}
-           [:> numeric-input {:no-validate true
-                              :placeholder "--"
-                              :on-change on-pos-x-change
-                              :disabled disabled-position-x?
-                              :value (:x values)}]]
+           [:> numeric-input* {:no-validate true
+                               :placeholder "--"
+                               :on-change on-pos-x-change
+                               :disabled disabled-position-x?
+                               :value (:x values)}]]
           [:div.input-element.Yaxis {:title (tr "workspace.options.y")}
-           [:> numeric-input {:no-validate true
-                              :placeholder "--"
-                              :disabled disabled-position-y?
-                              :on-change on-pos-y-change
-                              :value (:y values)}]]])
+           [:> numeric-input* {:no-validate true
+                               :placeholder "--"
+                               :disabled disabled-position-y?
+                               :on-change on-pos-y-change
+                               :value (:y values)}]]])
 
        ;; ROTATION
        (when (options :rotation)
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.rotation")]
           [:div.input-element.degrees {:title (tr "workspace.options.rotation")}
-           [:> numeric-input
+           [:> numeric-input*
             {:no-validate true
              :min 0
              :max 359
@@ -390,7 +390,7 @@
           (cond
             (= radius-mode :radius-1)
             [:div.input-element.mini {:title (tr "workspace.options.radius")}
-             [:> numeric-input
+             [:> numeric-input*
               {:placeholder "--"
                :ref radius-input-ref
                :min 0
@@ -409,28 +409,28 @@
             (= radius-mode :radius-4)
             [:*
              [:div.input-element.mini {:title (tr "workspace.options.radius-top-left")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r1-change
                 :value (:r1 values)}]]
 
              [:div.input-element.mini {:title (tr "workspace.options.radius-top-right")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r2-change
                 :value (:r2 values)}]]
 
              [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-right")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r3-change
                 :value (:r3 values)}]]
 
              [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-left")}
-              [:> numeric-input
+              [:> numeric-input*
                {:placeholder "--"
                 :min 0
                 :on-change on-radius-r4-change
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
index 3d4e635fb..5980469cd 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
@@ -15,7 +15,7 @@
    [app.main.data.workspace.colors :as dc]
    [app.main.data.workspace.undo :as dwu]
    [app.main.store :as st]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
@@ -127,11 +127,11 @@
 
         on-toggle-open-shadow
         (fn []
-            (swap! open-state-ref update shadow-id not))]
+          (swap! open-state-ref update shadow-id not))]
     [:*
      [:div.shadow-option {:class (dom/classnames
-                                   :dnd-over-top (= (:over dprops) :top)
-                                   :dnd-over-bot (= (:over dprops) :bot))
+                                  :dnd-over-top (= (:over dprops) :top)
+                                  :dnd-over-bot (= (:over dprops) :bot))
                           :ref dref}
       [:div.shadow-option-main {:style {:display (when open-shadow "none")}}
        [:div.element-set-actions-button
@@ -178,41 +178,41 @@
 
        [:div.row-grid-2
         [:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")}
-         [:> numeric-input {:ref adv-offset-x-ref
-                            :no-validate true
-                            :placeholder "--"
-                            :on-change (update-attr index :offset-x basic-offset-x-ref)
-                            :on-blur on-blur
-                            :value (:offset-x value)}]
+         [:> numeric-input* {:ref adv-offset-x-ref
+                             :no-validate true
+                             :placeholder "--"
+                             :on-change (update-attr index :offset-x basic-offset-x-ref)
+                             :on-blur on-blur
+                             :value (:offset-x value)}]
          [:span.after (tr "workspace.options.shadow-options.offsetx")]]
 
         [:div.input-element {:title (tr "workspace.options.shadow-options.offsety")}
-         [:> numeric-input {:ref adv-offset-y-ref
-                            :no-validate true
-                            :placeholder "--"
-                            :on-change (update-attr index :offset-y basic-offset-y-ref)
-                            :on-blur on-blur
-                            :value (:offset-y value)}]
+         [:> numeric-input* {:ref adv-offset-y-ref
+                             :no-validate true
+                             :placeholder "--"
+                             :on-change (update-attr index :offset-y basic-offset-y-ref)
+                             :on-blur on-blur
+                             :value (:offset-y value)}]
          [:span.after (tr "workspace.options.shadow-options.offsety")]]]
 
        [:div.row-grid-2
         [:div.input-element {:title (tr "workspace.options.shadow-options.blur")}
-         [:> numeric-input {:ref adv-blur-ref
-                            :no-validate true
-                            :placeholder "--"
-                            :on-change (update-attr index :blur basic-blur-ref)
-                            :on-blur on-blur
-                            :min 0
-                            :value (:blur value)}]
+         [:> numeric-input* {:ref adv-blur-ref
+                             :no-validate true
+                             :placeholder "--"
+                             :on-change (update-attr index :blur basic-blur-ref)
+                             :on-blur on-blur
+                             :min 0
+                             :value (:blur value)}]
          [:span.after (tr "workspace.options.shadow-options.blur")]]
 
         [:div.input-element {:title (tr "workspace.options.shadow-options.spread")}
-         [:> numeric-input {:ref adv-spread-ref
-                            :no-validate true
-                            :placeholder "--"
-                            :on-change (update-attr index :spread)
-                            :on-blur on-blur
-                            :value (:spread value)}]
+         [:> numeric-input* {:ref adv-spread-ref
+                             :no-validate true
+                             :placeholder "--"
+                             :on-change (update-attr index :spread)
+                             :on-blur on-blur
+                             :value (:spread value)}]
          [:span.after (tr "workspace.options.shadow-options.spread")]]]
 
        [:div.color-row-wrap
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
index 1780103db..b1c4ae748 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
@@ -19,7 +19,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.editable-select :refer [editable-select]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [nilable-option radio-buttons]]
    [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.components.select :refer [select]]
@@ -456,7 +456,7 @@
                 :alt (tr "workspace.options.text-options.line-height")}
          i/text-lineheight-refactor]
 
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1
@@ -473,7 +473,7 @@
          {:class (css :icon)
           :alt (tr "workspace.options.text-options.letter-spacing")}
          i/text-letterspacing-refactor]
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1
@@ -488,7 +488,7 @@
         [:span.icon-before.tooltip.tooltip-bottom
          {:alt (tr "workspace.options.text-options.line-height")}
          i/line-height]
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1
@@ -503,7 +503,7 @@
         [:span.icon-before.tooltip.tooltip-bottom
          {:alt (tr "workspace.options.text-options.letter-spacing")}
          i/letter-spacing]
-        [:> numeric-input
+        [:> numeric-input*
          {:min -200
           :max 200
           :step 0.1
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index c5317b97c..42e4a160f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -15,7 +15,7 @@
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.color-input :refer [color-input]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as h]
@@ -205,14 +205,14 @@
                    (not (:gradient color)))
           [:div.input-element
            {:class (dom/classnames :percentail (not= (:opacity color) :multiple))}
-           [:> numeric-input {:value (-> color :opacity opacity->string)
-                              :placeholder (tr "settings.multiple")
-                              :select-on-focus select-on-focus
-                              :on-focus on-focus
-                              :on-blur on-blur
-                              :on-change handle-opacity-change
-                              :min 0
-                              :max 100}]])
+           [:> numeric-input* {:value (-> color :opacity opacity->string)
+                               :placeholder (tr "settings.multiple")
+                               :select-on-focus select-on-focus
+                               :on-focus on-focus
+                               :on-blur on-blur
+                               :on-change handle-opacity-change
+                               :min 0
+                               :max 100}]])
         (when select-only
           [:div.element-set-actions-button {:on-click handle-select}
            i/pointer-inner])])
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs
index bdb6c7d7e..d834d4a6b 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/input_row.cljs
@@ -7,7 +7,7 @@
 (ns app.main.ui.workspace.sidebar.options.rows.input-row
   (:require
    [app.main.ui.components.editable-select :refer [editable-select]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
    [app.util.object :as obj]
    [rumext.v2 :as mf]))
@@ -40,7 +40,7 @@
                :class "input-text"
                :on-change on-change} ]
 
-      [:> numeric-input
+      [:> numeric-input*
        {:placeholder placeholder
         :min min
         :max max
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
index 3318fd65f..964f626b1 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@@ -9,7 +9,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.numeric-input :refer [numeric-input]]
+   [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
@@ -97,7 +97,7 @@
        {:class (dom/classnames :pixels (not= (:stroke-width stroke) :multiple))
         :title (tr "workspace.options.stroke-width")}
 
-       [:> numeric-input
+       [:> numeric-input*
         {:min 0
          :value (-> (:stroke-width stroke) width->string)
          :placeholder (tr "settings.multiple")