diff --git a/common/deps.edn b/common/deps.edn
index 32a9f3473..9819697cf 100644
--- a/common/deps.edn
+++ b/common/deps.edn
@@ -2,7 +2,7 @@
  {org.clojure/clojure {:mvn/version "1.11.1"}
   org.clojure/data.json {:mvn/version "2.5.0"}
   org.clojure/tools.cli {:mvn/version "1.0.219"}
-  org.clojure/clojurescript {:mvn/version "1.11.60"}
+  org.clojure/clojurescript {:mvn/version "1.11.132"}
   org.clojure/test.check {:mvn/version "1.1.1"}
   org.clojure/data.fressian {:mvn/version "1.0.0"}
 
@@ -19,7 +19,7 @@
   criterium/criterium {:mvn/version "0.4.6"}
 
   metosin/jsonista {:mvn/version "0.3.8"}
-  metosin/malli {:mvn/version "0.13.0"}
+  metosin/malli {:mvn/version "0.14.0"}
 
   expound/expound {:mvn/version "0.9.0"}
   com.cognitect/transit-clj {:mvn/version "1.0.333"}
@@ -63,7 +63,7 @@
  {:dev
   {:extra-deps
    {org.clojure/tools.namespace {:mvn/version "RELEASE"}
-    thheller/shadow-cljs {:mvn/version "2.26.2"}
+    thheller/shadow-cljs {:mvn/version "2.27.4"}
     com.clojure-goes-fast/clj-async-profiler {:mvn/version "RELEASE"}
     com.bhauman/rebel-readline {:mvn/version "RELEASE"}
     criterium/criterium {:mvn/version "RELEASE"}
diff --git a/common/package.json b/common/package.json
index 59e9ae56b..4d2e78a79 100644
--- a/common/package.json
+++ b/common/package.json
@@ -15,7 +15,7 @@
     "sax": "^1.2.4"
   },
   "devDependencies": {
-    "shadow-cljs": "2.26.2",
+    "shadow-cljs": "2.27.4",
     "source-map-support": "^0.5.21",
     "ws": "^8.13.0"
   },
diff --git a/common/src/app/common/types/container.cljc b/common/src/app/common/types/container.cljc
index 4265329ea..a29d8b940 100644
--- a/common/src/app/common/types/container.cljc
+++ b/common/src/app/common/types/container.cljc
@@ -150,6 +150,22 @@
      :else
      (get-head-shape objects (get objects (:parent-id shape)) options))))
 
+(defn get-parent-heads
+  "Get all component heads that are ancestors of the shape, in top-down order
+   (include self if it's also a head)."
+  [objects shape]
+  (->> (cfh/get-parents-with-self objects (:id shape))
+       (filter ctk/instance-head?)
+       (reverse)))
+
+(defn get-parent-copy-heads
+  "Get all component heads that are ancestors of the shape, in top-down order,
+   excluding mains (include self if it's also a head)."
+  [objects shape]
+  (->> (cfh/get-parents-with-self objects (:id shape))
+       (filter #(and (ctk/instance-head? %) (ctk/in-component-copy? %)))
+       (reverse)))
+
 (defn get-instance-root
   "Get the parent shape at the top of the component instance (main or copy)."
   [objects shape]
@@ -392,7 +408,7 @@
         (has-any-copy-parent? objects (:parent-id shape))))))
 
 (defn has-any-main?
-  "Check if the shape has any children or parent that is a main component."
+  "Check if the shape is a main component or has any children or parent that is a main component."
   [objects shape]
   (let [children (cfh/get-children-with-self objects (:id shape))
         parents  (cfh/get-parents objects (:id shape))]
@@ -400,6 +416,12 @@
      (some ctk/main-instance? children)
      (some ctk/main-instance? parents))))
 
+(defn has-any-main-children?
+  "Check if the shape is a main component or has any children that is a main component."
+  [objects shape]
+  (let [children (cfh/get-children-with-self objects (:id shape))]
+    (some ctk/main-instance? children)))
+
 (defn valid-shape-for-component?
   "Check if a main component can be generated from this shape in terms of nested components:
   - A main can't be the ancestor of another main
@@ -412,7 +434,7 @@
 (defn- invalid-structure-for-component?
   "Check if the structure generated nesting children in parent is invalid in terms of nested components"
   [objects parent children]
-  (let [selected-main-instance? (some true? (map #(has-any-main? objects %) children))
+  (let [selected-main-instance? (some true? (map #(has-any-main-children? objects %) children))
         parent-in-component?    (in-any-component? objects parent)
         comps-nesting-loop?     (not (->> children
                                           (map #(cfh/components-nesting-loop? objects (:id %) (:id parent)))
diff --git a/common/src/app/common/types/file.cljc b/common/src/app/common/types/file.cljc
index caad391b8..9fe6831cf 100644
--- a/common/src/app/common/types/file.cljc
+++ b/common/src/app/common/types/file.cljc
@@ -117,6 +117,12 @@
   [libraries component-id & {:keys [include-deleted?] :or {include-deleted? false}}]
   (some #(ctkl/get-component (:data %) component-id include-deleted?) (vals libraries)))
 
+(defn find-component-file
+  [file libraries component-file]
+  (if (and (some? file) (= component-file (:id file)))
+    file
+    (get libraries component-file)))
+
 (defn get-component
   "Retrieve a component from a library."
   [libraries library-id component-id & {:keys [include-deleted?] :or {include-deleted? false}}]
@@ -188,21 +194,30 @@
   "Locate the nearest component in the local file or libraries, and retrieve the shape
    referenced by the instance shape."
   [file page libraries shape & {:keys [include-deleted?] :or {include-deleted? false}}]
-  (let [parent-heads (->> (cfh/get-parents-with-self (:objects page) (:id shape))
-                          (filter ctk/instance-head?)
-                          (reverse))
-
-        find-ref-shape-in-head
+  (let [find-ref-shape-in-head
         (fn [head-shape]
-          (let [head-file      (if (and (some? file) (= (:component-file head-shape) (:id file)))
-                                 file
-                                 (get libraries (:component-file head-shape)))
+          (let [head-file      (find-component-file file libraries (:component-file head-shape))
                 head-component (when (some? head-file)
                                  (ctkl/get-component (:data head-file) (:component-id head-shape) include-deleted?))]
             (when (some? head-component)
               (get-ref-shape (:data head-file) head-component shape))))]
 
-    (d/seek find-ref-shape-in-head parent-heads)))
+    (some find-ref-shape-in-head (ctn/get-parent-heads (:objects page) shape))))
+
+(defn find-ref-component
+  "Locate the nearest component in the local file or libraries that is referenced by the
+   instance shape."
+  [file page libraries shape & {:keys [include-deleted?] :or {include-deleted? false}}]
+  (let [find-ref-component-in-head
+        (fn [head-shape]
+          (let [head-file      (find-component-file file libraries (:component-file head-shape))
+                head-component (when (some? head-file)
+                                 (ctkl/get-component (:data head-file) (:component-id head-shape) include-deleted?))]
+            (when (some? head-component)
+              (when (get-ref-shape (:data head-file) head-component shape)
+                head-component))))]
+
+    (some find-ref-component-in-head (ctn/get-parent-copy-heads (:objects page) shape))))
 
 (defn find-remote-shape
   "Recursively go back by the :shape-ref of the shape until find the correct shape of the original component"
@@ -229,6 +244,13 @@
         remote-shape
         (find-remote-shape component-container libraries remote-shape)))))
 
+(defn direct-copy?
+  "Check if the shape is in a direct copy of the component (i.e. the shape-ref points to shapes inside
+   the component)."
+  [shape component page file libraries]
+  (let [ref-component (find-ref-component file page libraries shape :include-deleted? true)]
+    (true? (= (:id component) (:id ref-component)))))
+
 (defn get-component-shapes
   "Retrieve all shapes of the component"
   [file-data component]
diff --git a/common/src/app/common/types/shape/interactions.cljc b/common/src/app/common/types/shape/interactions.cljc
index 215ab1aa5..05724ebe8 100644
--- a/common/src/app/common/types/shape/interactions.cljc
+++ b/common/src/app/common/types/shape/interactions.cljc
@@ -176,7 +176,7 @@
    (contains? event-types event-type))
 
   (dm/assert!
-   "The `:after-delay` event type incompatible with frame shapes"
+   "The `:after-delay` event type incompatible with not frame shapes"
    (or (not= event-type :after-delay)
        (cfh/frame-shape? shape)))
 
diff --git a/common/yarn.lock b/common/yarn.lock
index 9e6ecf17c..75220279c 100644
--- a/common/yarn.lock
+++ b/common/yarn.lock
@@ -352,7 +352,7 @@ __metadata:
   dependencies:
     luxon: "npm:^3.4.2"
     sax: "npm:^1.2.4"
-    shadow-cljs: "npm:2.26.2"
+    shadow-cljs: "npm:2.27.4"
     source-map-support: "npm:^0.5.21"
     ws: "npm:^8.13.0"
   languageName: unknown
@@ -1437,9 +1437,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shadow-cljs@npm:2.26.2":
-  version: 2.26.2
-  resolution: "shadow-cljs@npm:2.26.2"
+"shadow-cljs@npm:2.27.4":
+  version: 2.27.4
+  resolution: "shadow-cljs@npm:2.27.4"
   dependencies:
     node-libs-browser: "npm:^2.2.1"
     readline-sync: "npm:^1.4.7"
@@ -1449,7 +1449,7 @@ __metadata:
     ws: "npm:^7.4.6"
   bin:
     shadow-cljs: cli/runner.js
-  checksum: d504969ea28bcf3d5fc879c8111cb630a8ae910ea692bbfb0d73097fb336e13e642116db9fcc91524686a6824e71d439ef0df31941eabb6331feb4aa4146e830
+  checksum: bae23e71df9c2b2979259a0cde8747c923ee295f58ab4637c9d6b103d82542b40ef39172d4be2dbb94af2e6458a177d1ec96c1eb1e73b1d8f3a4ddb5eaaba7d4
   languageName: node
   linkType: hard
 
diff --git a/exporter/deps.edn b/exporter/deps.edn
index ff538c79c..01c4cefcc 100644
--- a/exporter/deps.edn
+++ b/exporter/deps.edn
@@ -15,7 +15,7 @@
 
   :dev
   {:extra-deps
-   {thheller/shadow-cljs {:mvn/version "2.26.2"}}}
+   {thheller/shadow-cljs {:mvn/version "2.27.4"}}}
 
   :shadow-cljs
   {:main-opts ["-m" "shadow.cljs.devtools.cli"]}
diff --git a/exporter/package.json b/exporter/package.json
index 1dd53fa66..86cb78c8d 100644
--- a/exporter/package.json
+++ b/exporter/package.json
@@ -22,7 +22,7 @@
     "xregexp": "^5.1.1"
   },
   "devDependencies": {
-    "shadow-cljs": "2.26.2",
+    "shadow-cljs": "2.27.4",
     "source-map-support": "^0.5.21"
   },
   "scripts": {
diff --git a/exporter/yarn.lock b/exporter/yarn.lock
index f7016c8b4..d5c7dfe79 100644
--- a/exporter/yarn.lock
+++ b/exporter/yarn.lock
@@ -735,7 +735,7 @@ __metadata:
     luxon: "npm:^3.4.4"
     playwright: "npm:^1.40.1"
     raw-body: "npm:^2.5.2"
-    shadow-cljs: "npm:2.26.2"
+    shadow-cljs: "npm:2.27.4"
     source-map-support: "npm:^0.5.21"
     xml-js: "npm:^1.6.11"
     xregexp: "npm:^5.1.1"
@@ -1842,9 +1842,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shadow-cljs@npm:2.26.2":
-  version: 2.26.2
-  resolution: "shadow-cljs@npm:2.26.2"
+"shadow-cljs@npm:2.27.4":
+  version: 2.27.4
+  resolution: "shadow-cljs@npm:2.27.4"
   dependencies:
     node-libs-browser: "npm:^2.2.1"
     readline-sync: "npm:^1.4.7"
@@ -1854,7 +1854,7 @@ __metadata:
     ws: "npm:^7.4.6"
   bin:
     shadow-cljs: cli/runner.js
-  checksum: d504969ea28bcf3d5fc879c8111cb630a8ae910ea692bbfb0d73097fb336e13e642116db9fcc91524686a6824e71d439ef0df31941eabb6331feb4aa4146e830
+  checksum: bae23e71df9c2b2979259a0cde8747c923ee295f58ab4637c9d6b103d82542b40ef39172d4be2dbb94af2e6458a177d1ec96c1eb1e73b1d8f3a4ddb5eaaba7d4
   languageName: node
   linkType: hard
 
diff --git a/frontend/deps.edn b/frontend/deps.edn
index a626ecbd9..e5a822dea 100644
--- a/frontend/deps.edn
+++ b/frontend/deps.edn
@@ -19,8 +19,8 @@
    :git/url "https://github.com/funcool/beicon.git"}
 
   funcool/rumext
-  {:git/tag "v2.10"
-   :git/sha "d96ea18"
+  {:git/tag "v2.11.1"
+   :git/sha "c9197b0"
    :git/url "https://github.com/funcool/rumext.git"}
 
   instaparse/instaparse {:mvn/version "1.4.12"}
@@ -41,7 +41,7 @@
   :dev
   {:extra-paths ["dev"]
    :extra-deps
-   {thheller/shadow-cljs {:mvn/version "2.26.2"}
+   {thheller/shadow-cljs {:mvn/version "2.27.4"}
     org.clojure/tools.namespace {:mvn/version "RELEASE"}
     cider/cider-nrepl {:mvn/version "0.44.0"}}}
 
diff --git a/frontend/package.json b/frontend/package.json
index b3f059047..7ed94d214 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -39,53 +39,53 @@
     "storybook:build": "npm run storybook:compile && storybook build"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-vite": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.10.6",
+    "@types/node": "^20.11.20",
     "animate.css": "^4.1.1",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "concurrently": "^8.2.2",
+    "draft-js": "git+https://github.com/penpot/draft-js.git",
     "fancy-log": "^2.0.0",
-    "gettext-parser": "^7.0.1",
+    "gettext-parser": "^8.0.0",
     "gulp": "4.0.2",
     "gulp-concat": "^2.6.1",
     "gulp-gzip": "^1.4.2",
     "gulp-mustache": "^5.0.0",
-    "gulp-postcss": "^9.0.1",
+    "gulp-postcss": "^10.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-svg-sprite": "^2.0.3",
-    "jsdom": "^23.1.0",
+    "jsdom": "^24.0.0",
     "map-stream": "0.0.7",
-    "marked": "^7.0.5",
+    "marked": "^12.0.0",
     "mkdirp": "^3.0.1",
-    "nodemon": "^3.0.2",
+    "nodemon": "^3.1.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.35",
     "postcss-clean": "^1.2.2",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
     "rimraf": "^5.0.5",
-    "sass": "^1.69.7",
-    "shadow-cljs": "2.26.2",
-    "storybook": "^7.6.7",
+    "sass": "^1.71.1",
+    "shadow-cljs": "2.27.4",
+    "storybook": "^7.6.17",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vitest": "^1.1.3"
+    "vite": "^5.1.4",
+    "vitest": "^1.3.1"
   },
   "dependencies": {
-    "date-fns": "^2.30.0",
-    "draft-js": "^0.11.7",
-    "eventsource-parser": "^1.1.1",
+    "date-fns": "^3.3.1",
+    "eventsource-parser": "^1.1.2",
     "highlight.js": "^11.9.0",
-    "js-beautify": "^1.14.11",
+    "js-beautify": "^1.15.1",
     "jszip": "^3.10.1",
     "luxon": "^3.4.4",
     "mousetrap": "^1.6.5",
@@ -95,7 +95,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-virtualized": "^9.22.5",
-    "rxjs": "8.0.0-alpha.13",
+    "rxjs": "8.0.0-alpha.14",
     "sax": "^1.3.0",
     "source-map-support": "^0.5.21",
     "tdigest": "^0.1.2",
diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss
index 22fa83699..da1f0d784 100644
--- a/frontend/resources/styles/common/refactor/color-defs.scss
+++ b/frontend/resources/styles/common/refactor/color-defs.scss
@@ -57,16 +57,19 @@
   --la-quaternary: #ff6fe0;
 
   // STATUS COLOR
-  --status-color-success-50: #f0f8ff;
+  --status-color-success-200: #a7e8d9;
   --status-color-success-500: #2d9f8f;
   --status-color-success-950: #0a2927;
-  --status-color-warning-50: #fff4ed;
+
+  --status-color-warning-200: #ffc8a8;
   --status-color-warning-500: #fe4811;
   --status-color-warning-950: #440806;
-  --status-color-error-50: #fff0f3;
+
+  --status-color-error-200: #ffcada;
   --status-color-error-500: #ff3277;
   --status-color-error-950: #500124;
-  --status-color-info-50: #f0f8ff;
+
+  --status-color-info-200: #bae3fd;
   --status-color-info-500: #0e9be9;
   --status-color-info-950: #082c49;
   // Status color default will change with theme and will be defined on theme files
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index 6c0cf1e85..0dc66a551 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -311,15 +311,30 @@
   --modal-separator-backogrund-color: var(--color-background-quaternary);
 
   // ALERTS NOTIFICATION TOAST & STATUS WIDGET
-  --alert-background-color-success: var(--status-color-success-500);
-  --alert-foreground-color-success: var(--db-secondary); // We don't want this color to change with theme
-  --alert-background-color-warning: var(--status-color-warning-500);
-  --alert-foreground-color-warning: var(--app-white); // We don't want this color to change with theme
-  --alert-background-color-error: var(--status-color-error-500);
-  --alert-foreground-color-error: var(--app-white); // We don't want this color to change with theme
-  --alert-background-color-neutral: var(--color-background-quaternary);
-  --alert-foreground-color-neutral: var(--color-foreground-secondary);
-  --alert-foreground-color-neutral-active: var(--color-foreground-primary);
+  --alert-background-color-success: var(--color-success-background);
+  --alert-text-foreground-color-success: var(--color-foreground-primary);
+  --alert-icon-foreground-color-success: var(--color-success-foreground);
+  --alert-border-color-success: var(--color-success-foreground);
+
+  --alert-background-color-warning: var(--color-warning-background);
+  --alert-text-foreground-color-warning: var(--color-foreground-primary);
+  --alert-icon-foreground-color-warning: var(--color-warning-foreground);
+  --alert-border-color-warning: var(--color-warning-foreground);
+
+  --alert-background-color-error: var(--color-error-background);
+  --alert-text-foreground-color-error: var(--color-foreground-primary);
+  --alert-icon-foreground-color-error: var(--color-error-foreground);
+  --alert-border-color-error: var(--color-error-foreground);
+
+  --alert-background-color-info: var(--color-info-background);
+  --alert-text-foreground-color-info: var(--color-foreground-primary);
+  --alert-icon-foreground-color-info: var(--color-info-foreground);
+  --alert-border-color-info: var(--color-info-foreground);
+
+  --alert-background-color-default: var(--color-background-primary);
+  --alert-text-foreground-color-default: var(--color-foreground-primary);
+  --alert-icon-foreground-color-default: var(--color-foreground-primary);
+  --alert-border-color-default: var(--color-background-quaternary);
 
   --notification-background-color-success: var();
   --notification-foreground-color-success: var();
diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss
index 8f7dd0172..432906c9e 100644
--- a/frontend/resources/styles/common/refactor/themes/default-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss
@@ -24,6 +24,18 @@
   --color-accent-quaternary: var(--da-quaternary);
   --color-component-highlight: var(--da-secondary);
 
+  --color-success-background: var(--status-color-success-950);
+  --color-success-foreground: var(--status-color-success-500);
+
+  --color-warning-background: var(--status-color-warning-950);
+  --color-warning-foreground: var(--status-color-warning-500);
+
+  --color-error-background: var(--status-color-error-950);
+  --color-error-foreground: var(--status-color-error-500);
+
+  --color-info-background: var(--status-color-info-950);
+  --color-info-foreground: var(--status-color-info-500);
+
   --overlay-color: var(--db-primary-60);
 
   --shadow-color: var(--db-secondary-30);
diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss
index 86e3ae7c8..cd9b6e61c 100644
--- a/frontend/resources/styles/common/refactor/themes/light-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss
@@ -24,6 +24,18 @@
   --color-accent-quaternary: var(--la-quaternary);
   --color-component-highlight: var(--la-secondary);
 
+  --color-success-background: var(--status-color-success-200);
+  --color-success-foreground: var(--status-color-success-500);
+
+  --color-warning-background: var(--status-color-warning-200);
+  --color-warning-foreground: var(--status-color-warning-500);
+
+  --color-error-background: var(--status-color-error-200);
+  --color-error-foreground: var(--status-color-error-500);
+
+  --color-info-background: var(--status-color-info-200);
+  --color-info-foreground: var(--status-color-info-500);
+
   --overlay-color: var(--lb-primary-60);
   --shadow-color: var(--lf-secondary-40);
   --radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset;
diff --git a/frontend/src/app/main/data/common.cljs b/frontend/src/app/main/data/common.cljs
index 847d2b7a3..4bab615e9 100644
--- a/frontend/src/app/main/data/common.cljs
+++ b/frontend/src/app/main/data/common.cljs
@@ -70,6 +70,7 @@
           (rx/of (msg/dialog
                   :content (tr "notifications.by-code.upgrade-version")
                   :controls :inline-actions
+                  :notification-type :inline
                   :type level
                   :actions [{:label "Refresh" :callback force-reload!}]
                   :tag :notification)))
diff --git a/frontend/src/app/main/data/media.cljs b/frontend/src/app/main/data/media.cljs
index 7fc52b00c..bb1a82e39 100644
--- a/frontend/src/app/main/data/media.cljs
+++ b/frontend/src/app/main/data/media.cljs
@@ -8,7 +8,7 @@
   (:require
    [app.common.exceptions :as ex]
    [app.common.media :as cm]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.store :as st]
    [app.util.i18n :refer [tr]]
    [beicon.v2.core :as rx]
@@ -46,13 +46,13 @@
 
 (defn notify-start-loading
   []
-  (st/emit! (dm/show {:content (tr "media.loading")
-                      :type :info
-                      :timeout nil})))
+  (st/emit! (msg/show {:content (tr "media.loading")
+                       :type :info
+                       :timeout nil})))
 
 (defn notify-finished-loading
   []
-  (st/emit! dm/hide))
+  (st/emit! msg/hide))
 
 (defn process-error
   [error]
@@ -68,4 +68,4 @@
 
               :else
               (tr "errors.unexpected-error"))]
-    (rx/of (dm/error msg))))
+    (rx/of (msg/error msg))))
diff --git a/frontend/src/app/main/data/messages.cljs b/frontend/src/app/main/data/messages.cljs
index ef4c131ab..6a31ca363 100644
--- a/frontend/src/app/main/data/messages.cljs
+++ b/frontend/src/app/main/data/messages.cljs
@@ -16,7 +16,7 @@
 (declare show)
 
 (def default-animation-timeout 600)
-(def default-timeout 5000)
+(def default-timeout 7000)
 
 (def ^:private
   schema:message
@@ -27,6 +27,8 @@
       [::sm/one-of #{:visible :hide}]]
      [:position {:optional true}
       [::sm/one-of #{:fixed :floating :inline}]]
+     [:notification-type {:optional true}
+      [::sm/one-of #{:inline :context :toast}]]
      [:controls {:optional true}
       [::sm/one-of #{:none :close :inline-actions :bottom-actions}]]
      [:tag {:optional true}
@@ -93,18 +95,18 @@
           (rx/of hide))))))
 
 (defn error
-  ([content] (error content {}))
-  ([content {:keys [timeout] :or {timeout default-timeout}}]
+  ([content]
    (show {:content content
           :type :error
-          :position :fixed
-          :timeout timeout})))
+          :notification-type :toast
+          :position :fixed})))
 
 (defn info
   ([content] (info content {}))
   ([content {:keys [timeout] :or {timeout default-timeout}}]
    (show {:content content
           :type :info
+          :notification-type :toast
           :position :fixed
           :timeout timeout})))
 
@@ -113,6 +115,7 @@
   ([content {:keys [timeout] :or {timeout default-timeout}}]
    (show {:content content
           :type :success
+          :notification-type :toast
           :position :fixed
           :timeout timeout})))
 
@@ -121,6 +124,7 @@
   ([content {:keys [timeout] :or {timeout default-timeout}}]
    (show {:content content
           :type :warning
+          :notification-type :toast
           :position :fixed
           :timeout timeout})))
 
@@ -142,6 +146,7 @@
          {:content content
           :type :info
           :position :floating
+          :notification-type :inline
           :controls controls
           :links links
           :actions actions
diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs
index 23e69b8f5..216a20a4a 100644
--- a/frontend/src/app/main/data/workspace/libraries.cljs
+++ b/frontend/src/app/main/data/workspace/libraries.cljs
@@ -609,24 +609,29 @@
   (ptk/reify ::detach-selected-components
     ptk/WatchEvent
     (watch [it state _]
-      (let [page-id   (:current-page-id state)
-            objects   (wsh/lookup-page-objects state page-id)
-            file      (wsh/get-local-file state)
-            container (cfh/get-container file :page page-id)
-            libraries (wsh/get-libraries state)
-            selected  (->> state
-                           (wsh/lookup-selected)
-                           (cfh/clean-loops objects))
+      (let [page-id          (:current-page-id state)
+            objects          (wsh/lookup-page-objects state page-id)
+            file             (wsh/get-local-file state)
+            container        (cfh/get-container file :page page-id)
+            libraries        (wsh/get-libraries state)
+            selected         (->> state
+                                  (wsh/lookup-selected)
+                                  (cfh/clean-loops objects))
+            selected-objects (map #(get objects %) selected)
+            copies           (filter ctk/in-component-copy? selected-objects)
+            can-detach?      (and (seq copies)
+                                  (every? #(not (ctn/has-any-copy-parent? objects %)) selected-objects))
+            changes (when can-detach?
+                      (reduce
+                       (fn [changes id]
+                         (dwlh/generate-detach-instance changes container libraries id))
+                       (-> (pcb/empty-changes it)
+                           (pcb/with-container container)
+                           (pcb/with-objects objects))
+                       selected))]
 
-            changes (reduce
-                     (fn [changes id]
-                       (dwlh/generate-detach-instance changes libraries container id))
-                     (-> (pcb/empty-changes it)
-                         (pcb/with-container container)
-                         (pcb/with-objects objects))
-                     selected)]
-
-        (rx/of (dch/commit-changes changes))))))
+        (rx/of (when can-detach?
+                 (dch/commit-changes changes)))))))
 
 (defn nav-to-component-file
   [file-id component]
@@ -1126,12 +1131,12 @@
                   :controls :inline-actions
                   :links   [{:label (tr "workspace.updates.more-info")
                              :callback do-more-info}]
-                  :actions [{:label (tr "workspace.updates.update")
-                             :type :primary
-                             :callback do-update}
-                            {:label (tr "workspace.updates.dismiss")
+                  :actions [{:label (tr "workspace.updates.dismiss")
                              :type :secondary
-                             :callback do-dismiss}]
+                             :callback do-dismiss}
+                            {:label (tr "workspace.updates.update")
+                             :type :primary
+                             :callback do-update}]
                   :tag :sync-dialog)))))))
 
 (defn component-changed
diff --git a/frontend/src/app/main/data/workspace/libraries_helpers.cljs b/frontend/src/app/main/data/workspace/libraries_helpers.cljs
index 47b805b09..84b429de4 100644
--- a/frontend/src/app/main/data/workspace/libraries_helpers.cljs
+++ b/frontend/src/app/main/data/workspace/libraries_helpers.cljs
@@ -599,15 +599,10 @@
         library    (dm/get-in libraries [(:component-file shape-inst) :data])
         component  (or (ctkl/get-component library (:component-id shape-inst))
                        (and reset?
-                            (ctkl/get-deleted-component library (:component-id shape-inst))))
-        component-shape (ctn/get-component-shape (:objects container) shape-inst)]
+                            (ctkl/get-deleted-component library (:component-id shape-inst))))]
     (if (and (ctk/in-component-copy? shape-inst)
-             (or (= (:id component) (:component-id component-shape)) reset?)) ; In a normal sync, we don't want to sync remote mains, only near
+             (or (ctf/direct-copy? shape-inst component container nil libraries) reset?)) ; In a normal sync, we don't want to sync remote mains, only direct/near
       (let [redirect-shaperef (partial redirect-shaperef container libraries)
-            library    (dm/get-in libraries [(:component-file shape-inst) :data])
-            component  (or (ctkl/get-component library (:component-id shape-inst))
-                           (and reset?
-                                (ctkl/get-deleted-component library (:component-id shape-inst))))
 
             shape-main (when component
                          (if (and reset? components-v2)
diff --git a/frontend/src/app/main/snap.cljs b/frontend/src/app/main/snap.cljs
index 374ec676b..5e8f14431 100644
--- a/frontend/src/app/main/snap.cljs
+++ b/frontend/src/app/main/snap.cljs
@@ -82,13 +82,14 @@
 
 (defn get-snap-points [page-id frame-id remove-snap? zoom point coord]
   (let [value (get point coord)
-        vbox @refs/vbox]
+        vbox @refs/vbox
+        ranges [[(- value (/ 0.5 zoom)) (+ value (/ 0.5 zoom))]]]
     (->> (uw/ask! {:cmd :snaps/range-query
                    :page-id page-id
                    :frame-id frame-id
                    :axis coord
                    :bounds vbox
-                   :ranges [[(- value (/ 0.5 zoom)) (+ value (/ 0.5 zoom))]]})
+                   :ranges ranges})
          (rx/take 1)
          (rx/map (remove-from-snap-points remove-snap?)))))
 
diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs
index 88f10e293..69c83db69 100644
--- a/frontend/src/app/main/ui.cljs
+++ b/frontend/src/app/main/ui.cljs
@@ -173,6 +173,6 @@
       (if edata
         [:& static/exception-page {:data edata}]
         [:*
-         [:& msgs/notifications]
+         [:& msgs/notifications-hub]
          (when route
            [:& main-page {:route route :profile profile}])])]]))
diff --git a/frontend/src/app/main/ui/auth/common.scss b/frontend/src/app/main/ui/auth/common.scss
index db99ba8fa..23e2ba11c 100644
--- a/frontend/src/app/main/ui/auth/common.scss
+++ b/frontend/src/app/main/ui/auth/common.scss
@@ -8,13 +8,13 @@
 
 .auth-form {
   width: 100%;
-  padding-bottom: $s-16;
+  padding-block-end: $s-16;
 
   form {
     display: flex;
     flex-direction: column;
     gap: $s-12;
-    margin-bottom: $s-24;
+    margin-block-end: $s-24;
   }
 }
 
@@ -23,6 +23,10 @@
   margin: $s-24 0;
 }
 
+.error-wrapper {
+  padding-block-end: $s-8;
+}
+
 .auth-title {
   @include bigTitleTipography;
   color: $df-primary;
diff --git a/frontend/src/app/main/ui/auth/login.cljs b/frontend/src/app/main/ui/auth/login.cljs
index bd5804b24..b48b9fd9c 100644
--- a/frontend/src/app/main/ui/auth/login.cljs
+++ b/frontend/src/app/main/ui/auth/login.cljs
@@ -11,7 +11,7 @@
    [app.common.logging :as log]
    [app.common.spec :as us]
    [app.config :as cf]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.users :as du]
    [app.main.repo :as rp]
    [app.main.store :as st]
@@ -19,7 +19,7 @@
    [app.main.ui.components.forms :as fm]
    [app.main.ui.components.link :as lk]
    [app.main.ui.icons :as i]
-   [app.main.ui.messages :as msgs]
+   [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [app.util.keyboard :as k]
@@ -48,10 +48,10 @@
                    (cond
                      (and (= type :restriction)
                           (= code :provider-not-configured))
-                     (st/emit! (dm/error (tr "errors.auth-provider-not-configured")))
+                     (st/emit! (msg/error (tr "errors.auth-provider-not-configured")))
 
                      :else
-                     (st/emit! (dm/error (tr "errors.generic"))))))))
+                     (st/emit! (msg/error (tr "errors.generic"))))))))
 
 (defn- login-with-ldap
   [event params]
@@ -67,13 +67,13 @@
                      (cond
                        (and (= type :restriction)
                             (= code :ldap-not-initialized))
-                       (st/emit! (dm/error (tr "errors.ldap-disabled")))
+                       (st/emit! (msg/error (tr "errors.ldap-disabled")))
 
                        (fn? on-error)
                        (on-error error)
 
                        :else
-                       (st/emit! (dm/error (tr "errors.generic")))))))))
+                       (st/emit! (msg/error (tr "errors.generic")))))))))
 
 (s/def ::email ::us/email)
 (s/def ::password ::us/not-empty-string)
@@ -157,12 +157,12 @@
 
     [:*
      (when-let [message @error]
-       [:& msgs/inline-banner
-        {:type :warning
-         :content message
-         :on-close #(reset! error nil)
-         :data-test "login-banner"
-         :role "alert"}])
+       [:div {:class (stl/css :error-wrapper)}
+        [:& context-notification
+         {:type :warning
+          :content message
+          :data-test "login-banner"
+          :role "alert"}]])
 
      [:& fm/form {:on-submit on-submit :form form}
       [:div {:class (stl/css :fields-row)}
diff --git a/frontend/src/app/main/ui/auth/recovery.cljs b/frontend/src/app/main/ui/auth/recovery.cljs
index f43b939bc..1425d9d1e 100644
--- a/frontend/src/app/main/ui/auth/recovery.cljs
+++ b/frontend/src/app/main/ui/auth/recovery.cljs
@@ -8,7 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.spec :as us]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.users :as du]
    [app.main.store :as st]
    [app.main.ui.components.forms :as fm]
@@ -39,11 +39,11 @@
 
 (defn- on-error
   [_form _error]
-  (st/emit! (dm/error (tr "auth.notifications.invalid-token-error"))))
+  (st/emit! (msg/error (tr "auth.notifications.invalid-token-error"))))
 
 (defn- on-success
   [_]
-  (st/emit! (dm/info (tr "auth.notifications.password-changed-successfully"))
+  (st/emit! (msg/info (tr "auth.notifications.password-changed-successfully"))
             (rt/nav :auth-login)))
 
 (defn- on-submit
diff --git a/frontend/src/app/main/ui/auth/recovery_request.cljs b/frontend/src/app/main/ui/auth/recovery_request.cljs
index d45720ea1..e90eec477 100644
--- a/frontend/src/app/main/ui/auth/recovery_request.cljs
+++ b/frontend/src/app/main/ui/auth/recovery_request.cljs
@@ -9,7 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.common.spec :as us]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.users :as du]
    [app.main.store :as st]
    [app.main.ui.components.forms :as fm]
@@ -37,7 +37,7 @@
                                :initial {})
         submitted (mf/use-state false)
 
-        default-success-finish #(st/emit! (dm/info (tr "auth.notifications.recovery-token-sent")))
+        default-success-finish #(st/emit! (msg/info (tr "auth.notifications.recovery-token-sent")))
 
         on-success
         (mf/use-callback
@@ -53,13 +53,13 @@
            (reset! submitted false)
            (case code
              :profile-not-verified
-             (rx/of (dm/error (tr "auth.notifications.profile-not-verified") {:timeout nil}))
+             (rx/of (msg/error (tr "auth.notifications.profile-not-verified")))
 
              :profile-is-muted
-             (rx/of (dm/error (tr "errors.profile-is-muted")))
+             (rx/of (msg/error (tr "errors.profile-is-muted")))
 
              :email-has-permanent-bounces
-             (rx/of (dm/error (tr "errors.email-has-permanent-bounces" (:email data))))
+             (rx/of (msg/error (tr "errors.email-has-permanent-bounces" (:email data))))
 
              (rx/throw error))))
 
diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs
index 121d2523d..cda4f878d 100644
--- a/frontend/src/app/main/ui/auth/register.cljs
+++ b/frontend/src/app/main/ui/auth/register.cljs
@@ -10,7 +10,7 @@
    [app.common.data :as d]
    [app.common.spec :as us]
    [app.config :as cf]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.users :as du]
    [app.main.repo :as rp]
    [app.main.store :as st]
@@ -18,7 +18,7 @@
    [app.main.ui.components.forms :as fm]
    [app.main.ui.components.link :as lk]
    [app.main.ui.icons :as i]
-   [app.main.ui.messages :as msgs]
+   [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.util.i18n :refer [tr tr-html]]
    [app.util.router :as rt]
    [beicon.v2.core :as rx]
