chore(ui-preset,icons,dashboard) (#11734)

* update icons * update ui-preset * chore(ui-preset,icons): Sync with Figma 5/3/2025 * chore(ui-preset,icons): Sync with Figma
2025-03-17 16:51:57 +01:00
parent 1db48a4490
commit cc4c5c86e2
41 changed files with 1007 additions and 356 deletions
--- a/packages/design-system/icons/src/components/tests/ai-assistent-luminosity.spec.tsx
+++ b/packages/design-system/icons/src/components/tests/ai-assistent-luminosity.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import AiAssistentLuminosity from "../ai-assistent-luminosity"
+
+  describe("AiAssistentLuminosity", () => {
+    it("should render the icon without errors", async () => {
+      render(<AiAssistentLuminosity data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
--- a/packages/design-system/icons/src/components/tests/arrrow-right.spec.tsx
+++ b/packages/design-system/icons/src/components/tests/arrrow-right.spec.tsx
@@ -1,11 +1,11 @@
  import * as React from "react"
  import { cleanup, render, screen } from "@testing-library/react"

-  import ArrrowRight from "../arrrow-right"
+  import ArrowRight from "../arrow-right"

-  describe("ArrrowRight", () => {
+  describe("ArrowRight", () => {
    it("should render the icon without errors", async () => {
-      render(<ArrrowRight data-testid="icon" />)
+      render(<ArrowRight data-testid="icon" />)


      const svgElement = screen.getByTestId("icon")
--- a/packages/design-system/icons/src/components/tests/arrows-reduce-diagonal.spec.tsx
+++ b/packages/design-system/icons/src/components/tests/arrows-reduce-diagonal.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import ArrowsReduceDiagonal from "../arrows-reduce-diagonal"
+
+  describe("ArrowsReduceDiagonal", () => {
+    it("should render the icon without errors", async () => {
+      render(<ArrowsReduceDiagonal data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
--- a/packages/design-system/icons/src/components/tests/brackets.spec.tsx
+++ b/packages/design-system/icons/src/components/tests/brackets.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Brackets from "../brackets"
+
+  describe("Brackets", () => {
+    it("should render the icon without errors", async () => {
+      render(<Brackets data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
--- a/packages/design-system/icons/src/components/tests/circle-minus.spec.tsx
+++ b/packages/design-system/icons/src/components/tests/circle-minus.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CircleMinus from "../circle-minus"
+
+  describe("CircleMinus", () => {
+    it("should render the icon without errors", async () => {
+      render(<CircleMinus data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
--- a/packages/design-system/icons/src/components/tests/code-commit.spec.tsx
+++ b/packages/design-system/icons/src/components/tests/code-commit.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CodeCommit from "../code-commit"
+
+  describe("CodeCommit", () => {
+    it("should render the icon without errors", async () => {
+      render(<CodeCommit data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
--- a/packages/design-system/icons/src/components/tests/code-merge.spec.tsx
+++ b/packages/design-system/icons/src/components/tests/code-merge.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CodeMerge from "../code-merge"
+
+  describe("CodeMerge", () => {
+    it("should render the icon without errors", async () => {
+      render(<CodeMerge data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
--- a/packages/design-system/icons/src/components/tests/drop-cap.spec.tsx
+++ b/packages/design-system/icons/src/components/tests/drop-cap.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import DropCap from "../drop-cap"
+
+  describe("DropCap", () => {
+    it("should render the icon without errors", async () => {
+      render(<DropCap data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
--- a/packages/design-system/icons/src/components/tests/expand.spec.tsx
+++ b/packages/design-system/icons/src/components/tests/expand.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Expand from "../expand"
+
+  describe("Expand", () => {
+    it("should render the icon without errors", async () => {
+      render(<Expand data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
--- a/packages/design-system/icons/src/components/tests/party.spec.tsx
+++ b/packages/design-system/icons/src/components/tests/party.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Party from "../party"
+
+  describe("Party", () => {
+    it("should render the icon without errors", async () => {
+      render(<Party data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
--- a/packages/design-system/icons/src/components/tests/reduce.spec.tsx
+++ b/packages/design-system/icons/src/components/tests/reduce.spec.tsx
@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Reduce from "../reduce"
+
+  describe("Reduce", () => {
+    it("should render the icon without errors", async () => {
+      render(<Reduce data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })
--- a/packages/design-system/icons/src/components/ai-assistent-luminosity.tsx
+++ b/packages/design-system/icons/src/components/ai-assistent-luminosity.tsx
@@ -0,0 +1,382 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const AiAssistentLuminosity = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={16}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <g filter="url(#a)">
+          <circle cx={7.5} cy={7.5} r={7.11} fill="url(#b)" />
+          <circle cx={7.5} cy={7.5} r={7.11} fill="url(#c)" />
+        </g>
+        <g
+          filter="url(#d)"
+          opacity={0.8}
+          style={{
+            mixBlendMode: "plus-lighter",
+          }}
+        >
+          <circle cx={7.5} cy={5} r={4} fill="url(#e)" />
+          <circle cx={7.5} cy={5} r={3.9} stroke="url(#f)" strokeWidth={0.2} />
+        </g>
+        <g
+          filter="url(#g)"
+          opacity={0.8}
+          style={{
+            mixBlendMode: "plus-lighter",
+          }}
+        >
+          <circle cx={10} cy={8.5} r={4} fill="url(#h)" />
+          <circle cx={10} cy={8.5} r={3.9} stroke="url(#i)" strokeWidth={0.2} />
+        </g>
+        <g
+          filter="url(#j)"
+          opacity={0.8}
+          style={{
+            mixBlendMode: "plus-lighter",
+          }}
+          transform="matrix(-1 0 0 1 9 2.5)"
+        >
+          <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="matrix(0 -1 -1 0 11.5 11.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 0 0 1 11.5 6)"
+        >
+          <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>
+        <circle
+          cx={7.5}
+          cy={7.5}
+          r={7.11}
+          fill={color}
+          style={{
+            mixBlendMode: "color",
+          }}
+        />
+        <defs>
+          <linearGradient
+            id="b"
+            x1={7.5}
+            x2={7.5}
+            y1={0.39}
+            y2={14.61}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset={0.2} stopColor="#C686FF" />
+            <stop offset={0.8} stopColor="#8D99FF" />
+          </linearGradient>
+          <linearGradient
+            id="c"
+            x1={3.115}
+            x2={11.463}
+            y1={7.468}
+            y2={10.558}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#FF6778" stopOpacity={0.8} />
+            <stop offset={1} stopColor="#fff" stopOpacity={0.1} />
+          </linearGradient>
+          <linearGradient
+            id="e"
+            x1={7.5}
+            x2={11.5}
+            y1={5}
+            y2={5}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#8D99FF" stopOpacity={0.1} />
+            <stop offset={1} stopColor="#fff" stopOpacity={0.3} />
+          </linearGradient>
+          <linearGradient
+            id="f"
+            x1={11.5}
+            x2={7.5}
+            y1={5}
+            y2={5}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#fff" />
+            <stop offset={1} stopColor="#fff" stopOpacity={0} />
+          </linearGradient>
+          <linearGradient
+            id="h"
+            x1={10}
+            x2={14}
+            y1={8.5}
+            y2={8.5}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#8D99FF" stopOpacity={0.1} />
+            <stop offset={1} stopColor="#fff" stopOpacity={0.3} />
+          </linearGradient>
+          <linearGradient
+            id="i"
+            x1={14}
+            x2={10}
+            y1={8.5}
+            y2={8.5}
+            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={15.47}
+            height={15.22}
+            x={0.14}
+            y={0.39}
+            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={0.25} />
+            <feGaussianBlur stdDeviation={0.125} />
+            <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_9187_11750"
+            />
+            <feBlend
+              in="SourceGraphic"
+              in2="effect1_dropShadow_9187_11750"
+              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_9187_11750" />
+            <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_9187_11750"
+              result="effect3_innerShadow_9187_11750"
+            />
+            <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_9187_11750"
+              result="effect4_innerShadow_9187_11750"
+            />
+          </filter>
+          <filter
+            id="d"
+            width={9}
+            height={9}
+            x={3}
+            y={0.5}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              result="effect1_foregroundBlur_9187_11750"
+              stdDeviation={0.25}
+            />
+          </filter>
+          <filter
+            id="g"
+            width={9}
+            height={9}
+            x={5.5}
+            y={4}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              result="effect1_foregroundBlur_9187_11750"
+              stdDeviation={0.25}
+            />
+          </filter>
+          <filter
+            id="j"
+            width={9}
+            height={9}
+            x={0.5}
+            y={2}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              result="effect1_foregroundBlur_9187_11750"
+              stdDeviation={0.25}
+            />
+          </filter>
+          <filter
+            id="m"
+            width={9}
+            height={9}
+            x={3}
+            y={3}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              result="effect1_foregroundBlur_9187_11750"
+              stdDeviation={0.25}
+            />
+          </filter>
+          <filter
+            id="p"
+            width={9}
+            height={9}
+            x={3}
+            y={5.5}
+            colorInterpolationFilters="sRGB"
+            filterUnits="userSpaceOnUse"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <feGaussianBlur
+              result="effect1_foregroundBlur_9187_11750"
+              stdDeviation={0.25}
+            />
+          </filter>
+        </defs>
+      </svg>
+    )
+  }
+)
+AiAssistentLuminosity.displayName = "AiAssistentLuminosity"
+export default AiAssistentLuminosity
--- a/packages/design-system/icons/src/components/ai-assistent.tsx
+++ b/packages/design-system/icons/src/components/ai-assistent.tsx
@@ -5,15 +5,15 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
-        width={19}
-        height={19}
+        width={15}
+        height={16}
        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)" />
+          <circle cx={7.5} cy={7.5} r={7.11} fill="url(#b)" />
+          <circle cx={7.5} cy={7.5} r={7.11} fill="url(#c)" />
        </g>
        <g
          filter="url(#d)"
@@ -22,14 +22,8 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
            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}
-          />
+          <circle cx={7.5} cy={5} r={4} fill="url(#e)" />
+          <circle cx={7.5} cy={5} r={3.9} stroke="url(#f)" strokeWidth={0.2} />
        </g>
        <g
          filter="url(#g)"
@@ -38,14 +32,8 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
            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}
-          />
+          <circle cx={10} cy={8.5} r={4} fill="url(#h)" />
+          <circle cx={10} cy={8.5} r={3.9} stroke="url(#i)" strokeWidth={0.2} />
        </g>
        <g
          filter="url(#j)"
@@ -53,7 +41,7 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          style={{
            mixBlendMode: "plus-lighter",
          }}
-          transform="matrix(-1.0428 0 0 1.0428 11.064 3.243)"
+          transform="matrix(-1 0 0 1 9 2.5)"
        >
          <circle cx={4} cy={4} r={4} fill="url(#k)" />
          <circle cx={4} cy={4} r={3.9} stroke="url(#l)" strokeWidth={0.2} />
@@ -64,7 +52,7 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          style={{
            mixBlendMode: "plus-lighter",
          }}
-          transform="scale(1.0428 -1.0428)rotate(90 12.61 .5)"
+          transform="matrix(0 -1 -1 0 11.5 11.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} />
@@ -75,7 +63,7 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          style={{
            mixBlendMode: "plus-lighter",
          }}
-          transform="matrix(-1.0428 0 0 1.0428 13.67 6.893)"
+          transform="matrix(-1 0 0 1 11.5 6)"
        >
          <circle cx={4} cy={4} r={4} fill="url(#q)" />
          <circle cx={4} cy={4} r={3.9} stroke="url(#r)" strokeWidth={0.2} />
@@ -83,10 +71,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
        <defs>
          <linearGradient
            id="b"
-            x1={9.589}
-            x2={9.589}
-            y1={1.087}
-            y2={15.916}
+            x1={7.5}
+            x2={7.5}
+            y1={0.39}
+            y2={14.61}
            gradientUnits="userSpaceOnUse"
          >
            <stop offset={0.2} stopColor="#C686FF" />
@@ -94,10 +82,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          </linearGradient>
          <linearGradient
            id="c"
-            x1={5.017}
-            x2={13.721}
-            y1={8.468}
-            y2={11.691}
+            x1={3.115}
+            x2={11.463}
+            y1={7.468}
+            y2={10.558}
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#FF6778" stopOpacity={0.8} />
@@ -105,10 +93,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          </linearGradient>
          <linearGradient
            id="e"
-            x1={9.728}
-            x2={13.899}
-            y1={5.922}
-            y2={5.922}
+            x1={7.5}
+            x2={11.5}
+            y1={5}
+            y2={5}
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#8D99FF" stopOpacity={0.1} />
@@ -116,10 +104,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          </linearGradient>
          <linearGradient
            id="f"
-            x1={13.899}
-            x2={9.728}
-            y1={5.922}
-            y2={5.922}
+            x1={11.5}
+            x2={7.5}
+            y1={5}
+            y2={5}
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#fff" />
@@ -127,10 +115,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          </linearGradient>
          <linearGradient
            id="h"
-            x1={12.446}
-            x2={16.618}
-            y1={9.728}
-            y2={9.728}
+            x1={10}
+            x2={14}
+            y1={8.5}
+            y2={8.5}
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#8D99FF" stopOpacity={0.1} />
@@ -138,10 +126,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          </linearGradient>
          <linearGradient
            id="i"
-            x1={16.618}
-            x2={12.446}
-            y1={9.728}
-            y2={9.728}
+            x1={14}
+            x2={10}
+            y1={8.5}
+            y2={8.5}
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#8D99FF" />
@@ -215,10 +203,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          </linearGradient>
          <filter
            id="a"
-            width={19}
-            height={19}
-            x={0}
-            y={0}
+            width={15.47}
+            height={15.22}
+            x={0.14}
+            y={0.39}
            colorInterpolationFilters="sRGB"
            filterUnits="userSpaceOnUse"
          >
@@ -228,8 +216,8 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
              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} />
+            <feOffset dy={0.25} />
+            <feGaussianBlur stdDeviation={0.125} />
            <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
@@ -278,10 +266,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          </filter>
          <filter
            id="d"
-            width={9.385}
-            height={9.385}
-            x={4.807}
-            y={1.158}
+            width={9}
+            height={9}
+            x={3}
+            y={0.5}
            colorInterpolationFilters="sRGB"
            filterUnits="userSpaceOnUse"
          >
@@ -298,10 +286,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          </filter>
          <filter
            id="g"
-            width={9.385}
-            height={9.385}
-            x={7.414}
-            y={4.807}
+            width={9}
+            height={9}
+            x={5.5}
+            y={4}
            colorInterpolationFilters="sRGB"
            filterUnits="userSpaceOnUse"
          >
@@ -318,10 +306,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          </filter>
          <filter
            id="j"
-            width={9.385}
-            height={9.385}
-            x={2.2}
-            y={2.722}
+            width={9}
+            height={9}
+            x={0.5}
+            y={2}
            colorInterpolationFilters="sRGB"
            filterUnits="userSpaceOnUse"
          >
@@ -338,10 +326,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          </filter>
          <filter
            id="m"
-            width={9.385}
-            height={9.385}
-            x={4.807}
-            y={3.765}
+            width={9}
+            height={9}
+            x={3}
+            y={3}
            colorInterpolationFilters="sRGB"
            filterUnits="userSpaceOnUse"
          >
@@ -358,10 +346,10 @@ const AiAssistent = React.forwardRef<SVGSVGElement, IconProps>(
          </filter>
          <filter
            id="p"
-            width={9.385}
-            height={9.385}
-            x={4.807}
-            y={6.372}
+            width={9}
+            height={9}
+            x={3}
+            y={5.5}
            colorInterpolationFilters="sRGB"
            filterUnits="userSpaceOnUse"
          >
--- a/packages/design-system/icons/src/components/arrrow-right.tsx
+++ b/packages/design-system/icons/src/components/arrrow-right.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 import type { IconProps } from "../types"
-const ArrrowRight = React.forwardRef<SVGSVGElement, IconProps>(
+const ArrowRight = React.forwardRef<SVGSVGElement, IconProps>(
  ({ color = "currentColor", ...props }, ref) => {
    return (
      <svg
@@ -22,5 +22,5 @@ const ArrrowRight = React.forwardRef<SVGSVGElement, IconProps>(
    )
  }
 )
-ArrrowRight.displayName = "ArrrowRight"
-export default ArrrowRight
+ArrowRight.displayName = "ArrowRight"
+export default ArrowRight
--- a/packages/design-system/icons/src/components/arrow-up-tray.tsx
+++ b/packages/design-system/icons/src/components/arrow-up-tray.tsx
@@ -16,7 +16,7 @@ const ArrowUpTray = React.forwardRef<SVGSVGElement, IconProps>(
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={1.5}
-          d="M13.056 9.944v1.334c0 .982-.796 1.777-1.778 1.777H3.722a1.777 1.777 0 0 1-1.778-1.777V9.944M10.611 5.055 7.5 1.945l-3.111 3.11M7.5 1.944v6.667"
+          d="M13.056 9.944v1.334c0 .982-.796 1.778-1.778 1.778H3.722a1.777 1.777 0 0 1-1.778-1.778V9.944M10.611 5.056 7.5 1.944 4.389 5.056M7.5 1.944v6.667"
        />
      </svg>
    )
--- a/packages/design-system/icons/src/components/arrows-reduce-diagonal.tsx
+++ b/packages/design-system/icons/src/components/arrows-reduce-diagonal.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const ArrowsReduceDiagonal = 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="M13.056 5.944h-4v-4M9.056 5.944l4-4M5.944 13.056v-4h-4M5.944 9.056l-4 4"
+        />
+      </svg>
+    )
+  }
+)
+ArrowsReduceDiagonal.displayName = "ArrowsReduceDiagonal"
+export default ArrowsReduceDiagonal
--- a/packages/design-system/icons/src/components/bell-alert-done.tsx
+++ b/packages/design-system/icons/src/components/bell-alert-done.tsx
@@ -12,7 +12,7 @@ const BellAlertDone = React.forwardRef<SVGSVGElement, IconProps>(
        {...props}
      >
        <g clipPath="url(#a)">
-          <circle cx={12.5} cy={2.5} r={2.5} fill="#60A5FA" />
+          <circle cx={12.5} cy={2.5} r={2.5} fill="#3B82F6" />
          <circle
            cx={12.5}
            cy={2.5}
--- a/packages/design-system/icons/src/components/brackets.tsx
+++ b/packages/design-system/icons/src/components/brackets.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Brackets = 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="M5.056 13.055h-.89a1.777 1.777 0 0 1-1.777-1.777V8.944c0-.797-.647-1.444-1.445-1.444.798 0 1.445-.647 1.445-1.445V3.722c0-.982.795-1.778 1.778-1.778h.889M9.944 13.055h.89c.982 0 1.777-.795 1.777-1.777V8.944c0-.797.647-1.444 1.445-1.444a1.445 1.445 0 0 1-1.445-1.445V3.722c0-.982-.795-1.778-1.778-1.778h-.889" />
+        </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
+      </svg>
+    )
+  }
+)
+Brackets.displayName = "Brackets"
+export default Brackets
--- a/packages/design-system/icons/src/components/camera.tsx
+++ b/packages/design-system/icons/src/components/camera.tsx
@@ -14,12 +14,12 @@ const Camera = React.forwardRef<SVGSVGElement, IconProps>(
        <g fill={color} clipPath="url(#a)">
          <path
            fillRule="evenodd"
-            d="M4.582 1.869c.24-.64.85-1.063 1.534-1.063h2.768c.684 0 1.295.424 1.534 1.064l.268.713h1.48a2.527 2.527 0 0 1 2.529 2.528v5.778a2.527 2.527 0 0 1-2.528 2.528H2.833a2.527 2.527 0 0 1-2.527-2.528V5.111a2.527 2.527 0 0 1 2.527-2.528h1.48zm1.534.437a.14.14 0 0 0-.13.09l-.45 1.201a.75.75 0 0 1-.703.486h-2c-.568 0-1.027.46-1.027 1.028v5.778c0 .568.46 1.028 1.027 1.028h9.334c.568 0 1.028-.46 1.028-1.028V5.111c0-.568-.46-1.028-1.028-1.028h-2a.75.75 0 0 1-.702-.486l-.451-1.2a.14.14 0 0 0-.13-.091z"
+            d="M4.582 1.869c.24-.64.85-1.063 1.534-1.063h2.768c.684 0 1.295.424 1.534 1.063l.268.714h1.48a2.527 2.527 0 0 1 2.529 2.528v5.778a2.527 2.527 0 0 1-2.528 2.528H2.833a2.527 2.527 0 0 1-2.527-2.528V5.11a2.527 2.527 0 0 1 2.527-2.528h1.48zm1.534.437a.14.14 0 0 0-.13.09l-.45 1.2a.75.75 0 0 1-.703.487h-2c-.568 0-1.027.46-1.027 1.028v5.778c0 .568.46 1.028 1.027 1.028h9.334c.568 0 1.028-.46 1.028-1.028V5.11c0-.568-.46-1.028-1.028-1.028h-2a.75.75 0 0 1-.702-.486l-.451-1.201a.14.14 0 0 0-.13-.09z"
            clipRule="evenodd"
          />
          <path
            fillRule="evenodd"
-            d="M7.5 6.306a1.694 1.694 0 1 0 0 3.389 1.694 1.694 0 0 0 0-3.39M4.306 8a3.194 3.194 0 1 1 6.389 0 3.194 3.194 0 0 1-6.39 0"
+            d="M7.5 6.306a1.694 1.694 0 1 0 0 3.388 1.694 1.694 0 0 0 0-3.388M4.306 8a3.194 3.194 0 1 1 6.389 0 3.194 3.194 0 0 1-6.39 0"
            clipRule="evenodd"
          />
          <path d="M3.278 6.222a.667.667 0 1 0 0-1.333.667.667 0 0 0 0 1.333" />
--- a/packages/design-system/icons/src/components/circle-minus.tsx
+++ b/packages/design-system/icons/src/components/circle-minus.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CircleMinus = 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={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.889 7.778H4.61a.667.667 0 0 1 0-1.334h5.778a.667.667 0 0 1 0 1.334"
+        />
+      </svg>
+    )
+  }
+)
+CircleMinus.displayName = "CircleMinus"
+export default CircleMinus
--- a/packages/design-system/icons/src/components/code-commit.tsx
+++ b/packages/design-system/icons/src/components/code-commit.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CodeCommit = 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="M.833 7.5h3.959M14.167 7.5h-3.959M7.5 10.209a2.708 2.708 0 1 0 0-5.417 2.708 2.708 0 0 0 0 5.417"
+        />
+      </svg>
+    )
+  }
+)
+CodeCommit.displayName = "CodeCommit"
+export default CodeCommit
--- a/packages/design-system/icons/src/components/code-merge.tsx
+++ b/packages/design-system/icons/src/components/code-merge.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CodeMerge = 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="M3.722 5.056v8.889M9.278 10.611a5.555 5.555 0 0 1-5.556-5.555M3.722 5.056a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M11.278 12.61a2 2 0 1 0 0-4 2 2 0 0 0 0 4"
+        />
+      </svg>
+    )
+  }
+)
+CodeMerge.displayName = "CodeMerge"
+export default CodeMerge
--- a/packages/design-system/icons/src/components/drop-cap.tsx
+++ b/packages/design-system/icons/src/components/drop-cap.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const DropCap = 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.944 12.611h11.112M1.944 9.5h11.112M9.056 6.389h4M9.056 3.278h4M6.568 6.833 4.548 1.5h-.555L1.976 6.833M2.48 5.5h3.583"
+        />
+      </svg>
+    )
+  }
+)
+DropCap.displayName = "DropCap"
+export default DropCap
--- a/packages/design-system/icons/src/components/ellipse-grey-solid.tsx
+++ b/packages/design-system/icons/src/components/ellipse-grey-solid.tsx
@@ -13,7 +13,7 @@ const EllipseGreySolid = 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="#A1A1AA" />
+          <circle cx={7.5} cy={7.5} r={3} fill="#71717A" />
        </g>
        <defs>
          <clipPath id="a">
--- a/packages/design-system/icons/src/components/expand.tsx
+++ b/packages/design-system/icons/src/components/expand.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Expand = 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="M9.5 1.944h1.778c.982 0 1.778.796 1.778 1.778V5.5M5.5 13.056H3.722a1.777 1.777 0 0 1-1.778-1.778V9.5M1.944 5.5V3.722c0-.982.796-1.778 1.778-1.778H5.5M13.056 9.5v1.778c0 .982-.796 1.778-1.778 1.778H9.5"
+        />
+      </svg>
+    )
+  }
+)
+Expand.displayName = "Expand"
+export default Expand
--- a/packages/design-system/icons/src/components/featured-badge.tsx
+++ b/packages/design-system/icons/src/components/featured-badge.tsx
@@ -5,103 +5,43 @@ const FeaturedBadge = React.forwardRef<SVGSVGElement, IconProps>(
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
-        width={20}
-        height={20}
+        width={15}
+        height={15}
        fill="none"
        ref={ref}
        {...props}
      >
-        <g filter="url(#a)">
-          <circle cx={10} cy={8.903} r={7.806} fill="#3B82F6" />
-          <circle
-            cx={10}
-            cy={8.903}
-            r={7.806}
-            fill="url(#b)"
-            fillOpacity={0.2}
-          />
-          <circle
-            cx={10}
-            cy={8.903}
-            r={7.556}
-            stroke="#000"
-            strokeOpacity={0.2}
-            strokeWidth={0.5}
-          />
-        </g>
-        <g clipPath="url(#c)">
+        <circle cx={7.5} cy={7.5} r={7.5} fill="#3B82F6" />
+        <circle cx={7.5} cy={7.5} r={7.5} fill="url(#a)" fillOpacity={0.2} />
+        <circle
+          cx={7.5}
+          cy={7.5}
+          r={7.2}
+          stroke={color}
+          strokeOpacity={0.24}
+          strokeWidth={0.6}
+        />
+        <g clipPath="url(#b)">
          <path
            fill="#fff"
-            d="M14.604 7.623a.43.43 0 0 0-.35-.295l-2.67-.388-1.195-2.421c-.146-.296-.632-.296-.778 0l-1.195 2.42-2.671.388a.434.434 0 0 0-.24.74L7.438 9.95l-.457 2.66a.434.434 0 0 0 .63.457l2.388-1.256 2.39 1.256a.43.43 0 0 0 .457-.032.43.43 0 0 0 .172-.425l-.457-2.66 1.933-1.884a.43.43 0 0 0 .11-.445"
+            d="M11.924 6.27a.42.42 0 0 0-.336-.283L9.02 5.614 7.873 3.288c-.14-.285-.607-.285-.747 0L5.978 5.613l-2.566.373a.417.417 0 0 0-.23.71l1.856 1.81-.439 2.557a.417.417 0 0 0 .605.44l2.295-1.208 2.296 1.207a.41.41 0 0 0 .439-.032.42.42 0 0 0 .165-.407l-.438-2.556 1.857-1.81a.42.42 0 0 0 .105-.428z"
          />
        </g>
        <defs>
          <linearGradient
-            id="b"
-            x1={10.089}
-            x2={10.089}
-            y1={1.142}
-            y2={16.754}
+            id="a"
+            x1={7.5}
+            x2={7.5}
+            y1={0}
+            y2={15}
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#fff" />
            <stop offset={1} stopColor="#fff" stopOpacity={0} />
          </linearGradient>
-          <clipPath id="c">
-            <path fill="#fff" d="M4.796 3.699h10.408v10.408H4.796z" />
+          <clipPath id="b">
+            <path fill="#fff" d="M2.5 2.5h10v10h-10z" />
          </clipPath>
-          <filter
-            id="a"
-            width={20}
-            height={20}
-            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.054} />
-            <feGaussianBlur stdDeviation={1.054} />
-            <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_8442_559"
-            />
-            <feBlend
-              in="SourceGraphic"
-              in2="effect1_dropShadow_8442_559"
-              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 dy={1.054} />
-            <feGaussianBlur stdDeviation={1.054} />
-            <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.1 0" />
-            <feBlend in2="shape" result="effect2_innerShadow_8442_559" />
-            <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.054} />
-            <feGaussianBlur stdDeviation={2.635} />
-            <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.1 0" />
-            <feBlend
-              in2="effect2_innerShadow_8442_559"
-              result="effect3_innerShadow_8442_559"
-            />
-          </filter>
        </defs>
      </svg>
    )
--- a/packages/design-system/icons/src/components/flying-box.tsx
+++ b/packages/design-system/icons/src/components/flying-box.tsx
@@ -16,7 +16,7 @@ const FlyingBox = React.forwardRef<SVGSVGElement, IconProps>(
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={1.5}
-          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"
+          d="M7.5 1.5v5.333M11.278 4.167H3.722c-.982 0-1.778.796-1.778 1.777v5.334c0 .982.796 1.777 1.778 1.777h7.556c.982 0 1.778-.795 1.778-1.777V5.944c0-.981-.796-1.777-1.778-1.777"
        />
        <path
          stroke={color}
--- 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 AiAssistentLuminosity } from "./ai-assistent-luminosity"
 export { default as AiAssistent } from "./ai-assistent"
 export { default as Amazon } from "./amazon"
 export { default as Apple } from "./apple"
@@ -25,6 +26,7 @@ export { default as ArrowPath } from "./arrow-path"
 export { default as ArrowRightDown } from "./arrow-right-down"
 export { default as ArrowRightMini } from "./arrow-right-mini"
 export { default as ArrowRightOnRectangle } from "./arrow-right-on-rectangle"
+export { default as ArrowRight } from "./arrow-right"
 export { default as ArrowUpCircleSolid } from "./arrow-up-circle-solid"
 export { default as ArrowUpDown } from "./arrow-up-down"
 export { default as ArrowUpMini } from "./arrow-up-mini"
@@ -35,7 +37,7 @@ export { default as ArrowUpTray } from "./arrow-up-tray"
 export { default as ArrowUturnLeft } from "./arrow-uturn-left"
 export { default as ArrowsPointingOutMini } from "./arrows-pointing-out-mini"
 export { default as ArrowsPointingOut } from "./arrows-pointing-out"
-export { default as ArrrowRight } from "./arrrow-right"
+export { default as ArrowsReduceDiagonal } from "./arrows-reduce-diagonal"
 export { default as AtSymbol } from "./at-symbol"
 export { default as BackwardSolid } from "./backward-solid"
 export { default as BarsArrowDown } from "./bars-arrow-down"
@@ -50,6 +52,7 @@ 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 Brackets } from "./brackets"
 export { default as BroomSparkle } from "./broom-sparkle"
 export { default as BugAntSolid } from "./bug-ant-solid"
 export { default as Bug } from "./bug"
@@ -97,6 +100,7 @@ export { default as CircleFilledSolid } from "./circle-filled-solid"
 export { default as CircleHalfSolid } from "./circle-half-solid"
 export { default as CircleMiniFilledSolid } from "./circle-mini-filled-solid"
 export { default as CircleMiniSolid } from "./circle-mini-solid"
+export { default as CircleMinus } from "./circle-minus"
 export { default as CircleQuarterSolid } from "./circle-quarter-solid"
 export { default as CircleSliders } from "./circle-sliders"
 export { default as CircleSolid } from "./circle-solid"
@@ -110,6 +114,8 @@ export { default as Clock } from "./clock"
 export { default as CloneDashed } from "./clone-dashed"
 export { default as CloudArrowDown } from "./cloud-arrow-down"
 export { default as CloudArrowUp } from "./cloud-arrow-up"
+export { default as CodeCommit } from "./code-commit"
+export { default as CodeMerge } from "./code-merge"
 export { default as CogSixToothSolid } from "./cog-six-tooth-solid"
 export { default as CogSixTooth } from "./cog-six-tooth"
 export { default as CommandLineSolid } from "./command-line-solid"
@@ -132,6 +138,7 @@ export { default as DocumentSeries } from "./document-series"
 export { default as DocumentTextSolid } from "./document-text-solid"
 export { default as DocumentText } from "./document-text"
 export { default as DotsSix } from "./dots-six"
+export { default as DropCap } from "./drop-cap"
 export { default as EllipseBlueSolid } from "./ellipse-blue-solid"
 export { default as EllipseGreenSolid } from "./ellipse-green-solid"
 export { default as EllipseGreySolid } from "./ellipse-grey-solid"
@@ -146,6 +153,7 @@ export { default as EnvelopeSolid } from "./envelope-solid"
 export { default as Envelope } from "./envelope"
 export { default as ExclamationCircleSolid } from "./exclamation-circle-solid"
 export { default as ExclamationCircle } from "./exclamation-circle"
+export { default as Expand } from "./expand"
 export { default as EyeMini } from "./eye-mini"
 export { default as EyeSlashMini } from "./eye-slash-mini"
 export { default as EyeSlash } from "./eye-slash"
@@ -220,6 +228,7 @@ export { default as Newspaper } from "./newspaper"
 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 Party } from "./party"
 export { default as PauseSolid } from "./pause-solid"
 export { default as PenPlus } from "./pen-plus"
 export { default as PencilSquareSolid } from "./pencil-square-solid"
@@ -241,6 +250,7 @@ export { default as ReactJsEx } from "./react-js-ex"
 export { default as ReactJs } from "./react-js"
 export { default as ReceiptPercent } from "./receipt-percent"
 export { default as Receipt } from "./receipt"
+export { default as Reduce } from "./reduce"
 export { default as ReplaySolid } from "./replay-solid"
 export { default as Resize } from "./resize"
 export { default as RocketLaunchSolid } from "./rocket-launch-solid"
--- a/packages/design-system/icons/src/components/party.tsx
+++ b/packages/design-system/icons/src/components/party.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Party = 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.433 11.549 2.264-7.44a.817.817 0 0 1 1.36-.34l5.176 5.176a.817.817 0 0 1-.34 1.36l-7.441 2.264a.817.817 0 0 1-1.02-1.02zM5.724 11.876 3.95 6.56M8.6 11 6.254 3.967"
+        />
+        <path
+          fill={color}
+          d="m13.824 2.185-.773-.257-.258-.773c-.083-.25-.497-.25-.58 0l-.259.773-.772.257a.307.307 0 0 0 0 .582l.772.257.258.773a.306.306 0 0 0 .58 0l.258-.773.773-.257a.307.307 0 0 0 0-.582M10.563 5.05a.613.613 0 1 0 0-1.225.613.613 0 0 0 0 1.225"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M8.317 2.959c.15-.109.48-.38.672-.856.25-.623.096-1.178.045-1.34M12.042 6.683c.108-.15.38-.48.855-.672a2 2 0 0 1 1.34-.045"
+        />
+      </svg>
+    )
+  }
+)
+Party.displayName = "Party"
+export default Party
--- a/packages/design-system/icons/src/components/reduce.tsx
+++ b/packages/design-system/icons/src/components/reduce.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Reduce = 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.5 1.944v1.778c0 .982-.796 1.778-1.778 1.778H1.944M13.056 5.5h-1.778A1.777 1.777 0 0 1 9.5 3.722V1.944M9.5 13.056v-1.778c0-.982.796-1.778 1.778-1.778h1.778M1.944 9.5h1.778c.982 0 1.778.796 1.778 1.778v1.778"
+        />
+      </svg>
+    )
+  }
+)
+Reduce.displayName = "Reduce"
+export default Reduce
--- a/packages/design-system/icons/src/components/sparkles-mini-solid.tsx
+++ b/packages/design-system/icons/src/components/sparkles-mini-solid.tsx
@@ -13,7 +13,7 @@ const SparklesMiniSolid = React.forwardRef<SVGSVGElement, IconProps>(
      >
        <path
          fill={color}
-          d="m1.582 3.905 1.123.374.374 1.123a.446.446 0 0 0 .845 0l.374-1.123 1.122-.374a.445.445 0 0 0 0-.842l-1.122-.375-.374-1.122c-.122-.363-.722-.363-.844 0l-.374 1.122-1.123.375a.444.444 0 0 0 0 .842M13.418 11.063l-1.122-.375-.375-1.122c-.121-.363-.721-.363-.843 0l-.374 1.122-1.123.375a.444.444 0 0 0 0 .842l1.123.375.374 1.122a.446.446 0 0 0 .844 0l.374-1.122 1.123-.375a.445.445 0 0 0 0-.842M7.967 9.531l-1.801-.713-.713-1.802c-.202-.508-1.038-.508-1.24 0L3.5 8.818l-1.8.713a.668.668 0 0 0 0 1.24l1.8.712.713 1.802a.667.667 0 0 0 1.239 0l.713-1.802 1.8-.713a.667.667 0 0 0 .002-1.239M13.3 4.198l-1.8-.713-.714-1.802c-.201-.509-1.038-.509-1.24 0l-.713 1.802-1.8.713a.668.668 0 0 0 0 1.239l1.8.713.713 1.801a.667.667 0 0 0 1.24 0l.712-1.801 1.801-.713a.668.668 0 0 0 .001-1.24"
+          d="m1.582 3.905 1.123.375.374 1.122a.446.446 0 0 0 .845 0l.374-1.122 1.122-.375a.444.444 0 0 0 0-.842l-1.122-.375-.374-1.122c-.122-.363-.722-.363-.844 0l-.374 1.122-1.123.375a.444.444 0 0 0 0 .842M13.418 11.063l-1.122-.375-.375-1.122c-.121-.363-.721-.363-.843 0l-.374 1.122-1.123.375a.444.444 0 0 0 0 .842l1.123.375.374 1.122a.446.446 0 0 0 .844 0l.374-1.122 1.123-.375a.445.445 0 0 0 0-.842M7.967 9.531l-1.801-.713-.713-1.802c-.202-.508-1.038-.508-1.24 0L3.5 8.818l-1.8.713a.668.668 0 0 0 0 1.24l1.8.712.713 1.802a.667.667 0 0 0 1.239 0l.713-1.802 1.8-.713a.667.667 0 0 0 .002-1.239M13.3 4.198l-1.8-.713-.714-1.802c-.201-.508-1.038-.508-1.24 0l-.713 1.802-1.8.713a.668.668 0 0 0 0 1.239l1.8.713.713 1.801a.667.667 0 0 0 1.24 0l.712-1.801 1.801-.713a.668.668 0 0 0 .001-1.24"
        />
      </svg>
    )
--- a/packages/design-system/icons/src/components/square-grey-solid.tsx
+++ b/packages/design-system/icons/src/components/square-grey-solid.tsx
@@ -11,7 +11,7 @@ const SquareGreySolid = React.forwardRef<SVGSVGElement, IconProps>(
        ref={ref}
        {...props}
      >
-        <rect width={8} height={8} x={3.5} y={3.5} fill="#A1A1AA" rx={2} />
+        <rect width={8} height={8} x={3.5} y={3.5} fill="#71717A" rx={2} />
        <rect
          width={7.5}
          height={7.5}
--- a/packages/design-system/icons/src/components/tag-illustration.tsx
+++ b/packages/design-system/icons/src/components/tag-illustration.tsx
@@ -13,7 +13,7 @@ const TagIllustration = React.forwardRef<SVGSVGElement, IconProps>(
      >
        <g filter="url(#a)">
          <path
-            fill="#818CF8"
+            fill="#60A5FA"
            d="M12.863 6.686 8.315 2.138A2.16 2.16 0 0 0 6.777 1.5H2.884c-.763 0-1.384.62-1.384 1.384v3.893c0 .581.226 1.127.638 1.538l4.548 4.548c.41.412.957.637 1.537.637s1.128-.226 1.538-.637l3.102-3.102c.412-.41.637-.957.637-1.538 0-.58-.226-1.127-.637-1.537"
          />
          <path
@@ -30,7 +30,7 @@ const TagIllustration = React.forwardRef<SVGSVGElement, IconProps>(
        />
        <g filter="url(#c)">
          <path
-            fill="#818CF8"
+            fill="#60A5FA"
            d="M5.257 6.246a.99.99 0 0 1-.989-.989.99.99 0 0 1 .989-.989.99.99 0 0 1 .989.99.99.99 0 0 1-.989.988m3.385 3.979a.59.59 0 0 1-.838 0L6.222 8.643a.593.593 0 1 1 .84-.84l1.581 1.582a.593.593 0 0 1 0 .84m1.582-1.582a.59.59 0 0 1-.838 0L7.804 7.06a.593.593 0 1 1 .84-.84l1.581 1.582a.593.593 0 0 1 0 .84"
          />
          <path
--- a/packages/design-system/icons/src/components/thumbnail-badge.tsx
+++ b/packages/design-system/icons/src/components/thumbnail-badge.tsx
@@ -5,100 +5,40 @@ const ThumbnailBadge = React.forwardRef<SVGSVGElement, IconProps>(
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
-        width={20}
-        height={20}
+        width={15}
+        height={15}
        fill="none"
        ref={ref}
        {...props}
      >
-        <g filter="url(#a)">
-          <circle cx={10} cy={8.903} r={7.806} fill="#3B82F6" />
-          <circle
-            cx={10}
-            cy={8.903}
-            r={7.806}
-            fill="url(#b)"
-            fillOpacity={0.2}
-          />
-          <circle
-            cx={10}
-            cy={8.903}
-            r={7.556}
-            stroke="#000"
-            strokeOpacity={0.2}
-            strokeWidth={0.5}
-          />
-        </g>
-        <g fill="#fff" clipPath="url(#c)">
-          <path d="M6.098 11.393a.724.724 0 0 1-.724-.723V7.136a.724.724 0 0 1 .951-.686l.487.163a.434.434 0 1 1-.274.822l-.297-.098v3.133l.297-.099a.433.433 0 1 1 .274.823l-.487.162a.7.7 0 0 1-.227.037M8.41 12.517a.723.723 0 0 1-.722-.723V6.012a.72.72 0 0 1 1-.667l.467.194a.434.434 0 0 1-.333.801l-.267-.111v5.349l.267-.111a.434.434 0 1 1 .333.8l-.467.195a.7.7 0 0 1-.278.055M14.038 5.752l-3.012-1.39A.722.722 0 0 0 10 5.018v7.77a.72.72 0 0 0 .722.724.7.7 0 0 0 .304-.067l3.012-1.39c.357-.165.588-.526.588-.92V6.672c0-.393-.23-.754-.588-.919" />
+        <circle cx={7.5} cy={7.5} r={7.5} fill="#3B82F6" />
+        <circle cx={7.5} cy={7.5} r={7.5} fill="url(#a)" fillOpacity={0.2} />
+        <circle
+          cx={7.5}
+          cy={7.5}
+          r={7.2}
+          stroke={color}
+          strokeOpacity={0.24}
+          strokeWidth={0.6}
+        />
+        <g fill="#fff" clipPath="url(#b)">
+          <path d="M3.75 9.892a.696.696 0 0 1-.694-.694V5.802a.696.696 0 0 1 .914-.659l.467.156a.417.417 0 0 1-.264.79l-.285-.094v3.01l.285-.095a.416.416 0 1 1 .264.791l-.467.156a.7.7 0 0 1-.22.036M5.972 10.972a.695.695 0 0 1-.694-.694V4.722a.693.693 0 0 1 .961-.64l.45.186a.417.417 0 0 1-.321.77l-.256-.107v5.139l.256-.107a.417.417 0 0 1 .32.77l-.449.186a.7.7 0 0 1-.267.053M11.38 4.473 8.485 3.137a.694.694 0 0 0-.986.63v7.466a.69.69 0 0 0 .694.695.7.7 0 0 0 .292-.065l2.893-1.335a.98.98 0 0 0 .565-.883v-4.29a.98.98 0 0 0-.565-.882" />
        </g>
        <defs>
          <linearGradient
-            id="b"
-            x1={10.09}
-            x2={10.09}
-            y1={1.142}
-            y2={16.754}
+            id="a"
+            x1={7.5}
+            x2={7.5}
+            y1={0}
+            y2={15}
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#fff" />
            <stop offset={1} stopColor="#fff" stopOpacity={0} />
          </linearGradient>
-          <clipPath id="c">
-            <path fill="#fff" d="M4.796 3.699h10.408v10.408H4.796z" />
+          <clipPath id="b">
+            <path fill="#fff" d="M2.5 2.5h10v10h-10z" />
          </clipPath>
-          <filter
-            id="a"
-            width={20}
-            height={20}
-            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.054} />
-            <feGaussianBlur stdDeviation={1.054} />
-            <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_6384_214"
-            />
-            <feBlend
-              in="SourceGraphic"
-              in2="effect1_dropShadow_6384_214"
-              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 dy={1.054} />
-            <feGaussianBlur stdDeviation={1.054} />
-            <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.1 0" />
-            <feBlend in2="shape" result="effect2_innerShadow_6384_214" />
-            <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.054} />
-            <feGaussianBlur stdDeviation={2.635} />
-            <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.1 0" />
-            <feBlend
-              in2="effect2_innerShadow_6384_214"
-              result="effect3_innerShadow_6384_214"
-            />
-          </filter>
        </defs>
      </svg>
    )
--- a/packages/design-system/icons/src/components/verified-badge.tsx
+++ b/packages/design-system/icons/src/components/verified-badge.tsx
@@ -5,104 +5,50 @@ const VerifiedBadge = React.forwardRef<SVGSVGElement, IconProps>(
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
-        width={20}
-        height={20}
+        width={15}
+        height={15}
        fill="none"
        ref={ref}
        {...props}
      >
-        <g filter="url(#a)">
-          <path
-            fill="#3B82F6"
-            fillRule="evenodd"
-            d="M7.28 2.337A3.6 3.6 0 0 1 10 1.097c1.086 0 2.06.48 2.72 1.24a3.6 3.6 0 0 1 2.8 1.046 3.6 3.6 0 0 1 1.047 2.8 3.6 3.6 0 0 1 1.24 2.72 3.6 3.6 0 0 1-1.241 2.72 3.6 3.6 0 0 1-1.046 2.8 3.6 3.6 0 0 1-2.8 1.046 3.6 3.6 0 0 1-4.215.916 3.6 3.6 0 0 1-1.225-.916 3.6 3.6 0 0 1-2.8-1.046 3.6 3.6 0 0 1-1.047-2.8 3.6 3.6 0 0 1-1.24-2.72c0-1.087.481-2.06 1.241-2.72a3.6 3.6 0 0 1 1.047-2.8 3.6 3.6 0 0 1 2.8-1.046"
-            clipRule="evenodd"
-          />
-          <path
-            fill="url(#b)"
-            fillOpacity={0.2}
-            fillRule="evenodd"
-            d="M7.28 2.337A3.6 3.6 0 0 1 10 1.097c1.086 0 2.06.48 2.72 1.24a3.6 3.6 0 0 1 2.8 1.046 3.6 3.6 0 0 1 1.047 2.8 3.6 3.6 0 0 1 1.24 2.72 3.6 3.6 0 0 1-1.241 2.72 3.6 3.6 0 0 1-1.046 2.8 3.6 3.6 0 0 1-2.8 1.046 3.6 3.6 0 0 1-4.215.916 3.6 3.6 0 0 1-1.225-.916 3.6 3.6 0 0 1-2.8-1.046 3.6 3.6 0 0 1-1.047-2.8 3.6 3.6 0 0 1-1.24-2.72c0-1.087.481-2.06 1.241-2.72a3.6 3.6 0 0 1 1.047-2.8 3.6 3.6 0 0 1 2.8-1.046"
-            clipRule="evenodd"
-          />
-          <path
-            stroke="#000"
-            strokeOpacity={0.2}
-            strokeWidth={0.5}
-            d="M3.433 11.623a3.6 3.6 0 0 0 1.047 2.8 3.6 3.6 0 0 0 2.8 1.046zm0 0a3.6 3.6 0 0 1-1.24-2.72c0-1.087.481-2.06 1.241-2.72m0 5.44v-5.44m0 0a3.6 3.6 0 0 1 1.047-2.8zm3.828-3.586.13.009.085-.099A3.34 3.34 0 0 1 10 1.357c1.008 0 1.91.445 2.523 1.15l.085.099.13-.01a3.34 3.34 0 0 1 2.598.971 3.34 3.34 0 0 1 .971 2.598l-.01.13.1.085a3.34 3.34 0 0 1 1.149 2.523 3.34 3.34 0 0 1-1.15 2.523l-.099.085.01.13a3.34 3.34 0 0 1-.971 2.597 3.34 3.34 0 0 1-2.598.971l-.13-.009-.085.098A3.34 3.34 0 0 1 10 16.448a3.34 3.34 0 0 1-2.523-1.15l-.085-.098-.13.01a3.34 3.34 0 0 1-2.598-.97v-.001a3.34 3.34 0 0 1-.971-2.598l.01-.13-.1-.085a3.34 3.34 0 0 1-1.149-2.523c0-1.008.445-1.911 1.15-2.523l.099-.086-.01-.13a3.34 3.34 0 0 1 .971-2.596 3.34 3.34 0 0 1 2.598-.971Z"
-          />
-        </g>
+        <path
+          fill="#3B82F6"
+          fillRule="evenodd"
+          d="M4.887 1.192A3.45 3.45 0 0 1 7.5 0a3.45 3.45 0 0 1 2.613 1.192 3.45 3.45 0 0 1 2.69 1.005 3.46 3.46 0 0 1 1.006 2.69 3.455 3.455 0 0 1 .88 4.05c-.206.45-.506.851-.88 1.176a3.46 3.46 0 0 1-1.006 2.69 3.45 3.45 0 0 1-2.69 1.005 3.455 3.455 0 0 1-4.05.88 3.45 3.45 0 0 1-1.176-.88 3.45 3.45 0 0 1-2.69-1.004 3.45 3.45 0 0 1-1.006-2.69A3.45 3.45 0 0 1 0 7.5a3.45 3.45 0 0 1 1.192-2.613 3.45 3.45 0 0 1 1.005-2.69 3.45 3.45 0 0 1 2.69-1.005"
+          clipRule="evenodd"
+        />
+        <path
+          fill="url(#a)"
+          fillOpacity={0.2}
+          fillRule="evenodd"
+          d="M4.887 1.192A3.45 3.45 0 0 1 7.5 0a3.45 3.45 0 0 1 2.613 1.192 3.45 3.45 0 0 1 2.69 1.005 3.46 3.46 0 0 1 1.006 2.69 3.455 3.455 0 0 1 .88 4.05c-.206.45-.506.851-.88 1.176a3.46 3.46 0 0 1-1.006 2.69 3.45 3.45 0 0 1-2.69 1.005 3.455 3.455 0 0 1-4.05.88 3.45 3.45 0 0 1-1.176-.88 3.45 3.45 0 0 1-2.69-1.004 3.45 3.45 0 0 1-1.006-2.69A3.45 3.45 0 0 1 0 7.5a3.45 3.45 0 0 1 1.192-2.613 3.45 3.45 0 0 1 1.005-2.69 3.45 3.45 0 0 1 2.69-1.005"
+          clipRule="evenodd"
+        />
+        <path
+          stroke={color}
+          strokeOpacity={0.24}
+          strokeWidth={0.6}
+          d="m4.866 1.49.15.011.098-.113A3.15 3.15 0 0 1 7.5.3a3.15 3.15 0 0 1 2.387 1.088l.098.113.15-.01a3.15 3.15 0 0 1 2.457.918 3.16 3.16 0 0 1 .918 2.457l-.01.15.113.098A3.16 3.16 0 0 1 14.7 7.5a3.15 3.15 0 0 1-1.088 2.386l-.113.099.01.15a3.16 3.16 0 0 1-.918 2.456 3.15 3.15 0 0 1-2.457.918l-.15-.01-.098.113A3.15 3.15 0 0 1 7.5 14.7a3.15 3.15 0 0 1-2.386-1.088l-.099-.114-.15.011a3.15 3.15 0 0 1-2.457-.917 3.15 3.15 0 0 1-.918-2.458l.01-.15-.113-.098A3.15 3.15 0 0 1 .3 7.5a3.15 3.15 0 0 1 1.088-2.387l.113-.098-.01-.15a3.15 3.15 0 0 1 .918-2.456 3.15 3.15 0 0 1 2.457-.918Z"
+        />
        <path
          stroke="#fff"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={1.5}
-          d="m6.964 9.206 2.429 2.429 3.643-5.464"
+          d="m4.584 7.792 2.333 2.333 3.5-5.25"
        />
        <defs>
          <linearGradient
-            id="b"
-            x1={10}
-            x2={10}
-            y1={1.097}
-            y2={16.709}
+            id="a"
+            x1={7.5}
+            x2={7.5}
+            y1={0}
+            y2={15}
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#fff" />
            <stop offset={1} stopColor="#fff" stopOpacity={0} />
          </linearGradient>
-          <filter
-            id="a"
-            width={20}
-            height={20}
-            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.054} />
-            <feGaussianBlur stdDeviation={1.054} />
-            <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_6386_370"
-            />
-            <feBlend
-              in="SourceGraphic"
-              in2="effect1_dropShadow_6386_370"
-              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 dy={1.054} />
-            <feGaussianBlur stdDeviation={1.054} />
-            <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.1 0" />
-            <feBlend in2="shape" result="effect2_innerShadow_6386_370" />
-            <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.054} />
-            <feGaussianBlur stdDeviation={2.635} />
-            <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.1 0" />
-            <feBlend
-              in2="effect2_innerShadow_6386_370"
-              result="effect3_innerShadow_6386_370"
-            />
-          </filter>
        </defs>
      </svg>
    )
--- a/packages/design-system/ui-preset/src/theme/extension/theme.ts
+++ b/packages/design-system/ui-preset/src/theme/extension/theme.ts
@@ -301,6 +301,14 @@ export const theme = {
          "muted": {
            "DEFAULT": "var(--fg-muted)"
          }
+        },
+        "alpha": {
+          "250": {
+            "DEFAULT": "var(--alpha-250)"
+          },
+          "400": {
+            "DEFAULT": "var(--alpha-400)"
+          }
        }
      }
    },
@@ -325,9 +333,9 @@ export const theme = {
      "elevation-flyout": "var(--elevation-flyout)",
      "elevation-tooltip": "var(--elevation-tooltip)",
      "elevation-modal": "var(--elevation-modal)",
-      "elevation-commandbar": "var(--elevation-commandbar)",
      "elevation-code-block": "var(--elevation-code-block)",
-      "buttons-inverted": "var(--buttons-inverted)"
+      "buttons-inverted": "var(--buttons-inverted)",
+      "elevation-commandbar": "var(--elevation-commandbar)"
    }
  }
 }
--- a/packages/design-system/ui-preset/src/theme/tokens/colors.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/colors.ts
@@ -87,7 +87,9 @@ export const colors = {
    "--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)"
+    "--fg-muted": "rgba(113, 113, 122, 1)",
+    "--alpha-400": "rgba(255, 255, 255, 0.24)",
+    "--alpha-250": "rgba(255, 255, 255, 0.1)"
  },
  "light": {
    "--tag-neutral-border": "rgba(228, 228, 231, 1)",
@@ -177,6 +179,8 @@ export const colors = {
    "--contrast-border-top": "rgba(24, 24, 27, 1)",
    "--bg-overlay": "rgba(24, 24, 27, 0.4)",
    "--fg-disabled": "rgba(161, 161, 170, 1)",
-    "--fg-muted": "rgba(113, 113, 122, 1)"
+    "--fg-muted": "rgba(113, 113, 122, 1)",
+    "--alpha-400": "rgba(24, 24, 27, 0.24)",
+    "--alpha-250": "rgba(24, 24, 27, 0.1)"
  }
 }
--- a/packages/design-system/ui-preset/src/theme/tokens/effects.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/effects.ts
@@ -11,7 +11,6 @@ export const effects = {
    "--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)",
    "--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-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-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)",
@@ -21,8 +20,9 @@ export const effects = {
    "--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)"
+    "--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)",
+    "--elevation-commandbar": "0px 0px 0px 0.75px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.25px 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-tooltip": "0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.32), 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 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)",
@@ -45,8 +45,8 @@ export const effects = {
    "--elevation-flyout": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)",
    "--elevation-tooltip": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08)",
    "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 1.5px rgba(228, 228, 231, 0.6) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)",
-    "--elevation-commandbar": "0px 0px 0px 1px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.3) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)",
    "--elevation-code-block": "0px 0px 0px 1px rgba(24, 24, 27, 1) inset, 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset",
-    "--buttons-inverted": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(24, 24, 27, 1)"
+    "--buttons-inverted": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(24, 24, 27, 1)",
+    "--elevation-commandbar": "0px 0px 0px 0.75px rgba(39, 39, 42, 1) inset, 0px 0px 0px 1.25px rgba(255, 255, 255, 0.3) inset, 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08)"
  }
 }
--- a/packages/design-system/ui-preset/src/theme/tokens/typography.ts
+++ b/packages/design-system/ui-preset/src/theme/tokens/typography.ts
@@ -137,24 +137,12 @@ export const typography = {
    "fontWeight": "500",
    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
  },
-  ".code-label": {
-    "fontSize": "0.75rem",
-    "lineHeight": "1.25rem",
-    "fontWeight": "400",
-    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
-  },
  ".h4-webs": {
    "fontSize": "1.5rem",
    "lineHeight": "1.875rem",
    "fontWeight": "500",
    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
  },
-  ".code-body": {
-    "fontSize": "0.75rem",
-    "lineHeight": "1.125rem",
-    "fontWeight": "400",
-    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
-  },
  ".h2-core": {
    "fontSize": "1rem",
    "lineHeight": "1.5rem",
@@ -190,5 +178,17 @@ export const typography = {
    "lineHeight": "1.5rem",
    "fontWeight": "500",
    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
+  },
+  ".code-body": {
+    "fontSize": "0.75rem",
+    "lineHeight": "1.125rem",
+    "fontWeight": "400",
+    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
+  },
+  ".code-label": {
+    "fontSize": "0.75rem",
+    "lineHeight": "0.9375rem",
+    "fontWeight": "500",
+    "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
  }
 }