From 0387cdf7e4391edc110c257013d86edf34b4d789 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Fri, 3 Jul 2026 09:26:16 +0200
Subject: [PATCH] :recycle: Migrate shared ancillary components to modern
 syntax (#10527)

* :recycle: Migrate shared ancillary components to modern syntax

* :recycle: Address shared ancillary syntax review

* :recycle: Apply Step 3 props destructuring on numeric-input*

Replaces the legacy ?-suffixed prop aliases with clean :keys destructuring
and updates internal references, addressing review on PR #9406.

* :bug: Fix some problems on refactored components

---------

Co-authored-by: sxxtony <166789813+sxxtony@users.noreply.github.com>
---
 .../main/ui/components/editable_select.cljs   |  16 +-
 .../app/main/ui/components/numeric_input.cljs | 162 ++++++++++++------
 .../app/main/ui/components/org_avatar.cljs    |   1 -
 .../app/main/ui/components/tab_container.cljs |  74 --------
 .../app/main/ui/components/tab_container.scss | 127 --------------
 frontend/src/app/main/ui/dashboard/team.cljs  |  26 ++-
 .../app/main/ui/ds/layout/tab_switcher.cljs   |   2 +-
 frontend/src/app/main/ui/shapes/svg_raw.cljs  |  24 +--
 .../ui/workspace/colorpicker/gradients.cljs   |   4 +-
 frontend/src/app/main/ui/workspace/nudge.cljs |  18 +-
 .../ui/workspace/shapes/text/v2_editor.cljs   |  13 +-
 .../sidebar/options/menus/border_radius.cljs  |   2 +-
 .../sidebar/options/menus/frame_grid.cljs     |  42 ++---
 .../sidebar/options/menus/grid_cell.cljs      |  26 +--
 .../sidebar/options/menus/layer.cljs          |   2 +-
 .../options/menus/layout_container.cljs       |  14 +-
 .../sidebar/options/menus/layout_item.cljs    |  22 +--
 .../sidebar/options/menus/measures.cljs       |   6 +-
 .../sidebar/options/menus/typography.cljs     |  10 +-
 .../sidebar/options/rows/color_row.cljs       |  24 +--
 .../sidebar/options/rows/shadow_row.cljs      |  36 ++--
 .../main/ui/workspace/viewport/presence.cljs  |   7 +-
 22 files changed, 253 insertions(+), 405 deletions(-)
 delete mode 100644 frontend/src/app/main/ui/components/tab_container.cljs
 delete mode 100644 frontend/src/app/main/ui/components/tab_container.scss

diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs
index 0f158667ae..a3c43866fe 100644
--- a/frontend/src/app/main/ui/components/editable_select.cljs
+++ b/frontend/src/app/main/ui/components/editable_select.cljs
@@ -12,7 +12,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 :as deprecated-input]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
@@ -163,13 +163,13 @@
     [:div {:class (dm/str class " " (stl/css :editable-select))
            :ref on-node-load}
      (if (= type "number")
-       [:> numeric-input* {:value (or (some-> current-value value->label) "")
-                           :className input-class
-                           :on-change set-value
-                           :on-focus handle-focus
-                           :on-blur handle-blur
-                           :aria-label aria-label
-                           :placeholder placeholder}]
+       [:> deprecated-input/numeric-input* {:value (or (some-> current-value value->label) "")
+                                            :class input-class
+                                            :on-change set-value
+                                            :on-focus handle-focus
+                                            :on-blur handle-blur
+                                            :aria-label aria-label
+                                            :placeholder placeholder}]
        [:input {:value (if (= value :multiple) nil (or (some-> current-value value->label) ""))
                 :class input-class
                 :on-change handle-change-input
diff --git a/frontend/src/app/main/ui/components/numeric_input.cljs b/frontend/src/app/main/ui/components/numeric_input.cljs
index f115ef2d38..9225674adf 100644
--- a/frontend/src/app/main/ui/components/numeric_input.cljs
+++ b/frontend/src/app/main/ui/components/numeric_input.cljs
@@ -14,7 +14,6 @@
    [app.util.dom :as dom]
    [app.util.globals :as globals]
    [app.util.keyboard :as kbd]
-   [app.util.object :as obj]
    [app.util.simple-math :as smt]
    [cljs.core :as c]
    [cuerdas.core :as str]
@@ -22,30 +21,22 @@
    [rumext.v2 :as mf]))
 
 (mf/defc numeric-input*
-  {::mf/wrap-props false
-   ::mf/forward-ref true}
-  [props external-ref]
-  (let [value-str   (unchecked-get props "value")
-        min-value   (unchecked-get props "min")
-        max-value   (unchecked-get props "max")
-        step-value  (unchecked-get props "step")
-        wrap-value? (unchecked-get props "data-wrap")
-        on-change   (unchecked-get props "onChange")
-        on-blur     (unchecked-get props "onBlur")
-        on-focus    (unchecked-get props "onFocus")
-
-        title       (unchecked-get props "title")
-        default     (unchecked-get props "default")
-        nillable?   (unchecked-get props "nillable")
-        class       (d/nilv (unchecked-get props "className") "")
+  {::mf/forward-ref true}
+  [{:keys [value min max step data-wrap on-change on-blur on-focus title default
+           select-on-focus class is-disabled is-nillable is-integer]
+    :rest props} external-ref]
+  (let [value-str   value
+        min-value   min
+        max-value   max
+        step-value  step
+        wrap-value? data-wrap
 
         min-value   (d/parse-double min-value)
         max-value   (d/parse-double max-value)
         step-value  (d/parse-double step-value 1)
-        default     (d/parse-double default (when-not nillable? 0))
+        default     (d/parse-double default (when-not is-nillable 0))
 
-        integer?         (unchecked-get props "integer")
-        select-on-focus? (d/nilv (unchecked-get props "selectOnFocus") true)
+        select-on-focus? (d/nilv select-on-focus true)
 
         ;; We need a ref pointing to the input dom element, but the user
         ;; of this component may provide one (that is forwarded here).
@@ -63,9 +54,13 @@
         ;; Last value input by the user we need to store to save on unmount
         last-value*  (mf/use-var value)
 
+        drag-state*     (mf/use-ref :idle)
+        drag-start-x*   (mf/use-ref 0)
+        drag-start-val* (mf/use-ref 0)
+
         parse-value
         (mf/use-fn
-         (mf/deps min-value max-value value nillable? default integer?)
+         (mf/deps min-value max-value value is-nillable default is-integer)
          (fn []
            (when-let [node (mf/ref-val ref)]
              (let [new-value (-> (dom/get-value node)
@@ -74,7 +69,7 @@
                (cond
                  (d/num? new-value)
                  (-> new-value
-                     (cond-> integer? mth/round)
+                     (cond-> is-integer mth/round)
                      (d/max (/ sm/min-safe-int 2))
                      (d/min (/ sm/max-safe-int 2))
                      (cond-> (d/num? min-value)
@@ -82,7 +77,7 @@
                      (cond-> (d/num? max-value)
                        (d/min max-value)))
 
-                 nillable?
+                 is-nillable
                  default
 
                  :else value)))))
@@ -150,7 +145,7 @@
                                  max-value
 
                                  :else new-value)
-                     new-value (if integer? (mth/round new-value) new-value)]
+                     new-value (if is-integer (mth/round new-value) new-value)]
 
                  (apply-value event new-value))))))
 
@@ -197,7 +192,7 @@
          (fn [event]
            (when (mf/ref-val dirty-ref)
              (let [new-value (or @last-value* default)]
-               (if (or nillable? new-value)
+               (if (or is-nillable new-value)
                  (apply-value event new-value)
                  (update-input new-value)))
              (when (fn? on-blur)
@@ -214,33 +209,100 @@
                (dom/blur! node)))))
 
         handle-focus
-        (mf/use-fn
+        (mf/use-callback
          (mf/deps on-focus select-on-focus?)
          (fn [event]
-           (reset! last-value* (parse-value))
-           (let [target (dom/get-target event)]
-             (when on-focus
-               (mf/set-ref-val! dirty-ref true)
-               (on-focus event))
-             (when select-on-focus?
-               (dom/select-text! target)
-               ;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect
-               (.addEventListener target "mouseup" dom/prevent-default #js {:once true})))))
+           (when-not (= :dragging (mf/ref-val drag-state*))
+             (reset! last-value* (parse-value))
+             (let [target (dom/get-target event)]
+               (when on-focus
+                 (mf/set-ref-val! dirty-ref true)
+                 (on-focus event))
 
-        props (-> (obj/clone props)
-                  (obj/unset! "selectOnFocus")
-                  (obj/unset! "nillable")
-                  (obj/unset! "integer")
-                  (obj/set! "value" mf/undefined)
-                  (obj/set! "onChange" handle-change)
-                  (obj/set! "className" class)
-                  (obj/set! "type" "text")
-                  (obj/set! "ref" ref)
-                  (obj/set! "defaultValue" (fmt/format-number value))
-                  (obj/set! "title" title)
-                  (obj/set! "onKeyDown" handle-key-down)
-                  (obj/set! "onBlur" handle-blur)
-                  (obj/set! "onFocus" handle-focus))]
+               (when select-on-focus?
+                 (dom/select-text! target)
+                 ;; In webkit browsers the mouseup event will be called after the on-focus causing and unselect
+                 (.addEventListener target "mouseup" dom/prevent-default #js {:once true}))))))
+
+        on-scrub-pointer-down
+        (mf/use-fn
+         (mf/deps value value-str min-value max-value default)
+         (fn [event]
+           (let [disabled? (unchecked-get props "disabled")
+                 node      (mf/ref-val ref)
+                 is-focused (and (some? node) (dom/active? node))]
+             (when-not (or disabled? is-focused (= :multiple value-str))
+               (let [client-x  (.-clientX event)
+                     start-val (or value default 0)]
+                 (mf/set-ref-val! drag-state* :maybe-dragging)
+                 (mf/set-ref-val! drag-start-x* client-x)
+                 (mf/set-ref-val! drag-start-val* start-val)
+                 (dom/capture-pointer event))))))
+
+        on-scrub-pointer-move
+        (mf/use-fn
+         (mf/deps apply-value update-input step-value min-value max-value)
+         (fn [event]
+           (let [state (mf/ref-val drag-state*)]
+             (when (or (= state :maybe-dragging) (= state :dragging))
+               (let [client-x (.-clientX event)
+                     start-x  (mf/ref-val drag-start-x*)
+                     delta-x  (- client-x start-x)]
+                 (when (and (= state :maybe-dragging)
+                            (>= (js/Math.abs delta-x) 3))
+                   (mf/set-ref-val! drag-state* :dragging)
+                   (dom/add-class! (dom/get-body) "cursor-drag-scrub"))
+                 (when (= (mf/ref-val drag-state*) :dragging)
+                   (let [effective-step (cond
+                                          (.-shiftKey event) (* step-value 10)
+                                          (.-ctrlKey event)  (* step-value 0.1)
+                                          :else              step-value)
+                         steps   (js/Math.round (/ delta-x 1))
+                         new-val (+ (mf/ref-val drag-start-val*)
+                                    (* steps effective-step))
+                         new-val (cond-> new-val
+                                   (d/num? min-value) (mth/max min-value)
+                                   (d/num? max-value) (mth/min max-value))]
+                     (update-input new-val)
+                     (apply-value event new-val))))))))
+
+        on-scrub-pointer-up
+        (mf/use-fn
+         (mf/deps ref)
+         (fn [event]
+           (let [state (mf/ref-val drag-state*)]
+             (when (= state :maybe-dragging)
+               (mf/set-ref-val! drag-state* :idle)
+               (dom/release-pointer event)
+               (when-let [node (mf/ref-val ref)]
+                 (dom/focus! node)))
+             (when (= state :dragging)
+               (mf/set-ref-val! drag-state* :idle)
+               (dom/remove-class! (dom/get-body) "cursor-drag-scrub")
+               (dom/release-pointer event)))))
+
+        on-scrub-lost-pointer-capture
+        (mf/use-fn
+         (fn [_event]
+           (mf/set-ref-val! drag-state* :idle)
+           (dom/remove-class! (dom/get-body) "cursor-drag-scrub")))
+
+        props (mf/spread-props props
+                               {:value mf/undefined
+                                :on-change handle-change
+                                :class class
+                                :type "text"
+                                :ref ref
+                                :default-value (fmt/format-number value)
+                                :title title
+                                :disabled is-disabled
+                                :on-key-down handle-key-down
+                                :on-blur handle-blur
+                                :on-focus handle-focus
+                                :on-pointer-down on-scrub-pointer-down
+                                :on-pointer-move on-scrub-pointer-move
+                                :on-pointer-up on-scrub-pointer-up
+                                :on-lost-pointer-capture on-scrub-lost-pointer-capture})]
 
     (mf/with-effect [value]
       (when-let [input-node (mf/ref-val ref)]
@@ -258,4 +320,4 @@
         (let [key (events/listen node "wheel" handle-mouse-wheel #js {:passive false})]
           #(events/unlistenByKey key))))
 
-    [:> :input props]))
+    [:> :input props]))
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/components/org_avatar.cljs b/frontend/src/app/main/ui/components/org_avatar.cljs
index 43521a1dd7..4a9829de22 100644
--- a/frontend/src/app/main/ui/components/org_avatar.cljs
+++ b/frontend/src/app/main/ui/components/org_avatar.cljs
@@ -11,7 +11,6 @@
    [rumext.v2 :as mf]))
 
 (mf/defc org-avatar*
-  {::mf/props :obj}
   [{:keys [org size]}]
   (let [name         (:name org)
         custom-photo (:custom-photo org)
diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs
deleted file mode 100644
index fb8dad874a..0000000000
--- a/frontend/src/app/main/ui/components/tab_container.cljs
+++ /dev/null
@@ -1,74 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC Sucursal en España SL
-
-(ns app.main.ui.components.tab-container
-  (:require-macros [app.main.style :as stl])
-  (:require
-   [app.common.data :as d]
-   [app.common.data.macros :as dm]
-   [app.main.ui.icons :as deprecated-icon]
-   [app.util.array :as array]
-   [app.util.dom :as dom]
-   [app.util.i18n :refer [tr]]
-   [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
-
-(set! *warn-on-infer* false)
-
-(mf/defc tab-element
-  {::mf/wrap-props false}
-  [{:keys [children]}]
-  children)
-
-(mf/defc tab-container
-  {::mf/wrap-props false}
-  [{:keys [children selected on-change-tab collapsable handle-collapse header-class content-class]}]
-  (let [children  (-> (array/normalize-to-array children)
-                      (array/without-nils))
-
-        selected* (mf/use-state #(or selected (-> children first .-props .-id)))
-        selected  (or selected @selected*)
-
-        on-click  (mf/use-fn
-                   (mf/deps on-change-tab)
-                   (fn [event]
-                     (let [id (-> event
-                                  (dom/get-current-target)
-                                  (dom/get-data "id")
-                                  (keyword))]
-                       (reset! selected* id)
-                       (when (fn? on-change-tab)
-                         (on-change-tab id)))))]
-
-    [:section {:class (stl/css :tab-container)}
-     [:header {:class (dm/str header-class " " (stl/css :tab-container-tabs))}
-      (when ^boolean collapsable
-        [:button
-         {:on-click handle-collapse
-          :class (stl/css :collapse-sidebar)
-          :aria-label (tr "workspace.sidebar.collapse")}
-         deprecated-icon/arrow])
-      [:div  {:class (stl/css :tab-container-tab-wrapper)}
-       (for [tab children]
-         (let [props (.-props tab)
-               id    (.-id props)
-               title (.-title props)
-               sid   (d/name id)
-               tooltip (if (string? title) title nil)]
-           [:div {:key (str/concat "tab-" sid)
-                  :title tooltip
-                  :data-id sid
-                  :data-testid sid
-                  :on-click on-click
-                  :class  (stl/css-case
-                           :tab-container-tab-title true
-                           :current (= selected id))}
-            [:span {:class (stl/css :content)}
-             title]]))]]
-
-     [:div {:class (dm/str content-class " " (stl/css  :tab-container-content))}
-      (d/seek #(= selected (-> % .-props .-id))
-              children)]]))
diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss
deleted file mode 100644
index 54fa7f0627..0000000000
--- a/frontend/src/app/main/ui/components/tab_container.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v. 2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/.
-//
-// Copyright (c) KALEIDOS INC Sucursal en España SL
-@use "refactor/common-refactor.scss" as deprecated;
-
-.tab-container {
-  display: grid;
-  grid-template-rows: deprecated.$s-32 1fr;
-  height: 100%;
-}
-
-.tab-container-tabs {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: deprecated.$s-2;
-  border-radius: deprecated.$br-8;
-  background: var(--tabs-background-color);
-  cursor: pointer;
-  font-size: deprecated.$fs-12;
-  height: 100%;
-}
-
-.tab-container-tab-wrapper {
-  display: grid;
-  grid-auto-flow: column;
-  height: 100%;
-  width: 100%;
-}
-
-.tab-container-tab-title {
-  @include deprecated.flex-center;
-
-  height: 100%;
-  width: 100%;
-  padding: 0 deprecated.$s-8;
-  margin: 0;
-  border-radius: deprecated.$br-8;
-  background-color: transparent;
-  color: var(--tab-foreground-color);
-  border: deprecated.$s-2 solid var(--tab-border-color);
-  min-width: 0;
-
-  svg {
-    @extend %button-icon;
-
-    stroke: var(--tab-foreground-color);
-  }
-
-  .content {
-    @include deprecated.headline-small-typography;
-
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &.current,
-  &.current:hover {
-    background: var(--tab-background-color-selected);
-    border-color: var(--tab-border-color-selected);
-    color: var(--tab-foreground-color-selected);
-
-    svg {
-      stroke: var(--tab-foreground-color-selected);
-    }
-  }
-
-  &:hover {
-    color: var(--tab-foreground-color-hover);
-
-    svg {
-      stroke: var(--tab-foreground-color-hover);
-    }
-  }
-}
-
-.collapse-sidebar {
-  @include deprecated.flex-center;
-  @include deprecated.button-style;
-
-  height: 100%;
-  width: deprecated.$s-24;
-  min-width: deprecated.$s-24;
-  padding: 0 deprecated.$s-6;
-  border-radius: deprecated.$br-5;
-
-  svg {
-    @include deprecated.flex-center;
-
-    height: deprecated.$s-16;
-    width: deprecated.$s-16;
-    stroke: var(--icon-foreground);
-    transform: rotate(180deg);
-    fill: none;
-    color: transparent;
-  }
-
-  &:hover {
-    svg {
-      stroke: var(--icon-foreground-hover);
-    }
-  }
-
-  &.collapsed {
-    svg {
-      transform: rotate(0deg);
-      padding: 0 0 0 deprecated.$s-6;
-    }
-  }
-}
-
-.tab-container-content {
-  overflow: hidden auto;
-  display: flex;
-  flex-direction: column;
-}
-
-// Firefox doesn't respect scrollbar-gutter
-@supports (-moz-appearance: none) {
-  .tab-container-content {
-    padding-right: deprecated.$s-8;
-  }
-}
diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs
index cb73367c4f..c7d6aed7a0 100644
--- a/frontend/src/app/main/ui/dashboard/team.cljs
+++ b/frontend/src/app/main/ui/dashboard/team.cljs
@@ -72,9 +72,8 @@
 (def ^:private group-icon
   (deprecated-icon/icon-xref :group (stl/css :group-icon)))
 
-(mf/defc header
-  {::mf/wrap [mf/memo]
-   ::mf/props :obj}
+(mf/defc header*
+  {::mf/wrap [mf/memo]}
   [{:keys [section team profile]}]
   (let [on-nav-members       (mf/use-fn #(st/emit! (dcm/go-to-dashboard-members)))
         on-nav-settings      (mf/use-fn #(st/emit! (dcm/go-to-dashboard-settings)))
@@ -340,8 +339,7 @@
 ;; MEMBERS SECTION
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(mf/defc member-info
-  {::mf/props :obj}
+(mf/defc member-info*
   [{:keys [member profile]}]
   (let [is-you? (= (:id profile) (:id member))]
     [:*
@@ -553,7 +551,7 @@
 
     [:div {:class (stl/css :table-row)}
      [:div {:class (stl/css :table-field :field-name)}
-      [:& member-info {:member member :profile profile}]]
+      [:> member-info* {:member member :profile profile}]]
 
      [:div {:class (stl/css :table-field :field-roles)}
       [:> rol-info*  {:member member
@@ -623,9 +621,9 @@
     (st/emit! (dtm/fetch-members)))
 
   [:*
-   [:& header {:section :dashboard-team-members
-               :team team
-               :profile profile}]
+   [:> header* {:section :dashboard-team-members
+                :team team
+                :profile profile}]
    [:section {:class (stl/css :dashboard-container :dashboard-team-members)}
 
     [:> team-members*
@@ -1199,9 +1197,9 @@
     (st/emit! (dtm/fetch-invitations)))
 
   [:*
-   [:& header {:section :dashboard-team-invitations
-               :team team
-               :profile profile}]
+   [:> header* {:section :dashboard-team-invitations
+                :team team
+                :profile profile}]
    [:section {:class (stl/css :dashboard-team-invitations)}
 
     [:> invitation-section* {:team team :profile profile}]
@@ -1479,7 +1477,7 @@
       (st/emit! (dtm/fetch-webhooks)))
 
     [:*
-     [:& header {:team team :section :dashboard-team-webhooks}]
+     [:> header* {:team team :section :dashboard-team-webhooks}]
      [:section {:class (stl/css :dashboard-container :dashboard-team-webhooks)}
       [:*
        [:> webhooks-hero* {}]
@@ -1586,7 +1584,7 @@
                 (dtm/fetch-stats)))
 
     [:*
-     [:& header {:section :dashboard-team-settings :team team}]
+     [:> header* {:section :dashboard-team-settings :team team}]
      [:section {:class (stl/css :dashboard-team-settings)}
       [:div {:class (stl/css :settings-container)}
        [:div {:class (stl/css :block :info-block)}
diff --git a/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs b/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs
index 5e50589027..d83164ab98 100644
--- a/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs
+++ b/frontend/src/app/main/ui/ds/layout/tab_switcher.cljs
@@ -48,7 +48,7 @@
 
 (mf/defc tab-nav*
   {::mf/private true
-   ::mf/memo true}
+   ::mf/wrap [mf/memo]}
   [{:keys [ref tabs selected on-click button-position action-button] :rest props}]
   (let [nav-class
         (stl/css-case :tab-nav true
diff --git a/frontend/src/app/main/ui/shapes/svg_raw.cljs b/frontend/src/app/main/ui/shapes/svg_raw.cljs
index 9cf9a7521d..12db38a3af 100644
--- a/frontend/src/app/main/ui/shapes/svg_raw.cljs
+++ b/frontend/src/app/main/ui/shapes/svg_raw.cljs
@@ -22,14 +22,10 @@
 ;; Context to store a re-mapping of the ids
 (def svg-ids-ctx (mf/create-context nil))
 
-(mf/defc svg-root
-  {::mf/wrap-props false}
-  [props]
+(mf/defc svg-root*
+  [{:keys [shape children]}]
 
-  (let [shape       (unchecked-get props "shape")
-        children    (unchecked-get props "children")
-
-        x           (dm/get-prop shape :x)
+  (let [x           (dm/get-prop shape :x)
         y           (dm/get-prop shape :y)
         w           (dm/get-prop shape :width)
         h           (dm/get-prop shape :height)
@@ -53,13 +49,9 @@
      [:g.svg-raw {:transform (gsh/transform-str shape)}
       [:> "svg" props children]]]))
 
-(mf/defc svg-element
-  {::mf/wrap-props false}
-  [props]
-  (let [shape       (unchecked-get props "shape")
-        children    (unchecked-get props "children")
-
-        ids-mapping (mf/use-ctx svg-ids-ctx)
+(mf/defc svg-element*
+  [{:keys [shape children]}]
+  (let [ids-mapping (mf/use-ctx svg-ids-ctx)
         render-id   (mf/use-ctx muc/render-id)
 
         tag         (-> shape :content :tag)
@@ -119,13 +111,13 @@
         [:style style-content]
 
         ^boolean svg-root?
-        [:& svg-root {:shape shape}
+        [:> svg-root* {:shape shape}
          (for [item childs]
            [:& shape-wrapper {:shape item :key (dm/str (:id item))}])]
 
         (and ^boolean svg-tag?
              ^boolean valid-tag?)
-        [:& svg-element {:shape shape}
+        [:> svg-element* {:shape shape}
          (for [item childs]
            [:& shape-wrapper {:shape item :key (dm/str (:id item))}])]
 
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
index 7010e84371..ff8b733433 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
@@ -13,7 +13,7 @@
    [app.common.types.color :as cc]
    [app.common.types.fills :as types.fills]
    [app.main.features :as features]
-   [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.reorder-handler :refer [reorder-handler*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@@ -147,7 +147,7 @@
 
      [:div {:class (stl/css :offset-input-wrapper)}
       [:span {:class (stl/css :icon-text)} "%"]
-      [:> numeric-input*
+      [:> deprecated-input/numeric-input*
        {:value (-> offset offset->string)
         :on-change handle-change-offset
         :default 100
diff --git a/frontend/src/app/main/ui/workspace/nudge.cljs b/frontend/src/app/main/ui/workspace/nudge.cljs
index f4e576f128..52975c33d9 100644
--- a/frontend/src/app/main/ui/workspace/nudge.cljs
+++ b/frontend/src/app/main/ui/workspace/nudge.cljs
@@ -11,7 +11,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 :as deprecated-input]
    [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -50,14 +50,14 @@
        [:div {:class (stl/css :input-wrapper)}
         [:label {:class (stl/css :modal-msg)
                  :for "nudge-small"} (tr "modals.small-nudge")]
-        [:> numeric-input* {:min 0.01
-                            :id "nudge-small"
-                            :value (:small nudge)
-                            :on-change update-small}]]
+        [:> deprecated-input/numeric-input* {:min 0.01
+                                             :id "nudge-small"
+                                             :value (:small nudge)
+                                             :on-change update-small}]]
        [:div {:class (stl/css :input-wrapper)}
         [:label {:class (stl/css :modal-msg)
                  :for "nudge-big"} (tr "modals.big-nudge")]
-        [:> numeric-input* {:min 0.01
-                            :id "nudge-big"
-                            :value (:big nudge)
-                            :on-change update-big}]]]]]))
+        [:> deprecated-input/numeric-input* {:min 0.01
+                                             :id "nudge-big"
+                                             :value (:big nudge)
+                                             :on-change update-big}]]]]]))
diff --git a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs
index 1724072b61..b5a16d2f5d 100644
--- a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs
@@ -248,10 +248,9 @@
         (get-contrast-color background-color)))
     (get-contrast-color background-color)))
 
-(mf/defc text-editor-html
+(mf/defc text-editor-html*
   "Text editor (HTML)"
-  {::mf/wrap [mf/memo]
-   ::mf/props :obj}
+  {::mf/wrap [mf/memo]}
   [{:keys [shape canvas-ref render-wasm?] :or {render-wasm? false}}]
   (let [content          (:content shape)
         shape-id         (dm/get-prop shape :id)
@@ -485,7 +484,7 @@
 
      [:foreignObject {:x x :y y :width width :height height}
       [:div {:style style}
-       [:& text-editor-html {:shape shape
-                             :canvas-ref canvas-ref
-                             :render-wasm? render-wasm?
-                             :key (dm/str shape-id)}]]]]))
+       [:> text-editor-html* {:shape shape
+                              :canvas-ref canvas-ref
+                              :render-wasm? render-wasm?
+                              :key (dm/str shape-id)}]]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
index 16feaa68d0..5f3aef23a3 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
@@ -300,7 +300,7 @@
                            :else
                            "--")
             :min 0
-            :nillable true
+            :is-nillable true
             :on-change on-all-radius-change
             :value (if all-values-equal?
                      (if (nil? (:r1 values))
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 a518622fb8..66b12b9955 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
@@ -13,7 +13,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 :as deprecated-input]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@@ -163,11 +163,11 @@
        (if (= type :square)
          [:div {:class (stl/css :grid-size)
                 :title (tr "workspace.options.size")}
-          [:> numeric-input* {:min 0.01
-                              :value (or (:size params) "")
-                              :no-validate true
-                              :className (stl/css :numeric-input)
-                              :on-change (handle-change :params :size)}]]
+          [:> deprecated-input/numeric-input* {:min 0.01
+                                               :value (or (:size params) "")
+                                               :no-validate true
+                                               :class (stl/css :numeric-input)
+                                               :on-change (handle-change :params :size)}]]
 
          [:div {:class (stl/css :editable-select-wrapper)}
           [:& editable-select {:value (:size params)
@@ -256,33 +256,33 @@
               (if (= :row type)
                 "H"
                 "W")]
-             [:> numeric-input* {:placeholder "Auto"
-                                 :on-change handle-change-item-length
-                                 :nillable true
-                                 :className (stl/css :numeric-input)
-                                 :value (or (:item-length params) "")}]]
+             [:> deprecated-input/numeric-input* {:placeholder "Auto"
+                                                  :on-change handle-change-item-length
+                                                  :is-nillable true
+                                                  :class (stl/css :numeric-input)
+                                                  :value (or (:item-length params) "")}]]
 
             [:div {:class (stl/css :gutter)
                    :title (tr "workspace.options.grid.params.gutter")}
              [:span {:class (stl/css-case :icon true
                                           :rotated (= type :row))}
               deprecated-icon/gap-horizontal]
-             [:> numeric-input* {:placeholder "0"
-                                 :on-change (handle-change :params :gutter)
-                                 :nillable true
-                                 :className (stl/css :numeric-input)
-                                 :value (or (:gutter params) 0)}]]
+             [:> deprecated-input/numeric-input* {:placeholder "0"
+                                                  :on-change (handle-change :params :gutter)
+                                                  :is-nillable true
+                                                  :class (stl/css :numeric-input)
+                                                  :value (or (:gutter params) 0)}]]
 
             [:div {:class (stl/css :margin)
                    :title (tr "workspace.options.grid.params.margin")}
              [:span {:class (stl/css-case :icon true
                                           :rotated (= type :column))}
               deprecated-icon/grid-margin]
-             [:> numeric-input* {:placeholder "0"
-                                 :on-change (handle-change :params :margin)
-                                 :nillable true
-                                 :className (stl/css :numeric-input)
-                                 :value (or (:margin params) 0)}]]
+             [:> deprecated-input/numeric-input* {:placeholder "0"
+                                                  :on-change (handle-change :params :margin)
+                                                  :is-nillable true
+                                                  :class (stl/css :numeric-input)
+                                                  :value (or (:margin params) 0)}]]
 
             [:button {:class (stl/css-case :show-more-options true
                                            :selected show-more-options?)
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 2a8b2adc6a..34e27560de 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
@@ -16,7 +16,7 @@
    [app.main.data.workspace.grid-layout.editor :as dwge]
    [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 :as deprecated-input]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
@@ -225,23 +225,23 @@
            [:div {:class (stl/css :grid-coord-group)}
             [:span {:class (stl/css :icon)} deprecated-icon/flex-vertical]
             [:div {:class (stl/css :coord-input)}
-             [:> numeric-input*
+             [:> deprecated-input/numeric-input*
               {:placeholder "--"
                :title "Column"
                :on-click #(dom/select-target %)
                :on-change (partial on-grid-coordinates :all :column)
-               :integer true
+               :is-integer true
                :value column}]]]
 
            [:div {:class (stl/css :grid-coord-group)}
             [:span {:class (stl/css :icon)} deprecated-icon/flex-horizontal]
             [:div {:class (stl/css :coord-input)}
-             [:> numeric-input*
+             [:> deprecated-input/numeric-input*
               {:placeholder "--"
                :title "Row"
                :on-click #(dom/select-target %)
                :on-change (partial on-grid-coordinates :all :row)
-               :integer true
+               :is-integer true
                :value row}]]]])
 
         (when (and (not multiple?) (or (= :manual cell-mode) (= :area cell-mode)))
@@ -249,35 +249,35 @@
            [:div {:class (stl/css :grid-coord-group)}
             [:span {:class (stl/css :icon)} deprecated-icon/flex-vertical]
             [:div {:class (stl/css :coord-input)}
-             [:> numeric-input*
+             [:> deprecated-input/numeric-input*
               {:placeholder "--"
                :on-pointer-down #(dom/select-target %)
                :on-change (partial on-grid-coordinates :start :column)
-               :integer true
+               :is-integer true
                :value column}]]
             [:div {:class (stl/css :coord-input)}
-             [:> numeric-input*
+             [:> deprecated-input/numeric-input*
               {:placeholder "--"
                :on-pointer-down #(dom/select-target %)
                :on-change (partial on-grid-coordinates :end :column)
-               :integer true
+               :is-integer true
                :value column-end}]]]
 
            [:div {:class (stl/css :grid-coord-group)}
             [:span {:class (stl/css :icon)} deprecated-icon/flex-horizontal]
             [:div {:class (stl/css :coord-input :double)}
-             [:> numeric-input*
+             [:> deprecated-input/numeric-input*
               {:placeholder "--"
                :on-pointer-down #(dom/select-target %)
                :on-change (partial on-grid-coordinates :start :row)
-               :integer true
+               :is-integer true
                :value row}]]
             [:div {:class (stl/css :coord-input)}
-             [:> numeric-input*
+             [:> deprecated-input/numeric-input*
               {:placeholder "--"
                :on-pointer-down #(dom/select-target %)
                :on-change (partial on-grid-coordinates :end :row)
-               :integer true
+               :is-integer true
                :value row-end}]]]])
 
         [:div {:class (stl/css :row)}
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 c636efcc92..980a2aa336 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
@@ -302,7 +302,7 @@
           :on-change handle-opacity-change
           :min 0
           :max 100
-          :className (stl/css :numeric-input)}]]
+          :class (stl/css :numeric-input)}]]
 
        [:div {:class (stl/css :actions)}
         (cond
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 e321370e33..654eccaf4c 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
@@ -401,7 +401,7 @@
           :on-change on-p1-change
           :on-focus on-focus-p1
           :on-blur on-padding-blur
-          :nillable true
+          :is-nillable true
           :min 0
           :value p1}]])
 
@@ -431,14 +431,14 @@
         [:span {:class (stl/css :icon)}
          deprecated-icon/padding-left-right]
         [:> deprecated-input/numeric-input*
-         {:className (stl/css :numeric-input)
+         {:class (stl/css :numeric-input)
           :placeholder (tr "settings.multiple")
           :aria-label (tr "workspace.layout-grid.editor.padding.horizontal")
           :on-change on-p2-change
           :on-focus on-focus-p2
           :on-blur on-padding-blur
           :min 0
-          :nillable true
+          :is-nillable true
           :value p2}]])]))
 
 (mf/defc multiple-padding-selection*
@@ -771,10 +771,10 @@
           :on-focus on-focus-row-gap
           :on-change on-row-gap-change
           :on-blur on-gap-blur
-          :nillable true
+          :is-nillable true
           :min 0
           :value (:row-gap value)
-          :disabled row-gap-disabled?}]])
+          :is-disabled row-gap-disabled?}]])
 
      (if token-numeric-inputs
        [:> numeric-input-wrapper*
@@ -810,7 +810,7 @@
           :on-focus on-focus-column-gap
           :on-change on-column-gap-change
           :on-blur on-gap-blur
-          :nillable true
+          :is-nillable true
           :min 0
           :value (:column-gap value)
           :disabled col-gap-disabled?}]])]))
@@ -998,7 +998,7 @@
                                             :on-change #(set-column-value type index %)
                                             :placeholder "--"
                                             :min 0
-                                            :disabled (= :auto (:type column))}]]
+                                            :is-disabled (= :auto (:type column))}]]
 
       [:div {:class (stl/css :track-info-unit)}
        [:& select {:class (stl/css :track-info-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 065828c8c3..598fd69b1b 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
@@ -163,7 +163,7 @@
                                              :on-focus on-focus-m1
                                              :on-change on-m1-change
                                              :on-blur on-blur
-                                             :nillable true
+                                             :is-nillable true
                                              :value m1}]])
 
      (if token-numeric-inputs
@@ -194,7 +194,7 @@
                                              :on-focus on-focus-m2
                                              :on-change on-m2-change
                                              :on-blur on-blur
-                                             :nillable true
+                                             :is-nillable true
                                              :value m2}]])]))
 
 (mf/defc margin-multiple*
@@ -287,7 +287,7 @@
                                              :on-focus on-focus-m1
                                              :on-change on-m1-change
                                              :on-blur on-blur
-                                             :nillable true
+                                             :is-nillable true
                                              :value m1}]])
      (if token-numeric-inputs
        [:> numeric-input-wrapper*
@@ -316,7 +316,7 @@
                                              :on-focus on-focus-m2
                                              :on-change on-m2-change
                                              :on-blur on-blur
-                                             :nillable true
+                                             :is-nillable true
                                              :value m2}]])
 
      (if token-numeric-inputs
@@ -346,7 +346,7 @@
                                              :on-focus on-focus-m3
                                              :on-change on-m3-change
                                              :on-blur on-blur
-                                             :nillable true
+                                             :is-nillable true
                                              :value m3}]])
 
      (if token-numeric-inputs
@@ -375,7 +375,7 @@
                                              :on-focus on-focus-m4
                                              :on-change on-m4-change
                                              :on-blur on-blur
-                                             :nillable true
+                                             :is-nillable true
                                              :value m4}]])]))
 
 (mf/defc margin-section*
@@ -619,7 +619,7 @@
              :on-focus dom/select-target
              :on-change on-layout-item-min-w-change
              :value (get values :layout-item-min-w)
-             :nillable true}]])
+             :is-nillable true}]])
 
         (if token-numeric-inputs
           [:> numeric-input-wrapper*
@@ -649,7 +649,7 @@
              :on-focus dom/select-target
              :on-change on-layout-item-max-w-change
              :value (get values :layout-item-max-w)
-             :nillable true}]])])
+             :is-nillable true}]])])
 
      (when (= v-sizing :fill)
        [:div {:class (stl/css :vertical-fill)}
@@ -681,7 +681,7 @@
              :on-focus dom/select-target
              :on-change on-layout-item-min-h-change
              :value (get values :layout-item-min-h)
-             :nillable true}]])
+             :is-nillable true}]])
 
         (if token-numeric-inputs
           [:> numeric-input-wrapper*
@@ -712,7 +712,7 @@
              :on-focus dom/select-target
              :on-change on-layout-item-max-h-change
              :value (get values :layout-item-max-h)
-             :nillable true}]])])]))
+             :is-nillable true}]])])]))
 
 (defn- check-layout-item-menu-props
   [old-props new-props]
@@ -912,7 +912,7 @@
               :placeholder "--"
               :on-focus #(dom/select-target %)
               :on-change #(on-change-z-index %)
-              :nillable true
+              :is-nillable true
               :value (:layout-item-z-index values)}]]])
 
         [:div {:class (stl/css :behavior-row)}
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 8334acbebb..f4a454af54 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
@@ -571,7 +571,7 @@
               :no-validate true
               :placeholder (if (= :multiple (:width values)) (tr "settings.multiple") "--")
               :on-change on-width-change
-              :disabled disabled-width-sizing?
+              :is-disabled disabled-width-sizing?
               :class (stl/css :numeric-input)
               :value (:width values)}]]
            [:div {:class (stl/css-case :height true
@@ -582,7 +582,7 @@
                                                  :no-validate true
                                                  :placeholder (if (= :multiple (:height values)) (tr "settings.multiple") "--")
                                                  :on-change on-height-change
-                                                 :disabled disabled-height-sizing?
+                                                 :is-disabled disabled-height-sizing?
                                                  :class (stl/css :numeric-input)
                                                  :value (:height values)}]]])
 