@@ -28,7 +28,7 @@
 (mf/defc demo-warning
   [_]
   [:div {:class (stl/css :banner)}
-   [:& msgs/inline-banner
+   [:& context-notification
     {:type :warning
      :content (tr "auth.demo-warning")}]])
 
@@ -61,14 +61,14 @@
   [form {:keys [type code] :as cause}]
   (condp = [type code]
     [:restriction :registration-disabled]
-    (st/emit! (dm/error (tr "errors.registration-disabled")))
+    (st/emit! (msg/error (tr "errors.registration-disabled")))
 
     [:restriction :profile-blocked]
-    (st/emit! (dm/error (tr "errors.profile-blocked")))
+    (st/emit! (msg/error (tr "errors.profile-blocked")))
 
     [:validation :email-has-permanent-bounces]
     (let [email (get @form [:data :email])]
-      (st/emit! (dm/error (tr "errors.email-has-permanent-bounces" email))))
+      (st/emit! (msg/error (tr "errors.email-has-permanent-bounces" email))))
 
     [:validation :email-already-exists]
     (swap! form assoc-in [:errors :email]
@@ -78,7 +78,7 @@
     (swap! form assoc-in [:errors :password]
            {:message "errors.email-as-password"})
 
-    (st/emit! (dm/error (tr "errors.generic")))))
+    (st/emit! (msg/error (tr "errors.generic")))))
 
 (defn- handle-prepare-register-success
   [params]
@@ -182,7 +182,7 @@
 
     (do
       (println (:explain error))
-      (st/emit! (dm/error (tr "errors.generic"))))))
+      (st/emit! (msg/error (tr "errors.generic"))))))
 
 (defn- handle-register-success
   [data]
diff --git a/frontend/src/app/main/ui/auth/verify_token.cljs b/frontend/src/app/main/ui/auth/verify_token.cljs
index 827e37f0e..a914bd46a 100644
--- a/frontend/src/app/main/ui/auth/verify_token.cljs
+++ b/frontend/src/app/main/ui/auth/verify_token.cljs
@@ -7,7 +7,7 @@
 (ns app.main.ui.auth.verify-token
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.users :as du]
    [app.main.repo :as rp]
    [app.main.store :as st]
@@ -25,13 +25,13 @@
 (defmethod handle-token :verify-email
   [data]
   (let [msg (tr "dashboard.notifications.email-verified-successfully")]
-    (ts/schedule 1000 #(st/emit! (dm/success msg)))
+    (ts/schedule 1000 #(st/emit! (msg/success msg)))
     (st/emit! (du/login-from-token data))))
 
 (defmethod handle-token :change-email
   [_data]
   (let [msg (tr "dashboard.notifications.email-changed-successfully")]
-    (ts/schedule 100 #(st/emit! (dm/success msg)))
+    (ts/schedule 100 #(st/emit! (msg/success msg)))
     (st/emit! (rt/nav :settings-profile)
               (du/fetch-profile))))
 
@@ -44,7 +44,7 @@
   (case (:state tdata)
     :created
     (st/emit!
-     (dm/success (tr "auth.notifications.team-invitation-accepted"))
+     (msg/success (tr "auth.notifications.team-invitation-accepted"))
      (du/fetch-profile)
      (rt/nav :dashboard-projects {:team-id (:team-id tdata)}))
 
@@ -57,7 +57,7 @@
   [_tdata]
   (st/emit!
    (rt/nav :auth-login)
-   (dm/warn (tr "errors.unexpected-token"))))
+   (msg/warn (tr "errors.unexpected-token"))))
 
 (mf/defc verify-token
   [{:keys [route] :as props}]
@@ -79,17 +79,17 @@
 
                 (= :email-already-exists code)
                 (let [msg (tr "errors.email-already-exists")]
-                  (ts/schedule 100 #(st/emit! (dm/error msg)))
+                  (ts/schedule 100 #(st/emit! (msg/error msg)))
                   (st/emit! (rt/nav :auth-login)))
 
                 (= :email-already-validated code)
                 (let [msg (tr "errors.email-already-validated")]
-                  (ts/schedule 100 #(st/emit! (dm/warn msg)))
+                  (ts/schedule 100 #(st/emit! (msg/warn msg)))
                   (st/emit! (rt/nav :auth-login)))
 
                 :else
                 (let [msg (tr "errors.generic")]
-                  (ts/schedule 100 #(st/emit! (dm/error msg)))
+                  (ts/schedule 100 #(st/emit! (msg/error msg)))
                   (st/emit! (rt/nav :auth-login))))))))
 
     (if @bad-token
diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs
index d1f09ca60..b7ad29e5f 100644
--- a/frontend/src/app/main/ui/components/forms.cljs
+++ b/frontend/src/app/main/ui/components/forms.cljs
@@ -296,19 +296,13 @@
 
 (mf/defc submit-button*
   {::mf/wrap-props false}
-  [{:keys [on-click children label form class name disabled large?] :as props}]
+  [{:keys [on-click children label form class name disabled] :as props}]
   (let [form      (or form (mf/use-ctx form-ctx))
 
         disabled? (or (and (some? form) (not (:valid @form)))
                       (true? disabled))
 
-        large?    (d/nilv large? true)
-
-        class     (dm/str (d/nilv class "btn-primary")
-                          " "
-                          (if large? "btn-large" "")
-                          " "
-                          (if disabled? (stl/css :btn-disabled) ""))
+        class     (d/nilv class (stl/css :button-submit))
 
         name      (d/nilv name "submit")
 
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index 433d61cdf..5325e94e7 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -257,7 +257,11 @@
 }
 
 // SUBMIT-BUTTON
-.btn-disabled {
+.button-submit {
+  @extend .button-primary;
+}
+
+:disabled {
   @extend .button-disabled;
 }
 
@@ -329,10 +333,10 @@
         &.invalid {
           background-color: var(--status-widget-background-color-error);
           .text {
-            color: var(--alert-foreground-color-error);
+            color: var(--alert-text-foreground-color-error);
           }
           .icon svg {
-            stroke: var(--alert-foreground-color-error);
+            stroke: var(--alert-icon-foreground-color-error);
           }
         }
       }
@@ -422,6 +426,7 @@
     fill: none;
   }
 }
+
 //TEXTAREA
 
 .textarea-label {
diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs
index 6c7d3c73a..0d7cce294 100644
--- a/frontend/src/app/main/ui/components/radio_buttons.cljs
+++ b/frontend/src/app/main/ui/components/radio_buttons.cljs
@@ -18,7 +18,7 @@
 
 (mf/defc radio-button
   {::mf/props :obj}
-  [{:keys [icon id value disabled title unique-key icon-class type]}]
+  [{:keys [icon id value disabled title icon-class type]}]
   (let [context     (mf/use-ctx context)
         allow-empty (unchecked-get context "allow-empty")
         type        (if ^boolean type
@@ -39,7 +39,6 @@
 
     [:label {:html-for id
              :title title
-             :key unique-key
              :class (stl/css-case
                      :radio-icon true
                      :checked checked?
@@ -88,9 +87,10 @@
              (dom/blur! input))))
 
         context-value
-        (mf/spread-obj props {:on-change on-change'
-                              :encode-fn encode-fn
-                              :decode-fn decode-fn})]
+        (mf/spread props
+                   :on-change on-change'
+                   :encode-fn encode-fn
+                   :decode-fn decode-fn)]
 
     [:& (mf/provider context) {:value context-value}
      [:div {:class (dm/str class " " (stl/css :radio-btn-wrapper))
diff --git a/frontend/src/app/main/ui/dashboard/file_menu.cljs b/frontend/src/app/main/ui/dashboard/file_menu.cljs
index dd7c452d0..4be78a0e2 100644
--- a/frontend/src/app/main/ui/dashboard/file_menu.cljs
+++ b/frontend/src/app/main/ui/dashboard/file_menu.cljs
@@ -9,7 +9,7 @@
    [app.main.data.common :as dcm]
    [app.main.data.dashboard :as dd]
    [app.main.data.events :as ev]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
    [app.main.repo :as rp]
    [app.main.store :as st]
@@ -88,12 +88,12 @@
         on-duplicate
         (fn [_]
           (apply st/emit! (map dd/duplicate-file files))
-          (st/emit! (dm/success (tr "dashboard.success-duplicate-file" (i18n/c (count files))))))
+          (st/emit! (msg/success (tr "dashboard.success-duplicate-file" (i18n/c (count files))))))
 
         on-delete-accept
         (fn [_]
           (apply st/emit! (map dd/delete-file files))
-          (st/emit! (dm/success (tr "dashboard.success-delete-file" (i18n/c (count files))))
+          (st/emit! (msg/success (tr "dashboard.success-delete-file" (i18n/c (count files))))
                     (dd/clear-selected-files)))
 
         on-delete
@@ -126,21 +126,36 @@
         on-move-success
         (fn [team-id project-id]
           (if multi?
-            (st/emit! (dm/success (tr "dashboard.success-move-files")))
-            (st/emit! (dm/success (tr "dashboard.success-move-file"))))
+            (st/emit! (msg/success (tr "dashboard.success-move-files")))
+            (st/emit! (msg/success (tr "dashboard.success-move-file"))))
           (if (or navigate? (not= team-id current-team-id))
             (st/emit! (dd/go-to-files team-id project-id))
             (st/emit! (dd/fetch-recent-files team-id)
                       (dd/clear-selected-files))))
 
+        on-move-accept
+        (fn [params team-id project-id]
+          (st/emit! (dd/move-files
+                     (with-meta params
+                       {:on-success #(on-move-success team-id project-id)}))))
+
         on-move
         (fn [team-id project-id]
           (let [params  {:ids (into #{} (map :id) files)
                          :project-id project-id}]
             (fn []
-              (st/emit! (dd/move-files
-                         (with-meta params
-                           {:on-success #(on-move-success team-id project-id)}))))))
+
+              (let [num-shared (filter #(:is-shared %) files)]
+                (if (and (< 0 (count num-shared))
+                         (not= team-id current-team-id))
+                  (st/emit! (modal/show
+                             {:type :delete-shared-libraries
+                              :origin :move
+                              :ids (into #{} (map :id) files)
+                              :on-accept #(on-move-accept params team-id project-id)
+                              :count-libraries (count num-shared)}))
+
+                  (on-move-accept params team-id project-id))))))
 
         add-shared
         #(st/emit! (dd/set-file-shared (assoc file :is-shared true)))
diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs
index c51ca9345..d0b3751c2 100644
--- a/frontend/src/app/main/ui/dashboard/fonts.cljs
+++ b/frontend/src/app/main/ui/dashboard/fonts.cljs
@@ -14,10 +14,10 @@
    [app.main.refs :as refs]
    [app.main.repo :as rp]
    [app.main.store :as st]
-
    [app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]]
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.icons :as i]
+   [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -131,18 +131,14 @@
                            :ref input-ref
                            :on-selected handle-selected}]]
 
-       [:div {:class (stl/css :banner)}
-        [:div {:class (stl/css :icon)} i/msg-neutral-refactor]
-        [:div {:class (stl/css :content)}
-         [:& i18n/tr-html {:tag-name "span"
-                           :label "dashboard.fonts.hero-text2"}]]]
+       [:& context-notification {:content (tr "dashboard.fonts.hero-text2")
+                                 :type :default
+                                 :is-html true}]
 
        (when problematic-fonts?
-         [:div {:class (stl/css :banner :warning)}
-          [:div {:class (stl/css :icon)} i/msg-warning-refactor]
-          [:div {:class (stl/css :content)}
-           [:& i18n/tr-html {:tag-name "span"
-                             :label "dashboard.fonts.warning-text"}]]])]]
+         [:& context-notification {:content (tr "dashboard.fonts.warning-text")
+                                   :type :warning
+                                   :is-html true}])]]
 
      [:*
       (when (some? (vals fonts))
@@ -176,7 +172,7 @@
 
            [:div {:class (stl/css :table-field :options)}
             (when (:height-warning? item)
-              [:span {:class (stl/css :icon :failure)} i/msg-warning-refactor])
+              [:span {:class (stl/css :icon :failure)} i/msg-neutral-refactor])
 
             [:button {:on-click #(on-upload item)
                       :class (stl/css-case :btn-primary true
diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss
index 6543736c1..e520e01a4 100644
--- a/frontend/src/app/main/ui/dashboard/fonts.scss
+++ b/frontend/src/app/main/ui/dashboard/fonts.scss
@@ -255,47 +255,6 @@
     }
   }
 
-  .banner {
-    overflow: hidden;
-    display: grid;
-    grid-template-columns: $s-40 1fr;
-
-    background-color: $db-primary;
-    border-radius: $br-12;
-    border: $s-1 solid $db-quaternary;
-    color: $df-primary;
-    font-size: $fs-12;
-
-    &:not(:last-child) {
-      margin-bottom: $s-12;
-    }
-    .icon {
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      padding-top: $s-12;
-
-      svg {
-        stroke: $df-secondary;
-        fill: none;
-        height: $s-20;
-        width: $s-20;
-      }
-    }
-    .content {
-      margin: $s-12;
-      a {
-        color: $da-primary;
-      }
-    }
-    &.warning {
-      background-color: $db-quaternary;
-      .icon svg {
-        stroke: var(--element-foreground-warning);
-      }
-    }
-  }
-
   .btn-primary {
     flex-shrink: 0;
   }
diff --git a/frontend/src/app/main/ui/dashboard/import.cljs b/frontend/src/app/main/ui/dashboard/import.cljs
index e2f63f5c3..8bca69f80 100644
--- a/frontend/src/app/main/ui/dashboard/import.cljs
+++ b/frontend/src/app/main/ui/dashboard/import.cljs
@@ -19,6 +19,7 @@
    [app.main.store :as st]
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.icons :as i]
+   [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.main.worker :as uw]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -385,14 +386,12 @@
 
        (when (and (= :importing (:status @state)) (not pending-import?))
          (if (> warning-files 0)
-           [:div {:class (stl/css-case :feedback-banner true
-                                       :warning true)}
-            [:div {:class (stl/css :icon)} i/msg-warning-refactor]
-            [:div {:class (stl/css :message)} (tr "dashboard.import.import-warning" warning-files success-files)]]
-
-           [:div {:class (stl/css :feedback-banner)}
-            [:div {:class (stl/css :icon)}  i/msg-success-refactor]
-            [:div {:class (stl/css :message)} (tr "dashboard.import.import-message" (i18n/c (if (some? template) 1 success-files)))]]))
+           [:& context-notification
+            {:type :warning
+             :content (tr "dashboard.import.import-warning" warning-files success-files)}]
+           [:& context-notification
+            {:type :success
+             :content (tr "dashboard.import.import-message" (i18n/c (if (some? template) 1 success-files)))}]))
 
        (for [file files]
          (let [editing? (and (some? (:file-id file))
diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss
index 3b50b0e33..6d0f183fe 100644
--- a/frontend/src/app/main/ui/dashboard/import.scss
+++ b/frontend/src/app/main/ui/dashboard/import.scss
@@ -29,39 +29,12 @@
 
 .modal-content {
   @include bodyMedTipography;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: $s-16;
   margin-bottom: $s-24;
 }
 
-.feedback-banner {
-  @include flexRow;
-  height: $s-32;
-  width: 100%;
-  margin-bottom: $s-24;
-  border-radius: $br-8;
-  background-color: var(--alert-background-color-success);
-  color: var(--alert-foreground-color-success);
-
-  .icon {
-    @include flexCenter;
-    height: $s-24;
-    width: $s-24;
-    svg {
-      @extend .button-icon;
-      stroke: var(--alert-foreground-color-success);
-    }
-  }
-  .message {
-    @include bodyMedTipography;
-  }
-  &.warning {
-    background-color: var(--alert-background-color-warning);
-    color: var(--alert-foreground-color-warning);
-    .icon svg {
-      stroke: var(--alert-foreground-color-warning);
-    }
-  }
-}
-
 .action-buttons {
   @extend .modal-action-btns;
 }
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index c5f266131..8245e8182 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -608,7 +608,7 @@
       height: $s-24;
       svg {
         @extend .button-icon;
-        stroke: var(--alert-foreground-color-error);
+        stroke: var(--alert-icon-foreground-color-error);
       }
     }
     .message {
@@ -632,7 +632,7 @@
       height: $s-24;
       svg {
         @extend .button-icon;
-        stroke: var(--alert-foreground-color-warning);
+        stroke: var(--alert-icon-foreground-color-warning);
       }
     }
     .message {
diff --git a/frontend/src/app/main/ui/dashboard/team_form.cljs b/frontend/src/app/main/ui/dashboard/team_form.cljs
index 81db87865..ff500666d 100644
--- a/frontend/src/app/main/ui/dashboard/team_form.cljs
+++ b/frontend/src/app/main/ui/dashboard/team_form.cljs
@@ -9,7 +9,7 @@
   (:require
    [app.common.spec :as us]
    [app.main.data.dashboard :as dd]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
    [app.main.store :as st]
    [app.main.ui.components.forms :as fm]
@@ -29,22 +29,22 @@
 (defn- on-create-success
   [_form response]
   (let [msg "Team created successfully"]
-    (st/emit! (dm/success msg)
+    (st/emit! (msg/success msg)
               (modal/hide)
               (rt/nav :dashboard-projects {:team-id (:id response)}))))
 
 (defn- on-update-success
   [_form _response]
   (let [msg "Team created successfully"]
-    (st/emit! (dm/success msg)
+    (st/emit! (msg/success msg)
               (modal/hide))))
 
 (defn- on-error
   [form _response]
   (let [id  (get-in @form [:clean-data :id])]
     (if id
-      (rx/of (dm/error "Error on updating team."))
-      (rx/of (dm/error "Error on creating team.")))))
+      (rx/of (msg/error "Error on updating team."))
+      (rx/of (msg/error "Error on creating team.")))))
 
 (defn- on-create-submit
   [form]
@@ -117,6 +117,6 @@
           {:label (if team
                     (tr "labels.update-team")
                     (tr "labels.create-team"))
-           :className (stl/css :accept-btn)}]]]]]]))
+           :class (stl/css :accept-btn)}]]]]]]))
 
 
diff --git a/frontend/src/app/main/ui/delete_shared.cljs b/frontend/src/app/main/ui/delete_shared.cljs
index f1254fc86..f0e8dabc3 100644
--- a/frontend/src/app/main/ui/delete_shared.cljs
+++ b/frontend/src/app/main/ui/delete_shared.cljs
@@ -35,28 +35,26 @@
         cancel-label (tr "labels.cancel")
         accept-style (or accept-style :danger)
 
-        is-delete?   (= origin :delete)
         count-files  (count (keys references))
 
-        title        (if ^boolean is-delete?
-                       (tr "modals.delete-shared-confirm.title" (i18n/c count-libraries))
-                       (tr "modals.unpublish-shared-confirm.title" (i18n/c count-libraries)))
+        title        (case origin
+                       :delete    (tr "modals.delete-shared-confirm.title" (i18n/c count-libraries))
+                       :unpublish (tr "modals.unpublish-shared-confirm.title" (i18n/c count-libraries))
+                       :move      (tr "modals.move-shared-confirm.title" (i18n/c count-libraries)))
 
-        subtitle     (if ^boolean is-delete?
-                       (tr "modals.delete-shared-confirm.message" (i18n/c count-libraries))
-                       (tr "modals.unpublish-shared-confirm.message" (i18n/c count-libraries)))
+        subtitle     (case origin
+                       :delete    (tr "modals.delete-shared-confirm.message" (i18n/c count-libraries))
+                       :unpublish (tr "modals.unpublish-shared-confirm.message" (i18n/c count-libraries))
+                       :move      (tr "modals.move-shared-confirm.message" (i18n/c count-libraries)))
 
-        accept-label (if ^boolean is-delete?
-                       (tr "modals.delete-shared-confirm.accept" (i18n/c count-libraries))
-                       (tr "modals.unpublish-shared-confirm.accept" (i18n/c count-libraries)))
+        accept-label (case origin
+                       :delete    (tr "modals.delete-shared-confirm.accept" (i18n/c count-libraries))
+                       :unpublish (tr "modals.unpublish-shared-confirm.accept" (i18n/c count-libraries))
+                       :move      (tr "modals.move-shared-confirm.accept" (i18n/c count-libraries)))
 
-        no-files-msg (if ^boolean is-delete?
-                       (tr "modals.delete-shared-confirm.activated.no-files-message" (i18n/c count-libraries))
-                       (tr "modals.unpublish-shared-confirm.activated.no-files-message" (i18n/c count-libraries)))
+        no-files-msg (tr "modals.delete-shared-confirm.activated.no-files-message" (i18n/c count-libraries))
 
-        scd-msg      (if ^boolean is-delete?
-                       (tr "modals.delete-shared-confirm.activated.scd-message" (i18n/c count-libraries))
-                       (tr "modals.unpublish-shared-confirm.activated.scd-message" (i18n/c count-libraries)))
+        scd-msg      (tr "modals.delete-shared-confirm.activated.scd-message" (i18n/c count-libraries))
 
         hint         (tr "modals.delete-unpublish-shared-confirm.activated.hint" (i18n/c count-files))
 
diff --git a/frontend/src/app/main/ui/messages.cljs b/frontend/src/app/main/ui/messages.cljs
index 1d64e4225..bee7305e1 100644
--- a/frontend/src/app/main/ui/messages.cljs
+++ b/frontend/src/app/main/ui/messages.cljs
@@ -5,93 +5,43 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.messages
-  (:require-macros [app.main.style :as stl])
   (:require
-   [app.common.data :as d]
-   [app.common.data.macros :as dm]
-   [app.common.uuid :as uuid]
    [app.main.data.messages :as dmsg]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.link-button :as lb]
-   [app.main.ui.icons :as i]
+   [app.main.ui.notifications.context-notification :refer [context-notification]]
+   [app.main.ui.notifications.inline-notification :refer [inline-notification]]
+   [app.main.ui.notifications.toast-notification :refer [toast-notification]]
    [rumext.v2 :as mf]))
 
-(mf/defc banner
-  [{:keys [type position status controls content links actions on-close data-test role] :as props}]
-  [:div {:class (stl/css-case :banner true
-                              :warning  (= type :warning)
-                              :error    (= type :error)
-                              :success  (= type :success)
-                              :info     (= type :info)
-                              :fixed    (= position :fixed)
-                              :floating (= position :floating)
-                              :inline   (= position :inline)
-                              :hide     (= status :hide))}
-   [:div {:class (stl/css :wrapper)}
-    [:div {:class (stl/css :icon)}
-     (case type
-       :warning i/msg-warning-refactor
-       :error i/msg-error-refactor
-       :success i/msg-success-refactor
-       :info i/msg-neutral-refactor
-       i/msg-error-refactor)]
-
-    [:div {:class (stl/css-case :content  true
-                                :inline-actions (= controls :inline-actions)
-                                :bottom-actions (= controls :bottom-actions))
-           :data-test data-test
-           :role role}
-     [:span {:class (stl/css :text)}
-      content
-      (for [[index link] (d/enumerate links)]
-        [:* {:key (dm/str "link-" index)}
-         " " [:& lb/link-button {:class (stl/css :link)
-                                 :on-click (:callback link)
-                                 :value (:label link)}]])]
-
-     (when (or (= controls :bottom-actions) (= controls :inline-actions))
-
-       [:div  {:class (stl/css :actions)}
-        (for [action actions]
-          [:button {:key (uuid/next)
-                    :class (stl/css-case :action-btn true
-                                         :primary (= :primary (:type action))
-                                         :secondary (= :secondary (:type action))
-                                         :danger (= :danger (:type action)))
-                    :on-click (:callback action)}
-           (:label action)])])]
-
-    (when (= controls :close)
-      [:button {:class (stl/css :btn-close)
-                :on-click on-close} i/close-refactor])]])
-
-(mf/defc notifications
+(mf/defc notifications-hub
   []
   (let [message  (mf/deref refs/message)
-        on-close #(st/emit! dmsg/hide)]
+
+        on-close #(st/emit! dmsg/hide)
+
+        toast-message   {:type (or (:type message) :info)
+                         :links (:links message)
+                         :on-close on-close
+                         :content (:content message)}
+
+        inline-message  {:actions (:actions message)
+                         :links (:links message)
+                         :content (:content message)}
+
+        context-message {:actions (:actions message)
+                         :links (:links message)
+                         :content (:content message)}
+
+        ;; TODO review this options
+        is-toast-msg (or (= :toast (:notification-type message)) (some? (:timeout message)))
+        is-inline-msg      (or (= :inline (:notification-type message)) (and (some? (:position message)) (= :floating (:position message))))]
+
     (when message
-      [:& banner (assoc message
-                        :position (or (:position message) :fixed)
-                        :controls (if (some? (:controls message))
-                                    (:controls message)
-                                    :close)
-                        :on-close on-close)])))
-
-(mf/defc inline-banner
-  {::mf/wrap [mf/memo]}
-  [{:keys [type content on-close actions data-test role] :as props}]
-  [:& banner {:type type
-              :position :inline
-              :status :visible
-              :controls (if (some? on-close)
-                          :close
-                          (if (some? actions)
-                            :bottom-actions
-                            :none))
-              :content content
-              :on-close on-close
-              :actions actions
-              :data-test data-test
-              :role role}])
-
+      (cond
+        is-toast-msg
+        [:& toast-notification toast-message]
+        is-inline-msg
+        [:& inline-notification inline-message]
+        :else
+        [:& context-notification context-message]))))
diff --git a/frontend/src/app/main/ui/messages.scss b/frontend/src/app/main/ui/messages.scss
deleted file mode 100644
index da126d3c9..000000000
--- a/frontend/src/app/main/ui/messages.scss
+++ /dev/null
@@ -1,150 +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
-
-@import "refactor/common-refactor.scss";
-
-.banner {
-  --bg-color: var(--alert-background-color-error);
-  --fg-color: var(--alert-foreground-color-error);
-  position: relative;
-  display: flex;
-  align-items: center;
-  border-radius: $br-8;
-  background-color: var(--bg-color);
-  color: var(--fg-color);
-}
-
-.warning {
-  --bg-color: var(--alert-background-color-warning);
-  --fg-color: var(--alert-foreground-color-warning);
-}
-
-.success {
-  --bg-color: var(--alert-background-color-success);
-  --fg-color: var(--alert-foreground-color-success);
-}
-
-.info {
-  --bg-color: var(--alert-background-color-neutral);
-  --fg-color: var(--alert-foreground-color-neutral-active);
-}
-
-.banner.info .icon {
-  --fg-color: var(--alert-foreground-color-neutral);
-}
-
-.banner.info:hover .icon {
-  --fg-color: var(--alert-foreground-color-neutral);
-}
-
-.wrapper {
-  display: flex;
-  align-items: center;
-  padding: $s-8 $s-8 $s-8 $s-16;
-  gap: $s-8;
-  height: 100%;
-  width: 100%;
-}
-
-.icon {
-  @include flexCenter;
-  height: 100%;
-  width: $s-16;
-  svg {
-    @extend .button-icon;
-    stroke: var(--fg-color);
-  }
-}
-
-.fixed {
-  @include alertShadow;
-  position: fixed;
-  top: $s-16;
-  right: $s-16;
-  display: flex;
-  align-items: center;
-  height: $s-48;
-  min-width: $s-500;
-  max-width: calc(10 * $s-100);
-  padding-left: $s-16;
-  z-index: $z-index-alert;
-}
-
-.floating {
-  @include alertShadow;
-  position: absolute;
-  min-height: $s-32;
-  top: $s-72;
-  left: 0;
-  right: 0;
-  width: $s-640;
-  margin-left: auto;
-  margin-right: auto;
-  z-index: $z-index-modal;
-}
-
-.inline {
-  min-height: $s-40;
-  width: 100%;
-}
-
-.hide {
-  display: none;
-}
-
-.content {
-  @include flexRow;
-  gap: $s-8;
-  flex-grow: 1;
-}
-
-.text {
-  @include bodyMedTipography;
-  flex-grow: 1;
-}
-
-.link {
-  @include bodyMedTipography;
-  color: var(--modal-link-foreground-color);
-  margin: 0;
-}
-
-.actions {
-  @include flexRow;
-  gap: $s-8;
-}
-
-.action-btn {
-  @extend .button-tertiary;
-  @include uppercaseTitleTipography;
-  min-height: $s-32;
-  min-width: $s-32;
-  svg {
-    @extend .button-icon-small;
-  }
-  &.primary {
-    @extend .button-primary;
-    padding: $s-8 $s-24;
-  }
-  &.secondary {
-    @extend .button-secondary;
-    padding: $s-8 $s-24;
-  }
-  &.danger {
-    @extend .modal-danger-btn;
-    padding: $s-8 $s-24;
-  }
-}
-
-.btn-close {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-32;
-  svg {
-    @extend .button-icon-small;
-    stroke: var(--icon-foreground);
-  }
-}
diff --git a/frontend/src/app/main/ui/notifications/context_notification.cljs b/frontend/src/app/main/ui/notifications/context_notification.cljs
new file mode 100644
index 000000000..d5d96e3d5
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/context_notification.cljs
@@ -0,0 +1,69 @@
+;; 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
+
+(ns app.main.ui.notifications.context-notification
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
+   [app.main.ui.components.link-button :as lb]
+   [app.main.ui.icons :as i]
+   [rumext.v2 :as mf]))
+
+(def ^:private neutral-icon
+  (i/icon-xref :msg-neutral-refactor (stl/css :icon)))
+
+(def ^:private error-icon
+  (i/icon-xref :delete-text-refactor (stl/css :icon)))
+
+(def ^:private success-icon
+  (i/icon-xref :status-tick-refactor (stl/css :icon)))
+
+(def ^:private info-icon
+  (i/icon-xref :help-refactor (stl/css :icon)))
+
+(defn get-icon-by-type
+  [type]
+  (case type
+    :warning neutral-icon
+    :error error-icon
+    :success success-icon
+    :info info-icon
+    neutral-icon))
+
+(mf/defc context-notification
+  "They are persistent, informative and non-actionable.
+   They are contextual messages in specific areas off the app"
+
+  {::mf/props :obj}
+  [{:keys [type content links is-html] :as props}]
+
+  [:aside {:class (stl/css-case :context-notification true
+                                :contain-html is-html
+                                :warning      (= type :warning)
+                                :error        (= type :error)
+                                :success      (= type :success)
+                                :info         (= type :info))}
+
+   (get-icon-by-type type)
+
+   ;; The content can arrive in markdown format, in these cases
+   ;;  we will use the prop is-html to true to indicate it and
+   ;; that the html injection is performed and the necessary css classes are applied.
+   [:div {:class (stl/css :context-text)
+          :dangerouslySetInnerHTML (when is-html #js {:__html content})}
+    (when-not is-html
+      content)]
+
+   (when (some? links)
+     [:nav {:class (stl/css :link-nav)}
+      (for [[index link] (d/enumerate links)]
+        ;; TODO Review this component
+        [:& lb/link-button {:class (stl/css :link)
+                            :on-click (:callback link)
+                            :value (:label link)
+                            :key (dm/str "link-" index)}])])])
+
diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss
new file mode 100644
index 000000000..eb01af8a7
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/context_notification.scss
@@ -0,0 +1,90 @@
+// 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
+
+@import "refactor/common-refactor.scss";
+
+.context-notification {
+  ---context-notification-bg-color: var(--alert-background-color-default);
+  --context-notification-fg-color: var(--alert-text-foreground-color-default);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-default);
+  --context-notification-border-color: var(--alert-border-color-default);
+  display: grid;
+  grid-template-columns: $s-16 auto 1fr;
+  gap: $s-8;
+  min-height: $s-32;
+  width: 100%;
+  padding: $s-8 $s-8 $s-8 $s-16;
+  border: $s-1 solid var(--context-notification-border-color);
+  border-radius: $br-8;
+  background-color: var(--context-notification-bg-color);
+}
+
+.warning {
+  --context-notification-bg-color: var(--alert-background-color-warning);
+  --context-notification-fg-color: var(--alert-text-foreground-color-warning);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-warning);
+  --context-notification-border-color: var(--alert-border-color-warning);
+}
+
+.success {
+  --context-notification-bg-color: var(--alert-background-color-success);
+  --context-notification-fg-color: var(--alert-text-foreground-color-success);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-success);
+  --context-notification-border-color: var(--alert-border-color-success);
+}
+
+.info {
+  --context-notification-bg-color: var(--alert-background-color-info);
+  --context-notification-fg-color: var(--alert-text-foreground-color-info);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-info);
+  --context-notification-border-color: var(--alert-border-color-info);
+}
+
+.default {
+  --context-notification-bg-color: var(--alert-background-color-default);
+  --context-notification-fg-color: var(--alert-text-foreground-color-default);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-default);
+  --context-notification-border-color: var(--alert-border-color-default);
+}
+
+.error {
+  --context-notification-bg-color: var(--alert-background-color-error);
+  --context-notification-fg-color: var(--alert-text-foreground-color-error);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-error);
+  --context-notification-border-color: var(--alert-border-color-error);
+}
+
+.icon {
+  @extend .button-icon;
+  align-self: self-start;
+  stroke: var(--context-notification-icon-color);
+}
+
+.link-nav {
+  align-self: center;
+  height: $s-24;
+  margin: 0;
+}
+
+.context-text {
+  @include bodyMedTipography;
+  align-self: center;
+  color: var(--context-notification-fg-color);
+  margin: auto 0;
+}
+
+// The second rule only applies when the element receives embedded
+// links within the content by means of the dangerouslySetInnerHTML.
+// Only in this case the contain-html class will be used.
+
+.link,
+.contain-html .context-text a {
+  @include bodyMedTipography;
+  align-self: center;
+  height: $s-16;
+  margin: 0;
+  color: var(--modal-link-foreground-color);
+}
diff --git a/frontend/src/app/main/ui/notifications/inline_notification.cljs b/frontend/src/app/main/ui/notifications/inline_notification.cljs
new file mode 100644
index 000000000..eb42ae22c
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/inline_notification.cljs
@@ -0,0 +1,49 @@
+;; 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
+
+(ns app.main.ui.notifications.inline-notification
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
+   [app.common.uuid :as uuid]
+   [app.main.ui.components.link-button :as lb]
+   [app.main.ui.icons :as i]
+   [rumext.v2 :as mf]))
+
+(def ^:private neutral-icon
+  (i/icon-xref :msg-neutral-refactor (stl/css :icon)))
+
+
+(mf/defc inline-notification
+  "They are persistent messages and report a special situation
+   of the application and require user interaction to disappear."
+
+  {::mf/props :obj}
+  [{:keys [content actions links] :as props}]
+  [:aside {:class (stl/css :inline-notification)}
+   neutral-icon
+
+   [:div {:class (stl/css :inline-text)}
+    content]
+
+   (when (some? links)
+     [:nav {:class (stl/css :link-nav)}
+      (for [[index link] (d/enumerate links)]
+        [:& lb/link-button {:key (dm/str "link-" index)
+                            :class (stl/css :link)
+                            :on-click (:callback link)
+                            :value (:label link)}])])
+
+   [:div  {:class (stl/css :actions)}
+    (for [action actions]
+      [:button {:key (uuid/next)
+                :class (stl/css-case :action-btn true
+                                     :primary (= :primary (:type action))
+                                     :secondary (= :secondary (:type action))
+                                     :danger (= :danger (:type action)))
+                :on-click (:callback action)}
+       (:label action)])]])
diff --git a/frontend/src/app/main/ui/notifications/inline_notification.scss b/frontend/src/app/main/ui/notifications/inline_notification.scss
new file mode 100644
index 000000000..f70b77c6d
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/inline_notification.scss
@@ -0,0 +1,79 @@
+// 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
+
+@import "refactor/common-refactor.scss";
+
+.inline-notification {
+  --inline-notification-bg-color: var(--alert-background-color-default);
+  --inline-notification-fg-color: var(--alert-text-foreground-color-default);
+  --inline-notification-icon-color: var(--alert-icon-foreground-color-default);
+  --inline-notification-border-color: var(--alert-border-color-default);
+  @include alertShadow;
+  position: absolute;
+  top: $s-72;
+  left: 0;
+  right: 0;
+  display: grid;
+  grid-template-columns: $s-16 auto 1fr auto;
+  gap: $s-8;
+  min-height: $s-48;
+  min-width: $s-640;
+  max-width: $s-712;
+  padding: $s-8 $s-8 $s-8 $s-16;
+  margin-inline: auto;
+  border: $s-1 solid var(--inline-notification-border-color);
+  border-radius: $br-8;
+  z-index: $z-index-modal;
+  background-color: var(--inline-notification-bg-color);
+  color: var(--inline-notification-fg-color);
+}
+
+.icon {
+  @extend .button-icon;
+  height: 100%;
+  stroke: var(--inline-notification-icon-color);
+}
+
+.inline-text {
+  @include bodyMedTipography;
+  align-self: center;
+}
+
+.link {
+  @include bodyMedTipography;
+  margin: 0;
+  height: 100%;
+  color: var(--modal-link-foreground-color);
+}
+
+.actions {
+  display: grid;
+  grid-template-columns: none;
+  grid-auto-flow: column;
+  gap: $s-8;
+  align-self: center;
+}
+
+.action-btn {
+  @extend .button-tertiary;
+  @include uppercaseTitleTipography;
+  min-height: $s-32;
+  min-width: $s-32;
+  padding: $s-8 $s-24;
+  border: $s-1 solid transparent;
+}
+
+.action-btn.primary {
+  @extend .button-primary;
+}
+
+.action-btn.secondary {
+  @extend .button-secondary;
+}
+
+.action-btn.danger {
+  @extend .modal-danger-btn;
+}
diff --git a/frontend/src/app/main/ui/notifications/toast_notification.cljs b/frontend/src/app/main/ui/notifications/toast_notification.cljs
new file mode 100644
index 000000000..2d26c956e
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/toast_notification.cljs
@@ -0,0 +1,73 @@
+;; 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
+
+(ns app.main.ui.notifications.toast-notification
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data :as d]
+   [app.common.data.macros :as dm]
+   [app.main.ui.components.link-button :as lb]
+   [app.main.ui.icons :as i]
+   [rumext.v2 :as mf]))
+
+(def ^:private neutral-icon
+  (i/icon-xref :msg-neutral-refactor (stl/css :icon)))
+
+(def ^:private error-icon
+  (i/icon-xref :delete-text-refactor (stl/css :icon)))
+
+(def ^:private success-icon
+  (i/icon-xref :status-tick-refactor (stl/css :icon)))
+
+(def ^:private info-icon
+  (i/icon-xref :help-refactor (stl/css :icon)))
+
+(def ^:private close-icon
+  (i/icon-xref :close-refactor (stl/css :close-icon)))
+
+(defn get-icon-by-type
+  [type]
+  (case type
+    :warning neutral-icon
+    :error error-icon
+    :success success-icon
+    :info info-icon
+    neutral-icon))
+
+(mf/defc toast-notification
+  "These are ephemeral elements that disappear when
+   the close button is pressed,
+   the page is refreshed,
+   the page is navigated to another page or
+   after 7 seconds, which is enough time to be read,
+   except for error messages that require user interaction."
+
+  {::mf/props :obj}
+  [{:keys [type content on-close links] :as props}]
+
+  [:aside {:class (stl/css-case :toast-notification true
+                                :with-links (some? links)
+                                :warning  (= type :warning)
+                                :error    (= type :error)
+                                :success  (= type :success)
+                                :info     (= type :info))}
+
+   (get-icon-by-type type)
+
+   [:div {:class (stl/css :text)}
+    content]
+
+   (when (some? links)
+     [:nav {:class (stl/css :link-nav)}
+      (for [[index link] (d/enumerate links)]
+        [:& lb/link-button {:key (dm/str "link-" index)
+                            :class (stl/css :link)
+                            :on-click (:callback link)
+                            :value (:label link)}])])
+
+   [:button {:class (stl/css :btn-close)
+             :on-click on-close}
+    close-icon]])
diff --git a/frontend/src/app/main/ui/notifications/toast_notification.scss b/frontend/src/app/main/ui/notifications/toast_notification.scss
new file mode 100644
index 000000000..61e72b929
--- /dev/null
+++ b/frontend/src/app/main/ui/notifications/toast_notification.scss
@@ -0,0 +1,103 @@
+// 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
+
+@import "refactor/common-refactor.scss";
+
+.toast-notification {
+  --toast-notification-bg-color: var(--alert-background-color-default);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-default);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-default);
+  --toast-notification-border-color: var(--alert-border-color-default);
+  @include alertShadow;
+  position: fixed;
+  top: $s-16;
+  right: $s-16;
+  display: grid;
+  grid-template-columns: $s-16 1fr auto;
+  gap: $s-8;
+  min-height: $s-32;
+  min-width: $s-500;
+  max-width: calc(10 * $s-100);
+  padding: $s-8 $s-8 $s-8 $s-16;
+  border: $s-1 solid var(--toast-notification-border-color);
+  background-color: var(--toast-notification-bg-color);
+  border-radius: $br-8;
+  color: var(--toast-notification-fg-color);
+  z-index: $z-index-alert;
+}
+
+.with-links {
+  grid-template-columns: $s-16 auto 1fr auto;
+}
+
+.warning {
+  --toast-notification-bg-color: var(--alert-background-color-warning);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-warning);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-warning);
+  --toast-notification-border-color: var(--alert-border-color-warning);
+}
+
+.success {
+  --toast-notification-bg-color: var(--alert-background-color-success);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-success);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-success);
+  --toast-notification-border-color: var(--alert-border-color-success);
+}
+
+.info {
+  --bg-color: var(--alert-background-color-info);
+  --fg-color: var(--alert-text-foreground-color-info);
+  --icon-color: var(--alert-icon-foreground-color-info);
+  --border-color: var(--alert-border-color-info);
+}
+
+.default {
+  --toast-notification-bg-color: var(--alert-background-color-default);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-default);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-default);
+  --toast-notification-border-color: var(--alert-border-color-default);
+}
+
+.error {
+  --toast-notification-bg-color: var(--alert-background-color-error);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-error);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-error);
+  --toast-notification-border-color: var(--alert-border-color-error);
+}
+
+.link-nav {
+  height: $s-24;
+}
+
+.link {
+  @include bodyMedTipography;
+  color: var(--modal-link-foreground-color);
+  margin: 0;
+}
+
+.icon {
+  @extend .button-icon;
+  height: 100%;
+  stroke: var(--toast-notification-icon-color);
+}
+
+.text {
+  @include bodyMedTipography;
+  align-self: center;
+}
+
+.btn-close {
+  @include buttonStyle;
+  @include flexCenter;
+  height: 100%;
+  min-width: $s-32;
+  background-color: transparent;
+}
+
+.close-icon {
+  @extend .button-icon;
+  stroke: var(--toast-notification-icon-color);
+}
diff --git a/frontend/src/app/main/ui/onboarding/newsletter.cljs b/frontend/src/app/main/ui/onboarding/newsletter.cljs
index 00cbef5e8..0d027d607 100644
--- a/frontend/src/app/main/ui/onboarding/newsletter.cljs
+++ b/frontend/src/app/main/ui/onboarding/newsletter.cljs
@@ -7,7 +7,7 @@
 (ns app.main.ui.onboarding.newsletter
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
    [app.main.data.users :as du]
    [app.main.store :as st]
@@ -33,7 +33,7 @@
          (mf/deps @newsletter-updates @newsletter-news)
          (fn []
            (st/emit! (when (or @newsletter-updates @newsletter-news)
-                       (dm/success message))
+                       (msg/success message))
                      (modal/show {:type :onboarding-team})
                      (du/update-profile-props {:newsletter-updates @newsletter-updates :newsletter-news @newsletter-news}))))]
 
diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs
index 4d30aaadb..646184e6f 100644
--- a/frontend/src/app/main/ui/onboarding/team_choice.cljs
+++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs
@@ -11,7 +11,7 @@
    [app.common.spec :as us]
    [app.main.data.dashboard :as dd]
    [app.main.data.events :as ev]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -169,7 +169,7 @@
         on-error
         (mf/use-fn
          (fn [_form _response]
-           (st/emit! (dm/error "Error on creating team."))))
+           (st/emit! (msg/error "Error on creating team."))))
 
         ;; The SKIP branch only creates the team, without invitations
         on-invite-later
diff --git a/frontend/src/app/main/ui/settings/access_tokens.cljs b/frontend/src/app/main/ui/settings/access_tokens.cljs
index d536a7da0..8f8f4e6f4 100644
--- a/frontend/src/app/main/ui/settings/access_tokens.cljs
+++ b/frontend/src/app/main/ui/settings/access_tokens.cljs
@@ -8,7 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.spec :as us]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
    [app.main.data.users :as du]
    [app.main.store :as st]
@@ -66,7 +66,7 @@
          (fn [_]
            (let [message (tr "dashboard.access-tokens.create.success")]
              (st/emit! (du/fetch-access-tokens)
-                       (dm/success message)
+                       (msg/success message)
                        (reset! created? true)))))
 
         on-close
@@ -79,7 +79,7 @@
         on-error
         (mf/use-fn
          (fn [_]
-           (st/emit! (dm/error (tr "errors.generic"))
+           (st/emit! (msg/error (tr "errors.generic"))
                      (modal/hide))))
 
         on-submit
@@ -101,9 +101,10 @@
          (fn [event]
            (dom/prevent-default event)
            (wapi/write-to-clipboard (:token created))
-           (st/emit! (dm/show {:type :info
-                               :content (tr "dashboard.access-tokens.copied-success")
-                               :timeout 1000}))))]
+           (st/emit! (msg/show {:type :info
+                                :notification-type :toast
+                                :content (tr "dashboard.access-tokens.copied-success")
+                                :timeout 7000}))))]
 
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-container)}
diff --git a/frontend/src/app/main/ui/settings/change_email.cljs b/frontend/src/app/main/ui/settings/change_email.cljs
index f50a7bf6d..64805a1b7 100644
--- a/frontend/src/app/main/ui/settings/change_email.cljs
+++ b/frontend/src/app/main/ui/settings/change_email.cljs
@@ -10,14 +10,14 @@
    [app.common.data :as d]
    [app.common.data.macros :as dma]
    [app.common.spec :as us]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
    [app.main.data.users :as du]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.forms :as fm]
    [app.main.ui.icons :as i]
-   [app.main.ui.messages :as msgs]
+   [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.util.i18n :as i18n :refer [tr]]
    [beicon.v2.core :as rx]
    [cljs.spec.alpha :as s]
@@ -47,11 +47,11 @@
                     (assoc-in data [:errors :email-1] error))))
 
     :profile-is-muted
-    (rx/of (dm/error (tr "errors.profile-is-muted")))
+    (rx/of (msg/error (tr "errors.profile-is-muted")))
 
     :email-has-permanent-bounces
     (let [email (get @form [:data :email-1])]
-      (rx/of (dm/error (tr "errors.email-has-permanent-bounces" email))))
+      (rx/of (msg/error (tr "errors.email-has-permanent-bounces" email))))
 
     (rx/throw error)))
 
@@ -61,7 +61,7 @@
     (st/emit! (du/fetch-profile)
               (modal/hide))
     (let [message (tr "notifications.validation-email-sent" (:email profile))]
-      (st/emit! (dm/info message)
+      (st/emit! (msg/info message)
                 (modal/hide)))))
 
 (defn- on-submit
@@ -110,7 +110,7 @@
                   :on-click on-close} i/close-refactor]]
 
        [:div {:class (stl/css :modal-content)}
-        [:& msgs/inline-banner
+        [:& context-notification
          {:type :info
           :content (tr "modals.change-email.info" (:email profile))}]
 
diff --git a/frontend/src/app/main/ui/settings/delete_account.cljs b/frontend/src/app/main/ui/settings/delete_account.cljs
index 2eddcca23..d6803b215 100644
--- a/frontend/src/app/main/ui/settings/delete_account.cljs
+++ b/frontend/src/app/main/ui/settings/delete_account.cljs
@@ -7,12 +7,12 @@
 (ns app.main.ui.settings.delete-account
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
    [app.main.data.users :as du]
    [app.main.store :as st]
    [app.main.ui.icons :as i]
-   [app.main.ui.messages :as msgs]
+   [app.main.ui.notifications.context-notification :refer [context-notification]]
    [app.util.i18n :as i18n :refer [tr]]
    [beicon.v2.core :as rx]
    [rumext.v2 :as mf]))
@@ -21,7 +21,7 @@
   [{:keys [code] :as error}]
   (if (= :owner-teams-with-people code)
     (let [msg (tr "notifications.profile-deletion-not-allowed")]
-      (rx/of (dm/error msg)))
+      (rx/of (msg/error msg)))
     (rx/throw error)))
 
 (mf/defc delete-account-modal
@@ -47,7 +47,7 @@
                  :on-click on-close} i/close-refactor]]
 
       [:div {:class (stl/css :modal-content)}
-       [:& msgs/inline-banner
+       [:& context-notification
         {:type :warning
          :content (tr "modals.delete-account.info")}]]
 
diff --git a/frontend/src/app/main/ui/settings/feedback.cljs b/frontend/src/app/main/ui/settings/feedback.cljs
index 31d9d374c..4fcc7f790 100644
--- a/frontend/src/app/main/ui/settings/feedback.cljs
+++ b/frontend/src/app/main/ui/settings/feedback.cljs
@@ -9,7 +9,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.spec :as us]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.refs :as refs]
    [app.main.repo :as rp]
    [app.main.store :as st]
@@ -39,7 +39,7 @@
          (mf/deps profile)
          (fn [_]
            (reset! loading false)
-           (st/emit! (dm/success (tr "labels.feedback-sent")))
+           (st/emit! (msg/success (tr "labels.feedback-sent")))
            (swap! form assoc :data {} :touched {} :errors {})))
 
         on-error
@@ -48,8 +48,8 @@
          (fn [{:keys [code] :as error}]
            (reset! loading false)
            (if (= code :feedback-disabled)
-             (st/emit! (dm/error (tr "labels.feedback-disabled")))
-             (st/emit! (dm/error (tr "errors.generic"))))))
+             (st/emit! (msg/error (tr "labels.feedback-disabled")))
+             (st/emit! (msg/error (tr "errors.generic"))))))
 
         on-submit
         (mf/use-callback
diff --git a/frontend/src/app/main/ui/settings/options.cljs b/frontend/src/app/main/ui/settings/options.cljs
index 075bb2bfa..ce65ae4e8 100644
--- a/frontend/src/app/main/ui/settings/options.cljs
+++ b/frontend/src/app/main/ui/settings/options.cljs
@@ -8,7 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.spec :as us]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.users :as du]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -26,7 +26,7 @@
 
 (defn- on-success
   [_]
-  (st/emit! (dm/success (tr "notifications.profile-saved"))))
+  (st/emit! (msg/success (tr "notifications.profile-saved"))))
 
 (defn- on-submit
   [form _event]
diff --git a/frontend/src/app/main/ui/settings/password.cljs b/frontend/src/app/main/ui/settings/password.cljs
index f96edbc30..9039dfa76 100644
--- a/frontend/src/app/main/ui/settings/password.cljs
+++ b/frontend/src/app/main/ui/settings/password.cljs
@@ -8,7 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.spec :as us]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.users :as udu]
    [app.main.store :as st]
    [app.main.ui.components.forms :as fm]
@@ -28,7 +28,7 @@
            {:message (tr "errors.email-as-password")})
 
     (let [msg (tr "generic.error")]
-      (st/emit! (dm/error msg)))))
+      (st/emit! (msg/error msg)))))
 
 (defn- on-success
   [form]
@@ -37,7 +37,7 @@
         msg (tr "dashboard.notifications.password-saved")]
     (dom/clean-value! password-old-node)
     (dom/focus! password-old-node)
