diff --git a/CHANGES.md b/CHANGES.md
index a7cb4695ac..dec7abc279 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -41,8 +41,9 @@
 - Fix selection problems when devtools open [Taiga #11950](https://tree.taiga.io/project/penpot/issue/11950)
 - Fix long font names overlap [Taiga #11844](https://tree.taiga.io/project/penpot/issue/11844)
 - Fix paste behavior according to the selected element [Taiga #11979](https://tree.taiga.io/project/penpot/issue/11979)
-- Fix problem with export size [#7160](https://github.com/penpot/penpot/issues/7160)
+- Fix problem with export size [Github #7160](https://github.com/penpot/penpot/issues/7160)
 - Fix multi level library dependencies [Taiga #12155](https://tree.taiga.io/project/penpot/issue/12155)
+- Fix component context menu options order in assets tab [Taiga #11941](https://tree.taiga.io/project/penpot/issue/11941)
 
 ## 2.10.0
 
diff --git a/frontend/src/app/main/ui/components/editable_label.cljs b/frontend/src/app/main/ui/components/editable_label.cljs
index 744804a1eb..95103ddb67 100644
--- a/frontend/src/app/main/ui/components/editable_label.cljs
+++ b/frontend/src/app/main/ui/components/editable_label.cljs
@@ -7,29 +7,15 @@
 (ns app.main.ui.components.editable-label
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.data.macros :as dm]
    [app.main.constants :refer [max-input-length]]
-   [app.main.ui.icons :as deprecated-icon]
    [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
    [app.util.timers :as timers]
    [rumext.v2 :as mf]))
 
-(mf/defc editable-label
-  {::mf/wrap-props false}
-  [props]
-  (let [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")
-        display-value           (unchecked-get props "display-value")
-
-
-        final-class       (dm/str class " " (stl/css :editable-label))
-        input-ref         (mf/use-ref nil)
+(mf/defc editable-label*
+  [{:keys [value class-input class-label is-editing tooltip display-value on-change on-cancel]}]
+  (let [input-ref         (mf/use-ref nil)
         internal-editing* (mf/use-state false)
         internal-editing? (deref internal-editing*)
 
@@ -63,14 +49,6 @@
            (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)
@@ -82,26 +60,18 @@
              (kbd/enter? event)
              (accept-edition))))]
 
-    (mf/with-effect [editing? internal-editing? start-edition]
-      (when (and editing? (not internal-editing?))
+    (mf/with-effect [is-editing internal-editing? start-edition]
+      (when (and is-editing (not internal-editing?))
         (start-edition)))
 
     (if ^boolean internal-editing?
-      [:div {:class final-class}
-       [:input
-        {:class (stl/css :editable-label-input)
-         :ref input-ref
-         :default-value value
-         :on-key-up on-key-up
-         :on-double-click on-dbl-click
-         :max-length max-input-length
-         :on-blur cancel-edition}]
+      [:input {:class [(stl/css :editable-label-input) class-input]
+               :ref input-ref
+               :default-value value
+               :on-key-up on-key-up
+               :max-length max-input-length
+               :on-blur cancel-edition}]
 
-       [:span {:class (stl/css :editable-label-close)
-               :on-click cancel-edition}
-        deprecated-icon/delete-text]]
-
-      [:span {:class final-class
-              :title tooltip
-              :on-double-click on-dbl-click}
+      [:span {:class [(stl/css :editable-label-text) class-label]
+              :title tooltip}
        display-value])))
diff --git a/frontend/src/app/main/ui/components/editable_label.scss b/frontend/src/app/main/ui/components/editable_label.scss
index b0669c92c1..29a57d551d 100644
--- a/frontend/src/app/main/ui/components/editable_label.scss
+++ b/frontend/src/app/main/ui/components/editable_label.scss
@@ -4,34 +4,26 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/colors.scss" as *;
+@use "ds/typography.scss" as t;
 
 .editable-label-input {
-  @include deprecated.textEllipsis;
-  @include deprecated.bodySmallTypography;
-  @include deprecated.removeInputStyle;
-  flex-grow: 1;
-  height: deprecated.$s-28;
-  max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
+  @include t.use-typography("body-small");
+  outline: none;
+  width: 100%;
+  height: 100%;
   margin: 0;
-  padding-left: deprecated.$s-6;
-  border-radius: deprecated.$br-4;
-  border: deprecated.$s-1 solid var(--input-border-color-active);
-  color: var(--input-foreground-color-active);
+  padding: 0 var(--sp-s);
+  border: $b-1 solid var(--color-accent-primary);
+  color: var(--color-foreground-primary);
+  background: var(--color-background-primary);
 }
 
-.editable-label.is-hidden {
-  display: none;
-}
-
-.editable-label-close {
-  cursor: pointer;
-
-  svg {
-    @extend .button-icon;
-    height: deprecated.$s-12;
-    width: deprecated.$s-12;
-    stroke: var(--icon-foreground);
-    margin: 0;
-  }
+.editable-label-text {
+  @include t.use-typography("body-small");
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
index aded75d6d7..8f6f6325dd 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
@@ -236,7 +236,7 @@
            [:span  {:class (stl/css :default-name :default-name-with-color)} default-name]])])
 
      (when local?
-       [:& cmm/assets-context-menu
+       [:> cmm/assets-context-menu*
         {:on-close on-close-menu
          :state @menu-state
          :options [(when-not (or multi-colors? multi-assets?)
@@ -302,12 +302,12 @@
            :on-drag-leave on-drag-leave
            :on-drag-over dom/prevent-default
            :on-drop on-drop}
-     [:& grp/asset-group-title {:file-id file-id
-                                :section :colors
-                                :path prefix
-                                :group-open? group-open?
-                                :on-rename on-rename-group
-                                :on-ungroup on-ungroup}]
+     [:> grp/asset-group-title* {:file-id file-id
+                                 :section :colors
+                                 :path prefix
+                                 :is-group-open group-open?
+                                 :on-rename on-rename-group
+                                 :on-ungroup on-ungroup}]
      (when group-open?
        [:*
         (let [colors (get groups "" [])]
@@ -363,9 +363,10 @@
                               :colors colors
                               :selected-full selected-full}]))])]))
 
-(mf/defc colors-section
-  [{:keys [file-id local? colors open? force-open? open-status-ref selected reverse-sort?
-           on-asset-click on-assets-delete on-clear-selection] :as props}]
+(mf/defc colors-section*
+  [{:keys [file-id colors open-status-ref selected
+           is-local is-open is-force-open is-reverse-sort
+           on-asset-click on-assets-delete on-clear-selection]}]
 
   (let [selected        (:colors selected)
         selected-full   (mf/with-memo [selected colors]
@@ -381,8 +382,8 @@
                             (seq (:graphics selected))
                             (seq (:typographies selected)))
 
-        groups          (mf/with-memo [colors reverse-sort?]
-                          (grp/group-assets colors reverse-sort?))
+        groups          (mf/with-memo [colors is-reverse-sort]
+                          (grp/group-assets colors is-reverse-sort))
 
         read-only?      (mf/use-ctx ctx/workspace-read-only?)
 
@@ -484,13 +485,13 @@
         (mf/use-fn (mf/deps groups on-asset-click) (partial on-asset-click groups))]
 
 
-    [:& cmm/asset-section {:file-id file-id
-                           :title (tr "workspace.assets.colors")
-                           :section :colors
-                           :assets-count (count colors)
-                           :open? open?}
-     (when local?
-       [:& cmm/asset-section-block {:role :title-button}
+    [:> cmm/asset-section* {:file-id file-id
+                            :title (tr "workspace.assets.colors")
+                            :section :colors
+                            :assets-count (count colors)
+                            :is-open is-open}
+     (when is-local
+       [:> cmm/asset-section-block* {:role :title-button}
         (when-not read-only?
           [:> icon-button* {:variant "ghost"
                             :aria-label (tr "workspace.assets.colors.add-color")
@@ -498,13 +499,13 @@
                             :icon i/add}])])
 
 
-     [:& cmm/asset-section-block {:role :content}
+     [:> cmm/asset-section-block* {:role :content}
       [:& colors-group {:file-id file-id
                         :prefix ""
                         :groups groups
                         :open-groups open-groups
-                        :force-open? force-open?
-                        :local? local?
+                        :force-open? is-force-open
+                        :local? is-local
                         :selected selected
                         :multi-colors? multi-colors?
                         :multi-assets? multi-assets?
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
index 4e14e39911..2e91af2fc5 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
@@ -117,8 +117,7 @@
   [state]
   (assoc state :open? false))
 
-(mf/defc assets-context-menu
-  {::mf/wrap-props false}
+(mf/defc assets-context-menu*
   [{:keys [options state on-close]}]
   [:> context-menu*
    {:show (:open? state)
@@ -140,9 +139,8 @@
   [section assets-count]
   (or (not (= section :tokens)) (and (< 0 assets-count) (= section :tokens))))
 
-(mf/defc asset-section
-  {::mf/wrap-props false}
-  [{:keys [children file-id title section assets-count icon open? on-click]}]
+(mf/defc asset-section*
+  [{:keys [children file-id title section assets-count icon is-open on-click]}]
   (let [children    (-> (array/normalize-to-array children)
                         (array/without-nils))
 
@@ -154,10 +152,10 @@
 
         on-collapsed
         (mf/use-fn
-         (mf/deps file-id section open? assets-count)
+         (mf/deps file-id section is-open assets-count)
          (fn [_]
            (when (< 0 assets-count)
-             (st/emit! (dw/set-assets-section-open file-id section (not open?))))))
+             (st/emit! (dw/set-assets-section-open file-id section (not is-open))))))
 
         title
         (mf/html
@@ -175,23 +173,22 @@
 
     [:div {:class (stl/css-case :asset-section true
                                 :opened (and (< 0 assets-count)
-                                             open?))
+                                             is-open))
            :on-click on-click}
      [:> title-bar*
       {:collapsable   (< 0 assets-count)
-       :collapsed     (not open?)
+       :collapsed     (not is-open)
        :all-clickable true
        :on-collapsed  on-collapsed
        :add-icon-gap  (= 0 assets-count)
        :title         title}
       buttons]
      (when ^boolean (and (< 0 assets-count)
-                         open?)
-       [:div {:class (stl/css-case :title-spacing open?)}
+                         is-open)
+       [:div {:class (stl/css-case :title-spacing is-open)}
         content])]))
 
-(mf/defc asset-section-block
-  {::mf/wrap-props false}
+(mf/defc asset-section-block*
   [{:keys [children]}]
   [:* children])
 
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 a104085240..7153f062b1 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
@@ -21,7 +21,7 @@
    [app.main.data.workspace.variants :as dwv]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.editable-label :refer [editable-label]]
+   [app.main.ui.components.editable-label :refer [editable-label*]]
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.context :as ctx]
@@ -51,9 +51,8 @@
         container  (ctf/get-component-page data component)]
     [root-shape container]))
 
-(mf/defc components-item
-  {::mf/wrap-props false}
-  [{:keys [component renaming listing-thumbs? selected
+(mf/defc components-item*
+  [{:keys [component renaming is-listing-thumbs selected
            file-id on-asset-click on-context-menu on-drag-start do-rename
            cancel-rename selected-full selected-paths is-local num-variants]}]
 
@@ -128,10 +127,10 @@
         renaming? (= renaming (:id component))]
 
     [:div {:ref item-ref
-           :class (stl/css-case :selected (contains? selected (:id component))
-                                :grid-cell listing-thumbs?
-                                :enum-item (not listing-thumbs?)
-                                :enum-item-with-mark (and (not listing-thumbs?) (ctc/is-variant? component)))
+           :class (stl/css-case :component-item true
+                                :component-item-grid is-listing-thumbs
+                                :component-item-list (not is-listing-thumbs)
+                                :component-item-selected (contains? selected (:id component)))
            :id (dm/str "component-shape-id-" (:id component))
            :draggable (and (not read-only?) (not renaming?))
            :on-click on-component-click
@@ -146,33 +145,36 @@
                 (some? container))
        [:*
         [:*
-         [:& editable-label
-          {:class (stl/css-case :cell-name listing-thumbs?
-                                :item-name (not listing-thumbs?)
-                                :editing renaming?)
-           :value (cpn/merge-path-item (:path component) (:name component))
-           :tooltip (cpn/merge-path-item (:path component) (:name component))
-           :display-value (:name component)
-           :editing renaming?
-           :disable-dbl-click true
-           :on-change do-rename
-           :on-cancel cancel-rename}]
+         [:div {:class (stl/css-case :component-item-grid-name is-listing-thumbs
+                                     :component-item-list-name (not is-listing-thumbs)
+                                     :component-item-editing renaming?)}
+          [:> editable-label*
+           {:class-input (stl/css-case :component-item-grid-input is-listing-thumbs
+                                       :component-item-list-input (not is-listing-thumbs))
+            :class-label (stl/css-case :component-item-grid-label is-listing-thumbs
+                                       :component-item-list-label (not is-listing-thumbs))
+            :value (cpn/merge-path-item (:path component) (:name component))
+            :tooltip (cpn/merge-path-item (:path component) (:name component))
+            :display-value (:name component)
+            :is-editing renaming?
+            :on-change do-rename
+            :on-cancel cancel-rename}]]
 
          (when ^boolean dragging?
-           [:div {:class (stl/css :dragging)}])]
+           [:div {:class (stl/css :component-item-dragging)}])]
 
         [:> cmm/component-item-thumbnail*
          {:file-id file-id
-          :class (stl/css-case :thumbnail true
-                               :asset-list-thumbnail (not listing-thumbs?))
+          :class (stl/css-case :component-item-thumbnail true
+                               :component-item-list-thumbnail (not is-listing-thumbs))
           :root-shape root-shape
           :component component
           :container container
           :is-hidden (not visible?)}]
+
         (when (ctc/is-variant? component)
-          [:span {:class (stl/css-case :variant-mark-cell listing-thumbs?
-                                       :variant-mark true
-                                       :component-icon true)
+          [:span {:class (stl/css-case :component-item-variant-mark true
+                                       :component-item-grid-variant-mark is-listing-thumbs)
                   :title (tr "workspace.assets.components.num-variants" num-variants)}
            [:> icon* {:icon-id i/variant :size "s"}]])])]))
 
@@ -188,15 +190,14 @@
              0
              m))
 
-(mf/defc components-group
-  {::mf/wrap-props false}
-  [{:keys [file-id prefix groups open-groups force-open? renaming listing-thumbs? selected on-asset-click
+(mf/defc components-group*
+  [{:keys [file-id prefix groups open-groups is-force-open renaming is-listing-thumbs selected on-asset-click
            on-drag-start do-rename cancel-rename on-rename-group on-group on-ungroup on-context-menu
            selected-full is-local count-variants on-group-combine-variants]}]
 
   (let [group-open?    (if (false? (get open-groups prefix)) ;; if the user has closed it specifically, respect that
                          false
-                         (or ^boolean force-open?
+                         (or ^boolean is-force-open
                              ^boolean (get open-groups prefix (if (= prefix "") true false))))
         dragging*      (mf/use-state false)
         dragging?      (deref dragging*)
@@ -238,40 +239,40 @@
            :on-drag-leave on-drag-leave
            :on-drag-over dom/prevent-default
            :on-drop on-drop}
-     [:& grp/asset-group-title
+     [:> grp/asset-group-title*
       {:file-id file-id
        :section :components
        :path prefix
-       :group-open? group-open?
-       :can-combine? can-combine?
+       :is-group-open group-open?
+       :is-can-combine can-combine?
        :on-rename on-rename-group
        :on-ungroup on-ungroup
        :on-group-combine-variants on-group-combine-variants}]
 
      (when group-open?
        [:*
-        [:div {:class (stl/css-case :asset-grid listing-thumbs?
-                                    :asset-enum (not listing-thumbs?))
+        [:div {:class (stl/css-case :component-group-grid is-listing-thumbs
+                                    :component-group-list (not is-listing-thumbs))
                :on-drag-enter on-drag-enter
                :on-drag-leave on-drag-leave
                :on-drag-over dom/prevent-default
                :on-drop on-drop}
 
          (when ^boolean dragging?
-           [:div {:class (stl/css :grid-placeholder)} "\u00A0"])
+           [:div {:class (stl/css :component-group-placeholder)} "\u00A0"])
 
          (when (and (empty? components)
                     (some? groups)
                     is-local)
-           [:div {:class (stl/css-case :drop-space true
-                                       :drop-space-small (not dragging?))}])
+           [:div {:class (stl/css-case :component-group-drop-space true
+                                       :component-group-drop-space-small (not dragging?))}])
 
          (for [component components]
-           [:& components-item
+           [:> components-item*
             {:component component
              :key (dm/str "component-" (:id component))
              :renaming renaming
-             :listing-thumbs? listing-thumbs?
+             :is-listing-thumbs is-listing-thumbs
              :file-id file-id
              :selected selected
              :selected-full selected-full
@@ -287,32 +288,32 @@
 
         (for [[path-item content] groups]
           (when-not (empty? path-item)
-            [:& components-group {:file-id file-id
-                                  :key path-item
-                                  :prefix (cpn/merge-path-item prefix path-item)
-                                  :groups content
-                                  :open-groups open-groups
-                                  :force-open? force-open?
-                                  :renaming renaming
-                                  :listing-thumbs? listing-thumbs?
-                                  :selected selected
-                                  :on-asset-click on-asset-click
-                                  :on-drag-start on-drag-start
-                                  :do-rename do-rename
-                                  :cancel-rename cancel-rename
-                                  :on-rename-group on-rename-group
-                                  :on-ungroup on-ungroup
-                                  :on-context-menu on-context-menu
-                                  :on-group-combine-variants on-group-combine-variants
-                                  :selected-full selected-full
-                                  :is-local is-local
-                                  :count-variants count-variants}]))])]))
+            [:> components-group* {:file-id file-id
+                                   :key path-item
+                                   :prefix (cpn/merge-path-item prefix path-item)
+                                   :groups content
+                                   :open-groups open-groups
+                                   :is-force-open is-force-open
+                                   :renaming renaming
+                                   :is-listing-thumbs is-listing-thumbs
+                                   :selected selected
+                                   :on-asset-click on-asset-click
+                                   :on-drag-start on-drag-start
+                                   :do-rename do-rename
+                                   :cancel-rename cancel-rename
+                                   :on-rename-group on-rename-group
+                                   :on-ungroup on-ungroup
+                                   :on-context-menu on-context-menu
+                                   :on-group-combine-variants on-group-combine-variants
+                                   :selected-full selected-full
+                                   :is-local is-local
+                                   :count-variants count-variants}]))])]))
 
-(mf/defc components-section
-  {::mf/wrap-props false}
-  [{:keys [file-id is-local components listing-thumbs? open? force-open?
-           reverse-sort? selected on-asset-click on-assets-delete
-           on-clear-selection open-status-ref delete-component count-variants]}]
+(mf/defc components-section*
+  [{:keys [file-id components selected open-status-ref
+           is-local is-listing-thumbs is-open is-force-open is-reverse-sort
+           on-asset-click on-assets-delete on-clear-selection
+           delete-component count-variants]}]
 
   (let [input-ref                (mf/use-ref nil)
 
@@ -356,8 +357,8 @@
                                    (let [page (:main-instance-page (first selected-and-current-full))]
                                      (every? #(= page (:main-instance-page %)) selected-and-current-full)))
 
-        groups                   (mf/with-memo [components reverse-sort?]
-                                   (grp/group-assets components reverse-sort?))
+        groups                   (mf/with-memo [components is-reverse-sort]
+                                   (grp/group-assets components is-reverse-sort))
 
         add-component
         (mf/use-fn
@@ -554,15 +555,15 @@
              (st/emit!
               (dwv/combine-as-variants ids {:page-id page-id :trigger "workspace:context-menu-assets"})))))]
 
-    [:& cmm/asset-section {:file-id file-id
-                           :title (tr "workspace.assets.components")
-                           :section :components
-                           :assets-count (count components)
-                           :open? open?}
-     [:& cmm/asset-section-block {:role :title-button}
-      (when ^boolean open?
-        [:div {:class (stl/css :listing-options)}
-         [:& radio-buttons {:selected (if listing-thumbs? "grid" "list")
+    [:> cmm/asset-section* {:file-id file-id
+                            :title (tr "workspace.assets.components")
+                            :section :components
+                            :assets-count (count components)
+                            :is-open is-open}
+     [:> cmm/asset-section-block* {:role :title-button}
+      (when ^boolean is-open
+        [:div
+         [:& radio-buttons {:selected (if is-listing-thumbs "grid" "list")
                             :on-change toggle-list-style
                             :name "listing-style"}
           [:& radio-button {:icon deprecated-icon/view-as-list
@@ -584,30 +585,30 @@
                             :ref input-ref
                             :on-selected on-file-selected}]])]
 
-     [:& cmm/asset-section-block {:role :content}
-      (when ^boolean open?
-        [:& components-group {:file-id file-id
-                              :prefix ""
-                              :groups groups
-                              :open-groups open-groups
-                              :force-open? force-open?
-                              :renaming (when ^boolean renaming? current-component-id)
-                              :listing-thumbs? listing-thumbs?
-                              :selected selected
-                              :on-asset-click on-asset-click
-                              :on-drag-start on-drag-start
-                              :do-rename do-rename
-                              :cancel-rename cancel-rename
-                              :on-rename-group on-rename-group
-                              :on-group on-group
-                              :on-ungroup on-ungroup
-                              :on-group-combine-variants on-group-combine-variants
-                              :on-context-menu on-context-menu
-                              :selected-full selected-full
-                              :is-local ^boolean is-local
-                              :count-variants count-variants}])
+     [:> cmm/asset-section-block* {:role :content}
+      (when ^boolean is-open
+        [:> components-group* {:file-id file-id
+                               :prefix ""
+                               :groups groups
+                               :open-groups open-groups
+                               :is-force-open is-force-open
+                               :renaming (when ^boolean renaming? current-component-id)
+                               :is-listing-thumbs is-listing-thumbs
+                               :selected selected
+                               :on-asset-click on-asset-click
+                               :on-drag-start on-drag-start
+                               :do-rename do-rename
+                               :cancel-rename cancel-rename
+                               :on-rename-group on-rename-group
+                               :on-group on-group
+                               :on-ungroup on-ungroup
+                               :on-group-combine-variants on-group-combine-variants
+                               :on-context-menu on-context-menu
+                               :selected-full selected-full
+                               :is-local ^boolean is-local
+                               :count-variants count-variants}])
 
-      [:& cmm/assets-context-menu
+      [:> cmm/assets-context-menu*
        {:on-close on-close-menu
         :state @menu-state
         :options [(when (and is-local (not (or multi-components? multi-assets? read-only?)))
@@ -619,10 +620,6 @@
                      :id     "assets-duplicate-component"
                      :handler on-duplicate})
 
-                  (when (and is-local (not read-only?))
-                    {:name    (tr "workspace.assets.delete")
-                     :id      "assets-delete-component"
-                     :handler on-delete})
                   (when (and is-local (not (or multi-assets? read-only?)))
                     {:name   (tr "workspace.assets.group")
                      :id     "assets-group-component"
@@ -637,4 +634,9 @@
                      :id     "assets-combine-as-variants"
                      :title (when-not all-same-page? (tr "workspace.shape.menu.combine-as-variants-error"))
                      :disabled (not all-same-page?)
-                     :handler on-combine-as-variants})]}]]]))
+                     :handler on-combine-as-variants})
+
+                  (when (and is-local (not read-only?))
+                    {:name    (tr "workspace.assets.delete")
+                     :id      "assets-delete-component"
+                     :handler on-delete})]}]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
index 9730198d4e..ec23a9d1f4 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
@@ -4,108 +4,109 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_sizes.scss" as *;
+@use "ds/colors.scss" as *;
+@use "ds/typography.scss" as t;
 
-.drop-space {
-  height: deprecated.$s-12;
-}
-
-.drop-space-small {
-  height: deprecated.$s-2;
-}
-
-.asset-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(deprecated.$s-96, 1fr));
-  max-width: 100%;
-  gap: deprecated.$s-4;
-  margin-inline: deprecated.$s-8;
-}
-
-.grid-cell {
-  @include deprecated.flexCenter;
+.component-item {
   position: relative;
-  aspect-ratio: 1 / 1;
-  padding: deprecated.$s-8;
-  border-radius: deprecated.$br-8;
-  background-color: var(--assets-component-background-color);
-  overflow: hidden;
   cursor: pointer;
+}
 
-  .variant-mark {
-    background-color: var(--color-background-tertiary);
-    border-radius: deprecated.$br-8;
-  }
-
-  .cell-name {
-    @include deprecated.bodySmallTypography;
-    @include deprecated.textEllipsis;
-    display: none;
-    position: absolute;
-    left: deprecated.$s-4;
-    bottom: deprecated.$s-4;
-    height: calc(deprecated.$s-24 - deprecated.$s-2);
-    width: calc(100% - 2 * deprecated.$s-4);
-    padding: deprecated.$s-2 deprecated.$s-6;
-    column-gap: deprecated.$s-4;
-    border-radius: deprecated.$br-4;
-    background-color: var(--assets-item-name-background-color);
-    border: deprecated.$s-1 solid transparent;
-    color: var(--assets-item-name-foreground-color);
-
-    input {
-      @include deprecated.textEllipsis;
-      @include deprecated.bodySmallTypography;
-      @include deprecated.removeInputStyle;
-      height: auto;
-      padding: 0;
-    }
-
-    span {
-      display: flex;
-      align-items: center;
-      height: 100%;
-    }
-
-    &.editing {
-      border-color: var(--input-border-color-focus);
-      border-radius: deprecated.$br-4;
-      display: flex;
-      align-items: center;
-      background-color: var(--input-background-color);
-    }
-  }
-
+.component-item-grid {
+  aspect-ratio: 1 / 1;
+  padding: var(--sp-s);
+  border-radius: $br-8;
+  background-color: var(--color-canvas);
+  overflow: hidden;
   &:hover {
-    .cell-name {
-      display: block;
+    .component-item-grid-name {
+      display: flex;
     }
   }
 
-  &.selected {
-    border: deprecated.$s-2 solid var(--assets-item-border-color);
+  &.component-item-selected {
+    border: $b-2 solid var(--color-accent-primary);
 
     &::before {
       content: " ";
       position: absolute;
-      z-index: deprecated.$z-index-2;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
-      border: deprecated.$s-4 solid var(--assets-component-second-border-selected);
-      border-radius: deprecated.$br-8;
+      border: calc($b-2 * 2) solid var(--color-background-primary);
+      border-radius: $br-8;
     }
   }
 }
 
-.component-group {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: deprecated.$s-4;
+.component-item-grid-name {
+  display: none;
+  align-items: center;
+  position: absolute;
+  height: $sz-24;
+  left: var(--sp-xs);
+  right: var(--sp-xs);
+  bottom: var(--sp-xs);
+  padding: var(--sp-xxs) var(--sp-s);
+  border-radius: $br-4;
+  background-color: var(--color-background-primary);
+  color: var(--color-foreground-primary);
+  padding: 0;
+
+  &.component-item-editing {
+    display: flex;
+  }
 }
 
-.thumbnail {
+.component-item-grid-input {
+  border-radius: $br-4;
+}
+
+.component-item-grid-label {
+  padding: 0 var(--sp-s);
+}
+
+.component-item-list {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  column-gap: var(--sp-s);
+  padding: var(--sp-xxs);
+  margin-inline-end: var(--sp-xxs);
+  border-radius: $br-8;
+  background-color: var(--color-background-tertiary);
+
+  &:hover {
+    background-color: var(--color-background-quaternary);
+  }
+
+  &.component-item-selected {
+    outline: $b-1 solid var(--color-accent-primary);
+  }
+}
+
+.component-item-list-name {
+  overflow: hidden;
+  order: 2;
+  display: flex;
+  align-items: center;
+  color: var(--color-foreground-primary);
+  padding: 0;
+}
+
+.component-item-list-input {
+  border-radius: $br-8;
+  height: $sz-32;
+}
+
+.component-item-list-label {
+  padding: 0;
+}
+
+.component-item-thumbnail {
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -113,130 +114,76 @@
   border: 0;
 }
 
-.grid-placeholder {
-  width: 100%;
-  border-radius: deprecated.$br-8;
-  background-color: var(--assets-item-background-color-drag);
-  border: deprecated.$s-2 solid var(--assets-item-border-color-drag);
-}
-
-.enum-item {
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  column-gap: deprecated.$s-8;
-  height: deprecated.$s-44;
-  padding-right: deprecated.$s-4;
-  padding: deprecated.$s-1;
-  border: deprecated.$s-1 solid transparent;
-  border-radius: deprecated.$br-8;
-  background-color: var(--assets-item-background-color);
-  cursor: pointer;
-
-  &:not(:last-child) {
-    margin-bottom: deprecated.$s-4;
-  }
-
-  &:hover {
-    background-color: var(--assets-item-background-color-hover);
-
-    .item-name {
-      color: var(--assets-item-name-foreground-color-hover);
-
-      &.editing {
-        background: var(--input-background-color);
-
-        input {
-          color: var(--input-foreground-color-active);
-        }
-      }
-    }
-  }
-
-  &.selected {
-    border: deprecated.$s-1 solid var(--assets-item-border-color);
-  }
-}
-
-.enum-item-with-mark {
-  grid-template-columns: auto 1fr deprecated.$s-24;
-  padding-right: deprecated.$s-4;
-}
-
-.item-name {
-  @include deprecated.bodySmallTypography;
-  @include deprecated.textEllipsis;
-  order: 2;
-  color: var(--assets-item-name-foreground-color);
-
-  input {
-    @include deprecated.textEllipsis;
-    @include deprecated.bodySmallTypography;
-    @include deprecated.removeInputStyle;
-    height: deprecated.$s-32;
-    padding: deprecated.$s-4;
-  }
-
-  span {
-    display: flex;
-    place-items: center;
-    padding-inline-end: deprecated.$s-4;
-  }
-
-  &.editing {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
-    column-gap: deprecated.$s-8;
-    border: deprecated.$s-1 solid var(--input-border-color-focus);
-    border-radius: deprecated.$br-8;
-    background-color: var(--input-background-color);
-  }
-}
-
-.asset-list-thumbnail {
-  @include deprecated.flexCenter;
+.component-item-list-thumbnail {
   flex-shrink: 0;
-  padding: deprecated.$s-2;
-  height: deprecated.$s-40;
-  width: deprecated.$s-40;
-  border-radius: deprecated.$br-6;
-  background-color: var(--assets-component-background-color);
+  padding: var(--sp-xxs);
+  height: $sz-40;
+  width: $sz-40;
+  border-radius: $br-6;
+  background-color: var(--color-canvas);
 }
 
-.grid-placeholder {
-  height: deprecated.$s-2;
-  width: 100%;
-  background-color: var(--color-accent-primary);
-}
-
-.listing-options {
+.component-item-variant-mark {
+  margin-right: var(--sp-xs);
   display: flex;
   align-items: center;
+  justify-content: center;
+  height: $sz-24;
+  width: $sz-24;
+  color: var(--color-accent-secondary);
+  order: 3;
 }
 
-.dragging {
+.component-item-grid-variant-mark {
+  margin: 0;
+  position: absolute;
+  right: var(--sp-xxs);
+  top: var(--sp-xxs);
+  border-radius: $br-8;
+  background-color: var(--color-background-tertiary);
+}
+
+.component-item-dragging {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: deprecated.$s-8;
-  background-color: var(--assets-item-background-color-drag);
-  border: deprecated.$s-2 solid var(--assets-item-border-color-drag);
+  border-radius: var(--sp-s);
+  border: $b-2 solid var(--color-accent-primary-muted);
 }
 
-.variant-mark-cell {
-  position: absolute;
-  right: deprecated.$s-2;
-  top: deprecated.$s-2;
+.component-group {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--sp-xs);
 }
 
-.component-icon {
-  @include deprecated.flexCenter;
-  height: deprecated.$s-24;
-  width: deprecated.$s-24;
-  order: 3;
-  color: var(--color-accent-secondary);
+.component-group-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(calc($sz-48 * 2), 1fr));
+  max-width: 100%;
+  gap: var(--sp-xs);
+  margin-inline: var(--sp-s);
+}
+
+.component-group-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-xs);
+}
+
+.component-group-placeholder {
+  width: 100%;
+  height: var(--sp-xxs);
+  border-radius: $br-8;
+  background-color: var(--color-accent-primary);
+}
+
+.component-group-drop-space {
+  height: var(--sp-m);
+}
+
+.component-group-drop-space-small {
+  height: var(--sp-xxs);
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
index 410d14200a..a420140724 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
@@ -23,10 +23,10 @@
    [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.icons :as deprecated-icon]
-   [app.main.ui.workspace.sidebar.assets.colors :refer [colors-section]]
+   [app.main.ui.workspace.sidebar.assets.colors :refer [colors-section*]]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
-   [app.main.ui.workspace.sidebar.assets.components :refer [components-section]]
-   [app.main.ui.workspace.sidebar.assets.typographies :refer [typographies-section]]
+   [app.main.ui.workspace.sidebar.assets.components :refer [components-section*]]
+   [app.main.ui.workspace.sidebar.assets.typographies :refer [typographies-section*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -249,16 +249,16 @@
        [:span {:class (stl/css :loading)} (tr "labels.loading")]
        [:*
         (when ^boolean show-components?
-          [:& components-section
+          [:> components-section*
            {:file-id file-id
             :is-local is-local
             :components components
-            :listing-thumbs? listing-thumbs?
-            :open? (or ^boolean force-open-components?
-                       ^boolean (get open-status :components false))
-            :force-open? force-open-components?
+            :is-listing-thumbs listing-thumbs?
+            :is-open (or ^boolean force-open-components?
+                         ^boolean (get open-status :components false))
+            :is-force-open force-open-components?
             :open-status-ref open-status-ref
-            :reverse-sort? reverse-sort?
+            :is-reverse-sort reverse-sort?
             :selected selected
             :on-asset-click on-component-click
             :on-assets-delete on-assets-delete
@@ -267,31 +267,31 @@
             :count-variants count-variants}])
 
         (when ^boolean show-colors?
-          [:& colors-section
+          [:> colors-section*
            {:file-id file-id
-            :local? is-local
+            :is-local is-local
             :colors colors
-            :open? (or ^boolean force-open-colors?
-                       ^boolean (get open-status :colors false))
-            :force-open? force-open-colors?
+            :is-open (or ^boolean force-open-colors?
+                         ^boolean (get open-status :colors false))
+            :is-force-open force-open-colors?
             :open-status-ref open-status-ref
-            :reverse-sort? reverse-sort?
+            :is-reverse-sort reverse-sort?
             :selected selected
             :on-asset-click on-colors-click
             :on-assets-delete on-assets-delete
             :on-clear-selection on-clear-selection}])
 
         (when ^boolean show-typography?
-          [:& typographies-section
+          [:> typographies-section*
            {:file file
             :file-id (:id file)
-            :local? is-local
+            :is-local is-local
             :typographies typographies
-            :open? (or ^boolean force-open-typographies?
-                       ^boolean (get open-status :typographies false))
-            :force-open? force-open-typographies?
+            :is-open (or ^boolean force-open-typographies?
+                         ^boolean (get open-status :typographies false))
+            :is-force-open force-open-typographies?
             :open-status-ref open-status-ref
-            :reverse-sort? reverse-sort?
+            :is-reverse-sort reverse-sort?
             :selected selected
             :on-asset-click on-typography-click
             :on-assets-delete on-assets-delete
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
index 6effb2ee31..72a1be6996 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
@@ -22,20 +22,20 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
-(mf/defc asset-group-title
-  [{:keys [file-id section path group-open? on-rename on-ungroup on-group-combine-variants can-combine?]}]
+(mf/defc asset-group-title*
+  [{:keys [file-id section path is-group-open on-rename on-ungroup on-group-combine-variants is-can-combine]}]
   (when-not (empty? path)
     (let [[other-path last-path truncated] (cpn/compact-path path 35 true)
           menu-state     (mf/use-state cmm/initial-context-menu-state)
           on-fold-group
           (mf/use-fn
-           (mf/deps file-id section path group-open?)
+           (mf/deps file-id section path is-group-open)
            (fn [event]
              (dom/stop-propagation event)
              (st/emit! (dw/set-assets-group-open file-id
                                                  section
                                                  path
-                                                 (not group-open?)))))
+                                                 (not is-group-open)))))
           on-context-menu
           (mf/use-fn
            (fn [event]
@@ -50,7 +50,7 @@
        [:div {:class (stl/css :group-title)
               :on-context-menu on-context-menu}
         [:> title-bar* {:collapsable    true
-                        :collapsed      (not group-open?)
+                        :collapsed      (not is-group-open)
                         :all-clickable  true
                         :on-collapsed   on-fold-group
                         :title          (mf/html [:* (when-not (empty? other-path)
@@ -61,7 +61,7 @@
                                                           :title (when truncated path)}
                                                    last-path]])}]
 
-        [:& cmm/assets-context-menu
+        [:> cmm/assets-context-menu*
          {:on-close on-close-menu
           :state @menu-state
           :options (cond-> [{:name    (tr "workspace.assets.rename")
@@ -70,7 +70,7 @@
                             {:name    (tr "workspace.assets.ungroup")
                              :id      "assets-ungroup-group"
                              :handler  #(on-ungroup path)}]
-                     can-combine?
+                     is-can-combine
                      (conj
                       {:name    (tr "workspace.shape.menu.combine-as-variants")
                        :id      "assets-combine-as-variants"
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
index 17fbe71114..1f1d5a1704 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
@@ -170,12 +170,12 @@
            :on-drag-leave on-drag-leave
            :on-drag-over dom/prevent-default
            :on-drop on-drop}
-     [:& grp/asset-group-title {:file-id file-id
-                                :section :typographies
-                                :path prefix
-                                :group-open? group-open?
-                                :on-rename on-rename-group
-                                :on-ungroup on-ungroup}]
+     [:> grp/asset-group-title* {:file-id file-id
+                                 :section :typographies
+                                 :path prefix
+                                 :is-group-open group-open?
+                                 :on-rename on-rename-group
+                                 :on-ungroup on-ungroup}]
 
      (when group-open?
        [:*
@@ -230,9 +230,9 @@
                                     :on-context-menu on-context-menu
                                     :selected-full selected-full}]))])]))
 
-(mf/defc typographies-section
-  {::mf/wrap-props false}
-  [{:keys [file file-id local? typographies open? force-open? open-status-ref selected reverse-sort?
+(mf/defc typographies-section*
+  [{:keys [file file-id typographies open-status-ref selected
+           is-local is-open is-force-open is-reverse-sort
            on-asset-click on-assets-delete on-clear-selection]}]
   (let [state          (mf/use-state {:detail-open? false :id nil})
         local-data     (mf/deref lens:typography-section-state)
@@ -243,8 +243,8 @@
         typographies   (mf/with-memo [typographies]
                          (mapv dwl/extract-path-if-missing typographies))
 
-        groups         (mf/with-memo [typographies reverse-sort?]
-                         (grp/group-assets typographies reverse-sort?))
+        groups         (mf/with-memo [typographies is-reverse-sort]
+                         (grp/group-assets typographies is-reverse-sort))
 
         selected       (:typographies selected)
         selected-full  (mf/with-memo [selected typographies]
@@ -393,28 +393,28 @@
          (st/emit! #(update % :workspace-global dissoc :edit-typography)))))
 
     [:*
-     [:& cmm/asset-section {:file-id file-id
-                            :title (tr "workspace.assets.typography")
-                            :section :typographies
-                            :assets-count (count typographies)
-                            :open? open?}
-      (when local?
-        [:& cmm/asset-section-block {:role :title-button}
+     [:> cmm/asset-section* {:file-id file-id
+                             :title (tr "workspace.assets.typography")
+                             :section :typographies
+                             :assets-count (count typographies)
+                             :is-open is-open}
+      (when is-local
+        [:> cmm/asset-section-block* {:role :title-button}
          (when-not read-only?
            [:> icon-button* {:variant "ghost"
                              :aria-label (tr "workspace.assets.typography.add-typography")
                              :on-click add-typography
                              :icon i/add}])])
 
-      [:& cmm/asset-section-block {:role :content}
+      [:> cmm/asset-section-block* {:role :content}
        [:& typographies-group {:file-id file-id
                                :prefix ""
                                :groups groups
                                :open-groups open-groups
-                               :force-open? force-open?
+                               :force-open? is-force-open
                                :state state
                                :file file
-                               :local? local?
+                               :local? is-local
                                :selected selected
                                :editing-id editing-id
                                :renaming-id renaming-id
@@ -426,8 +426,8 @@
                                :on-context-menu on-context-menu
                                :selected-full selected-full}]
 
-       (if local?
-         [:& cmm/assets-context-menu
+       (if is-local
+         [:> cmm/assets-context-menu*
           {:on-close on-close-menu
            :state @menu-state
            :options [(when-not (or multi-typographies? multi-assets?)
@@ -449,7 +449,7 @@
                         :id      "assets-group-typography"
                         :handler on-group})]}]
 
-         [:& cmm/assets-context-menu
+         [:> cmm/assets-context-menu*
           {:on-close on-close-menu
            :state @menu-state
            :options [{:name   "show info"
diff --git a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs
index 07548c9319..8bc0cd9b77 100644
--- a/frontend/src/app/main/ui/workspace/tokens/management/group.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/management/group.cljs
@@ -101,12 +101,12 @@
                                            :shapes selected-shapes})))))]
 
     [:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)}
-     [:& cmm/asset-section {:icon (token-section-icon type)
-                            :title title
-                            :section :tokens
-                            :assets-count (count tokens)
-                            :open? is-open}
-      [:& cmm/asset-section-block {:role :title-button}
+     [:> cmm/asset-section* {:icon (token-section-icon type)
+                             :title title
+                             :section :tokens
+                             :assets-count (count tokens)
+                             :is-open is-open}
+      [:> cmm/asset-section-block* {:role :title-button}
        (when can-edit?
          [:> icon-button* {:on-click on-popover-open-click
                            :variant "ghost"
@@ -114,7 +114,7 @@
                            :id (str "add-token-button-" title)
                            :aria-label (tr "workspace.tokens.add-token" title)}])]
       (when is-open
-        [:& cmm/asset-section-block {:role :content}
+        [:> cmm/asset-section-block* {:role :content}
          [:div {:class (stl/css :token-pills-wrapper)}
           (for [token tokens]
             [:> token-pill*