@@ -632,7 +632,7 @@
             [:> deprecated-input/numeric-input* {:no-validate true
                                                  :placeholder (if (= :multiple (:x values)) (tr "settings.multiple") "--")
                                                  :on-change on-pos-x-change
-                                                 :disabled disabled-position?
+                                                 :is-disabled disabled-position?
                                                  :class (stl/css :numeric-input)
                                                  :value (:x values)}]]
 
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 e5ee3647bd..dc242cb19c 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
@@ -23,7 +23,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 :as deprecated-input]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.components.search-bar :refer [search-bar*]]
    [app.main.ui.components.select :refer [select]]
@@ -396,7 +396,7 @@
       [:span {:class (stl/css :icon)
               :alt (tr "workspace.options.text-options.line-height")}
        deprecated-icon/text-lineheight]
-      [:> numeric-input*
+      [:> deprecated-input/numeric-input*
        {:min -200
         :max 200
         :step 0.1
@@ -405,7 +405,7 @@
         :aria-label (tr "inspect.attributes.typography.line-height")
         :value (attr->string line-height)
         :placeholder (if (= :multiple line-height) (tr "settings.multiple") "--")
-        :nillable (= :multiple line-height)
+        :is-nillable (= :multiple line-height)
         :on-change #(handle-change % :line-height)
         :on-blur on-blur}]]
 