-    (st/emit! (dm/success msg))))
+    (st/emit! (msg/success msg))))
 
 (defn- on-submit
   [form event]
diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs
index c3bd7fe5b..52593e029 100644
--- a/frontend/src/app/main/ui/settings/profile.cljs
+++ b/frontend/src/app/main/ui/settings/profile.cljs
@@ -9,7 +9,7 @@
   (:require
    [app.common.spec :as us]
    [app.config :as cf]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
    [app.main.data.users :as du]
    [app.main.refs :as refs]
@@ -29,7 +29,7 @@
 
 (defn- on-success
   [_]
-  (st/emit! (dm/success (tr "notifications.profile-saved"))))
+  (st/emit! (msg/success (tr "notifications.profile-saved"))))
 
 (defn- on-submit
   [form _event]
@@ -80,7 +80,7 @@
      [:> fm/submit-button*
       {:label (tr "dashboard.save-settings")
        :disabled (empty? (:touched @form))
-       :className (stl/css :btn-primary)}]
+       :class (stl/css :btn-primary)}]
 
      [:div {:class (stl/css :links)}
       [:div {:class (stl/css :link-item)}
diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss
index 8bdd338af..c884e0c71 100644
--- a/frontend/src/app/main/ui/viewer.scss
+++ b/frontend/src/app/main/ui/viewer.scss
@@ -58,6 +58,7 @@
 }
 
 .viewer-section {
+  @extend .new-scrollbar;
   grid-row: 1 / span 2;
   grid-column: 1 / span 1;
   display: flex;
@@ -94,7 +95,7 @@
 }
 
 .viewer-go-next.comment-sidebar {
-  right: $s-264;
+  right: $s-280;
 }
 
 .viewer-go-prev {
diff --git a/frontend/src/app/main/ui/viewer/comments.cljs b/frontend/src/app/main/ui/viewer/comments.cljs
index 265cf6c26..55b59e40d 100644
--- a/frontend/src/app/main/ui/viewer/comments.cljs
+++ b/frontend/src/app/main/ui/viewer/comments.cljs
@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.rect :as grc]
@@ -26,16 +27,20 @@
    [rumext.v2 :as mf]))
 
 (mf/defc comments-menu
-  {::mf/wrap [mf/memo]
-   ::mf/wrap-props false}
+  {::mf/props :obj
+   ::mf/memo true}
   []
-  (let [{cmode :mode cshow :show show-sidebar? :show-sidebar?} (mf/deref refs/comments-local)
+  (let [state           (mf/deref refs/comments-local)
+        cmode           (:mode state)
+        cshow           (:show state)
+        show-sidebar?   (:show-sidebar? state false)
+
         show-dropdown?  (mf/use-state false)
         toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
         hide-dropdown   (mf/use-fn #(reset! show-dropdown? false))
 
         update-mode
-        (mf/use-callback
+        (mf/use-fn
          (fn [event]
            (let [mode (-> (dom/get-current-target event)
                           (dom/get-data "value")
@@ -43,78 +48,76 @@
              (st/emit! (dcm/update-filters {:mode mode})))))
 
         update-show
-        (mf/use-callback
+        (mf/use-fn
          (fn [event]
            (let [mode (-> (dom/get-current-target event)
                           (dom/get-data "value")
-                          (d/read-string))]
+                          (keyword))
+                 mode (if (= :pending mode) :all :pending)]
              (st/emit! (dcm/update-filters {:show mode})))))
 
         update-options
-        (mf/use-callback
-         (mf/deps show-sidebar?)
+        (mf/use-fn
          (fn [event]
-           (let [mode (-> (dom/get-target event)
+           (let [mode (-> (dom/get-current-target event)
                           (dom/get-data "value")
-                          (boolean))]
+                          (parse-boolean))]
              (st/emit! (dcm/update-options {:show-sidebar? (not mode)})))))]
 
     [:div {:class (stl/css :view-options)
            :on-click toggle-dropdown}
-     [:span {:class (stl/css :dropdown-title)}
-      (tr "labels.comments")]
-     [:span {:class (stl/css :icon-dropdown)}
-      i/arrow-refactor]
+     [:span {:class (stl/css :dropdown-title)} (tr "labels.comments")]
+     [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
+
      [:& dropdown {:show @show-dropdown?
                    :on-close hide-dropdown}
       [:ul {:class (stl/css :dropdown)}
-       [:li {:class (stl/css-case :dropdown-element true
-                                  :selected (or (= :all cmode) (nil? cmode)))
+
+       [:li {:class (stl/css-case
+                     :dropdown-element true
+                     :selected (or (= :all cmode) (nil? cmode)))
              :data-value "all"
              :on-click update-mode}
-
         [:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
         (when (or (= :all cmode) (nil? cmode))
           [:span {:class (stl/css :icon)} i/tick-refactor])]
 
-       [:li {:class (stl/css-case :dropdown-element true
-                                  :selected (= :yours cmode))
+       [:li {:class (stl/css-case
+                     :dropdown-element true
+                     :selected (= :yours cmode))
              :data-value "yours"
              :on-click update-mode}
-
-        [:span {:class (stl/css :label)}
-         (tr "labels.show-your-comments")]
-
+        [:span {:class (stl/css :label)} (tr "labels.show-your-comments")]
         (when (= :yours cmode)
           [:span {:class (stl/css :icon)}
            i/tick-refactor])]
 
        [:li {:class (stl/css :separator)}]
 
-       [:li {:class (stl/css-case :dropdown-element true
-                                  :selected (= :pending cshow))
-             :data-value (if (= :pending cshow) "all" "pending")
+       [:li {:class (stl/css-case
+                     :dropdown-element true
+                     :selected (= :pending cshow))
+             :data-value (d/name cshow)
              :on-click update-show}
-
-        [:span {:class (stl/css :label)}
-         (tr "labels.hide-resolved-comments")]
+        [:span {:class (stl/css :label)} (tr "labels.hide-resolved-comments")]
         (when  (= :pending cshow)
           [:span {:class (stl/css :icon)}
            i/tick-refactor])]
 
        [:li {:class (stl/css :separator)}]
 
-       [:li {:class (stl/css-case :dropdown-element true
-                                  :selected show-sidebar?)
-             :data-value (str show-sidebar?)
+       [:li {:class (stl/css-case
+                     :dropdown-element true
+                     :selected show-sidebar?)
+             :data-value (dm/str show-sidebar?)
              :on-click update-options}
-
         [:span {:class (stl/css :label)} (tr "labels.show-comments-list")]
         (when show-sidebar?
           [:span {:class (stl/css :icon)} i/tick-refactor])]]]]))
 
 
-(defn- update-thread-position [positions {:keys [id] :as thread}]
+(defn- update-thread-position
+  [positions {:keys [id] :as thread}]
   (if-let [data (get positions id)]
     (-> thread
         (assoc :position (:position data))
@@ -122,7 +125,8 @@
     thread))
 
 (mf/defc comments-layer
-  [{:keys [zoom file users frame page] :as props}]
+  {::mf/props :obj}
+  [{:keys [zoom file users frame page]}]
   (let [profile        (mf/deref refs/profile)
         local          (mf/deref refs/comments-local)
 
diff --git a/frontend/src/app/main/ui/viewer/comments.scss b/frontend/src/app/main/ui/viewer/comments.scss
index c7f5f95db..46a19e702 100644
--- a/frontend/src/app/main/ui/viewer/comments.scss
+++ b/frontend/src/app/main/ui/viewer/comments.scss
@@ -104,7 +104,7 @@
   position: absolute;
   right: 0;
   top: $s-44;
-  width: $s-256;
+  width: $s-276;
   height: calc(100vh - $s-48);
   z-index: $z-index-10;
   background-color: var(--panel-background-color);
diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs
index 0ee3f575e..1a6b19a22 100644
--- a/frontend/src/app/main/ui/viewer/header.cljs
+++ b/frontend/src/app/main/ui/viewer/header.cljs
@@ -34,7 +34,8 @@
   (modal/show! :login-register {}))
 
 (mf/defc zoom-widget
-  {::mf/wrap [mf/memo]}
+  {::mf/memo true
+   ::mf/props :obj}
   [{:keys [zoom
            on-increase
            on-decrease
@@ -102,38 +103,38 @@
         [:span  {:class (stl/css :shortcuts)}
          (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
            [:span {:class (stl/css :shortcut-key)
-                   :key (str "zoom-fit-" sc)} sc])]]
+                   :key (dm/str "zoom-fit-" sc)} sc])]]
        [:li {:class (stl/css :zoom-option)
              :on-click on-zoom-fill}
         (tr "workspace.header.zoom-fill")
         [:span  {:class (stl/css :shortcuts)}
          (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
            [:span {:class (stl/css :shortcut-key)
-                   :key (str "zoom-fill-" sc)} sc])]]
+                   :key (dm/str "zoom-fill-" sc)} sc])]]
        [:li {:class (stl/css :zoom-option)
              :on-click on-fullscreen}
         (tr "workspace.header.zoom-full-screen")
         [:span  {:class (stl/css :shortcuts)}
          (for [sc (scd/split-sc (sc/get-tooltip :toggle-fullscreen))]
            [:span {:class (stl/css :shortcut-key)
-                   :key (str "zoom-fullscreen-" sc)} sc])]]]]]))
+                   :key (dm/str "zoom-fullscreen-" sc)} sc])]]]]]))
 
 (mf/defc header-options
   [{:keys [section zoom page file index permissions interactions-mode]}]
   (let [fullscreen?    (mf/deref fullscreen-ref)
 
         toggle-fullscreen
-        (mf/use-callback
+        (mf/use-fn
          (fn [] (st/emit! dv/toggle-fullscreen)))
 
         go-to-workspace
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps page)
          (fn []
            (st/emit! (dv/go-to-workspace (:id page)))))
 
         open-share-dialog
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps page)
          (fn []
            (modal/show! :share-link {:page page :file file})
@@ -209,22 +210,22 @@
         show-dropdown? (mf/use-state false)
 
         toggle-thumbnails
-        (mf/use-callback
+        (mf/use-fn
          (fn []
            (st/emit! dv/toggle-thumbnails-panel)))
 
         open-dropdown
-        (mf/use-callback
+        (mf/use-fn
          (fn []
            (reset! show-dropdown? true)))
 
         close-dropdown
-        (mf/use-callback
+        (mf/use-fn
          (fn []
            (reset! show-dropdown? false)))
 
         navigate-to
-        (mf/use-callback
+        (mf/use-fn
          (fn [page-id]
            (st/emit! (dv/go-to-page page-id))
            (reset! show-dropdown? false)))]
@@ -245,8 +246,8 @@
          (for [id (get-in file [:data :pages])]
            [:li {:class (stl/css-case :dropdown-element true
                                       :selected (= page-id id))
-                 :id (str id)
-                 :key (str id)
+                 :id (dm/str id)
+                 :key (dm/str id)
                  :on-click (partial navigate-to id)}
             [:span {:class (stl/css :label)}
              (get-in file [:data :pages-index id :name])]
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
index ecfb19e3b..a5a7df866 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
@@ -26,6 +26,8 @@
    :align-content
    :justify-items
    :justify-content
+   :row-gap
+   :column-gap
    :gap
    :padding])
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs
index 6baa45ef9..a4e44ca43 100644
--- a/frontend/src/app/main/ui/viewer/inspect/code.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/code.cljs
@@ -184,6 +184,7 @@
 
         set-markup
         (mf/use-callback
+         (mf/deps markup-type*)
          (fn [value]
            (reset! markup-type* value)))
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
index 00ea349ec..1c58444d3 100644
--- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
@@ -20,6 +20,10 @@
   }
 }
 
+.viewer-code {
+  padding: 0 $s-8;
+}
+
 .tool-windows {
   height: 100%;
   display: flex;
diff --git a/frontend/src/app/main/ui/workspace/comments.cljs b/frontend/src/app/main/ui/workspace/comments.cljs
index 35df73bdd..d74fa287b 100644
--- a/frontend/src/app/main/ui/workspace/comments.cljs
+++ b/frontend/src/app/main/ui/workspace/comments.cljs
@@ -27,7 +27,7 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (mf/defc sidebar-options
-  []
+  [{:keys [from-viewer]}]
   (let [{cmode :mode cshow :show} (mf/deref refs/comments-local)
         update-mode
         (mf/use-fn
@@ -44,7 +44,8 @@
            (let [mode (if (= :pending cshow) :all :pending)]
              (st/emit! (dcm/update-filters {:show mode})))))]
 
-    [:ul {:class (stl/css :comment-mode-dropdown)}
+    [:ul {:class (stl/css-case :comment-mode-dropdown true
+                               :viewer-dropdown from-viewer)}
      [:li {:class (stl/css-case :dropdown-item true
                                 :selected (or (= :all cmode) (nil? cmode)))
            :data-value "all"
@@ -115,8 +116,10 @@
                         (dwcm/center-to-comment-thread thread)
                         (-> (dcm/open-thread thread)
                             (with-meta {::ev/origin "workspace"})))))))]
-    [:div  {:class (stl/css :comments-section)}
-     [:div {:class (stl/css :comments-section-title)}
+    [:div  {:class (stl/css-case :comments-section true
+                                 :from-viewer  from-viewer)}
+     [:div {:class (stl/css-case :comments-section-title true
+                                 :viewer-title from-viewer)}
       [:span (tr "labels.comments")]
       [:button {:class (stl/css :close-button)
                 :on-click close-section}
@@ -128,11 +131,11 @@
       [:span {:class (stl/css :mode-label)} (case (:mode local)
                                               (nil :all) (tr "labels.show-all-comments")
                                               :yours     (tr "labels.show-your-comments"))]
-      [:div {:class (stl/css :icon)} i/arrow-refactor]]
+      [:div {:class (stl/css :arrow-icon)} i/arrow-refactor]]
 
      [:& dropdown {:show options?
                    :on-close #(reset! state* false)}
-      [:& sidebar-options {:local local}]]
+      [:& sidebar-options {:local local :from-viewer from-viewer}]]
 
      [:div {:class (stl/css :comments-section-content)}
 
diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss
index 7e64da75d..fdfb52292 100644
--- a/frontend/src/app/main/ui/workspace/comments.scss
+++ b/frontend/src/app/main/ui/workspace/comments.scss
@@ -13,6 +13,10 @@
   grid-template-rows: $s-40 $s-48 1fr;
 }
 
+.from-viewer {
+  padding: 0 $s-8;
+}
+
 .comments-section-title {
   @include flexCenter;
   @include uppercaseTitleTipography;
@@ -29,6 +33,11 @@
   }
 }
 
+.viewer-title {
+  margin: 0;
+  margin-block-start: $s-8;
+}
+
 .close-button {
   @extend .button-tertiary;
   position: absolute;
@@ -48,7 +57,8 @@
   @extend .asset-element;
   background-color: var(--color-background-tertiary);
   display: flex;
-  width: $s-256;
+  width: 100%;
+  max-width: $s-256;
   height: $s-32;
   padding: $s-8;
   border-radius: $br-8;
@@ -64,9 +74,8 @@
   justify-content: flex-start;
 }
 
-.icon {
+.arrow-icon {
   @include flexCenter;
-  padding-right: 8px;
   height: $s-24;
   width: $s-24;
   svg {
@@ -78,9 +87,14 @@
 
 .comment-mode-dropdown {
   @extend .dropdown-wrapper;
-  top: $s-80;
+  top: $s-92;
   left: $s-12;
-  width: $s-256;
+  max-width: $s-256;
+  width: 100%;
+}
+
+.viewer-dropdown {
+  left: $s-8;
 }
 
 .dropdown-item {
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 3ef6fb6ad..f8f7bb6c5 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
@@ -355,6 +355,9 @@
                                           (not (ctn/has-any-copy-parent? objects shape))
                                           (cfh/component-touched? objects (:id shape)))))
 
+        can-detach? (and (seq copies)
+                         (every? #(not (ctn/has-any-copy-parent? objects %)) copies))
+
 
         do-detach-component
         #(st/emit! (dwl/detach-components (map :id copies)))
@@ -420,7 +423,7 @@
                       (when (and (not multi) main-instance? local-component? lacks-annotation? components-v2)
                         {:msg "workspace.shape.menu.create-annotation"
                          :action do-create-annotation})
-                      (when (seq copies)
+                      (when can-detach?
                         {:msg (if (> (count copies) 1)
                                 "workspace.shape.menu.detach-instances-in-bulk"
                                 "workspace.shape.menu.detach-instance")
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
index fe1db4200..12b64b3b3 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
@@ -155,7 +155,8 @@
      children]))
 
 (mf/defc layer-item
-  {::mf/wrap-props false}
+  {::mf/wrap-props false
+   ::mf/wrap [mf/memo]}
   [{:keys [index item selected objects sortable? filtered? depth parent-size component-child? highlighted]}]
   (let [id                (:id item)
         blocked?          (:blocked item)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
index 101ec3e93..eb628fb89 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
@@ -21,19 +21,51 @@
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.layer-item :refer [layer-item]]
    [app.util.dom :as dom]
+   [app.util.globals :as globals]
    [app.util.i18n :as i18n :refer [tr]]
+   [app.util.keyboard :as kbd]
+   [app.util.object :as obj]
    [app.util.timers :as ts]
+   [beicon.v2.core :as rx]
    [cuerdas.core :as str]
-   [rumext.v2 :as mf]))
+   [goog.events :as events]
+   [rumext.v2 :as mf])
+  (:import goog.events.EventType))
 
 ;; This components is a piece for sharding equality check between top
 ;; level frames and try to avoid rerender frames that are does not
 ;; affected by the selected set.
 (mf/defc frame-wrapper
-  {::mf/wrap-props false
-   ::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]}
+  {::mf/wrap-props false}
   [props]
-  [:> layer-item props])
+  (let [selected (obj/get props "selected")
+        callback (mf/use-var false)
+        pending-selected (mf/use-var selected)
+        current-selected (mf/use-state selected)
+
+        props
+        (-> props
+            (obj/clone)
+            (obj/set! "selected" @current-selected))]
+
+    (mf/use-effect
+     (mf/deps selected)
+     (fn []
+       ;; Change in selected we schedule a idle-then-raf
+       ;; following changes will update the pending but not create
+       ;; a new callbacks
+       (reset! pending-selected selected)
+       (when (not @callback)
+         (reset!
+          callback
+          (ts/idle-then-raf
+           (fn []
+             (reset! current-selected @pending-selected)
+             (reset! callback nil)))))
+       (fn []
+         (when @callback
+           (rx/dispose! @callback)))))
+    [:> layer-item props]))
 
 (mf/defc layers-tree
   {::mf/wrap [mf/memo #(mf/throttle % 200)]
@@ -158,6 +190,21 @@
         (mf/use-fn
          #(swap! state* update :show-menu not))
 
+        on-toggle-filters-click
+        (mf/use-fn
+         (fn [event]
+           (dom/stop-propagation event)
+           (toggle-filters)))
+
+        hide-menu
+        (mf/use-fn
+         #(swap! state* assoc :show-menu false))
+
+        on-key-down
+        (mf/use-fn
+         (fn [event]
+           (when (kbd/esc? event) (hide-menu))))
+
         update-search-text
         (mf/use-fn
          (fn [value _event]
@@ -190,6 +237,7 @@
         add-filter
         (mf/use-fn
          (fn [event]
+           (dom/stop-propagation event)
            (let [key (-> (dom/get-current-target event)
                          (dom/get-data "filter")
                          (keyword))]
@@ -226,6 +274,11 @@
            (when (<= current-items filtered-objects-total)
              (swap! state* update :num-items + 100))))]
 
+    (mf/with-effect []
+      (let [keys [(events/listen globals/document EventType.KEYDOWN on-key-down)
+                  (events/listen globals/document EventType.CLICK hide-menu)]]
+        (fn [] (doseq [key keys] (events/unlistenByKey key)))))
+
     [filtered-objects
      handle-show-more
      #(mf/html
@@ -236,7 +289,7 @@
                            :value current-search
                            :on-clear clear-search-text
                            :placeholder (tr "workspace.sidebar.layers.search")}
-            [:button {:on-click toggle-filters
+            [:button {:on-click on-toggle-filters-click
                       :class (stl/css-case
                               :filter-button true
                               :opened show-menu?
@@ -459,7 +512,7 @@
         (mf/use-fn
          #(st/emit! (dw/toggle-focus-mode)))]
 
-    [:div#layers
+    [:div#layers {:class (stl/css :layers)}
      (if (d/not-empty? focus)
        [:div {:class (stl/css :tool-window-bar)}
         [:button {:class (stl/css :focus-title)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
index c84e3449b..5e1d175e5 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@@ -12,7 +12,7 @@
   justify-content: space-between;
   height: $s-32;
   min-height: $s-32;
-  margin: $s-4 0 $s-4 $s-8;
+  margin: $s-8 0 $s-4 $s-8;
   padding-right: $s-8;
 
   &.search {
@@ -164,10 +164,14 @@
   color: var(--pill-foreground-color);
 }
 
+.layers {
+  position: relative;
+}
+
 .filters-container {
   @extend .menu-dropdown;
-  top: $s-44;
-  left: $s-12;
+  position: absolute;
+  left: $s-20;
   width: $s-192;
   .filter-menu-item {
     @include bodyMedTipography;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
index b3739681f..5327e45c1 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
@@ -522,7 +522,8 @@
        (when open?
          [:div {:class (stl/css :element-content)}
           [:div {:class (stl/css-case :component-wrapper true
-                                      :with-actions show-menu?)}
+                                      :with-actions show-menu?
+                                      :without-actions (not show-menu?))}
            [:button {:class (stl/css-case :component-name-wrapper true
                                           :with-main (and can-swap? (not multi))
                                           :swappeable (and can-swap? (not swap-opened?)))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
index 16145e413..cda5dfe26 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
@@ -51,6 +51,15 @@
     grid-template-columns: 1fr $s-28;
     gap: $s-2;
   }
+
+  &.without-actions {
+    padding-right: 0.5rem;
+    .component-name-wrapper {
+      width: 100%;
+
+      border-radius: $br-8;
+    }
+  }
 }
 
 .component-name-wrapper {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
index 766a6b3c0..fcef93100 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
@@ -357,13 +357,14 @@
              (update-interaction index #(ctsi/set-offset-effect % value)))))
 
 
-        event-type-options   [{:value :click :label (tr "workspace.options.interaction-on-click")}
-                             ;; TODO: need more UX research
-                             ;; :mouse-over (tr "workspace.options.interaction-while-hovering")
-                             ;; :mouse-press (tr "workspace.options.interaction-while-pressing")
-                              {:value :mouse-enter :label (tr "workspace.options.interaction-mouse-enter")}
-                              {:value :mouse-leave :label (tr "workspace.options.interaction-mouse-leave")}
-                              {:value :after-delay :label (tr "workspace.options.interaction-after-delay")}]
+        event-type-options   (-> [{:value :click :label (tr "workspace.options.interaction-on-click")}
+                                  ;; TODO: need more UX research
+                                  ;; :mouse-over (tr "workspace.options.interaction-while-hovering")
+                                  ;; :mouse-press (tr "workspace.options.interaction-while-pressing")
+                                  {:value :mouse-enter :label (tr "workspace.options.interaction-mouse-enter")}
+                                  {:value :mouse-leave :label (tr "workspace.options.interaction-mouse-leave")}]
+                                 (cond-> (cfh/frame-shape? shape)
+                                   (conj {:value :after-delay :label (tr "workspace.options.interaction-after-delay")})))
 
         action-type-options [{:value :navigate :label (tr "workspace.options.interaction-navigate-to")}
                              {:value :open-overlay :label (tr "workspace.options.interaction-open-overlay")}
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 ce4ecc472..b646311e8 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
@@ -32,7 +32,7 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(defn dir-icons-refactor
+(defn- dir-icons-refactor
   [val]
   (case val
     :row            i/grid-row-refactor
@@ -61,10 +61,10 @@
    :layout-grid-rows])
 
 (defn get-layout-flex-icon
-  [type val ^boolean is-col?]
+  [type val ^boolean column?]
   (case type
     :align-items
-    (if is-col?
+    (if column?
       (case val
         :start    i/align-items-column-start-refactor
         :end      i/align-items-column-end-refactor
@@ -79,7 +79,7 @@
         :baseline i/align-items-row-baseline))
 
     :justify-content
-    (if is-col?
+    (if column?
       (case val
         :start         i/justify-content-column-start-refactor
         :end           i/justify-content-column-end-refactor
@@ -96,7 +96,7 @@
         :space-between i/justify-content-row-between-refactor))
 
     :align-content
-    (if is-col?
+    (if column?
       (case val
         :start         i/align-content-column-start-refactor
         :end           i/align-content-column-end-refactor
@@ -116,7 +116,7 @@
         :stretch nil))
 
     :align-self
-    (if is-col?
+    (if column?
       (case val
         :auto     i/remove-refactor
         :start    i/align-self-row-left-refactor
@@ -132,11 +132,11 @@
         :stretch  i/align-self-column-strech
         :baseline i/align-self-column-baseline))))
 
-(defn get-layout-grid-icon-refactor
-  [type val ^boolean is-col?]
+(defn get-layout-grid-icon
+  [type val ^boolean column?]
   (case type
     :align-items
-    (if is-col?
+    (if column?
       (case val
         :auto     i/remove-refactor
         :start    i/align-self-row-left-refactor
@@ -153,7 +153,7 @@
         :baseline i/align-self-column-baseline))
 
     :justify-items
-    (if (not is-col?)
+    (if (not column?)
       (case val
         :start         i/align-content-column-start-refactor
         :center        i/align-content-column-center-refactor
@@ -170,9 +170,11 @@
         :stretch       i/align-content-row-stretch-refactor))))
 
 (mf/defc direction-row-flex
-  {::mf/props :obj}
-  [{:keys [saved-dir on-change]}]
-  [:& radio-buttons {:selected (d/name saved-dir)
+  {::mf/props :obj
+   ::mf/private true}
+  [{:keys [value on-change]}]
+  [:& radio-buttons {:selected (d/name value)
+                     :decode-fn keyword
                      :on-change on-change
                      :name "flex-direction"}
    [:& radio-button {:value "row"
@@ -205,306 +207,390 @@
 
 (mf/defc align-row
   {::mf/props :obj}
-  [{:keys [is-col? align-items on-change]}]
-  [:& radio-buttons {:selected (d/name align-items)
+  [{:keys [is-column value on-change]}]
+  [:& radio-buttons {:selected (d/name value)
+                     :decode-fn keyword
                      :on-change on-change
                      :name "flex-align-items"}
    [:& radio-button {:value "start"
-                     :icon  (get-layout-flex-icon :align-items :start is-col?)
+                     :icon  (get-layout-flex-icon :align-items :start is-column)
                      :title "Align items start"
                      :id     "align-items-start"}]
    [:& radio-button {:value "center"
-                     :icon  (get-layout-flex-icon :align-items :center is-col?)
+                     :icon  (get-layout-flex-icon :align-items :center is-column)
                      :title "Align items center"
                      :id    "align-items-center"}]
    [:& radio-button {:value "end"
-                     :icon  (get-layout-flex-icon :align-items :end is-col?)
+                     :icon  (get-layout-flex-icon :align-items :end is-column)
                      :title "Align items end"
                      :id    "align-items-end"}]])
 
 (mf/defc align-content-row
   {::mf/props :obj}
-  [{:keys [is-col? align-content on-change]}]
-  [:& radio-buttons {:selected (d/name align-content)
+  [{:keys [is-column value on-change]}]
+  [:& radio-buttons {:selected (d/name value)
+                     :decode-fn keyword
                      :on-change on-change
                      :name "flex-align-content"}
-   [:& radio-button {:value      "start"
-                     :icon       (get-layout-flex-icon :align-content :start is-col?)
-                     :title      "Align content start"
-                     :id         "align-content-start"}]
-   [:& radio-button {:value      "center"
-                     :icon       (get-layout-flex-icon :align-content :center is-col?)
-                     :title      "Align content center"
-                     :id         "align-content-center"}]
-   [:& radio-button {:value      "end"
-                     :icon       (get-layout-flex-icon :align-content :end is-col?)
-                     :title      "Align content end"
-                     :id         "align-content-end"}]
-   [:& radio-button {:value      "space-between"
-                     :icon       (get-layout-flex-icon :align-content :space-between is-col?)
-                     :title      "Align content space-between"
-                     :id         "align-content-space-between"}]
-   [:& radio-button {:value      "space-around"
-                     :icon       (get-layout-flex-icon :align-content :space-around is-col?)
-                     :title      "Align content space-around"
-                     :id         "align-content-space-around"}]
-   [:& radio-button {:value      "space-evenly"
-                     :icon       (get-layout-flex-icon :align-content :space-evenly is-col?)
-                     :title      "Align content space-evenly"
-                     :id         "align-content-space-evenly"}]])
+   [:& radio-button {:value "start"
+                     :icon  (get-layout-flex-icon :align-content :start is-column)
+                     :title "Align content start"
+                     :id    "align-content-start"}]
+   [:& radio-button {:value "center"
+                     :icon  (get-layout-flex-icon :align-content :center is-column)
+                     :title "Align content center"
+                     :id    "align-content-center"}]
+   [:& radio-button {:value "end"
+                     :icon  (get-layout-flex-icon :align-content :end is-column)
+                     :title "Align content end"
+                     :id    "align-content-end"}]
+   [:& radio-button {:value "space-between"
+                     :icon  (get-layout-flex-icon :align-content :space-between is-column)
+                     :title "Align content space-between"
+                     :id    "align-content-space-between"}]
+   [:& radio-button {:value "space-around"
+                     :icon  (get-layout-flex-icon :align-content :space-around is-column)
+                     :title "Align content space-around"
+                     :id    "align-content-space-around"}]
+   [:& radio-button {:value "space-evenly"
+                     :icon  (get-layout-flex-icon :align-content :space-evenly is-column)
+                     :title "Align content space-evenly"
+                     :id    "align-content-space-evenly"}]])
 
 (mf/defc justify-content-row
   {::mf/props :obj}
-  [{:keys [is-col? justify-content on-change]}]
+  [{:keys [is-column justify-content on-change]}]
   [:& radio-buttons {:selected (d/name justify-content)
                      :on-change on-change
                      :name "flex-justify"}
    [:& radio-button {:value "start"
-                     :icon  (get-layout-flex-icon :justify-content :start is-col?)
+                     :icon  (get-layout-flex-icon :justify-content :start is-column)
                      :title "Justify content start"
                      :id    "justify-content-start"}]
    [:& radio-button {:value "center"
-                     :icon  (get-layout-flex-icon :justify-content :center is-col?)
+                     :icon  (get-layout-flex-icon :justify-content :center is-column)
                      :title "Justify content center"
                      :id    "justify-content-center"}]
    [:& radio-button {:value "end"
-                     :icon  (get-layout-flex-icon :justify-content :end is-col?)
+                     :icon  (get-layout-flex-icon :justify-content :end is-column)
                      :title "Justify content end"
                      :id    "justify-content-end"}]
    [:& radio-button {:value "space-between"
-                     :icon  (get-layout-flex-icon :justify-content :space-between is-col?)
+                     :icon  (get-layout-flex-icon :justify-content :space-between is-column)
                      :title "Justify content space-between"
                      :id    "justify-content-space-between"}]
    [:& radio-button {:value "space-around"
-                     :icon  (get-layout-flex-icon :justify-content :space-around is-col?)
+                     :icon  (get-layout-flex-icon :justify-content :space-around is-column)
                      :title "Justify content space-around"
                      :id    "justify-content-space-around"}]
    [:& radio-button {:value "space-evenly"
-                     :icon  (get-layout-flex-icon :justify-content :space-evenly is-col?)
+                     :icon  (get-layout-flex-icon :justify-content :space-evenly is-column)
                      :title "Justify content space-evenly"
                      :id    "justify-content-space-evenly"}]])
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; PADDING
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn- select-padding
+  ([p]
+   (select-padding (= p :p1) (= p :p2) (= p :p3) (= p :p4)))
+  ([p1? p2? p3? p4?]
+   (st/emit! (udw/set-paddings-selected {:p1 p1? :p2 p2? :p3 p3? :p4 p4?}))))
+
+(defn- on-padding-blur
+  [_event]
+  (select-padding false false false false))
+
+(mf/defc simple-padding-selection
+  {::mf/props :obj}
+  [{:keys [value on-change]}]
+  (let [p1 (:p1 value)
+        p2 (:p2 value)
+        p3 (:p3 value)
+        p4 (:p4 value)
+
+        p1 (if (and (not (= :multiple value))
+                    (= p1 p3))
+             p1
+             "--")
+
+        p2 (if (and (not (= :multiple value))
+                    (= p2 p4))
+             p2
+             "--")
+
+        on-change'
+        (mf/use-fn
+         (mf/deps on-change)
+         (fn [value event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "attr")
+                          (keyword))]
+             (on-change :simple attr value event))))
+
+        on-focus
+        (mf/use-fn
+         (fn [event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "attr")
+                          (keyword))]
+
+             (case attr
+               :p1 (select-padding true false true false)
+               :p2 (select-padding false true false true))
+
+             (dom/select-target event))))]
+
+    [:div {:class (stl/css :paddings-simple)}
+     [:div {:class (stl/css :padding-simple)
+            :title "Vertical padding"}
+      [:span {:class (stl/css :icon)}
+       i/padding-top-bottom-refactor]
+      [:> numeric-input*
+       {:class (stl/css :numeric-input)
+        :placeholder "--"
+        :data-attr "p1"
+        :on-change on-change'
+        :on-focus on-focus
+        :nillable true
+        :min 0
+        :value p1}]]
+     [:div {:class (stl/css :padding-simple)
+            :title "Horizontal padding"}
+
+      [:span {:class (stl/css :icon)}
+       i/padding-left-right-refactor]
+      [:> numeric-input*
+       {:className (stl/css :numeric-input)
+        :placeholder "--"
+        :data-attr "p2"
+        :on-change on-change'
+        :on-focus on-focus
+        :on-blur on-padding-blur
+        :nillable true
+        :min 0
+        :value p2}]]]))
+
+(mf/defc multiple-padding-selection
+  {::mf/props :obj}
+  [{:keys [value on-change]}]
+  (let [p1 (:p1 value)
+        p2 (:p2 value)
+        p3 (:p3 value)
+        p4 (:p4 value)
+
+        on-change'
+        (mf/use-fn
+         (mf/deps on-change)
+         (fn [value event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "attr")
+                          (keyword))]
+             (on-change :multiple attr value event))))
+
+        on-focus
+        (mf/use-fn
+         (fn [event]
+           (let [attr (-> (dom/get-current-target event)
+                          (dom/get-data "attr")
+                          (keyword))]
+
+             (select-padding attr)
+             (dom/select-target event))))]
+
+    [:div {:class (stl/css :paddings-multiple)}
+     [:div {:class (stl/css :padding-multiple)
+            :title "Top padding"}
+      [:span {:class (stl/css :icon)}
+       i/padding-top-refactor]
+      [:> numeric-input*
+       {:class (stl/css :numeric-input)
+        :placeholder "--"
+        :data-attr "p1"
+        :on-change on-change'
+        :on-focus on-focus
+        :on-blur on-padding-blur
+        :nillable true
+        :min 0
+        :value p1}]]
+
+     [:div {:class (stl/css :padding-multiple)
+            :title "Right padding"}
+      [:span {:class (stl/css :icon)}
+       i/padding-right-refactor]
+      [:> numeric-input*
+       {:class (stl/css :numeric-input)
+        :placeholder "--"
+        :data-attr "p2"
+        :on-change on-change'
+        :on-focus on-focus
+        :on-blur on-padding-blur
+        :nillable true
+        :min 0
+        :value p2}]]
+
+     [:div {:class (stl/css :padding-multiple)
+            :title "Bottom padding"}
+      [:span {:class (stl/css :icon)}
+       i/padding-bottom-refactor]
+      [:> numeric-input*
+       {:class (stl/css :numeric-input)
+        :placeholder "--"
+        :data-attr "p3"
+        :on-change on-change'
+        :on-focus on-focus
+        :on-blur on-padding-blur
+        :nillable true
+        :min 0
+        :value p3}]]
+
+     [:div {:class (stl/css :padding-multiple)
+            :title "Left padding"}
+      [:span {:class (stl/css :icon)}
+       i/padding-left-refactor]
+      [:> numeric-input*
+       {:class (stl/css :numeric-input)
+        :placeholder "--"
+        :data-attr "p4"
+        :on-change on-change'
+        :on-focus on-focus
+        :on-blur on-padding-blur
+        :nillable true
+        :min 0
+        :value p4}]]]))
+
 (mf/defc padding-section
   {::mf/props :obj}
-  [{:keys [values on-change-style on-change]}]
-  (let [padding-type (:layout-padding-type values)
-
-        toggle-padding-mode
+  [{:keys [type on-type-change on-change] :as props}]
+  (let [on-type-change'
         (mf/use-fn
-         (mf/deps padding-type on-change-style)
-         (fn []
-           (let [padding (if (= padding-type :multiple) :simple :multiple)]
-             (on-change-style padding))))
+         (mf/deps on-type-change)
+         (fn [event]
+           (let [type (-> (dom/get-current-target event)
+                          (dom/get-data "type"))
+                 type (if (= type "multiple") :simple :multiple)]
+             (on-type-change type))))
 
-        p1 (if (and (not (= :multiple (:layout-padding values)))
-                    (= (dm/get-in values [:layout-padding :p1])
-                       (dm/get-in values [:layout-padding :p3])))
-             (dm/get-in values [:layout-padding :p1])
-             "--")
+        props (mf/spread-obj props {:on-change on-change})]
 
-        p2 (if (and (not (= :multiple (:layout-padding values)))
-                    (= (dm/get-in values [:layout-padding :p2])
-                       (dm/get-in values [:layout-padding :p4])))
-             (dm/get-in values [:layout-padding :p2])
-             "--")
-
-        select-paddings
-        (fn [p1? p2? p3? p4?]
-          (st/emit! (udw/set-paddings-selected {:p1 p1? :p2 p2? :p3 p3? :p4 p4?})))
-
-        select-padding #(select-paddings (= % :p1) (= % :p2) (= % :p3) (= % :p4))]
-
-    (mf/use-effect
-     (fn []
-       (fn []
-         ;;on destroy component
-         (select-paddings false false false false))))
+    (mf/with-effect []
+      ;; on destroy component
+      (fn []
+        (on-padding-blur nil)))
 
     [:div {:class (stl/css :padding-group)}
      [:div {:class (stl/css :padding-inputs)}
       (cond
-        (= padding-type :simple)
-        [:div {:class (stl/css :paddings-simple)}
-         [:div {:class (stl/css :padding-simple)
-                :title "Vertical padding"}
-          [:span {:class (stl/css :icon)}
-           i/padding-top-bottom-refactor]
-          [:> numeric-input*
-           {:className (stl/css :numeric-input)
-            :placeholder "--"
-            :on-change (partial on-change :simple :p1)
-            :on-focus #(do
-                         (dom/select-target %)
-                         (select-paddings true false true false))
-            :nillable true
-            :min 0
-            :value p1}]]
-         [:div {:class (stl/css :padding-simple)
-                :title "Horizontal padding"}
+        (= type :simple)
+        [:> simple-padding-selection props]
 
-          [:span {:class (stl/css :icon)}
-           i/padding-left-right-refactor]
-          [:> numeric-input*
-           {:className (stl/css :numeric-input)
-            :placeholder "--"
-            :on-change (partial on-change :simple :p2)
-            :on-focus #(do (dom/select-target %)
-                           (select-paddings false true false true))
-            :on-blur #(select-paddings false false false false)
-            :nillable true
-            :min 0
-            :value p2}]]]
-        (= padding-type :multiple)
-        [:div {:class (stl/css :paddings-multiple)}
+        (= type :multiple)
+        [:> multiple-padding-selection props])]
 
-         [:div {:class (stl/css :padding-multiple)
-                :title "Top padding"}
-          [:span {:class (stl/css :icon)}
-           i/padding-top-refactor]
-          [:> numeric-input*
-           {:className (stl/css :numeric-input)
-            :placeholder "--"
-            :on-change (partial on-change :multiple :p1)
-            :on-focus #(do (dom/select-target %)
-                           (select-padding :p1))
-            :on-blur #(select-paddings false false false false)
-            :nillable true
-            :min 0
-            :value  (:p1 (:layout-padding values))}]]
-
-         [:div {:class (stl/css :padding-multiple)
-                :title "Right padding"}
-          [:span {:class (stl/css :icon)}
-           i/padding-right-refactor]
-          [:> numeric-input*
-           {:className (stl/css :numeric-input)
-            :placeholder "--"
-            :on-change (partial on-change :multiple :p2)
-            :on-focus #(do (dom/select-target %)
-                           (select-padding :p2))
-            :on-blur #(select-paddings false false false false)
-            :nillable true
-            :min 0
-            :value  (:p2 (:layout-padding values))}]]
-
-         [:div {:class (stl/css :padding-multiple)
-                :title "Bottom padding"}
-          [:span {:class (stl/css :icon)}
-           i/padding-bottom-refactor]
-          [:> numeric-input*
-           {:className (stl/css :numeric-input)
-            :placeholder "--"
-            :on-change (partial on-change :multiple :p3)
-            :on-focus #(do (dom/select-target %)
-                           (select-padding :p3))
-            :on-blur #(select-paddings false false false false)
-            :nillable true
-            :min 0
-            :value  (:p3 (:layout-padding values))}]]
-
-         [:div {:class (stl/css :padding-multiple)
-                :title "Left padding"}
-          [:span {:class (stl/css :icon)}
-           i/padding-left-refactor]
-          [:> numeric-input*
-           {:className (stl/css :numeric-input)
-            :placeholder "--"
-            :on-change (partial on-change :multiple :p4)
-            :on-focus #(do (dom/select-target %)
-                           (select-padding :p4))
-            :on-blur #(select-paddings false false false false)
-            :nillable true
-            :min 0
-            :value  (:p4 (:layout-padding values))}]]])]
-     [:button {:class (stl/css-case :padding-toggle true
-                                    :selected (= padding-type :multiple))
-               :on-click toggle-padding-mode}
+     [:button {:class (stl/css-case
+                       :padding-toggle true
+                       :selected (= type :multiple))
+               :data-type (name type)
+               :on-click on-type-change'}
       i/padding-extended-refactor]]))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; GAP
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn- select-gap!
+  [value]
+  (st/emit! (udw/set-gap-selected value)))
+
+(defn- on-gap-focus
+  [event]
+  (let [type (-> (dom/get-current-target event)
+                 (dom/get-data "type")
+                 (keyword))]
+    (select-gap! type)
+    (dom/select-target event)))
+
+(defn- on-gap-blur
+  [_event]
+  (select-gap! nil))
+
 (mf/defc gap-section
   {::mf/props :obj}
-  [{:keys [is-col? wrap-type gap-selected? on-change gap-value]}]
-  (let [select-gap
-        (fn [gap]
-          (st/emit! (udw/set-gap-selected gap)))]
+  [{:keys [is-column wrap-type on-change value]
+    :or {wrap-type :none}
+    :as props}]
+  (let [nowrap? (= :nowrap wrap-type)
 
-    (mf/use-effect
-     (fn []
-       (fn []
-         ;;on destroy component
-         (select-gap nil))))
+        row-gap-disabled?
+        (and ^boolean nowrap?
+             (not ^boolean is-column))
+
+        col-gap-disabled?
+        (and ^boolean nowrap?
+             ^boolean is-column)
+
+        on-change'
+        (mf/use-fn
+         (mf/deps on-change)
+         (fn [value event]
+           (let [target    (dom/get-current-target event)
+                 wrap-type (dom/get-data target "wrap-type")
+                 type      (keyword (dom/get-data target "type"))]
+             (on-change (= "nowrap" wrap-type) type value event))))]
+
+    (mf/with-effect []
+      ;; on destroy component
+      (fn []
+        (on-gap-blur nil)))
 
     [:div {:class (stl/css :gap-group)}
-     [:div {:class (stl/css-case :row-gap true
-                                 :disabled (and (= :nowrap wrap-type) (not is-col?)))
+
+     [:div {:class (stl/css-case
+                    :row-gap true
+                    :disabled row-gap-disabled?)
             :title "Row gap"}
       [:span {:class (stl/css :icon)} i/gap-vertical-refactor]
-      [:> numeric-input* {:className (stl/css :numeric-input true)
-                          :no-validate true
-                          :placeholder "--"
-                          :on-focus (fn [event]
-                                      (select-gap :row-gap)
-                                      (reset! gap-selected? :row-gap)
-                                      (dom/select-target event))
-                          :on-change (partial on-change (= :nowrap wrap-type) :row-gap)
-                          :on-blur (fn [_]
-                                     (select-gap nil)
-                                     (reset! gap-selected? :none))
-                          :nillable true
-                          :min 0
-                          :value (:row-gap gap-value)
-                          :disabled (and (= :nowrap wrap-type) (not is-col?))}]]
+      [:> numeric-input*
+       {:class (stl/css :numeric-input true)
+        :no-validate true
+        :placeholder "--"
+        :data-type "row-gap"
+        :data-wrap-type (name wrap-type)
+        :on-focus on-gap-focus
+        :on-change on-change'
+        :on-blur on-gap-blur
+        :nillable true
+        :min 0
+        :value (:row-gap value)
+        :disabled row-gap-disabled?}]]
 
-     [:div {:class (stl/css-case :column-gap true
-                                 :disabled (and (= :nowrap wrap-type) is-col?))
+     [:div {:class (stl/css-case
+                    :column-gap true
+                    :disabled col-gap-disabled?)
             :title "Column gap"}
-      [:span {:class (stl/css :icon)}
-       i/gap-horizontal-refactor]
-      [:> numeric-input* {:className (stl/css :numeric-input)
-                          :no-validate true
-                          :placeholder "--"
-                          :on-focus (fn [event]
-                                      (select-gap :column-gap)
-                                      (reset! gap-selected? :column-gap)
-                                      (dom/select-target event))
-                          :on-change (partial on-change (= :nowrap wrap-type) :column-gap)
-                          :on-blur (fn [_]
-                                     (select-gap nil)
-                                     (reset! gap-selected? :none))
-                          :nillable true
-                          :min 0
-                          :value (:column-gap gap-value)
-                          :disabled (and (= :nowrap wrap-type) is-col?)}]]]))
+      [:span {:class (stl/css :icon)} i/gap-horizontal-refactor]
+      [:> numeric-input*
+       {:class (stl/css :numeric-input true)
+        :no-validate true
+        :placeholder "--"
+        :data-type "column-gap"
+        :data-wrap-type (name wrap-type)
+        :on-focus on-gap-focus
+        :on-change on-change'
+        :on-blur on-gap-blur
+        :nillable true
+        :min 0
+        :value (:column-gap value)
+        :disabled col-gap-disabled?}]]]))
 
 ;; GRID COMPONENTS
 
-(defn get-layout-grid-icon
-  [type val ^boolean is-col?]
-  (case type
-    :justify-items
-    (if is-col?
-      (case val
-        :stretch       i/align-items-row-strech
-        :start         i/grid-justify-content-column-start
-        :end           i/grid-justify-content-column-end
-        :center        i/grid-justify-content-column-center
-        :space-around  i/grid-justify-content-column-around
-        :space-between i/grid-justify-content-column-between
-        :space-evenly  i/grid-justify-content-column-between)
-
-      (case val
-        :stretch       i/align-items-column-strech
-        :start         i/grid-justify-content-row-start
-        :end           i/grid-justify-content-row-end
-        :center        i/grid-justify-content-row-center
-        :space-around  i/grid-justify-content-row-around
-        :space-between i/grid-justify-content-row-between
-        :space-evenly  i/grid-justify-content-row-between))))
-
 (mf/defc direction-row-grid
   {::mf/props :obj}
-  [{:keys [saved-dir on-change] :as props}]
-  [:& radio-buttons {:selected (d/name saved-dir)
+  [{:keys [value on-change] :as props}]
+  [:& radio-buttons {:selected (d/name value)
+                     :decode-fn keyword
                      :on-change on-change
                      :name "grid-direction"}
    [:& radio-button {:value "row"
@@ -536,39 +622,72 @@
      (tr "workspace.layout_grid.editor.options.edit-grid")]))
 
 (mf/defc align-grid-row
-  {::mf/props :obj}
-  [{:keys [is-col? align-items set-align]}]
-  (let [type (if is-col? :column :row)]
-    [:& radio-buttons {:selected (d/name align-items)
-                       :on-change #(set-align % type)
-                       :name (dm/str "flex-align-items-" (d/name type))}
+  {::mf/props :obj
+   ::mf/private true}
+  [{:keys [is-column value on-change]}]
+  (let [type (if ^boolean is-column "column" "row")]
+    [:& radio-buttons {:selected (name value)
+                       :decode-fn keyword
+                       :on-change on-change
+                       :name (dm/str "flex-align-items-" type)}
      [:& radio-button {:value "start"
-                       :icon  (get-layout-grid-icon-refactor :align-items :start is-col?)
+                       :icon  (get-layout-grid-icon :align-items :start is-column)
                        :title "Align items start"
-                       :id     (dm/str "align-items-start-" (d/name type))}]
+                       :id     (dm/str "align-items-start-" type)}]
      [:& radio-button {:value "center"
-                       :icon  (get-layout-grid-icon-refactor :align-items :center is-col?)
+                       :icon  (get-layout-grid-icon :align-items :center is-column)
                        :title "Align items center"
-                       :id    (dm/str "align-items-center-" (d/name type))}]
+                       :id    (dm/str "align-items-center-" type)}]
      [:& radio-button {:value "end"
-                       :icon  (get-layout-grid-icon-refactor :align-items :end is-col?)
+                       :icon  (get-layout-grid-icon :align-items :end is-column)
                        :title "Align items end"
-                       :id    (dm/str "align-items-end-" (d/name type))}]]))
+                       :id    (dm/str "align-items-end-" type)}]]))
 
 (mf/defc justify-grid-row
-  {::mf/props :obj}
-  [{:keys [is-col? justify-items set-justify]}]
-  (let [type (if is-col? :column :row)]
+  {::mf/props :obj
+   ::mf/private :obj}
+  [{:keys [is-column value on-change]}]
+  (let [type (if ^boolean is-column "column" "row")]
+    [:& radio-buttons {:selected (name value)
+                       :on-change on-change
+                       :decode-fn keyword
+                       :name (dm/str "grid-justify-items-" type)}
 
-    [:& radio-buttons {:selected (d/name justify-items)
-                       :on-change #(set-justify % type)
-                       :name (dm/str "grid-justify-items-" (d/name type))}
-     (for [justify [:start :center :end :space-around :space-between :stretch]]
-       [:& radio-button {:key   (dm/str "justify-item-" (d/name justify))
-                         :value (d/name justify)
-                         :icon  (get-layout-grid-icon-refactor :justify-items justify is-col?)
-                         :title (dm/str "Justify items " (d/name justify))
-                         :id    (dm/str "justify-items-" (d/name justify) "-" (d/name type))}])]))
+     [:& radio-button {:key "justify-item-start"
+                       :value "start"
+                       :icon (get-layout-grid-icon :justify-items :start is-column)
+                       :title "Justify items start"
+                       :id (dm/str "justify-items-start-" type)}]
+
+     [:& radio-button {:key "justify-item-center"
+                       :value "center"
+                       :icon (get-layout-grid-icon :justify-items :center is-column)
+                       :title "Justify items center"
+                       :id (dm/str "justify-items-center-" type)}]
+
+     [:& radio-button {:key "justify-item-end"
+                       :value "end"
+                       :icon (get-layout-grid-icon :justify-items :end is-column)
+                       :title "Justify items end"
+                       :id (dm/str "justify-items-end-" type)}]
+
+     [:& radio-button {:key "justify-item-space-around"
+                       :value "space-around"
+                       :icon (get-layout-grid-icon :justify-items :space-around is-column)
+                       :title "Justify items space-around"
+                       :id (dm/str "justify-items-space-around-" type)}]
+
+     [:& radio-button {:key "justify-item-space-between"
+                       :value "space-between"
+                       :icon (get-layout-grid-icon :justify-items :space-between is-column)
+                       :title "Justify items space-between"
+                       :id (dm/str "justify-items-space-between-" type)}]
+
+     [:& radio-button {:key "justify-item-stretch"
+                       :value "stretch"
+                       :icon (get-layout-grid-icon :justify-items :stretch is-column)
+                       :title "Justify items stretch"
+                       :id (dm/str "justify-items-stretch-" type)}]]))
 
 (defn- manage-values
   [{:keys [type value]}]
@@ -581,7 +700,7 @@
 
 (mf/defc grid-track-info
   {::mf/props :obj}
-  [{:keys [is-col?
+  [{:keys [is-column
            type
            index
            column
@@ -621,7 +740,7 @@
         (h/use-sortable
          :data-type "penpot/grid-track"
          :on-drop drop-track
-         :data {:is-col? is-col?
+         :data {:is-column is-column
                 :index index
                 :column column}
          :draggable? true)]
@@ -637,7 +756,7 @@
      [:div {:class (stl/css :track-info-container)}
       [:div {:class (stl/css :track-info-dir-icon)
              :on-click handle-select-track}
-       (if is-col? i/flex-vertical-refactor i/flex-horizontal-refactor)]
+       (if is-column i/flex-vertical-refactor i/flex-horizontal-refactor)]
 
       [:div {:class (stl/css :track-info-value)}
        [:> numeric-input* {:no-validate true
@@ -662,17 +781,17 @@
 
 (mf/defc grid-columns-row
   {::mf/props :obj}
-  [{:keys [is-col? expanded? column-values toggle add-new-element set-column-value set-column-type
+  [{:keys [is-column expanded? column-values toggle add-new-element set-column-value set-column-type
            remove-element reorder-track hover-track on-select-track]}]
   (let [column-num (count column-values)
         direction (if (> column-num 1)
-                    (if ^boolean is-col? "Columns " "Rows ")
-                    (if ^boolean is-col? "Column " "Row "))
+                    (if ^boolean is-column "Columns " "Rows ")
+                    (if ^boolean is-column "Column " "Row "))
 
         track-name (dm/str direction  (if (= column-num 0) " - empty" column-num))
         track-detail (str/join ", " (map manage-values column-values))
 
-        type (if is-col? :column :row)
+        type (if is-column :column :row)
 
         add-track
         #(do
@@ -693,7 +812,7 @@
          (for [[index column] (d/enumerate column-values)]
            [:& grid-track-info {:key (dm/str index "-" (name type))
                                 :type type
-                                :is-col? is-col?
+                                :is-column is-column
                                 :index index
                                 :column column
                                 :set-column-value set-column-value
@@ -705,70 +824,51 @@
 
 ;; LAYOUT COMPONENT
 
+(defn- open-flex-help
+  [_]
+  (st/emit! (dom/open-new-window cf/flex-help-uri)))
+
+(defn- open-grid-help
+  [_]
+  (st/emit! (dom/open-new-window cf/grid-help-uri)))
+
 (mf/defc layout-container-menu
   {::mf/memo #{:ids :values :multiple}
    ::mf/props :obj}
   [{:keys [ids values multiple]}]
   (let [;; Display
-        layout-type         (:layout values)
-        has-layout?         (some? layout-type)
+        layout-type    (:layout values)
+        has-layout?    (some? layout-type)
 
-        show-layout-dropdown* (mf/use-state false)
-        show-layout-dropdown? @show-layout-dropdown*
+        show-dropdown* (mf/use-state false)
+        show-dropdown? @show-dropdown*
 
-        state*              (mf/use-state (if layout-type
-                                            true
-                                            false))
+        open*          (mf/use-state #(if layout-type true false))
+        open?          (deref open*)
 
-        open? (deref state*)
-        toggle-content (mf/use-fn #(swap! state* not))
+        on-toggle-visibility
+        (mf/use-fn #(swap! open* not))
 
         on-add-layout
-        (mf/use-fn
-         (fn [type]
-           (st/emit! (dwsl/create-layout type))
-           (reset! state* true)))
-
-        on-set-layout
         (mf/use-fn
          (fn [event]
-           (let [value (-> (dom/get-current-target event)
-                           (dom/get-data "value")
-                           (keyword))]
-             (on-add-layout value))))
+           (let [type (-> (dom/get-current-target event)
+                          (dom/get-data "type")
+                          (keyword))]
+             (st/emit! (dwsl/create-layout type))
+             (reset! open* true))))
 
         on-remove-layout
-        (fn [_]
-          (st/emit! (dwsl/remove-layout ids))
-          (reset! state* false))
-
-        set-flex
         (mf/use-fn
-         (mf/deps on-add-layout)
-         (fn []
-           (on-add-layout :flex)))
-
-        set-grid
-        (mf/use-fn
-         (mf/deps on-add-layout)
-         (fn []
-           (on-add-layout :grid)))
+         (mf/deps ids)
+         (fn [_]
+           (st/emit! (dwsl/remove-layout ids))
+           (reset! open* false)))
 
         saved-dir (:layout-flex-dir values)
-
-        is-col?   (or (= :column saved-dir) (= :column-reverse saved-dir))
-
-        set-direction-refactor
-        (mf/use-fn
-         (mf/deps layout-type ids)
-         (fn [dir]
-           (let [dir (keyword dir)]
-             (if (= :flex layout-type)
-               (st/emit! (dwsl/update-layout ids {:layout-flex-dir dir}))
-               (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))))))
+        is-column (or (= :column saved-dir) (= :column-reverse saved-dir))
 
         ;; Wrap type
-
         wrap-type (:layout-wrap-type values)
 
         toggle-wrap
@@ -782,7 +882,6 @@
 
 
         ;; Align items
-
         align-items         (:layout-align-items values)
 
         set-align-items
@@ -792,7 +891,6 @@
            (st/emit! (dwsl/update-layout ids {:layout-align-items (keyword value)}))))
 
         ;; Justify content
-
         justify-content     (:layout-justify-content values)
 
         set-justify-content
@@ -802,34 +900,31 @@
            (st/emit! (dwsl/update-layout ids {:layout-justify-content (keyword value)}))))
 
         ;; Align content
-
         align-content         (:layout-align-content values)
 
-        set-align-content
+        ;; FIXME revisit???
+        on-align-content-change
         (mf/use-fn
-         (mf/deps ids)
-         (fn [value align-content]
+         (mf/deps ids align-content)
+         (fn [value]
            (if (= align-content value)
              (st/emit! (dwsl/update-layout ids {:layout-align-content :stretch}))
              (st/emit! (dwsl/update-layout ids {:layout-align-content (keyword value)})))))
 
-
         ;; Gap
-
-        gap-selected?       (mf/use-state :none)
-
-        set-gap
-        (fn [gap-multiple? type val]
+        on-gap-change
+        (fn [multiple? type val]
           (let [val (mth/finite val 0)]
-            (if gap-multiple?
+            (if ^boolean multiple?
               (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
               (st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
 
         ;; Padding
-
-        change-padding-type
-        (fn [type]
-          (st/emit! (dwsl/update-layout ids {:layout-padding-type type})))
+        on-padding-type-change
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [type]
+           (st/emit! (dwsl/update-layout ids {:layout-padding-type type}))))
 
         on-padding-change
         (mf/use-fn
@@ -850,27 +945,29 @@
 
         saved-grid-dir (:layout-grid-dir values)
 
-        set-direction
+        on-direction-change
         (mf/use-fn
          (mf/deps layout-type ids)
          (fn [dir]
-           (let [dir (keyword dir)]
-             (if (= :flex layout-type)
-               (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))
-               (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))))))
+           (if (= :flex layout-type)
+             (st/emit! (dwsl/update-layout ids {:layout-flex-dir dir}))
+             (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir})))))
 
         ;; Align grid
         align-items-row    (:layout-align-items values)
         align-items-column (:layout-justify-items values)
 
-        set-align-grid
+        on-column-align-change
         (mf/use-fn
          (mf/deps ids)
-         (fn [value type]
-           (let [value (keyword value)]
-             (if (= type :row)
-               (st/emit! (dwsl/update-layout ids {:layout-align-items value}))
-               (st/emit! (dwsl/update-layout ids {:layout-justify-items value}))))))
+         (fn [value]
+           (st/emit! (dwsl/update-layout ids {:layout-justify-items value}))))
+
+        on-row-align-change
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [value]
+           (st/emit! (dwsl/update-layout ids {:layout-align-items value}))))
 
         ;; Justify grid
         grid-justify-content-row    (:layout-justify-content values)
@@ -878,54 +975,52 @@
 
         grid-enabled?  (features/use-feature "layout/grid")
 
-        set-justify-grid
+        on-column-justify-change
         (mf/use-fn
          (mf/deps ids)
-         (fn [value type]
-           (let [value (keyword value)]
-             (if (= type :row)
-               (st/emit! (dwsl/update-layout ids {:layout-justify-content value}))
-               (st/emit! (dwsl/update-layout ids {:layout-align-content value}))))))
+         (fn [value]
+           (st/emit! (dwsl/update-layout ids {:layout-align-content value}))))
 
-        handle-show-layout-dropdown
+        on-row-justify-change
         (mf/use-fn
-         (fn []
-           (swap! show-layout-dropdown* not)))
+         (mf/deps ids)
+         (fn [value]
+           (st/emit! (dwsl/update-layout ids {:layout-justify-content value}))))
 
-        handle-close-layout-options
-        (mf/use-fn
-         (fn []
-           (reset! show-layout-dropdown* false)))
+        on-toggle-dropdown-visibility
+        (mf/use-fn #(swap! show-dropdown* not))
 
-        handle-open-flex-help
-        (mf/use-fn
-         (fn []
-           (st/emit! (dom/open-new-window cf/flex-help-uri))))
-
-        handle-open-grid-help
-        (mf/use-fn
-         (fn []
-           (st/emit! (dom/open-new-window cf/grid-help-uri))))]
+        on-hide-dropdown
+        (mf/use-fn #(reset! show-dropdown* false))]
 
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar {:collapsable  has-layout?
-                     :collapsed    (not open?)
-                     :on-collapsed toggle-content
-                     :title        "Layout"
-                     :class        (stl/css-case :title-spacing-layout (not has-layout?))}
+      [:& title-bar
+       {:collapsable has-layout?
+        :collapsed (not open?)
+        :on-collapsed on-toggle-visibility
+        :title "Layout"
+        :class (stl/css-case :title-spacing-layout (not has-layout?))}
+
        (if (and (not multiple) (:layout values))
          [:div {:class (stl/css :title-actions)}
           (when ^boolean grid-enabled?
             [:*
              [:button {:class (stl/css :add-layout)
-                       :on-click handle-show-layout-dropdown}
+                       :on-click on-toggle-dropdown-visibility}
               i/menu-refactor]
 
-             [:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options}
+             [:& dropdown {:show show-dropdown?
+                           :on-close on-hide-dropdown}
               [:div {:class (stl/css :layout-options)}
-               [:button {:class (stl/css :layout-option) :on-click set-flex} "Flex layout"]
-               [:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]])
+               [:button {:class (stl/css :layout-option)
+                         :data-type "flex"
+                         :on-click on-add-layout}
+                "Flex layout"]
+               [:button {:class (stl/css :layout-option)
+                         :data-type "grid"
+                         :on-click on-add-layout}
+                "Grid layout"]]]])
 
           (when has-layout?
             [:button {:class (stl/css :remove-layout)
@@ -936,125 +1031,138 @@
           (if ^boolean grid-enabled?
             [:*
              [:button {:class (stl/css :add-layout)
-                       :on-click handle-show-layout-dropdown}
+                       :on-click on-toggle-dropdown-visibility}
               i/add-refactor]
 
-             [:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options}
+             [:& dropdown {:show show-dropdown?
+                           :on-close on-hide-dropdown}
               [:div {:class (stl/css :layout-options)}
-               [:button {:class (stl/css :layout-option) :on-click set-flex} "Flex layout"]
-               [:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]]
+               [:button {:class (stl/css :layout-option)
+                         :data-type "flex"
+                         :on-click on-add-layout}
+                "Flex layout"]
+               [:button {:class (stl/css :layout-option)
+                         :data-type "grid"
+                         :on-click on-add-layout}
+                "Grid layout"]]]]
 
             [:button {:class (stl/css :add-layout)
-                      :data-value "flex"
-                      :on-click on-set-layout}
+                      :data-type "flex"
+                      :on-click on-add-layout}
              i/add-refactor])
           (when has-layout?
             [:button {:class (stl/css :remove-layout)
                       :on-click on-remove-layout}
              i/remove-refactor])])]]
 
-     (when (and open? has-layout?)
-       (when (not= :multiple layout-type)
-         (case layout-type
-           :flex
-           [:div  {:class (stl/css :flex-layout-menu)}
-            [:div {:class (stl/css :first-row)}
-             [:& align-row {:is-col? is-col?
-                            :align-items align-items
-                            :on-change set-align-items}]
+     (when (and ^boolean open?
+                ^boolean has-layout?
+                (not= :multiple layout-type))
+       (case layout-type
+         :flex
+         [:div  {:class (stl/css :flex-layout-menu)}
+          [:div {:class (stl/css :first-row)}
+           [:& align-row {:is-column is-column
+                          :value align-items
+                          :on-change set-align-items}]
 
-             [:& direction-row-flex {:on-change set-direction-refactor
-                                     :saved-dir saved-dir}]
+           [:& direction-row-flex {:on-change on-direction-change
+                                   :value saved-dir}]
 
-             [:& wrap-row {:wrap-type wrap-type
-                           :on-click toggle-wrap}]]
+           [:& wrap-row {:wrap-type wrap-type
+                         :on-click toggle-wrap}]]
 
-            [:div {:class (stl/css :second-row :help-button-wrapper)}
-             [:& justify-content-row {:is-col? is-col?
-                                      :justify-content justify-content
-                                      :on-change set-justify-content}]
+          [:div {:class (stl/css :second-row :help-button-wrapper)}
+           [:& justify-content-row {:is-column is-column
+                                    :justify-content justify-content
+                                    :on-change set-justify-content}]
 
-             [:button {:on-click handle-open-flex-help
-                       :class (stl/css :help-button)} i/help-refactor]]
-            (when (= :wrap wrap-type)
-              [:div {:class (stl/css :third-row)}
-               [:& align-content-row {:is-col? is-col?
-                                      :align-content align-content
-                                      :on-change set-align-content}]])
-            [:div {:class (stl/css :forth-row)}
-             [:& gap-section {:is-col? is-col?
-                              :wrap-type wrap-type
-                              :gap-selected? gap-selected?
-                              :on-change set-gap
-                              :gap-value (:layout-gap values)}]
+           [:button {:on-click open-flex-help
+                     :class (stl/css :help-button)}
+            i/help-refactor]]
+          (when (= :wrap wrap-type)
+            [:div {:class (stl/css :third-row)}
+             [:& align-content-row {:is-column is-column
+                                    :value align-content
+                                    :on-change on-align-content-change}]])
+          [:div {:class (stl/css :forth-row)}
+           [:& gap-section {:is-column is-column
+                            :wrap-type wrap-type
+                            :on-change on-gap-change
+                            :value (:layout-gap values)}]
 
-             [:& padding-section {:values values
-                                  :on-change-style change-padding-type
-                                  :on-change on-padding-change}]]]
+           [:& padding-section {:value (:layout-padding values)
+                                :type (:layout-padding-type values)
+                                :on-type-change on-padding-type-change
+                                :on-change on-padding-change}]]]
 
+         :grid
+         [:div {:class (stl/css :grid-layout-menu)}
+          (when (= 1 (count ids))
+            [:div {:class (stl/css :edit-grid-wrapper)}
+             [:& grid-edit-mode {:id (first ids)}]
+             [:button {:on-click open-grid-help
+                       :class (stl/css :help-button)} i/help-refactor]])
 
-           :grid
-           [:div {:class (stl/css :grid-layout-menu)}
-            (when (= 1 (count ids))
-              [:div {:class (stl/css :edit-grid-wrapper)}
-               [:& grid-edit-mode {:id (first ids)}]
-               [:button {:on-click handle-open-grid-help
-                         :class (stl/css :help-button)} i/help-refactor]])
-            [:div {:class (stl/css :row :first-row)}
-             [:div {:class (stl/css :direction-edit)}
-              [:div {:class (stl/css :direction)}
-               [:& direction-row-grid {:saved-dir saved-grid-dir
-                                       :on-change set-direction}]]]
+          [:div {:class (stl/css :row :first-row)}
+           [:div {:class (stl/css :direction-edit)}
+            [:div {:class (stl/css :direction)}
+             [:& direction-row-grid {:value saved-grid-dir
+                                     :on-change on-direction-change}]]]
 
-             [:& align-grid-row {:is-col? false
-                                 :align-items align-items-row
-                                 :set-align set-align-grid}]
+           [:& align-grid-row {:is-column false
+                               :value align-items-row
+                               :on-change on-row-align-change}]
+           [:& align-grid-row {:is-column true
+                               :value align-items-column
+                               :on-change on-column-align-change}]]
 
-             [:& align-grid-row {:is-col? true
-                                 :align-items align-items-column
-                                 :set-align set-align-grid}]]
+          [:div {:class (stl/css :row :grid-layout-align)}
+           [:& justify-grid-row {:is-column true
+                                 :value grid-justify-content-column
+                                 :on-change on-column-justify-change}]
+           [:& justify-grid-row {:is-column false
+                                 :value grid-justify-content-row
+                                 :on-change on-row-justify-change}]]]
+         [:div {:class (stl/css :row)}
+          [:& gap-section {:on-change on-gap-change
+                           :value (:layout-gap values)}]]
 
-            [:div {:class (stl/css :row :grid-layout-align)}
-             [:& justify-grid-row {:is-col? true
-                                   :justify-items grid-justify-content-column
-                                   :set-justify set-justify-grid}]
-             [:& justify-grid-row {:is-col? false
-                                   :justify-items grid-justify-content-row
-                                   :set-justify set-justify-grid}]]
-            [:div {:class (stl/css :row)}
-             [:& gap-section {:gap-selected? gap-selected?
-                              :on-change set-gap
-                              :gap-value (:layout-gap values)}]]
+         [:div {:class (stl/css :row :padding-section)}
+          [:& padding-section {:value (:layout-padding values)
+                               :type (:layout-padding-type values)
+                               :on-change-style on-padding-type-change
+                               :on-change on-padding-change}]]
 
-            [:div {:class (stl/css :row :padding-section)}
-             [:& padding-section {:values values
-                                  :on-change-style change-padding-type
-                                  :on-change on-padding-change}]]]
-           nil)))]))
+         nil))]))
 
 (mf/defc grid-layout-edition
   {::mf/memo #{:ids :values}
    ::mf/props :obj}
   [{:keys [ids values]}]
   (let [;; Gap
-        gap-selected?  (mf/use-state :none)
         saved-grid-dir (:layout-grid-dir values)
 
-        set-direction
-        (fn [dir]
-          (let [dir (keyword dir)]
-            (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))))
+        on-direction-change
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [dir]
+           (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))))
 
-        set-gap
-        (fn [gap-multiple? type val]
-          (if gap-multiple?
-            (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
-            (st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))
+        on-gap-change
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [multiple? type val]
+           (if multiple?
+             (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
+             (st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
 
         ;; Padding
-        change-padding-type
-        (fn [type]
-          (st/emit! (dwsl/update-layout ids {:layout-padding-type type})))
+        on-padding-type-change
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [type]
+           (st/emit! (dwsl/update-layout ids {:layout-padding-type type}))))
 
         on-padding-change
         (fn [type prop val]
@@ -1072,43 +1180,45 @@
         align-items-row    (:layout-align-items values)
         align-items-column (:layout-justify-items values)
 
-        set-align-grid
+        on-column-align-change
         (mf/use-fn
          (mf/deps ids)
-         (fn [value type]
-           (let [value (keyword value)]
-             (if (= type :row)
-               (st/emit! (dwsl/update-layout ids {:layout-align-items value}))
-               (st/emit! (dwsl/update-layout ids {:layout-justify-items value}))))))
+         (fn [value]
+           (st/emit! (dwsl/update-layout ids {:layout-justify-items value}))))
 
+        on-row-align-change
+        (mf/use-fn
+         (mf/deps ids)
+         (fn [value]
+           (st/emit! (dwsl/update-layout ids {:layout-align-items value}))))
 
         ;; Justify grid
         grid-justify-content-row    (:layout-justify-content values)
         grid-justify-content-column (:layout-align-content values)
 
-        set-justify-grid
+        on-column-justify-change
         (mf/use-fn
          (mf/deps ids)
-         (fn [value type]
-           (let [value (keyword value)]
-             (if (= type :row)
-               (st/emit! (dwsl/update-layout ids {:layout-justify-content value}))
-               (st/emit! (dwsl/update-layout ids {:layout-align-content value}))))))
+         (fn [value]
+           (st/emit! (dwsl/update-layout ids {:layout-align-content value}))))
 
-        ;;Grid columns
-        column-grid-values  (:layout-grid-columns values)
-        grid-columns-open?  (mf/use-state false)
-        toggle-columns-info (mf/use-fn
-                             (fn [_]
-                               (swap! grid-columns-open? not)))
-
-        ;; Grid rows / columns
-        rows-grid-values  (:layout-grid-rows values)
-        grid-rows-open?  (mf/use-state false)
-        toggle-rows-info
+        on-row-justify-change
         (mf/use-fn
-         (fn [_]
-           (swap! grid-rows-open? not)))
+         (mf/deps ids)
+         (fn [value]
+           (st/emit! (dwsl/update-layout ids {:layout-justify-content value}))))
+
+        columns-open?    (mf/use-state false)
+        rows-open?       (mf/use-state false)
+
+        column-values    (:layout-grid-columns values)
+        rows-values      (:layout-grid-rows values)
+
+        toggle-columns-open
+        (mf/use-fn #(swap! columns-open? not))
+
+        toggle-rows-open
+        (mf/use-fn #(swap! rows-open? not))
 
         add-new-element
         (mf/use-fn
@@ -1157,20 +1267,16 @@
                          :fixed 100)]
              (st/emit! (dwsl/change-layout-track ids type index {:value value
                                                                  :type track-type})))))
-        handle-open-grid-help
-        (mf/use-fn
-         (fn []
-           (st/emit! (dom/open-new-window cf/grid-help-uri))))
-
         handle-locate-grid
         (mf/use-fn
+         (mf/deps ids)
          (fn []
            (st/emit! (dwge/locate-board (first ids)))))]
 
     [:div {:class (stl/css :grid-layout-menu)}
      [:div {:class (stl/css :row)}
       [:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"]
-      [:button {:on-click handle-open-grid-help
+      [:button {:on-click open-grid-help
                 :class (stl/css :help-button)} i/help-refactor]
       [:button {:class (stl/css :exit-btn)
                 :on-click #(st/emit! udw/clear-edition-mode)}
@@ -1179,44 +1285,44 @@
      [:div {:class (stl/css :row :first-row)}
       [:div {:class (stl/css :direction-edit)}
        [:div {:class (stl/css :direction)}
-        [:& direction-row-grid {:saved-dir saved-grid-dir
-                                :on-change set-direction}]]]
+        [:& direction-row-grid {:value saved-grid-dir
+                                :on-change on-direction-change}]]]
 
-      [:& align-grid-row {:is-col? false
-                          :align-items align-items-row
-                          :set-align set-align-grid}]
+      [:& align-grid-row {:is-column false
+                          :value align-items-row
+                          :on-change on-row-align-change}]
 
-      [:& align-grid-row {:is-col? true
-                          :align-items align-items-column
-                          :set-align set-align-grid}]]
+      [:& align-grid-row {:is-column true
+                          :value align-items-column
+                          :on-change on-column-align-change}]]
 
      [:div {:class (stl/css :row :grid-layout-align)}
-      [:& justify-grid-row {:is-col? true
-                            :justify-items grid-justify-content-column
-                            :set-justify set-justify-grid}]
-      [:& justify-grid-row {:is-col? false
-                            :justify-items grid-justify-content-row
-                            :set-justify set-justify-grid}]
+      [:& justify-grid-row {:is-column true
+                            :value grid-justify-content-column
+                            :on-change on-column-justify-change}]
+      [:& justify-grid-row {:is-column false
+                            :value grid-justify-content-row
+                            :on-change on-row-justify-change}]
 
       [:button {:on-click handle-locate-grid
                 :class (stl/css :locate-button)}
        i/locate-refactor]]
 
      [:div {:class (stl/css :row)}
-      [:& gap-section {:gap-selected? gap-selected?
-                       :on-change set-gap
-                       :gap-value (:layout-gap values)}]]
+      [:& gap-section {:on-change on-gap-change
+                       :value (:layout-gap values)}]]
 
      [:div {:class (stl/css :row :padding-section)}
-      [:& padding-section {:values values
-                           :on-change-style change-padding-type
+      [:& padding-section {:value (:layout-padding values)
+                           :type (:layout-padding-type values)
+                           :on-change-style on-padding-type-change
                            :on-change on-padding-change}]]
 
      [:div {:class (stl/css :row :grid-tracks-row)}
-      [:& grid-columns-row {:is-col? true
-                            :expanded? @grid-columns-open?
-                            :toggle toggle-columns-info
-                            :column-values column-grid-values
+      [:& grid-columns-row {:is-column true
+                            :expanded? @columns-open?
+                            :toggle toggle-columns-open
+                            :column-values column-values
                             :add-new-element add-new-element
                             :set-column-value set-column-value
                             :set-column-type set-column-type
@@ -1225,10 +1331,10 @@
                             :hover-track hover-track
                             :on-select-track handle-select-track}]
 
-      [:& grid-columns-row {:is-col? false
-                            :expanded? @grid-rows-open?
-                            :toggle toggle-rows-info
-                            :column-values rows-grid-values
+      [:& grid-columns-row {:is-column false
+                            :expanded? @rows-open?
+                            :toggle toggle-rows-open
+                            :column-values rows-values
                             :add-new-element add-new-element
                             :set-column-value set-column-value
                             :set-column-type set-column-type
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 dff99e0a9..6f23f9ae2 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
@@ -20,8 +20,7 @@
    [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
-   [rumext.v2 :as mf]
-   [rumext.v2.props :as-alias mf.props]))
+   [rumext.v2 :as mf]))
 
 (def layout-item-attrs
   [:layout-item-margin      ;; {:m1 0 :m2 0 :m3 0 :m4 0}
@@ -46,14 +45,14 @@
 
 (mf/defc margin-simple
   {::mf/props :obj}
-  [{:keys [margin on-change on-blur]}]
-  (let [m1 (:m1 margin)
-        m2 (:m2 margin)
-        m3 (:m3 margin)
-        m4 (:m4 margin)
+  [{:keys [value on-change on-blur]}]
+  (let [m1 (:m1 value)
+        m2 (:m2 value)
+        m3 (:m3 value)
+        m4 (:m4 value)
 
-        m1 (when (and (not= margin :multiple) (= m1 m3)) m1)
-        m2 (when (and (not= margin :multiple) (= m2 m4)) m2)
+        m1 (when (and (not= value :multiple) (= m1 m3)) m1)
+        m2 (when (and (not= value :multiple) (= m2 m4)) m2)
 
         on-focus
         (mf/use-fn
@@ -106,11 +105,11 @@
 
 (mf/defc margin-multiple
   {::mf/props :obj}
-  [{:keys [margin on-change on-blur]}]
-  (let [m1     (:m1 margin)
-        m2     (:m2 margin)
-        m3     (:m3 margin)
-        m4     (:m4 margin)
+  [{:keys [value on-change on-blur]}]
+  (let [m1     (:m1 value)
+        m2     (:m2 value)
+        m3     (:m3 value)
+        m4     (:m4 value)
 
         on-focus
         (mf/use-fn
@@ -186,11 +185,11 @@
 (mf/defc margin-section
   {::mf/props :obj
    ::mf/private true
-   ::mf.props/expect #{:margin :type :on-type-change :on-change}}
+   ::mf/expect-props #{:value :type :on-type-change :on-change}}
   [{:keys [type on-type-change] :as props}]
   (let [type       (d/nilv type :simple)
         on-blur    (mf/use-fn #(select-margins false false false false))
-        props      (mf/spread-obj props {:on-blur on-blur})
+        props      (mf/spread props :on-blur on-blur)
 
         on-type-change'
         (mf/use-fn
@@ -220,14 +219,17 @@
       i/margin-refactor]]))
 
 (mf/defc element-behaviour-horizontal
-  {::mf/props :obj}
-  [{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}]
-  [:div {:class (stl/css-case :horizontal-behaviour true
-                              :one-element (and (not has-fill) (not is-auto))
-                              :two-element (or has-fill is-auto)
-                              :three-element (and has-fill is-auto))}
+  {::mf/props :obj
+   ::mf/private true}
+  [{:keys [^boolean is-auto ^boolean has-fill value on-change]}]
+  [:div {:class (stl/css-case
+                 :horizontal-behaviour true
+                 :one-element (and (not has-fill) (not is-auto))
+                 :two-element (or has-fill is-auto)
+                 :three-element (and has-fill is-auto))}
    [:& radio-buttons
-    {:selected  (d/name sizing)
+    {:selected  (d/name value)
+     :decode-fn keyword
      :on-change on-change
      :wide      true
      :name      "flex-behaviour-h"}
@@ -252,14 +254,17 @@
         :id    "behaviour-h-auto"}])]])
 
 (mf/defc element-behaviour-vertical
-  {::mf/props :obj}
-  [{:keys [^boolean is-auto ^boolean has-fill sizing on-change]}]
-  [:div {:class (stl/css-case :vertical-behaviour true
-                              :one-element (and (not has-fill) (not is-auto))
-                              :two-element (or has-fill is-auto)
-                              :three-element (and has-fill is-auto))}
+  {::mf/props :obj
+   ::mf/private true}
+  [{:keys [^boolean is-auto ^boolean has-fill value on-change]}]
+  [:div {:class (stl/css-case
+                 :vertical-behaviour true
+                 :one-element (and (not has-fill) (not is-auto))
+                 :two-element (or has-fill is-auto)
+                 :three-element (and has-fill is-auto))}
    [:& radio-buttons
-    {:selected  (d/name sizing)
+    {:selected  (d/name value)
+     :decode-fn keyword
      :on-change on-change
      :wide      true
      :name      "flex-behaviour-v"}
@@ -286,34 +291,11 @@
         :title      "Fit content"
         :id         "behaviour-v-auto"}])]])
 
-(mf/defc element-behaviour
-  {::mf/props :obj
-   ::mf/private true}
-  [{:keys [^boolean is-auto
-           ^boolean has-fill
-           h-sizing
-           v-sizing
-           on-h-change
-           on-v-change]}]
-  [:div {:class (stl/css-case
-                 :behaviour-menu true
-                 :wrap (and has-fill is-auto))}
-
-   [:& element-behaviour-horizontal
-    {:is-auto is-auto
-     :has-fill has-fill
-     :sizing h-sizing
-     :on-change on-h-change}]
-   [:& element-behaviour-vertical
-    {:is-auto is-auto
-     :has-fill has-fill
-     :sizing v-sizing
-     :on-change on-v-change}]])
-
 (mf/defc align-self-row
   {::mf/props :obj}
-  [{:keys [^boolean is-col align-self on-change]}]
-  [:& radio-buttons {:selected (d/name align-self)
+  [{:keys [^boolean is-col value on-change]}]
+  [:& radio-buttons {:selected (d/name value)
+                     :decode-fn keyword
                      :on-change on-change
                      :name "flex-align-self"
                      :allow-empty true}
@@ -392,16 +374,16 @@
           :else
           "Layout element")
 
-        set-align-self
+        on-align-self-change
         (mf/use-fn
          (mf/deps ids align-self)
          (fn [value]
            (if (= align-self value)
              (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil}))
-             (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self (keyword value)})))))
+             (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value})))))
 
         ;; Margin
-        on-change-margin-type
+        on-margin-type-change
         (mf/use-fn
          (mf/deps ids)
          (fn [type]
@@ -422,19 +404,17 @@
              (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))))
 
         ;; Behaviour
-        on-change-behaviour-h
+        on-behaviour-h-change
         (mf/use-fn
          (mf/deps ids)
          (fn [value]
-           (let [value (keyword value)]
-             (st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value})))))
+           (st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value}))))
 
-        on-change-behaviour-v
+        on-behaviour-v-change
         (mf/use-fn
          (mf/deps ids)
          (fn [value]
-           (let [value (keyword value)]
-             (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value})))))
+           (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value}))))
 
         ;; Size and position
         on-size-change
@@ -450,10 +430,9 @@
         (mf/use-fn
          (mf/deps ids)
          (fn [value]
-           (let [value (keyword value)]
-             (when (= value :static)
-               (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index nil})))
-             (st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)})))))
+           (when (= value :static)
+             (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index nil})))
+           (st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)}))))
 
         ;; Z Index
         on-change-z-index
@@ -476,6 +455,7 @@
           [:div {:class (stl/css :row)}
            [:div {:class (stl/css :position-options)}
             [:& radio-buttons {:selected (if is-absolute? "absolute" "static")
+                               :decode-fn keyword
                                :on-change on-change-position
                                :name "layout-style"
                                :wide true}
@@ -497,24 +477,32 @@
               :value (:layout-item-z-index values)}]]])
 
         [:div {:class (stl/css :row)}
-         [:& element-behaviour {:has-fill is-layout-child?
-                                :is-auto is-layout-container?
-                                :v-sizing (:layout-item-v-sizing values)
-                                :h-sizing (:layout-item-h-sizing values)
-                                :on-h-change on-change-behaviour-h
-                                :on-v-change on-change-behaviour-v}]]
+         [:div {:class (stl/css-case
+                        :behaviour-menu true
+                        :wrap (and ^boolean is-layout-child?
+                                   ^boolean is-layout-container?))}
+          [:& element-behaviour-horizontal
+           {:is-auto is-layout-container?
+            :has-fill is-layout-child?
+            :value (:layout-item-h-sizing values)
+            :on-change on-behaviour-h-change}]
+          [:& element-behaviour-vertical
+           {:is-auto is-layout-container?
+            :has-fill is-layout-child?
+            :value (:layout-item-v-sizing values)
+            :on-change on-behaviour-v-change}]]]
 
         (when (and is-layout-child? is-flex-parent?)
           [:div {:class (stl/css :row)}
            [:& align-self-row {:is-col is-col?
-                               :align-self align-self
-                               :on-change set-align-self}]])
+                               :value align-self
+                               :on-change on-align-self-change}]])
 
         (when is-layout-child?
           [:div {:class (stl/css :row)}
-           [:& margin-section {:margin (:layout-item-margin values)
+           [:& margin-section {:value (:layout-item-margin values)
                                :type (:layout-item-margin-type values)
-                               :on-type-change on-change-margin-type
+                               :on-type-change on-margin-type-change
                                :on-change on-margin-change}]])
 
         (when (or (= h-sizing :fill)
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index 58e5548c8..0894f0b84 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -632,6 +632,7 @@
                      (not= @hover-top-frame-id (:id frame)))
             [:& grid-layout/editor
              {:zoom zoom
+              :key (dm/str (:id frame))
               :objects base-objects
               :modifiers modifiers
               :shape frame
diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
index 62ab5a1cb..7f9a1af28 100644
--- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
@@ -113,7 +113,7 @@
            (+ (:y start-p) (/ 9 zoom))])
 
         handle-click
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps on-click)
          #(when on-click (on-click)))]
 
@@ -142,7 +142,7 @@
         current-pos-ref (mf/use-ref nil)
 
         handle-pointer-down
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps on-drag-start)
          (fn [event]
            (let [raw-pt (dom/get-client-position event)
@@ -154,7 +154,7 @@
              (when on-drag-start (on-drag-start event position)))))
 
         handle-lost-pointer-capture
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps on-drag-end)
          (fn [event]
            (let [raw-pt (mf/ref-val current-pos-ref)
@@ -165,7 +165,7 @@
              (when on-drag-end (on-drag-end event position)))))
 
         handle-pointer-move
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps on-drag-delta on-drag-position)
          (fn [event]
            (when (mf/ref-val dragging-ref)
@@ -198,7 +198,7 @@
         layout-data (unchecked-get props "layout-data")
 
         handle-drag-position
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps shape row column row-span column-span)
          (fn [_ position]
            (let [[drag-row  drag-column] (gsg/get-position-grid-coord layout-data position)
@@ -235,7 +235,7 @@
              (st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers))))))
 
         handle-drag-end
-        (mf/use-callback
+        (mf/use-fn
          (fn []
            (st/emit! (dwm/apply-modifiers))))
 
@@ -291,17 +291,10 @@
       text]]))
 
 (mf/defc grid-cell
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "cell" "layout-data" "zoom" "hover?" "selected?"]))]
-   ::mf/wrap-props false}
-  [props]
-  (let [shape       (unchecked-get props "shape")
-        cell        (unchecked-get props "cell")
-        layout-data (unchecked-get props "layout-data")
-        zoom        (unchecked-get props "zoom")
-        hover?      (unchecked-get props "hover?")
-        selected?   (unchecked-get props "selected?")
-
-        cell-bounds (gsg/cell-bounds layout-data cell)
+  {::mf/memo #{:shape :cell :layout-data :zoom :hover? :selected?}
+   ::mf/props :obj}
+  [{:keys [shape cell layout-data zoom hover? selected?]}]
+  (let [cell-bounds (gsg/cell-bounds layout-data cell)
         cell-origin (gpo/origin cell-bounds)
         cell-width  (gpo/width-points cell-bounds)
         cell-height (gpo/height-points cell-bounds)
@@ -309,19 +302,19 @@
         cell-origin (gpt/transform cell-origin (gmt/transform-in cell-center (:transform-inverse shape)))
 
         handle-pointer-enter
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id shape) (:id cell))
          (fn []
            (st/emit! (dwge/hover-grid-cell (:id shape) (:id cell) true))))
 
         handle-pointer-leave
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id shape) (:id cell))
          (fn []
            (st/emit! (dwge/hover-grid-cell (:id shape) (:id cell) false))))
 
         handle-pointer-down
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id shape) (:id cell) selected?)
          (fn [event]
            (when (dom/left-mouse? event)
@@ -339,7 +332,7 @@
                (st/emit! (dwge/set-selection (:id shape) (:id cell)))))))
 
         handle-context-menu
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id shape) (:id cell) selected?)
          (fn [event]
            (dom/prevent-default event)
@@ -424,7 +417,7 @@
         start-size-after (mf/use-var nil)
 
         handle-drag-start
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps shape track-before track-after)
          (fn []
            (reset! start-size-before (:size track-before))
@@ -444,7 +437,7 @@
              (st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers))))))
 
         handle-drag-position
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps shape track-before track-after)
          (fn [_ position]
            (let [[tracks-prop axis]
@@ -469,7 +462,7 @@
              (st/emit! (dwm/set-modifiers (dwm/create-modif-tree [(:id shape)] modifiers))))))
 
         handle-drag-end
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps track-before track-after)
          (fn []
            (reset! start-size-before nil)
@@ -732,7 +725,7 @@
         text-p (if (= type :column) hpt vpt)
 
         handle-blur-track-input
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id shape))
          (fn [event]
            (let [target (-> event dom/get-target)
@@ -760,7 +753,7 @@
                (obj/set! target "value" (dom/get-attribute target "data-default-value"))))))
 
         handle-keydown-track-input
