chore(ui,icons,ui-preset,toolbox): Move design system packages to monorepo (#5470)

.changeset/old-otters-run.md

@@ -0,0 +1,5 @@
+---
+"medusa-payment-stripe": patch
+---
+
+fix(medusa-payment-stripe): Add missing dev/peer dependency on react table

.eslintrc.js

@@ -126,6 +126,61 @@ module.exports = {
         "@typescript-eslint/no-var-requires": "off",
       },
     },
+    {
+      files: ["packages/design-system/ui/**/*.{ts,tsx}"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:storybook/recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:@typescript-eslint/recommended",
+      ],
+      plugins: ["@typescript-eslint"],
+      rules: {
+        "react/no-children-prop": "off",
+        "react-hooks/exhaustive-deps": "warn",
+        "react/prop-types": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unused-vars": [
+          "error",
+          { argsIgnorePattern: "^_" },
+        ],
+      },
+      settings: {
+        react: {
+          version: "detect",
+        },
+      },
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        project: "./packages/design-system/ui/tsconfig.json",
+      },
+    },
+    {
+      files: ["packages/design-system/icons/**/*.{ts,tsx}"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+      ],
+      plugins: ["@typescript-eslint"],
+      rules: {
+        "react/no-children-prop": "off",
+        "react/prop-types": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unused-vars": [
+          "error",
+          { argsIgnorePattern: "^_" },
+        ],
+      },
+      settings: {
+        react: {
+          version: "detect",
+        },
+      },
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        project: "./packages/design-system/icons/tsconfig.json",
+      },
+    },
     {
       files: ["packages/admin-ui/ui/**/*.ts", "packages/admin-ui/ui/**/*.tsx"],
       plugins: ["unused-imports"],

.gitignore

@@ -20,4 +20,5 @@ www/**/.yarn/*
 .idea
 .turbo
 build/**
-**/dist
+**/dist
+**/stats

.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch

@@ -0,0 +1,71 @@
+diff --git a/dist/index.d.ts b/dist/index.d.ts
+index 676e466a43ad8932cbb3131bb2c3dea687d47041..cbffdc5191bd8535468fdeaf68365845d15804ea 100644
+--- a/dist/index.d.ts
++++ b/dist/index.d.ts
+@@ -1,21 +1,55 @@
++import type * as CLSX from "clsx";
+ import clsx from "clsx";
+-import type { ClassProp, ClassValue, OmitUndefined, StringToBoolean } from "./types";
+-export type VariantProps<Component extends (...args: any) => any> = Omit<OmitUndefined<Parameters<Component>[0]>, "class" | "className">;
++
++type ClassPropKey = "class" | "className";
++type ClassValue = CLSX.ClassValue;
++type ClassProp =
++  | {
++      class: ClassValue;
++      className?: never;
++    }
++  | {
++      class?: never;
++      className: ClassValue;
++    }
++  | {
++      class?: never;
++      className?: never;
++    };
++type OmitUndefined<T> = T extends undefined ? never : T;
++type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
++
++export type VariantProps<Component extends (...args: any) => any> = Omit<
++  OmitUndefined<Parameters<Component>[0]>,
++  "class" | "className"
++>;
+ export type CxOptions = Parameters<typeof clsx>;
+ export type CxReturn = ReturnType<typeof clsx>;
+ export declare const cx: typeof clsx;
+ type ConfigSchema = Record<string, Record<string, ClassValue>>;
+ type ConfigVariants<T extends ConfigSchema> = {
+-    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
++  [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
+ };
+ type ConfigVariantsMulti<T extends ConfigSchema> = {
+-    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined;
++  [Variant in keyof T]?:
++    | StringToBoolean<keyof T[Variant]>
++    | StringToBoolean<keyof T[Variant]>[]
++    | undefined;
+ };
+-type Config<T> = T extends ConfigSchema ? {
+-    variants?: T;
+-    defaultVariants?: ConfigVariants<T>;
+-    compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
+-} : never;
+-type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
+-export declare const cva: <T>(base?: ClassValue, config?: Config<T> | undefined) => (props?: Props<T> | undefined) => string;
++type Config<T> = T extends ConfigSchema
++  ? {
++      variants?: T;
++      defaultVariants?: ConfigVariants<T>;
++      compoundVariants?: (T extends ConfigSchema
++        ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp
++        : ClassProp)[];
++    }
++  : never;
++type Props<T> = T extends ConfigSchema
++  ? ConfigVariants<T> & ClassProp
++  : ClassProp;
++export declare const cva: <T>(
++  base?: ClassValue,
++  config?: Config<T> | undefined
++) => (props?: Props<T> | undefined) => string;
+ export {};

CODEOWNERS

@@ -2,3 +2,4 @@
 *                                               @medusajs/core
 /docs/                                          @medusajs/docs
 /www/                                           @medusajs/docs
+/packages/design-system/                        @medusajs/ui

package.json

@@ -7,6 +7,7 @@
       "packages/medusa-js",
       "packages/medusa-react",
       "packages/*",
+      "packages/design-system/*",
       "packages/generated/*",
       "packages/oas/*",
       "integration-tests/**/*"
@@ -37,6 +38,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-unused-imports": "^2.0.0",
     "express": "^4.17.1",
     "get-port": "^5.1.1",
@@ -90,6 +92,7 @@
   "resolutions": {
     "@redocly/cli/react": "^17.0.1",
     "@redocly/cli/react-dom": "^17.0.1",
-    "pg": "8.10.0"
+    "pg": "8.10.0",
+    "class-variance-authority@0.6.1": "patch:class-variance-authority@npm:0.6.1#.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch"
   }
 }

packages/admin-ui/package.json

@@ -36,9 +36,9 @@
     "@babel/traverse": "7.22.5",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.3.1",
-    "@medusajs/icons": "1.1.0",
+    "@medusajs/icons": "workspace:^",
-    "@medusajs/ui": "^2.2.0",
+    "@medusajs/ui": "workspace:^",
-    "@medusajs/ui-preset": "1.0.2",
+    "@medusajs/ui-preset": "workspace:^",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@radix-ui/react-accordion": "^1.0.1",
     "@radix-ui/react-avatar": "^1.0.1",

packages/design-system/icons/.env.template

@@ -0,0 +1,2 @@
+# Docs: https://www.figma.com/developers/api#access-tokens
+FIGMA_TOKEN=

packages/design-system/icons/CHANGELOG.md

@@ -0,0 +1,79 @@
+# @medusajs/icons
+
+## 1.1.0
+
+### Minor Changes
+
+- 035fa72: feat(ui,ui-preset): Release 2.1.0
+
+  ## `@medusajs/ui`
+
+  - The styling of buttons, inputs, and the CommandBar has been adjusted to have a more consistent look and feel.
+  - Fixed an issue that caused DropdownMenu.Content to overflow the viewport.
+  - Fixed an issue with the DatePicker component where deleting a time segment would throw an error.
+  - The Text component now accepts a `leading` prop to adjust the line height. It can be set to `normal` (default) or `compact`. This change in the API is fully backwards compatible.
+  - Adds a new subcomponent to RadioGroup called RadioGroup.ChoiceBox. This component wraps the RadioGroup.Item component with a mandatory label and description.
+
+  ## `@medusajs/ui-preset`
+
+  - Updated several colors, shadows, and gradient effects.
+
+  ## `@medusajs/icons`
+
+  - Introduces 6 new icons: QuestionMark, SparklesMiniSolid, SparklesMini, ThumbDown, ThumbUp, and UserCircleMini.
+  - There have been slight adjustments made to ArrowPathMini, EllipseBlueSolid, EllipseGreenSolid, EllipseGreySolid, EllipseOrangeSolid, EllipsePurpleSolid, and EllipseRedSolid.
+
+## 1.0.1
+
+### Patch Changes
+
+- ef98084: feat(ui,icons,ui-preset): Update to Medusa UI, including new components, icons, and preset styles.
+
+  # Changes in `@medusajs/ui`
+
+  ## New components
+
+  - `IconButton` - A button that only contains an icon.
+  - `IconBadge` - A badge that only contains an icon.
+  - `StatusBadge` - A badge component specifically designed to be used for displaying statuses.
+  - `Tabs` - A tab component that can be used to switch between different views.
+  - `ProgressTabs` - A tab component specifically designed to be used for building multi-step tasks.
+  - `ProgressAccordion` - An accordion component specifically designed to be used for building multi-step tasks.
+  - `CurrencyInput` - An input component that can be used to input currency values.
+  - `CommandBar` - A component that can be used to display a list of keyboard commands omn the screen.
+  - `CurrencyInput` - An input component that can be used to input currency values, such as prices.
+
+  ## Breaking changes
+
+  Several components have been reorganized to streamline their API. The following components have breaking changes:
+
+  - Button - The `format` property has been removed. To create a Icon only button, use the new `IconButton` component.
+  - Badge - The `format` property has been removed. To create a Icon only badge, use the new `IconBadge` component. The border radius of the component is now controlled using the new `rounded` property.
+  - CodeBlock - The `hideLineNumbers` property has been moved to the `snippets` property. This allows users to control the visibility of line numbers on a per snippet basis.
+
+  ## Other changes
+
+  - The `z-index`'s of all components have been cleaned up to to make stacking portalled components easier.
+  - `Table.Pagination` has been tweaked to ensure that it displays the correct number of pages when there is no data.
+  - `Calendar` has been tweaked to prevent clicking a date from submitting any forms that precede it in the DOM.
+
+  # Changes in `@medusajs/icons`
+
+  ## New icons
+
+  - `X`
+  - `AcademicCap`
+  - `Figma`
+  - `Photo`
+  - `PuzzleSolid`
+  - `Text`
+
+  # Changes in `@medusajs/ui-preset`
+
+  Minor tweaks to colors, typography, and animations.
+
+## 1.0.0
+
+### Major Changes
+
+- 8d31ce6: Release of the Medusa UI design system, includes three new packages: `@medusajs/ui` a set of React components, hooks, and utils; `@medusajs/icons` a set of React icons; `@medusajs/ui-preset` a Tailwind CSS preset containing Medusa UI design tokens.

packages/design-system/icons/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Medusajs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/design-system/icons/README.md

@@ -0,0 +1,48 @@
+<p align="center">
+  <a href="https://www.medusajs.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/59018053/229103275-b5e482bb-4601-46e6-8142-244f531cebdb.svg">
+    <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/59018053/229103726-e5b529a3-9b3f-4970-8a1f-c6af37f087bf.svg">
+    <img alt="Medusa logo" src="https://user-images.githubusercontent.com/59018053/229103726-e5b529a3-9b3f-4970-8a1f-c6af37f087bf.svg">
+    </picture>
+  </a>
+</p>
+<h1 align="center">
+  Medusa Icons
+</h1>
+
+<h4 align="center">
+  <a href="https://docs.medusajs.com/ui">Documentation</a> |
+  <a href="https://www.medusajs.com">Website</a>
+</h4>
+
+<p align="center">
+  Icons used in Medusa's design system.
+</p>
+<p align="center">
+  <a href="https://github.com/medusajs/medusa/blob/develop/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Medusa is released under the MIT license." />
+  </a>
+  <a href="https://discord.gg/xpCwq3Kfn8">
+    <img src="https://img.shields.io/badge/chat-on%20discord-7289DA.svg" alt="Discord Chat" />
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=medusajs">
+    <img src="https://img.shields.io/twitter/follow/medusajs.svg?label=Follow%20@medusajs" alt="Follow @medusajs" />
+  </a>
+</p>
+
+## Note
+
+This package is auto-generated, and requires a Figma token associated with the Medusa Figma organization. If you are a not a Medusa team member, you will not be able to make changes to this package. If you discover any issues please open an issue instead of a PR.
+
+## Installation
+
+```sh
+yarn add @medusajs/icons
+```
+
+## Usage
+
+```jsx
+import { Star } from "@medusajs/icons"
+```

packages/design-system/icons/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@medusajs/icons",
+  "version": "1.1.0",
+  "description": "Medusa UI React icon library",
+  "author": "Kasper Kristensen <kasper@medusajs.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/medusajs/medusa.git",
+    "directory": "packages/design-system/icons"
+  },
+  "main": "dist/cjs/medusa-icons.js",
+  "main:umd": "dist/umd/medusa-icons.js",
+  "module": "dist/esm/index.js",
+  "unpkg": "dist/umd/medusa-icons.min.js",
+  "typings": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn build:bundles && yarn build:types",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
+    "build:types": "tsc --emitDeclarationOnly",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest --run --coverage",
+    "generate": "rimraf ./src/components && toolbox icons -o './src/components'"
+  },
+  "devDependencies": {
+    "@atomico/rollup-plugin-sizes": "^1.1.4",
+    "@medusajs/toolbox": "^0.0.1",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jsdom": "^21.1.1",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "esbuild": "^0.18.11",
+    "eslint": "^7.32.0",
+    "jsdom": "^22.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.26.0",
+    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-license": "^3.0.1",
+    "rollup-plugin-ts": "^3.2.0",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "typescript": "^5.1.6",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2"
+  },
+  "peerDependencies": {
+    "react": "^16.x || ^17.x || ^18.x"
+  },
+  "packageManager": "yarn@3.5.0",
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/design-system/icons/rollup.config.mjs

