diff --git a/.clj-kondo/config.edn b/.clj-kondo/config.edn
index a2bc5ee81..f8c18fcd6 100644
--- a/.clj-kondo/config.edn
+++ b/.clj-kondo/config.edn
@@ -6,7 +6,6 @@
   rumext.v2/defc clojure.core/defn
   rumext.v2/fnc clojure.core/fn
   app.common.data/export clojure.core/def
-  app.db/with-atomic clojure.core/with-open
   app.common.data.macros/get-in clojure.core/get-in
   app.common.data.macros/with-open clojure.core/with-open
   app.common.data.macros/select-keys clojure.core/select-keys
@@ -18,6 +17,7 @@
    potok.core/reify hooks.export/potok-reify
    app.util.services/defmethod hooks.export/service-defmethod
    app.common.record/defrecord hooks.export/penpot-defrecord
+   app.db/with-atomic hooks.export/penpot-with-atomic
    }}
 
  :output
diff --git a/.clj-kondo/hooks/export.clj b/.clj-kondo/hooks/export.clj
index 9486ed67c..71a837597 100644
--- a/.clj-kondo/hooks/export.clj
+++ b/.clj-kondo/hooks/export.clj
@@ -39,6 +39,20 @@
                          other))]
       {:node result})))
 
+(defn penpot-with-atomic
+  [{:keys [node]}]
+  (let [[_ params & other] (:children node)
+
+        result (if (api/vector-node? params)
+                 (api/list-node
+                  (into [(api/token-node (symbol "clojure.core" "with-open")) params] other))
+                 (api/list-node
+                  (into [(api/token-node (symbol "clojure.core" "with-open"))
+                         (api/vector-node [params params])]
+                        other)))
+
+        ]
+    {:node result}))
 
 (defn penpot-defrecord
   [{:keys [:node]}]
diff --git a/backend/src/app/db.clj b/backend/src/app/db.clj
index 8beaa78ec..d148ccc46 100644
--- a/backend/src/app/db.clj
+++ b/backend/src/app/db.clj
@@ -218,7 +218,13 @@
 
 (defmacro with-atomic
   [& args]
-  `(jdbc/with-transaction ~@args))
+  (if (symbol? (first args))
+    (let [cfgs (first args)
+          body (rest args)]
+      `(jdbc/with-transaction [conn# (::pool ~cfgs)]
+         (let [~cfgs (assoc ~cfgs ::conn conn#)]
+           ~@body)))
+    `(jdbc/with-transaction ~@args)))
 
 (defn open
   [pool]
diff --git a/frontend/src/app/main/data/events.cljs b/frontend/src/app/main/data/events.cljs
index 86d330859..28eca7384 100644
--- a/frontend/src/app/main/data/events.cljs
+++ b/frontend/src/app/main/data/events.cljs
@@ -222,9 +222,7 @@
                   :body (http/transit-data {:events events})}]
       (->> (http/send! params)
            (rx/mapcat rp/handle-response)
-           (rx/catch (fn [_]
-                       (l/error :hint "unexpected error on persisting audit events")
-                       (rx/of nil)))))
+           (rx/catch (fn [_] (rx/of nil)))))
 
     (rx/of nil)))
 
diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs
index cdb907ded..fad0f9cef 100644
--- a/frontend/src/app/main/ui/auth/login.cljs
+++ b/frontend/src/app/main/ui/auth/login.cljs
@@ -177,41 +177,46 @@
       [:div.buttons-stack
        (when (or (contains? cf/flags :login)
                  (contains? cf/flags :login-with-password))
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (tr "auth.login-submit")
            :data-test "login-submit"}])
 
        (when (contains? cf/flags :login-with-ldap)
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (tr "auth.login-with-ldap-submit")
            :on-click on-submit-ldap}])]]]))
 
 (mf/defc login-buttons
   [{:keys [params] :as props}]
-  [:div.auth-buttons
-   (when (contains? cf/flags :login-with-google)
-     [:& bl/button-link {:action #(login-with-oidc % :google params)
-                         :icon i/brand-google
-                         :name (tr "auth.login-with-google-submit")
-                         :klass "btn-google-auth"}])
+  (let [login-with-google (mf/use-fn (mf/deps params) #(login-with-oidc % :google params))
+        login-with-github (mf/use-fn (mf/deps params) #(login-with-oidc % :github params))
+        login-with-gitlab (mf/use-fn (mf/deps params) #(login-with-oidc % :gitlab params))
+        login-with-oidc   (mf/use-fn (mf/deps params) #(login-with-oidc % :oidc params))]
 
-   (when (contains? cf/flags :login-with-github)
-     [:& bl/button-link {:action #(login-with-oidc % :github params)
-                         :icon i/brand-github
-                         :name (tr "auth.login-with-github-submit")
-                         :klass "btn-github-auth"}])
+    [:div.auth-buttons
+     (when (contains? cf/flags :login-with-google)
+       [:& bl/button-link {:on-click login-with-google
+                           :icon i/brand-google
+                           :label (tr "auth.login-with-google-submit")
+                           :class "btn-google-auth"}])
 
-   (when (contains? cf/flags :login-with-gitlab)
-     [:& bl/button-link {:action #(login-with-oidc % :gitlab params)
-                         :icon i/brand-gitlab
-                         :name (tr "auth.login-with-gitlab-submit")
-                         :klass "btn-gitlab-auth"}])
+     (when (contains? cf/flags :login-with-github)
+       [:& bl/button-link {:on-click login-with-github
+                           :icon i/brand-github
+                           :label (tr "auth.login-with-github-submit")
+                           :class "btn-github-auth"}])
 
-   (when (contains? cf/flags :login-with-oidc)
-     [:& bl/button-link {:action #(login-with-oidc % :oidc params)
-                         :icon i/brand-openid
-                         :name (tr "auth.login-with-oidc-submit")
-                         :klass "btn-github-auth"}])])
+     (when (contains? cf/flags :login-with-gitlab)
+       [:& bl/button-link {:on-click login-with-gitlab
+                           :icon i/brand-gitlab
+                           :label (tr "auth.login-with-gitlab-submit")
+                           :class "btn-gitlab-auth"}])
+
+     (when (contains? cf/flags :login-with-oidc)
+       [:& bl/button-link {:on-click login-with-oidc
+                           :icon i/brand-openid
+                           :label (tr "auth.login-with-oidc-submit")
+                           :class "btn-github-auth"}])]))
 
 (mf/defc login-button-oidc
   [{:keys [params] :as props}]
diff --git a/frontend/src/app/main/ui/auth/recovery.cljs b/frontend/src/app/main/ui/auth/recovery.cljs
index 397edc4d9..99ba7fc40 100644
--- a/frontend/src/app/main/ui/auth/recovery.cljs
+++ b/frontend/src/app/main/ui/auth/recovery.cljs
@@ -72,7 +72,7 @@
                     :name :password-2
                     :label (tr "auth.confirm-password")}]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "auth.recovery-submit")}]]))
 
 ;; --- Recovery Request Page
diff --git a/frontend/src/app/main/ui/auth/recovery_request.cljs b/frontend/src/app/main/ui/auth/recovery_request.cljs
index 37e92b226..d292a57e6 100644
--- a/frontend/src/app/main/ui/auth/recovery_request.cljs
+++ b/frontend/src/app/main/ui/auth/recovery_request.cljs
@@ -32,7 +32,7 @@
 
 (mf/defc recovery-form
   [{:keys [on-success-callback] :as props}]
-  (let [form      (fm/use-form :spec ::recovery-request-form 
+  (let [form      (fm/use-form :spec ::recovery-request-form
                                :validators [handle-error-messages]
                                :initial {})
         submitted (mf/use-state false)
@@ -82,7 +82,7 @@
                     :help-icon i/at
                     :type "text"}]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "auth.recovery-request-submit")
        :data-test "recovery-resquest-submit"}]]))
 
diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs
index 01986eccb..43cf56e1f 100644
--- a/frontend/src/app/main/ui/auth/register.cljs
+++ b/frontend/src/app/main/ui/auth/register.cljs
@@ -124,7 +124,7 @@
                     :label (tr "auth.password")
                     :type "password"}]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "auth.register-submit")
        :disabled @submitted?
        :data-test "register-form-submit"}]]))
@@ -259,7 +259,7 @@
          [:span ",\u00A0"]
          [:a {:href "https://penpot.app/privacy" :target "_blank"} (tr "auth.privacy-policy")]]])
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "auth.register-submit")
        :disabled @submitted?}]]))
 
diff --git a/frontend/src/app/main/ui/components/button_link.cljs b/frontend/src/app/main/ui/components/button_link.cljs
index 57a09eccf..fadfbd347 100644
--- a/frontend/src/app/main/ui/components/button_link.cljs
+++ b/frontend/src/app/main/ui/components/button_link.cljs
@@ -11,16 +11,17 @@
 
 (mf/defc button-link
   {::mf/wrap-props false}
-  [{:keys [action icon name klass]}]
+  [{:keys [on-click icon label class]}]
   (let [on-key-down (mf/use-fn
-                     (mf/deps action)
+                     (mf/deps on-click)
                      (fn [event]
                        (when (kbd/enter? event)
-                         (action event))))]
+                         (when (fn? on-click)
+                           (on-click event)))))]
     [:a.btn-primary.btn-large.button-link
-     {:class klass
+     {:class class
       :tab-index "0"
-      :on-click action
+      :on-click on-click
       :on-key-down on-key-down}
      [:span.logo icon]
-     name]))
+     label]))
diff --git a/frontend/src/app/main/ui/components/code_block.cljs b/frontend/src/app/main/ui/components/code_block.cljs
index 2f8ded61e..1904b2170 100644
--- a/frontend/src/app/main/ui/components/code_block.cljs
+++ b/frontend/src/app/main/ui/components/code_block.cljs
@@ -9,12 +9,13 @@
    ["highlight.js" :as hljs]
    [rumext.v2 :as mf]))
 
-(mf/defc code-block [{:keys [code type]}]
+(mf/defc code-block
+  {::mf/wrap-props false}
+  [{:keys [code type]}]
   (let [block-ref (mf/use-ref)]
-    (mf/use-effect
-     (mf/deps code type block-ref)
-     (fn []
-       (hljs/highlightElement (mf/ref-val block-ref))))
-    [:pre.code-display {:class type
-                        :ref block-ref} code]))
+    (mf/with-effect [code type]
+      (when-let [node (mf/ref-val block-ref)]
+        (hljs/highlightElement node)))
+
+    [:pre.code-display {:class type :ref block-ref} code]))
 
diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs
index c015e18bf..d4a151435 100644
--- a/frontend/src/app/main/ui/components/color_bullet.cljs
+++ b/frontend/src/app/main/ui/components/color_bullet.cljs
@@ -40,10 +40,10 @@
 (mf/defc color-name
   {::mf/wrap-props false}
   [{:keys [color size on-click on-double-click]}]
-  (let [color (if (string? color) {:color color :opacity 1} color)
-        {:keys [name color gradient]} color
-        color-str (or name color (uc/gradient-type->string (:type gradient)))]
+  (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
     (when (or (not size) (= size :big))
-      [:span.color-text {:on-click #(when on-click (on-click %))
-                         :on-double-click #(when on-double-click (on-double-click %))
-                         :title name} color-str])))
+      [:span.color-text
+       {:on-click on-click
+        :on-double-click on-double-click
+        :title name}
+       (or name color (uc/gradient-type->string (:type gradient)))])))
diff --git a/frontend/src/app/main/ui/components/color_input.cljs b/frontend/src/app/main/ui/components/color_input.cljs
index be8555e68..f8d193b5f 100644
--- a/frontend/src/app/main/ui/components/color_input.cljs
+++ b/frontend/src/app/main/ui/components/color_input.cljs
@@ -23,7 +23,7 @@
       (uc/parse-color)
       (uc/prepend-hash)))
 
-(mf/defc color-input
+(mf/defc color-input*
   {::mf/wrap-props false
    ::mf/forward-ref true}
   [props external-ref]
diff --git a/frontend/src/app/main/ui/components/editable_label.cljs b/frontend/src/app/main/ui/components/editable_label.cljs
index 510048239..7881e86c1 100644
--- a/frontend/src/app/main/ui/components/editable_label.cljs
+++ b/frontend/src/app/main/ui/components/editable_label.cljs
@@ -14,51 +14,89 @@
    [rumext.v2 :as mf]))
 
 (mf/defc editable-label
-  [{:keys [value on-change on-cancel editing? disable-dbl-click? class-name] :as props}]
-  (let [display-value (get props :display-value value)
-        tooltip (get props :tooltip)
-        input (mf/use-ref nil)
-        state (mf/use-state (:editing false))
-        new-css-system (mf/use-ctx ctx/new-css-system)
-        is-editing (:editing @state)
-        start-editing (fn []
-                        (swap! state assoc :editing true)
-                        (timers/schedule 100 #(dom/focus! (mf/ref-val input))))
-        stop-editing (fn [] (swap! state assoc :editing false))
-        accept-editing (fn []
-                         (when (:editing @state)
-                           (let [value (-> (mf/ref-val input) dom/get-value)]
-                             (on-change value)
-                             (stop-editing))))
-        cancel-editing (fn []
-                         (stop-editing)
-                         (when on-cancel (on-cancel)))
-        on-dbl-click (fn [_] (when (not disable-dbl-click?) (start-editing)))
-        on-key-up (fn [e]
-                    (cond
-                      (kbd/esc? e)
-                      (cancel-editing)
+  {::mf/wrap-props false}
+  [props]
+  (let [display-value     (unchecked-get props "display-value")
+        value             (unchecked-get props "value")
+        on-change         (unchecked-get props "on-change")
+        on-cancel         (unchecked-get props "on-cancel")
+        editing?          (unchecked-get props "editing")
+        dbl-click?        (unchecked-get props "disable-dbl-click")
+        class             (unchecked-get props "class")
+        tooltip           (unchecked-get props "tooltip")
 
-                      (kbd/enter? e)
-                      (accept-editing)))]
+        new-css-system    (mf/use-ctx ctx/new-css-system)
+        input-ref         (mf/use-ref nil)
+        internal-editing* (mf/use-state false)
+        internal-editing? (deref internal-editing*)
 
-    (mf/use-effect
-     (mf/deps editing?)
-     (fn []
-       (when (and editing? (not (:editing @state)))
-         (start-editing))))
+        start-edition
+        (mf/use-fn
+         (fn []
+           (reset! internal-editing* true)
+           (timers/schedule 100 (fn []
+                                  (when-let [node (mf/ref-val input-ref)]
+                                    (dom/focus! node))))))
 
-    (if is-editing
-      [:div.editable-label {:class class-name}
-       [:input.editable-label-input {:ref input
-                                     :default-value value
-                                     :on-key-up on-key-up
-                                     :on-blur cancel-editing}]
-       
-       [:span.editable-label-close {:on-click cancel-editing}
-        (if new-css-system
+        stop-edition
+        (mf/use-fn #(reset! internal-editing* false))
+
+        accept-edition
+        (mf/use-fn
+         (mf/deps internal-editing? on-change stop-edition)
+         (fn []
+           (when internal-editing?
+             (let [value (dom/get-value (mf/ref-val input-ref))]
+               (when (fn? on-change)
+                 (on-change value))
+
+               (stop-edition)))))
+
+        cancel-edition
+        (mf/use-fn
+         (mf/deps stop-edition on-cancel)
+         (fn []
+           (stop-edition)
+           (when (fn? on-cancel)
+             (on-cancel))))
+
+
+        on-dbl-click
+        (mf/use-fn
+         (mf/deps dbl-click? start-edition)
+         (fn [_]
+           (when-not dbl-click?
+             (start-edition))))
+
+        on-key-up
+        (mf/use-fn
+         (mf/deps cancel-edition accept-edition)
+         (fn [event]
+           (cond
+             (kbd/esc? event)
+             (cancel-edition)
+
+             (kbd/enter? event)
+             (accept-edition))))]
+
+    (mf/with-effect [editing? internal-editing? start-edition]
+      (when (and editing? (not internal-editing?))
+        (start-edition)))
+
+    (if ^boolean internal-editing?
+      [:div.editable-label {:class class}
+       [:input.editable-label-input
+        {:ref input-ref
+         :default-value value
+         :on-key-up on-key-up
+         :on-blur cancel-edition}]
+
+       [:span.editable-label-close {:on-click cancel-edition}
+        (if ^boolean new-css-system
           i/delete-text-refactor
           i/close)]]
-      [:span.editable-label {:class class-name
-                             :title tooltip
-                             :on-double-click on-dbl-click} display-value])))
+      [:span.editable-label
+       {:class class
+        :title tooltip
+        :on-double-click on-dbl-click}
+       display-value])))
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/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs
index deb8f6a46..3356f736e 100644
--- a/frontend/src/app/main/ui/components/forms.cljs
+++ b/frontend/src/app/main/ui/components/forms.cljs
@@ -236,56 +236,98 @@
        i/arrow-slide]]]))
 
 (mf/defc radio-buttons
-  [{:keys [name options form trim on-change-value] :as props}]
-  (let [form            (or form (mf/use-ctx form-ctx))
-        value           (get-in @form [:data name] "")
-        on-change-value (or on-change-value (constantly nil))
-        on-change (fn [event]
-                    (let [value (-> event dom/get-target dom/get-value)]
-                      (swap! form assoc-in [:touched name] true)
-                      (fm/on-input-change form name value trim)
-                      (on-change-value name value)))]
-    [:div.custom-radio
-     (for [item options]
-       (let [id (str/ffmt "%-%" name (:value item))
-             image (:image item)]
-         [:div.input-radio {:key id :class (when image "with-image")}
-          [:input {:on-change on-change
-                   :type "radio"
-                   :id id
-                   :name name
-                   :value (:value item)
-                   :checked (= value (:value item))}]
-          [:label {:for id
-                   :style {:background-image (when image (str/ffmt "url(%)" image))}
-                   :class (when image "with-image")}
-           (:label item)]]))]))
+  {::mf/wrap-props false}
+  [props]
+  (let [form          (or (unchecked-get props "form")
+                          (mf/use-ctx form-ctx))
+        name          (unchecked-get props "name")
 
-(mf/defc submit-button
-  [{:keys [label form on-click disabled data-test] :as props}]
-  (let [form (or form (mf/use-ctx form-ctx))]
-    [:input.btn-primary.btn-large
-     {:name "submit"
-      :class (when (or (not (:valid @form)) (true? disabled)) "btn-disabled")
-      :disabled (or (not (:valid @form)) (true? disabled))
-      :tab-index "0"
-      :on-click on-click
-      :on-key-down (fn [event]
-                     (when (kbd/enter? event)
-                       (on-click)))
-      :value label
-      :data-test data-test
-      :type "submit"}]))
+        current-value (or (dm/get-in @form [:data name] "")
+                          (unchecked-get props "value"))
+        on-change     (unchecked-get props "on-change")
+        options       (unchecked-get props "options")
+        trim?         (unchecked-get props "trim")
+        encode-fn     (d/nilv (unchecked-get props "encode-fn") identity)
+        decode-fn     (d/nilv (unchecked-get props "decode-fn") identity)
+
+        on-change'
+        (mf/use-fn
+         (mf/deps on-change form name)
+         (fn [event]
+           (let [value (-> event dom/get-target dom/get-value decode-fn)]
+             (when (some? form)
+               (swap! form assoc-in [:touched name] true)
+               (fm/on-input-change form name value trim?))
+
+             (when (fn? on-change)
+               (on-change name value)))))]
+
+    [:div.custom-radio
+     (for [{:keys [image value label]} options]
+       (let [image? (some? image)
+             value' (encode-fn value)
+             key    (str/ffmt "%-%" name value')]
+         [:div.input-radio {:key key :class (when image? "with-image")}
+          [:input {:on-change on-change'
+                   :type "radio"
+                   :id key
+                   :name name
+                   :value value'
+                   :checked (= value current-value)}]
+          [:label {:for key
+                   :style {:background-image (when image? (str/ffmt "url(%)" image))}
+                   :class (when image? "with-image")}
+           label]]))]))
+
+(mf/defc submit-button*
+  {::mf/wrap-props false}
+  [props]
+  (let [form      (or (unchecked-get props "form")
+                      (mf/use-ctx form-ctx))
+
+        label     (unchecked-get props "label")
+        on-click  (unchecked-get props "onClick")
+        children  (unchecked-get props "children")
+
+        class     (d/nilv (unchecked-get props "className") "btn-primary btn-large")
+        name      (d/nilv (unchecked-get props "name") "submit")
+
+        disabled? (or (and (some? form) (not (:valid @form)))
+                      (true? (unchecked-get props "disabled")))
+
+        klass     (dm/str class " " (if disabled? "btn-disabled" ""))
+
+        on-key-down
+        (mf/use-fn
+         (mf/deps on-click)
+         (fn [event]
+           (when (and (kbd/enter? event) (fn? on-click))
+             (on-click event))))
+
+        props     (-> (obj/clone props)
+                      (obj/unset! "children")
+                      (obj/set! "disabled" disabled?)
+                      (obj/set! "onKeyDown" on-key-down)
+                      (obj/set! "name" name)
+                      (obj/set! "label" mf/undefined)
+                      (obj/set! "className" klass)
+                      (obj/set! "type" "submit"))]
+
+    [:> "button" props
+     (if (some? children)
+       children
+       [:span label])]))
 
 (mf/defc form
-  [{:keys [on-submit form children class] :as props}]
-  (let [on-submit (or on-submit (constantly nil))]
+  {::mf/wrap-props false}
+  [{:keys [on-submit form children class]}]
+  (let [on-submit' (mf/use-fn
+                    (fn [event]
+                      (dom/prevent-default event)
+                      (when (fn? on-submit)
+                        (on-submit form event))))]
     [:& (mf/provider form-ctx) {:value form}
-     [:form {:class class
-             :on-submit (fn [event]
-                          (dom/prevent-default event)
-                          (on-submit form event))}
-      children]]))
+     [:form {:class class :on-submit on-submit'} children]]))
 
 (defn- conj-dedup
   "A helper that adds item into a vector and removes possible
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/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs
index 40784e623..1f31379e9 100644
--- a/frontend/src/app/main/ui/components/radio_buttons.cljs
+++ b/frontend/src/app/main/ui/components/radio_buttons.cljs
@@ -5,58 +5,73 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.components.radio-buttons
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data :as d]
    [app.common.math :as math]
    [app.main.ui.formats :as fmt]
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
-(def ctx-radio-button (mf/create-context nil))
+(def context
+  (mf/create-context nil))
 
 (mf/defc radio-button
   {::mf/wrap-props false}
   [props]
-  (let [ctx (mf/use-ctx ctx-radio-button)
-        icon  (unchecked-get props "icon")
-        id (unchecked-get props "id")
-        on-change (:on-change ctx)
-        selected (:selected ctx)
-        value (unchecked-get props "value")
-        checked? (= selected value)
-        name (:name ctx)]
+  (let [context   (mf/use-ctx context)
+
+        icon      (unchecked-get props "icon")
+        id        (unchecked-get props "id")
+        value     (unchecked-get props "value")
+
+        on-change (unchecked-get context "on-change")
+        selected  (unchecked-get context "selected")
+        name      (unchecked-get context "name")
+
+        encode-fn (unchecked-get context "encode-fn")
+        checked?  (= selected value)]
+
     [:label {:for id
-             :class (dom/classnames (css :radio-icon) true
-                                    (css :checked) checked?)}
-     icon
+             :class (stl/css-case
+                     :radio-icon true
+                     :checked checked?)}
+
+     (when (some? icon) icon)
+
      [:input {:id id
               :on-change on-change
               :type "radio"
               :name name
-              :value value
-              :checked  checked?}]]))
+              :value (encode-fn value)
+              :checked checked?}]]))
 
 (mf/defc nilable-option
   {::mf/wrap-props false}
   [props]
-  (let [ctx (mf/use-ctx ctx-radio-button)
-        icon  (unchecked-get props "icon")
-        id (unchecked-get props "id")
-        on-change (:on-change ctx)
-        selected (:selected ctx)
-        value (unchecked-get props "value")
-        checked? (= selected value)
-        name (:name ctx)]
+  (let [context   (mf/use-ctx context)
+        icon      (unchecked-get props "icon")
+        id        (unchecked-get props "id")
+        value     (unchecked-get props "value")
+
+        on-change (unchecked-get context "on-change")
+        selected  (unchecked-get context "selected")
+        name      (unchecked-get context "name")
+
+        encode-fn (unchecked-get context "encode-fn")
+        checked?  (= selected value)]
+
     [:label {:for id
-             :class (dom/classnames (css :radio-icon) true
-                                    (css :checked) checked?)}
+             :class (stl/css-case
+                     :radio-icon true
+                     :checked checked?)}
      icon
      [:input {:id id
               :on-change on-change
               :type "checkbox"
               :name name
-              :value value
-              :checked  checked?}]]))
+              :value (encode-fn value)
+              :checked checked?}]]))
 
 (mf/defc radio-buttons
   {::mf/wrap-props false}
@@ -65,14 +80,36 @@
         on-change (unchecked-get props "on-change")
         selected  (unchecked-get props "selected")
         name      (unchecked-get props "name")
-        calculate-width (fmt/format-pixels (+ (math/pow 2 (count children)) (* 28 (count children))))
-        handle-change
+
+        encode-fn (d/nilv (unchecked-get props "encode-fn") identity)
+        decode-fn (d/nilv (unchecked-get props "encode-fn") identity)
+
+        nitems    (if (array? children)
+                    (alength children)
+                    1)
+
+        width     (mf/with-memo [nitems]
+                    (fmt/format-pixels
+                     (+ (math/pow 2 nitems)
+                        (* 28 nitems))))
+
+        on-change'
         (mf/use-fn
          (mf/deps on-change)
          (fn [event]
            (let [value (dom/get-target-val event)]
-             (on-change value event))))]
-    [:& (mf/provider ctx-radio-button) {:value {:selected selected :on-change handle-change :name name}}
-     [:div {:class (css :radio-btn-wrapper)
-                          :style {:width calculate-width}}
+             (when (fn? on-change)
+               (on-change (decode-fn value) event)))))
+
+        context-value
+        (mf/with-memo [selected on-change' name encode-fn decode-fn]
+          #js {:selected selected
+               :on-change on-change'
+               :name name
+               :encode-fn encode-fn
+               :decode-fn decode-fn})]
+
+    [:& (mf/provider context) {:value context-value}
+     [:div {:class (stl/css :radio-btn-wrapper)
+            :style {:width width}}
       children]]))
diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs
index 209705c45..e1befe200 100644
--- a/frontend/src/app/main/ui/dashboard.cljs
+++ b/frontend/src/app/main/ui/dashboard.cljs
@@ -185,7 +185,7 @@
            :profile profile
            :section section
            :search-term search-term}]
-         (when (and team (seq projects))
+         (when (and team profile (seq projects))
            [:& dashboard-content
             {:projects projects
              :profile profile
diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs
index 43f16aac7..6cc4f9244 100644
--- a/frontend/src/app/main/ui/dashboard/team.cljs
+++ b/frontend/src/app/main/ui/dashboard/team.cljs
@@ -185,9 +185,10 @@
                            :on-submit  on-submit}]]
 
       [:div.action-buttons
-       [:& fm/submit-button {:label (tr "modals.invite-member-confirm.accept")
-                             :disabled (and (boolean (some current-data-emails current-members-emails))
-                                            (empty? (remove current-members-emails current-data-emails)))}]]]]))
+       [:> fm/submit-button*
+        {:label (tr "modals.invite-member-confirm.accept")
+         :disabled (and (boolean (some current-data-emails current-members-emails))
+                        (empty? (remove current-members-emails current-data-emails)))}]]]]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; MEMBERS SECTION
@@ -814,7 +815,7 @@
           {:type "button"
            :value (tr "labels.cancel")
            :on-click #(modal/hide!)}]
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (if webhook
                     (tr "modals.edit-webhook.submit-label")
                     (tr "modals.create-webhook.submit-label"))}]]]]]]))
diff --git a/frontend/src/app/main/ui/dashboard/team_form.cljs b/frontend/src/app/main/ui/dashboard/team_form.cljs
index e09501b60..023cfac48 100644
--- a/frontend/src/app/main/ui/dashboard/team_form.cljs
+++ b/frontend/src/app/main/ui/dashboard/team_form.cljs
@@ -95,7 +95,7 @@
 
        [:div.modal-footer
         [:div.action-buttons
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (if team
                     (tr "labels.update-team")
                     (tr "labels.create-team"))}]]]]]]))
diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs
index d5cd52a95..ca5d1fb08 100644
--- a/frontend/src/app/main/ui/onboarding/questions.cljs
+++ b/frontend/src/app/main/ui/onboarding/questions.cljs
@@ -26,7 +26,7 @@
    children
    [:div.buttons
     [:div.step-next
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (if (< step 4) (tr "questions.next") (tr "questions.start"))
        :class "step-next"}]]
 
@@ -114,7 +114,7 @@
                                      {:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"}
                                      {:label (tr "questions.other") :value "other"}]
                            :name :experience-design-tool
-                           :on-change-value on-design-tool-change}]
+                           :on-change on-design-tool-change}]
      [:div.other
       [:label (tr "questions.other")]
       [:& fm/input {:name :experience-design-tool-other :label (tr "questions.other") :disabled (not= experience-design-tool "other")}]]]))
@@ -152,7 +152,7 @@
                                      {:label (tr "questions.student-teacher") :value "student-teacher"}
                                      {:label (tr "questions.other") :value "other"}]
                            :name :role
-                           :on-change-value on-role-change}]
+                           :on-change on-role-change}]
      [:div.other
       [:label (tr "questions.other")]
       [:& fm/input {:name :role-other :label (tr "questions.other") :disabled (not= role "other")}]]
diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs
index 2dd7ee3de..27d1e3225 100644
--- a/frontend/src/app/main/ui/onboarding/team_choice.cljs
+++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs
@@ -87,7 +87,7 @@
                         :name :name
                         :label (tr "onboarding.choice.team-up.create-team-placeholder")}]
 
-          [:& fm/submit-button
+          [:> fm/submit-button*
            {:label (tr "labels.continue")}]]
 
          [:button.skip-action {:on-click on-skip} (tr "onboarding.choice.team-up.create-later")]]
@@ -199,8 +199,9 @@
                                                        :name name
                                                        :step 2}))}
           (tr "labels.back")]
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (tr "onboarding.choice.team-up.invite-members-submit")}]]
+
         [:div.skip-action
          {:on-click on-skip}
          [:div.action (tr "onboarding.choice.team-up.invite-members-skip")]]]]
diff --git a/frontend/src/app/main/ui/settings/access_tokens.cljs b/frontend/src/app/main/ui/settings/access_tokens.cljs
index 2444324ed..3e4947ce9 100644
--- a/frontend/src/app/main/ui/settings/access_tokens.cljs
+++ b/frontend/src/app/main/ui/settings/access_tokens.cljs
@@ -166,7 +166,7 @@
              {:type "button"
               :value (tr "labels.cancel")
               :on-click #(modal/hide!)}]
-            [:& fm/submit-button
+            [:> fm/submit-button*
              {:label (tr "modals.create-access-token.submit-label")}]])]]]]]))
 
 (mf/defc access-tokens-hero
diff --git a/frontend/src/app/main/ui/settings/change_email.cljs b/frontend/src/app/main/ui/settings/change_email.cljs
index 26521ed78..996d4668c 100644
--- a/frontend/src/app/main/ui/settings/change_email.cljs
+++ b/frontend/src/app/main/ui/settings/change_email.cljs
@@ -129,7 +129,7 @@
 
        [:div.modal-footer
         [:div.action-buttons {:data-test "change-email-submit"}
-         [:& fm/submit-button
+         [:> fm/submit-button*
           {:label (tr "modals.change-email.submit")}]]]]]]))
 
 
diff --git a/frontend/src/app/main/ui/settings/feedback.cljs b/frontend/src/app/main/ui/settings/feedback.cljs
index d510ef7c5..e46c4aac2 100644
--- a/frontend/src/app/main/ui/settings/feedback.cljs
+++ b/frontend/src/app/main/ui/settings/feedback.cljs
@@ -76,7 +76,7 @@
         :name :content
         :rows 5}]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (if @loading (tr "labels.sending") (tr "labels.send"))
        :disabled @loading}]
 
diff --git a/frontend/src/app/main/ui/settings/options.cljs b/frontend/src/app/main/ui/settings/options.cljs
index 6356a9e20..64f52e006 100644
--- a/frontend/src/app/main/ui/settings/options.cljs
+++ b/frontend/src/app/main/ui/settings/options.cljs
@@ -35,6 +35,7 @@
     (st/emit! (du/update-profile (with-meta data mdata)))))
 
 (mf/defc options-form
+  {::mf/wrap-props false}
   []
   (let [profile (mf/deref refs/profile)
         initial (mf/with-memo [profile]
@@ -66,7 +67,7 @@
                        :options [{:label "Penpot Dark (default)" :value "default"}
                                  {:label "Penpot Light" :value "light"}]
                        :data-test "setting-theme"}]])
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "dashboard.update-settings")
        :data-test "submit-lang-change"}]]))
 
diff --git a/frontend/src/app/main/ui/settings/password.cljs b/frontend/src/app/main/ui/settings/password.cljs
index 48f15b00b..f04262ffa 100644
--- a/frontend/src/app/main/ui/settings/password.cljs
+++ b/frontend/src/app/main/ui/settings/password.cljs
@@ -98,7 +98,7 @@
         :name :password-2
         :label (t locale "labels.confirm-password")}]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (t locale "dashboard.update-settings")
        :data-test "submit-password"}]]))
 
diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs
index cbb302b70..dd5ab9eef 100644
--- a/frontend/src/app/main/ui/settings/profile.cljs
+++ b/frontend/src/app/main/ui/settings/profile.cljs
@@ -69,7 +69,7 @@
         [:a {:on-click #(modal/show! :change-email {})}
          (tr "dashboard.change-email")]]]]
 
-     [:& fm/submit-button
+     [:> fm/submit-button*
       {:label (tr "dashboard.save-settings")
        :disabled (empty? (:touched @form))}]
 
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/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
index fcfbf06db..2e8999a06 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
@@ -5,7 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.sidebar.assets.components
-  (:require-macros [app.main.style :refer [css]])
+  (:require-macros [app.main.style :as stl :refer [css]])
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
@@ -146,15 +146,15 @@
           (let [renaming? (= renaming (:id component))]
             [:*
              [:& editable-label
-              {:class-name (dom/classnames
-                            (css :cell-name) listing-thumbs?
-                            (css :item-name) (not listing-thumbs?)
-                            (css :editing) renaming?)
+              {:class (dom/classnames
+                       (css :cell-name) listing-thumbs?
+                       (css :item-name) (not listing-thumbs?)
+                       (css :editing) renaming?)
                :value (cph/merge-path-item (:path component) (:name component))
                :tooltip (cph/merge-path-item (:path component) (:name component))
                :display-value (:name component)
-               :editing? renaming?
-               :disable-dbl-click? true
+               :editing renaming?
+               :disable-dbl-click true
                :on-change do-rename
                :on-cancel cancel-rename}]
 
@@ -185,15 +185,15 @@
           (let [renaming? (= renaming (:id component))]
             [:*
              [:& editable-label
-              {:class-name (dom/classnames
-                            :cell-name listing-thumbs?
-                            :item-name (not listing-thumbs?)
-                            :editing renaming?)
+              {:class (dom/classnames
+                       :cell-name listing-thumbs?
+                       :item-name (not listing-thumbs?)
+                       :editing renaming?)
                :value (cph/merge-path-item (:path component) (:name component))
                :tooltip (cph/merge-path-item (:path component) (:name component))
                :display-value (:name component)
-               :editing? renaming?
-               :disable-dbl-click? true
+               :editing renaming?
+               :disable-dbl-click true
                :on-change do-rename
                :on-cancel cancel-rename}]
 
@@ -569,29 +569,27 @@
                            :open? open?}
      (if ^boolean new-css-system
        [:& cmm/asset-section-block {:role :title-button}
+        [:*
+         (when open?
+           [:div {:class (stl/css :listing-options)}
+            [:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
+                               :on-change toggle-list-style
+                               :name "listing-style"}
+             [:& radio-button {:icon i/view-as-list-refactor
+                               :value "list"
+                               :id :list}]
+             [:& radio-button {:icon i/flex-grid-refactor
+                               :value "grid"
+                               :id :grid}]]])
 
-        (when open?
-          [:div {:class (dom/classnames (css :listing-options) true)}
-           (let [option-selected (if listing-thumbs?
-                                   "grid"
-                                   "list")]
-             [:& radio-buttons {:selected option-selected
-                                :on-change toggle-list-style
-                                :name "listing-style"}
-              [:& radio-button {:icon (mf/html i/view-as-list-refactor)
-                                :value "list"
-                                :id :list}]
-              [:& radio-button {:icon (mf/html i/flex-grid-refactor)
-                                :value "grid"
-                                :id :grid}]])])
-        (when (and components-v2 (not read-only?) local?)
-          [:div {:on-click add-component
-                 :class (dom/classnames (css :add-component) true)}
-           i/add-refactor
-           [:& file-uploader {:accept cm/str-image-types
-                              :multi true
-                              :ref input-ref
-                              :on-selected on-file-selected}]])]
+         (when (and components-v2 (not read-only?) local?)
+           [:div {:on-click add-component
+                  :class (dom/classnames (css :add-component) true)}
+            i/add-refactor
+            [:& file-uploader {:accept cm/str-image-types
+                               :multi true
+                               :ref input-ref
+                               :on-selected on-file-selected}]])]]
        (when local?
          [:& cmm/asset-section-block {:role :title-button}
           (when (and components-v2 (not read-only?))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs
index cadc9d70a..37f502b8f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.cljs
@@ -108,15 +108,15 @@
           (let [renaming? (= renaming (:id object))]
             [:*
              [:& editable-label
-              {:class-name (dom/classnames
-                            (css :cell-name) listing-thumbs?
-                            (css :item-name) (not listing-thumbs?)
-                            (css :editing) renaming?)
+              {:class (dom/classnames
+                       (css :cell-name) listing-thumbs?
+                       (css :item-name) (not listing-thumbs?)
+                       (css :editing) renaming?)
                :value (cph/merge-path-item (:path object) (:name object))
                :tooltip (cph/merge-path-item (:path object) (:name object))
                :display-value (:name object)
-               :editing? renaming?
-               :disable-dbl-click? true
+               :editing renaming?
+               :disable-dbl-click true
                :on-change do-rename
                :on-cancel cancel-rename}]
 
@@ -145,15 +145,15 @@
           (let [renaming? (= renaming (:id object))]
             [:*
              [:& editable-label
-              {:class-name (dom/classnames
-                            :cell-name listing-thumbs?
-                            :item-name (not listing-thumbs?)
-                            :editing renaming?)
+              {:class (dom/classnames
+                       :cell-name listing-thumbs?
+                       :item-name (not listing-thumbs?)
+                       :editing renaming?)
                :value (cph/merge-path-item (:path object) (:name object))
                :tooltip (cph/merge-path-item (:path object) (:name object))
                :display-value (:name object)
-               :editing? renaming?
-               :disable-dbl-click? true
+               :editing renaming?
+               :disable-dbl-click true
                :on-change do-rename
                :on-cancel cancel-rename}]
 
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..4c47ab485 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
@@ -14,8 +14,8 @@
    [app.main.refs :as refs]
    [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.color-input :refer [color-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]
@@ -193,26 +193,26 @@
        :else
        [:*
         [:div.color-info
-         [:> color-input {:value (if (uc/multiple? color)
-                                   ""
-                                   (-> color :color uc/remove-hash))
-                          :placeholder (tr "settings.multiple")
-                          :on-focus on-focus
-                          :on-blur on-blur
-                          :on-change handle-value-change}]]
+         [:> color-input* {:value (if (uc/multiple? color)
+                                    ""
+                                    (-> color :color uc/remove-hash))
+                           :placeholder (tr "settings.multiple")
+                           :on-focus on-focus
+                           :on-blur on-blur
+                           :on-change handle-value-change}]]
 
         (when (and (not disable-opacity)
                    (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")