-        (mf/use-callback
+        (mf/use-fn
          (fn [event]
            (let [enter? (kbd/enter? event)
                  esc?   (kbd/esc? event)]
@@ -770,13 +763,13 @@
                (dom/blur! (dom/get-target event))))))
 
         handle-pointer-enter
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id shape) type index)
          (fn []
            (st/emit! (dwsl/hover-layout-track [(:id shape)] type index true))))
 
         handle-pointer-leave
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id shape) type index)
          (fn []
            (st/emit! (dwsl/hover-layout-track [(:id shape)] type index false))))
@@ -788,25 +781,25 @@
           [(- (:x text-p) (max 0 (:size track-data))) (- (:y text-p) (/ 36 zoom)) (max 0 (:size track-data)) (/ 36 zoom)])
 
         handle-drag-start
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps on-start-reorder-track type index)
          (fn []
            (on-start-reorder-track type index)))
 
         handle-drag-end
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps on-end-reorder-track type index)
          (fn [event position]
            (on-end-reorder-track type index position (not (kbd/mod? event)))))
 
         handle-drag-position
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps on-move-reorder-track type index)
          (fn [_ position]
            (on-move-reorder-track type index position)))
 
         handle-show-track-menu
-        (mf/use-callback
+        (mf/use-fn
          (fn [event]
            (dom/stop-propagation event)
            (dom/prevent-default event)
@@ -895,10 +888,9 @@
        :zoom zoom}]]))
 
 (mf/defc editor
-  {::mf/wrap [mf/memo]
-   ::mf/wrap-props false}
+  {::mf/memo true
+   ::mf/props :obj}
   [props]
-
   (let [base-shape (unchecked-get props "shape")
         objects    (unchecked-get props "objects")
         modifiers  (unchecked-get props "modifiers")
@@ -962,31 +954,30 @@
         height (max (gpo/height-points bounds) (+ row-total-size row-total-gap (ctl/v-padding shape)))
 
         handle-pointer-down
-        (mf/use-callback
+        (mf/use-fn
          (fn [event]
            (let [left-click? (= 1 (.-which (.-nativeEvent event)))]
              (when left-click?
                (dom/stop-propagation event)))))
 
         handle-add-column
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id shape))
          (fn []
            (st/emit! (st/emit! (dwsl/add-layout-track [(:id shape)] :column ctl/default-track-value)))))
 
         handle-add-row
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id shape))
          (fn []
            (st/emit! (st/emit! (dwsl/add-layout-track [(:id shape)] :row ctl/default-track-value)))))
 
-
         target-tracks* (mf/use-ref nil)
         drop-track-type* (mf/use-state nil)
         drop-track-target* (mf/use-state nil)
 
         handle-start-reorder-track
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps layout-data)
          (fn [type _from-idx]
            ;; Initialize target-tracks
@@ -1014,7 +1005,7 @@
              (reset! drop-track-type* type))))
 
         handle-move-reorder-track
-        (mf/use-callback
+        (mf/use-fn
          (fn [_type _from-idx position]
            (let [index
                  (->> (mf/ref-val target-tracks*)
@@ -1025,7 +1016,7 @@
                (reset! drop-track-target* index)))))
 
         handle-end-reorder-track
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps base-shape @drop-track-target*)
          (fn [type from-index _position move-content?]
            (when-let [to-index @drop-track-target*]
@@ -1041,9 +1032,8 @@
            (reset! drop-track-type* nil)
            (reset! drop-track-target* nil)))]
 
