From 2e3d444c9bc2928c528e11e915ee5e55e642afde Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Thu, 18 Jul 2024 08:56:35 +0200
Subject: [PATCH] chore(ui-preset,icons,toolbox): Update dark mode theme
 (#8168)

* run scripts

* chore(ui-preset,icons): Update dark mode theme

* fix nameing of icon
---
 .../__tests__/ai-assistent.spec.tsx           |  17 +
 .../src/components/__tests__/book.spec.tsx    |  17 +
 .../components/__tests__/bookmarks.spec.tsx   |  17 +
 .../__tests__/check-circle.spec.tsx           |  23 +-
 .../__tests__/circle-arrow-up.spec.tsx        |  17 +
 .../src/components/__tests__/glasses.spec.tsx |  17 +
 .../components/__tests__/grid-list.spec.tsx   |  17 +
 .../src/components/__tests__/history.spec.tsx |  17 +
 .../__tests__/magnifier-alert.spec.tsx        |  17 +
 .../components/__tests__/pen-plus.spec.tsx    |  17 +
 .../components/__tests__/shopping.spec.tsx    |  17 +
 .../__tests__/stack-perspective.spec.tsx      |  17 +
 .../src/components/__tests__/trophy.spec.tsx  |  17 +
 .../components/__tests__/truck-fast.spec.tsx  |  17 +
 .../icons/src/components/adjustments-done.tsx |   2 +-
 .../icons/src/components/ai-assistent.tsx     | 385 ++++++++++++++++++
 .../src/components/arrow-down-circle.tsx      |  19 +-
 .../icons/src/components/arrow-path-mini.tsx  |   6 +-
 .../icons/src/components/arrow-path.tsx       |   6 +-
 .../icons/src/components/book.tsx             |  33 ++
 .../icons/src/components/bookmarks.tsx        |  33 ++
 .../icons/src/components/check-circle.tsx     |  24 +-
 .../chevron-double-right-mini-solid.tsx       |  13 +-
 .../icons/src/components/circle-arrow-up.tsx  |  33 ++
 .../src/components/ellipse-blue-solid.tsx     |   2 +-
 .../src/components/ellipse-purple-solid.tsx   |   2 +-
 .../icons/src/components/eye-slash.tsx        |  13 +-
 .../icons/src/components/eye.tsx              |  12 +-
 .../icons/src/components/flying-box.tsx       |  21 +-
 .../icons/src/components/glasses.tsx          |  33 ++
 .../icons/src/components/grid-list.tsx        |  26 ++
 .../icons/src/components/history.tsx          |  33 ++
 .../icons/src/components/index.ts             |  13 +
 .../icons/src/components/link.tsx             |  20 +-
 .../icons/src/components/magnifier-alert.tsx  |  25 ++
 .../icons/src/components/map-pin.tsx          |  11 +-
 .../icons/src/components/medusa.tsx           |   2 +-
 .../icons/src/components/pen-plus.tsx         |  26 ++
 .../icons/src/components/shopping.tsx         |  35 ++
 .../src/components/square-blue-solid.tsx      |   2 +-
 .../src/components/square-purple-solid.tsx    |   2 +-
 .../src/components/stack-perspective.tsx      |  26 ++
 .../icons/src/components/trophy.tsx           |  33 ++
 .../icons/src/components/truck-fast.tsx       |  34 ++
 .../toolbox/src/transformers/transform-svg.ts |   2 +-
 .../ui-preset/src/theme/extension/theme.ts    |  34 +-
 .../ui-preset/src/theme/tokens/colors.ts      |  62 +--
 .../ui-preset/src/theme/tokens/effects.ts     |  20 +-
 48 files changed, 1124 insertions(+), 163 deletions(-)
 create mode 100644 packages/design-system/icons/src/components/__tests__/ai-assistent.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/book.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/bookmarks.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/circle-arrow-up.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/glasses.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/grid-list.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/history.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/magnifier-alert.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/pen-plus.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/shopping.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/stack-perspective.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/trophy.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/__tests__/truck-fast.spec.tsx
 create mode 100644 packages/design-system/icons/src/components/ai-assistent.tsx
 create mode 100644 packages/design-system/icons/src/components/book.tsx
 create mode 100644 packages/design-system/icons/src/components/bookmarks.tsx
 create mode 100644 packages/design-system/icons/src/components/circle-arrow-up.tsx
 create mode 100644 packages/design-system/icons/src/components/glasses.tsx
 create mode 100644 packages/design-system/icons/src/components/grid-list.tsx
 create mode 100644 packages/design-system/icons/src/components/history.tsx
 create mode 100644 packages/design-system/icons/src/components/magnifier-alert.tsx
 create mode 100644 packages/design-system/icons/src/components/pen-plus.tsx
 create mode 100644 packages/design-system/icons/src/components/shopping.tsx
 create mode 100644 packages/design-system/icons/src/components/stack-perspective.tsx
 create mode 100644 packages/design-system/icons/src/components/trophy.tsx
 create mode 100644 packages/design-system/icons/src/components/truck-fast.tsx

diff --git a/packages/design-system/icons/src/components/__tests__/ai-assistent.spec.tsx b/packages/design-system/icons/src/components/__tests__/ai-assistent.spec.tsx
new file mode 100644
index 0000000000..49767fa48a
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/ai-assistent.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import AiAssistent from "../ai-assistent"
+
+  describe("AiAssistent", () => {
+    it("should render the icon without errors", async () => {
+      render(<AiAssistent data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/book.spec.tsx b/packages/design-system/icons/src/components/__tests__/book.spec.tsx
new file mode 100644
index 0000000000..696626d50e
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/book.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Book from "../book"
+
+  describe("Book", () => {
+    it("should render the icon without errors", async () => {
+      render(<Book data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/bookmarks.spec.tsx b/packages/design-system/icons/src/components/__tests__/bookmarks.spec.tsx
new file mode 100644
index 0000000000..c21c1ae71c
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/bookmarks.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Bookmarks from "../bookmarks"
+
+  describe("Bookmarks", () => {
+    it("should render the icon without errors", async () => {
+      render(<Bookmarks data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/check-circle.spec.tsx b/packages/design-system/icons/src/components/__tests__/check-circle.spec.tsx
index 8e58c22e51..21692ba4a1 100644
--- a/packages/design-system/icons/src/components/__tests__/check-circle.spec.tsx
+++ b/packages/design-system/icons/src/components/__tests__/check-circle.spec.tsx
@@ -1,16 +1,17 @@
-import * as React from "react"
-import { cleanup, render, screen } from "@testing-library/react"
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
 
-import CheckCircle from "../check-circle"
+  import CheckCircle from "../check-circle"
 
-describe("CheckCircle", () => {
-  it("should render the icon without errors", async () => {
-    render(<CheckCircle data-testid="icon" />)
+  describe("CheckCircle", () => {
+    it("should render the icon without errors", async () => {
+      render(<CheckCircle data-testid="icon" />)
 
-    const svgElement = screen.getByTestId("icon")
 
-    expect(svgElement).toBeInTheDocument()
+      const svgElement = screen.getByTestId("icon")
 
-    cleanup()
-  })
-})
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/circle-arrow-up.spec.tsx b/packages/design-system/icons/src/components/__tests__/circle-arrow-up.spec.tsx
new file mode 100644
index 0000000000..8893ac8ae4
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/circle-arrow-up.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CircleArrowUp from "../circle-arrow-up"
+
+  describe("CircleArrowUp", () => {
+    it("should render the icon without errors", async () => {
+      render(<CircleArrowUp data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/glasses.spec.tsx b/packages/design-system/icons/src/components/__tests__/glasses.spec.tsx
new file mode 100644
index 0000000000..5060b44c86
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/glasses.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Glasses from "../glasses"
+
+  describe("Glasses", () => {
+    it("should render the icon without errors", async () => {
+      render(<Glasses data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/grid-list.spec.tsx b/packages/design-system/icons/src/components/__tests__/grid-list.spec.tsx
new file mode 100644
index 0000000000..9a0e4e48fd
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/grid-list.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import GridList from "../grid-list"
+
+  describe("GridList", () => {
+    it("should render the icon without errors", async () => {
+      render(<GridList data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/history.spec.tsx b/packages/design-system/icons/src/components/__tests__/history.spec.tsx
new file mode 100644
index 0000000000..5b19221a02
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/history.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import History from "../history"
+
+  describe("History", () => {
+    it("should render the icon without errors", async () => {
+      render(<History data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/magnifier-alert.spec.tsx b/packages/design-system/icons/src/components/__tests__/magnifier-alert.spec.tsx
new file mode 100644
index 0000000000..0af58fab13
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/magnifier-alert.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import MagnifierAlert from "../magnifier-alert"
+
+  describe("MagnifierAlert", () => {
+    it("should render the icon without errors", async () => {
+      render(<MagnifierAlert data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/pen-plus.spec.tsx b/packages/design-system/icons/src/components/__tests__/pen-plus.spec.tsx
new file mode 100644
index 0000000000..07e43d48e9
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/pen-plus.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import PenPlus from "../pen-plus"
+
+  describe("PenPlus", () => {
+    it("should render the icon without errors", async () => {
+      render(<PenPlus data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/shopping.spec.tsx b/packages/design-system/icons/src/components/__tests__/shopping.spec.tsx
new file mode 100644
index 0000000000..0068bcd8ca
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/shopping.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Shopping from "../shopping"
+
+  describe("Shopping", () => {
+    it("should render the icon without errors", async () => {
+      render(<Shopping data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/stack-perspective.spec.tsx b/packages/design-system/icons/src/components/__tests__/stack-perspective.spec.tsx
new file mode 100644
index 0000000000..4ecf0a1947
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/stack-perspective.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import StackPerspective from "../stack-perspective"
+
+  describe("StackPerspective", () => {
+    it("should render the icon without errors", async () => {
+      render(<StackPerspective data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/trophy.spec.tsx b/packages/design-system/icons/src/components/__tests__/trophy.spec.tsx
new file mode 100644
index 0000000000..5178bd7586
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/trophy.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Trophy from "../trophy"
+
+  describe("Trophy", () => {
+    it("should render the icon without errors", async () => {
+      render(<Trophy data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/__tests__/truck-fast.spec.tsx b/packages/design-system/icons/src/components/__tests__/truck-fast.spec.tsx
new file mode 100644
index 0000000000..72c4f5df6b
--- /dev/null
+++ b/packages/design-system/icons/src/components/__tests__/truck-fast.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import TruckFast from "../truck-fast"
+
+  describe("TruckFast", () => {
+    it("should render the icon without errors", async () => {
+      render(<TruckFast data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
\ No newline at end of file
diff --git a/packages/design-system/icons/src/components/adjustments-done.tsx b/packages/design-system/icons/src/components/adjustments-done.tsx
index d9b92a521c..32e02151da 100644
--- a/packages/design-system/icons/src/components/adjustments-done.tsx
+++ b/packages/design-system/icons/src/components/adjustments-done.tsx
@@ -16,7 +16,7 @@ const AdjustmentsDone = React.forwardRef<SVGSVGElement, IconProps>(
             fill={color}
             d="M8.5 2.528h-.778a.75.75 0 1 0 0 1.5h1.08a4 4 0 0 1-.302-1.5M10.695 6.07a4 4 0 0 1-1.21-.94.75.75 0 0 0-.29.592V6.75H1.5a.75.75 0 0 0 0 1.5h7.694v1.028a.75.75 0 0 0 1.5 0zM5.806 1.5a.75.75 0 1 0-1.5 0v1.028H1.5a.75.75 0 0 0 0 1.5h2.806v1.028a.75.75 0 0 0 1.5 0V1.5M12.611 6.75a.75.75 0 0 0 0 1.5h.889a.75.75 0 0 0 0-1.5zM6.972 11.722a.75.75 0 0 1 .75-.75H13.5a.75.75 0 1 1 0 1.5H7.722a.75.75 0 0 1-.75-.75M1.5 10.972a.75.75 0 0 0 0 1.5h2.806V13.5a.75.75 0 0 0 1.5 0V9.944a.75.75 0 1 0-1.5 0v1.028z"
           />
-          <circle cx={12.5} cy={2.5} r={2.5} fill="#3B82F6" />
+          <circle cx={12.5} cy={2.5} r={2.5} fill="#60A5FA" />
           <circle
             cx={12.5}
             cy={2.5}
diff --git a/packages/design-system/icons/src/components/ai-assistent.tsx b/packages/design-system/icons/src/components/ai-assistent.tsx
new file mode 100644
index 0000000000..b5f6ae411c
--- /dev/null
+++ b/packages/design-system/icons/src/components/ai-assistent.tsx
@@ -0,0 +1,385 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={19}
+        height={19}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g filter="url(#a)">
+          <circle cx={9.5} cy={8.457} r={7.414} fill="url(#b)" />
+          <circle cx={9.5} cy={8.457} r={7.414} fill="url(#c)" />
+        </g>
+        <g
+          filter="url(#d)"
+          opacity={0.8}
+          style={{
+            mixBlendMode: "plus-lighter",
+          }}
+        >
+          <circle cx={9.5} cy={5.85} r={4.171} fill="url(#e)" />
+          <circle
+            cx={9.5}
+            cy={5.85}
+            r={4.071}
+            stroke="url(#f)"
+            strokeWidth={0.2}
+          />
+        </g>
+        <g
+          filter="url(#g)"
+          opacity={0.8}
+          style={{
+            mixBlendMode: "plus-lighter",
+          }}
+        >
+          <circle cx={12.107} cy={9.5} r={4.171} fill="url(#h)" />
+          <circle
+            cx={12.107}
+            cy={9.5}
+            r={4.071}
+            stroke="url(#i)"
+            strokeWidth={0.2}
+          />
+        </g>
+        <g
+          filter="url(#j)"
+          opacity={0.8}
+          style={{
+            mixBlendMode: "plus-lighter",
+          }}
+          transform="matrix(-1.0428 0 0 1.0428 11.064 3.243)"
+        >
+          <circle cx={4} cy={4} r={4} fill="url(#k)" />
+          <circle cx={4} cy={4} r={3.9} stroke="url(#l)" strokeWidth={0.2} />
+        </g>
+        <g
+          filter="url(#m)"
+          opacity={0.8}
+          style={{
+            mixBlendMode: "plus-lighter",
+          }}
+          transform="scale(1.0428 -1.0428)rotate(90 12.61 .5)"
+        >
+          <circle cx={4} cy={4} r={4} fill="url(#n)" />
+          <circle cx={4} cy={4} r={3.9} stroke="url(#o)" strokeWidth={0.2} />
+        </g>
+        <g
+          filter="url(#p)"
+          opacity={0.8}
+          style={{
+            mixBlendMode: "plus-lighter",
+          }}
+          transform="matrix(-1.0428 0 0 1.0428 13.67 6.893)"
+        >
+          <circle cx={4} cy={4} r={4} fill="url(#q)" />
+          <circle cx={4} cy={4} r={3.9} stroke="url(#r)" strokeWidth={0.2} />
+        </g>
+        <defs>
+          <linearGradient
+            id="b"
+            x1={9.589}
+            x2={9.589}
+            y1={1.087}
+            y2={15.916}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset={0.2} stopColor="#C686FF" />
+            <stop offset={0.8} stopColor="#8D99FF" />
+          </linearGradient>
+          <linearGradient
+            id="c"
+            x1={5.017}
+            x2={13.721}
+            y1={8.468}
+            y2={11.691}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#FF6778" stopOpacity={0.8} />
+            <stop offset={1} stopColor="#fff" stopOpacity={0.1} />
+          </linearGradient>
+          <linearGradient
+            id="e"
+            x1={9.728}
+            x2={13.899}
+            y1={5.922}
+            y2={5.922}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#8D99FF" stopOpacity={0.1} />
+            <stop offset={1} stopColor="#fff" stopOpacity={0.3} />
+          </linearGradient>
+          <linearGradient
+            id="f"
+            x1={13.899}
+            x2={9.728}
+            y1={5.922}
+            y2={5.922}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#fff" />
+            <stop offset={1} stopColor="#fff" stopOpacity={0} />
+          </linearGradient>
+          <linearGradient
+            id="h"
+            x1={12.446}
+            x2={16.618}
+            y1={9.728}
+            y2={9.728}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#8D99FF" stopOpacity={0.1} />
+            <stop offset={1} stopColor="#fff" stopOpacity={0.3} />
+          </linearGradient>
+          <linearGradient
+            id="i"
+            x1={16.618}
+            x2={12.446}
+            y1={9.728}
+            y2={9.728}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#8D99FF" />
+            <stop offset={1} stopColor="#8D99FF" stopOpacity={0} />
+          </linearGradient>
+          <linearGradient
+            id="k"
+            x1={4}
+            x2={8}
+            y1={4}
+            y2={4}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#8D99FF" stopOpacity={0.1} />
+            <stop offset={1} stopColor="#fff" stopOpacity={0.3} />
+          </linearGradient>
+          <linearGradient
+            id="l"
+            x1={8}
+            x2={4}
+            y1={4}
+            y2={4}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#8D99FF" />
+            <stop offset={1} stopColor="#8D99FF" stopOpacity={0} />
+          </linearGradient>
+          <linearGradient
+            id="n"
+            x1={4}
+            x2={8}
+            y1={4}
+            y2={4}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#8D99FF" stopOpacity={0.1} />
+            <stop offset={1} stopColor="#fff" stopOpacity={0.3} />
+          </linearGradient>
+          <linearGradient
+            id="o"
+            x1={8}
+            x2={4}
+            y1={4}
+            y2={4}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#8D99FF" />
+            <stop offset={1} stopColor="#8D99FF" stopOpacity={0} />
+          </linearGradient>
+          <linearGradient
+            id="q"
+            x1={4}
+            x2={8}
+            y1={4}
+            y2={4}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#8D99FF" stopOpacity={0.1} />
+            <stop offset={1} stopColor="#fff" stopOpacity={0.3} />
+          </linearGradient>
+          <linearGradient
+            id="r"
+            x1={8}
+            x2={4}
+            y1={4}
+            y2={4}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#fff" />
+            <stop offset={1} stopColor="#fff" stopOpacity={0} />
+          </linearGradient>
+          <filter
+            id="a"
+            width={19}
+            height={19}
+            x={0}
+            y={0}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dy={1} />
+            <feGaussianBlur stdDeviation={1} />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+            <feBlend
+              in2="BackgroundImageFix"
+              result="effect1_dropShadow_7446_46535"
+            />
+            <feBlend
+              in="SourceGraphic"
+              in2="effect1_dropShadow_7446_46535"
+              result="shape"
+            />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dx={-0.25} dy={-0.25} />
+            <feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" />
+            <feBlend in2="shape" result="effect2_innerShadow_7446_46535" />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dx={0.25} dy={0.25} />
+            <feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0" />
+            <feBlend
+              in2="effect2_innerShadow_7446_46535"
+              result="effect3_innerShadow_7446_46535"
+            />
+            <feColorMatrix
+              in="SourceAlpha"
+              result="hardAlpha"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            />
+            <feOffset dx={1} dy={1} />
+            <feGaussianBlur stdDeviation={1} />
+            <feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
+            <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0" />
+            <feBlend
+              in2="effect3_innerShadow_7446_46535"
+              result="effect4_innerShadow_7446_46535"
+            />
+          </filter>
+          <filter
+            id="d"
+            width={9.385}
+            height={9.385}
+            x={4.807}
+            y={1.158}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              result="effect1_foregroundBlur_7446_46535"
+              stdDeviation={0.25}
+            />
+          </filter>
+          <filter
+            id="g"
+            width={9.385}
+            height={9.385}
+            x={7.414}
+            y={4.807}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              result="effect1_foregroundBlur_7446_46535"
+              stdDeviation={0.25}
+            />
+          </filter>
+          <filter
+            id="j"
+            width={9.385}
+            height={9.385}
+            x={2.2}
+            y={2.722}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              result="effect1_foregroundBlur_7446_46535"
+              stdDeviation={0.25}
+            />
+          </filter>
+          <filter
+            id="m"
+            width={9.385}
+            height={9.385}
+            x={4.807}
+            y={3.765}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              result="effect1_foregroundBlur_7446_46535"
+              stdDeviation={0.25}
+            />
+          </filter>
+          <filter
+            id="p"
+            width={9.385}
+            height={9.385}
+            x={4.807}
+            y={6.372}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              result="effect1_foregroundBlur_7446_46535"
+              stdDeviation={0.25}
+            />
+          </filter>
+        </defs>
+      </svg>
+    )
+  }
+)
+AiAssistent.displayName = "AiAssistent"
+export default AiAssistent
diff --git a/packages/design-system/icons/src/components/arrow-down-circle.tsx b/packages/design-system/icons/src/components/arrow-down-circle.tsx
index 037c065540..a940a9e0d2 100644
--- a/packages/design-system/icons/src/components/arrow-down-circle.tsx
+++ b/packages/design-system/icons/src/components/arrow-down-circle.tsx
@@ -11,21 +11,10 @@ const ArrowDownCircle = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          clipPath="url(#a)"
-        >
-          <path d="M9.722 8.167 7.5 10.389 5.278 8.167M7.5 10.389V4.61" />
-          <path d="M7.5 13.945a6.444 6.444 0 1 0 0-12.89 6.444 6.444 0 0 0 0 12.89" />
-        </g>
-        <defs>
-          <clipPath id="a">
-            <path fill="#fff" d="M0 0h15v15H0z" />
-          </clipPath>
-        </defs>
+        <path
+          fill={color}
+          d="M7.5.389C3.58.389.389 3.579.389 7.5s3.19 7.111 7.111 7.111 7.111-3.19 7.111-7.111S11.421.389 7.5.389m2.693 8.249L7.971 10.86a.665.665 0 0 1-.942 0L4.807 8.638a.667.667 0 1 1 .943-.943l1.084 1.084V4.611a.667.667 0 0 1 1.334 0V8.78l1.084-1.084a.667.667 0 1 1 .943.943z"
+        />
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/arrow-path-mini.tsx b/packages/design-system/icons/src/components/arrow-path-mini.tsx
index cf870ea70e..e4a23e6f46 100644
--- a/packages/design-system/icons/src/components/arrow-path-mini.tsx
+++ b/packages/design-system/icons/src/components/arrow-path-mini.tsx
@@ -18,9 +18,9 @@ const ArrowPathMini = React.forwardRef<SVGSVGElement, IconProps>(
           strokeWidth={1.5}
           clipPath="url(#a)"
         >
-          <path d="M13.944 7.5A6.444 6.444 0 0 1 1.536 9.944" />
-          <path d="m1.171 12.562.363-2.618 2.617.362M1.056 7.5a6.445 6.445 0 0 1 12.409-2.444" />
-          <path d="m13.829 2.438-.363 2.618-2.617-.362" />
+          <path d="M4.752 9.616 1.935 8.86l-.755 2.817" />
+          <path d="M13.136 8.53a5.729 5.729 0 0 1-11.196.357M10.248 5.384l2.817.755.755-2.817" />
+          <path d="M1.864 6.469a5.729 5.729 0 0 1 11.184-.403" />
         </g>
         <defs>
           <clipPath id="a">
diff --git a/packages/design-system/icons/src/components/arrow-path.tsx b/packages/design-system/icons/src/components/arrow-path.tsx
index 680cfff7de..4f268ffcf4 100644
--- a/packages/design-system/icons/src/components/arrow-path.tsx
+++ b/packages/design-system/icons/src/components/arrow-path.tsx
@@ -18,9 +18,9 @@ const ArrowPath = React.forwardRef<SVGSVGElement, IconProps>(
           strokeWidth={1.5}
           clipPath="url(#a)"
         >
-          <path d="M13.944 7.5A6.444 6.444 0 0 1 1.536 9.944" />
-          <path d="m1.171 12.562.363-2.618 2.617.362M1.056 7.5a6.445 6.445 0 0 1 12.408-2.444" />
-          <path d="m13.829 2.438-.363 2.618-2.617-.362" />
+          <path d="M4.752 9.616 1.935 8.86l-.755 2.817" />
+          <path d="M13.136 8.53a5.729 5.729 0 0 1-11.196.357M10.248 5.384l2.817.755.755-2.817" />
+          <path d="M1.864 6.469a5.729 5.729 0 0 1 11.184-.403" />
         </g>
         <defs>
           <clipPath id="a">
diff --git a/packages/design-system/icons/src/components/book.tsx b/packages/design-system/icons/src/components/book.tsx
new file mode 100644
index 0000000000..eae6666204
--- /dev/null
+++ b/packages/design-system/icons/src/components/book.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Book = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M4.611 1.056v9.777M1.944 12.389V2.833c0-.982.796-1.777 1.778-1.777h9.334v9.777"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M4.167 13.945H3.5a1.556 1.556 0 1 1 0-3.111h9.556c-.57.75-.653 2.264 0 3.11zM7.278 4.167h3.11M7.278 6.834h3.11"
+        />
+      </svg>
+    )
+  }
+)
+Book.displayName = "Book"
+export default Book
diff --git a/packages/design-system/icons/src/components/bookmarks.tsx b/packages/design-system/icons/src/components/bookmarks.tsx
new file mode 100644
index 0000000000..c8765e34bc
--- /dev/null
+++ b/packages/design-system/icons/src/components/bookmarks.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Bookmarks = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m10.389 13.944-4.222-3.11-4.223 3.11V5.5c0-.982.796-1.778 1.778-1.778h4.89c.981 0 1.777.796 1.777 1.778z"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M5.528 1.278c.255-.141.548-.222.86-.222h4.89c.982 0 1.778.795 1.778 1.777v8.445"
+        />
+      </svg>
+    )
+  }
+)
+Bookmarks.displayName = "Bookmarks"
+export default Bookmarks
diff --git a/packages/design-system/icons/src/components/check-circle.tsx b/packages/design-system/icons/src/components/check-circle.tsx
index f2fb872d1f..4df7ed24e1 100644
--- a/packages/design-system/icons/src/components/check-circle.tsx
+++ b/packages/design-system/icons/src/components/check-circle.tsx
@@ -4,26 +4,26 @@ const CheckCircle = React.forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", ...props }, ref) => {
     return (
       <svg
-        width="16"
-        height="15"
-        viewBox="0 0 16 15"
-        fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
         {...props}
       >
         <path
-          d="M8.41666 13.9446C11.9758 13.9446 14.8611 11.0593 14.8611 7.50011C14.8611 3.94094 11.9758 1.05566 8.41666 1.05566C4.85749 1.05566 1.97221 3.94094 1.97221 7.50011C1.97221 11.0593 4.85749 13.9446 8.41666 13.9446Z"
           stroke={color}
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.5 13.945a6.444 6.444 0 1 0 0-12.89 6.444 6.444 0 0 0 0 12.89"
         />
         <path
-          d="M5.52777 7.72233L7.52777 9.94455L11.3055 5.05566"
           stroke={color}
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m4.611 7.722 2 2.223 3.778-4.89"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/chevron-double-right-mini-solid.tsx b/packages/design-system/icons/src/components/chevron-double-right-mini-solid.tsx
index de03da95c2..d4ef0554fd 100644
--- a/packages/design-system/icons/src/components/chevron-double-right-mini-solid.tsx
+++ b/packages/design-system/icons/src/components/chevron-double-right-mini-solid.tsx
@@ -11,20 +11,13 @@ const ChevronDoubleRightMiniSolid = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g
+        <path
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          clipPath="url(#a)"
-        >
-          <path d="M8.167 3.722 11.944 7.5l-3.777 3.778M3.944 3.722 7.722 7.5l-3.778 3.778" />
-        </g>
-        <defs>
-          <clipPath id="a">
-            <path fill="#fff" d="M0 0h15v15H0z" />
-          </clipPath>
-        </defs>
+          d="M8.167 3.722 11.944 7.5l-3.777 3.778M3.944 3.722 7.722 7.5l-3.778 3.778"
+        />
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/circle-arrow-up.tsx b/packages/design-system/icons/src/components/circle-arrow-up.tsx
new file mode 100644
index 0000000000..07e9f9f23e
--- /dev/null
+++ b/packages/design-system/icons/src/components/circle-arrow-up.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CircleArrowUp = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M5.278 6.834 7.5 4.61l2.222 2.223M7.5 4.611v5.778"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.5 13.945a6.444 6.444 0 1 0 0-12.89 6.444 6.444 0 0 0 0 12.89"
+        />
+      </svg>
+    )
+  }
+)
+CircleArrowUp.displayName = "CircleArrowUp"
+export default CircleArrowUp
diff --git a/packages/design-system/icons/src/components/ellipse-blue-solid.tsx b/packages/design-system/icons/src/components/ellipse-blue-solid.tsx
index e38c3333c7..a2efa504be 100644
--- a/packages/design-system/icons/src/components/ellipse-blue-solid.tsx
+++ b/packages/design-system/icons/src/components/ellipse-blue-solid.tsx
@@ -13,7 +13,7 @@ const EllipseBlueSolid = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <g clipPath="url(#a)" filter="url(#b)">
           <rect width={10} height={10} x={2.5} y={2.5} fill="#fff" rx={5} />
-          <circle cx={7.5} cy={7.5} r={3} fill="#3B82F6" />
+          <circle cx={7.5} cy={7.5} r={3} fill="#60A5FA" />
         </g>
         <defs>
           <clipPath id="a">
diff --git a/packages/design-system/icons/src/components/ellipse-purple-solid.tsx b/packages/design-system/icons/src/components/ellipse-purple-solid.tsx
index fadf321d70..be7601945f 100644
--- a/packages/design-system/icons/src/components/ellipse-purple-solid.tsx
+++ b/packages/design-system/icons/src/components/ellipse-purple-solid.tsx
@@ -13,7 +13,7 @@ const EllipsePurpleSolid = React.forwardRef<SVGSVGElement, IconProps>(
       >
         <g clipPath="url(#a)" filter="url(#b)">
           <rect width={10} height={10} x={2.5} y={2.5} fill="#fff" rx={5} />
-          <circle cx={7.5} cy={7.5} r={3} fill="#8B5CF6" />
+          <circle cx={7.5} cy={7.5} r={3} fill="#A78BFA" />
         </g>
         <defs>
           <clipPath id="a">
diff --git a/packages/design-system/icons/src/components/eye-slash.tsx b/packages/design-system/icons/src/components/eye-slash.tsx
index 2ecd91f360..95ae1d2724 100644
--- a/packages/design-system/icons/src/components/eye-slash.tsx
+++ b/packages/design-system/icons/src/components/eye-slash.tsx
@@ -11,15 +11,10 @@ const EyeSlash = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          clipPath="url(#a)"
-        >
-          <path d="M12.778 5.364c.357.4.645.792.866 1.129.4.607.4 1.406 0 2.013-.905 1.372-2.9 3.66-6.144 3.66q-.732-.002-1.38-.143M3.905 11.095C2.7 10.316 1.86 9.27 1.356 8.506c-.4-.607-.4-1.406 0-2.013.905-1.372 2.9-3.66 6.144-3.66 1.44 0 2.634.45 3.595 1.071" />
-          <path d="M9.792 8.35A2.45 2.45 0 0 1 8.35 9.792M5.771 9.229A2.444 2.444 0 1 1 9.23 5.77M1.278 13.722 13.722 1.278" />
+        <g fill={color} clipPath="url(#a)">
+          <path d="M7.5 10.389a2.889 2.889 0 1 0 0-5.778 2.889 2.889 0 0 0 0 5.778" />
+          <path d="M7.5 12.833a7.3 7.3 0 0 1-1.52-.159.667.667 0 0 1 .28-1.304c.4.087.817.13 1.24.13 2.934 0 4.76-2.106 5.587-3.36a1.18 1.18 0 0 0 0-1.28 9 9 0 0 0-.808-1.052.667.667 0 1 1 .997-.887c.333.375.644.78.924 1.206.55.833.55 1.912 0 2.746-.975 1.48-3.142 3.96-6.7 3.96M3.904 11.761a.66.66 0 0 1-.36-.106C2.234 10.809 1.328 9.675.8 8.873a2.49 2.49 0 0 1 0-2.746c.975-1.48 3.142-3.96 6.7-3.96 1.415 0 2.747.396 3.957 1.178a.666.666 0 1 1-.723 1.12A5.87 5.87 0 0 0 7.5 3.501c-2.934 0-4.76 2.106-5.588 3.36a1.18 1.18 0 0 0 0 1.28c.459.694 1.24 1.674 2.354 2.395a.667.667 0 0 1-.362 1.226" />
+          <path d="M1.278 14.389a.667.667 0 0 1-.471-1.139L13.25.807a.667.667 0 1 1 .943.943L1.75 14.193c-.13.13-.3.196-.471.196" />
         </g>
         <defs>
           <clipPath id="a">
diff --git a/packages/design-system/icons/src/components/eye.tsx b/packages/design-system/icons/src/components/eye.tsx
index 7ec4bab59e..d8ed36de86 100644
--- a/packages/design-system/icons/src/components/eye.tsx
+++ b/packages/design-system/icons/src/components/eye.tsx
@@ -11,15 +11,9 @@ const Eye = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          clipPath="url(#a)"
-        >
-          <path d="M1.356 8.506c-.4-.607-.4-1.406 0-2.013.905-1.372 2.9-3.66 6.144-3.66s5.24 2.287 6.144 3.66c.4.607.4 1.406 0 2.013-.905 1.372-2.9 3.66-6.144 3.66S2.26 9.88 1.356 8.507" />
-          <path d="M7.5 9.944a2.444 2.444 0 1 0 0-4.888 2.444 2.444 0 0 0 0 4.888" />
+        <g fill={color} clipPath="url(#a)">
+          <path d="M7.5 12.833c-3.558 0-5.725-2.48-6.7-3.96a2.49 2.49 0 0 1 0-2.747c.975-1.48 3.142-3.96 6.7-3.96s5.725 2.48 6.7 3.96a2.49 2.49 0 0 1 0 2.746c-.975 1.48-3.142 3.961-6.7 3.961m0-9.333c-2.934 0-4.76 2.106-5.588 3.36a1.18 1.18 0 0 0 0 1.28C2.74 9.393 4.566 11.5 7.5 11.5s4.76-2.106 5.588-3.36a1.18 1.18 0 0 0 0-1.28C12.26 5.607 10.434 3.5 7.5 3.5" />
+          <path d="M7.5 10.389a2.889 2.889 0 1 0 0-5.778 2.889 2.889 0 0 0 0 5.778" />
         </g>
         <defs>
           <clipPath id="a">
diff --git a/packages/design-system/icons/src/components/flying-box.tsx b/packages/design-system/icons/src/components/flying-box.tsx
index ee35820508..aeeff37be7 100644
--- a/packages/design-system/icons/src/components/flying-box.tsx
+++ b/packages/design-system/icons/src/components/flying-box.tsx
@@ -11,21 +11,20 @@ const FlyingBox = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g
+        <path
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          clipPath="url(#a)"
-        >
-          <path d="M1.78 4.232h-.615M2.394 2.388H1.165M10.71 12.612H2.105M10.93 2.388l-.606 2.02a.615.615 0 0 1-.59.44H7.823a.615.615 0 0 1-.589-.792l.5-1.668M5.313 8.157H6.62" />
-          <path d="M11.03 10.248H4.522c-.989 0-1.697-1.015-1.413-2.024l1.327-4.716c.188-.664.762-1.12 1.414-1.12h6.508c.989 0 1.697 1.016 1.414 2.024l-1.328 4.716c-.188.665-.762 1.12-1.414 1.12" />
-        </g>
-        <defs>
-          <clipPath id="a">
-            <path fill="#fff" d="M0 0h15v15H0z" />
-          </clipPath>
-        </defs>
+          d="M7.5 1.5v5.333M11.278 4.167H3.722c-.982 0-1.778.796-1.778 1.778v5.333c0 .982.796 1.778 1.778 1.778h7.556c.982 0 1.778-.796 1.778-1.778V5.945c0-.982-.796-1.778-1.778-1.778"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m2.167 5.086 1.288-2.598c.3-.605.917-.988 1.593-.988h4.904c.676 0 1.293.383 1.593.988l1.288 2.599M4.167 10.833h1.777"
+        />
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/glasses.tsx b/packages/design-system/icons/src/components/glasses.tsx
new file mode 100644
index 0000000000..dd634d5673
--- /dev/null
+++ b/packages/design-system/icons/src/components/glasses.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Glasses = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M6.389 9.5a1.112 1.112 0 0 1 2.222 0M1.134 8.857l1.01-5.492A1.778 1.778 0 0 1 4.68 2.133M13.866 8.857l-1.01-5.492a1.778 1.778 0 0 0-2.536-1.232"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M3.722 12.167a2.667 2.667 0 1 0 0-5.334 2.667 2.667 0 0 0 0 5.334M11.278 12.167a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.333"
+        />
+      </svg>
+    )
+  }
+)
+Glasses.displayName = "Glasses"
+export default Glasses
diff --git a/packages/design-system/icons/src/components/grid-list.tsx b/packages/design-system/icons/src/components/grid-list.tsx
new file mode 100644
index 0000000000..f896f4d20c
--- /dev/null
+++ b/packages/design-system/icons/src/components/grid-list.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const GridList = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M8.611 2.834h4.445M8.611 5.5h4.445M8.611 9.5h4.445M8.611 12.167h4.445M5.056 1.944H2.833a.89.89 0 0 0-.889.89v2.221c0 .491.398.89.89.89h2.222c.49 0 .888-.399.888-.89V2.833a.89.89 0 0 0-.888-.889M5.056 9.056H2.833a.89.89 0 0 0-.889.889v2.222c0 .49.398.889.89.889h2.222c.49 0 .888-.398.888-.89V9.946a.89.89 0 0 0-.888-.89"
+        />
+      </svg>
+    )
+  }
+)
+GridList.displayName = "GridList"
+export default GridList
diff --git a/packages/design-system/icons/src/components/history.tsx b/packages/design-system/icons/src/components/history.tsx
new file mode 100644
index 0000000000..11ff8f7f5b
--- /dev/null
+++ b/packages/design-system/icons/src/components/history.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const History = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.056 7.5a6.445 6.445 0 1 0 .48-2.444"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m1.171 2.438.363 2.618 2.617-.362M7.5 3.722V7.5l2.889 2"
+        />
+      </svg>
+    )
+  }
+)
+History.displayName = "History"
+export default History
diff --git a/packages/design-system/icons/src/components/index.ts b/packages/design-system/icons/src/components/index.ts
index 5ab2c58de8..911eb29bd1 100644
--- a/packages/design-system/icons/src/components/index.ts
+++ b/packages/design-system/icons/src/components/index.ts
@@ -3,6 +3,7 @@ export { default as AcademicCapSolid } from "./academic-cap-solid"
 export { default as AcademicCap } from "./academic-cap"
 export { default as AdjustmentsDone } from "./adjustments-done"
 export { default as Adjustments } from "./adjustments"
+export { default as AiAssistent } from "./ai-assistent"
 export { default as Apple } from "./apple"
 export { default as ArchiveBox } from "./archive-box"
 export { default as ArrowDownCircle } from "./arrow-down-circle"
@@ -43,6 +44,8 @@ export { default as BellAlert } from "./bell-alert"
 export { default as BoltSolid } from "./bolt-solid"
 export { default as Bolt } from "./bolt"
 export { default as BookOpen } from "./book-open"
+export { default as Book } from "./book"
+export { default as Bookmarks } from "./bookmarks"
 export { default as BottomToTop } from "./bottom-to-top"
 export { default as BugAntSolid } from "./bug-ant-solid"
 export { default as Bug } from "./bug"
@@ -81,6 +84,7 @@ export { default as ChevronRightMini } from "./chevron-right-mini"
 export { default as ChevronRight } from "./chevron-right"
 export { default as ChevronUpDown } from "./chevron-up-down"
 export { default as ChevronUpMini } from "./chevron-up-mini"
+export { default as CircleArrowUp } from "./circle-arrow-up"
 export { default as CircleDottedLine } from "./circle-dotted-line"
 export { default as CircleFilledSolid } from "./circle-filled-solid"
 export { default as CircleHalfSolid } from "./circle-half-solid"
@@ -151,11 +155,14 @@ export { default as Gatsby } from "./gatsby"
 export { default as GiftSolid } from "./gift-solid"
 export { default as Gift } from "./gift"
 export { default as Github } from "./github"
+export { default as Glasses } from "./glasses"
 export { default as GlobeEuropeSolid } from "./globe-europe-solid"
 export { default as GlobeEurope } from "./globe-europe"
 export { default as Google } from "./google"
+export { default as GridList } from "./grid-list"
 export { default as Hashtag } from "./hashtag"
 export { default as Heart } from "./heart"
+export { default as History } from "./history"
 export { default as InboxSolid } from "./inbox-solid"
 export { default as InformationCircleSolid } from "./information-circle-solid"
 export { default as InformationCircle } from "./information-circle"
@@ -179,6 +186,7 @@ export { default as Loader } from "./loader"
 export { default as LockClosedSolidMini } from "./lock-closed-solid-mini"
 export { default as LockClosedSolid } from "./lock-closed-solid"
 export { default as LockOpenSolid } from "./lock-open-solid"
+export { default as MagnifierAlert } from "./magnifier-alert"
 export { default as MagnifyingGlassMini } from "./magnifying-glass-mini"
 export { default as MagnifyingGlass } from "./magnifying-glass"
 export { default as MapPin } from "./map-pin"
@@ -195,6 +203,7 @@ export { default as NextJs } from "./next-js"
 export { default as OpenRectArrowOut } from "./open-rect-arrow-out"
 export { default as PaperClip } from "./paper-clip"
 export { default as PauseSolid } from "./pause-solid"
+export { default as PenPlus } from "./pen-plus"
 export { default as PencilSquareSolid } from "./pencil-square-solid"
 export { default as PencilSquare } from "./pencil-square"
 export { default as Pencil } from "./pencil"
@@ -228,6 +237,7 @@ export { default as Share } from "./share"
 export { default as ShoppingBag } from "./shopping-bag"
 export { default as ShoppingCartSolid } from "./shopping-cart-solid"
 export { default as ShoppingCart } from "./shopping-cart"
+export { default as Shopping } from "./shopping"
 export { default as SidebarLeft } from "./sidebar-left"
 export { default as SidebarRight } from "./sidebar-right"
 export { default as Slack } from "./slack"
@@ -248,6 +258,7 @@ export { default as SquareTwoStackSolid } from "./square-two-stack-solid"
 export { default as SquareTwoStack } from "./square-two-stack"
 export { default as SquaresPlusSolid } from "./squares-plus-solid"
 export { default as SquaresPlus } from "./squares-plus"
+export { default as StackPerspective } from "./stack-perspective"
 export { default as StarSolid } from "./star-solid"
 export { default as Star } from "./star"
 export { default as Stopwatch } from "./stopwatch"
@@ -274,6 +285,8 @@ export { default as TriangleRightMiniHover } from "./triangle-right-mini-hover"
 export { default as TriangleRightMini } from "./triangle-right-mini"
 export { default as TriangleUpMini } from "./triangle-up-mini"
 export { default as TrianglesMini } from "./triangles-mini"
+export { default as Trophy } from "./trophy"
+export { default as TruckFast } from "./truck-fast"
 export { default as TypescriptEx } from "./typescript-ex"
 export { default as Typescript } from "./typescript"
 export { default as UserGroup } from "./user-group"
diff --git a/packages/design-system/icons/src/components/link.tsx b/packages/design-system/icons/src/components/link.tsx
index 930e8d9d27..bce804bd59 100644
--- a/packages/design-system/icons/src/components/link.tsx
+++ b/packages/design-system/icons/src/components/link.tsx
@@ -11,20 +11,20 @@ const Link = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <path
+        <g
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          d="M7.056 5.568c-.313.15-.607.354-.865.614l-.01.009a3.14 3.14 0 0 0 0 4.444l1.934 1.933a3.14 3.14 0 0 0 4.445 0l.008-.008a3.14 3.14 0 0 0 0-4.445l-.827-.828"
-        />
-        <path
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={1.5}
-          d="M7.944 9.432c.313-.15.607-.354.865-.614l.01-.009a3.14 3.14 0 0 0 0-4.444L6.884 2.432a3.14 3.14 0 0 0-4.445 0l-.008.009a3.14 3.14 0 0 0 0 4.444l.827.828"
-        />
+          clipPath="url(#a)"
+        >
+          <path d="m6.44 3.965 1.59-1.591a3.25 3.25 0 1 1 4.597 4.596l-1.591 1.59M3.964 6.44l-1.59 1.59a3.25 3.25 0 1 0 4.596 4.597l1.59-1.591M5.909 9.09 9.091 5.91" />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
       </svg>
     )
   }
diff --git a/packages/design-system/icons/src/components/magnifier-alert.tsx b/packages/design-system/icons/src/components/magnifier-alert.tsx
new file mode 100644
index 0000000000..939c24485d
--- /dev/null
+++ b/packages/design-system/icons/src/components/magnifier-alert.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const MagnifierAlert = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill="#212121"
+          fillRule="evenodd"
+          d="M11.551.951a1.64 1.64 0 0 0-2.769 0L6.175 5.068c-.692 1.092.094 2.515 1.385 2.515h.384a.75.75 0 0 0 0-1.5H7.56a.139.139 0 0 1-.118-.213l2.607-4.116a.14.14 0 0 1 .235 0l2.607 4.116a.139.139 0 0 1-.117.213h-.385a.75.75 0 0 0 0 1.5h.385c1.29 0 2.076-1.423 1.384-2.515zm-6.05 2.633a3.695 3.695 0 1 0 3.14 5.64.75.75 0 0 1 1.275.791 5 5 0 0 1-.25.367l3.031 3.032a.75.75 0 1 1-1.06 1.06l-3.033-3.031A5.195 5.195 0 1 1 5.758 2.09a.75.75 0 1 1-.072 1.498 4 4 0 0 0-.186-.005m4.666-.612a.75.75 0 0 1 .75.75V5.5a.75.75 0 1 1-1.5 0V3.722a.75.75 0 0 1 .75-.75M11 7.806a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0"
+          clipRule="evenodd"
+        />
+      </svg>
+    )
+  }
+)
+MagnifierAlert.displayName = "MagnifierAlert"
+export default MagnifierAlert
diff --git a/packages/design-system/icons/src/components/map-pin.tsx b/packages/design-system/icons/src/components/map-pin.tsx
index 72424c9786..caa279cbfd 100644
--- a/packages/design-system/icons/src/components/map-pin.tsx
+++ b/packages/design-system/icons/src/components/map-pin.tsx
@@ -16,13 +16,14 @@ const MapPin = React.forwardRef<SVGSVGElement, IconProps>(
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          d="M12.637 5.959c0 2.33-3.047 6.073-4.448 7.672a.914.914 0 0 1-1.379 0c-1.4-1.598-4.448-5.34-4.448-7.672.001-3.103 2.655-4.903 5.138-4.903s5.137 1.8 5.137 4.903"
+          d="M11.437 4.814c0 2.319-3.937 6.464-3.937 6.464S3.563 7.134 3.563 4.814c0-2.378 2.035-3.758 3.937-3.758s3.937 1.38 3.937 3.758"
         />
         <path
-          fill={color}
-          fillRule="evenodd"
-          d="M7.5 5.361a.806.806 0 1 0 0 1.611.806.806 0 0 0 0-1.61m-2.306.806a2.306 2.306 0 1 1 4.612 0 2.306 2.306 0 0 1-4.612 0"
-          clipRule="evenodd"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.5 6.167a1.333 1.333 0 1 0 0-2.667 1.333 1.333 0 0 0 0 2.667M13.056 13.945H1.944"
         />
       </svg>
     )
diff --git a/packages/design-system/icons/src/components/medusa.tsx b/packages/design-system/icons/src/components/medusa.tsx
index 1cf1418817..64d4957892 100644
--- a/packages/design-system/icons/src/components/medusa.tsx
+++ b/packages/design-system/icons/src/components/medusa.tsx
@@ -12,7 +12,7 @@ const Medusa = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
         {...props}
       >
         <path
-          fill="#09090B"
+          fill="#18181B"
           d="M12.184 2.941 9.127 1.183a3.22 3.22 0 0 0-3.226 0L2.83 2.94a3.25 3.25 0 0 0-1.606 2.786V9.26c0 1.153.62 2.209 1.606 2.786l3.057 1.772c1 .577 2.226.577 3.226 0l3.057-1.772a3.2 3.2 0 0 0 1.606-2.786V5.727c.028-1.14-.592-2.209-1.592-2.786m-4.677 7.697A3.14 3.14 0 0 1 4.365 7.5a3.14 3.14 0 0 1 3.142-3.138c1.733 0 3.155 1.407 3.155 3.138a3.145 3.145 0 0 1-3.155 3.138"
         />
       </svg>
diff --git a/packages/design-system/icons/src/components/pen-plus.tsx b/packages/design-system/icons/src/components/pen-plus.tsx
new file mode 100644
index 0000000000..0af431af32
--- /dev/null
+++ b/packages/design-system/icons/src/components/pen-plus.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const PenPlus = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M2.389 13.5s3.199-.505 4.04-1.347c.843-.841 6.514-6.513 6.514-6.513a1.904 1.904 0 1 0-2.694-2.693L3.736 9.46c-.841.842-1.346 4.04-1.346 4.04zM3.278 1.056V5.5M5.5 3.278H1.056"
+        />
+      </svg>
+    )
+  }
+)
+PenPlus.displayName = "PenPlus"
+export default PenPlus
diff --git a/packages/design-system/icons/src/components/shopping.tsx b/packages/design-system/icons/src/components/shopping.tsx
new file mode 100644
index 0000000000..c4d447934f
--- /dev/null
+++ b/packages/design-system/icons/src/components/shopping.tsx
@@ -0,0 +1,35 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Shopping = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          clipPath="url(#a)"
+        >
+          <path d="M8.333 4.842a1.67 1.67 0 0 0-1.307-.633H3.39c-.86 0-1.578.653-1.66 1.508l-.515 5.417a1.667 1.667 0 0 0 1.659 1.825h1.292" />
+          <path d="M8.184 7.125h3.631c.86 0 1.58.655 1.66 1.51l.312 3.334a1.667 1.667 0 0 1-1.66 1.822H7.873c-.982 0-1.751-.845-1.66-1.822l.313-3.334c.08-.856.8-1.51 1.66-1.51M3.542 4.208V2.542a1.666 1.666 0 1 1 3.333 0v1.666" />
+          <path d="M11.458 9.209v.208a1.459 1.459 0 0 1-2.916 0v-.208" />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+Shopping.displayName = "Shopping"
+export default Shopping
diff --git a/packages/design-system/icons/src/components/square-blue-solid.tsx b/packages/design-system/icons/src/components/square-blue-solid.tsx
index ff577c2f60..76698731f3 100644
--- a/packages/design-system/icons/src/components/square-blue-solid.tsx
+++ b/packages/design-system/icons/src/components/square-blue-solid.tsx
@@ -11,7 +11,7 @@ const SquareBlueSolid = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <rect width={8} height={8} x={3.5} y={3.5} fill="#3B82F6" rx={2} />
+        <rect width={8} height={8} x={3.5} y={3.5} fill="#60A5FA" rx={2} />
         <rect
           width={7}
           height={7}
diff --git a/packages/design-system/icons/src/components/square-purple-solid.tsx b/packages/design-system/icons/src/components/square-purple-solid.tsx
index e92249fba8..8bc3bc4aa3 100644
--- a/packages/design-system/icons/src/components/square-purple-solid.tsx
+++ b/packages/design-system/icons/src/components/square-purple-solid.tsx
@@ -11,7 +11,7 @@ const SquarePurpleSolid = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <rect width={8} height={8} x={3.5} y={3.5} fill="#8B5CF6" rx={2} />
+        <rect width={8} height={8} x={3.5} y={3.5} fill="#A78BFA" rx={2} />
         <rect
           width={7}
           height={7}
diff --git a/packages/design-system/icons/src/components/stack-perspective.tsx b/packages/design-system/icons/src/components/stack-perspective.tsx
new file mode 100644
index 0000000000..2212bf4f94
--- /dev/null
+++ b/packages/design-system/icons/src/components/stack-perspective.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const StackPerspective = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m2.389 10.389-.748.25a.444.444 0 0 1-.585-.422V4.783c0-.303.297-.517.585-.421l.748.25M5.944 12.055l-.718.3a.445.445 0 0 1-.615-.41v-8.89c0-.317.323-.532.615-.41l.718.3M8.798 1.124l4.631 2.137c.315.145.516.46.516.807v6.862a.89.89 0 0 1-.516.807l-4.631 2.137a.445.445 0 0 1-.631-.403V1.528c0-.325.336-.54.63-.404"
+        />
+      </svg>
+    )
+  }
+)
+StackPerspective.displayName = "StackPerspective"
+export default StackPerspective
diff --git a/packages/design-system/icons/src/components/trophy.tsx b/packages/design-system/icons/src/components/trophy.tsx
new file mode 100644
index 0000000000..4fc1e2a4f9
--- /dev/null
+++ b/packages/design-system/icons/src/components/trophy.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Trophy = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.944 10.389s0 2.611 3.334 3.555H3.722C7.056 13 7.056 10.39 7.056 10.39M4.199 7.5c-3.393 0-3.143-4.666-3.143-4.666h1.988M10.801 7.5c3.394 0 3.143-4.666 3.143-4.666h-1.988"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M11.944 1.056c-.555 5.805-2.027 9.083-4.222 9.333h-.444c-2.195-.25-3.667-3.528-4.222-9.333z"
+        />
+      </svg>
+    )
+  }
+)
+Trophy.displayName = "Trophy"
+export default Trophy
diff --git a/packages/design-system/icons/src/components/truck-fast.tsx b/packages/design-system/icons/src/components/truck-fast.tsx
new file mode 100644
index 0000000000..269c42fe74
--- /dev/null
+++ b/packages/design-system/icons/src/components/truck-fast.tsx
@@ -0,0 +1,34 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const TruckFast = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          clipPath="url(#a)"
+        >
+          <path d="M3.472 12.938a1.41 1.41 0 1 0 0-2.82 1.41 1.41 0 0 0 0 2.82M9.312 12.938a1.41 1.41 0 1 0 0-2.82 1.41 1.41 0 0 0 0 2.82M7.918 11.326H4.882M4.076 2.465h3.625c.89 0 1.612.721 1.612 1.611v6.042" />
+          <path d="M9.313 4.882h1.775c.274 0 .53.14.677.37l1.447 2.25c.084.13.128.281.128.436v1.777a1.61 1.61 0 0 1-1.61 1.611h-1.008M9.313 7.701h3.95M2.465 4.882H5.89M.854 7.299h3.424" />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+TruckFast.displayName = "TruckFast"
+export default TruckFast
diff --git a/packages/design-system/toolbox/src/transformers/transform-svg.ts b/packages/design-system/toolbox/src/transformers/transform-svg.ts
index 1efc3cdbf6..e8e7c66d9d 100644
--- a/packages/design-system/toolbox/src/transformers/transform-svg.ts
+++ b/packages/design-system/toolbox/src/transformers/transform-svg.ts
@@ -22,7 +22,7 @@ export async function transformSvg({
       typescript: true,
       replaceAttrValues: !fixed
         ? {
-            "#09090B": "{color}",
+            "#18181B": "{color}",
           }
         : undefined,
       svgProps: {
diff --git a/packages/design-system/ui-preset/src/theme/extension/theme.ts b/packages/design-system/ui-preset/src/theme/extension/theme.ts
index a471aa60cb..c265e306b7 100644
--- a/packages/design-system/ui-preset/src/theme/extension/theme.ts
+++ b/packages/design-system/ui-preset/src/theme/extension/theme.ts
@@ -124,9 +124,6 @@ export const theme = {
               "DEFAULT": "var(--bg-subtle-pressed)"
             }
           },
-          "overlay": {
-            "DEFAULT": "var(--bg-overlay)"
-          },
           "field": {
             "component": {
               "hover": {
@@ -168,6 +165,9 @@ export const theme = {
           },
           "disabled": {
             "DEFAULT": "var(--bg-disabled)"
+          },
+          "overlay": {
+            "DEFAULT": "var(--bg-overlay)"
           }
         },
         "border": {
@@ -199,17 +199,6 @@ export const theme = {
           }
         },
         "contrast": {
-          "border": {
-            "top": {
-              "DEFAULT": "var(--contrast-border-top)"
-            },
-            "base": {
-              "DEFAULT": "var(--contrast-border-base)"
-            },
-            "bot": {
-              "DEFAULT": "var(--contrast-border-bot)"
-            }
-          },
           "fg": {
             "primary": {
               "DEFAULT": "var(--contrast-fg-primary)"
@@ -231,15 +220,23 @@ export const theme = {
             "subtle": {
               "DEFAULT": "var(--contrast-bg-subtle)"
             }
+          },
+          "border": {
+            "base": {
+              "DEFAULT": "var(--contrast-border-base)"
+            },
+            "bot": {
+              "DEFAULT": "var(--contrast-border-bot)"
+            },
+            "top": {
+              "DEFAULT": "var(--contrast-border-top)"
+            }
           }
         },
         "fg": {
           "disabled": {
             "DEFAULT": "var(--fg-disabled)"
           },
-          "base": {
-            "DEFAULT": "var(--fg-base)"
-          },
           "muted": {
             "DEFAULT": "var(--fg-muted)"
           },
@@ -262,6 +259,9 @@ export const theme = {
           },
           "subtle": {
             "DEFAULT": "var(--fg-subtle)"
+          },
+          "base": {
+            "DEFAULT": "var(--fg-base)"
           }
         },
         "button": {
diff --git a/packages/design-system/ui-preset/src/theme/tokens/colors.ts b/packages/design-system/ui-preset/src/theme/tokens/colors.ts
index c7cd5a0193..1233f4695c 100644
--- a/packages/design-system/ui-preset/src/theme/tokens/colors.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/colors.ts
@@ -1,29 +1,19 @@
 export const colors = {
   "dark": {
     "--button-danger-pressed": "rgba(225, 29, 72, 1)",
-    "--bg-subtle-hover": "rgba(24, 24, 27, 1)",
-    "--bg-overlay": "rgba(9, 9, 11, 0.72)",
-    "--fg-on-inverted": "rgba(9, 9, 11, 1)",
     "--bg-base-pressed": "rgba(63, 63, 70, 1)",
-    "--button-transparent-pressed": "rgba(63, 63, 70, 1)",
     "--bg-component-hover": "rgba(255, 255, 255, 0.1)",
-    "--border-menu-top": "rgba(24, 24, 27, 1)",
-    "--button-neutral": "rgba(39, 39, 42, 1)",
     "--border-interactive": "rgba(96, 165, 250, 1)",
-    "--button-transparent-hover": "rgba(39, 39, 42, 1)",
-    "--contrast-border-base": "rgba(82, 82, 91, 1)",
+    "--button-neutral": "rgba(255, 255, 255, 0.04)",
     "--tag-orange-border": "rgba(124, 45, 18, 1)",
     "--tag-blue-text": "rgba(147, 197, 253, 1)",
-    "--button-neutral-pressed": "rgba(82, 82, 91, 1)",
     "--bg-highlight": "rgba(23, 37, 84, 1)",
     "--tag-neutral-icon": "rgba(113, 113, 122, 1)",
     "--bg-switch-off-hover": "rgba(82, 82, 91, 1)",
-    "--bg-base": "rgba(24, 24, 27, 1)",
     "--fg-on-color": "rgba(255, 255, 255, 1)",
     "--button-inverted-pressed": "rgba(161, 161, 170, 1)",
     "--fg-interactive-hover": "rgba(147, 197, 253, 1)",
     "--fg-error": "rgba(251, 113, 133, 1)",
-    "--button-neutral-hover": "rgba(63, 63, 70, 1)",
     "--bg-switch-off": "rgba(63, 63, 70, 1)",
     "--border-strong": "rgba(255, 255, 255, 0.16)",
     "--border-error": "rgba(251, 113, 133, 1)",
@@ -32,44 +22,32 @@ export const colors = {
     "--button-inverted": "rgba(82, 82, 91, 1)",
     "--tag-orange-text": "rgba(253, 186, 116, 1)",
     "--fg-base": "rgba(244, 244, 245, 1)",
-    "--bg-field-component": "rgba(24, 24, 27, 1)",
     "--fg-disabled": "rgba(82, 82, 91, 1)",
-    "--bg-subtle": "rgba(9, 9, 11, 1)",
-    "--tag-neutral-border": "rgba(63, 63, 70, 1)",
-    "--bg-field-component-hover": "rgba(9, 9, 11, 0.24)",
     "--button-danger": "rgba(159, 18, 57, 1)",
+    "--tag-neutral-border": "rgba(255, 255, 255, 0.06)",
     "--tag-blue-border": "rgba(30, 58, 138, 1)",
     "--tag-neutral-text": "rgba(212, 212, 216, 1)",
-    "--fg-muted": "rgba(161, 161, 170, 1)",
     "--tag-purple-border": "rgba(91, 33, 182, 1)",
     "--tag-green-text": "rgba(52, 211, 153, 1)",
     "--button-inverted-hover": "rgba(113, 113, 122, 1)",
     "--bg-component-pressed": "rgba(255, 255, 255, 0.16)",
-    "--contrast-border-top": "rgba(24, 24, 27, 1)",
     "--contrast-border-bot": "rgba(255, 255, 255, 0.08)",
-    "--contrast-fg-secondary": "rgba(161, 161, 170, 1)",
     "--tag-blue-icon": "rgba(96, 165, 250, 1)",
-    "--contrast-bg-base-pressed": "rgba(113, 113, 122, 1)",
     "--bg-field": "rgba(255, 255, 255, 0.04)",
     "--tag-neutral-bg": "rgba(255, 255, 255, 0.08)",
     "--tag-green-border": "rgba(6, 78, 59, 1)",
-    "--contrast-fg-primary": "rgba(250, 250, 250, 1)",
     "--tag-red-icon": "rgba(251, 113, 133, 1)",
     "--tag-red-text": "rgba(253, 164, 175, 1)",
     "--tag-purple-icon": "rgba(167, 139, 250, 1)",
     "--bg-interactive": "rgba(96, 165, 250, 1)",
     "--bg-field-hover": "rgba(255, 255, 255, 0.08)",
     "--border-transparent": "rgba(255, 255, 255, 0)",
-    "--contrast-bg-base": "rgba(63, 63, 70, 1)",
     "--tag-orange-icon": "rgba(251, 146, 60, 1)",
     "--tag-purple-bg": "rgba(46, 16, 101, 1)",
-    "--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
-    "--contrast-bg-base-hover": "rgba(82, 82, 91, 1)",
     "--bg-base-hover": "rgba(39, 39, 42, 1)",
     "--tag-blue-bg": "rgba(23, 37, 84, 1)",
     "--tag-green-bg": "rgba(2, 44, 34, 1)",
     "--tag-purple-text": "rgba(196, 181, 253, 1)",
-    "--bg-subtle-pressed": "rgba(63, 63, 70, 1)",
     "--tag-red-border": "rgba(136, 19, 55, 1)",
     "--border-danger": "rgba(190, 18, 60, 1)",
     "--tag-green-icon": "rgba(16, 185, 129, 1)",
@@ -81,13 +59,35 @@ export const colors = {
     "--bg-disabled": "rgba(39, 39, 42, 1)",
     "--button-transparent": "rgba(255, 255, 255, 0)",
     "--border-menu-bot": "rgba(255, 255, 255, 0.08)",
-    "--border-base": "rgba(255, 255, 255, 0.1)",
     "--tag-purple-bg-hover": "rgba(91, 33, 182, 1)",
     "--tag-orange-bg-hover": "rgba(124, 45, 18, 1)",
-    "--tag-neutral-bg-hover": "rgba(63, 63, 70, 1)",
     "--tag-blue-bg-hover": "rgba(30, 58, 138, 1)",
     "--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
-    "--tag-green-bg-hover": "rgba(6, 78, 59, 1)"
+    "--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
+    "--border-menu-top": "rgba(33, 33, 36, 1)",
+    "--bg-base": "rgba(33, 33, 36, 1)",
+    "--contrast-border-top": "rgba(33, 33, 36, 1)",
+    "--bg-field-component": "rgba(33, 33, 36, 1)",
+    "--bg-subtle-hover": "rgba(33, 33, 36, 1)",
+    "--bg-subtle": "rgba(24, 24, 27, 1)",
+    "--fg-on-inverted": "rgba(24, 24, 27, 1)",
+    "--bg-overlay": "rgba(24, 24, 27, 0.72)",
+    "--button-transparent-hover": "rgba(255, 255, 255, 0.08)",
+    "--contrast-fg-secondary": "rgba(255, 255, 255, 0.56)",
+    "--contrast-border-base": "rgba(255, 255, 255, 0.16)",
+    "--contrast-bg-base-pressed": "rgba(82, 82, 91, 1)",
+    "--button-neutral-pressed": "rgba(255, 255, 255, 0.12)",
+    "--border-base": "rgba(255, 255, 255, 0.08)",
+    "--contrast-fg-primary": "rgba(255, 255, 255, 0.88)",
+    "--button-neutral-hover": "rgba(255, 255, 255, 0.08)",
+    "--contrast-bg-base": "rgba(39, 39, 42, 1)",
+    "--tag-neutral-bg-hover": "rgba(255, 255, 255, 0.12)",
+    "--contrast-bg-subtle": "rgba(255, 255, 255, 0.04)",
+    "--contrast-bg-base-hover": "rgba(63, 63, 70, 1)",
+    "--bg-field-component-hover": "rgba(39, 39, 42, 1)",
+    "--bg-subtle-pressed": "rgba(39, 39, 42, 1)",
+    "--button-transparent-pressed": "rgba(255, 255, 255, 0.12)",
+    "--fg-muted": "rgba(113, 113, 122, 1)"
   },
   "light": {
     "--tag-neutral-border": "rgba(228, 228, 231, 1)",
@@ -96,8 +96,6 @@ export const colors = {
     "--border-menu-bot": "rgba(255, 255, 255, 1)",
     "--border-menu-top": "rgba(228, 228, 231, 1)",
     "--bg-subtle-hover": "rgba(244, 244, 245, 1)",
-    "--contrast-border-top": "rgba(9, 9, 11, 1)",
-    "--bg-overlay": "rgba(9, 9, 11, 0.4)",
     "--contrast-fg-primary": "rgba(255, 255, 255, 0.88)",
     "--bg-switch-off": "rgba(228, 228, 231, 1)",
     "--contrast-bg-base-pressed": "rgba(63, 63, 70, 1)",
@@ -111,7 +109,6 @@ export const colors = {
     "--contrast-border-base": "rgba(255, 255, 255, 0.15)",
     "--bg-field": "rgba(250, 250, 250, 1)",
     "--tag-blue-text": "rgba(30, 64, 175, 1)",
-    "--fg-base": "rgba(9, 9, 11, 1)",
     "--button-inverted-pressed": "rgba(82, 82, 91, 1)",
     "--border-interactive": "rgba(59, 130, 246, 1)",
     "--bg-base-hover": "rgba(244, 244, 245, 1)",
@@ -177,6 +174,9 @@ export const colors = {
     "--tag-blue-bg-hover": "rgba(191, 219, 254, 1)",
     "--tag-green-bg": "rgba(209, 250, 229, 1)",
     "--tag-neutral-bg": "rgba(244, 244, 245, 1)",
-    "--tag-orange-bg": "rgba(255, 237, 213, 1)"
+    "--tag-orange-bg": "rgba(255, 237, 213, 1)",
+    "--fg-base": "rgba(24, 24, 27, 1)",
+    "--contrast-border-top": "rgba(24, 24, 27, 1)",
+    "--bg-overlay": "rgba(24, 24, 27, 0.4)"
   }
 }
\ No newline at end of file
diff --git a/packages/design-system/ui-preset/src/theme/tokens/effects.ts b/packages/design-system/ui-preset/src/theme/tokens/effects.ts
index b51016ee8f..8a9ad70608 100644
--- a/packages/design-system/ui-preset/src/theme/tokens/effects.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/effects.ts
@@ -6,23 +6,23 @@ export const effects = {
     "--borders-interactive-with-active": "0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.25)",
     "--borders-focus": "0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
     "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
-    "--elevation-commandbar": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.1) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
     "--details-switch-background-focus": "0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.75px rgba(255, 255, 255, 0.12) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
     "--buttons-danger": "0px -1px 0px 0px rgba(255, 255, 255, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(159, 18, 57, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
-    "--buttons-neutral": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
     "--buttons-danger-focus": "0px -1px 0px 0px rgba(255, 255, 255, 0.16), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(159, 18, 57, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
-    "--borders-base": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(24, 24, 27, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
     "--details-switch-background": "0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.75px rgba(255, 255, 255, 0.12) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
-    "--buttons-neutral-focus": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
     "--buttons-inverted-focus": "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
-    "--elevation-card-rest": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
-    "--elevation-tooltip": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
-    "--elevation-flyout": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
-    "--elevation-modal": "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.32), 0px 16px 32px 0px rgba(0, 0, 0, 0.32)",
-    "--elevation-card-hover": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
+    "--elevation-tooltip": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
+    "--elevation-flyout": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
     "--borders-error": "0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 3px rgba(225, 29, 72, 0.25)",
     "--buttons-inverted": "0px -1px 0px 0px rgba(255, 255, 255, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(82, 82, 91, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
-    "--elevation-code-block": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.1) inset"
+    "--borders-base": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
+    "--elevation-card-hover": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 4px 0px rgba(0, 0, 0, 0.48), 0px 2px 8px 0px rgba(0, 0, 0, 0.48)",
+    "--elevation-card-rest": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
+    "--buttons-neutral": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 2px 2px 0px rgba(0, 0, 0, 0.24)",
+    "--elevation-code-block": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 1px 2px 0px rgba(0, 0, 0, 0.32), 0px 2px 4px 0px rgba(0, 0, 0, 0.32)",
+    "--buttons-neutral-focus": "0px -1px 0px 0px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 0px 0px 1px rgba(39, 39, 42, 1), 0px 0px 0px 2px rgba(24, 24, 27, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
+    "--elevation-commandbar": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.1) inset, 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
+    "--elevation-modal": "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.06) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)"
   },
   "light": {
     "--borders-interactive-with-active": "0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.2)",