@@ -0,0 +1,103 @@
+import bundleSize from "@atomico/rollup-plugin-sizes"
+import nodeResolve from "@rollup/plugin-node-resolve"
+import replace from "@rollup/plugin-replace"
+import esbuild from "rollup-plugin-esbuild"
+import license from "rollup-plugin-license"
+import { visualizer } from "rollup-plugin-visualizer"
+import fs from "fs"
+import path from "path"
+
+const pkg = JSON.parse(fs.readFileSync(path.resolve("./package.json"), "utf-8"))
+
+const plugins = (pkg, minify, esbuildOptions = {}) =>
+  [
+    esbuild({
+      minify,
+      ...esbuildOptions,
+    }),
+    license({
+      banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
+    }),
+    bundleSize(),
+    visualizer({
+      sourcemap: true,
+      filename: `stats/${pkg.name}${minify ? "-min" : ""}.html`,
+    }),
+    nodeResolve(),
+  ].filter(Boolean)
+
+const packageName = pkg.name
+const outputFileName = "medusa-icons"
+const outputDir = "dist"
+const inputs = ["src/components/index.ts"]
+
+const bundles = [
+  {
+    format: "umd",
+    inputs,
+    outputDir,
+    minify: true,
+    sourcemap: true,
+  },
+  {
+    format: "cjs",
+    inputs,
+    outputDir,
+    aliasesSupport: true,
+    sourcemap: true,
+  },
+  {
+    format: "esm",
+    inputs,
+    outputDir,
+    preserveModules: true,
+    aliasesSupport: true,
+    sourcemap: true,
+    dir: `${outputDir}/esm`, // Update this line
+  },
+]
+
+const configs = bundles
+  .map(
+    ({ inputs, outputDir, format, minify, preserveModules, aliasesSupport }) =>
+      inputs.map((input) => ({
+        input,
+        plugins: [
+          ...(!aliasesSupport
+            ? [
+                replace({
+                  "export * from './aliases';": "",
+                  "export * as icons from './icons';": "",
+                  delimiters: ["", ""],
+                  preventAssignment: false,
+                }),
+              ]
+            : []),
+          ...plugins(pkg, minify),
+        ],
+        external: ["react", "prop-types"],
+        output: {
+          name: packageName,
+          ...(preserveModules
+            ? {
+                dir: `${outputDir}/${format}`,
+              }
+            : {
+                file: `${outputDir}/${format}/${outputFileName}${
+                  minify ? ".min" : ""
+                }.js`,
+              }),
+          format,
+          sourcemap: true,
+          preserveModules,
+          globals: {
+            react: "react",
+            "prop-types": "PropTypes",
+            "react-jsx": "jsx",
+          },
+        },
+      }))
+  )
+  .flat()
+
+export default configs