-    (mf/use-effect
-     (fn []
-       #(st/emit! (dwge/stop-grid-layout-editing (:id shape)))))
+    (mf/with-effect []
+      #(st/emit! (dwge/stop-grid-layout-editing (:id shape))))
 
     (when (and (not (:hidden shape)) (not (:blocked shape)))
       [:g.grid-editor {:pointer-events (when view-only "none")
@@ -1057,7 +1047,8 @@
                          :zoom zoom
                          :hover? (contains? hover-cells (:id cell))
                          :selected? (contains? selected-cells (:id cell))}])]
-       (when-not view-only
+
+       (when-not ^boolean view-only
          [:*
           [:& grid-editor-frame {:zoom zoom
                                  :bounds bounds
diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
index a9ab0ffb3..1a8c45567 100644
--- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs
@@ -291,7 +291,7 @@
                        (not (ctk/main-instance? obj))))
 
                ;; Set with the elements to remove from the hover list
-               remove-id-xf
+               remove-hover-xf
                (cond
                  mod?
                  (filter grouped?)
@@ -306,8 +306,25 @@
                                 (and (contains? #{:group :bool} (dm/get-in objects [% :type]))
                                      (not (contains? child-parent? %)))))))
 
-               remove-id?
-               (into selected-with-parents remove-id-xf ids)
+               remove-measure-xf
+               (cond
+                 mod?
+                 (filter grouped?)
+
+                 (not mod?)
+                 (let [child-parent?
+                       (into #{}
+                             (comp (remove #(cfh/group-like-shape? objects %))
+                                   (mapcat #(cfh/get-parent-ids objects %)))
+                             ids)]
+                   (filter #(and (contains? #{:group :bool} (dm/get-in objects [% :type]))
+                                 (not (contains? child-parent? %))))))
+
+               remove-hover?
+               (into selected-with-parents remove-hover-xf ids)
+
+               remove-measure?
+               (into selected-with-parents remove-measure-xf ids)
 
                no-fill-nested-frames?
                (fn [id]
@@ -318,7 +335,7 @@
 
                hover-shape
                (->> ids
-                    (remove remove-id?)
+                    (remove remove-hover?)
                     (remove (partial cfh/hidden-parent? objects))
                     (remove #(and mod? (no-fill-nested-frames? %)))
                     (filter #(or (empty? focus) (cpf/is-in-focus? objects focus %)))
@@ -329,14 +346,12 @@
                measure-hover-shape
                (when show-measures?
                  (->> ids
-                      (remove #(group-empty-space? % objects ids))
+                      (remove remove-measure?)
                       (remove (partial cfh/hidden-parent? objects))
                       (remove #(and mod? (no-fill-nested-frames? %)))
                       (filter #(or (empty? focus) (cpf/is-in-focus? objects focus %)))
                       (first)
                       (get objects)))]
-
-
            (reset! hover hover-shape)
            (reset! measure-hover measure-hover-shape)
            (reset! hover-ids ids)))
diff --git a/frontend/src/app/util/time.cljs b/frontend/src/app/util/time.cljs
index bb793064c..4a91fbdfc 100644
--- a/frontend/src/app/util/time.cljs
+++ b/frontend/src/app/util/time.cljs
@@ -6,22 +6,7 @@
 
 (ns app.util.time
   (:require
-   ["date-fns/format" :default dateFnsFormat]
-   ["date-fns/formatDistanceToNowStrict" :default dateFnsFormatDistanceToNowStrict]
-   ["date-fns/locale/ar-SA" :default dateFnsLocalesAr]
-   ["date-fns/locale/ca" :default dateFnsLocalesCa]
-   ["date-fns/locale/de" :default dateFnsLocalesDe]
-   ["date-fns/locale/el" :default dateFnsLocalesEl]
-   ["date-fns/locale/en-US" :default dateFnsLocalesEnUs]
-   ["date-fns/locale/es" :default dateFnsLocalesEs]
-   ["date-fns/locale/fa-IR" :default dateFnsLocalesFa]
-   ["date-fns/locale/fr" :default dateFnsLocalesFr]
-   ["date-fns/locale/he" :default dateFnsLocalesHe]
-   ["date-fns/locale/pt-BR" :default dateFnsLocalesPtBr]
-   ["date-fns/locale/ro" :default dateFnsLocalesRo]
-   ["date-fns/locale/ru" :default dateFnsLocalesRu]
-   ["date-fns/locale/tr" :default dateFnsLocalesTr]
-   ["date-fns/locale/zh-CN" :default dateFnsLocalesZhCn]
+   ["./time_impl.js" :as impl]
    [app.common.data.macros :as dm]
    [app.common.time :as common-time]
    [app.util.object :as obj]
@@ -207,22 +192,6 @@
       :json (.toJSON it)
       (.toFormat ^js it fmt))))
 
-(def ^:private locales
-  #js {:en dateFnsLocalesEnUs
-       :ar dateFnsLocalesAr
-       :he dateFnsLocalesHe
-       :fr dateFnsLocalesFr
-       :tr dateFnsLocalesTr
-       :es dateFnsLocalesEs
-       :ca dateFnsLocalesCa
-       :el dateFnsLocalesEl
-       :ru dateFnsLocalesRu
-       :ro dateFnsLocalesRo
-       :de dateFnsLocalesDe
-       :fa dateFnsLocalesFa
-       :pt_br dateFnsLocalesPtBr
-       :zh_cn dateFnsLocalesZhCn})
-
 (defn timeago
   ([v] (timeago v nil))
   ([v {:keys [locale] :or {locale "en"}}]
@@ -230,19 +199,18 @@
      (let [v (if (datetime? v) (format v :date) v)]
        (->> #js {:includeSeconds true
                  :addSuffix true
-                 :locale (obj/get locales locale)}
-            (dateFnsFormatDistanceToNowStrict v))))))
+                 :locale (obj/get impl/locales locale)}
+            (impl/format-distance-to-now v))))))
 
 (defn format-date-locale
   ([v] (format-date-locale v nil))
   ([v {:keys [locale] :or {locale "en"}}]
    (when v
      (let [v (if (datetime? v) (format v :date) v)
-           locale (obj/get locales locale)
+           locale (obj/get impl/locales locale)
            f (.date (.-formatLong ^js locale) v)]
        (->> #js {:locale locale}
-            (dateFnsFormat v f))))))
-
+            (impl/format v f))))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Measurement Helpers
diff --git a/frontend/src/app/util/time_impl.js b/frontend/src/app/util/time_impl.js
new file mode 100644
index 000000000..d6bb5f32b
--- /dev/null
+++ b/frontend/src/app/util/time_impl.js
@@ -0,0 +1,71 @@
+import fmt1 from "date-fns/format";
+import fmt2 from "date-fns/formatDistanceToNowStrict";
+
+import {arSA} from "date-fns/locale/ar-SA";
+import {ca} from "date-fns/locale/ca";
+import {de} from "date-fns/locale/de";
+import {el} from "date-fns/locale/el";
+import {enUS} from "date-fns/locale/en-US";
+import {es} from "date-fns/locale/es";
+import {faIR} from "date-fns/locale/fa-IR";
+import {fr} from "date-fns/locale/fr";
+import {he} from "date-fns/locale/he";
+import {pt} from "date-fns/locale/pt";
+import {ptBR} from "date-fns/locale/pt-BR";
+import {ro} from "date-fns/locale/ro";
+import {ru} from "date-fns/locale/ru";
+import {tr} from "date-fns/locale/tr";
+import {zhCN} from "date-fns/locale/zh-CN";
+import {nl} from "date-fns/locale/nl";
+import {eu} from "date-fns/locale/eu";
+import {gl} from "date-fns/locale/gl";
+import {hr} from "date-fns/locale/hr";
+import {it} from "date-fns/locale/it";
+import {nb} from "date-fns/locale/nb";
+import {pl} from "date-fns/locale/pl";
+import {id} from "date-fns/locale/id";
+import {uk} from "date-fns/locale/uk";
+import {cs} from "date-fns/locale/cs";
+import {lv} from "date-fns/locale/lv";
+import {ko} from "date-fns/locale/ko";
+import {ja} from "date-fns/locale/ja";
+
+export const locales = {
+  "ar": arSA,
+  "ca": ca,
+  "de": de,
+  "el": el,
+  "en": enUS,
+  "en_us": enUS,
+  "es": es,
+  "es_es": es,
+  "fa": faIR,
+  "fa_ir": faIR,
+  "fr": fr,
+  "he": he,
+  "pt": pt,
+  "pt_pt": pt,
+  "pt_br": ptBR,
+  "ro": ro,
+  "ru": ru,
+  "tr": tr,
+  "zh_cn": zhCN,
+  "nl": nl,
+  "eu": eu,
+  "gl": gl,
+  "hr": hr,
+  "it": it,
+  "nb": nb,
+  "nb_no": nb,
+  "pl": pl,
+  "id": id,
+  "uk": uk,
+  "cs": cs,
+  "lv": lv,
+  "ko": ko,
+  "ja": ja,
+  "ja_jp": ja,
+};
+
+export const format = fmt1.format;
+export const format_distance_to_now = fmt2.formatDistanceToNowStrict;
diff --git a/frontend/src/app/util/timers.cljs b/frontend/src/app/util/timers.cljs
index f3e4bd436..6df8e2c3a 100644
--- a/frontend/src/app/util/timers.cljs
+++ b/frontend/src/app/util/timers.cljs
@@ -43,7 +43,7 @@
 (if (and (exists? js/window)
          (.-requestIdleCallback js/window))
   (do
-    (def ^:private request-idle-callback #(js/requestIdleCallback %))
+    (def ^:private request-idle-callback #(js/requestIdleCallback % #js {:timeout 30000})) ;; 30s timeout
     (def ^:private cancel-idle-callback #(js/cancelIdleCallback %)))
   (do
     (def ^:private request-idle-callback #(js/setTimeout % 250))
diff --git a/frontend/src/app/worker/snaps.cljs b/frontend/src/app/worker/snaps.cljs
index c9dccd96b..ceecc5b89 100644
--- a/frontend/src/app/worker/snaps.cljs
+++ b/frontend/src/app/worker/snaps.cljs
@@ -28,7 +28,8 @@
   [{:keys [page-id frame-id axis ranges bounds] :as message}]
   (let [match-bounds?
         (fn [[_ data]]
-          (some #(grc/contains-point? bounds %) (map :pt data)))]
+          (some #(or (= :guide (:type %))
+                     (grc/contains-point? bounds (:pt %))) data))]
     (->> (into []
                (comp (mapcat #(sd/query @state page-id frame-id axis %))
                      (distinct))
diff --git a/frontend/translations/cs.po b/frontend/translations/cs.po
index 8109be00d..70ca13f47 100644
--- a/frontend/translations/cs.po
+++ b/frontend/translations/cs.po
@@ -4872,20 +4872,6 @@ msgstr[2] ""
 "Aktiva, která již byla v těchto souborech použita, tam zůstanou (nebude "
 "porušen žádný návrh)."
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "Není aktivován v žádném souboru."
-msgstr[1] "Nejsou aktivovány v žádném souboru."
-msgstr[2] "Nejsou aktivovány v žádném souboru."
-
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "Tato knihovna je aktivována zde:"
-msgstr[1] "Tyto knihovny jsou aktivovány zde:"
-msgstr[2] "Tyto knihovny jsou aktivovány zde:"
-
 #: src/app/main/ui/auth/register.cljs, src/app/main/ui/dashboard/team_form.cljs, src/app/main/ui/onboarding/team_choice.cljs, src/app/main/ui/settings/access_tokens.cljs, src/app/main/ui/settings/feedback.cljs, src/app/main/ui/settings/profile.cljs, src/app/main/ui/workspace/sidebar/assets.cljs
 msgid "auth.name.too-long"
 msgstr "Název musí obsahovat maximálně 250 znaků."
diff --git a/frontend/translations/de.po b/frontend/translations/de.po
index 8d6398809..f3f0c84f4 100644
--- a/frontend/translations/de.po
+++ b/frontend/translations/de.po
@@ -2122,18 +2122,6 @@ msgid_plural "modals.unpublish-shared-confirm.accept"
 msgstr[0] "Veröffentlichung aufheben"
 msgstr[1] "Veröffentlichung aufheben"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "Es ist in keiner Datei aktiviert."
-msgstr[1] "Sie sind in keiner Datei aktiviert."
-
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "Diese Bibliothek ist hier aktiviert:"
-msgstr[1] "Diese Bibliotheken sind hier aktiviert:"
-
 #: src/app/main/ui/workspace/header.cljs,
 #: src/app/main/ui/dashboard/file_menu.cljs
 msgid "modals.unpublish-shared-confirm.message"
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index a9080cf39..6f64af25e 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -2103,17 +2103,10 @@ msgid_plural "modals.unpublish-shared-confirm.accept"
 msgstr[0] "Unpublish"
 msgstr[1] "Unpublish"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "It isn't activated in any file."
-msgstr[1] "They aren't activated in any file."
-
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "This library is activated here:"
-msgstr[1] "This libraries are activated here:"
+msgid "modals.move-shared-confirm.accept"
+msgid_plural "modals.move-shared-confirm.accept"
+msgstr[0] "Move"
+msgstr[1] "Move"
 
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "modals.unpublish-shared-confirm.message"
@@ -2121,12 +2114,22 @@ msgid_plural "modals.unpublish-shared-confirm.message"
 msgstr[0] "Are you sure you want to unpublish this library?"
 msgstr[1] "Are you sure you want to unpublish these libraries?"
 
+msgid "modals.move-shared-confirm.message"
+msgid_plural "modals.move-shared-confirm.message"
+msgstr[0] "Are you sure you want to move this library?"
+msgstr[1] "Are you sure you want to move these libraries?"
+
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "modals.unpublish-shared-confirm.title"
 msgid_plural "modals.unpublish-shared-confirm.title"
 msgstr[0] "Unpublish library"
 msgstr[1] "Unpublish libraries"
 
+msgid "modals.move-shared-confirm.title"
+msgid_plural "modals.move-shared-confirm.title"
+msgstr[0] "Move library"
+msgstr[1] "Move libraries"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
 msgid "modals.update-remote-component-in-bulk.hint"
 msgstr ""
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 059f3c157..4a8dc0eb9 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -2138,16 +2138,10 @@ msgid_plural "modals.unpublish-shared-confirm.accept"
 msgstr[0] "Despublicar"
 msgstr[1] "Despublicar"
 
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "No está activa en ningún fichero."
-msgstr[1] "No están activas en ningún fichero."
-
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "Está activa aquí:"
-msgstr[1] "Están activas aquí:"
+msgid "modals.move-shared-confirm.accept"
+msgid_plural "modals.move-shared-confirm.accept"
+msgstr[0] "Mover"
+msgstr[1] "Mover"
 
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "modals.unpublish-shared-confirm.message"
@@ -2155,12 +2149,22 @@ msgid_plural "modals.unpublish-shared-confirm.message"
 msgstr[0] "¿Seguro que quieres despublicar esta biblioteca?"
 msgstr[1] "¿Seguro que quieres despublicar estas bibliotecas?"
 
+msgid "modals.move-shared-confirm.message"
+msgid_plural "modals.move-shared-confirm.message"
+msgstr[0] "¿Seguro que quieres mover esta biblioteca?"
+msgstr[1] "¿Seguro que quieres mover estas bibliotecas?"
+
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "modals.unpublish-shared-confirm.title"
 msgid_plural "modals.unpublish-shared-confirm.title"
 msgstr[0] "Despublicar biblioteca"
 msgstr[1] "Despublicar bibliotecas"
 
+msgid "modals.move-shared-confirm.title"
+msgid_plural "modals.move-shared-confirm.title"
+msgstr[0] "Mover biblioteca"
+msgstr[1] "Mover bibliotecas"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs,
 #: src/app/main/ui/workspace/context_menu.cljs
 msgid "modals.update-remote-component-in-bulk.hint"
diff --git a/frontend/translations/fr.po b/frontend/translations/fr.po
index fa4652678..668e10787 100644
--- a/frontend/translations/fr.po
+++ b/frontend/translations/fr.po
@@ -2127,18 +2127,6 @@ msgid_plural "modals.unpublish-shared-confirm.accept"
 msgstr[0] "Dépublier"
 msgstr[1] "Dépublier"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "Activée dans aucun fichier."
-msgstr[1] "Activées dans aucun fichier."
-
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "Est activée ici :"
-msgstr[1] "Sont activées ici :"
-
 #: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
 msgid "modals.unpublish-shared-confirm.message"
 msgid_plural "modals.unpublish-shared-confirm.message"
diff --git a/frontend/translations/ha.po b/frontend/translations/ha.po
index 8824297ec..cee8f273a 100644
--- a/frontend/translations/ha.po
+++ b/frontend/translations/ha.po
@@ -2157,12 +2157,6 @@ msgstr ""
 "wurin da za ka san yadda za ka hada-hannu da fassara, neman fasali, manyan "
 "gudunmawa, magance matsala…"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "an buxe wannan taskar a nan:"
-msgstr[1] "an buxe taskokin nan a nan:"
-
 #: src/app/main/ui/workspace/sidebar/align.cljs
 msgid "workspace.align.hright"
 msgstr "Daidaita dama (%s)"
@@ -3309,12 +3303,6 @@ msgstr "Yi da kanka"
 msgid "labels.save"
 msgstr "ajiye"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "ba zai yi aiki a kowane kundi ba."
-msgstr[1] "ba zai yi aiki a kowane kundi ba."
-
 msgid "dashboard.import.progress.process-media"
 msgstr "kammala aiki"
 
diff --git a/frontend/translations/he.po b/frontend/translations/he.po
index 8c69757fc..696375fd1 100644
--- a/frontend/translations/he.po
+++ b/frontend/translations/he.po
@@ -4992,14 +4992,6 @@ msgstr "… תרשימי מתאר, סיפורי ותהליכי משתמשים, 
 msgid "workspace.options.stroke-cap.diamond-marker-short"
 msgstr "יהלום"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "הספרייה הזאת מופעלת כאן:"
-msgstr[1] "הספריות האלו מופעלות כאן:"
-msgstr[2] "הספריות האלו מופעלות כאן:"
-msgstr[3] "הספריות האלו מופעלות כאן:"
-
 #: src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs,
 msgid "settings.detach"
 msgstr "ניתוק"
@@ -5008,14 +5000,6 @@ msgstr "ניתוק"
 msgid "workspace.options.stroke-cap.triangle-arrow-short"
 msgstr "משולש"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "אינו מופעל באף קובץ."
-msgstr[1] "אינם מופעלים באף קובץ."
-msgstr[2] "אינם מופעלים באף קובץ."
-msgstr[3] "אינם מופעלים באף קובץ."
-
 msgid "workspace.shape.menu.create-annotation"
 msgstr "יצירת הסבר"
 
diff --git a/frontend/translations/id.po b/frontend/translations/id.po
index 8ace83fdb..90c24a37b 100644
--- a/frontend/translations/id.po
+++ b/frontend/translations/id.po
@@ -2098,16 +2098,6 @@ msgid "modals.unpublish-shared-confirm.accept"
 msgid_plural "modals.unpublish-shared-confirm.accept"
 msgstr[0] "Batalkan penerbitan"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "Tidak diaktifkan dalam berkas mana pun."
-
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "Pustaka ini diaktifkan di sini:"
-
 #: src/app/main/ui/workspace/header.cljs,
 #: src/app/main/ui/dashboard/file_menu.cljs
 msgid "modals.unpublish-shared-confirm.message"
diff --git a/frontend/translations/lv.po b/frontend/translations/lv.po
index 12fdf513f..dbf06be8f 100644
--- a/frontend/translations/lv.po
+++ b/frontend/translations/lv.po
@@ -2112,20 +2112,6 @@ msgstr[0] "Nav atlases"
 msgstr[1] "Atcelt publicēšanu"
 msgstr[2] "Atcelt publicēšanu"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "Nav aktivēti nevienā datnē."
-msgstr[1] "Tas nav aktivēts nevienā datnē."
-msgstr[2] "Tie nav aktivēti nevienā datnē."
-
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "Bibliotēkas ir aktivētas šeit:"
-msgstr[1] "Šī bibliotēka ir aktivēta šeit:"
-msgstr[2] "Šīs bibliotēkas ir aktivētas šeit:"
-
 #: src/app/main/ui/workspace/header.cljs,
 #: src/app/main/ui/dashboard/file_menu.cljs
 msgid "modals.unpublish-shared-confirm.message"
diff --git a/frontend/translations/nl.po b/frontend/translations/nl.po
index edd30e96c..854558973 100644
--- a/frontend/translations/nl.po
+++ b/frontend/translations/nl.po
@@ -2143,20 +2143,6 @@ msgid_plural "modals.unpublish-shared-confirm.accept"
 msgstr[0] "Publicatie ongedaan maken"
 msgstr[1] "Publicaties ongedaan maken"
 
-#: src/app/main/ui/workspace/header.cljs,
-#: src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "Het is in geen enkel bestand geactiveerd."
-msgstr[1] "Ze zijn in geen enkel bestand geactiveerd."
-
-#: src/app/main/ui/workspace/header.cljs,
-#: src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "Deze bibliotheek wordt hier geactiveerd:"
-msgstr[1] "Deze bibliotheken worden hier geactiveerd:"
-
 #: src/app/main/ui/workspace/header.cljs,
 #: src/app/main/ui/dashboard/file_menu.cljs
 msgid "modals.unpublish-shared-confirm.message"
diff --git a/frontend/translations/pt_PT.po b/frontend/translations/pt_PT.po
index 86bd41160..d228aec95 100644
--- a/frontend/translations/pt_PT.po
+++ b/frontend/translations/pt_PT.po
@@ -2090,18 +2090,6 @@ msgstr "Remover \"%s\" como Biblioteca Partilhada"
 msgid "modals.small-nudge"
 msgstr "Pequeno deslocamento"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "Não está ativa em nenhum ficheiro."
-msgstr[1] "Não estão ativas em nenhum ficheiro."
-
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "Esta biblioteca está ativa aqui:"
-msgstr[1] "Estas bibliotecas estão ativas aqui:"
-
 #: src/app/main/ui/workspace/header.cljs,
 #: src/app/main/ui/dashboard/file_menu.cljs
 msgid "modals.unpublish-shared-confirm.message"
diff --git a/frontend/translations/ro.po b/frontend/translations/ro.po
index 571f34128..076414944 100644
--- a/frontend/translations/ro.po
+++ b/frontend/translations/ro.po
@@ -2127,20 +2127,6 @@ msgstr[0] "Anulați publicarea"
 msgstr[1] "Anulați publicarea"
 msgstr[2] "Anulați publicarea"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "Nu este activat în niciun fișier."
-msgstr[1] "Nu sunt activate în niciun fișier."
-msgstr[2] "Nu sunt activate în niciun fișier."
-
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "Aceasta librărie este activată aici:"
-msgstr[1] "Aceste librării sunt activate aici:"
-msgstr[2] "Aceste librării sunt activate aici:"
-
 #: src/app/main/ui/workspace/header.cljs,
 #: src/app/main/ui/dashboard/file_menu.cljs
 msgid "modals.unpublish-shared-confirm.message"
diff --git a/frontend/translations/tr.po b/frontend/translations/tr.po
index 099467000..ed4eb7783 100644
--- a/frontend/translations/tr.po
+++ b/frontend/translations/tr.po
@@ -4764,12 +4764,6 @@ msgstr "Ortala"
 msgid "workspace.options.stroke-cap.diamond-marker-short"
 msgstr "Elmas"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.scd-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.scd-message"
-msgstr[0] "Bu kütüphane burada etkinleştirildi:"
-msgstr[1] "Bu kütüphaneler burada etkinleştirildi:"
-
 #: src/app/main/ui/onboarding/questions.cljs
 msgid "questions.questions-how-are-you-planning-to-use-penpot"
 msgstr "Penpot'u nasıl kullanmayı planlıyorsunuz?"
@@ -4859,12 +4853,6 @@ msgstr "Orantılı ölçeklendirmeyi etkinleştir"
 msgid "workspace.updates.more-info"
 msgstr "Daha fazla bilgi"
 
-#: src/app/main/ui/workspace/header.cljs, src/app/main/ui/dashboard/file_menu.cljs
-msgid "modals.unpublish-shared-confirm.activated.no-files-message"
-msgid_plural "modals.unpublish-shared-confirm.activated.no-files-message"
-msgstr[0] "Hiçbir dosyada etkinleştirilmemiş."
-msgstr[1] "Hiçbir dosyada etkinleştirilmemişler."
-
 #: src/app/main/ui/settings/team-form.cljs, src/app/main/ui/auth/register.cljs, src/app/main/ui/dashboard/team_form.cljs, src/app/main/ui/onboarding/team_choice.cljs, src/app/main/ui/settings/access_tokens.cljs, src/app/main/ui/settings/feedback.cljs, src/app/main/ui/settings/profile.cljs, src/app/main/ui/workspace/sidebar/assets.cljs
 msgid "auth.name.not-all-space"
 msgstr "İsim boşluk dışında bir karakter içermelidir."
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 481011b66..00770f86d 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2938,61 +2938,61 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-actions@npm:7.6.7"
+"@storybook/addon-actions@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-actions@npm:7.6.17"
   dependencies:
-    "@storybook/core-events": "npm:7.6.7"
+    "@storybook/core-events": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
     "@types/uuid": "npm:^9.0.1"
     dequal: "npm:^2.0.2"
     polished: "npm:^4.2.2"
     uuid: "npm:^9.0.0"
-  checksum: 64d9f460e73b3665b9e1cbde6680762b7d34b2fe0ba5415ba6c0f5492149a3a05abd95f39ef4052c509f844264b646618f73995ec219f894447e8bf0f91dc3ae
+  checksum: 91d20a7c35fff6a0b2aa33f2c1171d457c68fb9d955da12629d6f75d931d5aa3756837e413ab7bb928c4cc4b48dcc5cdd63510e6028e7bd8fc8c82d93be967d0
   languageName: node
   linkType: hard
 
-"@storybook/addon-backgrounds@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-backgrounds@npm:7.6.7"
+"@storybook/addon-backgrounds@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-backgrounds@npm:7.6.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     memoizerific: "npm:^1.11.3"
     ts-dedent: "npm:^2.0.0"
-  checksum: aac3a8c08049c8cf0a6f9004c861b818dae40ef503b0f2cf0d38215f4b1d71c078bda26c0d7059b7cad9f93770c1f0c122e27a53911138ba0ab56b97ad94bd73
+  checksum: 43518d762efa8dd140d029541e8e2bb748173a8428e3de67287ca132525e33e443282a2b06f3b381250d9557ada9ea3a07039aa69cf3de6b04aec02027fb9943
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-controls@npm:7.6.7"
+"@storybook/addon-controls@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-controls@npm:7.6.17"
   dependencies:
-    "@storybook/blocks": "npm:7.6.7"
+    "@storybook/blocks": "npm:7.6.17"
     lodash: "npm:^4.17.21"
     ts-dedent: "npm:^2.0.0"
-  checksum: 234883c6db9f7a6afe43bf516d4b6527353096ed8ab88bc162025254730dc5d0a19ddc58393a23f1bbfe8d6f1e9b3b154f71e0df1465924e17c90a128deb1303
+  checksum: da66466b801064a916e059ce127efb2ab074a5c80fb65b568ac361d09fe55e0e993cd5400d6b0361bdfd783725e59449bbd30f87643964fa0db8e02a5f9550fd
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-docs@npm:7.6.7"
+"@storybook/addon-docs@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-docs@npm:7.6.17"
   dependencies:
     "@jest/transform": "npm:^29.3.1"
     "@mdx-js/react": "npm:^2.1.5"
-    "@storybook/blocks": "npm:7.6.7"
-    "@storybook/client-logger": "npm:7.6.7"
-    "@storybook/components": "npm:7.6.7"
-    "@storybook/csf-plugin": "npm:7.6.7"
-    "@storybook/csf-tools": "npm:7.6.7"
+    "@storybook/blocks": "npm:7.6.17"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/components": "npm:7.6.17"
+    "@storybook/csf-plugin": "npm:7.6.17"
+    "@storybook/csf-tools": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/mdx2-csf": "npm:^1.0.0"
-    "@storybook/node-logger": "npm:7.6.7"
-    "@storybook/postinstall": "npm:7.6.7"
-    "@storybook/preview-api": "npm:7.6.7"
-    "@storybook/react-dom-shim": "npm:7.6.7"
-    "@storybook/theming": "npm:7.6.7"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/postinstall": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/react-dom-shim": "npm:7.6.17"
+    "@storybook/theming": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     fs-extra: "npm:^11.1.0"
     remark-external-links: "npm:^8.0.0"
     remark-slug: "npm:^6.0.0"
@@ -3000,60 +3000,60 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 06768cdf02d61af0c619676514b035775931bad4e7ed2bd086c85903391ffd31fccc6f6a74614893ead656e1206a46add5e35d6e4c26655693dd6ee5e68ed917
+  checksum: b43666832f1657f4dfac976ac8b8071995d65860a29f1ac66b80adb69a0d02f0d1d70684d94ddb76f0957f003b94b4252599e19f1e6a4342686598bbb40280ae
   languageName: node
   linkType: hard
 
-"@storybook/addon-essentials@npm:^7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-essentials@npm:7.6.7"
+"@storybook/addon-essentials@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-essentials@npm:7.6.17"
   dependencies:
-    "@storybook/addon-actions": "npm:7.6.7"
-    "@storybook/addon-backgrounds": "npm:7.6.7"
-    "@storybook/addon-controls": "npm:7.6.7"
-    "@storybook/addon-docs": "npm:7.6.7"
-    "@storybook/addon-highlight": "npm:7.6.7"
-    "@storybook/addon-measure": "npm:7.6.7"
-    "@storybook/addon-outline": "npm:7.6.7"
-    "@storybook/addon-toolbars": "npm:7.6.7"
-    "@storybook/addon-viewport": "npm:7.6.7"
-    "@storybook/core-common": "npm:7.6.7"
-    "@storybook/manager-api": "npm:7.6.7"
-    "@storybook/node-logger": "npm:7.6.7"
-    "@storybook/preview-api": "npm:7.6.7"
+    "@storybook/addon-actions": "npm:7.6.17"
+    "@storybook/addon-backgrounds": "npm:7.6.17"
+    "@storybook/addon-controls": "npm:7.6.17"
+    "@storybook/addon-docs": "npm:7.6.17"
+    "@storybook/addon-highlight": "npm:7.6.17"
+    "@storybook/addon-measure": "npm:7.6.17"
+    "@storybook/addon-outline": "npm:7.6.17"
+    "@storybook/addon-toolbars": "npm:7.6.17"
+    "@storybook/addon-viewport": "npm:7.6.17"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/manager-api": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: f6e729db162cc448e3f2bdc1b0e926a9556145237b09260ba1b33f137392978e0132a391a0e4933d94077afe75f05de02e873f90a22bd0a73f1049031d7292f7
+  checksum: 3208790b219e88fadc634aa00134eb3f0da9d2c05cd84e733d07e201177c58bccb85879ee4c26441a35b1e7fd318111dd668fdd8b3e57b37da512a658d4f50e9
   languageName: node
   linkType: hard
 
-"@storybook/addon-highlight@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-highlight@npm:7.6.7"
+"@storybook/addon-highlight@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-highlight@npm:7.6.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-  checksum: efe8b7ff074db5b67705af9a033069e26b730425f112b5c748086f0a526352ee721c087a41324a90049b9800c2b9c47f9cab85b33ecb7aae58b3eb7d54e7e1b6
+  checksum: 5f16a648a38257bdd66f592b519cc6b4ecf36c50d0cb01696f1c42c6c9fa2b44b7056b64d611579f2ec4764787b6bd34ea6b9ebddb01b0e562b3eb8100b1cf96
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:^7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-interactions@npm:7.6.7"
+"@storybook/addon-interactions@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-interactions@npm:7.6.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/types": "npm:7.6.17"
     jest-mock: "npm:^27.0.6"
     polished: "npm:^4.2.2"
     ts-dedent: "npm:^2.2.0"
-  checksum: 037714fd46df09a22111ceeff8062aa4f1fc6af358f6f7e0c9dc7dc04595bdbb2c238b3b2b1b651e157408fc024e7237c2580f6ce4fd13dda8e6caa7e117c23f
+  checksum: f0910e8db378f502270747508c42174bdb75671620d24868264638a2693c60b35f088e4c06cb2239a69f4aa176f8dc8cf9e215f872d5aeefec933643225b66b8
   languageName: node
   linkType: hard
 
-"@storybook/addon-links@npm:^7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-links@npm:7.6.7"
+"@storybook/addon-links@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-links@npm:7.6.17"
   dependencies:
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
@@ -3063,74 +3063,74 @@ __metadata:
   peerDependenciesMeta:
     react:
       optional: true
-  checksum: 8c61d0dd7dd7072074f59c57a478f328bc0039bf0102134efea261bd1158ab19465605fac4eae42a9360b3c1f93143e2ee0f68e8001ad7de27f56e066d1cb17a
+  checksum: c95aa5629a948f07a260430fecb8bed283a1bcfa97d8925b5edf3d4eab46155c85dec1814a00db4206a6de8323803b3d8bf74665c97caf34bb229a403f5b03d7
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-measure@npm:7.6.7"
+"@storybook/addon-measure@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-measure@npm:7.6.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     tiny-invariant: "npm:^1.3.1"
-  checksum: f6670147430d519d9d5340c041e4fe491538fd36b15079bbe273e9691be58f1b89b89983803f98b79deca2076039ec02d94712af3edf19745b777b7397f10be9
+  checksum: 18c26fd08c6b369ae74cbea4447ae0791efb6968875223b12e84021cf1c7a48496d56c35c6b1de03603081b650c3e4b54530b8704b68467bc667cbf550623ef9
   languageName: node
   linkType: hard
 
-"@storybook/addon-onboarding@npm:^1.0.10":
-  version: 1.0.10
-  resolution: "@storybook/addon-onboarding@npm:1.0.10"
+"@storybook/addon-onboarding@npm:^1.0.11":
+  version: 1.0.11
+  resolution: "@storybook/addon-onboarding@npm:1.0.11"
   dependencies:
     "@storybook/telemetry": "npm:^7.1.0"
     react-confetti: "npm:^6.1.0"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 4ee04976e9adcf73d9b3645b766e39ba19e34144c05348b63390719cdf77f79fe9e44da45af2cd61849940427c1c553563165d57511e54e1bf26fb3817ec53dc
+  checksum: ca3de3eb85fb6d04309dbc07c26956777c064bb5032fb99aca3e43361b0816ac4326183aac99204d795fdc2010aa69c4978353c70a42926e9da0819343fcd2a0
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-outline@npm:7.6.7"
+"@storybook/addon-outline@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-outline@npm:7.6.17"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: aae1ccdf1b946fa2eac943211d6110242de0e2a93a6b9c37300d81697d4a246f97b82f7d382bdf4e7ececf326167df07d1d36ab05b4bac59b4bf3e27ab9b32d3
+  checksum: 840a554504c457e3dee273266ba90a7f36b7488a72644d046f0233c305d7fe3a0773848d104a3dc7d6efafc3e1b41a3fc4d6cdd7a37b3a3fe75a03fcde206efb
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-toolbars@npm:7.6.7"
-  checksum: bc5725ca9c9285311d31c5e867b5c18f7baeafc903f32034bb452f2140654face6c4039abbfb9d00f47f5e3fea8627baa2ba2b608557c4b277f326102bb3b6fe
+"@storybook/addon-toolbars@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-toolbars@npm:7.6.17"
+  checksum: af4453848c29ab8edb0cf6ca42ff14750841eaf3b523920620e42c27c0f07574a83c0dfe75f6a0de1846178aafb6833d59cef7faa7268777c24ed490da647814
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/addon-viewport@npm:7.6.7"
+"@storybook/addon-viewport@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/addon-viewport@npm:7.6.17"
   dependencies:
     memoizerific: "npm:^1.11.3"
-  checksum: 7b62b06110df6dd407a66585a8fc79857772ab766253bfcf764958d79e7fec4ac582fd4dada561d00cadd5471cb3ff36db260ed44c57282d2079037c1d021f80
+  checksum: d888954f45ab358189cf0172e1c9b8a1bd2b68aa99d5d6518abe7fc355bbfeb91cc1c21c64e461994f5987652d05944aaa270366e22475eaeccadc701419b0d7
   languageName: node
   linkType: hard
 
-"@storybook/blocks@npm:7.6.7, @storybook/blocks@npm:^7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/blocks@npm:7.6.7"
+"@storybook/blocks@npm:7.6.17, @storybook/blocks@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/blocks@npm:7.6.17"
   dependencies:
-    "@storybook/channels": "npm:7.6.7"
-    "@storybook/client-logger": "npm:7.6.7"
-    "@storybook/components": "npm:7.6.7"
-    "@storybook/core-events": "npm:7.6.7"
+    "@storybook/channels": "npm:7.6.17"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/components": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
     "@storybook/csf": "npm:^0.1.2"
-    "@storybook/docs-tools": "npm:7.6.7"
+    "@storybook/docs-tools": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "npm:7.6.7"
-    "@storybook/preview-api": "npm:7.6.7"
-    "@storybook/theming": "npm:7.6.7"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/manager-api": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/theming": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/lodash": "npm:^4.14.167"
     color-convert: "npm:^2.0.1"
     dequal: "npm:^2.0.2"
@@ -3146,18 +3146,18 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 69230851b63f466a46d14d352378d9ae73c57c64604771397b6f8d41cb518fbc0106510563a1a625fa23f0fc7dd62322dba5b6183d711ee2fef702db761694f7
+  checksum: f38233c935679345b4893d3d75b38ca8e74f3749b1f42a2356b61754bf1886cde8565546cdf53217335c8318506c56954aee7cc23c627b06f2d8c3b842d5d12b
   languageName: node
   linkType: hard
 
-"@storybook/builder-manager@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/builder-manager@npm:7.6.7"
+"@storybook/builder-manager@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/builder-manager@npm:7.6.17"
   dependencies:
     "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
-    "@storybook/core-common": "npm:7.6.7"
-    "@storybook/manager": "npm:7.6.7"
-    "@storybook/node-logger": "npm:7.6.7"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/manager": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
     "@types/ejs": "npm:^3.1.1"
     "@types/find-cache-dir": "npm:^3.2.1"
     "@yarnpkg/esbuild-plugin-pnp": "npm:^3.0.0-rc.10"
@@ -3170,22 +3170,22 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     process: "npm:^0.11.10"
     util: "npm:^0.12.4"
-  checksum: 07df0b1a9f8665afab0919110e8895ba9dec3fbc4ed1071d51bfacc0bac57f7b07864205fc031beb1a6c3f716c35810170d4b35ee7ce300f8b3c54478c20fe96
+  checksum: 1b2ca77f7f3bf3c72890e949cfadc45d633fee7315ebcabfc1d6e23cd259db93114cbd9b9197597057f90c5fd60b3e72b0782a284a4f80c6efdd15f118b2c594
   languageName: node
   linkType: hard
 
-"@storybook/builder-vite@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/builder-vite@npm:7.6.7"
+"@storybook/builder-vite@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/builder-vite@npm:7.6.17"
   dependencies:
-    "@storybook/channels": "npm:7.6.7"
-    "@storybook/client-logger": "npm:7.6.7"
-    "@storybook/core-common": "npm:7.6.7"
-    "@storybook/csf-plugin": "npm:7.6.7"
-    "@storybook/node-logger": "npm:7.6.7"
-    "@storybook/preview": "npm:7.6.7"
-    "@storybook/preview-api": "npm:7.6.7"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/channels": "npm:7.6.17"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/csf-plugin": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/preview": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/find-cache-dir": "npm:^3.2.1"
     browser-assert: "npm:^1.2.1"
     es-module-lexer: "npm:^0.9.3"
@@ -3206,7 +3206,21 @@ __metadata:
       optional: true
     vite-plugin-glimmerx:
       optional: true
-  checksum: 0150bc6fbd3ab65425b582ba7ce5701e92bc825a0507c82fc5cd26e62d1c43f9ac156335ca6564c0b1ce7a3789677b34757564476531fbaa92f0914c1a8aa79c
+  checksum: eaa70e474240efd44adfdc8e7f6f57c3c1daddc966c221da981a0191fad322d78b279e954e03f20369eaa8223d11267f0a101ed3e9c16a3f7096f76fafc7388e
+  languageName: node
+  linkType: hard
+
+"@storybook/channels@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/channels@npm:7.6.17"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
+    "@storybook/global": "npm:^5.0.0"
+    qs: "npm:^6.10.0"
+    telejson: "npm:^7.2.0"
+    tiny-invariant: "npm:^1.3.1"
+  checksum: 7109b67a60c656d22deb1b9b44bf0e26b565044de6ccf63589b0e52188931e2eaa11b78f7a0e1b59396f654537f79ac4264c715417d467aca602a6e80495f49e
   languageName: node
   linkType: hard
 
@@ -3224,36 +3238,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/channels@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/channels@npm:7.6.7"
-  dependencies:
-    "@storybook/client-logger": "npm:7.6.7"
-    "@storybook/core-events": "npm:7.6.7"
-    "@storybook/global": "npm:^5.0.0"
-    qs: "npm:^6.10.0"
-    telejson: "npm:^7.2.0"
-    tiny-invariant: "npm:^1.3.1"
-  checksum: 8964d36b74dcdfa0f12861b34b985c0425178130baf612ee0ce9ff469c33e582ed4eec31d4063aa938f0ea2b55ba6c97d9c929835040008f7876ff65297d13be
-  languageName: node
-  linkType: hard
-
-"@storybook/cli@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/cli@npm:7.6.7"
+"@storybook/cli@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/cli@npm:7.6.17"
   dependencies:
     "@babel/core": "npm:^7.23.2"
     "@babel/preset-env": "npm:^7.23.2"
     "@babel/types": "npm:^7.23.0"
     "@ndelangen/get-tarball": "npm:^3.0.7"
-    "@storybook/codemod": "npm:7.6.7"
-    "@storybook/core-common": "npm:7.6.7"
-    "@storybook/core-events": "npm:7.6.7"
-    "@storybook/core-server": "npm:7.6.7"
-    "@storybook/csf-tools": "npm:7.6.7"
-    "@storybook/node-logger": "npm:7.6.7"
-    "@storybook/telemetry": "npm:7.6.7"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/codemod": "npm:7.6.17"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
+    "@storybook/core-server": "npm:7.6.17"
+    "@storybook/csf-tools": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/telemetry": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/semver": "npm:^7.3.4"
     "@yarnpkg/fslib": "npm:2.10.3"
     "@yarnpkg/libzip": "npm:2.3.0"
@@ -3278,7 +3278,6 @@ __metadata:
     puppeteer-core: "npm:^2.1.1"
     read-pkg-up: "npm:^7.0.1"
     semver: "npm:^7.3.7"
-    simple-update-notifier: "npm:^2.0.0"
     strip-json-comments: "npm:^3.0.1"
     tempy: "npm:^1.0.1"
     ts-dedent: "npm:^2.0.0"
@@ -3286,7 +3285,16 @@ __metadata:
   bin:
     getstorybook: ./bin/index.js
     sb: ./bin/index.js
-  checksum: 1f070c5f4d2d154e6d46473e429d4c03a20fd89e0c50f49c599a1889d25231e2e013c3bea7c9799e7240c29b43cc1bb452b2d2a5f98263295788ecd5db0069fa
+  checksum: 8d8d426a1eca5d58a4cafa8418a1c8a41736e21a89c66307d18cea98c583976d672ae0773ab53e4e38f110dad2db788bd5d8daef3970ae14834db205818713ef
+  languageName: node
+  linkType: hard
+
+"@storybook/client-logger@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/client-logger@npm:7.6.17"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+  checksum: 77ebd176e65171b10b94f65ce7f10ed8c78e162b54462f5b87604f568e747f1604b4eb62ff7a601bf02d7e72b32e373fb980dd9c688a655706e74c025ebb82f3
   languageName: node
   linkType: hard
 
@@ -3299,26 +3307,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/client-logger@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/client-logger@npm:7.6.7"
-  dependencies:
-    "@storybook/global": "npm:^5.0.0"
-  checksum: ba2c672086cdef7896a94f8858a5c7a8a71a429af0d1dd553d5e2090e8832644e9f7ef386e6136e5bf43c99db479754404bbf9a7859d1843198e143806e4d9c6
-  languageName: node
-  linkType: hard
-
-"@storybook/codemod@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/codemod@npm:7.6.7"
+"@storybook/codemod@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/codemod@npm:7.6.17"
   dependencies:
     "@babel/core": "npm:^7.23.2"
     "@babel/preset-env": "npm:^7.23.2"
     "@babel/types": "npm:^7.23.0"
     "@storybook/csf": "npm:^0.1.2"
-    "@storybook/csf-tools": "npm:7.6.7"
-    "@storybook/node-logger": "npm:7.6.7"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/csf-tools": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/cross-spawn": "npm:^6.0.2"
     cross-spawn: "npm:^7.0.3"
     globby: "npm:^11.0.2"
@@ -3326,38 +3325,69 @@ __metadata:
     lodash: "npm:^4.17.21"
     prettier: "npm:^2.8.0"
     recast: "npm:^0.23.1"
-  checksum: 4f37240c133bc2dc110ba67b5ca0a3081ec8fcdd8cbf23bd0b0f76193adf6119fae640c354c13ba6827026ac1293913fa7ae8823f17eaecbf17f41d2267decf0
+  checksum: b8428203dfa551ea34b34659e5231cdc03eeb0fba2c53f801794b732515b173131bbe3df14dff9a540c18d3dfdafa7f94d11dbf34bf4dbaf03a47dd7c80d09ae
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/components@npm:7.6.7"
+"@storybook/components@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/components@npm:7.6.17"
   dependencies:
     "@radix-ui/react-select": "npm:^1.2.2"
     "@radix-ui/react-toolbar": "npm:^1.0.4"
-    "@storybook/client-logger": "npm:7.6.7"
+    "@storybook/client-logger": "npm:7.6.17"
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/theming": "npm:7.6.7"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/theming": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     memoizerific: "npm:^1.11.3"
     use-resize-observer: "npm:^9.1.0"
     util-deprecate: "npm:^1.0.2"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 76fc642f2e588d82b226ff58fbbaeb8cb58a2171f5ab05484f32982c14dff5ba2226824d07be5dadeee030d66ece6a7139537f864ee90ca5edafc1db2cb40ccc
+  checksum: 199421d7668a3afcce9375c567443704778b4288bed16a39f02e5c1aaa9892b4ffba829b47d5a3fa8328521f6e0c26e5e7e7beed898cc0f8f835a99ec8f125a6
   languageName: node
   linkType: hard
 
-"@storybook/core-client@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/core-client@npm:7.6.7"
+"@storybook/core-client@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/core-client@npm:7.6.17"
   dependencies:
-    "@storybook/client-logger": "npm:7.6.7"
-    "@storybook/preview-api": "npm:7.6.7"
-  checksum: bdd3a4bc5ac4accceff08ad00a70b3599040025abb4a88319c1745d47b5849ec3d5352b6688b21c4897ed6c1590bc0616f5a3ba3f568f7be42c0c5a48bab92b4
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+  checksum: 3342367bce219d46ac0c5b494688ae86aeb5c4006d98749dec2e30518850bc76a8b255611e9151f043d5141d11deb781b972c8610e98565cab4112dc86b7c1d5
+  languageName: node
+  linkType: hard
+
+"@storybook/core-common@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/core-common@npm:7.6.17"
+  dependencies:
+    "@storybook/core-events": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
+    "@types/find-cache-dir": "npm:^3.2.1"
+    "@types/node": "npm:^18.0.0"
+    "@types/node-fetch": "npm:^2.6.4"
+    "@types/pretty-hrtime": "npm:^1.0.0"
+    chalk: "npm:^4.1.0"
+    esbuild: "npm:^0.18.0"
+    esbuild-register: "npm:^3.5.0"
+    file-system-cache: "npm:2.3.0"
+    find-cache-dir: "npm:^3.0.0"
+    find-up: "npm:^5.0.0"
+    fs-extra: "npm:^11.1.0"
+    glob: "npm:^10.0.0"
+    handlebars: "npm:^4.7.7"
+    lazy-universal-dotenv: "npm:^4.0.0"
+    node-fetch: "npm:^2.0.0"
+    picomatch: "npm:^2.3.0"
+    pkg-dir: "npm:^5.0.0"
+    pretty-hrtime: "npm:^1.0.3"
+    resolve-from: "npm:^5.0.0"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 5be46d8f2d97dcde4a45de688278baed78185b44895825fe2f9423b70410fa88214a9709f40e7656cebe218a2c57cfa9979228e9f2b522eb47cf5af825d1133d
   languageName: node
   linkType: hard
 
@@ -3392,34 +3422,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-common@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/core-common@npm:7.6.7"
+"@storybook/core-events@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/core-events@npm:7.6.17"
   dependencies:
-    "@storybook/core-events": "npm:7.6.7"
-    "@storybook/node-logger": "npm:7.6.7"
-    "@storybook/types": "npm:7.6.7"
-    "@types/find-cache-dir": "npm:^3.2.1"
-    "@types/node": "npm:^18.0.0"
-    "@types/node-fetch": "npm:^2.6.4"
-    "@types/pretty-hrtime": "npm:^1.0.0"
-    chalk: "npm:^4.1.0"
-    esbuild: "npm:^0.18.0"
-    esbuild-register: "npm:^3.5.0"
-    file-system-cache: "npm:2.3.0"
-    find-cache-dir: "npm:^3.0.0"
-    find-up: "npm:^5.0.0"
-    fs-extra: "npm:^11.1.0"
-    glob: "npm:^10.0.0"
-    handlebars: "npm:^4.7.7"
-    lazy-universal-dotenv: "npm:^4.0.0"
-    node-fetch: "npm:^2.0.0"
-    picomatch: "npm:^2.3.0"
-    pkg-dir: "npm:^5.0.0"
-    pretty-hrtime: "npm:^1.0.3"
-    resolve-from: "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 3e91bf0a6604a529be41ecf924fd2f564267f89052e30ac5d43dc6cef371b7d0605b9238aa3a7f4b913acf4a5da4283b349078edfdc18bb6e4658f5104fb7739
+  checksum: ab6410da3a456a61138b4a760a28b74bb9dc6f4c81de0d5ff7760b1853c6a437f8a0d05301c291f45503575d60c3be4805db4178f649eccd32c5ffd98a790250
   languageName: node
   linkType: hard
 
@@ -3432,34 +3440,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-events@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/core-events@npm:7.6.7"
-  dependencies:
-    ts-dedent: "npm:^2.0.0"
-  checksum: def57a404aa7d76691d1f6c9a990bc7ede45198d453a338f8735584706f7b05af09e2ab8a47e851e91bfdaf55be2a4fbe5810ef8d55caabf487c1b8b1e7e599e
-  languageName: node
-  linkType: hard
-
-"@storybook/core-server@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/core-server@npm:7.6.7"
+"@storybook/core-server@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/core-server@npm:7.6.17"
   dependencies:
     "@aw-web-design/x-default-browser": "npm:1.4.126"
     "@discoveryjs/json-ext": "npm:^0.5.3"
-    "@storybook/builder-manager": "npm:7.6.7"
-    "@storybook/channels": "npm:7.6.7"
-    "@storybook/core-common": "npm:7.6.7"
-    "@storybook/core-events": "npm:7.6.7"
+    "@storybook/builder-manager": "npm:7.6.17"
+    "@storybook/channels": "npm:7.6.17"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
     "@storybook/csf": "npm:^0.1.2"
-    "@storybook/csf-tools": "npm:7.6.7"
+    "@storybook/csf-tools": "npm:7.6.17"
     "@storybook/docs-mdx": "npm:^0.1.0"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager": "npm:7.6.7"
-    "@storybook/node-logger": "npm:7.6.7"
-    "@storybook/preview-api": "npm:7.6.7"
-    "@storybook/telemetry": "npm:7.6.7"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/manager": "npm:7.6.17"
+    "@storybook/node-logger": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/telemetry": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/detect-port": "npm:^1.3.0"
     "@types/node": "npm:^18.0.0"
     "@types/pretty-hrtime": "npm:^1.0.0"
@@ -3472,7 +3471,7 @@ __metadata:
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
     globby: "npm:^11.0.2"
-    ip: "npm:^2.0.0"
+    ip: "npm:^2.0.1"
     lodash: "npm:^4.17.21"
     open: "npm:^8.4.0"
     pretty-hrtime: "npm:^1.0.3"
@@ -3486,17 +3485,34 @@ __metadata:
     util-deprecate: "npm:^1.0.2"
     watchpack: "npm:^2.2.0"
     ws: "npm:^8.2.3"
-  checksum: 45fbac92bbc00fddc7e5052f8ca534ecf55f2972509809761509c88e1ded9e1cc5cd415c2f5bce2171d4effbfc21162ce60cc5c7d18a0a53be2a5891c122d84a
+  checksum: b56077bea18c22151adb72c96efb1717034314b08bba5cae12b1f8a0e4135773f5c1e334ad3523dfeb578078b2d41a6091e2b0a992a110ca1859fdd89b1a4702
   languageName: node
   linkType: hard
 
-"@storybook/csf-plugin@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/csf-plugin@npm:7.6.7"
+"@storybook/csf-plugin@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/csf-plugin@npm:7.6.17"
   dependencies:
-    "@storybook/csf-tools": "npm:7.6.7"
+    "@storybook/csf-tools": "npm:7.6.17"
     unplugin: "npm:^1.3.1"
-  checksum: 366e48c5247a33a4fa403c7689501c2960a98cd27877e08297bdafa7a707d1c32636f292dd74156f5df727b84a6a527ce49f6eff764dddc08dac60c0a194dc39
+  checksum: 720ecbd2e845f6d6d575b8fb5b05a085ddba1eb486318a9b7d6f2ea6646fe3e62d7c9589e18aab15ce0a715c653c9d24b2e0f38117e92845e636f0410a85f76d
+  languageName: node
+  linkType: hard
+
+"@storybook/csf-tools@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/csf-tools@npm:7.6.17"
+  dependencies:
+    "@babel/generator": "npm:^7.23.0"
+    "@babel/parser": "npm:^7.23.0"
+    "@babel/traverse": "npm:^7.23.2"
+    "@babel/types": "npm:^7.23.0"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/types": "npm:7.6.17"
+    fs-extra: "npm:^11.1.0"
+    recast: "npm:^0.23.1"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 827458c97de27127a026d6f4592ad8760f27b69dc1082251710b8067b0616bf2c6b9c13b12cbf12a8162a6528d92ca81839cf78d0d10d09978d3ccdedaca7bce
   languageName: node
   linkType: hard
 
@@ -3517,23 +3533,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf-tools@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/csf-tools@npm:7.6.7"
-  dependencies:
-    "@babel/generator": "npm:^7.23.0"
-    "@babel/parser": "npm:^7.23.0"
-    "@babel/traverse": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.2"
-    "@storybook/types": "npm:7.6.7"
-    fs-extra: "npm:^11.1.0"
-    recast: "npm:^0.23.1"
-    ts-dedent: "npm:^2.0.0"
-  checksum: 1117186a163d20b9cedeac582f65ea97517c88312574619ad7d81bdceebd8471083c05af3ad1bfde0e3eebaa79d9e2f3c3e8718019ac6f67ad57ae59e365b557
-  languageName: node
-  linkType: hard
-
 "@storybook/csf@npm:^0.1.2":
   version: 0.1.2
   resolution: "@storybook/csf@npm:0.1.2"
@@ -3550,18 +3549,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/docs-tools@npm:7.6.7"
+"@storybook/docs-tools@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/docs-tools@npm:7.6.17"
   dependencies:
-    "@storybook/core-common": "npm:7.6.7"
-    "@storybook/preview-api": "npm:7.6.7"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/doctrine": "npm:^0.0.3"
     assert: "npm:^2.1.0"
     doctrine: "npm:^3.0.0"
     lodash: "npm:^4.17.21"
-  checksum: be0acc6918bd5584034171f532c5c0d79ec55fb3c9625938e839a8a8e8573cd7522affe619b49a3ef6aff1f9d15335ac7dae0057604be553b6658a9310324e26
+  checksum: 38473d0ce609cee38df5a8f3ad34a23ce6050e06b492cab51052ba67a2c6ecece532e0dee9f5e3cc5dee3d7105233289d05465a7ae0f5cb94fd2bbda1c267d38
   languageName: node
   linkType: hard
 
@@ -3572,32 +3571,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/manager-api@npm:7.6.7"
+"@storybook/manager-api@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/manager-api@npm:7.6.17"
   dependencies:
-    "@storybook/channels": "npm:7.6.7"
-    "@storybook/client-logger": "npm:7.6.7"
-    "@storybook/core-events": "npm:7.6.7"
+    "@storybook/channels": "npm:7.6.17"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/router": "npm:7.6.7"
-    "@storybook/theming": "npm:7.6.7"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/router": "npm:7.6.17"
+    "@storybook/theming": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
     memoizerific: "npm:^1.11.3"
     store2: "npm:^2.14.2"
     telejson: "npm:^7.2.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: e7683a947621857070157b0c9b059bc38e2035135a4ec544947c69fc698a53ff0d432326382f23ade6071c82fd950437388c085fc4465e6ebddeb73200ae2a15
+  checksum: 475d0e0d37a72087c6b4f4e0bfe6ad648c27b5ea34951580b2e339f883d697ac7c4d99926db544a7c58b0aba959ad2d70129d7a7cee4bafaccd3810329a51e03
   languageName: node
   linkType: hard
 
-"@storybook/manager@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/manager@npm:7.6.7"
-  checksum: 5b50ea2faeafaaa4448aea6456ee5800a6d625814063ca4d301fe43e3b9a7bf5e45427663e66bb798bef91f1615bdb4d2b12328c27dfc4dc783c086928cea395
+"@storybook/manager@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/manager@npm:7.6.17"
+  checksum: e703466e95b0fca58963ac0abec188164e6bce904471171dd360c0d63ead0183a5b242db034af63157acd42d38348984e5fe4e6414af6190234c4d5d41608cee
   languageName: node
   linkType: hard
 
@@ -3608,6 +3607,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/node-logger@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/node-logger@npm:7.6.17"
+  checksum: 7b91f10812b8ea4e8716c3b133c5a78ac419e6bcd6a6ab80117cee25287aa973c1710a74a882238697499a1eca6521c4171f4f2d2e8651fb8ef6e28b7ee167fe
+  languageName: node
+  linkType: hard
+
 "@storybook/node-logger@npm:7.6.6":
   version: 7.6.6
   resolution: "@storybook/node-logger@npm:7.6.6"
@@ -3615,30 +3621,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/node-logger@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/node-logger@npm:7.6.7"
-  checksum: a5e270cf827cbec21b4900ce6424913e038d9123092140b3b99bb957fba35d346500c1af238f49fb95f77ecf7feddcc92bf68178a7ada7d02a24aae43429a1fb
+"@storybook/postinstall@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/postinstall@npm:7.6.17"
+  checksum: 62038e1feacfa5b9acc85afd1cdcbee3c9d780c8dbb6d2eb8cf7bfbb6a14d989fa61351958f512415761d5190075367f1f3641e104c0cec0a2c8dd056617dea6
   languageName: node
   linkType: hard
 
-"@storybook/postinstall@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/postinstall@npm:7.6.7"
-  checksum: 2cd33667c38b67e07b2c6bf76b7be5e705b363c4082597ec09bd7bcdeea68f0f9c24d275c03d38d495c2d4c32333d4793b8dcbfedcfd1769cd5163c7b422b33b
-  languageName: node
-  linkType: hard
-
-"@storybook/preview-api@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/preview-api@npm:7.6.7"
+"@storybook/preview-api@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/preview-api@npm:7.6.17"
   dependencies:
-    "@storybook/channels": "npm:7.6.7"
-    "@storybook/client-logger": "npm:7.6.7"
-    "@storybook/core-events": "npm:7.6.7"
+    "@storybook/channels": "npm:7.6.17"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-events": "npm:7.6.17"
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/types": "npm:7.6.17"
     "@types/qs": "npm:^6.9.5"
     dequal: "npm:^2.0.2"
     lodash: "npm:^4.17.21"
@@ -3647,35 +3646,35 @@ __metadata:
     synchronous-promise: "npm:^2.0.15"
     ts-dedent: "npm:^2.0.0"
     util-deprecate: "npm:^1.0.2"
-  checksum: 157406c3d6c94075af27088583c605dd180b14e0f50cab6b9305a1044b9d66b98a42b10cc4f3927f4c63a71d342b8452c0b3e1dc993cf8de3a5e05b826e9874f
+  checksum: b4357ee0c1f9b05feee051d0c0ed3343972277f12d9d033fcc59acfb18d336cecc4a5f0b23998011af4a92c8126e785b2931dbdbdf79787aac5756a01c32aee0
   languageName: node
   linkType: hard
 
-"@storybook/preview@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/preview@npm:7.6.7"
-  checksum: 04bad205c4bade10111085443f49faf2f11a130d9046f08b63f5ab0ebc06848b34c0d4091f951ce5d6b725672974f7af1d9589842130996a266853a2f5d24d29
+"@storybook/preview@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/preview@npm:7.6.17"
+  checksum: b4a2394c4622ff7291ba1b161d537902c53ed52ae3511c65e10c934b04463f6e7e55487b88889800acab55ea1c0aa33ea2a207786f3e06eda4617787f859da6b
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/react-dom-shim@npm:7.6.7"
+"@storybook/react-dom-shim@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/react-dom-shim@npm:7.6.17"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 2d6dd1077ebe3695358386fce65800c504fd689418228303243f6d6d54b7bab60a89d8883a151b80e21167119a9f3b34e97e147d5f441eaebeebb322efdf8fe1
+  checksum: 20558c58f9f0a3a00c5a1bbf2aa3517e3d318e6528f503129c99fb9ee4b604a225e79725f67e01e6e99d5d8c7db0614575dcc89af7768381afe59c976cb7cfc0
   languageName: node
   linkType: hard
 
-"@storybook/react-vite@npm:^7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/react-vite@npm:7.6.7"
+"@storybook/react-vite@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/react-vite@npm:7.6.17"
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.3.0"
     "@rollup/pluginutils": "npm:^5.0.2"
-    "@storybook/builder-vite": "npm:7.6.7"
-    "@storybook/react": "npm:7.6.7"
+    "@storybook/builder-vite": "npm:7.6.17"
+    "@storybook/react": "npm:7.6.17"
     "@vitejs/plugin-react": "npm:^3.0.1"
     magic-string: "npm:^0.30.0"
     react-docgen: "npm:^7.0.0"
@@ -3683,21 +3682,21 @@ __metadata:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     vite: ^3.0.0 || ^4.0.0 || ^5.0.0
-  checksum: 7c5b681be888e2277af0be1e4c59927838bdfc54bc4ee919aa6bec4f08a491210bba82f8a0cd94181136e1d082cbc81982c1fb8d55a0dbddf1003526d1e405fc
+  checksum: 2b45d09f17421d102b7599c55495b9c1688012f9761492493abf55dcfe8c23d65a4465ed6d5f96bb8e41475bbca103f4e0a285f65df85e17f8e82dce673b77dc
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:7.6.7, @storybook/react@npm:^7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/react@npm:7.6.7"
+"@storybook/react@npm:7.6.17, @storybook/react@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/react@npm:7.6.17"
   dependencies:
-    "@storybook/client-logger": "npm:7.6.7"
-    "@storybook/core-client": "npm:7.6.7"
-    "@storybook/docs-tools": "npm:7.6.7"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-client": "npm:7.6.17"
+    "@storybook/docs-tools": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/preview-api": "npm:7.6.7"
-    "@storybook/react-dom-shim": "npm:7.6.7"
-    "@storybook/types": "npm:7.6.7"
+    "@storybook/preview-api": "npm:7.6.17"
+    "@storybook/react-dom-shim": "npm:7.6.17"
+    "@storybook/types": "npm:7.6.17"
     "@types/escodegen": "npm:^0.0.6"
     "@types/estree": "npm:^0.0.51"
     "@types/node": "npm:^18.0.0"
@@ -3719,34 +3718,34 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 00aaf41a3bf6755320ca5ead5792ba6fce5194212586a7804c4fbcab255d299e730fae7d747f08484d9a072c8a0273aababdf1e65fb34285e1aab96b700fc31c
+  checksum: 747bb48413865701716652b9587c8c5b07cc51cb1d54125a69a4ec355f24fdcfc3a9d925a0b6268786875e97addf435e10efe737450e50eea1d19408049674e6
   languageName: node
   linkType: hard
 
-"@storybook/router@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/router@npm:7.6.7"
+"@storybook/router@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/router@npm:7.6.17"
   dependencies:
-    "@storybook/client-logger": "npm:7.6.7"
+    "@storybook/client-logger": "npm:7.6.17"
     memoizerific: "npm:^1.11.3"
     qs: "npm:^6.10.0"
-  checksum: 2d6f3a12b451f325362a3734fea78d1fe5cde8b52a6ecb6e0bf3ee1429c73d9f71979bc13e798945148199027242017982af7743b56e0877600d9105aefbf661
+  checksum: 8e5f354bd835319ca3c7f3ea8248914e7c22dee5815b1bdcbdbf6a9dc018f608683e482013767004105bc726d42c71f001a6c8d10c2177a511e6c0e093b7cf2d
   languageName: node
   linkType: hard
 
-"@storybook/telemetry@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/telemetry@npm:7.6.7"
+"@storybook/telemetry@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/telemetry@npm:7.6.17"
   dependencies:
-    "@storybook/client-logger": "npm:7.6.7"
-    "@storybook/core-common": "npm:7.6.7"
-    "@storybook/csf-tools": "npm:7.6.7"
+    "@storybook/client-logger": "npm:7.6.17"
+    "@storybook/core-common": "npm:7.6.17"
+    "@storybook/csf-tools": "npm:7.6.17"
     chalk: "npm:^4.1.0"
     detect-package-manager: "npm:^2.0.1"
     fetch-retry: "npm:^5.0.2"
     fs-extra: "npm:^11.1.0"
     read-pkg-up: "npm:^7.0.1"
-  checksum: 984e564eb78c92b28a8062f13079a807c50f17e643a79b41987a2bbbfd60572a364fbffb61fe5aeadd273f0481dba91fe66a6731c2ed35c91a9898a2112f38e2
+  checksum: 2d13afef0fd73982c1efec1598583ed592bd608bbc61f9c4d96c47be9202d80043041764e00ea3b10b0636417cfbfe7b3d13c6898187a09554c8a696f89ac226
   languageName: node
   linkType: hard
 
@@ -3777,18 +3776,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/theming@npm:7.6.7"
+"@storybook/theming@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/theming@npm:7.6.17"
   dependencies:
     "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0"
-    "@storybook/client-logger": "npm:7.6.7"
+    "@storybook/client-logger": "npm:7.6.17"
     "@storybook/global": "npm:^5.0.0"
     memoizerific: "npm:^1.11.3"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: bbeb9210a71c3c6b219936a20f49e32a190e2e0a6e7eb0dc2a5452c5380b74f755c0092d30f0ff183ba14395dcece8440516ff3d7d15cf0a58bd77bffe05cb62
+  checksum: f18c52b236554056a97d9df23c5ecf186ffe2ef22eae3812a961b5d9beff96c2a05134ce2a39ad246c2b4ae0d5904a4e7148f7eb3d38d9c7b676d6d0a6c30595
+  languageName: node
+  linkType: hard
+
+"@storybook/types@npm:7.6.17":
+  version: 7.6.17
+  resolution: "@storybook/types@npm:7.6.17"
+  dependencies:
+    "@storybook/channels": "npm:7.6.17"
+    "@types/babel__core": "npm:^7.0.0"
+    "@types/express": "npm:^4.7.0"
+    file-system-cache: "npm:2.3.0"
+  checksum: 7de04987b44b2d78d9e6ff39b54ece657b1d5266cc180a6b1a192ab394f893f8352578d9c8d0d2327e21689843a1c314f08e05eec18992d78a8d9347b0bcc72a
   languageName: node
   linkType: hard
 
@@ -3804,18 +3815,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/types@npm:7.6.7":
-  version: 7.6.7
-  resolution: "@storybook/types@npm:7.6.7"
-  dependencies:
-    "@storybook/channels": "npm:7.6.7"
-    "@types/babel__core": "npm:^7.0.0"
-    "@types/express": "npm:^4.7.0"
-    file-system-cache: "npm:2.3.0"
-  checksum: e0c91e3d672edba9a2c392ea7f9a33b6f2cfada6c89860ac98c8363233d76d5f8ea8e785c96e7993322c5a14c7988bf18ed6275a074dd1bae4e3180ad6c1dc81
-  languageName: node
-  linkType: hard
-
 "@testing-library/dom@npm:^9.0.0":
   version: 9.3.3
   resolution: "@testing-library/dom@npm:9.3.3"
@@ -4132,12 +4131,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^20.10.6":
-  version: 20.10.6
-  resolution: "@types/node@npm:20.10.6"
+"@types/node@npm:^20.11.20":
+  version: 20.11.20
+  resolution: "@types/node@npm:20.11.20"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 6692ccfa8552ef60c4069fda3c8de726c23e8d403cdf788e3c7efa769987e80fbda5f02723dd857f9de7df24a5fa40b3ed4580ec3c5cbac04eba44cf7b2ab1dc
+  checksum: 8e8de211e6d54425c603388a9b5cc9c434101985d0a1c88aabbf65d10df2b1fccd71855c20e61ae8a75c7aea56cb0f64e722cf7914cff1247d0b62ce21996ac4
   languageName: node
   linkType: hard
 
@@ -4290,57 +4289,57 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/expect@npm:1.1.3":
-  version: 1.1.3
-  resolution: "@vitest/expect@npm:1.1.3"
+"@vitest/expect@npm:1.3.1":
+  version: 1.3.1
+  resolution: "@vitest/expect@npm:1.3.1"
   dependencies:
-    "@vitest/spy": "npm:1.1.3"
-    "@vitest/utils": "npm:1.1.3"
+    "@vitest/spy": "npm:1.3.1"
+    "@vitest/utils": "npm:1.3.1"
     chai: "npm:^4.3.10"
-  checksum: fe5c9eade516a754efc26d4b6378a250f0c3b668fa15b3e6b6042190b64a65c4459b7fd67bfca72fb1fbf215feb838b68da4ab224a2a10137d8828ca6af70516
+  checksum: ea66a1e912d896a481a27631b68089b885af7e8ed62ba8aaa119c37a9beafe6c094fd672775a20e6e23460af66e294f9ca259e6e0562708d1b7724eaaf53c7bb
   languageName: node
   linkType: hard
 
-"@vitest/runner@npm:1.1.3":
-  version: 1.1.3
-  resolution: "@vitest/runner@npm:1.1.3"
+"@vitest/runner@npm:1.3.1":
+  version: 1.3.1
+  resolution: "@vitest/runner@npm:1.3.1"
   dependencies:
-    "@vitest/utils": "npm:1.1.3"
+    "@vitest/utils": "npm:1.3.1"
     p-limit: "npm:^5.0.0"
     pathe: "npm:^1.1.1"
-  checksum: 544455f7d7d3e04e8b6df18dfc8dec0ca5a90dd6c39ce72685de4383d4b2f77e907e6cf225df12af5127293344256056021d3d39b8c8960e943a518c30196801
+  checksum: d732de2368d2bc32cbc27f0bbc5477f6e36088ddfb873c036935a45b1b252ebc529b932cf5cd944eed9b692243acebef828f6d3218583cb8a6817a8270712050
   languageName: node
   linkType: hard
 
-"@vitest/snapshot@npm:1.1.3":
-  version: 1.1.3
-  resolution: "@vitest/snapshot@npm:1.1.3"
+"@vitest/snapshot@npm:1.3.1":
+  version: 1.3.1
+  resolution: "@vitest/snapshot@npm:1.3.1"
   dependencies:
     magic-string: "npm:^0.30.5"
     pathe: "npm:^1.1.1"
     pretty-format: "npm:^29.7.0"
-  checksum: bf841693c0210a12b96060e5bc5d3eeda36d6d96f3446c789ccaf22c68d13c41d868d0e76dddcd298cd7c08564f0bed75ad26fb2e94e4909d83f60b5ec9c8904
+  checksum: cad0844270852c6d53c1ca6b7ca279034880d2140837ff245d5bd2376f4356cc924929c58dc69bcf9fad83ba934d4a06000c908971cc24b5d7a9ec2656b72d29
   languageName: node
   linkType: hard
 
-"@vitest/spy@npm:1.1.3":
-  version: 1.1.3
-  resolution: "@vitest/spy@npm:1.1.3"
+"@vitest/spy@npm:1.3.1":
+  version: 1.3.1
+  resolution: "@vitest/spy@npm:1.3.1"
   dependencies:
     tinyspy: "npm:^2.2.0"
-  checksum: d1692582afb7b665ec283723b15bbb7da95896cbfd7befaad9fdac6b64a8250fd918781263d43e8e10ee4874cdd18646224f6d993749c3751296dced8095a9ed
+  checksum: efc42f679d2a51fc6583ca3136ccd47581cb27c923ed3cb0500f5dee9aac99b681bfdd400c16ef108f2e0761daa642bc190816a6411931a2aba99ebf8b213dd4
   languageName: node
   linkType: hard
 
-"@vitest/utils@npm:1.1.3":
-  version: 1.1.3
-  resolution: "@vitest/utils@npm:1.1.3"
+"@vitest/utils@npm:1.3.1":
+  version: 1.3.1
+  resolution: "@vitest/utils@npm:1.3.1"
   dependencies:
     diff-sequences: "npm:^29.6.3"
     estree-walker: "npm:^3.0.3"
     loupe: "npm:^2.3.7"
     pretty-format: "npm:^29.7.0"
-  checksum: 86f48a7722927741449f40f33584dd9857629782f6661654225b5dd3c039d61cc60806c5dfe419bd793f2a231ba91fe708cbdec5d99b62a1f6f819b6f2121fc3
+  checksum: d604c8ad3b1aee30d4dcd889098f591407bfe18547ff96485b1d1ed54eff58219c756a9544a7fbd4e37886863abacd7a89a76334cb3ea7f84c3d496bb757db23
   languageName: node
   linkType: hard
 
@@ -4431,10 +4430,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-walk@npm:^8.3.1":
-  version: 8.3.1
-  resolution: "acorn-walk@npm:8.3.1"
-  checksum: a23d2f7c6b6cad617f4c77f14dfeb062a239208d61753e9ba808d916c550add92b39535467d2e6028280761ac4f5a904cc9df21530b84d3f834e3edef74ddde5
+"acorn-walk@npm:^8.3.2":
+  version: 8.3.2
+  resolution: "acorn-walk@npm:8.3.2"
+  checksum: 7e2a8dad5480df7f872569b9dccff2f3da7e65f5353686b1d6032ab9f4ddf6e3a2cb83a9b52cf50b1497fd522154dda92f0abf7153290cc79cd14721ff121e52
   languageName: node
   linkType: hard
 
@@ -4919,13 +4918,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:^10.4.16":
-  version: 10.4.16
-  resolution: "autoprefixer@npm:10.4.16"
+"autoprefixer@npm:^10.4.17":
+  version: 10.4.17
+  resolution: "autoprefixer@npm:10.4.17"
   dependencies:
-    browserslist: "npm:^4.21.10"
-    caniuse-lite: "npm:^1.0.30001538"
-    fraction.js: "npm:^4.3.6"
+    browserslist: "npm:^4.22.2"
+    caniuse-lite: "npm:^1.0.30001578"
+    fraction.js: "npm:^4.3.7"
     normalize-range: "npm:^0.1.2"
     picocolors: "npm:^1.0.0"
     postcss-value-parser: "npm:^4.2.0"
@@ -4933,7 +4932,7 @@ __metadata:
     postcss: ^8.1.0
   bin:
     autoprefixer: bin/autoprefixer
-  checksum: e00256e754d481a026d928bca729b25954074dd142dbec022f0a7db0d3bbc0dc2e2dc7542e94fec22eff81e21fe140e6856448e2d9a002660cb1e2ad434daee0
+  checksum: 1d21cc8edb7bf993682094ceed03a32c18f5293f071182a64c2c6defb44bbe91d576ad775d2347469a81997b80cea0bbc4ad3eeb5b12710f9feacf2e6c04bb51
   languageName: node
   linkType: hard
 
@@ -5297,7 +5296,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.21.10, browserslist@npm:^4.21.9, browserslist@npm:^4.22.1":
+"browserslist@npm:^4.21.9, browserslist@npm:^4.22.1":
   version: 4.22.1
   resolution: "browserslist@npm:4.22.1"
   dependencies:
@@ -5311,6 +5310,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.22.2":
+  version: 4.23.0
+  resolution: "browserslist@npm:4.23.0"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001587"
+    electron-to-chromium: "npm:^1.4.668"
+    node-releases: "npm:^2.0.14"
+    update-browserslist-db: "npm:^1.0.13"
+  bin:
+    browserslist: cli.js
+  checksum: 8e9cc154529062128d02a7af4d8adeead83ca1df8cd9ee65a88e2161039f3d68a4d40fea7353cab6bae4c16182dec2fdd9a1cf7dc2a2935498cee1af0e998943
+  languageName: node
+  linkType: hard
+
 "bser@npm:2.1.1":
   version: 2.1.1
   resolution: "bser@npm:2.1.1"
@@ -5469,13 +5482,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001541":
+"caniuse-lite@npm:^1.0.30001541":
   version: 1.0.30001565
   resolution: "caniuse-lite@npm:1.0.30001565"
   checksum: b400e0364651a700e39d59449ca6c65b26e2caceecc4b93ae54a01ed1f62d2a7e1333b1dc640d95fbe620ffa5be38fe4dbacd880cd7a1f42fc72bb8de9a2d0c9
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001578, caniuse-lite@npm:^1.0.30001587":
+  version: 1.0.30001589
+  resolution: "caniuse-lite@npm:1.0.30001589"
+  checksum: 20debfb949413f603011bc7dacaf050010778bc4f8632c86fafd1bd0c43180c95ae7c31f6c82348f6309e5e221934e327c3607a216e3f09640284acf78cd6d4d
+  languageName: node
+  linkType: hard
+
 "chai@npm:^4.3.10":
   version: 4.3.10
   resolution: "chai@npm:4.3.10"
@@ -6053,13 +6073,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.6.4":
-  version: 3.33.3
-  resolution: "core-js@npm:3.33.3"
-  checksum: 08abdc9470c8228b9d09f61e62ab312738681202c4c34e9638889125b304b235f34c4fe22e9d41c20906ac0fcc807dca57c5ff7d6b90021bf64e8fe23461d9ab
-  languageName: node
-  linkType: hard
-
 "core-util-is@npm:~1.0.0":
   version: 1.0.3
   resolution: "core-util-is@npm:1.0.3"
@@ -6104,7 +6117,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-fetch@npm:^3.0.4":
+"cross-fetch@npm:^3.1.5":
   version: 3.1.8
   resolution: "cross-fetch@npm:3.1.8"
   dependencies:
@@ -6281,6 +6294,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"date-fns@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "date-fns@npm:3.3.1"
+  checksum: e04ff79244010e03b912d791cd3250af5f18866ce868604958d76bd87e5fb0b79f0a810b8e7066248452b41779b288c4fd21de1cac2cd4b6d384e9dd931c9674
+  languageName: node
+  linkType: hard
+
 "debug-fabulous@npm:^1.0.0":
   version: 1.1.0
   resolution: "debug-fabulous@npm:1.1.0"
@@ -6693,17 +6713,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"draft-js@npm:^0.11.7":
+"draft-js@git+https://github.com/penpot/draft-js.git":
   version: 0.11.7
-  resolution: "draft-js@npm:0.11.7"
+  resolution: "draft-js@https://github.com/penpot/draft-js.git#commit=3119afbfa3efb80da6a7b232b0ae873a31e7acc0"
   dependencies:
-    fbjs: "npm:^2.0.0"
+    fbjs: "npm:^3.0.4"
     immutable: "npm:~3.7.4"
     object-assign: "npm:^4.1.1"
   peerDependencies:
     react: ">=0.14.0"
     react-dom: ">=0.14.0"
-  checksum: 25943c73cbacf7e00e3ee6bef3496feffe14f09c436cec9233a4fc1bb2b4302f2bcf5fc66f4a5f8e3a9135808d20783aff75e42659da3b21d50f63185bedf557
+  checksum: 46f3dd133b174feeefe2f8cbd7b943385448727c375d0d75dc49651979cfd89d2a64347283749bc75dd789b095ce6747122c5822328f4ea15ba02ca5663ffb4b
   languageName: node
   linkType: hard
 
@@ -6736,7 +6756,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"editorconfig@npm:^1.0.3":
+"editorconfig@npm:^1.0.4":
   version: 1.0.4
   resolution: "editorconfig@npm:1.0.4"
   dependencies:
@@ -6775,6 +6795,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.4.668":
+  version: 1.4.681
+  resolution: "electron-to-chromium@npm:1.4.681"
+  checksum: 5b2558dfb8bb82c20fb5fa1d9bbe06a3add47431dc3e1e4815e997be6ad387787047d9e534ed96839a9e7012520a5281c865158b09db41d10c029af003f05f94
+  languageName: node
+  linkType: hard
+
 "elliptic@npm:^6.5.3, elliptic@npm:^6.5.4":
   version: 6.5.4
   resolution: "elliptic@npm:6.5.4"
@@ -7308,10 +7335,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eventsource-parser@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "eventsource-parser@npm:1.1.1"
-  checksum: 6eae5e8300dc5d4dcd29d09d037a43b9954077fbcc936904065d1abf5ec503f1fa56a942ad4f796b7dcc3bf64224440917ea635ef4a75f5522e9951df4b9aadf
+"eventsource-parser@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "eventsource-parser@npm:1.1.2"
+  checksum: b38948bc81ae6c2a8b9c88383d4f8c2bfbaf23955827a9af68d39bc0550ae83cc400b197e814bea9aef6e0cdc9bae5afd95787418ee3d9ad01ffc4774cf1b84a
   languageName: node
   linkType: hard
 
@@ -7495,7 +7522,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fancy-log@npm:^1.3.2, fancy-log@npm:^1.3.3":
+"fancy-log@npm:^1.3.2":
   version: 1.3.3
   resolution: "fancy-log@npm:1.3.3"
   dependencies:
@@ -7568,19 +7595,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fbjs@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "fbjs@npm:2.0.0"
+"fbjs@npm:^3.0.4":
+  version: 3.0.5
+  resolution: "fbjs@npm:3.0.5"
   dependencies:
-    core-js: "npm:^3.6.4"
-    cross-fetch: "npm:^3.0.4"
+    cross-fetch: "npm:^3.1.5"
     fbjs-css-vars: "npm:^1.0.0"
     loose-envify: "npm:^1.0.0"
     object-assign: "npm:^4.1.0"
     promise: "npm:^7.1.1"
     setimmediate: "npm:^1.0.5"
-    ua-parser-js: "npm:^0.7.18"
-  checksum: 543544198ec6db0be64d0be80cc6386cdc015cf9b9fe3af54f2a861026fe75db1fae38fb6a7b2f1047d733f47ee68d11ecad6d0fbb67b200e56d265d967c4467
+    ua-parser-js: "npm:^1.0.35"
+  checksum: 66d0a2fc9a774f9066e35ac2ac4bf1245931d27f3ac287c7d47e6aa1fc152b243c2109743eb8f65341e025621fb51a12038fadb9fd8fda2e3ddae04ebab06f91
   languageName: node
   linkType: hard
 
@@ -7851,7 +7877,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fraction.js@npm:^4.3.6":
+"fraction.js@npm:^4.3.7":
   version: 4.3.7
   resolution: "fraction.js@npm:4.3.7"
   checksum: df291391beea9ab4c263487ffd9d17fed162dbb736982dee1379b2a8cc94e4e24e46ed508c6d278aded9080ba51872f1bc5f3a5fd8d7c74e5f105b508ac28711
@@ -7878,65 +7904,65 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "frontend@workspace:."
   dependencies:
-    "@storybook/addon-essentials": "npm:^7.6.7"
-    "@storybook/addon-interactions": "npm:^7.6.7"
-    "@storybook/addon-links": "npm:^7.6.7"
-    "@storybook/addon-onboarding": "npm:^1.0.10"
-    "@storybook/blocks": "npm:^7.6.7"
-    "@storybook/react": "npm:^7.6.7"
-    "@storybook/react-vite": "npm:^7.6.7"
+    "@storybook/addon-essentials": "npm:^7.6.17"
+    "@storybook/addon-interactions": "npm:^7.6.17"
+    "@storybook/addon-links": "npm:^7.6.17"
+    "@storybook/addon-onboarding": "npm:^1.0.11"
+    "@storybook/blocks": "npm:^7.6.17"
+    "@storybook/react": "npm:^7.6.17"
+    "@storybook/react-vite": "npm:^7.6.17"
     "@storybook/testing-library": "npm:^0.2.2"
-    "@types/node": "npm:^20.10.6"
+    "@types/node": "npm:^20.11.20"
     animate.css: "npm:^4.1.1"
-    autoprefixer: "npm:^10.4.16"
+    autoprefixer: "npm:^10.4.17"
     concurrently: "npm:^8.2.2"
-    date-fns: "npm:^2.30.0"
-    draft-js: "npm:^0.11.7"
-    eventsource-parser: "npm:^1.1.1"
+    date-fns: "npm:^3.3.1"
+    draft-js: "git+https://github.com/penpot/draft-js.git"
+    eventsource-parser: "npm:^1.1.2"
     fancy-log: "npm:^2.0.0"
-    gettext-parser: "npm:^7.0.1"
+    gettext-parser: "npm:^8.0.0"
     gulp: "npm:4.0.2"
     gulp-concat: "npm:^2.6.1"
     gulp-gzip: "npm:^1.4.2"
     gulp-mustache: "npm:^5.0.0"
-    gulp-postcss: "npm:^9.0.1"
+    gulp-postcss: "npm:^10.0.0"
     gulp-rename: "npm:^2.0.0"
     gulp-sass: "npm:^5.1.0"
     gulp-sourcemaps: "npm:^3.0.0"
     gulp-svg-sprite: "npm:^2.0.3"
     highlight.js: "npm:^11.9.0"
-    js-beautify: "npm:^1.14.11"
-    jsdom: "npm:^23.1.0"
+    js-beautify: "npm:^1.15.1"
+    jsdom: "npm:^24.0.0"
     jszip: "npm:^3.10.1"
     luxon: "npm:^3.4.4"
     map-stream: "npm:0.0.7"
-    marked: "npm:^7.0.5"
+    marked: "npm:^12.0.0"
     mkdirp: "npm:^3.0.1"
     mousetrap: "npm:^1.6.5"
-    nodemon: "npm:^3.0.2"
+    nodemon: "npm:^3.1.0"
     npm-run-all: "npm:^4.1.5"
     opentype.js: "npm:^1.3.4"
-    postcss: "npm:^8.4.33"
+    postcss: "npm:^8.4.35"
     postcss-clean: "npm:^1.2.2"
     postcss-modules: "npm:^6.0.0"
-    prettier: "npm:^3.1.1"
+    prettier: "npm:^3.2.5"
     prop-types: "npm:^15.8.1"
     randomcolor: "npm:^0.6.2"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-virtualized: "npm:^9.22.5"
     rimraf: "npm:^5.0.5"
-    rxjs: "npm:8.0.0-alpha.13"
-    sass: "npm:^1.69.7"
+    rxjs: "npm:8.0.0-alpha.14"
+    sass: "npm:^1.71.1"
     sax: "npm:^1.3.0"
-    shadow-cljs: "npm:2.26.2"
+    shadow-cljs: "npm:2.27.4"
     source-map-support: "npm:^0.5.21"
-    storybook: "npm:^7.6.7"
+    storybook: "npm:^7.6.17"
     tdigest: "npm:^0.1.2"
     typescript: "npm:^5.3.3"
     ua-parser-js: "npm:^1.0.37"
-    vite: "npm:^5.0.11"
-    vitest: "npm:^1.1.3"
+    vite: "npm:^5.1.4"
+    vitest: "npm:^1.3.1"
     xregexp: "npm:^5.1.1"
   languageName: unknown
   linkType: soft
@@ -8179,15 +8205,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gettext-parser@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "gettext-parser@npm:7.0.1"
+"gettext-parser@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "gettext-parser@npm:8.0.0"
   dependencies:
     content-type: "npm:^1.0.5"
     encoding: "npm:^0.1.13"
-    readable-stream: "npm:^4.3.0"
+    readable-stream: "npm:^4.5.2"
     safe-buffer: "npm:^5.2.1"
-  checksum: 9d1c9b968c8dab757a10b512ac8a2f1ccc7aec9fe9dd6ef4c77fb1aa048bd2bcac0abb830ebb8fc3e29a8511b6186f814d505cc12ba96c226df64758d407a621
+  checksum: b329981791afeded45c010a5b59f980b199b53a29cfd064d09a38e9b7a9678b34666bc505cff6888984ce70ab6a7bb7d1df3e95f8c1310e21b18edac28a05160
   languageName: node
   linkType: hard
 
@@ -8459,17 +8485,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gulp-postcss@npm:^9.0.1":
-  version: 9.0.1
-  resolution: "gulp-postcss@npm:9.0.1"
+"gulp-postcss@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "gulp-postcss@npm:10.0.0"
   dependencies:
-    fancy-log: "npm:^1.3.3"
-    plugin-error: "npm:^1.0.1"
-    postcss-load-config: "npm:^3.0.0"
+    fancy-log: "npm:^2.0.0"
+    plugin-error: "npm:^2.0.1"
+    postcss-load-config: "npm:^5.0.0"
     vinyl-sourcemaps-apply: "npm:^0.2.1"
   peerDependencies:
     postcss: ^8.0.0
-  checksum: e4f75748036064a4dc32be5812e9a9cc36e337ceb9583d0b2e4b41049eafedf17e6cd7d37053a33d258054ceaddbd33a76bb55a0ea2ba0f2ae5cfa2ca1d1ee25
+  checksum: 042c2111879acf29a65f001b232326135b1bb15d95ebdb6074815b642aaa76555edb59f26011b975a973b2039b3ea58d0b14c6cf7c8bc566830bf57cda8dc825
   languageName: node
   linkType: hard
 
@@ -8978,6 +9004,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ip@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "ip@npm:2.0.1"
+  checksum: cab8eb3e88d0abe23e4724829621ec4c4c5cb41a7f936a2e626c947128c1be16ed543448d42af7cca95379f9892bfcacc1ccd8d09bc7e8bea0e86d492ce33616
+  languageName: node
+  linkType: hard
+
 "ipaddr.js@npm:1.9.1":
   version: 1.9.1
   resolution: "ipaddr.js@npm:1.9.1"
@@ -9659,19 +9692,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-beautify@npm:^1.14.11":
-  version: 1.14.11
-  resolution: "js-beautify@npm:1.14.11"
+"js-beautify@npm:^1.15.1":
+  version: 1.15.1
+  resolution: "js-beautify@npm:1.15.1"
   dependencies:
     config-chain: "npm:^1.1.13"
-    editorconfig: "npm:^1.0.3"
+    editorconfig: "npm:^1.0.4"
     glob: "npm:^10.3.3"
+    js-cookie: "npm:^3.0.5"
     nopt: "npm:^7.2.0"
   bin:
     css-beautify: js/bin/css-beautify.js
     html-beautify: js/bin/html-beautify.js
     js-beautify: js/bin/js-beautify.js
-  checksum: 23267f8e68a4cf190274906fbec98c4fa44025e1b7e1fa701480867c9ab6b2b90a1bb2b358cd487c34d735a1039c16bcb51f82d390bcc6384172cc540aa11c9b
+  checksum: 4140dd95537143eb429b6c8e47e21310f16c032d97a03163c6c7c0502bc663242a5db08d3ad941b87f24a142ce4f9190c556d2340bcd056545326377dfae5362
+  languageName: node
+  linkType: hard
+
+"js-cookie@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "js-cookie@npm:3.0.5"
+  checksum: 04a0e560407b4489daac3a63e231d35f4e86f78bff9d792011391b49c59f721b513411cd75714c418049c8dc9750b20fcddad1ca5a2ca616c3aca4874cce5b3a
   languageName: node
   linkType: hard
 
@@ -9682,6 +9723,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-tokens@npm:^8.0.2":
+  version: 8.0.3
+  resolution: "js-tokens@npm:8.0.3"
+  checksum: b50ba7d926b087ad31949d8155c7bc84374e0785019b17bdddeb2c4f98f5dea04ba464651fe23a8be4f7d15f50d06ce8bb536087b24ce3ebfbaea4a1dc5869f0
+  languageName: node
+  linkType: hard
+
 "js-yaml@npm:^3.13.1":
   version: 3.14.1
   resolution: "js-yaml@npm:3.14.1"
@@ -9740,9 +9788,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsdom@npm:^23.1.0":
-  version: 23.1.0
-  resolution: "jsdom@npm:23.1.0"
+"jsdom@npm:^24.0.0":
+  version: 24.0.0
+  resolution: "jsdom@npm:24.0.0"
   dependencies:
     cssstyle: "npm:^4.0.1"
     data-urls: "npm:^5.0.0"
@@ -9770,7 +9818,7 @@ __metadata:
   peerDependenciesMeta:
     canvas:
       optional: true
-  checksum: 5740b2133f30b546d768cddbb3e5db82b7e9cc8ad2f97410fc32e7d85586accee4fe2d9280306018a417f63e4cb30e018d1c56759a0446fe34f1e4433669208a
+  checksum: 7b35043d7af39ad6dcaef0fa5679d8c8a94c6c9b6cc4a79222b7c9987d57ab7150c50856684ae56b473ab28c7d82aec0fb7ca19dcbd4c3f46683c807d717a3af
   languageName: node
   linkType: hard
 
@@ -9987,10 +10035,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^2.0.5":
-  version: 2.1.0
-  resolution: "lilconfig@npm:2.1.0"
-  checksum: 64645641aa8d274c99338e130554abd6a0190533c0d9eb2ce7ebfaf2e05c7d9961f3ffe2bfa39efd3b60c521ba3dd24fa236fe2775fc38501bf82bf49d4678b8
+"lilconfig@npm:^3.0.0":
+  version: 3.1.1
+  resolution: "lilconfig@npm:3.1.1"
+  checksum: 311b559794546894e3fe176663427326026c1c644145be9e8041c58e268aa9328799b8dfe7e4dd8c6a4ae305feae95a1c9e007db3569f35b42b6e1bc8274754c
   languageName: node
   linkType: hard
 
@@ -10334,12 +10382,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"marked@npm:^7.0.5":
-  version: 7.0.5
-  resolution: "marked@npm:7.0.5"
+"marked@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "marked@npm:12.0.0"
   bin:
     marked: bin/marked.js
-  checksum: a75f90e4ea7ec90cf6b66aaf1d7dd533df3d12d2a974c838f66f823d027edc8ba1d36b2920d4a24cf8b711e6ebc4625016cdf7d1ce95a818a091a2629e9a52dd
+  checksum: 485c0d2a1b59f7d305435d2d65aac477eee8e47ccd686e06c35145b7186c399fd741543f7c0bb02e67d53b3cc0341f491d967ca40a5c3aa49c6cc466e1f5d872
   languageName: node
   linkType: hard
 
@@ -10964,9 +11012,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nodemon@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "nodemon@npm:3.0.2"
+"node-releases@npm:^2.0.14":
+  version: 2.0.14
+  resolution: "node-releases@npm:2.0.14"
+  checksum: 199fc93773ae70ec9969bc6d5ac5b2bbd6eb986ed1907d751f411fef3ede0e4bfdb45ceb43711f8078bea237b6036db8b1bf208f6ff2b70c7d615afd157f3ab9
+  languageName: node
+  linkType: hard
+
+"nodemon@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "nodemon@npm:3.1.0"
   dependencies:
     chokidar: "npm:^3.5.2"
     debug: "npm:^4"
@@ -10980,7 +11035,7 @@ __metadata:
     undefsafe: "npm:^2.0.5"
   bin:
     nodemon: bin/nodemon.js
-  checksum: 65837603fa790d723f8d59e1f098342ed5a5517c3a38ea3b52ca3d532ed21924ecd43fbaceadb458472ae0a8ae6b8395bda22ccd062709ad50c5c4537a625c9d
+  checksum: 3aeb50105ecae31ce4d0a5cd464011d4aa0dc15419e39ac0fd203d784e38940e1436f4ed96adbaa0f9614ee0644f91e3cf38f2afae8d3918ae7afc51c7e2116b
   languageName: node
   linkType: hard
 
@@ -11845,21 +11900,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-load-config@npm:^3.0.0":
-  version: 3.1.4
-  resolution: "postcss-load-config@npm:3.1.4"
+"postcss-load-config@npm:^5.0.0":
+  version: 5.0.3
+  resolution: "postcss-load-config@npm:5.0.3"
   dependencies:
-    lilconfig: "npm:^2.0.5"
-    yaml: "npm:^1.10.2"
+    lilconfig: "npm:^3.0.0"
+    yaml: "npm:^2.3.4"
   peerDependencies:
+    jiti: ">=1.21.0"
     postcss: ">=8.0.9"
-    ts-node: ">=9.0.0"
   peerDependenciesMeta:
+    jiti:
+      optional: true
     postcss:
       optional: true
-    ts-node:
-      optional: true
-  checksum: 7d2cc6695c2fc063e4538316d651a687fdb55e48db453ff699de916a6ee55ab68eac2b120c28a6b8ca7aa746a588888351b810a215b5cd090eabea62c5762ede
+  checksum: decb5363cead7dc72f664a7943f1cd88e252107b289261f50925101e864c7bb80a5c479e876609d8146c1ab6b52b961abb91cbb41768edc416eb9729555f0643
   languageName: node
   linkType: hard
 
@@ -11974,14 +12029,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.33":
-  version: 8.4.33
-  resolution: "postcss@npm:8.4.33"
+"postcss@npm:^8.4.35":
+  version: 8.4.35
+  resolution: "postcss@npm:8.4.35"
   dependencies:
     nanoid: "npm:^3.3.7"
     picocolors: "npm:^1.0.0"
     source-map-js: "npm:^1.0.2"
-  checksum: 16eda83458fcd8a91bece287b5920c7f57164c3ea293e6c80d0ea71ce7843007bcd8592260a5160b9a7f02693e6ac93e2495b02d8c7596d3f3f72c1447e3ba79
+  checksum: e8dd04e48001eb5857abc9475365bf08f4e508ddf9bc0b8525449a95d190f10d025acebc5b56ac2e94b3c7146790e4ae78989bb9633cb7ee20d1cc9b7dc909b2
   languageName: node
   linkType: hard
 
@@ -11994,12 +12049,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "prettier@npm:3.1.1"
+"prettier@npm:^3.2.5":
+  version: 3.2.5
+  resolution: "prettier@npm:3.2.5"
   bin:
     prettier: bin/prettier.cjs
-  checksum: facc944ba20e194ff4db765e830ffbcb642803381f0d2033ed397e79904fa4ccc877dc25ad68f42d36985c01d051c990ca1b905fb83d2d7d65fe69e4386fa1a3
+  checksum: ea327f37a7d46f2324a34ad35292af2ad4c4c3c3355da07313339d7e554320f66f65f91e856add8530157a733c6c4a897dc41b577056be5c24c40f739f5ee8c6
   languageName: node
   linkType: hard
 
@@ -12588,16 +12643,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:^4.3.0":
-  version: 4.4.2
-  resolution: "readable-stream@npm:4.4.2"
+"readable-stream@npm:^4.5.2":
+  version: 4.5.2
+  resolution: "readable-stream@npm:4.5.2"
   dependencies:
     abort-controller: "npm:^3.0.0"
     buffer: "npm:^6.0.3"
     events: "npm:^3.3.0"
     process: "npm:^0.11.10"
     string_decoder: "npm:^1.3.0"
-  checksum: cf7cc8daa2b57872d120945a20a1458c13dcb6c6f352505421115827b18ac4df0e483ac1fe195cb1f5cd226e1073fc55b92b569269d8299e8530840bcdbba40c
+  checksum: a2c80e0e53aabd91d7df0330929e32d0a73219f9477dbbb18472f6fdd6a11a699fc5d172a1beff98d50eae4f1496c950ffa85b7cc2c4c196963f289a5f39275d
   languageName: node
   linkType: hard
 
@@ -13064,13 +13119,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rxjs@npm:8.0.0-alpha.13":
-  version: 8.0.0-alpha.13
-  resolution: "rxjs@npm:8.0.0-alpha.13"
-  peerDependencies:
-    "@types/node": ^20.6.3
-    typescript: ^5.2.2
-  checksum: d3d8a395e7b92158d621d686b819aa5be480f5c17155f695506b9a70a32af886962d23d4040a1d1611d815abe0ba0fd4929b3687da75a62a03a1e90e5b616464
+"rxjs@npm:8.0.0-alpha.14":
+  version: 8.0.0-alpha.14
+  resolution: "rxjs@npm:8.0.0-alpha.14"
+  checksum: 14e4b487455c0940e3d87985cc3f2917ec88ce8cd3ede06071eb071a841d729549d43cab198757863838a4e22c1d7d3e9816f08d37357fa7e3506bdd6f8af56e
   languageName: node
   linkType: hard
 
@@ -13143,16 +13195,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:^1.69.7":
-  version: 1.69.7
-  resolution: "sass@npm:1.69.7"
+"sass@npm:^1.71.1":
+  version: 1.71.1
+  resolution: "sass@npm:1.71.1"
   dependencies:
     chokidar: "npm:>=3.0.0 <4.0.0"
     immutable: "npm:^4.0.0"
     source-map-js: "npm:>=0.6.2 <2.0.0"
   bin:
     sass: sass.js
-  checksum: 773d0938e7d4ff3972d3fda3132f34fe98a2f712e028a58e28fecd615434795eff3266eddc38d5e13f03b90c0d6360d0e737b30bff2949a47280c64a18e0fb18
+  checksum: 59d79a6e106747746792b0c71908ae0aecdaf9b794d5724ee64e5249412f0d8ebe7ee2bf12946618848f14f949c4f6b530d82da3e62ab31c71198c6f73002130
   languageName: node
   linkType: hard
 
@@ -13327,9 +13379,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shadow-cljs@npm:2.26.2":
-  version: 2.26.2
-  resolution: "shadow-cljs@npm:2.26.2"
+"shadow-cljs@npm:2.27.4":
+  version: 2.27.4
+  resolution: "shadow-cljs@npm:2.27.4"
   dependencies:
     node-libs-browser: "npm:^2.2.1"
     readline-sync: "npm:^1.4.7"
@@ -13339,7 +13391,7 @@ __metadata:
     ws: "npm:^7.4.6"
   bin:
     shadow-cljs: cli/runner.js
-  checksum: d504969ea28bcf3d5fc879c8111cb630a8ae910ea692bbfb0d73097fb336e13e642116db9fcc91524686a6824e71d439ef0df31941eabb6331feb4aa4146e830
+  checksum: bae23e71df9c2b2979259a0cde8747c923ee295f58ab4637c9d6b103d82542b40ef39172d4be2dbb94af2e6458a177d1ec96c1eb1e73b1d8f3a4ddb5eaaba7d4
   languageName: node
   linkType: hard
 
@@ -13730,15 +13782,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:^7.6.7":
-  version: 7.6.7
-  resolution: "storybook@npm:7.6.7"
+"storybook@npm:^7.6.17":
+  version: 7.6.17
+  resolution: "storybook@npm:7.6.17"
   dependencies:
-    "@storybook/cli": "npm:7.6.7"
+    "@storybook/cli": "npm:7.6.17"
   bin:
     sb: ./index.js
     storybook: ./index.js
-  checksum: 0f27d7fe47da8d9a87caef62e490cdad173d5d8405d0d096d62f9abc6265d8bf53a45d92b1d9a824e9708c21430bdf3a841107de7b64dc36d5eb40d8d8d7bb9b
+  checksum: 256b8ff26b69f622889488605e786c0742350a901037139dd469ec20f2e7031c326d65f2a202a5ee7baa407ff407a6746af2f01d91c0c617eda2013679a65271
   languageName: node
   linkType: hard
 
@@ -13977,12 +14029,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-literal@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "strip-literal@npm:1.3.0"
+"strip-literal@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "strip-literal@npm:2.0.0"
   dependencies:
-    acorn: "npm:^8.10.0"
-  checksum: 3c0c9ee41eb346e827eede61ef288457f53df30e3e6ff8b94fa81b636933b0c13ca4ea5c97d00a10d72d04be326da99ac819f8769f0c6407ba8177c98344a916
+    js-tokens: "npm:^8.0.2"
+  checksum: 63a6e4224ac7088ff93fd19fc0f6882705020da2f0767dbbecb929cbf9d49022e72350420f47be635866823608da9b9a5caf34f518004721895b6031199fc3c8
   languageName: node
   linkType: hard
 
@@ -14271,10 +14323,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinypool@npm:^0.8.1":
-  version: 0.8.1
-  resolution: "tinypool@npm:0.8.1"
-  checksum: d965c057a1866c9d83716f4e434f7be18b2a067ed3b32cc2de3b3bf34ca1756ac1c35bd04433e2086c8cc2afa75b328e4b17baa6b4e6292dba2ce31cc76770e0
+"tinypool@npm:^0.8.2":
+  version: 0.8.2
+  resolution: "tinypool@npm:0.8.2"
+  checksum: 8998626614172fc37c394e9a14e701dc437727fc6525488a4d4fd42044a4b2b59d6f076d750cbf5c699f79c58dd4e40599ab09e2f1ae0df4b23516b98c9c3055
   languageName: node
   linkType: hard
 
@@ -14602,14 +14654,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ua-parser-js@npm:^0.7.18":
-  version: 0.7.37
-  resolution: "ua-parser-js@npm:0.7.37"
-  checksum: 38295744f1771896a9158f427b10a6971e82e30bdcedb98bf871eb29987a517722ed1185a00e54b1dea5480920d131e374b92574851f29e3a753173b9c0f24d2
-  languageName: node
-  linkType: hard
-
-"ua-parser-js@npm:^1.0.37":
+"ua-parser-js@npm:^1.0.35, ua-parser-js@npm:^1.0.37":
   version: 1.0.37
   resolution: "ua-parser-js@npm:1.0.37"
   checksum: dac8cf82a55b2e097bd2286954e01454c4cfcf23c9d9b56961ce94bda3cec5a38ca536e6e84c20a4000a9d4b4a4abcbd98ec634ccebe21be36595ea3069126e4
@@ -15096,9 +15141,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-node@npm:1.1.3":
-  version: 1.1.3
-  resolution: "vite-node@npm:1.1.3"
+"vite-node@npm:1.3.1":
+  version: 1.3.1
+  resolution: "vite-node@npm:1.3.1"
   dependencies:
     cac: "npm:^6.7.14"
     debug: "npm:^4.3.4"
@@ -15107,7 +15152,7 @@ __metadata:
     vite: "npm:^5.0.0"
   bin:
     vite-node: vite-node.mjs
-  checksum: 011346c156c4df7cb49fc1de357ff7dc6316011faeb00855aca7ecab24ed19aac4c03c0bc921923d13c37870f2954c3fcbf975c5eeee3a03d675831a60556dfb
+  checksum: b50665ef224f3527f856ab88a0cfabab36dd6e2dd1e3edca8f8f25d5d33754e1050495472c2c82147d0dcf7c5280971dae2f37a531c10f3941d8d3344e34ce0b
   languageName: node
   linkType: hard
 
@@ -15151,13 +15196,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.0.11":
-  version: 5.0.11
-  resolution: "vite@npm:5.0.11"
+"vite@npm:^5.1.4":
+  version: 5.1.4
+  resolution: "vite@npm:5.1.4"
   dependencies:
     esbuild: "npm:^0.19.3"
     fsevents: "npm:~2.3.3"
-    postcss: "npm:^8.4.32"
+    postcss: "npm:^8.4.35"
     rollup: "npm:^4.2.0"
   peerDependencies:
     "@types/node": ^18.0.0 || >=20.0.0
@@ -15187,21 +15232,20 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 74a3ddc6d43cf19cb6f827a53d77c481a07517a72b7d82a178df082012ad81ab5231a287a6dcc5471c0b2a5c8dd7e6ea8e1d62d268803057d0315729f09c5e33
+  checksum: 8f04c8bed33f266bde27f432412456a3b893b51fe1857f0b8cd259100b376c1393a7927db1dd6344a4376baed72ed179ec5b0428aef2ae8508f1f28f95acb908
   languageName: node
   linkType: hard
 
-"vitest@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "vitest@npm:1.1.3"
+"vitest@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "vitest@npm:1.3.1"
   dependencies:
-    "@vitest/expect": "npm:1.1.3"
-    "@vitest/runner": "npm:1.1.3"
-    "@vitest/snapshot": "npm:1.1.3"
-    "@vitest/spy": "npm:1.1.3"
-    "@vitest/utils": "npm:1.1.3"
-    acorn-walk: "npm:^8.3.1"
-    cac: "npm:^6.7.14"
+    "@vitest/expect": "npm:1.3.1"
+    "@vitest/runner": "npm:1.3.1"
+    "@vitest/snapshot": "npm:1.3.1"
+    "@vitest/spy": "npm:1.3.1"
+    "@vitest/utils": "npm:1.3.1"
+    acorn-walk: "npm:^8.3.2"
     chai: "npm:^4.3.10"
     debug: "npm:^4.3.4"
     execa: "npm:^8.0.1"
@@ -15210,17 +15254,17 @@ __metadata:
     pathe: "npm:^1.1.1"
     picocolors: "npm:^1.0.0"
     std-env: "npm:^3.5.0"
-    strip-literal: "npm:^1.3.0"
+    strip-literal: "npm:^2.0.0"
     tinybench: "npm:^2.5.1"
-    tinypool: "npm:^0.8.1"
+    tinypool: "npm:^0.8.2"
     vite: "npm:^5.0.0"
-    vite-node: "npm:1.1.3"
+    vite-node: "npm:1.3.1"
     why-is-node-running: "npm:^2.2.2"
   peerDependencies:
     "@edge-runtime/vm": "*"
     "@types/node": ^18.0.0 || >=20.0.0
-    "@vitest/browser": ^1.0.0
-    "@vitest/ui": ^1.0.0
+    "@vitest/browser": 1.3.1
+    "@vitest/ui": 1.3.1
     happy-dom: "*"
     jsdom: "*"
   peerDependenciesMeta:
@@ -15238,7 +15282,7 @@ __metadata:
       optional: true
   bin:
     vitest: vitest.mjs
-  checksum: 5dc6010b14ab069f6483e343724bd4b6ff72c0ea1cca52b2f5d2ea2b0b7acc9584887b2d428af309c855b731d081dc32ec370032d2d40a20492ced5695950acb
+  checksum: 66d312a3dc12e67bba22d31332d939e89cd17d38531893c7b13b8826704564031c1dde795df2799b855660572c19a595301e920710c7775d072ee6332502efc5
   languageName: node
   linkType: hard
 
@@ -15656,10 +15700,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^1.10.2":
-  version: 1.10.2
-  resolution: "yaml@npm:1.10.2"
-  checksum: 5c28b9eb7adc46544f28d9a8d20c5b3cb1215a886609a2fd41f51628d8aaa5878ccd628b755dbcd29f6bb4921bd04ffbc6dcc370689bb96e594e2f9813d2605f
+"yaml@npm:^2.3.4":
+  version: 2.4.0
+  resolution: "yaml@npm:2.4.0"
+  bin:
+    yaml: bin.mjs
+  checksum: 97ab0b5a0714c92e4dd75120a6a63e470b0adc282afae0a701bf38f8c42cbf6429fcd6aca883e3a63c68936ab841862e6c69e2d66d355c3e4fc7cfd346af2108
   languageName: node
   linkType: hard