@@ -415,7 +415,7 @@
        {:class (stl/css :icon)
         :alt (tr "workspace.options.text-options.letter-spacing")}
        deprecated-icon/text-letterspacing]
-      [:> numeric-input*
+      [:> deprecated-input/numeric-input*
        {:min -200
         :max 200
         :step 0.1
@@ -425,7 +425,7 @@
         :value (attr->string letter-spacing)
         :placeholder (if (= :multiple letter-spacing) (tr "settings.multiple") "--")
         :on-change #(handle-change % :letter-spacing)
-        :nillable (= :multiple letter-spacing)
+        :is-nillable (= :multiple letter-spacing)
         :on-blur on-blur}]]]))
 
 (mf/defc text-transform-options*
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 6fd4f3c654..3433048e26 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
@@ -17,7 +17,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.color-input :refer [color-input*]]
-   [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.reorder-handler :refer [reorder-handler*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@@ -54,17 +54,17 @@
    (when opacity
      [:div {:class (stl/css :opacity-element-wrapper)}
       [:span {:class (stl/css :icon-text)} "%"]
-      [:> numeric-input* {:value (-> color :opacity opacity->string)
-                          :class (stl/css :opacity-input)
-                          :placeholder "--"
-                          :select-on-focus select-on-focus
-                          :on-focus on-focus
-                          :on-blur on-blur
-                          :on-change on-opacity-change
-                          :data-testid "opacity-input"
-                          :default 100
-                          :min 0
-                          :max 100}]])])
+      [:> deprecated-input/numeric-input* {:value (-> color :opacity opacity->string)
+                                           :class (stl/css :opacity-input)
+                                           :placeholder "--"
+                                           :select-on-focus select-on-focus
+                                           :on-focus on-focus
+                                           :on-blur on-blur
+                                           :on-change on-opacity-change
+                                           :data-testid "opacity-input"
+                                           :default 100
+                                           :min 0
+                                           :max 100}]])])
 
 (mf/defc color-token-row*
   {::mf/private true}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.cljs
index 82dae0e9f7..449ad67c83 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.cljs
@@ -11,7 +11,7 @@
    [app.main.data.workspace :as dw]
    [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 :as deprecated-input]
    [app.main.ui.components.reorder-handler :refer [reorder-handler*]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@@ -171,39 +171,39 @@
                  :title (tr "workspace.options.shadow-options.offsetx")}
            [:span {:class (stl/css :shadow-advanced-label)}
             "X"]
-           [:> numeric-input* {:no-validate true
-                               :placeholder "--"
-                               :on-change on-update-offset-x
-                               :value (:offset-x shadow)}]]
+           [:> deprecated-input/numeric-input* {:no-validate true
+                                                :placeholder "--"
+                                                :on-change on-update-offset-x
+                                                :value (:offset-x shadow)}]]
 
           [:div {:class (stl/css :shadow-advanced-blur)
                  :title (tr "workspace.options.shadow-options.blur")}
            [:span {:class (stl/css :shadow-advanced-label)}
             (tr "workspace.options.shadow-options.blur")]
-           [:> numeric-input* {:no-validate true
-                               :placeholder "--"
-                               :on-change on-update-blur
-                               :min 0
-                               :value (:blur shadow)}]]
+           [:> deprecated-input/numeric-input* {:no-validate true
+                                                :placeholder "--"
+                                                :on-change on-update-blur
+                                                :min 0
+                                                :value (:blur shadow)}]]
 
           [:div {:class (stl/css :shadow-advanced-spread)
                  :title (tr "workspace.options.shadow-options.spread")}
            [:span {:class (stl/css :shadow-advanced-label)}
             (tr "workspace.options.shadow-options.spread")]
-           [:> numeric-input* {:no-validate true
-                               :placeholder "--"
-                               :on-change on-update-spread
-                               :value (:spread shadow)}]]]
+           [:> deprecated-input/numeric-input* {:no-validate true
+                                                :placeholder "--"
+                                                :on-change on-update-spread
+                                                :value (:spread shadow)}]]]
 
          [:div {:class (stl/css :shadow-advanced-row)}
           [:div {:class (stl/css :shadow-advanced-offset-y)
                  :title (tr "workspace.options.shadow-options.offsety")}
            [:span {:class (stl/css :shadow-advanced-label)}
             "Y"]
-           [:> numeric-input* {:no-validate true
-                               :placeholder "--"
-                               :on-change on-update-offset-y
-                               :value (:offset-y shadow)}]]
+           [:> deprecated-input/numeric-input* {:no-validate true
+                                                :placeholder "--"
+                                                :on-change on-update-offset-y
+                                                :value (:offset-y shadow)}]]
 
           [:> color-row* {:class (stl/css :shadow-advanced-color)
                           :color (:color shadow)
diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.cljs b/frontend/src/app/main/ui/workspace/viewport/presence.cljs
index 7924fcb5fe..dccba55243 100644
--- a/frontend/src/app/main/ui/workspace/viewport/presence.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/presence.cljs
@@ -23,9 +23,8 @@
           "11.78,1.82,11.05L11.58,1.30ZL11.58,1.30ZM1.37,12.15L2.90,"
           "13.68L1.67,13.89L1.165,13.39L1.37,12.15ZL1.37,12.15Z"))
 
-(mf/defc session-cursor
-  {::mf/props :obj
-   ::mf/memo true}
+(mf/defc session-cursor*
+  {::mf/wrap [mf/memo]}
   [{:keys [session profile zoom]}]
   (let [point     (:point session)
         bg-color  (:color session)
@@ -70,7 +69,7 @@
         (fn [] (rx/dispose! sem))))
 
     (for [session sessions]
-      [:& session-cursor
+      [:> session-cursor*
        {:session session
         :zoom zoom
         :profile (get profiles (:profile-id session))