packages/design-system/icons/setup-test.ts

@@ -0,0 +1,14 @@
+import "@testing-library/jest-dom"
+import { JSDOM } from "jsdom"
+import ResizeObserver from "resize-observer-polyfill"
+
+const { window } = new JSDOM()
+
+window.ResizeObserver = ResizeObserver
+global.ResizeObserver = ResizeObserver
+window.Element.prototype.scrollTo = () => {
+  // no-op
+}
+window.requestAnimationFrame = (cb) => setTimeout(cb, 1000 / 60)
+
+Object.assign(global, { window, document: window.document })

packages/design-system/icons/src/components/__tests__/academic-cap-solid.spec.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/design-system/icons/src/components/__tests__/arrow-left-mini.spec.tsx

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

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

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

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

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

packages/design-system/icons/src/components/__tests__/arrow-long-left.spec.tsx

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

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

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

packages/design-system/icons/src/components/__tests__/arrow-long-up.spec.tsx

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

packages/design-system/icons/src/components/__tests__/arrow-path-mini.spec.tsx

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

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

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

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

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

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

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

packages/design-system/icons/src/components/__tests__/arrow-up-circle-solid.spec.tsx

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

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

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

packages/design-system/icons/src/components/__tests__/arrow-up-mini.spec.tsx

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

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

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

