fix(ui,icons,ui-preset): Fix CodeBlock and Command components (#10369)

.changeset/strange-trainers-watch.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/ui-preset": patch
+"@medusajs/icons": patch
+---
+
+feat(ui,icons,ui-preset): Sync with latest changes from Figma, and fix Code components

packages/design-system/icons/src/components/__tests__/amazon.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Amazon from "../amazon"
+
+  describe("Amazon", () => {
+    it("should render the icon without errors", async () => {
+      render(<Amazon data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/arrow-right-down.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import ArrowRightDown from "../arrow-right-down"
+
+  describe("ArrowRightDown", () => {
+    it("should render the icon without errors", async () => {
+      render(<ArrowRightDown data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/bell-alert-done.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 BellAlertDone from "../bell-alert-done"
+  import BellAlertDone from "../bell-alert-done"
 
-describe("BellAlertDone", () => {
-  it("should render the icon without errors", async () => {
-    render(<BellAlertDone data-testid="icon" />)
+  describe("BellAlertDone", () => {
+    it("should render the icon without errors", async () => {
+      render(<BellAlertDone data-testid="icon" />)
 
-    const svgElement = screen.getByTestId("icon")
 
-    expect(svgElement).toBeInTheDocument()
+      const svgElement = screen.getByTestId("icon")
 
-    cleanup()
-  })
-})
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/broom-sparkle.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import BroomSparkle from "../broom-sparkle"
+
+  describe("BroomSparkle", () => {
+    it("should render the icon without errors", async () => {
+      render(<BroomSparkle data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/button.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Button from "../button"
+
+  describe("Button", () => {
+    it("should render the icon without errors", async () => {
+      render(<Button data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/caret-maximize-diagonal.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CaretMaximizeDiagonal from "../caret-maximize-diagonal"
+
+  describe("CaretMaximizeDiagonal", () => {
+    it("should render the icon without errors", async () => {
+      render(<CaretMaximizeDiagonal data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/caret-minimize-diagonal.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CaretMinimizeDiagonal from "../caret-minimize-diagonal"
+
+  describe("CaretMinimizeDiagonal", () => {
+    it("should render the icon without errors", async () => {
+      render(<CaretMinimizeDiagonal data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/circle-sliders.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CircleSliders from "../circle-sliders"
+
+  describe("CircleSliders", () => {
+    it("should render the icon without errors", async () => {
+      render(<CircleSliders data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/clone-dashed.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import CloneDashed from "../clone-dashed"
+
+  describe("CloneDashed", () => {
+    it("should render the icon without errors", async () => {
+      render(<CloneDashed data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/decision-process.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import DecisionProcess from "../decision-process"
+
+  describe("DecisionProcess", () => {
+    it("should render the icon without errors", async () => {
+      render(<DecisionProcess data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/directions.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Directions from "../directions"
+
+  describe("Directions", () => {
+    it("should render the icon without errors", async () => {
+      render(<Directions data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/featured-badge.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import FeaturedBadge from "../featured-badge"
+
+  describe("FeaturedBadge", () => {
+    it("should render the icon without errors", async () => {
+      render(<FeaturedBadge data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/hand-truck.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import HandTruck from "../hand-truck"
+
+  describe("HandTruck", () => {
+    it("should render the icon without errors", async () => {
+      render(<HandTruck data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/heart-broken.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import HeartBroken from "../heart-broken"
+
+  describe("HeartBroken", () => {
+    it("should render the icon without errors", async () => {
+      render(<HeartBroken data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/house.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import House from "../house"
+
+  describe("House", () => {
+    it("should render the icon without errors", async () => {
+      render(<House data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/levels.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Levels from "../levels"
+
+  describe("Levels", () => {
+    it("should render the icon without errors", async () => {
+      render(<Levels data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/media-play.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import MediaPlay from "../media-play"
+
+  describe("MediaPlay", () => {
+    it("should render the icon without errors", async () => {
+      render(<MediaPlay data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/scroll-text.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import ScrollText from "../scroll-text"
+
+  describe("ScrollText", () => {
+    it("should render the icon without errors", async () => {
+      render(<ScrollText data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/sendgrid.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Sendgrid from "../sendgrid"
+
+  describe("Sendgrid", () => {
+    it("should render the icon without errors", async () => {
+      render(<Sendgrid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/shipbob.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Shipbob from "../shipbob"
+
+  describe("Shipbob", () => {
+    it("should render the icon without errors", async () => {
+      render(<Shipbob data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/target.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Target from "../target"
+
+  describe("Target", () => {
+    it("should render the icon without errors", async () => {
+      render(<Target data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/tax-exclusive.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import TaxExclusive from "../tax-exclusive"
+
+  describe("TaxExclusive", () => {
+    it("should render the icon without errors", async () => {
+      render(<TaxExclusive data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/tax-inclusive.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import TaxInclusive from "../tax-inclusive"
+
+  describe("TaxInclusive", () => {
+    it("should render the icon without errors", async () => {
+      render(<TaxInclusive data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/text-highlight.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import TextHighlight from "../text-highlight"
+
+  describe("TextHighlight", () => {
+    it("should render the icon without errors", async () => {
+      render(<TextHighlight data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/webshipper.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import Webshipper from "../webshipper"
+
+  describe("Webshipper", () => {
+    it("should render the icon without errors", async () => {
+      render(<Webshipper data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/amazon.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Amazon = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill="#F90"
+          d="M.028 11.263q.067-.11.218-.014 3.409 1.978 7.418 1.978 2.675 0 5.28-.996l.197-.088q.128-.054.183-.081c.141-.055.244-.029.328.081.075.109.056.21-.075.3-.16.119-.375.256-.629.409q-1.166.695-2.616 1.079a11 11 0 0 1-6.844-.361 11.2 11.2 0 0 1-3.394-2.094q-.093-.07-.094-.137.002-.044.032-.082zm4.103-3.887q0-.942.465-1.61a2.86 2.86 0 0 1 1.275-1.01c.497-.21 1.097-.36 1.82-.45q.366-.043 1.2-.109v-.23c0-.582-.066-.975-.188-1.173q-.282-.404-.9-.406H7.69q-.45.042-.778.288a1.13 1.13 0 0 0-.422.685c-.038.187-.129.29-.272.318l-1.575-.197c-.155-.037-.233-.112-.233-.243 0-.029.005-.057.014-.094q.231-1.209 1.138-1.8C6.17.96 6.873.735 7.679.689h.338c1.031 0 1.848.271 2.43.806.084.094.169.187.253.3.075.103.14.196.177.281a1.2 1.2 0 0 1 .122.356c.037.16.065.263.084.32.019.064.039.187.048.384q.01.291.012.345v3.3c0 .235.038.45.103.648q.099.294.197.421l.319.421q.084.128.085.225 0 .113-.113.196c-.75.657-1.162 1.013-1.226 1.07q-.156.126-.394.027a4 4 0 0 1-.329-.31l-.194-.217A6 6 0 0 1 9.393 9l-.187-.272c-.507.554-1.002.9-1.5 1.04-.31.094-.684.143-1.144.143-.694 0-1.275-.215-1.725-.647q-.675-.643-.675-1.837l-.031-.048zm2.346-.274q-.001.53.265.853a.9.9 0 0 0 .844.307 1 1 0 0 1 .104-.014c.384-.1.675-.346.89-.736q.155-.261.225-.569c.056-.2.075-.369.084-.5.01-.122.01-.337.01-.628v-.338c-.525 0-.928.038-1.2.113-.797.225-1.2.731-1.2 1.519l-.022-.013zm5.726 4.392a.5.5 0 0 1 .083-.106q.34-.228.656-.312.496-.126 1.007-.15a.8.8 0 0 1 .257.018c.406.038.656.105.732.207.04.056.062.142.062.243v.094c0 .319-.093.694-.265 1.125q-.261.646-.723 1.05-.068.057-.123.056-.027.002-.056-.007c-.056-.028-.067-.075-.04-.15q.505-1.184.504-1.65a.36.36 0 0 0-.055-.215c-.09-.104-.343-.16-.765-.16q-.227 0-.543.028a25 25 0 0 0-.625.084q-.083 0-.113-.027c-.018-.019-.022-.03-.012-.048 0-.01.004-.019.012-.04v-.037z"
+        />
+      </svg>
+    )
+  }
+)
+Amazon.displayName = "Amazon"
+export default Amazon

packages/design-system/icons/src/components/arrow-right-down.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const ArrowRightDown = 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.167 13.056V3.723c0-.983-.796-1.778-1.778-1.778H2.833"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m4.389 9.278 3.778 3.778 3.778-3.778"
+        />
+      </svg>
+    )
+  }
+)
+ArrowRightDown.displayName = "ArrowRightDown"
+export default ArrowRightDown

packages/design-system/icons/src/components/bars-three.tsx

@@ -11,25 +11,13 @@ const BarsThree = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g clipPath="url(#a)">
-          <g
-            stroke={color}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            clipPath="url(#b)"
-          >
-            <path d="M1.5 7.5h12M1.5 2.833h12M1.5 12.167h12" />
-          </g>
-        </g>
-        <defs>
-          <clipPath id="a">
-            <path fill="#fff" d="M0 0h15v15H0z" />
-          </clipPath>
-          <clipPath id="b">
-            <path fill="#fff" d="M-.5-.5h16v16h-16z" />
-          </clipPath>
-        </defs>
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M1.5 7.5h12M1.5 2.833h12M1.5 12.167h12"
+        />
       </svg>
     )
   }

packages/design-system/icons/src/components/bell-alert-done.tsx

@@ -4,31 +4,32 @@ const BellAlertDone = React.forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", ...props }, ref) => {
     return (
       <svg
+        xmlns="http://www.w3.org/2000/svg"
         width={15}
         height={15}
         fill="none"
-        xmlns="http://www.w3.org/2000/svg"
         ref={ref}
         {...props}
       >
-        <g>
-          <circle cx="12.75" cy="2.5" r="2.5" fill="#60A5FA" />
+        <g clipPath="url(#a)">
+          <circle cx={12.5} cy={2.5} r={2.5} fill="#60A5FA" />
           <circle
-            cx="12.75"
-            cy="2.5"
-            r="2"
+            cx={12.5}
+            cy={2.5}
+            r={2}
             stroke={color}
-            strokeOpacity="0.12"
+            strokeOpacity={0.12}
           />
           <path
-            d="M9.2426 0.575398C8.77142 0.427273 8.27003 0.347412 7.75 0.347412C5.00423 0.347412 2.77778 2.57387 2.77778 5.31963V9.54186C2.77778 10.1099 2.31801 10.5696 1.75 10.5696C1.33579 10.5696 1 10.9054 1 11.3196C1 11.7338 1.33579 12.0696 1.75 12.0696H13.75C14.1642 12.0696 14.5 11.7338 14.5 11.3196C14.5 10.9054 14.1642 10.5696 13.75 10.5696C13.182 10.5696 12.7222 10.1099 12.7222 9.54186V6.49991C12.1913 6.49629 11.6849 6.38924 11.2222 6.19788V9.54186C11.2222 9.90786 11.2999 10.2557 11.4398 10.5696H4.06022C4.20006 10.2557 4.27778 9.90786 4.27778 9.54186V5.31963C4.27778 3.40229 5.83266 1.84741 7.75 1.84741C8.10883 1.84741 8.45496 1.90187 8.78058 2.00297C8.84406 1.4908 9.00436 1.00865 9.2426 0.575398Z"
-            fill={color}
-          />
-          <path
-            d="M9.16158 13.0394C9.07714 12.9354 8.95091 12.875 8.81669 12.875H6.68425C6.55003 12.875 6.4238 12.9354 6.33936 13.0394C6.25491 13.1434 6.22203 13.2803 6.24958 13.411C6.40336 14.1417 7.02114 14.6528 7.75091 14.6528C8.48069 14.6528 9.09847 14.1417 9.25225 13.411C9.2798 13.2803 9.24603 13.1434 9.16158 13.0394Z"
             fill={color}
+            d="M8.993.575A4.973 4.973 0 0 0 2.528 5.32v4.223c0 .568-.46 1.028-1.028 1.028a.75.75 0 0 0 0 1.5h12a.75.75 0 0 0 0-1.5c-.568 0-1.028-.46-1.028-1.028V6.5a4 4 0 0 1-1.5-.302v3.344c0 .366.078.714.218 1.028H3.81a2.5 2.5 0 0 0 .218-1.028V5.32A3.473 3.473 0 0 1 8.53 2.003c.063-.512.223-.994.462-1.428M8.912 13.04a.44.44 0 0 0-.345-.165H6.434a.444.444 0 0 0-.434.536c.153.73.771 1.242 1.5 1.242.73 0 1.348-.511 1.502-1.242a.45.45 0 0 0-.09-.372"
           />
         </g>
+        <defs>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h15v15H0z" />
+          </clipPath>
+        </defs>
       </svg>
     )
   }

packages/design-system/icons/src/components/broom-sparkle.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const BroomSparkle = 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}
+          fillRule="evenodd"
+          d="M14.072.72a.75.75 0 0 1 0 1.06L9.695 6.157c.432.54.682 1.129.768 1.745.115.828-.072 1.635-.388 2.353-.626 1.42-1.826 2.66-2.73 3.382a2.44 2.44 0 0 1-2.184.448C2.525 13.335.986 11.123.712 8.408a.75.75 0 0 1 .645-.818c.854-.117 1.363-.583 2.44-1.674 1.375-1.393 3.326-1.583 4.767-.75L13.01.72a.75.75 0 0 1 1.06 0M4.895 6.94l-.03.03-.045.045c-.81.82-1.52 1.54-2.52 1.886.374 1.886 1.525 3.244 3.271 3.741.282.08.596.017.838-.177.642-.513 1.412-1.295 1.945-2.16a13.2 13.2 0 0 1-2.23-1.87v-.001A13 13 0 0 1 4.895 6.94m1.326-.725a11.7 11.7 0 0 0 2.726 2.679q.082-.41.03-.784c-.063-.455-.29-.932-.825-1.401a2.25 2.25 0 0 0-1.93-.494"
+          clipRule="evenodd"
+        />
+        <path
+          fill={color}
+          d="m14.714 9.991-1.052-.35-.351-1.053c-.114-.34-.677-.34-.79 0l-.352 1.052-1.052.351a.417.417 0 0 0 0 .79l1.052.35.351 1.053a.418.418 0 0 0 .792 0l.35-1.052 1.053-.35a.417.417 0 0 0 0-.79M4.577 2.91l-.788-.263-.263-.789c-.085-.255-.508-.255-.593 0l-.263.79-.788.262a.313.313 0 0 0 0 .593l.788.263.263.789a.312.312 0 0 0 .592 0l.263-.79.788-.262a.313.313 0 0 0 .001-.593M6.875 2.5a.625.625 0 1 0 0-1.25.625.625 0 0 0 0 1.25"
+        />
+      </svg>
+    )
+  }
+)
+BroomSparkle.displayName = "BroomSparkle"
+export default BroomSparkle

packages/design-system/icons/src/components/button.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Button = 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.542 7.43V4.793c0-.92-.746-1.667-1.667-1.667h-8.75c-.92 0-1.667.747-1.667 1.667v2.916c0 .92.746 1.667 1.667 1.667h3.067"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m8.278 7.726 5.712 2.087a.27.27 0 0 1-.01.509l-2.614.836-.837 2.615a.27.27 0 0 1-.509.01L7.933 8.07a.27.27 0 0 1 .345-.345"
+        />
+      </svg>
+    )
+  }
+)
+Button.displayName = "Button"
+export default Button

packages/design-system/icons/src/components/caret-maximize-diagonal.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CaretMaximizeDiagonal = 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="M11.944 2.167h-4.13a.887.887 0 0 0-.628 1.517l4.13 4.13a.885.885 0 0 0 .969.192.89.89 0 0 0 .548-.821v-4.13a.89.89 0 0 0-.889-.888M3.684 7.185a.885.885 0 0 0-.969-.193.89.89 0 0 0-.548.822v4.13c0 .49.399.888.889.888h4.13a.887.887 0 0 0 .628-1.517z"
+        />
+      </svg>
+    )
+  }
+)
+CaretMaximizeDiagonal.displayName = "CaretMaximizeDiagonal"
+export default CaretMaximizeDiagonal

packages/design-system/icons/src/components/caret-minimize-diagonal.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CaretMinimizeDiagonal = 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="M9.462 1.407a.885.885 0 0 0-.97-.192.89.89 0 0 0-.548.82v4.132c0 .49.4.888.89.888h4.129a.887.887 0 0 0 .628-1.517zM6.167 7.944h-4.13a.887.887 0 0 0-.628 1.517l4.13 4.13a.885.885 0 0 0 .968.193.89.89 0 0 0 .549-.822v-4.13a.89.89 0 0 0-.89-.888"
+        />
+      </svg>
+    )
+  }
+)
+CaretMinimizeDiagonal.displayName = "CaretMinimizeDiagonal"
+export default CaretMinimizeDiagonal

packages/design-system/icons/src/components/circle-sliders.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CircleSliders = 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.5 13.945a6.444 6.444 0 1 0 0-12.89 6.444 6.444 0 0 0 0 12.89M8.167 5.5h2.666M4.167 5.5h1.777M5.944 3.944v3.111M9.056 9.5h1.777M4.167 9.5h2.666M9.056 7.944v3.111"
+        />
+      </svg>
+    )
+  }
+)
+CircleSliders.displayName = "CircleSliders"
+export default CircleSliders

packages/design-system/icons/src/components/clone-dashed.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const CloneDashed = 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.056 13.944H2.833a1.78 1.78 0 0 1-1.777-1.777V5.944c0-.981.795-1.777 1.777-1.777h6.223c.981 0 1.777.796 1.777 1.777v6.223c0 .981-.796 1.777-1.777 1.777M5.944 1.055a1.78 1.78 0 0 0-1.648 1.112M9.944 1.056H8.167M13.944 2.834c0-.983-.795-1.778-1.777-1.778M13.945 6.834V5.056M12.833 10.705a1.78 1.78 0 0 0 1.111-1.65"
+        />
+      </svg>
+    )
+  }
+)
+CloneDashed.displayName = "CloneDashed"
+export default CloneDashed

packages/design-system/icons/src/components/decision-process.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const DecisionProcess = 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.625 1.875H2.292a.833.833 0 0 0-.834.833v.834c0 .46.373.833.834.833h3.333c.46 0 .833-.373.833-.833v-.834a.833.833 0 0 0-.833-.833M5.625 10.625H2.292a.833.833 0 0 0-.834.833v.834c0 .46.373.833.834.833h3.333c.46 0 .833-.373.833-.833v-.834a.833.833 0 0 0-.833-.833M3.958 6.459v2.083M8.542 3.125h1.666c.46 0 .834.373.834.833v1.667M8.542 11.875h1.666c.46 0 .834-.373.834-.833V9.375M11.042 5.625 14.167 7.5l-3.125 1.875L7.917 7.5z"
+        />
+      </svg>
+    )
+  }
+)
+DecisionProcess.displayName = "DecisionProcess"
+export default DecisionProcess

packages/design-system/icons/src/components/directions.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Directions = 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.5 1.056v12.889M4.611 13.944h5.778M7.5 5.056H2.952a.9.9 0 0 1-.594-.229L1.123 3.716a.89.89 0 0 1 0-1.322l1.235-1.11a.9.9 0 0 1 .594-.23H7.5M9.718 9.056h2.325c.22 0 .431-.081.595-.229l1.234-1.111a.89.89 0 0 0 0-1.322l-1.234-1.11a.9.9 0 0 0-.595-.23H9.718"
+        />
+      </svg>
+    )
+  }
+)
+Directions.displayName = "Directions"
+export default Directions

packages/design-system/icons/src/components/ellipse-solid.tsx

@@ -12,10 +12,7 @@ const EllipseSolid = React.forwardRef<SVGSVGElement, IconProps>(
         {...props}
       >
         <g clipPath="url(#a)">
-          <path
-            fill={color}
-            d="M7.5 14.611A7.111 7.111 0 1 0 7.5.39a7.111 7.111 0 0 0 0 14.222"
-          />
+          <path fill={color} d="M7.5 11.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8" />
         </g>
         <defs>
           <clipPath id="a">

packages/design-system/icons/src/components/featured-badge.tsx

@@ -0,0 +1,111 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const FeaturedBadge = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = "currentColor", ...props }, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={20}
+        height={20}
+        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)">
+          <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"
+          />
+        </g>
+        <defs>
+          <linearGradient
+            id="b"
+            x1={10.089}
+            x2={10.089}
+            y1={1.142}
+            y2={16.754}
+            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>
+          <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>
+    )
+  }
+)
+FeaturedBadge.displayName = "FeaturedBadge"
+export default FeaturedBadge

packages/design-system/icons/src/components/hand-truck.tsx

@@ -1,6 +1,5 @@
 import * as React from "react"
 import type { IconProps } from "../types"
-
 const HandTruck = React.forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", ...props }, ref) => {
     return (
@@ -12,55 +11,20 @@ const HandTruck = React.forwardRef<SVGSVGElement, IconProps>(
         ref={ref}
         {...props}
       >
-        <g
+        <path
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth={1.5}
-          clipPath="url(#a)"
-        >
-          <path
-            d="M10.6918 3.42715L6.96541 4.49011C6.50807 4.62056 6.24309 5.09706 6.37354 5.5544L7.31839 8.86672C7.44885 9.32405 7.92535 9.58904 8.38269 9.45858L12.109 8.39563C12.5664 8.26517 12.8314 7.78867 12.7009 7.33133L11.7561 4.01901C11.6256 3.56168 11.1491 3.29669 10.6918 3.42715Z"
-            stroke="#52525B"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M8.82837 3.95886L9.30112 5.61478"
-            stroke="#52525B"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M7.37573 12.2083L14.6736 10.127"
-            stroke="#52525B"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M5.43299 10.8572L3.26988 3.24407C3.16482 2.87379 2.8264 2.61804 2.44149 2.61804H1.54163"
-            stroke="#52525B"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M5.84728 13.8125C6.67954 13.8125 7.35422 13.1378 7.35422 12.3055C7.35422 11.4733 6.67954 10.7986 5.84728 10.7986C5.01501 10.7986 4.34033 11.4733 4.34033 12.3055C4.34033 13.1378 5.01501 13.8125 5.84728 13.8125Z"
-            stroke="#52525B"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </g>
-
-        <defs>
-          <clipPath id="a">
-            <path fill="#fff" d="M0 0h15v15H0z" />
-          </clipPath>
-        </defs>
+          d="M10.192 2.927 6.465 3.99a.86.86 0 0 0-.591 1.064l.944 3.312a.86.86 0 0 0 1.065.592l3.726-1.063a.86.86 0 0 0 .592-1.064l-.945-3.312a.86.86 0 0 0-1.064-.592M8.328 3.459l.473 1.656M6.876 11.708l7.298-2.081M4.933 10.357 2.77 2.744a.86.86 0 0 0-.828-.626h-.9"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M5.347 13.313a1.507 1.507 0 1 0 0-3.014 1.507 1.507 0 0 0 0 3.014"
+        />
       </svg>
     )
   }

packages/design-system/icons/src/components/heart-broken.tsx

@@ -1,37 +1,33 @@
 import * as React from "react"
 import type { IconProps } from "../types"
-
 const HeartBroken = React.forwardRef<SVGSVGElement, IconProps>(
   ({ color = "currentColor", ...props }, ref) => {
     return (
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width={16}
-        height={16}
+        width={15}
+        height={15}
         fill="none"
         ref={ref}
         {...props}
       >
-        <g id="heart-broken">
-          <path
-            d="M8.24998 3.47314L6.4722 5.72203L10.0278 7.49981L8.24998 9.27759"
-            stroke={color}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-          />
-          <path
-            d="M7.83132 13.0306C8.09532 13.1683 8.40376 13.1683 8.66776 13.0306C10.0633 12.3026 14.4713 9.66434 14.4713 5.37456C14.4784 3.49011 12.9567 1.95589 11.0704 1.94434C9.93532 1.95856 8.88021 2.531 8.24998 3.47322C7.61887 2.531 6.56376 1.95856 5.42954 1.94434C3.54243 1.95589 2.02154 3.49011 2.02865 5.37456C2.02865 9.66434 6.43576 12.3026 7.83132 13.0306Z"
-            stroke={color}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-          />
-        </g>
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.5 3.473 5.722 5.722 9.278 7.5 7.5 9.278"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M7.081 13.03a.9.9 0 0 0 .837 0c1.395-.727 5.803-3.366 5.803-7.655a3.42 3.42 0 0 0-3.4-3.43A3.45 3.45 0 0 0 7.5 3.472a3.45 3.45 0 0 0-2.82-1.529 3.42 3.42 0 0 0-3.401 3.43c0 4.29 4.407 6.929 5.802 7.657"
+        />
       </svg>
     )
   }
 )
-
 HeartBroken.displayName = "HeartBroken"
 export default HeartBroken

packages/design-system/icons/src/components/house.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const House = 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="M12.705 5.011 8.038 1.465a.89.89 0 0 0-1.076 0L2.296 5.01a.89.89 0 0 0-.352.709v6.448c0 .982.796 1.777 1.778 1.777h2.222V10.39a.89.89 0 0 1 .89-.889h1.333a.89.89 0 0 1 .889.889v3.555h2.222c.982 0 1.778-.795 1.778-1.777v-6.45a.89.89 0 0 0-.351-.707"
+        />
+      </svg>
+    )
+  }
+)
+House.displayName = "House"
+export default House

packages/design-system/icons/src/components/index.ts

@@ -1,26 +1,28 @@
 // This file is generated automatically.
-export { default as AcademicCap } from "./academic-cap"
 export { default as AcademicCapSolid } from "./academic-cap-solid"
-export { default as Adjustments } from "./adjustments"
+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 Amazon } from "./amazon"
 export { default as Apple } from "./apple"
 export { default as ArchiveBox } from "./archive-box"
-export { default as ArrowDown } from "./arrow-down"
 export { default as ArrowDownCircle } from "./arrow-down-circle"
-export { default as ArrowDownLeft } from "./arrow-down-left"
 export { default as ArrowDownLeftMini } from "./arrow-down-left-mini"
+export { default as ArrowDownLeft } from "./arrow-down-left"
 export { default as ArrowDownMini } from "./arrow-down-mini"
 export { default as ArrowDownRightMini } from "./arrow-down-right-mini"
 export { default as ArrowDownTray } from "./arrow-down-tray"
-export { default as ArrowLeft } from "./arrow-left"
+export { default as ArrowDown } from "./arrow-down"
 export { default as ArrowLeftMini } from "./arrow-left-mini"
+export { default as ArrowLeft } from "./arrow-left"
 export { default as ArrowLongDown } from "./arrow-long-down"
 export { default as ArrowLongLeft } from "./arrow-long-left"
 export { default as ArrowLongRight } from "./arrow-long-right"
 export { default as ArrowLongUp } from "./arrow-long-up"
-export { default as ArrowPath } from "./arrow-path"
 export { default as ArrowPathMini } from "./arrow-path-mini"
+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 ArrowUpCircleSolid } from "./arrow-up-circle-solid"
@@ -31,58 +33,62 @@ export { default as ArrowUpRightMini } from "./arrow-up-right-mini"
 export { default as ArrowUpRightOnBox } from "./arrow-up-right-on-box"
 export { default as ArrowUpTray } from "./arrow-up-tray"
 export { default as ArrowUturnLeft } from "./arrow-uturn-left"
-export { default as ArrowsPointingOut } from "./arrows-pointing-out"
 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 AtSymbol } from "./at-symbol"
 export { default as BackwardSolid } from "./backward-solid"
 export { default as BarsArrowDown } from "./bars-arrow-down"
 export { default as BarsThree } from "./bars-three"
 export { default as Beaker } from "./beaker"
-export { default as BellAlert } from "./bell-alert"
 export { default as BellAlertDone } from "./bell-alert-done"
 export { default as BellAlertSolid } from "./bell-alert-solid"
-export { default as Bolt } from "./bolt"
+export { default as BellAlert } from "./bell-alert"
 export { default as BoltSolid } from "./bolt-solid"
-export { default as Book } from "./book"
+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 Bug } from "./bug"
+export { default as BroomSparkle } from "./broom-sparkle"
 export { default as BugAntSolid } from "./bug-ant-solid"
+export { default as Bug } from "./bug"
 export { default as BuildingStorefront } from "./building-storefront"
 export { default as BuildingTax } from "./building-tax"
-export { default as Buildings } from "./buildings"
 export { default as BuildingsMini } from "./buildings-mini"
 export { default as BuildingsSolid } from "./buildings-solid"
-export { default as Calendar } from "./calendar"
+export { default as Buildings } from "./buildings"
+export { default as Button } from "./button"
 export { default as CalendarMini } from "./calendar-mini"
 export { default as CalendarSolid } from "./calendar-solid"
+export { default as Calendar } from "./calendar"
 export { default as Camera } from "./camera"
-export { default as Cash } from "./cash"
+export { default as CaretMaximizeDiagonal } from "./caret-maximize-diagonal"
+export { default as CaretMinimizeDiagonal } from "./caret-minimize-diagonal"
 export { default as CashSolid } from "./cash-solid"
-export { default as Channels } from "./channels"
+export { default as Cash } from "./cash"
 export { default as ChannelsSolid } from "./channels-solid"
+export { default as Channels } from "./channels"
 export { default as ChartBar } from "./chart-bar"
 export { default as ChartPie } from "./chart-pie"
-export { default as ChatBubble } from "./chat-bubble"
-export { default as ChatBubbleLeftRight } from "./chat-bubble-left-right"
 export { default as ChatBubbleLeftRightSolid } from "./chat-bubble-left-right-solid"
-export { default as Check } from "./check"
-export { default as CheckCircle } from "./check-circle"
+export { default as ChatBubbleLeftRight } from "./chat-bubble-left-right"
+export { default as ChatBubble } from "./chat-bubble"
 export { default as CheckCircleMiniSolid } from "./check-circle-mini-solid"
 export { default as CheckCircleSolid } from "./check-circle-solid"
+export { default as CheckCircle } from "./check-circle"
 export { default as CheckMini } from "./check-mini"
-export { default as ChevronDoubleLeft } from "./chevron-double-left"
+export { default as Check } from "./check"
 export { default as ChevronDoubleLeftMiniSolid } from "./chevron-double-left-mini-solid"
-export { default as ChevronDoubleRight } from "./chevron-double-right"
+export { default as ChevronDoubleLeft } from "./chevron-double-left"
 export { default as ChevronDoubleRightMiniSolid } from "./chevron-double-right-mini-solid"
-export { default as ChevronDown } from "./chevron-down"
+export { default as ChevronDoubleRight } from "./chevron-double-right"
 export { default as ChevronDownMini } from "./chevron-down-mini"
-export { default as ChevronLeft } from "./chevron-left"
+export { default as ChevronDown } from "./chevron-down"
 export { default as ChevronLeftMini } from "./chevron-left-mini"
-export { default as ChevronRight } from "./chevron-right"
+export { default as ChevronLeft } from "./chevron-left"
 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"
@@ -92,35 +98,39 @@ 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 CircleQuarterSolid } from "./circle-quarter-solid"
+export { default as CircleSliders } from "./circle-sliders"
 export { default as CircleSolid } from "./circle-solid"
-export { default as CircleStack } from "./circle-stack"
 export { default as CircleStackSolid } from "./circle-stack-solid"
+export { default as CircleStack } from "./circle-stack"
 export { default as CircleThreeQuartersSolid } from "./circle-three-quarters-solid"
-export { default as Clock } from "./clock"
 export { default as ClockChangedSolidMini } from "./clock-changed-solid-mini"
-export { default as ClockSolid } from "./clock-solid"
 export { default as ClockSolidMini } from "./clock-solid-mini"
+export { default as ClockSolid } from "./clock-solid"
+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 CogSixTooth } from "./cog-six-tooth"
 export { default as CogSixToothSolid } from "./cog-six-tooth-solid"
-export { default as CommandLine } from "./command-line"
+export { default as CogSixTooth } from "./cog-six-tooth"
 export { default as CommandLineSolid } from "./command-line-solid"
-export { default as Component } from "./component"
+export { default as CommandLine } from "./command-line"
 export { default as ComponentSolid } from "./component-solid"
-export { default as ComputerDesktop } from "./computer-desktop"
+export { default as Component } from "./component"
 export { default as ComputerDesktopSolid } from "./computer-desktop-solid"
-export { default as CreditCard } from "./credit-card"
+export { default as ComputerDesktop } from "./computer-desktop"
 export { default as CreditCardSolid } from "./credit-card-solid"
+export { default as CreditCard } from "./credit-card"
 export { default as CubeSolid } from "./cube-solid"
-export { default as CurrencyDollar } from "./currency-dollar"
 export { default as CurrencyDollarSolid } from "./currency-dollar-solid"
+export { default as CurrencyDollar } from "./currency-dollar"
 export { default as CursorArrowRays } from "./cursor-arrow-rays"
+export { default as DecisionProcess } from "./decision-process"
 export { default as DescendingSorting } from "./descending-sorting"
+export { default as Directions } from "./directions"
 export { default as Discord } from "./discord"
 export { default as DocumentSeries } from "./document-series"
-export { default as DocumentText } from "./document-text"
 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 EllipseBlueSolid } from "./ellipse-blue-solid"
 export { default as EllipseGreenSolid } from "./ellipse-green-solid"
@@ -132,123 +142,130 @@ export { default as EllipseRedSolid } from "./ellipse-red-solid"
 export { default as EllipseSolid } from "./ellipse-solid"
 export { default as EllipsisHorizontal } from "./ellipsis-horizontal"
 export { default as EllipsisVertical } from "./ellipsis-vertical"
-export { default as Envelope } from "./envelope"
 export { default as EnvelopeSolid } from "./envelope-solid"
-export { default as ExclamationCircle } from "./exclamation-circle"
+export { default as Envelope } from "./envelope"
 export { default as ExclamationCircleSolid } from "./exclamation-circle-solid"
-export { default as Eye } from "./eye"
+export { default as ExclamationCircle } from "./exclamation-circle"
 export { default as EyeMini } from "./eye-mini"
-export { default as EyeSlash } from "./eye-slash"
 export { default as EyeSlashMini } from "./eye-slash-mini"
+export { default as EyeSlash } from "./eye-slash"
+export { default as Eye } from "./eye"
 export { default as FaceSmile } from "./face-smile"
 export { default as Facebook } from "./facebook"
+export { default as FeaturedBadge } from "./featured-badge"
 export { default as Figma } from "./figma"
 export { default as FlagMini } from "./flag-mini"
 export { default as FlyingBox } from "./flying-box"
-export { default as Folder } from "./folder"
 export { default as FolderIllustration } from "./folder-illustration"
-export { default as FolderOpen } from "./folder-open"
 export { default as FolderOpenIllustration } from "./folder-open-illustration"
+export { default as FolderOpen } from "./folder-open"
+export { default as Folder } from "./folder"
 export { default as ForwardSolid } from "./forward-solid"
 export { default as Funnel } from "./funnel"
-export { default as Gatsby } from "./gatsby"
 export { default as GatsbyEx } from "./gatsby-ex"
-export { default as Gift } from "./gift"
+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 GlobeEurope } from "./globe-europe"
 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 HandTruck } from "./hand-truck"
 export { default as Hashtag } from "./hashtag"
-export { default as Heart } from "./heart"
 export { default as HeartBroken } from "./heart-broken"
+export { default as Heart } from "./heart"
 export { default as History } from "./history"
+export { default as House } from "./house"
 export { default as InboxSolid } from "./inbox-solid"
-export { default as InformationCircle } from "./information-circle"
 export { default as InformationCircleSolid } from "./information-circle-solid"
-export { default as Javascript } from "./javascript"
+export { default as InformationCircle } from "./information-circle"
 export { default as JavascriptEx } from "./javascript-ex"
-export { default as Key } from "./key"
+export { default as Javascript } from "./javascript"
 export { default as KeySolid } from "./key-solid"
+export { default as Key } from "./key"
 export { default as Keyboard } from "./keyboard"
-export { default as Klarna } from "./klarna"
 export { default as KlarnaEx } from "./klarna-ex"
+export { default as Klarna } from "./klarna"
 export { default as Klaviyo } from "./klaviyo"
+export { default as Levels } from "./levels"
 export { default as Lifebuoy } from "./lifebuoy"
-export { default as LightBulb } from "./light-bulb"
 export { default as LightBulbSolid } from "./light-bulb-solid"
+export { default as LightBulb } from "./light-bulb"
 export { default as Link } from "./link"
 export { default as Linkedin } from "./linkedin"
 export { default as ListBullet } from "./list-bullet"
 export { default as ListCheckbox } from "./list-checkbox"
 export { default as ListTree } from "./list-tree"
 export { default as Loader } from "./loader"
-export { default as LockClosedSolid } from "./lock-closed-solid"
 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 MagnifyingGlass } from "./magnifying-glass"
 export { default as MagnifyingGlassMini } from "./magnifying-glass-mini"
-export { default as Map } from "./map"
+export { default as MagnifyingGlass } from "./magnifying-glass"
 export { default as MapPin } from "./map-pin"
+export { default as Map } from "./map"
 export { default as Mastercard } from "./mastercard"
+export { default as MediaPlay } from "./media-play"
 export { default as Medusa } from "./medusa"
 export { default as Meta } from "./meta"
-export { default as Minus } from "./minus"
 export { default as MinusMini } from "./minus-mini"
-export { default as Moon } from "./moon"
+export { default as Minus } from "./minus"
 export { default as MoonSolid } from "./moon-solid"
+export { default as Moon } from "./moon"
 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 PauseSolid } from "./pause-solid"
 export { default as PenPlus } from "./pen-plus"
-export { default as Pencil } from "./pencil"
-export { default as PencilSquare } from "./pencil-square"
 export { default as PencilSquareSolid } from "./pencil-square-solid"
+export { default as PencilSquare } from "./pencil-square"
+export { default as Pencil } from "./pencil"
 export { default as Phone } from "./phone"
-export { default as Photo } from "./photo"
 export { default as PhotoSolid } from "./photo-solid"
+export { default as Photo } from "./photo"
 export { default as PlayMiniSolid } from "./play-mini-solid"
 export { default as PlaySolid } from "./play-solid"
-export { default as Plus } from "./plus"
 export { default as PlusMini } from "./plus-mini"
-export { default as Puzzle } from "./puzzle"
+export { default as Plus } from "./plus"
 export { default as PuzzleSolid } from "./puzzle-solid"
-export { default as QuestionMark } from "./question-mark"
+export { default as Puzzle } from "./puzzle"
 export { default as QuestionMarkCircle } from "./question-mark-circle"
+export { default as QuestionMark } from "./question-mark"
 export { default as QueueList } from "./queue-list"
-export { default as ReactJs } from "./react-js"
 export { default as ReactJsEx } from "./react-js-ex"
-export { default as Receipt } from "./receipt"
+export { default as ReactJs } from "./react-js"
 export { default as ReceiptPercent } from "./receipt-percent"
+export { default as Receipt } from "./receipt"
 export { default as ReplaySolid } from "./replay-solid"
 export { default as Resize } from "./resize"
-export { default as RocketLaunch } from "./rocket-launch"
 export { default as RocketLaunchSolid } from "./rocket-launch-solid"
+export { default as RocketLaunch } from "./rocket-launch"
 export { default as Rss } from "./rss"
 export { default as Sanity } from "./sanity"
-export { default as Server } from "./server"
+export { default as ScrollText } from "./scroll-text"
+export { default as Sendgrid } from "./sendgrid"
 export { default as ServerSolid } from "./server-solid"
-export { default as ServerStack } from "./server-stack"
 export { default as ServerStackSolid } from "./server-stack-solid"
+export { default as ServerStack } from "./server-stack"
+export { default as Server } from "./server"
 export { default as Share } from "./share"
-export { default as Shopping } from "./shopping"
+export { default as Shipbob } from "./shipbob"
 export { default as ShoppingBag } from "./shopping-bag"
-export { default as ShoppingCart } from "./shopping-cart"
 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"
 export { default as Snooze } from "./snooze"
-export { default as Sparkles } from "./sparkles"
-export { default as SparklesMini } from "./sparkles-mini"
 export { default as SparklesMiniSolid } from "./sparkles-mini-solid"
+export { default as SparklesMini } from "./sparkles-mini"
 export { default as SparklesSolid } from "./sparkles-solid"
+export { default as Sparkles } from "./sparkles"
 export { default as Spinner } from "./spinner"
 export { default as SquareBlueSolid } from "./square-blue-solid"
 export { default as SquareGreenSolid } from "./square-green-solid"
@@ -256,54 +273,59 @@ export { default as SquareGreySolid } from "./square-grey-solid"
 export { default as SquareOrangeSolid } from "./square-orange-solid"
 export { default as SquarePurpleSolid } from "./square-purple-solid"
 export { default as SquareRedSolid } from "./square-red-solid"
-export { default as SquareTwoStack } from "./square-two-stack"
 export { default as SquareTwoStackMini } from "./square-two-stack-mini"
 export { default as SquareTwoStackSolid } from "./square-two-stack-solid"
-export { default as SquaresPlus } from "./squares-plus"
+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 Star } from "./star"
 export { default as StarSolid } from "./star-solid"
+export { default as Star } from "./star"
 export { default as Stopwatch } from "./stopwatch"
 export { default as Stripe } from "./stripe"
-export { default as Sun } from "./sun"
 export { default as SunSolid } from "./sun-solid"
-export { default as Swatch } from "./swatch"
+export { default as Sun } from "./sun"
 export { default as SwatchSolid } from "./swatch-solid"
-export { default as Tag } from "./tag"
+export { default as Swatch } from "./swatch"
 export { default as TagSolid } from "./tag-solid"
+export { default as Tag } from "./tag"
 export { default as Tailwind } from "./tailwind"
+export { default as Target } from "./target"
+export { default as TaxExclusive } from "./tax-exclusive"
+export { default as TaxInclusive } from "./tax-inclusive"
+export { default as TextHighlight } from "./text-highlight"
 export { default as Text } from "./text"
 export { default as ThumbDown } from "./thumb-down"
 export { default as ThumbUp } from "./thumb-up"
 export { default as ThumbnailBadge } from "./thumbnail-badge"
 export { default as TimelineVertical } from "./timeline-vertical"
-export { default as Tools } from "./tools"
 export { default as ToolsSolid } from "./tools-solid"
+export { default as Tools } from "./tools"
 export { default as TopToBottom } from "./top-to-bottom"
 export { default as Trash } from "./trash"
 export { default as TriangleDownMini } from "./triangle-down-mini"
 export { default as TriangleLeftMini } from "./triangle-left-mini"
-export { default as TriangleRightMini } from "./triangle-right-mini"
 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 Typescript } from "./typescript"
 export { default as TypescriptEx } from "./typescript-ex"
-export { default as User } from "./user"
+export { default as Typescript } from "./typescript"
 export { default as UserGroup } from "./user-group"
 export { default as UserMini } from "./user-mini"
-export { default as Users } from "./users"
+export { default as User } from "./user"
 export { default as UsersSolid } from "./users-solid"
+export { default as Users } from "./users"
 export { default as Vercel } from "./vercel"
 export { default as VerifiedBadge } from "./verified-badge"
 export { default as Visa } from "./visa"
 export { default as WandSparkle } from "./wand-sparkle"
+export { default as Webshipper } from "./webshipper"
 export { default as Window } from "./window"
-export { default as X } from "./x"
-export { default as XCircle } from "./x-circle"
 export { default as XCircleSolid } from "./x-circle-solid"
-export { default as XMark } from "./x-mark"
+export { default as XCircle } from "./x-circle"
 export { default as XMarkMini } from "./x-mark-mini"
+export { default as XMark } from "./x-mark"
+export { default as X } from "./x"

packages/design-system/icons/src/components/levels.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Levels = 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 7.722V2.833M13.056 7.722V1.056M10.389 7.722V1.944M7.722 7.722v-3.11M5.056 7.722V1.056M1.056 11.722 2.61 9.944l1.556 1.778v1.333a.89.89 0 0 1-.89.89H1.945a.89.89 0 0 1-.888-.89zM10.833 11.722l1.556-1.778 1.555 1.778v1.333a.89.89 0 0 1-.888.89h-1.334a.89.89 0 0 1-.889-.89z"
+        />
+      </svg>
+    )
+  }
+)
+Levels.displayName = "Levels"
+export default Levels

packages/design-system/icons/src/components/media-play.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const MediaPlay = 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.162 2.058 12.6 6.73a.877.877 0 0 1 0 1.54l-8.438 4.672c-.594.33-1.329-.096-1.329-.77V2.828c0-.674.734-1.1 1.33-.77"
+        />
+      </svg>
+    )
+  }
+)
+MediaPlay.displayName = "MediaPlay"
+export default MediaPlay

packages/design-system/icons/src/components/scroll-text.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const ScrollText = 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="M12.611 13.5c.736 0 1.333-.597 1.333-1.333v-.89c0-.245-.199-.444-.444-.444H6.833c-.245 0-.444.2-.444.445v.889a1.334 1.334 0 0 1-2.667 0V2.833a1.334 1.334 0 0 0-2.666 0v1.778c0 .49.398.889.888.889h1.778M12.611 13.5H5.056"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M2.389 1.5h8.444c.736 0 1.334.597 1.334 1.333v5.778M6.167 4.611h3.555M6.167 7.278h3.555"
+        />
+      </svg>
+    )
+  }
+)
+ScrollText.displayName = "ScrollText"
+export default ScrollText

packages/design-system/icons/src/components/sendgrid.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Sendgrid = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill="#51A9E3"
+          d="M9.75.75h-3.6c-.495 0-.9.405-.9.9v2.7c0 .495.405.9.9.9h2.7c.495 0 .9.405.9.9v2.7c0 .495.405.9.9.9h2.7c.495 0 .9-.405.9-.9V1.2a.45.45 0 0 0-.45-.45zM5.25 14.25h3.6c.495 0 .9-.405.9-.9v-2.7c0-.495-.405-.9-.9-.9h-2.7a.903.903 0 0 1-.9-.9v-2.7c0-.495-.405-.9-.9-.9h-2.7c-.495 0-.9.405-.9.9v7.65c0 .247.202.45.45.45z"
+        />
+      </svg>
+    )
+  }
+)
+Sendgrid.displayName = "Sendgrid"
+export default Sendgrid

packages/design-system/icons/src/components/shipbob.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Shipbob = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill="#2470AF"
+          d="m13.488 4.127-.002-.004a1 1 0 0 0-.044-.068l-.012-.016-.04-.048-.023-.025-.034-.034a1 1 0 0 0-.104-.084l-.03-.02q-.02-.013-.043-.026-.039-.021-.078-.037l-.032-.014-.052-.018-.03-.01-.06-.016q-.01-.003-.021-.004l-.076-.012H12.8a.9.9 0 0 0-.541.111L7.5 6.484 4.1 4.567l3.404-1.92 2.27 1.279c.431.243.983.1 1.232-.323a.87.87 0 0 0-.33-1.202L7.955.868a.92.92 0 0 0-.902 0L1.866 3.792a.868.868 0 0 0-.022 1.537L7.05 8.264q.001 0 .002.002a1 1 0 0 0 .083.04l.024.011.052.018a.9.9 0 0 0 .287.048H7.5a1 1 0 0 0 .292-.05q.025-.008.046-.016l.026-.011a1 1 0 0 0 .082-.04h.002l3.854-2.174v3.836l-4.3 2.427-4.304-2.427V7.501a.89.89 0 0 0-.902-.88.89.89 0 0 0-.902.88v2.935c0 .314.171.605.45.762l5.206 2.935a.9.9 0 0 0 .45.117c.155 0 .31-.04.452-.117l5.206-2.935a.88.88 0 0 0 .45-.762v-5.87a.85.85 0 0 0-.12-.44"
+        />
+      </svg>
+    )
+  }
+)
+Shipbob.displayName = "Shipbob"
+export default Shipbob

packages/design-system/icons/src/components/target.tsx

@@ -0,0 +1,40 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Target = 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.5 7.5 2.708-2.708M10.208 4.791V2.916L12.292.833v1.875h1.875l-2.084 2.083z"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M8.633 1.568a6 6 0 0 0-1.133-.11A6.042 6.042 0 1 0 13.542 7.5c0-.388-.04-.766-.11-1.134"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="M8.04 4.012a3.5 3.5 0 0 0-.54-.054A3.542 3.542 0 1 0 11.042 7.5c0-.185-.028-.364-.054-.541"
+        />
+      </svg>
+    )
+  }
+)
+Target.displayName = "Target"
+export default Target

packages/design-system/icons/src/components/tax-exclusive.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const TaxExclusive = 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}
+          fillRule="evenodd"
+          d="M6.713.838a1.61 1.61 0 0 1 1.574 0l4.521 2.531h.001c.507.286.823.823.823 1.407v.356c0 .89-.722 1.611-1.611 1.611l-9.042.001c-.89 0-1.611-.722-1.611-1.611v-.357c0-.582.314-1.12.823-1.406zm.842 1.309a.11.11 0 0 0-.108 0L2.924 4.678a.11.11 0 0 0-.056.097v.357c0 .061.05.111.111.111h9.042c.06 0 .11-.05.11-.112v-.356a.11.11 0 0 0-.056-.098zM2.979 7.396a.75.75 0 0 1 .75.75v3.986h1.514V8.146a.75.75 0 0 1 1.5 0v3.986h.41c.414 0 .78.344.78.759 0 .414-.366.741-.78.741H2.117a.75.75 0 0 1 0-1.5h.111V8.146a.75.75 0 0 1 .75-.75M9.338 8.72a.75.75 0 0 1 1.06 0l1.623 1.622 1.622-1.622a.75.75 0 1 1 1.06 1.06l-1.621 1.623 1.622 1.622a.75.75 0 0 1-1.06 1.061l-1.623-1.623-1.623 1.623a.75.75 0 0 1-1.06-1.06l1.622-1.623L9.338 9.78a.75.75 0 0 1 0-1.06"
+          clipRule="evenodd"
+        />
+        <path
+          fill={color}
+          d="M7.5 4.701a.861.861 0 1 0 0-1.722.861.861 0 0 0 0 1.722"
+        />
+      </svg>
+    )
+  }
+)
+TaxExclusive.displayName = "TaxExclusive"
+export default TaxExclusive

packages/design-system/icons/src/components/tax-inclusive.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const TaxInclusive = 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}
+          fillRule="evenodd"
+          d="M6.713.838a1.61 1.61 0 0 1 1.574 0l4.521 2.531h.001c.507.286.823.823.823 1.407v.356c0 .89-.722 1.611-1.611 1.611l-9.042.001c-.89 0-1.611-.722-1.611-1.611v-.357c0-.582.314-1.12.824-1.406zm.842 1.309a.11.11 0 0 0-.108 0L2.925 4.678a.11.11 0 0 0-.057.097v.357c0 .061.05.111.111.111h9.042c.06 0 .11-.05.11-.112v-.356a.11.11 0 0 0-.056-.098zM2.979 7.396a.75.75 0 0 1 .75.75v3.986h1.514V8.146a.75.75 0 0 1 1.5 0v3.986h.346c.414 0 .812.337.812.75 0 .415-.398.75-.812.75H2.118a.75.75 0 0 1 0-1.5h.111V8.146a.75.75 0 0 1 .75-.75m6.028 0a.75.75 0 0 1 .75.75v1.292a.75.75 0 0 1-1.5 0V8.146a.75.75 0 0 1 .75-.75m5.588.733a.75.75 0 0 1 .2 1.042l-3.215 4.736a.75.75 0 0 1-1.16.1l-1.522-1.579a.75.75 0 0 1 1.08-1.041l.88.913 2.695-3.971a.75.75 0 0 1 1.042-.2"
+          clipRule="evenodd"
+        />
+        <path
+          fill={color}
+          d="M7.5 4.701a.861.861 0 1 0 0-1.722.861.861 0 0 0 0 1.722"
+        />
+      </svg>
+    )
+  }
+)
+TaxInclusive.displayName = "TaxInclusive"
+export default TaxInclusive

packages/design-system/icons/src/components/text-highlight.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const TextHighlight = 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.318 13.055h6.849M8.201 10.276 3.86 8.084a.888.888 0 0 1-.333-1.295L6.874 1.88a1.78 1.78 0 0 1 2.27-.586l1.384.699a1.78 1.78 0 0 1 .877 2.174L9.442 9.775a.89.89 0 0 1-1.24.5zM8.41 10.384a4.57 4.57 0 0 0-2.891 2.275l-.992-.5-.992-.501a4.57 4.57 0 0 0 .113-3.677"
+        />
+        <path
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1.5}
+          d="m5.518 12.659-.2.396H2.833l.702-1.398"
+        />
+      </svg>
+    )
+  }
+)
+TextHighlight.displayName = "TextHighlight"
+export default TextHighlight

packages/design-system/icons/src/components/webshipper.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import type { IconProps } from "../types"
+const Webshipper = React.forwardRef<SVGSVGElement, Omit<IconProps, "color">>(
+  (props, ref) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={15}
+        height={15}
+        fill="none"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fill="#0B2770"
+          d="M2.844 3.771c-.189.078-.313.342-.28.595a.7.7 0 0 0 .095.27.5.5 0 0 0 .174.152l.051.027.473.005c.46.006.475.007.517.03a.4.4 0 0 1 .164.142c.203.288.12.718-.165.866l-.052.027-1.346.005-1.346.006-.044.024a.4.4 0 0 0-.162.138.67.67 0 0 0-.078.593c.04.122.15.246.253.288.052.021.096.021 2.04.021 1.68 0 1.996.003 2.044.016.131.036.231.135.29.29a.44.44 0 0 1 .039.203.6.6 0 0 1-.014.183c-.04.169-.144.305-.273.356-.053.022-.087.022-1.449.022-.867 0-1.416.005-1.453.011-.24.044-.402.361-.341.668.04.194.172.355.323.39.033.008.27.012.694.012.698 0 .685 0 .783.062a.5.5 0 0 1 .097.094.65.65 0 0 1 .064.654.6.6 0 0 1-.166.199c-.1.065.007.061-1.778.061-1.442 0-1.643.003-1.687.017-.22.075-.354.368-.298.65.039.194.164.352.31.391.037.01.94.012 3.767.01l3.719-.003.085-.03c.319-.111.55-.343.71-.71.157-.357 1.123-2.52 1.126-2.52.003.001.261.578.575 1.283s.593 1.325.62 1.377c.147.288.398.5.68.579a1 1 0 0 0 .37.011 1 1 0 0 0 .461-.227c.095-.082.252-.292.307-.41.081-.173 2.123-4.759 2.148-4.825a1.83 1.83 0 0 0 .049-1.089c-.127-.453-.402-.774-.77-.899a1 1 0 0 0-.428-.02 1 1 0 0 0-.288.112 1.3 1.3 0 0 0-.414.438c-.023.042-.305.664-.626 1.384s-.587 1.31-.591 1.31-.263-.576-.577-1.28-.592-1.321-.619-1.373a1.3 1.3 0 0 0-.41-.462.9.9 0 0 0-.488-.145c-.29 0-.56.143-.766.408-.096.124-.124.178-.295.563-.36.813-1.003 2.25-1.005 2.247l-.566-1.276a77 77 0 0 0-.611-1.36c-.163-.295-.42-.501-.704-.565-.066-.015-.256-.017-1.483-.016-1.34 0-1.409.001-1.455.02"
+        />
+      </svg>
+    )
+  }
+)
+Webshipper.displayName = "Webshipper"
+export default Webshipper

packages/design-system/toolbox/src/commands/tokens/command.ts

@@ -152,7 +152,7 @@ export async function generateTokens({ output }: GenerateTokensArgs) {
       return acc
     }
 
-    const isCodeBlock = node.name.startsWith("Code Block")
+    const isCodeBlock = node.name.startsWith("Code")
 
     if (isCodeBlock) {
       const [_parent, identifier] = node.name.split("/")

packages/design-system/ui-preset/src/theme/extension/theme.ts

@@ -233,37 +233,6 @@ export const theme = {
             }
           }
         },
-        "fg": {
-          "disabled": {
-            "DEFAULT": "var(--fg-disabled)"
-          },
-          "muted": {
-            "DEFAULT": "var(--fg-muted)"
-          },
-          "on": {
-            "color": {
-              "DEFAULT": "var(--fg-on-color)"
-            },
-            "inverted": {
-              "DEFAULT": "var(--fg-on-inverted)"
-            }
-          },
-          "interactive": {
-            "hover": {
-              "DEFAULT": "var(--fg-interactive-hover)"
-            },
-            "DEFAULT": "var(--fg-interactive)"
-          },
-          "error": {
-            "DEFAULT": "var(--fg-error)"
-          },
-          "subtle": {
-            "DEFAULT": "var(--fg-subtle)"
-          },
-          "base": {
-            "DEFAULT": "var(--fg-base)"
-          }
-        },
         "button": {
           "inverted": {
             "pressed": {
@@ -301,6 +270,37 @@ export const theme = {
               "DEFAULT": "var(--button-neutral-pressed)"
             }
           }
+        },
+        "fg": {
+          "on": {
+            "color": {
+              "DEFAULT": "var(--fg-on-color)"
+            },
+            "inverted": {
+              "DEFAULT": "var(--fg-on-inverted)"
+            }
+          },
+          "interactive": {
+            "hover": {
+              "DEFAULT": "var(--fg-interactive-hover)"
+            },
+            "DEFAULT": "var(--fg-interactive)"
+          },
+          "error": {
+            "DEFAULT": "var(--fg-error)"
+          },
+          "subtle": {
+            "DEFAULT": "var(--fg-subtle)"
+          },
+          "base": {
+            "DEFAULT": "var(--fg-base)"
+          },
+          "disabled": {
+            "DEFAULT": "var(--fg-disabled)"
+          },
+          "muted": {
+            "DEFAULT": "var(--fg-muted)"
+          }
         }
       }
     },
@@ -315,7 +315,6 @@ export const theme = {
       "buttons-danger": "var(--buttons-danger)",
       "buttons-inverted-focus": "var(--buttons-inverted-focus)",
       "elevation-card-hover": "var(--elevation-card-hover)",
-      "buttons-inverted": "var(--buttons-inverted)",
       "details-switch-handle": "var(--details-switch-handle)",
       "buttons-neutral": "var(--buttons-neutral)",
       "borders-base": "var(--borders-base)",
@@ -327,7 +326,8 @@ export const theme = {
       "elevation-tooltip": "var(--elevation-tooltip)",
       "elevation-modal": "var(--elevation-modal)",
       "elevation-commandbar": "var(--elevation-commandbar)",
-      "elevation-code-block": "var(--elevation-code-block)"
+      "elevation-code-block": "var(--elevation-code-block)",
+      "buttons-inverted": "var(--buttons-inverted)"
     }
   }
 }

packages/design-system/ui-preset/src/theme/tokens/colors.ts

@@ -104,7 +104,6 @@ export const colors = {
     "--tag-neutral-text": "rgba(82, 82, 91, 1)",
     "--tag-red-text": "rgba(159, 18, 57, 1)",
     "--contrast-bg-base": "rgba(24, 24, 27, 1)",
-    "--fg-disabled": "rgba(212, 212, 216, 1)",
     "--border-strong": "rgba(212, 212, 216, 1)",
     "--contrast-border-base": "rgba(255, 255, 255, 0.15)",
     "--bg-field": "rgba(250, 250, 250, 1)",
@@ -115,7 +114,6 @@ export const colors = {
     "--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
     "--bg-highlight": "rgba(239, 246, 255, 1)",
     "--contrast-fg-secondary": "rgba(255, 255, 255, 0.56)",
-    "--fg-muted": "rgba(161, 161, 170, 1)",
     "--tag-red-bg": "rgba(255, 228, 230, 1)",
     "--button-transparent": "rgba(255, 255, 255, 0)",
     "--button-danger-pressed": "rgba(159, 18, 57, 1)",
@@ -177,6 +175,8 @@ export const colors = {
     "--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)"
+    "--bg-overlay": "rgba(24, 24, 27, 0.4)",
+    "--fg-disabled": "rgba(161, 161, 170, 1)",
+    "--fg-muted": "rgba(113, 113, 122, 1)"
   }
 }

packages/design-system/ui-preset/src/theme/tokens/effects.ts

@@ -35,7 +35,6 @@ export const effects = {
     "--buttons-danger": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 1)",
     "--buttons-inverted-focus": "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), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
     "--elevation-card-hover": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.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)",
     "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.02), 0px 5px 4px 0px rgba(0, 0, 0, 0.02), 0px 3px 3px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)",
     "--buttons-neutral": "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
     "--borders-base": "0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.08)",
@@ -47,6 +46,7 @@ export const effects = {
     "--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"
+    "--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)"
   }
 }

packages/design-system/ui-preset/src/theme/tokens/typography.ts

@@ -1,13 +1,25 @@
 export const typography = {
-  ".txt-compact-xlarge-plus": {
-    "fontSize": "1.125rem",
-    "lineHeight": "1.25rem",
+  ".h1-webs": {
+    "fontSize": "4rem",
+    "lineHeight": "4.400000095367432rem",
     "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"
   },
-  ".h1-webs": {
-    "fontSize": "4.5rem",
-    "lineHeight": "5.5rem",
+  ".h2-webs": {
+    "fontSize": "3.5rem",
+    "lineHeight": "3.8500001430511475rem",
+    "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"
+  },
+  ".h3-webs": {
+    "fontSize": "2.5rem",
+    "lineHeight": "2.75rem",
+    "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"
+  },
+  ".txt-compact-xlarge-plus": {
+    "fontSize": "1.125rem",
+    "lineHeight": "1.25rem",
     "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"
   },
@@ -23,12 +35,6 @@ 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"
   },
-  ".h1-core": {
-    "fontSize": "1.125rem",
-    "lineHeight": "1.75rem",
-    "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"
-  },
   ".txt-xlarge": {
     "fontSize": "1.125rem",
     "lineHeight": "1.6875rem",
@@ -47,66 +53,18 @@ export const typography = {
     "fontWeight": "400",
     "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"
   },
-  ".h1-docs": {
-    "fontSize": "2rem",
-    "lineHeight": "2.75rem",
-    "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"
-  },
   ".txt-compact-large-plus": {
     "fontSize": "1rem",
     "lineHeight": "1.25rem",
     "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"
   },
-  ".h2-docs": {
-    "fontSize": "1.5rem",
-    "lineHeight": "2rem",
-    "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"
-  },
-  ".h4-webs": {
-    "fontSize": "1.125rem",
-    "lineHeight": "1.75rem",
-    "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"
-  },
   ".txt-medium": {
     "fontSize": "0.875rem",
     "lineHeight": "1.3125rem",
     "fontWeight": "400",
     "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"
   },
-  ".h2-core": {
-    "fontSize": "1rem",
-    "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"
-  },
-  ".h2-webs": {
-    "fontSize": "2rem",
-    "lineHeight": "2.75rem",
-    "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"
-  },
-  ".h3-core": {
-    "fontSize": "0.875rem",
-    "lineHeight": "1.25rem",
-    "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"
-  },
-  ".h3-docs": {
-    "fontSize": "1.125rem",
-    "lineHeight": "1.75rem",
-    "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"
-  },
-  ".h3-webs": {
-    "fontSize": "1.5rem",
-    "lineHeight": "2rem",
-    "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"
-  },
   ".txt-compact-large": {
     "fontSize": "1rem",
     "lineHeight": "1.25rem",
@@ -178,5 +136,59 @@ 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-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",
+    "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"
+  },
+  ".h3-core": {
+    "fontSize": "0.875rem",
+    "lineHeight": "1.25rem",
+    "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"
+  },
+  ".h1-core": {
+    "fontSize": "1.125rem",
+    "lineHeight": "1.75rem",
+    "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"
+  },
+  ".h1-docs": {
+    "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"
+  },
+  ".h2-docs": {
+    "fontSize": "1.125rem",
+    "lineHeight": "1.6875rem",
+    "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"
+  },
+  ".h3-docs": {
+    "fontSize": "1rem",
+    "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"
   }
 }

packages/design-system/ui/src/components/code-block/code-block.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import React from "react"
 
-import { Label } from "../label"
+import { TooltipProvider } from "../tooltip"
 import { CodeBlock } from "./code-block"
 
 const meta: Meta<typeof CodeBlock> = {
@@ -37,51 +37,70 @@ const snippets = [
 export const Default: Story = {
   render: () => {
     return (
-      <div className="h-[300px] w-[700px]">
-        <CodeBlock snippets={snippets}>
-          <CodeBlock.Header>
-            <CodeBlock.Header.Meta>
-              <Label size="small" weight={"plus"}>
-                /product-detail.js
-              </Label>
-            </CodeBlock.Header.Meta>
-          </CodeBlock.Header>
-          <CodeBlock.Body />
-        </CodeBlock>
-      </div>
+      <TooltipProvider>
+        <div className="h-[300px] w-[700px]">
+          <CodeBlock snippets={snippets}>
+            <CodeBlock.Header></CodeBlock.Header>
+            <CodeBlock.Body>
+              <span>/store/products/:id</span>
+            </CodeBlock.Body>
+          </CodeBlock>
+        </div>
+      </TooltipProvider>
     )
   },
 }
 
-const code = `medusa develop
-✔ Models initialized – 14ms
-✔ Repositories initialized – 35ms
-✔ Strategies initialized – 24ms
-✔ Modules initialized – 1ms
-✔ Database initialized – 654ms
-✔ Services initialized – 7ms
-✔ Express intialized – 5ms
-✔ Plugins intialized – 7ms
-✔ Subscribers initialized – 6ms
-✔ API initialized – 28ms
-✔ Server is ready on port: 9000`
+const generateStartupLog = () => {
+  const services = [
+    { name: "Models", time: 14 },
+    { name: "Repositories", time: 35 },
+    { name: "Strategies", time: 24 },
+    { name: "Modules", time: 1 },
+    { name: "Database", time: 654 },
+    { name: "Services", time: 7 },
+    { name: "Express", time: 5 },
+    { name: "Plugins", time: 7 },
+    { name: "Subscribers", time: 6 },
+    { name: "API", time: 28 },
+    { name: "Cache", time: 12 },
+    { name: "Queue", time: 45 },
+    { name: "Middleware", time: 8 },
+    { name: "WebSockets", time: 15 },
+    { name: "Authentication", time: 42 },
+  ]
+
+  const lines = services.flatMap((service) => [
+    `✔ ${service.name} initialized – ${service.time}ms`,
+    `✔ ${service.name} validated – ${service.time + 5}ms`,
+    `✔ ${service.name} configured – ${service.time + 10}ms`,
+    `✔ ${service.name} optimized – ${service.time + 3}ms`,
+  ])
+
+  return `medusa develop\n${lines.join("\n")}\n✔ Server is ready on port: 9000`
+}
+
+const code = generateStartupLog()
 
 export const ManyLines: Story = {
   render: () => {
     return (
-      <CodeBlock
-        snippets={[
-          {
-            code: code,
-            label: "Test",
-            language: "bash",
-            hideCopy: true,
-          },
-        ]}
-        className="w-[700px]"
-      >
-        <CodeBlock.Body />
-      </CodeBlock>
+      <TooltipProvider>
+        <CodeBlock
+          snippets={[
+            {
+              code: code,
+              label: "Test",
+              language: "bash",
+              hideCopy: true,
+            },
+          ]}
+          className="h-full max-h-[300px] w-[700px]"
+        >
+          <CodeBlock.Header></CodeBlock.Header>
+          <CodeBlock.Body />
+        </CodeBlock>
+      </TooltipProvider>
     )
   },
 }

packages/design-system/ui/src/components/code-block/code-block.tsx

@@ -73,7 +73,7 @@ const Root = ({
     <CodeBlockContext.Provider value={{ snippets, active, setActive }}>
       <div
         className={clx(
-          "border-ui-code-border flex flex-col overflow-hidden rounded-lg border",
+          "bg-ui-contrast-bg-base shadow-elevation-code-block flex flex-col overflow-hidden rounded-xl",
           className
         )}
         {...props}
@@ -102,31 +102,78 @@ const HeaderComponent = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {
   const { snippets, active, setActive } = useCodeBlockContext()
+
+  const tabRefs = React.useRef<Array<HTMLSpanElement | null>>([])
+  const tabIndicatorRef = React.useRef<HTMLDivElement | null>(null)
+
+  React.useEffect(() => {
+    const activeTabRef = tabRefs.current.find(
+      (ref) => ref?.dataset.label === active.label
+    )
+
+    if (activeTabRef && tabIndicatorRef.current) {
+      const activeTabIndex = tabRefs.current.indexOf(activeTabRef)
+
+      const prevTabRef =
+        activeTabIndex > 0 ? tabRefs.current[activeTabIndex - 1] : null
+
+      tabIndicatorRef.current.style.width = `${activeTabRef.offsetWidth}px`
+      tabIndicatorRef.current.style.left = prevTabRef
+        ? `${
+            tabRefs.current
+              .slice(0, activeTabIndex)
+              .reduce((total, tab) => total + (tab?.offsetWidth || 0) + 12, 0) +
+            15
+          }px`
+        : "15px"
+    }
+  }, [active])
+
   return (
-    <div
-      className={clx(
-        "border-b-ui-code-border bg-ui-code-bg-subtle flex items-center gap-2 border-b px-4 py-3",
-        className
-      )}
-      {...props}
-    >
-      {!hideLabels &&
-        snippets.map((snippet) => (
+    <div>
+      <div
+        className={clx("flex items-start px-4 pt-2.5", className)}
+        {...props}
+      >
+        {!hideLabels &&
+          snippets.map((snippet, idx) => (
+            <div
+              className={clx(
+                "text-ui-contrast-fg-secondary txt-compact-small-plus transition-fg relative cursor-pointer pb-[9px] pr-3",
+                {
+                  "text-ui-contrast-fg-primary cursor-default":
+                    active.label === snippet.label,
+                }
+              )}
+              key={snippet.label}
+              onClick={() => setActive(snippet)}
+            >
+              <span
+                ref={(ref) => {
+                  tabRefs.current[idx] = ref
+                  return undefined
+                }}
+                data-label={snippet.label}
+              >
+                {snippet.label}
+              </span>
+            </div>
+          ))}
+        {children}
+      </div>
+      <div className="w-full px-0.5">
+        <div className="bg-ui-contrast-border-top relative h-px w-full">
           <div
+            ref={tabIndicatorRef}
             className={clx(
-              "text-ui-code-fg-subtle txt-compact-small-plus transition-fg cursor-pointer rounded-full border border-transparent px-3 py-2",
-              {
-                "text-ui-code-fg-base border-ui-code-border bg-ui-code-bg-base cursor-default":
-                  active.label === snippet.label,
-              }
+              "absolute bottom-0 transition-all motion-reduce:transition-none",
+              "duration-150 ease-linear"
             )}
-            key={snippet.label}
-            onClick={() => setActive(snippet)}
           >
-            {snippet.label}
+            <div className="bg-ui-contrast-fg-primary h-px rounded-full" />
           </div>
-        ))}
-      {children}
+        </div>
+      </div>
     </div>
   )
 }
@@ -142,7 +189,7 @@ const Meta = ({
   return (
     <div
       className={clx(
-        "txt-compact-small text-ui-code-fg-subtle ml-auto",
+        "txt-compact-small text-ui-contrast-fg-secondary ml-auto",
         className
       )}
       {...props}
@@ -158,130 +205,153 @@ const Header = Object.assign(HeaderComponent, { Meta })
  */
 const Body = ({
   className,
+  children,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => {
   const { active } = useCodeBlockContext()
+
+  const showToolbar = children || !active.hideCopy
+
   return (
-    <div
-      className={clx(
-        "bg-ui-code-bg-base relative h-full overflow-y-auto p-4",
-        className
+    <div>
+      {showToolbar && (
+        <div className="border-ui-contrast-border-bot flex min-h-10 items-center gap-x-3 border-t px-4 py-2">
+          <div className="code-body text-ui-contrast-fg-secondary flex-1">
+            {children}
+          </div>
+          {!active.hideCopy && (
+            <Copy
+              content={active.code}
+              className="text-ui-contrast-fg-secondary"
+            />
+          )}
+        </div>
       )}
-      {...props}
-    >
-      {!active.hideCopy && (
-        <Copy
-          content={active.code}
-          className="text-ui-code-fg-muted absolute right-4 top-4"
-        />
-      )}
-      <div className="max-w-[90%]">
-        <Highlight
-          theme={{
-            ...themes.palenight,
-            plain: {
-              color: "rgba(249, 250, 251, 1)",
-              backgroundColor: "rgb(17,24,39)",
-            },
-            styles: [
-              ...themes.palenight.styles,
-              {
-                types: ["keyword"],
-                style: {
-                  fontStyle: "normal",
-                  color: "rgb(187,160,255)",
-                },
-              },
-              {
-                types: ["punctuation", "operator"],
-                style: {
-                  fontStyle: "normal",
-                  color: "rgb(255,255,255)",
-                },
-              },
-              {
-                types: ["constant", "boolean"],
-                style: {
-                  fontStyle: "normal",
-                  color: "rgb(187,77,96)",
-                },
-              },
-              {
-                types: ["function"],
-                style: {
-                  fontStyle: "normal",
-                  color: "rgb(27,198,242)",
-                },
-              },
-              {
-                types: ["number"],
-                style: {
-                  color: "rgb(247,208,25)",
-                },
-              },
-              {
-                types: ["property"],
-                style: {
-                  color: "rgb(247,208,25)",
-                },
-              },
-              {
-                types: ["maybe-class-name"],
-                style: {
-                  color: "rgb(255,203,107)",
-                },
-              },
-              {
-                types: ["string"],
-                style: {
-                  color: "rgb(73,209,110)",
-                },
-              },
-              {
-                types: ["comment"],
-                style: {
-                  color: "var(--code-fg-subtle)",
-                },
-              },
-            ],
-          }}
-          code={active.code}
-          language={active.language}
+      <div className="flex h-full flex-col overflow-hidden px-[5px] pb-[5px]">
+        <div
+          className={clx(
+            "bg-ui-contrast-bg-subtle border-ui-contrast-border-bot relative h-full overflow-y-auto rounded-lg border p-4",
+            className
+          )}
+          {...props}
         >
-          {({ style, tokens, getLineProps, getTokenProps }) => (
-            <pre
-              className={clx("code-body whitespace-pre-wrap bg-transparent", {
-                "grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
-              })}
-              style={{
-                ...style,
-                background: "transparent",
+          <div className="max-w-[90%]">
+            <Highlight
+              theme={{
+                ...themes.palenight,
+                plain: {
+                  color: "rgba(249, 250, 251, 1)",
+                  backgroundColor: "var(--contrast-fg-primary)",
+                },
+                styles: [
+                  ...themes.palenight.styles,
+                  {
+                    types: ["keyword"],
+                    style: {
+                      fontStyle: "normal",
+                      color: "rgb(187,160,255)",
+                    },
+                  },
+                  {
+                    types: ["punctuation", "operator"],
+                    style: {
+                      fontStyle: "normal",
+                      color: "rgb(255,255,255)",
+                    },
+                  },
+                  {
+                    types: ["constant", "boolean"],
+                    style: {
+                      fontStyle: "normal",
+                      color: "rgb(187,77,96)",
+                    },
+                  },
+                  {
+                    types: ["function"],
+                    style: {
+                      fontStyle: "normal",
+                      color: "rgb(27,198,242)",
+                    },
+                  },
+                  {
+                    types: ["number"],
+                    style: {
+                      color: "rgb(247,208,25)",
+                    },
+                  },
+                  {
+                    types: ["property"],
+                    style: {
+                      color: "rgb(247,208,25)",
+                    },
+                  },
+                  {
+                    types: ["maybe-class-name"],
+                    style: {
+                      color: "rgb(255,203,107)",
+                    },
+                  },
+                  {
+                    types: ["string"],
+                    style: {
+                      color: "rgb(73,209,110)",
+                    },
+                  },
+                  {
+                    types: ["comment"],
+                    style: {
+                      color: "var(--contrast-fg-secondary)",
+                      fontStyle: "normal",
+                    },
+                  },
+                ],
               }}
+              code={active.code}
+              language={active.language}
             >
-              {!active.hideLineNumbers && (
-                <div role="presentation" className="flex flex-col text-right">
-                  {tokens.map((_, i) => (
-                    <span
-                      key={i}
-                      className="text-ui-code-fg-subtle tabular-nums"
+              {({ style, tokens, getLineProps, getTokenProps }) => (
+                <pre
+                  className={clx(
+                    "code-body whitespace-pre-wrap bg-transparent",
+                    {
+                      "grid grid-cols-[auto,1fr] gap-x-4":
+                        !active.hideLineNumbers,
+                    }
+                  )}
+                  style={{
+                    ...style,
+                    background: "transparent",
+                  }}
+                >
+                  {!active.hideLineNumbers && (
+                    <div
+                      role="presentation"
+                      className="flex flex-col text-right"
                     >
-                      {i + 1}
-                    </span>
-                  ))}
-                </div>
-              )}
-              <div>
-                {tokens.map((line, i) => (
-                  <div key={i} {...getLineProps({ line })}>
-                    {line.map((token, key) => (
-                      <span key={key} {...getTokenProps({ token })} />
+                      {tokens.map((_, i) => (
+                        <span
+                          key={i}
+                          className="text-ui-contrast-fg-secondary tabular-nums"
+                        >
+                          {i + 1}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                  <div>
+                    {tokens.map((line, i) => (
+                      <div key={i} {...getLineProps({ line })}>
+                        {line.map((token, key) => (
+                          <span key={key} {...getTokenProps({ token })} />
+                        ))}
+                      </div>
                     ))}
                   </div>
-                ))}
-              </div>
-            </pre>
-          )}
-        </Highlight>
+                </pre>
+              )}
+            </Highlight>
+          </div>
+        </div>
       </div>
     </div>
   )

packages/design-system/ui/src/components/command/command.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import React from "react"
 import { Badge } from "../badge"
+import { TooltipProvider } from "../tooltip"
 import { Command } from "./command"
 
 const meta: Meta<typeof Command> = {
@@ -18,15 +19,17 @@ type Story = StoryObj<typeof Command>
 export const Default: Story = {
   render: () => {
     return (
-      <div className="w-[500px]">
-        <Command>
-          <Badge className="dark" size="small" color="green">
-            Get
-          </Badge>
-          <code>localhost:9000/store/products</code>
-          <Command.Copy content="localhost:9000/store/products" />
-        </Command>
-      </div>
+      <TooltipProvider>
+        <div className="w-[500px]">
+          <Command>
+            <Badge className="dark" size="small" color="green">
+              GET
+            </Badge>
+            <code>localhost:9000/store/products</code>
+            <Command.Copy content="localhost:9000/store/products" />
+          </Command>
+        </div>
+      </TooltipProvider>
     )
   },
 }

packages/design-system/ui/src/components/command/command.tsx

@@ -14,8 +14,8 @@ const CommandComponent = ({
   return (
     <div
       className={clx(
-        "bg-ui-code-bg-base border-ui-code-border flex items-center rounded-lg border px-3 py-2",
-        "[&>code]:text-ui-code-fg-base [&>code]:code-body [&>code]:mx-3",
+        "bg-ui-contrast-bg-base shadow-elevation-code-block flex items-center rounded-lg px-4 py-1.5",
+        "[&>code]:text-ui-contrast-fg-primary [&>code]:code-body [&>code]:mx-2",
         className
       )}
       {...props}
@@ -32,7 +32,7 @@ const CommandCopy = React.forwardRef<
     <Copy
       {...props}
       ref={ref}
-      className={clx("!text-ui-code-fg-muted ml-auto", className)}
+      className={clx("!text-ui-contrast-fg-secondary ml-auto", className)}
     />
   )
 })

packages/design-system/ui/src/components/copy/copy.tsx

@@ -89,7 +89,10 @@ const Copy = React.forwardRef<HTMLButtonElement, CopyProps>(
           ref={ref}
           aria-label="Copy code snippet"
           type="button"
-          className={clx("text-ui-code-icon h-fit w-fit", className)}
+          className={clx(
+            "text-ui-contrast-fg-secondary h-fit w-fit",
+            className
+          )}
           onClick={copyToClipboard}
           {...props}
         >