packages/design-system/icons/src/components/__tests__/arrow-up-right-on-box.spec.tsx

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

packages/design-system/icons/src/components/__tests__/arrow-up-tray.spec.tsx

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

packages/design-system/icons/src/components/__tests__/arrow-uturn-left.spec.tsx

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

packages/design-system/icons/src/components/__tests__/arrows-pointing-out-mini.spec.tsx

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

packages/design-system/icons/src/components/__tests__/arrows-pointing-out.spec.tsx

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

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

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

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

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

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

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

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

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

packages/design-system/icons/src/components/__tests__/bell-alert-solid.spec.tsx

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

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

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

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

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

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

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

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

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

packages/design-system/icons/src/components/__tests__/bug-ant-solid.spec.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/design-system/icons/src/components/__tests__/chat-bubble-left-right-solid.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import ChatBubbleLeftRightSolid from "../chat-bubble-left-right-solid"
+
+  describe("ChatBubbleLeftRightSolid", () => {
+    it("should render without crashing", async () => {
+      render(<ChatBubbleLeftRightSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/chat-bubble-left-right.spec.tsx

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

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

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

packages/design-system/icons/src/components/__tests__/check-circle-mini-solid.spec.tsx

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

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

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

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

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

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

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

packages/design-system/icons/src/components/__tests__/chevron-double-left-mini-solid.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import ChevronDoubleLeftMiniSolid from "../chevron-double-left-mini-solid"
+
+  describe("ChevronDoubleLeftMiniSolid", () => {
+    it("should render without crashing", async () => {
+      render(<ChevronDoubleLeftMiniSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/chevron-double-left.spec.tsx

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

packages/design-system/icons/src/components/__tests__/chevron-double-right-mini-solid.spec.tsx

@@ -0,0 +1,17 @@
+  import * as React from "react"
+  import { cleanup, render, screen } from "@testing-library/react"
+
+  import ChevronDoubleRightMiniSolid from "../chevron-double-right-mini-solid"
+
+  describe("ChevronDoubleRightMiniSolid", () => {
+    it("should render without crashing", async () => {
+      render(<ChevronDoubleRightMiniSolid data-testid="icon" />)
+
+
+      const svgElement = screen.getByTestId("icon")
+
+      expect(svgElement).toBeInTheDocument()
+
+      cleanup()
+    })
+  })

packages/design-system/icons/src/components/__tests__/chevron-double-right.spec.tsx

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

packages/design-system/icons/src/components/__tests__/chevron-down-mini.spec.tsx

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

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

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

packages/design-system/icons/src/components/__tests__/chevron-left-mini.spec.tsx

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

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

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

packages/design-system/icons/src/components/__tests__/chevron-right-mini.spec.tsx

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

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

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

packages/design-system/icons/src/components/__tests__/chevron-up-down.spec.tsx

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

packages/design-system/icons/src/components/__tests__/chevron-up-mini.spec.tsx

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

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

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

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

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

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

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

packages/design-system/icons/src/components/__tests__/circle-mini-filled-solid.spec.tsx

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

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

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

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

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

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

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

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

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

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

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

packages/design-system/icons/src/components/__tests__/circle-three-quarters-solid.spec.tsx

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

packages/design-system/icons/src/components/__tests__/clock-changed-solid-mini.spec.tsx

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