From 551f4f75a348a84eee659e9bc6bca3a36dc6cb60 Mon Sep 17 00:00:00 2001
From: Sergey Roytman <sergeyro@monday.com>
Date: Wed, 27 Dec 2023 13:08:20 +0200
Subject: [PATCH] prettify all

---
 .eslintrc.js                                  | 104 +++++++++---------
 .storybook/main.ts                            |  16 +--
 .storybook/manager.js                         |   4 +-
 .storybook/preview.tsx                        |  24 ++--
 .storybook/theme.js                           |  16 +--
 __mocks__/fileMock.js                         |   2 +-
 __mocks__/styleMock.js                        |   2 +-
 eslint/resolver.js                            |   8 +-
 jest.config.js                                |  28 ++---
 rollup.config.js                              |  44 ++++----
 .../__stories__/alpha-warning.stories.tsx     |   6 +-
 .../alpha-warning/alpha-warning.tsx           |   4 +-
 .../__stories__/anchor-list-item.stories.tsx  |   8 +-
 .../anchor-list-item/anchor-list-item.tsx     |   6 +-
 .../__stories__/color-description.stories.tsx |  10 +-
 .../color-description.module.scss             |  14 +--
 .../color-description/color-description.tsx   |   8 +-
 .../component-description.stories.tsx         |  10 +-
 .../component-description.tsx                 |   6 +-
 .../__stories__/component-name.stories.tsx    |   8 +-
 .../component-name/component-name.tsx         |   6 +-
 .../component-rule-constants.ts               |   4 +-
 .../component-rule/component-rule.module.scss |  24 ++--
 .../component-rule/component-rule.tsx         |  16 +--
 .../__stories__/component-rules.stories.tsx   |  12 +-
 .../component-rules.module.scss               |   2 +-
 .../component-rules/component-rules.tsx       |  10 +-
 .../deprecated-warning.stories.tsx            |  10 +-
 .../deprecated-warning/deprecated-warning.tsx |   8 +-
 .../__stories__/doc-footer.stories.tsx        |   8 +-
 src/components/doc-footer/doc-footer.tsx      |  10 +-
 .../frame/__stories__/frame.stories.tsx       |   8 +-
 src/components/frame/frame.tsx                |   8 +-
 .../function-arguments.stories.tsx            |   8 +-
 .../function-arguments/function-argument.tsx  |  12 +-
 .../function-arguments/function-arguments.tsx |   4 +-
 .../contributors-list.tsx                     |  12 +-
 .../contributors.module.scss                  |   4 +-
 .../github-contributors-list.tsx              |  12 +-
 .../github-contributors-utils.ts              |  10 +-
 src/components/index.ts                       |  66 +++++------
 .../information-box-title.module.scss         |   2 +-
 .../information-box-title.tsx                 |  14 +--
 .../__stories__/information-box.stories.tsx   |  12 +-
 .../information-box.module.scss               |   2 +-
 .../information-box/information-box.tsx       |  16 +--
 .../link-component/link-component.jsx         |   4 +-
 src/components/link/LinkConstants.ts          |  12 +-
 .../link/__stories__/link.stories.tsx         |  10 +-
 src/components/link/link.tsx                  |  12 +-
 .../multiple-story-elements-wrapper.tsx       |   8 +-
 .../__stories__/paragraph.stories.tsx         |   8 +-
 src/components/paragraph/paragraph.tsx        |  10 +-
 .../related-component/related-component.tsx   |  16 +--
 .../related-components-context.ts             |   4 +-
 .../related-components.module.scss            |   2 +-
 .../related-components/related-components.tsx |  10 +-
 .../__stories__/section-name.stories.tsx      |   8 +-
 src/components/section-name/section-name.tsx  |   8 +-
 .../__stories__/sidebar-item.stories.tsx      |  10 +-
 src/components/sidebar-item/sidebar-item.tsx  |  12 +-
 .../__stories__/status-tag.stories.tsx        |  10 +-
 .../status-tag/status-tag.module.scss         |   2 +-
 src/components/status-tag/status-tag.tsx      |   8 +-
 .../__stories__/story-description.stories.tsx |  12 +-
 .../story-description.module.scss             |   2 +-
 .../story-description/story-description.tsx   |  16 +--
 .../__stories__/storybook-link.stories.tsx    |   8 +-
 .../storybook-link/storybook-link.tsx         |  14 +--
 .../tip/__stories__/tip.stories.tsx           |  16 +--
 src/components/tip/tip.tsx                    |  14 +--
 src/components/tip/tipConstants.ts            |  10 +-
 .../title/__stories__/title.stories.tsx       |   8 +-
 src/components/title/title.tsx                |   6 +-
 .../__stories__/token-table.stories.tsx       |  12 +-
 .../token-table/token-table-head-item.tsx     |   2 +-
 .../token-table/token-table-row.tsx           |   2 +-
 src/components/token-table/token-table.tsx    |   8 +-
 .../unstyled-list-item/unstyled-list-item.tsx |   4 +-
 .../__stories__/unstyled-list.stories.tsx     |  10 +-
 .../unstyled-list/unstyled-list.tsx           |   2 +-
 .../__stories__/usage-guidelines.stories.tsx  |  12 +-
 .../usage-guidelines.module.scss              |   2 +-
 .../usage-guidelines/usage-guidelines.tsx     |   6 +-
 .../visual-description.stories.tsx            |  16 +--
 .../visual-description/visual-description.tsx |   6 +-
 src/decorators/index.ts                       |   4 +-
 src/decorators/memory-stats.jsx               |   6 +-
 src/decorators/vertical-stories.jsx           |  10 +-
 src/functions/createComponentTemplate.tsx     |   2 +-
 .../createStoryMetaSettings.ts                |  18 +--
 .../createStoryMetaSettings/types.ts          |   2 +-
 src/functions/index.ts                        |   4 +-
 src/functions/memory-stats/index.js           |   8 +-
 .../memory-stats/memory-stats-lib.js          |  38 +++----
 src/global.d.ts                               |   2 +-
 src/helpers/components/Flex/Flex.tsx          |  20 ++--
 src/helpers/components/Flex/FlexConstants.ts  |  24 ++--
 src/helpers/components/Icons/Check.tsx        |   6 +-
 src/helpers/components/Icons/CloseSmall.tsx   |   6 +-
 src/helpers/components/Link/Link.tsx          |  26 ++---
 src/helpers/components/Link/LinkConsts.ts     |   8 +-
 src/helpers/types/VibeComponent.ts            |   2 +-
 src/helpers/types/VibeComponentProps.ts       |   2 +-
 src/helpers/types/index.ts                    |   4 +-
 .../utils/typesciptCssModulesHelper.ts        |   2 +-
 src/index.ts                                  |   8 +-
 src/styles/mixins/_index.scss                 |   6 +-
 src/styles/tokens/index.scss                  |   8 +-
 src/styles/tokens/typography.scss             |   4 +-
 src/types/ElementContent.ts                   |   2 +-
 src/types/index.ts                            |   4 +-
 src/types/published-types.ts                  |   2 +-
 src/types/withStaticProps.ts                  |   2 +-
 .../component-name-decorator.jsx              |  12 +-
 .../component-name-decorator.scss             |   4 +-
 storybook/components/index.js                 |   2 +-
 117 files changed, 609 insertions(+), 609 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 137d740..a1d9217 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,72 +1,72 @@
 const commonRules = {
-  'react/display-name': 'off',
-  'object-curly-newline': 'off',
-  'no-debugger': 'error',
-  'global-require': 'off',
-  'no-unused-expressions': 'off',
-  'react/forbid-foreign-prop-types': 'off',
-  'no-console': 'off',
-  'consistent-return': 'off',
-  'no-use-before-define': 'off',
-  'one-var': 'off',
-  'default-case': 'off',
-  'func-names': 'off',
-  'react/sort-comp': 'off',
-  'class-methods-use-this': 'off',
-  radix: 'off',
-  'no-underscore-dangle': 'off',
-  'import/prefer-default-export': 'off',
-  'no-plusplus': 'off',
-  'react/react-in-jsx-scope': 0,
-  'react/no-danger': 'error',
-  'react/jsx-one-expression-per-line': 'off',
-  'react/prop-types': 0,
-  'react/forbid-prop-types': 'off',
-  'react/function-component-definition': 'off',
-  'default-param-last': 'off',
-  'react/require-default-props': ['error'],
-  'react/jsx-props-no-spreading': 0,
-  'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
-  'react/default-props-match-prop-types': 'error',
-  'react/jsx-boolean-value': 'off',
-  'arrow-parens': 'off',
-  'implicit-arrow-linebreak': 'off',
-  'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+  "react/display-name": "off",
+  "object-curly-newline": "off",
+  "no-debugger": "error",
+  "global-require": "off",
+  "no-unused-expressions": "off",
+  "react/forbid-foreign-prop-types": "off",
+  "no-console": "off",
+  "consistent-return": "off",
+  "no-use-before-define": "off",
+  "one-var": "off",
+  "default-case": "off",
+  "func-names": "off",
+  "react/sort-comp": "off",
+  "class-methods-use-this": "off",
+  radix: "off",
+  "no-underscore-dangle": "off",
+  "import/prefer-default-export": "off",
+  "no-plusplus": "off",
+  "react/react-in-jsx-scope": 0,
+  "react/no-danger": "error",
+  "react/jsx-one-expression-per-line": "off",
+  "react/prop-types": 0,
+  "react/forbid-prop-types": "off",
+  "react/function-component-definition": "off",
+  "default-param-last": "off",
+  "react/require-default-props": ["error"],
+  "react/jsx-props-no-spreading": 0,
+  "react/jsx-filename-extension": ["error", { extensions: [".js", ".jsx", ".ts", ".tsx"] }],
+  "react/default-props-match-prop-types": "error",
+  "react/jsx-boolean-value": "off",
+  "arrow-parens": "off",
+  "implicit-arrow-linebreak": "off",
+  "import/no-extraneous-dependencies": ["error", { devDependencies: true }],
 };
-const commonPlugins = ['import', 'react', 'json', 'markdown', 'jest'];
-const commonExtends = ['plugin:react/recommended', 'plugin:prettier/recommended', 'plugin:storybook/recommended'];
+const commonPlugins = ["import", "react", "json", "markdown", "jest"];
+const commonExtends = ["plugin:react/recommended", "plugin:prettier/recommended", "plugin:storybook/recommended"];
 
 module.exports = {
   overrides: [
     {
-      files: ['*.jest.js', 'jest.setup.js', 'jest.init.js'],
+      files: ["*.jest.js", "jest.setup.js", "jest.init.js"],
       env: {
         jest: true,
-        'jest/globals': true,
+        "jest/globals": true,
       },
     },
     {
-      files: ['.eslintrc.js', 'scripts/**/*.js', '__mocks__/**/*.js', 'rollup.config.js'],
+      files: [".eslintrc.js", "scripts/**/*.js", "__mocks__/**/*.js", "rollup.config.js"],
       env: {
         node: true,
       },
     },
     {
-      files: ['*.ts', '*.tsx'],
-      parser: '@typescript-eslint/parser',
+      files: ["*.ts", "*.tsx"],
+      parser: "@typescript-eslint/parser",
       extends: [
         ...commonExtends,
-        'plugin:@typescript-eslint/eslint-recommended',
-        'plugin:@typescript-eslint/recommended',
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
       ],
-      plugins: [...commonPlugins, '@typescript-eslint'],
+      plugins: [...commonPlugins, "@typescript-eslint"],
       rules: {
         ...commonRules,
-        '@typescript-eslint/ban-ts-comment': ['warn'],
-        'no-unused-vars': 'off',
-        'react/require-default-props': 'off',
-        '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
-        '@typescript-eslint/no-empty-function': 'off',
+        "@typescript-eslint/ban-ts-comment": ["warn"],
+        "no-unused-vars": "off",
+        "react/require-default-props": "off",
+        "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
+        "@typescript-eslint/no-empty-function": "off",
       },
     },
   ],
@@ -79,20 +79,20 @@ module.exports = {
       version: 27,
     },
     react: {
-      version: 'detect',
+      version: "detect",
     },
   },
-  extends: [...commonExtends, 'eslint:recommended'],
+  extends: [...commonExtends, "eslint:recommended"],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 13,
-    sourceType: 'module',
+    sourceType: "module",
   },
   plugins: [...commonPlugins],
   rules: {
     ...commonRules,
-    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    "no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
   },
 };
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 1560312..90c168c 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,20 +1,20 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx', '../storybook/**/*.stories.mdx'],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.tsx", "../storybook/**/*.stories.mdx"],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-themes',
-    '@storybook/preset-scss',
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-themes",
+    "@storybook/preset-scss",
   ],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: "@storybook/react-webpack5",
     options: {},
   },
   docs: {
     autodocs: true,
   },
-  staticDirs: ['../public'],
+  staticDirs: ["../public"],
 };
 export default config;
diff --git a/.storybook/manager.js b/.storybook/manager.js
index baf80b2..046597e 100644
--- a/.storybook/manager.js
+++ b/.storybook/manager.js
@@ -1,5 +1,5 @@
-import { addons } from '@storybook/manager-api';
-import theme from './theme';
+import { addons } from "@storybook/manager-api";
+import theme from "./theme";
 
 addons.setConfig({
   theme: theme,
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 1ebc7c4..2b13d79 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Preview } from '@storybook/react';
+import React from "react";
+import { Preview } from "@storybook/react";
 import {
   AnchorListItem,
   ComponentRules,
@@ -17,11 +17,11 @@ import {
   UnstyledList,
   UnstyledListItem,
   UsageGuidelines,
-} from '../src';
-import { ComponentNameDecorator } from '../storybook/components';
-import { DocsContainer, DocsPage, Unstyled } from '@storybook/blocks';
-import { withThemeByClassName } from '@storybook/addon-themes';
-import '../src/styles/tokens/index.scss';
+} from "../src";
+import { ComponentNameDecorator } from "../storybook/components";
+import { DocsContainer, DocsPage, Unstyled } from "@storybook/blocks";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import "../src/styles/tokens/index.scss";
 
 const preview: Preview = {
   parameters: {
@@ -62,18 +62,18 @@ const preview: Preview = {
     },
     options: {
       storySort: {
-        order: ['Welcome', 'Change Log', '*'],
+        order: ["Welcome", "Change Log", "*"],
       },
     },
   },
   decorators: [
     withThemeByClassName({
       themes: {
-        Light: 'light-app-theme',
-        Dark: 'dark-app-theme',
-        Black: 'black-app-theme',
+        Light: "light-app-theme",
+        Dark: "dark-app-theme",
+        Black: "black-app-theme",
       },
-      defaultTheme: 'Light',
+      defaultTheme: "Light",
     }) as any,
   ],
 };
diff --git a/.storybook/theme.js b/.storybook/theme.js
index 4846da2..3d30d58 100644
--- a/.storybook/theme.js
+++ b/.storybook/theme.js
@@ -1,14 +1,14 @@
-import { create } from '@storybook/theming/create';
-import logo from './logo.png';
+import { create } from "@storybook/theming/create";
+import logo from "./logo.png";
 
 export default create({
-  base: 'light',
+  base: "light",
   brandImage: logo,
-  brandUrl: 'https://style.monday.com', // TODO set brand url
-  barSelectedColor: '#5034ff',
-  brandTitle: 'Vibe Storybook Components',
+  brandUrl: "https://style.monday.com", // TODO set brand url
+  barSelectedColor: "#5034ff",
+  brandTitle: "Vibe Storybook Components",
   background: {
-    hoverable: 'rgba(80, 52, 255, 0.1)',
+    hoverable: "rgba(80, 52, 255, 0.1)",
   },
-  hoverable: 'rgba(80, 52, 255, 0.1)',
+  hoverable: "rgba(80, 52, 255, 0.1)",
 });
diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js
index cb75025..897e9cb 100644
--- a/__mocks__/fileMock.js
+++ b/__mocks__/fileMock.js
@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
   process(src, filename) {
diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js
index 9cb844c..24d4f24 100644
--- a/__mocks__/styleMock.js
+++ b/__mocks__/styleMock.js
@@ -1,5 +1,5 @@
 module.exports = {
   process(src, filename) {
-    return { code: '' };
+    return { code: "" };
   },
 };
diff --git a/eslint/resolver.js b/eslint/resolver.js
index 152c2d1..fff4184 100644
--- a/eslint/resolver.js
+++ b/eslint/resolver.js
@@ -1,8 +1,8 @@
-const path = require('path');
-const { resolve: resolveExports } = require('resolve.exports');
+const path = require("path");
+const { resolve: resolveExports } = require("resolve.exports");
 
 // optionally handle NodeJS built-ins just in case not handled by another ESLint module resolver in the chain
-const { builtinModules } = require('module');
+const { builtinModules } = require("module");
 const builtins = new Set(builtinModules);
 
 /**
@@ -24,7 +24,7 @@ const resolve = (source, file, _config) => {
 
     return { found: true, path: moduleId };
   } catch (/** @type {any} */ err) {
-    if (err.code === 'MODULE_NOT_FOUND' && err.path?.endsWith('/package.json')) {
+    if (err.code === "MODULE_NOT_FOUND" && err.path?.endsWith("/package.json")) {
       const { name, module, main, exports } = require(err.path);
       const resolved = resolveExports({ name, module, main, exports }, source);
       const moduleId = path.join(path.dirname(err.path), resolved);
diff --git a/jest.config.js b/jest.config.js
index cbb9496..f559dd5 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -3,22 +3,22 @@ const rootDir = process.cwd();
 module.exports = {
   rootDir,
   clearMocks: true,
-  coverageDirectory: 'coverage',
-  moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node', 'mdx'],
+  coverageDirectory: "coverage",
+  moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "node", "mdx"],
   moduleNameMapper: {
-    '\\.module\\.scss$': 'identity-obj-proxy',
-    '^lodash-es(.*)': '<rootDir>/node_modules/lodash$1',
-    '\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
+    "\\.module\\.scss$": "identity-obj-proxy",
+    "^lodash-es(.*)": "<rootDir>/node_modules/lodash$1",
+    "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
   },
-  modulePathIgnorePatterns: ['<rootDir>/dist', '<rootDir>/build'],
-  preset: 'ts-jest/presets/default',
-  testEnvironment: 'jsdom',
-  testMatch: ['**/__tests__/**/*.jest.[jt]s?(x)'],
-  transformIgnorePatterns: ['/node_modules/(?!monday-ui-react-core)'],
+  modulePathIgnorePatterns: ["<rootDir>/dist", "<rootDir>/build"],
+  preset: "ts-jest/presets/default",
+  testEnvironment: "jsdom",
+  testMatch: ["**/__tests__/**/*.jest.[jt]s?(x)"],
+  transformIgnorePatterns: ["/node_modules/(?!monday-ui-react-core)"],
   transform: {
-    '^.+\\.jsx?$': 'babel-jest',
-    '^.+\\.(tx|tsx)$': 'ts-jest',
-    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|svg)$':
-      '<rootDir>/__mocks__/fileMock.js',
+    "^.+\\.jsx?$": "babel-jest",
+    "^.+\\.(tx|tsx)$": "ts-jest",
+    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|svg)$":
+      "<rootDir>/__mocks__/fileMock.js",
   },
 };
diff --git a/rollup.config.js b/rollup.config.js
index f7368b3..78515c1 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,42 +1,42 @@
-import * as path from 'path';
-import nodeResolve from '@rollup/plugin-node-resolve';
-import babel from '@rollup/plugin-babel';
-import commonjs from '@rollup/plugin-commonjs';
-import json from '@rollup/plugin-json';
-import typescript from 'rollup-plugin-typescript2';
-import terser from '@rollup/plugin-terser';
-import postcss from 'rollup-plugin-postcss';
-import autoprefixer from 'autoprefixer';
-import svg from 'rollup-plugin-svg';
+import * as path from "path";
+import nodeResolve from "@rollup/plugin-node-resolve";
+import babel from "@rollup/plugin-babel";
+import commonjs from "@rollup/plugin-commonjs";
+import json from "@rollup/plugin-json";
+import typescript from "rollup-plugin-typescript2";
+import terser from "@rollup/plugin-terser";
+import postcss from "rollup-plugin-postcss";
+import autoprefixer from "autoprefixer";
+import svg from "rollup-plugin-svg";
 
-const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx'];
+const EXTENSIONS = [".js", ".jsx", ".ts", ".tsx"];
 const ROOT_PATH = path.join(__dirname);
-const SRC_PATH = path.join(ROOT_PATH, 'src');
-const DIST_PATH = path.join(ROOT_PATH, 'dist');
+const SRC_PATH = path.join(ROOT_PATH, "src");
+const DIST_PATH = path.join(ROOT_PATH, "dist");
 
 export default {
   output: {
     dir: DIST_PATH,
     indent: false,
     strict: false,
-    exports: 'named',
+    exports: "named",
     preserveModules: true,
   },
-  input: path.join(SRC_PATH, 'index.ts'),
+  input: path.join(SRC_PATH, "index.ts"),
   external: [/node_modules/],
   plugins: [
     svg(),
     commonjs(),
     json(),
     nodeResolve({
-      extensions: [...EXTENSIONS, '.json', '.css'],
+      extensions: [...EXTENSIONS, ".json", ".css"],
     }),
     typescript({
-      tsconfig: path.join(ROOT_PATH, 'tsconfig.json'),
+      tsconfig: path.join(ROOT_PATH, "tsconfig.json"),
     }),
     babel({
-      babelHelpers: 'bundled',
-      presets: ['@babel/preset-react'],
+      babelHelpers: "bundled",
+      presets: ["@babel/preset-react"],
       extensions: EXTENSIONS,
     }),
     terser({
@@ -49,13 +49,13 @@ export default {
     postcss({
       use: [
         [
-          'sass',
+          "sass",
           {
-            includePaths: ['src'],
+            includePaths: ["src"],
           },
         ],
       ],
-      extensions: ['.css', '.scss'],
+      extensions: [".css", ".scss"],
       extract: true,
       minimize: true,
       plugins: [autoprefixer()],
diff --git a/src/components/alpha-warning/__stories__/alpha-warning.stories.tsx b/src/components/alpha-warning/__stories__/alpha-warning.stories.tsx
index 8eb0d65..6e005ab 100644
--- a/src/components/alpha-warning/__stories__/alpha-warning.stories.tsx
+++ b/src/components/alpha-warning/__stories__/alpha-warning.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AlphaWarning from '../alpha-warning';
+import type { Meta, StoryObj } from "@storybook/react";
+import AlphaWarning from "../alpha-warning";
 
 const meta: Meta<typeof AlphaWarning> = {
   component: AlphaWarning,
-  title: 'Components/AlphaWarning',
+  title: "Components/AlphaWarning",
 };
 export default meta;
 
diff --git a/src/components/alpha-warning/alpha-warning.tsx b/src/components/alpha-warning/alpha-warning.tsx
index 4258af0..b381e7e 100644
--- a/src/components/alpha-warning/alpha-warning.tsx
+++ b/src/components/alpha-warning/alpha-warning.tsx
@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import Tip from '../tip/tip';
+import { FC } from "react";
+import Tip from "../tip/tip";
 
 const AlphaWarning: FC = () => (
   <Tip emoji="🚧" title="Alpha component" type={Tip.types.WARNING}>
diff --git a/src/components/anchor-list-item/__stories__/anchor-list-item.stories.tsx b/src/components/anchor-list-item/__stories__/anchor-list-item.stories.tsx
index e0ff467..50fd0e7 100644
--- a/src/components/anchor-list-item/__stories__/anchor-list-item.stories.tsx
+++ b/src/components/anchor-list-item/__stories__/anchor-list-item.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AnchorListItem from '../anchor-list-item';
+import type { Meta, StoryObj } from "@storybook/react";
+import AnchorListItem from "../anchor-list-item";
 
 const meta: Meta<typeof AnchorListItem> = {
   component: AnchorListItem,
-  title: 'Components/AnchorListItem',
+  title: "Components/AnchorListItem",
 };
 export default meta;
 
@@ -11,6 +11,6 @@ type Story = StoryObj<typeof AnchorListItem>;
 
 export const Overview: Story = {
   args: {
-    children: 'This is a anchor list item',
+    children: "This is a anchor list item",
   },
 };
diff --git a/src/components/anchor-list-item/anchor-list-item.tsx b/src/components/anchor-list-item/anchor-list-item.tsx
index ae1e9c4..d5f142b 100644
--- a/src/components/anchor-list-item/anchor-list-item.tsx
+++ b/src/components/anchor-list-item/anchor-list-item.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import styles from './anchor-list-item.module.scss';
-import { ElementContent } from '../../types';
+import { FC } from "react";
+import styles from "./anchor-list-item.module.scss";
+import { ElementContent } from "../../types";
 
 type AnchorListItemProps = {
   children?: ElementContent;
diff --git a/src/components/color-description/__stories__/color-description.stories.tsx b/src/components/color-description/__stories__/color-description.stories.tsx
index 96524eb..fece02a 100644
--- a/src/components/color-description/__stories__/color-description.stories.tsx
+++ b/src/components/color-description/__stories__/color-description.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ColorDescription from '../color-description';
+import type { Meta, StoryObj } from "@storybook/react";
+import ColorDescription from "../color-description";
 
 const meta: Meta<typeof ColorDescription> = {
   component: ColorDescription,
-  title: 'Components/ColorDescription',
+  title: "Components/ColorDescription",
 };
 export default meta;
 
@@ -11,8 +11,8 @@ type Story = StoryObj<typeof ColorDescription>;
 
 export const Overview: Story = {
   args: {
-    colorName: 'sb-positive-color',
-    description: 'This is a description',
+    colorName: "sb-positive-color",
+    description: "This is a description",
     withBorder: false,
   },
 };
diff --git a/src/components/color-description/color-description.module.scss b/src/components/color-description/color-description.module.scss
index 8b98bec..1ecbf7c 100644
--- a/src/components/color-description/color-description.module.scss
+++ b/src/components/color-description/color-description.module.scss
@@ -1,7 +1,7 @@
-.colorDescription {
-  border-radius: var(--sb-border-radius-extra-small);
-  &.withBorder {
-    border: 1px solid;
-    border-color: var(--sb-ui-border-color);
-  }
-}
+.colorDescription {
+  border-radius: var(--sb-border-radius-extra-small);
+  &.withBorder {
+    border: 1px solid;
+    border-color: var(--sb-ui-border-color);
+  }
+}
diff --git a/src/components/color-description/color-description.tsx b/src/components/color-description/color-description.tsx
index d62f06c..2a7d12e 100644
--- a/src/components/color-description/color-description.tsx
+++ b/src/components/color-description/color-description.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react';
-import cx from 'classnames';
-import VisualDescription from '../visual-description/visual-description';
-import styles from './color-description.module.scss';
+import { FC } from "react";
+import cx from "classnames";
+import VisualDescription from "../visual-description/visual-description";
+import styles from "./color-description.module.scss";
 
 type ColorDescriptionProps = {
   colorName: string;
diff --git a/src/components/component-description/__stories__/component-description.stories.tsx b/src/components/component-description/__stories__/component-description.stories.tsx
index dcba748..86f7570 100644
--- a/src/components/component-description/__stories__/component-description.stories.tsx
+++ b/src/components/component-description/__stories__/component-description.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ComponentDescription from '../component-description';
+import type { Meta, StoryObj } from "@storybook/react";
+import ComponentDescription from "../component-description";
 
 const meta: Meta<typeof ComponentDescription> = {
   component: ComponentDescription,
-  title: 'Components/ComponentDescription',
+  title: "Components/ComponentDescription",
 };
 export default meta;
 
@@ -11,7 +11,7 @@ type Story = StoryObj<typeof ComponentDescription>;
 
 export const Overview: Story = {
   args: {
-    description: 'This is a description',
-    children: '',
+    description: "This is a description",
+    children: "",
   },
 };
diff --git a/src/components/component-description/component-description.tsx b/src/components/component-description/component-description.tsx
index 08eeaa9..50b080d 100644
--- a/src/components/component-description/component-description.tsx
+++ b/src/components/component-description/component-description.tsx
@@ -1,12 +1,12 @@
-import { FC } from 'react';
-import { ElementContent } from '../../types';
+import { FC } from "react";
+import { ElementContent } from "../../types";
 
 type ComponentDescriptionProps = {
   description?: string;
   children?: ElementContent;
 };
 
-const ComponentDescription: FC<ComponentDescriptionProps> = ({ description = '', children = null }) => (
+const ComponentDescription: FC<ComponentDescriptionProps> = ({ description = "", children = null }) => (
   <div>
     <span>{description}</span>
     {children}
diff --git a/src/components/component-name/__stories__/component-name.stories.tsx b/src/components/component-name/__stories__/component-name.stories.tsx
index 8876a27..62ee7f7 100644
--- a/src/components/component-name/__stories__/component-name.stories.tsx
+++ b/src/components/component-name/__stories__/component-name.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ComponentName from '../component-name';
+import type { Meta, StoryObj } from "@storybook/react";
+import ComponentName from "../component-name";
 
 const meta: Meta<typeof ComponentName> = {
   component: ComponentName,
-  title: 'Components/ComponentName',
+  title: "Components/ComponentName",
 };
 export default meta;
 
@@ -11,6 +11,6 @@ type Story = StoryObj<typeof ComponentName>;
 
 export const Overview: Story = {
   args: {
-    children: 'Component Name',
+    children: "Component Name",
   },
 };
diff --git a/src/components/component-name/component-name.tsx b/src/components/component-name/component-name.tsx
index 92c50de..8bf9db7 100644
--- a/src/components/component-name/component-name.tsx
+++ b/src/components/component-name/component-name.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import cx from 'classnames';
-import styles from './component-name.module.scss';
+import { FC } from "react";
+import cx from "classnames";
+import styles from "./component-name.module.scss";
 
 type ComponentNameProps = {
   children: string;
diff --git a/src/components/component-rule/component-rule-constants.ts b/src/components/component-rule/component-rule-constants.ts
index 273855c..f2cd676 100644
--- a/src/components/component-rule/component-rule-constants.ts
+++ b/src/components/component-rule/component-rule-constants.ts
@@ -1,3 +1,3 @@
-export const COMPONENT_RULE_BASE_CSS_CLASS = 'vibe-sb-comps-component-rule';
-export const RECOMMENDED_TITLE = 'Do';
+export const COMPONENT_RULE_BASE_CSS_CLASS = "vibe-sb-comps-component-rule";
+export const RECOMMENDED_TITLE = "Do";
 export const NOT_RECOMMENDED_TITLE = "Don't";
diff --git a/src/components/component-rule/component-rule.module.scss b/src/components/component-rule/component-rule.module.scss
index 172d822..4c6d5ad 100644
--- a/src/components/component-rule/component-rule.module.scss
+++ b/src/components/component-rule/component-rule.module.scss
@@ -44,22 +44,22 @@
   }
 
   &.recommended {
-      .icon {
-        background: var(--sb-positive-color);
-      }
+    .icon {
+      background: var(--sb-positive-color);
+    }
 
-      .component {
-        box-shadow: inset 0 3px 0 var(--sb-positive-color);
-      }
+    .component {
+      box-shadow: inset 0 3px 0 var(--sb-positive-color);
+    }
   }
 
   &.notRecommended {
-      .icon {
-        background: var(--sb-negative-color);
-      }
+    .icon {
+      background: var(--sb-negative-color);
+    }
 
-      .component {
-        box-shadow: inset 0 3px 0 var(--sb-negative-color);
-      }
+    .component {
+      box-shadow: inset 0 3px 0 var(--sb-negative-color);
+    }
   }
 }
diff --git a/src/components/component-rule/component-rule.tsx b/src/components/component-rule/component-rule.tsx
index ad79cff..59b3b1b 100644
--- a/src/components/component-rule/component-rule.tsx
+++ b/src/components/component-rule/component-rule.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import cx from 'classnames';
-import Check from '../../helpers/components/Icons/Check';
-import CloseSmall from '../../helpers/components/Icons/CloseSmall';
-import { RECOMMENDED_TITLE, NOT_RECOMMENDED_TITLE } from './component-rule-constants';
-import { ElementContent } from '../../types';
-import styles from './component-rule.module.scss';
+import React from "react";
+import cx from "classnames";
+import Check from "../../helpers/components/Icons/Check";
+import CloseSmall from "../../helpers/components/Icons/CloseSmall";
+import { RECOMMENDED_TITLE, NOT_RECOMMENDED_TITLE } from "./component-rule-constants";
+import { ElementContent } from "../../types";
+import styles from "./component-rule.module.scss";
 
 interface ComponentRuleProps {
   component: ElementContent;
@@ -16,7 +16,7 @@ interface ComponentRuleProps {
 
 const ComponentRule: React.FC<ComponentRuleProps> = ({
   component,
-  description = '',
+  description = "",
   isRecommended = false,
   className,
   componentContainerClassName,
diff --git a/src/components/component-rules/__stories__/component-rules.stories.tsx b/src/components/component-rules/__stories__/component-rules.stories.tsx
index ad7d149..03f7798 100644
--- a/src/components/component-rules/__stories__/component-rules.stories.tsx
+++ b/src/components/component-rules/__stories__/component-rules.stories.tsx
@@ -1,10 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ComponentRules from '../component-rules';
-import ComponentName from '../../component-name/component-name';
+import type { Meta, StoryObj } from "@storybook/react";
+import ComponentRules from "../component-rules";
+import ComponentName from "../../component-name/component-name";
 
 const meta: Meta<typeof ComponentRules> = {
   component: ComponentRules,
-  title: 'Components/ComponentRules',
+  title: "Components/ComponentRules",
 };
 export default meta;
 
@@ -16,11 +16,11 @@ export const Overview: Story = {
       {
         positive: {
           component: <ComponentName className="">Hello world</ComponentName>,
-          description: 'Always capitalize the first letter of the first word in the heading.',
+          description: "Always capitalize the first letter of the first word in the heading.",
         },
         negative: {
           component: <ComponentName className="">Hello World</ComponentName>,
-          description: 'Please avoid capitalizing the first letter of each word in the heading.',
+          description: "Please avoid capitalizing the first letter of each word in the heading.",
         },
       },
     ],
diff --git a/src/components/component-rules/component-rules.module.scss b/src/components/component-rules/component-rules.module.scss
index 7dd08af..a746588 100644
--- a/src/components/component-rules/component-rules.module.scss
+++ b/src/components/component-rules/component-rules.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins/layout';
+@import "../../styles/mixins/layout";
 
 $component-rules-grid-gap: var(--sb-spacing-xxl);
 $component-rules-cell-min-width: $sb-grid-auto-fit-cell-width-xl;
diff --git a/src/components/component-rules/component-rules.tsx b/src/components/component-rules/component-rules.tsx
index 9b9bc37..4cb5b3d 100644
--- a/src/components/component-rules/component-rules.tsx
+++ b/src/components/component-rules/component-rules.tsx
@@ -1,8 +1,8 @@
-import React, { useMemo } from 'react';
-import cx from 'classnames';
-import ComponentRule from '../component-rule/component-rule';
-import { ElementContent } from '../../types';
-import styles from './component-rules.module.scss';
+import React, { useMemo } from "react";
+import cx from "classnames";
+import ComponentRule from "../component-rule/component-rule";
+import { ElementContent } from "../../types";
+import styles from "./component-rules.module.scss";
 
 interface ComponentRulesProps {
   rules: {
diff --git a/src/components/deprecated-warning/__stories__/deprecated-warning.stories.tsx b/src/components/deprecated-warning/__stories__/deprecated-warning.stories.tsx
index edd1061..246bcd0 100644
--- a/src/components/deprecated-warning/__stories__/deprecated-warning.stories.tsx
+++ b/src/components/deprecated-warning/__stories__/deprecated-warning.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import DeprecatedWarning from '../deprecated-warning';
+import type { Meta, StoryObj } from "@storybook/react";
+import DeprecatedWarning from "../deprecated-warning";
 
 const meta: Meta<typeof DeprecatedWarning> = {
   component: DeprecatedWarning,
-  title: 'Components/DeprecatedWarning',
+  title: "Components/DeprecatedWarning",
 };
 export default meta;
 
@@ -11,7 +11,7 @@ type Story = StoryObj<typeof DeprecatedWarning>;
 
 export const Overview: Story = {
   args: {
-    alternativeName: 'NewComponent',
-    alternativeLink: '#',
+    alternativeName: "NewComponent",
+    alternativeLink: "#",
   },
 };
diff --git a/src/components/deprecated-warning/deprecated-warning.tsx b/src/components/deprecated-warning/deprecated-warning.tsx
index 6eed0a0..b7dfee8 100644
--- a/src/components/deprecated-warning/deprecated-warning.tsx
+++ b/src/components/deprecated-warning/deprecated-warning.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react';
-import Link from '../link/link';
-import Tip from '../tip/tip';
-import { ElementContent } from '../../types';
+import { FC } from "react";
+import Link from "../link/link";
+import Tip from "../tip/tip";
+import { ElementContent } from "../../types";
 
 interface DeprecatedWarningProps {
   alternativeName: string;
diff --git a/src/components/doc-footer/__stories__/doc-footer.stories.tsx b/src/components/doc-footer/__stories__/doc-footer.stories.tsx
index b36bab1..d5f7f82 100644
--- a/src/components/doc-footer/__stories__/doc-footer.stories.tsx
+++ b/src/components/doc-footer/__stories__/doc-footer.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import DocFooter from '../doc-footer';
+import type { Meta, StoryObj } from "@storybook/react";
+import DocFooter from "../doc-footer";
 
 const meta: Meta<typeof DocFooter> = {
   component: DocFooter,
-  title: 'Components/DocFooter',
+  title: "Components/DocFooter",
 };
 export default meta;
 
@@ -11,6 +11,6 @@ type Story = StoryObj<typeof DocFooter>;
 
 export const Overview: Story = {
   args: {
-    feedbackFormLink: '/',
+    feedbackFormLink: "/",
   },
 };
diff --git a/src/components/doc-footer/doc-footer.tsx b/src/components/doc-footer/doc-footer.tsx
index 3f5552c..06ddb14 100644
--- a/src/components/doc-footer/doc-footer.tsx
+++ b/src/components/doc-footer/doc-footer.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react';
-import SectionName from '../section-name/section-name';
-import Link from '../link/link';
-import styles from './doc-footer.module.scss';
+import { FC } from "react";
+import SectionName from "../section-name/section-name";
+import Link from "../link/link";
+import styles from "./doc-footer.module.scss";
 
 type DocFooterProps = {
   feedbackFormLink: string;
@@ -11,7 +11,7 @@ const DocFooter: FC<DocFooterProps> = ({ feedbackFormLink }) => (
   <div className={styles.docFooter}>
     <SectionName>Feedback</SectionName>
     <div className={styles.text}>
-      Help us improve this pattern by providing feedback, asking questions, and leaving any other comments on{' '}
+      Help us improve this pattern by providing feedback, asking questions, and leaving any other comments on{" "}
       <Link href={feedbackFormLink} withoutSpacing>
         this form
       </Link>
diff --git a/src/components/frame/__stories__/frame.stories.tsx b/src/components/frame/__stories__/frame.stories.tsx
index c1776b8..e46ef4f 100644
--- a/src/components/frame/__stories__/frame.stories.tsx
+++ b/src/components/frame/__stories__/frame.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Frame from '../frame';
+import type { Meta, StoryObj } from "@storybook/react";
+import Frame from "../frame";
 
 const meta: Meta<typeof Frame> = {
   component: Frame,
-  title: 'Components/Frame',
+  title: "Components/Frame",
 };
 export default meta;
 
@@ -11,6 +11,6 @@ type Story = StoryObj<typeof Frame>;
 
 export const Overview: Story = {
   args: {
-    children: 'This is a frame',
+    children: "This is a frame",
   },
 };
diff --git a/src/components/frame/frame.tsx b/src/components/frame/frame.tsx
index 9d28669..8c86f9e 100644
--- a/src/components/frame/frame.tsx
+++ b/src/components/frame/frame.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react';
-import cx from 'classnames';
-import { ElementContent } from '../../types';
-import styles from './frame.module.scss';
+import { FC } from "react";
+import cx from "classnames";
+import { ElementContent } from "../../types";
+import styles from "./frame.module.scss";
 
 type FrameProps = {
   children: ElementContent;
diff --git a/src/components/function-arguments/__stories__/function-arguments.stories.tsx b/src/components/function-arguments/__stories__/function-arguments.stories.tsx
index e5a2730..9189427 100644
--- a/src/components/function-arguments/__stories__/function-arguments.stories.tsx
+++ b/src/components/function-arguments/__stories__/function-arguments.stories.tsx
@@ -1,10 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import FunctionArguments from '../function-arguments';
-import FunctionArgument from '../function-argument';
+import type { Meta, StoryObj } from "@storybook/react";
+import FunctionArguments from "../function-arguments";
+import FunctionArgument from "../function-argument";
 
 const meta: Meta<typeof FunctionArguments> = {
   component: FunctionArguments,
-  title: 'Components/FunctionArguments',
+  title: "Components/FunctionArguments",
 };
 export default meta;
 
diff --git a/src/components/function-arguments/function-argument.tsx b/src/components/function-arguments/function-argument.tsx
index f8c4b94..3f86be3 100644
--- a/src/components/function-arguments/function-argument.tsx
+++ b/src/components/function-arguments/function-argument.tsx
@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import classes from './index.module.scss';
-import { ElementContent } from '../../types';
+import { FC } from "react";
+import classes from "./index.module.scss";
+import { ElementContent } from "../../types";
 
 type FunctionArgumentProps = {
   children?: ElementContent;
@@ -20,13 +20,13 @@ const FunctionArgument: FC<FunctionArgumentProps> = ({
   required,
 }) => (
   <li className={classes.argument}>
-    {name && <code className={classes['argument-name']}>{name}</code>}
-    <code className={classes['argument-type']}>{type}</code>
+    {name && <code className={classes["argument-name"]}>{name}</code>}
+    <code className={classes["argument-type"]}>{type}</code>
     {required && <span className={classes.required}>*</span>}
     {description && <> - {description}</>}
     {defaultValue && (
       <>
-        {' '}
+        {" "}
         Defaults to: <code>{defaultValue}</code>
       </>
     )}
diff --git a/src/components/function-arguments/function-arguments.tsx b/src/components/function-arguments/function-arguments.tsx
index b10c386..1b1b749 100644
--- a/src/components/function-arguments/function-arguments.tsx
+++ b/src/components/function-arguments/function-arguments.tsx
@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { ElementContent } from '../../types';
+import { FC } from "react";
+import { ElementContent } from "../../types";
 
 type FunctionArgumentsProps = {
   children: ElementContent;
diff --git a/src/components/github-contributors-list/contributors-list.tsx b/src/components/github-contributors-list/contributors-list.tsx
index 6dd7969..288cb7b 100644
--- a/src/components/github-contributors-list/contributors-list.tsx
+++ b/src/components/github-contributors-list/contributors-list.tsx
@@ -1,8 +1,8 @@
-import { FC } from 'react';
-import cx from 'classnames';
-import Link from '../../../src/components/link/link';
-import { GithubContributor } from './github-contributors-types';
-import styles from './contributors.module.scss';
+import { FC } from "react";
+import cx from "classnames";
+import Link from "../../../src/components/link/link";
+import { GithubContributor } from "./github-contributors-types";
+import styles from "./contributors.module.scss";
 
 interface ContributorsListProps {
   contributorsData: Array<GithubContributor>;
@@ -15,7 +15,7 @@ const ContributorsList: FC<ContributorsListProps> = ({ contributorsData, showCon
     <>
       {contributorsData.map(({ name, href, key, contributions }, index) => (
         <Link key={key || href} href={href} className={cx({ [styles.contributor]: index < lastIndex })}>
-          {`${name}${showContributionAmount ? ` (${contributions})` : ''}`}
+          {`${name}${showContributionAmount ? ` (${contributions})` : ""}`}
         </Link>
       ))}
     </>
diff --git a/src/components/github-contributors-list/contributors.module.scss b/src/components/github-contributors-list/contributors.module.scss
index d89babd..3099094 100644
--- a/src/components/github-contributors-list/contributors.module.scss
+++ b/src/components/github-contributors-list/contributors.module.scss
@@ -1,6 +1,6 @@
-@import '../../../src/styles/mixins/typography';
+@import "../../../src/styles/mixins/typography";
 
 .contributor::after {
   @include sb-small-text;
-  content: ',';
+  content: ",";
 }
diff --git a/src/components/github-contributors-list/github-contributors-list.tsx b/src/components/github-contributors-list/github-contributors-list.tsx
index 9ddee1e..7b6effb 100644
--- a/src/components/github-contributors-list/github-contributors-list.tsx
+++ b/src/components/github-contributors-list/github-contributors-list.tsx
@@ -1,8 +1,8 @@
-import { FC, useEffect, useMemo, useState } from 'react';
-import ContributorsList from './contributors-list';
-import Paragraph from '../../../src/components/paragraph/paragraph';
-import { fetchAllContributors } from './github-contributors-utils';
-import { GithubContributor, GithubContributorResponse } from './github-contributors-types';
+import { FC, useEffect, useMemo, useState } from "react";
+import ContributorsList from "./contributors-list";
+import Paragraph from "../../../src/components/paragraph/paragraph";
+import { fetchAllContributors } from "./github-contributors-utils";
+import { GithubContributor, GithubContributorResponse } from "./github-contributors-types";
 
 interface GithubContributorsListProps {
   organizationName: string;
@@ -18,7 +18,7 @@ const GithubContributorsList: FC<GithubContributorsListProps> = ({
   packageName,
   excludedContributorsIds = new Set(),
   staticContributors = [],
-  text = 'Thanks to all of our contributors: ',
+  text = "Thanks to all of our contributors: ",
   showContributionAmount = false,
 }) => {
   const [contributorsJson, setContributorsJson] = useState<GithubContributorResponse[]>([]);
diff --git a/src/components/github-contributors-list/github-contributors-utils.ts b/src/components/github-contributors-list/github-contributors-utils.ts
index 5c5f430..9ef805a 100644
--- a/src/components/github-contributors-list/github-contributors-utils.ts
+++ b/src/components/github-contributors-list/github-contributors-utils.ts
@@ -1,4 +1,4 @@
-import { GithubContributorResponse } from './github-contributors-types';
+import { GithubContributorResponse } from "./github-contributors-types";
 
 export async function fetchContributors(
   organizationName: string,
@@ -9,20 +9,20 @@ export async function fetchContributors(
     const request = await fetch(
       `https://api.github.com/repos/${organizationName}/${packageName}/contributors?per_page=100&page=${page}&order=desc`,
       {
-        method: 'GET',
+        method: "GET",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
       },
     );
 
     const contributors = await request.json();
     if (!contributors || !Array.isArray(contributors)) {
-      throw new Error('Unexpected API response, contributors = ', contributors);
+      throw new Error("Unexpected API response, contributors = ", contributors);
     }
     return contributors;
   } catch (e) {
-    console.error('Error while loading Github contributors, page ', page, ' - ', e);
+    console.error("Error while loading Github contributors, page ", page, " - ", e);
     return [];
   }
 }
diff --git a/src/components/index.ts b/src/components/index.ts
index bcb1d12..b3c12cf 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,33 +1,33 @@
-export { default as AlphaWarning } from './alpha-warning/alpha-warning';
-export { default as AnchorListItem } from './anchor-list-item/anchor-list-item';
-export { default as ColorDescription } from './color-description/color-description';
-export { default as ComponentDescription } from './component-description/component-description';
-export { default as ComponentName } from './component-name/component-name';
-export { default as ComponentRules } from './component-rules/component-rules';
-export { default as DeprecatedWarning } from './deprecated-warning/deprecated-warning';
-export { default as DocFooter } from './doc-footer/doc-footer';
-export { default as Frame } from './frame/frame';
-export { default as FunctionArgument } from './function-arguments/function-argument';
-export { default as FunctionArguments } from './function-arguments/function-arguments';
-export { default as ContributorsList } from './github-contributors-list/contributors-list';
-export { default as GithubContributorsList } from './github-contributors-list/github-contributors-list';
-export { default as InformationBox } from './information-box/information-box';
-export { default as InformationBoxTitle } from './information-box-title/information-box-title';
-export { default as Link } from './link/link';
-export { default as LinkComponent } from './link-component/link-component';
-export { default as MultipleStoryElementsWrapper } from './multiple-story-elements-wrapper/multiple-story-elements-wrapper';
-export { default as Paragraph } from './paragraph/paragraph';
-export { default as RelatedComponent } from './related-component/related-component';
-export { default as RelatedComponents } from './related-components/related-components';
-export { default as SectionName } from './section-name/section-name';
-export { default as StatusTag } from './status-tag/status-tag';
-export { default as SidebarItem } from './sidebar-item/sidebar-item';
-export { default as StorybookLink } from './storybook-link/storybook-link';
-export { default as StoryDescription } from './story-description/story-description';
-export { default as Tip } from './tip/tip';
-export { default as Title } from './title/title';
-export { default as TokenTable } from './token-table/token-table';
-export { default as UnstyledList } from './unstyled-list/unstyled-list';
-export { default as UnstyledListItem } from './unstyled-list-item/unstyled-list-item';
-export { default as UsageGuidelines } from './usage-guidelines/usage-guidelines';
-export { default as VisualDescription } from './visual-description/visual-description';
+export { default as AlphaWarning } from "./alpha-warning/alpha-warning";
+export { default as AnchorListItem } from "./anchor-list-item/anchor-list-item";
+export { default as ColorDescription } from "./color-description/color-description";
+export { default as ComponentDescription } from "./component-description/component-description";
+export { default as ComponentName } from "./component-name/component-name";
+export { default as ComponentRules } from "./component-rules/component-rules";
+export { default as DeprecatedWarning } from "./deprecated-warning/deprecated-warning";
+export { default as DocFooter } from "./doc-footer/doc-footer";
+export { default as Frame } from "./frame/frame";
+export { default as FunctionArgument } from "./function-arguments/function-argument";
+export { default as FunctionArguments } from "./function-arguments/function-arguments";
+export { default as ContributorsList } from "./github-contributors-list/contributors-list";
+export { default as GithubContributorsList } from "./github-contributors-list/github-contributors-list";
+export { default as InformationBox } from "./information-box/information-box";
+export { default as InformationBoxTitle } from "./information-box-title/information-box-title";
+export { default as Link } from "./link/link";
+export { default as LinkComponent } from "./link-component/link-component";
+export { default as MultipleStoryElementsWrapper } from "./multiple-story-elements-wrapper/multiple-story-elements-wrapper";
+export { default as Paragraph } from "./paragraph/paragraph";
+export { default as RelatedComponent } from "./related-component/related-component";
+export { default as RelatedComponents } from "./related-components/related-components";
+export { default as SectionName } from "./section-name/section-name";
+export { default as StatusTag } from "./status-tag/status-tag";
+export { default as SidebarItem } from "./sidebar-item/sidebar-item";
+export { default as StorybookLink } from "./storybook-link/storybook-link";
+export { default as StoryDescription } from "./story-description/story-description";
+export { default as Tip } from "./tip/tip";
+export { default as Title } from "./title/title";
+export { default as TokenTable } from "./token-table/token-table";
+export { default as UnstyledList } from "./unstyled-list/unstyled-list";
+export { default as UnstyledListItem } from "./unstyled-list-item/unstyled-list-item";
+export { default as UsageGuidelines } from "./usage-guidelines/usage-guidelines";
+export { default as VisualDescription } from "./visual-description/visual-description";
diff --git a/src/components/information-box-title/information-box-title.module.scss b/src/components/information-box-title/information-box-title.module.scss
index ab78af3..f1bf106 100644
--- a/src/components/information-box-title/information-box-title.module.scss
+++ b/src/components/information-box-title/information-box-title.module.scss
@@ -1,6 +1,6 @@
 @import "../../styles/mixins/typography";
 
-.informationBoxTitle{
+.informationBoxTitle {
   @include sb-content-text-without-color;
   font-weight: bold;
   margin-bottom: var(--sb-spacing-xs);
diff --git a/src/components/information-box-title/information-box-title.tsx b/src/components/information-box-title/information-box-title.tsx
index 03f884b..3167ea5 100644
--- a/src/components/information-box-title/information-box-title.tsx
+++ b/src/components/information-box-title/information-box-title.tsx
@@ -1,9 +1,9 @@
-import { FC } from 'react';
-import cx from 'classnames';
-import { ElementContent, withStaticProps } from '../../types';
-import Link from '../link/link';
-import { LinkTarget } from '../link/LinkConstants';
-import styles from './information-box-title.module.scss';
+import { FC } from "react";
+import cx from "classnames";
+import { ElementContent, withStaticProps } from "../../types";
+import Link from "../link/link";
+import { LinkTarget } from "../link/LinkConstants";
+import styles from "./information-box-title.module.scss";
 
 type InformationBoxTitleProps = {
   children: ElementContent;
@@ -16,7 +16,7 @@ const InformationBoxTitle: FC<InformationBoxTitleProps> & { linkTargets?: typeof
   href,
   linkTarget,
 }) => {
-  return href && typeof children === 'string' ? (
+  return href && typeof children === "string" ? (
     <Link className={cx(styles.informationBoxTitle)} href={href} withoutSpacing target={linkTarget}>
       {children}
     </Link>
diff --git a/src/components/information-box/__stories__/information-box.stories.tsx b/src/components/information-box/__stories__/information-box.stories.tsx
index f11dc67..aaa4248 100644
--- a/src/components/information-box/__stories__/information-box.stories.tsx
+++ b/src/components/information-box/__stories__/information-box.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import InformationBox from '../information-box';
+import type { Meta, StoryObj } from "@storybook/react";
+import InformationBox from "../information-box";
 
 const meta: Meta<typeof InformationBox> = {
   component: InformationBox,
-  title: 'Components/InformationBox',
+  title: "Components/InformationBox",
 };
 export default meta;
 
@@ -11,9 +11,9 @@ type Story = StoryObj<typeof InformationBox>;
 
 export const Overview: Story = {
   args: {
-    title: 'Title',
+    title: "Title",
     component: <img src="/visual-description.png" alt="Example Image" width={100} />,
-    description: 'This is a description.',
-    href: '/?path=/docs/welcome--docs',
+    description: "This is a description.",
+    href: "/?path=/docs/welcome--docs",
   },
 };
diff --git a/src/components/information-box/information-box.module.scss b/src/components/information-box/information-box.module.scss
index f656fa4..1364011 100644
--- a/src/components/information-box/information-box.module.scss
+++ b/src/components/information-box/information-box.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins/typography';
+@import "../../styles/mixins/typography";
 
 .informationBox {
   .component {
diff --git a/src/components/information-box/information-box.tsx b/src/components/information-box/information-box.tsx
index 62091ff..3b708cf 100644
--- a/src/components/information-box/information-box.tsx
+++ b/src/components/information-box/information-box.tsx
@@ -1,8 +1,8 @@
-import { FC } from 'react';
-import InformationBoxTitle from '../information-box-title/information-box-title';
-import { ElementContent, withStaticProps } from '../../types';
-import { LinkTarget } from '../link/LinkConstants';
-import styles from './information-box.module.scss';
+import { FC } from "react";
+import InformationBoxTitle from "../information-box-title/information-box-title";
+import { ElementContent, withStaticProps } from "../../types";
+import { LinkTarget } from "../link/LinkConstants";
+import styles from "./information-box.module.scss";
 
 type InformationBoxProps = {
   component?: ElementContent;
@@ -14,13 +14,13 @@ type InformationBoxProps = {
 
 const InformationBox: FC<InformationBoxProps> & { linkTargets?: typeof LinkTarget } = ({
   component = null,
-  title = '',
-  description = '',
+  title = "",
+  description = "",
   href,
   linkTarget,
 }) => {
   const overrideTitle =
-    typeof title === 'string' ? (
+    typeof title === "string" ? (
       <InformationBoxTitle href={href} linkTarget={linkTarget}>
         {title}
       </InformationBoxTitle>
diff --git a/src/components/link-component/link-component.jsx b/src/components/link-component/link-component.jsx
index 64b8423..e9958d6 100644
--- a/src/components/link-component/link-component.jsx
+++ b/src/components/link-component/link-component.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const LinkComponent = ({ children, href, target: originalTarget, rel }) => {
   const onClick = event => {
@@ -16,7 +16,7 @@ const LinkComponent = ({ children, href, target: originalTarget, rel }) => {
 
   return (
     <a
-      style={{ color: 'var(--sb-link-color)', textDecoration: 'none' }}
+      style={{ color: "var(--sb-link-color)", textDecoration: "none" }}
       onClick={onClick}
       target={originalTarget}
       rel={rel}
diff --git a/src/components/link/LinkConstants.ts b/src/components/link/LinkConstants.ts
index 256a7e9..b0e10e9 100644
--- a/src/components/link/LinkConstants.ts
+++ b/src/components/link/LinkConstants.ts
@@ -1,11 +1,11 @@
 export enum LinkSize {
-  SMALL = 'small',
-  MEDIUM = 'medium',
+  SMALL = "small",
+  MEDIUM = "medium",
 }
 
 export enum LinkTarget {
-  NEW_WINDOW = '_blank',
-  SELF = '_self',
-  PARENT = '_parent',
-  TOP = '_top',
+  NEW_WINDOW = "_blank",
+  SELF = "_self",
+  PARENT = "_parent",
+  TOP = "_top",
 }
diff --git a/src/components/link/__stories__/link.stories.tsx b/src/components/link/__stories__/link.stories.tsx
index 8e38e59..5402132 100644
--- a/src/components/link/__stories__/link.stories.tsx
+++ b/src/components/link/__stories__/link.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Link from '../link';
+import type { Meta, StoryObj } from "@storybook/react";
+import Link from "../link";
 
 const meta: Meta<typeof Link> = {
   component: Link,
-  title: 'Components/Link',
+  title: "Components/Link",
 };
 export default meta;
 
@@ -11,8 +11,8 @@ type Story = StoryObj<typeof Link>;
 
 export const Overview: Story = {
   args: {
-    href: '/?path=/docs/welcome--docs',
+    href: "/?path=/docs/welcome--docs",
     size: Link.sizes.MEDIUM,
-    children: 'This is a link to welcome page',
+    children: "This is a link to welcome page",
   },
 };
diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
index 4434cbd..1c6a19b 100644
--- a/src/components/link/link.tsx
+++ b/src/components/link/link.tsx
@@ -1,9 +1,9 @@
-import { FC } from 'react';
-import cx from 'classnames';
-import CoreLink from '../../helpers/components/Link/Link';
-import { LinkSize, LinkTarget } from './LinkConstants';
-import { withStaticProps } from '../../types';
-import styles from './link.module.scss';
+import { FC } from "react";
+import cx from "classnames";
+import CoreLink from "../../helpers/components/Link/Link";
+import { LinkSize, LinkTarget } from "./LinkConstants";
+import { withStaticProps } from "../../types";
+import styles from "./link.module.scss";
 
 export type LinkProps = {
   className?: string;
diff --git a/src/components/multiple-story-elements-wrapper/multiple-story-elements-wrapper.tsx b/src/components/multiple-story-elements-wrapper/multiple-story-elements-wrapper.tsx
index 6d31115..35b3060 100644
--- a/src/components/multiple-story-elements-wrapper/multiple-story-elements-wrapper.tsx
+++ b/src/components/multiple-story-elements-wrapper/multiple-story-elements-wrapper.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react';
-import cx from 'classnames';
-import styles from './multiple-story-elements-wrapper.module.scss';
-import { ElementContent } from '../../types';
+import { FC } from "react";
+import cx from "classnames";
+import styles from "./multiple-story-elements-wrapper.module.scss";
+import { ElementContent } from "../../types";
 
 type MultipleStoryElementsWrapperProps = {
   className: string;
diff --git a/src/components/paragraph/__stories__/paragraph.stories.tsx b/src/components/paragraph/__stories__/paragraph.stories.tsx
index 6f07cd1..aed0e38 100644
--- a/src/components/paragraph/__stories__/paragraph.stories.tsx
+++ b/src/components/paragraph/__stories__/paragraph.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Paragraph from '../paragraph';
+import type { Meta, StoryObj } from "@storybook/react";
+import Paragraph from "../paragraph";
 
 const meta: Meta<typeof Paragraph> = {
   component: Paragraph,
-  title: 'Components/Paragraph',
+  title: "Components/Paragraph",
 };
 export default meta;
 
@@ -11,6 +11,6 @@ type Story = StoryObj<typeof Paragraph>;
 
 export const Overview: Story = {
   args: {
-    children: 'This is a paragraph',
+    children: "This is a paragraph",
   },
 };
diff --git a/src/components/paragraph/paragraph.tsx b/src/components/paragraph/paragraph.tsx
index ec1156d..035fb5b 100644
--- a/src/components/paragraph/paragraph.tsx
+++ b/src/components/paragraph/paragraph.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react';
-import cx from 'classnames';
-import { ElementContent } from '../../types';
-import './paragraph.module.scss';
+import { FC } from "react";
+import cx from "classnames";
+import { ElementContent } from "../../types";
+import "./paragraph.module.scss";
 
 type ParagraphProps = {
   children: ElementContent;
@@ -9,7 +9,7 @@ type ParagraphProps = {
 };
 
 const Paragraph: FC<ParagraphProps> = ({ children, className }) => (
-  <p className={cx('vibe-sb-comps-paragraph', className)}>{children}</p>
+  <p className={cx("vibe-sb-comps-paragraph", className)}>{children}</p>
 );
 
 export default Paragraph;
diff --git a/src/components/related-component/related-component.tsx b/src/components/related-component/related-component.tsx
index e587dda..d4f2b9b 100644
--- a/src/components/related-component/related-component.tsx
+++ b/src/components/related-component/related-component.tsx
@@ -1,9 +1,9 @@
-import React, { useContext } from 'react';
-import InformationBox from '../information-box/information-box';
-import { LinkTarget } from '../link/LinkConstants';
-import { ElementContent, withStaticProps } from '../../types';
-import { RelatedComponentsContext } from '../related-components/related-components-context';
-import styles from './related-component.module.scss';
+import React, { useContext } from "react";
+import InformationBox from "../information-box/information-box";
+import { LinkTarget } from "../link/LinkConstants";
+import { ElementContent, withStaticProps } from "../../types";
+import { RelatedComponentsContext } from "../related-components/related-components-context";
+import styles from "./related-component.module.scss";
 
 interface RelatedComponentProps {
   component?: ElementContent;
@@ -15,8 +15,8 @@ interface RelatedComponentProps {
 
 const RelatedComponent: React.FC<RelatedComponentProps> & { linkTargets?: typeof LinkTarget } = ({
   component,
-  title = '',
-  description = '',
+  title = "",
+  description = "",
   href,
   linkTarget,
 }) => {
diff --git a/src/components/related-components/related-components-context.ts b/src/components/related-components/related-components-context.ts
index 7df2979..4b9c391 100644
--- a/src/components/related-components/related-components-context.ts
+++ b/src/components/related-components/related-components-context.ts
@@ -1,5 +1,5 @@
-import React from 'react';
-import { LinkTarget } from '../link/LinkConstants';
+import React from "react";
+import { LinkTarget } from "../link/LinkConstants";
 
 type RelatedComponentsContextType = {
   linkTarget?: LinkTarget;
diff --git a/src/components/related-components/related-components.module.scss b/src/components/related-components/related-components.module.scss
index efe2664..987f8c6 100644
--- a/src/components/related-components/related-components.module.scss
+++ b/src/components/related-components/related-components.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins/layout';
+@import "../../styles/mixins/layout";
 
 $related-components-grid-gap: var(--sb-spacing-large);
 $related-components-cell-min-width: $sb-grid-auto-fit-cell-width-medium;
diff --git a/src/components/related-components/related-components.tsx b/src/components/related-components/related-components.tsx
index 2ef8bce..81cf0f1 100644
--- a/src/components/related-components/related-components.tsx
+++ b/src/components/related-components/related-components.tsx
@@ -1,8 +1,8 @@
-import React, { useMemo } from 'react';
-import { LinkTarget } from '../link/LinkConstants';
-import { withStaticProps } from '../../types';
-import { RelatedComponentsContext } from './related-components-context';
-import styles from './related-components.module.scss';
+import React, { useMemo } from "react";
+import { LinkTarget } from "../link/LinkConstants";
+import { withStaticProps } from "../../types";
+import { RelatedComponentsContext } from "./related-components-context";
+import styles from "./related-components.module.scss";
 
 interface RelatedComponentsProps {
   componentsNames: string[];
diff --git a/src/components/section-name/__stories__/section-name.stories.tsx b/src/components/section-name/__stories__/section-name.stories.tsx
index b9c3798..e321498 100644
--- a/src/components/section-name/__stories__/section-name.stories.tsx
+++ b/src/components/section-name/__stories__/section-name.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import SectionName from '../section-name';
+import type { Meta, StoryObj } from "@storybook/react";
+import SectionName from "../section-name";
 
 const meta: Meta<typeof SectionName> = {
   component: SectionName,
-  title: 'Components/SectionName',
+  title: "Components/SectionName",
 };
 export default meta;
 
@@ -11,6 +11,6 @@ type Story = StoryObj<typeof SectionName>;
 
 export const Overview: Story = {
   args: {
-    children: 'This is a section name',
+    children: "This is a section name",
   },
 };
diff --git a/src/components/section-name/section-name.tsx b/src/components/section-name/section-name.tsx
index 44972d9..b24d6fb 100644
--- a/src/components/section-name/section-name.tsx
+++ b/src/components/section-name/section-name.tsx
@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
-import cx from 'classnames';
-import styles from './section-name.module.scss';
+import React, { useMemo } from "react";
+import cx from "classnames";
+import styles from "./section-name.module.scss";
 
 interface SectionNameProps extends React.HTMLAttributes<HTMLHeadingElement> {
   className?: string;
@@ -9,7 +9,7 @@ interface SectionNameProps extends React.HTMLAttributes<HTMLHeadingElement> {
 
 const SectionName: React.FC<SectionNameProps> = ({ className, children, ...props }) => {
   const id = useMemo(
-    () => children.toLowerCase().replaceAll('’', '').replaceAll("'", '').split(' ').join('-'),
+    () => children.toLowerCase().replaceAll("’", "").replaceAll("'", "").split(" ").join("-"),
     [children],
   );
 
diff --git a/src/components/sidebar-item/__stories__/sidebar-item.stories.tsx b/src/components/sidebar-item/__stories__/sidebar-item.stories.tsx
index 72f2cd5..24fa0a6 100644
--- a/src/components/sidebar-item/__stories__/sidebar-item.stories.tsx
+++ b/src/components/sidebar-item/__stories__/sidebar-item.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import SidebarItem from '../sidebar-item';
+import type { Meta, StoryObj } from "@storybook/react";
+import SidebarItem from "../sidebar-item";
 
 const meta: Meta<typeof SidebarItem> = {
   component: SidebarItem,
-  title: 'Components/SidebarItem',
+  title: "Components/SidebarItem",
 };
 export default meta;
 
@@ -11,7 +11,7 @@ type Story = StoryObj<typeof SidebarItem>;
 
 export const Overview: Story = {
   args: {
-    status: 'beta',
-    children: 'Sidebar Item',
+    status: "beta",
+    children: "Sidebar Item",
   },
 };
diff --git a/src/components/sidebar-item/sidebar-item.tsx b/src/components/sidebar-item/sidebar-item.tsx
index 3b7a5b6..30a04e5 100644
--- a/src/components/sidebar-item/sidebar-item.tsx
+++ b/src/components/sidebar-item/sidebar-item.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import StatusTag from '../status-tag/status-tag';
-import { type StatusTagType } from '../status-tag/status-tag';
-import Flex from '../../../src/helpers/components/Flex/Flex';
-import { ElementContent } from '../../types';
-import styles from './sidebar-item.module.scss';
+import React from "react";
+import StatusTag from "../status-tag/status-tag";
+import { type StatusTagType } from "../status-tag/status-tag";
+import Flex from "../../../src/helpers/components/Flex/Flex";
+import { ElementContent } from "../../types";
+import styles from "./sidebar-item.module.scss";
 
 interface SidebarItemProps {
   children: ElementContent;
diff --git a/src/components/status-tag/__stories__/status-tag.stories.tsx b/src/components/status-tag/__stories__/status-tag.stories.tsx
index 17138c2..c261108 100644
--- a/src/components/status-tag/__stories__/status-tag.stories.tsx
+++ b/src/components/status-tag/__stories__/status-tag.stories.tsx
@@ -1,10 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import StatusTag from '../status-tag';
-import Flex from '../../../helpers/components/Flex/Flex';
+import type { Meta, StoryObj } from "@storybook/react";
+import StatusTag from "../status-tag";
+import Flex from "../../../helpers/components/Flex/Flex";
 
 const meta: Meta<typeof StatusTag> = {
   component: StatusTag,
-  title: 'Components/StatusTag',
+  title: "Components/StatusTag",
 };
 export default meta;
 
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof StatusTag>;
 
 export const Overview: Story = {
   args: {
-    type: 'beta',
+    type: "beta",
   },
 };
 
diff --git a/src/components/status-tag/status-tag.module.scss b/src/components/status-tag/status-tag.module.scss
index 130c17f..78b99b8 100644
--- a/src/components/status-tag/status-tag.module.scss
+++ b/src/components/status-tag/status-tag.module.scss
@@ -14,7 +14,7 @@
     border-color: var(--sb-negative-color);
   }
 
-  [data-selected='true'] & {
+  [data-selected="true"] & {
     color: var(--sb-text-color-on-primary);
     border-color: var(--sb-text-color-on-primary);
   }
diff --git a/src/components/status-tag/status-tag.tsx b/src/components/status-tag/status-tag.tsx
index 58fc8a5..c2b2362 100644
--- a/src/components/status-tag/status-tag.tsx
+++ b/src/components/status-tag/status-tag.tsx
@@ -1,8 +1,8 @@
-import { FC } from 'react';
-import styles from './status-tag.module.scss';
-import cx from 'classnames';
+import { FC } from "react";
+import styles from "./status-tag.module.scss";
+import cx from "classnames";
 
-export type StatusTagType = 'beta' | 'deprecated';
+export type StatusTagType = "beta" | "deprecated";
 
 interface StatusTagProps {
   type: StatusTagType;
diff --git a/src/components/story-description/__stories__/story-description.stories.tsx b/src/components/story-description/__stories__/story-description.stories.tsx
index d2d96d6..63d4dfd 100644
--- a/src/components/story-description/__stories__/story-description.stories.tsx
+++ b/src/components/story-description/__stories__/story-description.stories.tsx
@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import StoryDescription from '../story-description';
-import StatusTag from '../../status-tag/status-tag';
-import { FlexJustify } from '../../../helpers/components/Flex/FlexConstants';
+import type { Meta, StoryObj } from "@storybook/react";
+import StoryDescription from "../story-description";
+import StatusTag from "../../status-tag/status-tag";
+import { FlexJustify } from "../../../helpers/components/Flex/FlexConstants";
 
 const meta: Meta<typeof StoryDescription> = {
   component: StoryDescription,
-  title: 'Components/StoryDescription',
+  title: "Components/StoryDescription",
 };
 export default meta;
 
@@ -13,7 +13,7 @@ type Story = StoryObj<typeof StoryDescription>;
 
 export const Overview: Story = {
   args: {
-    description: 'Deprecated',
+    description: "Deprecated",
     children: <StatusTag type="deprecated" />,
     justify: FlexJustify.CENTER,
   },
diff --git a/src/components/story-description/story-description.module.scss b/src/components/story-description/story-description.module.scss
index f1646f2..94bf07d 100644
--- a/src/components/story-description/story-description.module.scss
+++ b/src/components/story-description/story-description.module.scss
@@ -4,4 +4,4 @@
   &.vertical {
     text-align: center;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/story-description/story-description.tsx b/src/components/story-description/story-description.tsx
index dcfda0f..7fddf38 100644
--- a/src/components/story-description/story-description.tsx
+++ b/src/components/story-description/story-description.tsx
@@ -1,9 +1,9 @@
-import React, { FC, useMemo } from 'react';
-import cx from 'classnames';
-import { ElementContent, withStaticProps } from '../../types';
-import { FlexAlign, FlexDirection, FlexGap, FlexJustify } from '../../helpers/components/Flex/FlexConstants';
-import Flex from '../../helpers/components/Flex/Flex';
-import styles from './story-description.module.scss';
+import React, { FC, useMemo } from "react";
+import cx from "classnames";
+import { ElementContent, withStaticProps } from "../../types";
+import { FlexAlign, FlexDirection, FlexGap, FlexJustify } from "../../helpers/components/Flex/FlexConstants";
+import Flex from "../../helpers/components/Flex/Flex";
+import styles from "./story-description.module.scss";
 
 type StoryDescriptionProps = {
   align?: FlexAlign;
@@ -23,7 +23,7 @@ const StoryDescription: FC<StoryDescriptionProps> & {
   gaps?: typeof FlexGap;
   directions?: typeof FlexDirection;
 } = ({
-  description = '',
+  description = "",
   headerStyle,
   children,
   vertical = false,
@@ -48,7 +48,7 @@ const StoryDescription: FC<StoryDescriptionProps> & {
     >
       <Flex
         className={cx(styles.description, { [styles.vertical]: vertical })}
-        style={{ width: '120px', ...headerStyle }}
+        style={{ width: "120px", ...headerStyle }}
         justify={headerJustify}
         align={headerAlign || StoryDescription.align?.CENTER}
       >
diff --git a/src/components/storybook-link/__stories__/storybook-link.stories.tsx b/src/components/storybook-link/__stories__/storybook-link.stories.tsx
index b3d2e16..e0456b2 100644
--- a/src/components/storybook-link/__stories__/storybook-link.stories.tsx
+++ b/src/components/storybook-link/__stories__/storybook-link.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import StorybookLink from '../storybook-link';
+import type { Meta, StoryObj } from "@storybook/react";
+import StorybookLink from "../storybook-link";
 
 const meta: Meta<typeof StorybookLink> = {
   component: StorybookLink,
-  title: 'Components/StorybookLink',
+  title: "Components/StorybookLink",
 };
 export default meta;
 
@@ -11,7 +11,7 @@ type Story = StoryObj<typeof StorybookLink>;
 
 export const Overview: Story = {
   args: {
-    page: 'Components/Paragraph',
+    page: "Components/Paragraph",
     children: 'Navigate to "Paragraph"',
   },
 };
diff --git a/src/components/storybook-link/storybook-link.tsx b/src/components/storybook-link/storybook-link.tsx
index b3b9b0b..811f2e3 100644
--- a/src/components/storybook-link/storybook-link.tsx
+++ b/src/components/storybook-link/storybook-link.tsx
@@ -1,8 +1,8 @@
-import { FC, useEffect, useState } from 'react';
-import Link from '../link/link';
-import { hrefTo } from '@storybook/addon-links';
-import { LinkSize } from '../link/LinkConstants';
-import { withStaticProps } from '../../types';
+import { FC, useEffect, useState } from "react";
+import Link from "../link/link";
+import { hrefTo } from "@storybook/addon-links";
+import { LinkSize } from "../link/LinkConstants";
+import { withStaticProps } from "../../types";
 
 interface StorybookLinkProps {
   page: string;
@@ -11,8 +11,8 @@ interface StorybookLinkProps {
   size?: LinkSize;
 }
 
-const StorybookLink: FC<StorybookLinkProps> & { sizes?: typeof LinkSize } = ({ page, story = '', children, size }) => {
-  const [url, setUrl] = useState('');
+const StorybookLink: FC<StorybookLinkProps> & { sizes?: typeof LinkSize } = ({ page, story = "", children, size }) => {
+  const [url, setUrl] = useState("");
 
   useEffect(() => {
     fetchLink();
diff --git a/src/components/tip/__stories__/tip.stories.tsx b/src/components/tip/__stories__/tip.stories.tsx
index dbd814a..a8dd07c 100644
--- a/src/components/tip/__stories__/tip.stories.tsx
+++ b/src/components/tip/__stories__/tip.stories.tsx
@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Tip from '../tip';
-import Flex from '../../../helpers/components/Flex/Flex';
-import Link from '../../../helpers/components/Link/Link';
+import type { Meta, StoryObj } from "@storybook/react";
+import Tip from "../tip";
+import Flex from "../../../helpers/components/Flex/Flex";
+import Link from "../../../helpers/components/Link/Link";
 
 const meta: Meta<typeof Tip> = {
   component: Tip,
-  title: 'Components/Tip',
+  title: "Components/Tip",
 };
 export default meta;
 
@@ -24,9 +24,9 @@ export const Overview: Story = {
 
 export const Emoji: Story = {
   args: {
-    title: 'Completed',
-    children: 'This tip shows some helpful information.',
-    emoji: '✅',
+    title: "Completed",
+    children: "This tip shows some helpful information.",
+    emoji: "✅",
   },
 };
 
diff --git a/src/components/tip/tip.tsx b/src/components/tip/tip.tsx
index 4696e02..9b23603 100644
--- a/src/components/tip/tip.tsx
+++ b/src/components/tip/tip.tsx
@@ -1,9 +1,9 @@
-import cx from 'classnames';
-import React from 'react';
-import Flex from '../../helpers/components/Flex/Flex';
-import { ElementContent, withStaticProps } from '../../types';
-import { TipTypes } from './tipConstants';
-import styles from './tip.module.scss';
+import cx from "classnames";
+import React from "react";
+import Flex from "../../helpers/components/Flex/Flex";
+import { ElementContent, withStaticProps } from "../../types";
+import { TipTypes } from "./tipConstants";
+import styles from "./tip.module.scss";
 
 interface TipProps {
   children: ElementContent;
@@ -14,7 +14,7 @@ interface TipProps {
 
 const Tip: React.FC<TipProps> & {
   types?: typeof TipTypes;
-} = ({ title = 'Tip', children, emoji = '🤓', type = TipTypes.DARK }) => {
+} = ({ title = "Tip", children, emoji = "🤓", type = TipTypes.DARK }) => {
   return (
     <div className={cx(styles.tip, styles[type])}>
       <div className={styles.title}>
diff --git a/src/components/tip/tipConstants.ts b/src/components/tip/tipConstants.ts
index 26bdc57..a5689d3 100644
--- a/src/components/tip/tipConstants.ts
+++ b/src/components/tip/tipConstants.ts
@@ -1,7 +1,7 @@
 export enum TipTypes {
-  PRIMARY = 'primary',
-  SUCCESS = 'success',
-  DANGER = 'danger',
-  DARK = 'dark',
-  WARNING = 'warning',
+  PRIMARY = "primary",
+  SUCCESS = "success",
+  DANGER = "danger",
+  DARK = "dark",
+  WARNING = "warning",
 }
diff --git a/src/components/title/__stories__/title.stories.tsx b/src/components/title/__stories__/title.stories.tsx
index 4257590..9a066d7 100644
--- a/src/components/title/__stories__/title.stories.tsx
+++ b/src/components/title/__stories__/title.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Title from '../title';
+import type { Meta, StoryObj } from "@storybook/react";
+import Title from "../title";
 
 const meta: Meta<typeof Title> = {
   component: Title,
-  title: 'Components/Title',
+  title: "Components/Title",
 };
 export default meta;
 
@@ -11,6 +11,6 @@ type Story = StoryObj<typeof Title>;
 
 export const Overview: Story = {
   args: {
-    children: 'This is a story title',
+    children: "This is a story title",
   },
 };
diff --git a/src/components/title/title.tsx b/src/components/title/title.tsx
index 589d73e..cc7a9cb 100644
--- a/src/components/title/title.tsx
+++ b/src/components/title/title.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import cx from 'classnames';
-import styles from './title.module.scss';
+import React from "react";
+import cx from "classnames";
+import styles from "./title.module.scss";
 
 interface TitleProps extends React.HTMLProps<HTMLHeadingElement> {
   className?: string;
diff --git a/src/components/token-table/__stories__/token-table.stories.tsx b/src/components/token-table/__stories__/token-table.stories.tsx
index 0f5e71c..5f6cfc6 100644
--- a/src/components/token-table/__stories__/token-table.stories.tsx
+++ b/src/components/token-table/__stories__/token-table.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import TokenTable from '../token-table';
+import type { Meta, StoryObj } from "@storybook/react";
+import TokenTable from "../token-table";
 
 const meta: Meta<typeof TokenTable> = {
   component: TokenTable,
-  title: 'Components/TokenTable',
+  title: "Components/TokenTable",
 };
 export default meta;
 
@@ -11,10 +11,10 @@ type Story = StoryObj<typeof TokenTable>;
 
 export const Overview: Story = {
   args: {
-    theadData: ['Token', 'Value'],
+    theadData: ["Token", "Value"],
     tbodyData: [
-      { id: '1', items: ['--token-1', '#111'] },
-      { id: '2', items: ['--token-2', '#222'] },
+      { id: "1", items: ["--token-1", "#111"] },
+      { id: "2", items: ["--token-2", "#222"] },
     ],
   },
 };
diff --git a/src/components/token-table/token-table-head-item.tsx b/src/components/token-table/token-table-head-item.tsx
index 037f479..07833d8 100644
--- a/src/components/token-table/token-table-head-item.tsx
+++ b/src/components/token-table/token-table-head-item.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC } from "react";
 
 type TableHeadItemProps = {
   item: string;
diff --git a/src/components/token-table/token-table-row.tsx b/src/components/token-table/token-table-row.tsx
index 491a0a8..22c6071 100644
--- a/src/components/token-table/token-table-row.tsx
+++ b/src/components/token-table/token-table-row.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC } from "react";
 
 type TableRowProps = {
   data: string[];
diff --git a/src/components/token-table/token-table.tsx b/src/components/token-table/token-table.tsx
index 8bbdfa4..de4a32b 100644
--- a/src/components/token-table/token-table.tsx
+++ b/src/components/token-table/token-table.tsx
@@ -1,7 +1,7 @@
-import { FC } from 'react';
-import TableRow from './token-table-row';
-import TableHeadItem from './token-table-head-item';
-import styles from './token-table.module.scss';
+import { FC } from "react";
+import TableRow from "./token-table-row";
+import TableHeadItem from "./token-table-head-item";
+import styles from "./token-table.module.scss";
 
 type TableBody = {
   id: string;
diff --git a/src/components/unstyled-list-item/unstyled-list-item.tsx b/src/components/unstyled-list-item/unstyled-list-item.tsx
index eebeac5..7c4fd58 100644
--- a/src/components/unstyled-list-item/unstyled-list-item.tsx
+++ b/src/components/unstyled-list-item/unstyled-list-item.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import styles from './unstyled-list-item.module.scss';
+import React from "react";
+import styles from "./unstyled-list-item.module.scss";
 
 interface UnstyledListItemProps {
   children?: React.ReactNode;
diff --git a/src/components/unstyled-list/__stories__/unstyled-list.stories.tsx b/src/components/unstyled-list/__stories__/unstyled-list.stories.tsx
index 41206b4..b74c620 100644
--- a/src/components/unstyled-list/__stories__/unstyled-list.stories.tsx
+++ b/src/components/unstyled-list/__stories__/unstyled-list.stories.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import UnstyledList from '../unstyled-list';
-import UnstyledListItem from '../../unstyled-list-item/unstyled-list-item';
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import UnstyledList from "../unstyled-list";
+import UnstyledListItem from "../../unstyled-list-item/unstyled-list-item";
 
 const meta: Meta<typeof UnstyledList> = {
   component: UnstyledList,
-  title: 'Components/UnstyledList',
+  title: "Components/UnstyledList",
 };
 export default meta;
 
diff --git a/src/components/unstyled-list/unstyled-list.tsx b/src/components/unstyled-list/unstyled-list.tsx
index 8329c66..b73acff 100644
--- a/src/components/unstyled-list/unstyled-list.tsx
+++ b/src/components/unstyled-list/unstyled-list.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 interface UnstyledListProps {
   children?: React.ReactNode;
diff --git a/src/components/usage-guidelines/__stories__/usage-guidelines.stories.tsx b/src/components/usage-guidelines/__stories__/usage-guidelines.stories.tsx
index 0c70572..6c4c622 100644
--- a/src/components/usage-guidelines/__stories__/usage-guidelines.stories.tsx
+++ b/src/components/usage-guidelines/__stories__/usage-guidelines.stories.tsx
@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import UsageGuidelines from '../usage-guidelines';
-import Link from '../../link/link';
-import React from 'react';
+import type { Meta, StoryObj } from "@storybook/react";
+import UsageGuidelines from "../usage-guidelines";
+import Link from "../../link/link";
+import React from "react";
 
 const meta: Meta<typeof UsageGuidelines> = {
   component: UsageGuidelines,
-  title: 'Components/UsageGuidelines',
+  title: "Components/UsageGuidelines",
 };
 export default meta;
 
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof UsageGuidelines>;
 export const Overview: Story = {
   args: {
     guidelines: [
-      'Usage guideline #1',
+      "Usage guideline #1",
       <>
         <b>Usage guideline #2 - with JSX element</b>
       </>,
diff --git a/src/components/usage-guidelines/usage-guidelines.module.scss b/src/components/usage-guidelines/usage-guidelines.module.scss
index 5769adf..33c6913 100644
--- a/src/components/usage-guidelines/usage-guidelines.module.scss
+++ b/src/components/usage-guidelines/usage-guidelines.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/mixins/typography';
+@import "../../styles/mixins/typography";
 
 .usageGuideline {
   color: var(--sb-primary-text-color);
diff --git a/src/components/usage-guidelines/usage-guidelines.tsx b/src/components/usage-guidelines/usage-guidelines.tsx
index 6209d2f..68ab10b 100644
--- a/src/components/usage-guidelines/usage-guidelines.tsx
+++ b/src/components/usage-guidelines/usage-guidelines.tsx
@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
-import styles from './usage-guidelines.module.scss';
-import { ElementContent } from '../../types';
+import React, { useMemo } from "react";
+import styles from "./usage-guidelines.module.scss";
+import { ElementContent } from "../../types";
 
 interface UsageGuidelinesProps {
   guidelines: Array<ElementContent>;
diff --git a/src/components/visual-description/__stories__/visual-description.stories.tsx b/src/components/visual-description/__stories__/visual-description.stories.tsx
index 54b0ac3..a5b4973 100644
--- a/src/components/visual-description/__stories__/visual-description.stories.tsx
+++ b/src/components/visual-description/__stories__/visual-description.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import VisualDescription from '../visual-description';
+import type { Meta, StoryObj } from "@storybook/react";
+import VisualDescription from "../visual-description";
 
 const meta: Meta<typeof VisualDescription> = {
   component: VisualDescription,
-  title: 'Components/VisualDescription',
+  title: "Components/VisualDescription",
 };
 export default meta;
 
@@ -11,12 +11,12 @@ type Story = StoryObj<typeof VisualDescription>;
 
 export const Overview: Story = {
   args: {
-    title: 'Example Title',
-    ariaLabel: 'Example Visual Description',
+    title: "Example Title",
+    ariaLabel: "Example Visual Description",
     children: <img src="/visual-description.png" alt="Example Image" width={200} />,
-    description: 'This is an example visual description.',
+    description: "This is an example visual description.",
     code: 'const exampleCode = "Hello, world!";',
-    className: '',
-    visualDescriptionClassName: '',
+    className: "",
+    visualDescriptionClassName: "",
   },
 };
diff --git a/src/components/visual-description/visual-description.tsx b/src/components/visual-description/visual-description.tsx
index d4a8f92..4072c15 100644
--- a/src/components/visual-description/visual-description.tsx
+++ b/src/components/visual-description/visual-description.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import cx from 'classnames';
-import styles from './visual-description.module.scss';
+import React from "react";
+import cx from "classnames";
+import styles from "./visual-description.module.scss";
 
 interface VisualDescriptionProps {
   title: string;
diff --git a/src/decorators/index.ts b/src/decorators/index.ts
index 166deaf..56f9e23 100644
--- a/src/decorators/index.ts
+++ b/src/decorators/index.ts
@@ -1,4 +1,4 @@
-import { withMemoryStats } from './memory-stats';
-import { VerticalStories } from './vertical-stories';
+import { withMemoryStats } from "./memory-stats";
+import { VerticalStories } from "./vertical-stories";
 
 export { withMemoryStats, VerticalStories };
diff --git a/src/decorators/memory-stats.jsx b/src/decorators/memory-stats.jsx
index 2280709..a303899 100644
--- a/src/decorators/memory-stats.jsx
+++ b/src/decorators/memory-stats.jsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import { startMemoryStats, stopMemoryStats } from '../functions/memory-stats';
+import React from "react";
+import { startMemoryStats, stopMemoryStats } from "../functions/memory-stats";
 
 export function withMemoryStats(Story, options) {
   const {
     globals: { memoryStats },
   } = options;
-  if (memoryStats === 'yes') {
+  if (memoryStats === "yes") {
     startMemoryStats();
   } else {
     stopMemoryStats();
diff --git a/src/decorators/vertical-stories.jsx b/src/decorators/vertical-stories.jsx
index f71b418..f060af4 100644
--- a/src/decorators/vertical-stories.jsx
+++ b/src/decorators/vertical-stories.jsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
 
 export function VerticalStories(Story) {
   return (
     <div
       style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '50px',
-        width: '100%',
+        display: "flex",
+        flexDirection: "column",
+        gap: "50px",
+        width: "100%",
       }}
     >
       <Story />
diff --git a/src/functions/createComponentTemplate.tsx b/src/functions/createComponentTemplate.tsx
index 709733b..242994c 100644
--- a/src/functions/createComponentTemplate.tsx
+++ b/src/functions/createComponentTemplate.tsx
@@ -1,4 +1,4 @@
-import { ComponentType, ReactElement } from 'react';
+import { ComponentType, ReactElement } from "react";
 
 type ArgsType = {
   [key: string]: unknown;
diff --git a/src/functions/createStoryMetaSettings/createStoryMetaSettings.ts b/src/functions/createStoryMetaSettings/createStoryMetaSettings.ts
index 5bef6ea..ea7a14e 100644
--- a/src/functions/createStoryMetaSettings/createStoryMetaSettings.ts
+++ b/src/functions/createStoryMetaSettings/createStoryMetaSettings.ts
@@ -1,7 +1,7 @@
-import { useCallback, useMemo, useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { AllowedIcons, Decorator, IconMetaData, StoryMetaSettingsArgs, StoryMetaSettingsResult } from './types';
-import { ArgTypes } from '@storybook/types';
+import { useCallback, useMemo, useState } from "react";
+import { action } from "@storybook/addon-actions";
+import { AllowedIcons, Decorator, IconMetaData, StoryMetaSettingsArgs, StoryMetaSettingsResult } from "./types";
+import { ArgTypes } from "@storybook/types";
 
 function parseStringForEnums(componentName: string, enumName: string, enumObj: { [key: string]: unknown }) {
   let returnValue;
@@ -59,7 +59,7 @@ export function createStoryMetaSettings({
   const decorators: Decorator[] = [];
   const allowedIcons = iconsMetaData?.reduce(
     (acc: AllowedIcons, icon: IconMetaData) => {
-      const Component = allIconsComponents[icon.file.split('.')[0]];
+      const Component = allIconsComponents[icon.file.split(".")[0]];
       acc.options.push(icon.name);
       acc.mapping[icon.name] = Component;
 
@@ -103,13 +103,13 @@ export function createStoryMetaSettings({
       options: allowedIcons?.options,
       mapping: allowedIcons?.mapping,
       control: {
-        type: 'select',
+        type: "select",
       },
     };
   });
 
   actionPropsArray?.forEach(actionProp => {
-    if (typeof actionProp === 'string') {
+    if (typeof actionProp === "string") {
       argTypes[actionProp] = { action: actionProp, control: false };
     } else if (actionProp?.name && actionProp.linkedToPropValue) {
       // we assume that actionPropsArray is static. If it changes, things may break, since internally we call React.useState for the story decorator.
@@ -122,8 +122,8 @@ export function createStoryMetaSettings({
   if (componentProps) {
     Object.keys(componentProps)?.forEach(propName => {
       const prop = componentProps[propName];
-      if (prop?.type?.name === 'ElementContent') {
-        argTypes[propName] = { control: { type: 'text' } };
+      if (prop?.type?.name === "ElementContent") {
+        argTypes[propName] = { control: { type: "text" } };
       }
     });
   }
diff --git a/src/functions/createStoryMetaSettings/types.ts b/src/functions/createStoryMetaSettings/types.ts
index e09d01a..886af6d 100644
--- a/src/functions/createStoryMetaSettings/types.ts
+++ b/src/functions/createStoryMetaSettings/types.ts
@@ -1,4 +1,4 @@
-import { ArgTypes, PartialStoryFn, StoryContext } from '@storybook/types';
+import { ArgTypes, PartialStoryFn, StoryContext } from "@storybook/types";
 
 export type EnumPropNames = {
   propName: string;
diff --git a/src/functions/index.ts b/src/functions/index.ts
index 0c9c884..9158a7a 100644
--- a/src/functions/index.ts
+++ b/src/functions/index.ts
@@ -1,4 +1,4 @@
-import { createStoryMetaSettings } from './createStoryMetaSettings/createStoryMetaSettings';
-import { createComponentTemplate } from './createComponentTemplate';
+import { createStoryMetaSettings } from "./createStoryMetaSettings/createStoryMetaSettings";
+import { createComponentTemplate } from "./createComponentTemplate";
 
 export { createStoryMetaSettings, createComponentTemplate };
diff --git a/src/functions/memory-stats/index.js b/src/functions/memory-stats/index.js
index 7343adf..cb04366 100644
--- a/src/functions/memory-stats/index.js
+++ b/src/functions/memory-stats/index.js
@@ -1,4 +1,4 @@
-import MemoryStats from './memory-stats-lib';
+import MemoryStats from "./memory-stats-lib";
 
 let stats = null;
 
@@ -6,9 +6,9 @@ export function startMemoryStats() {
   if (!stats) {
     stats = new MemoryStats();
 
-    stats.domElement.style.position = 'fixed';
-    stats.domElement.style.right = '0px';
-    stats.domElement.style.bottom = '0px';
+    stats.domElement.style.position = "fixed";
+    stats.domElement.style.right = "0px";
+    stats.domElement.style.bottom = "0px";
 
     document.body.appendChild(stats.domElement);
 
diff --git a/src/functions/memory-stats/memory-stats-lib.js b/src/functions/memory-stats/memory-stats-lib.js
index 65f435d..73af500 100644
--- a/src/functions/memory-stats/memory-stats-lib.js
+++ b/src/functions/memory-stats/memory-stats-lib.js
@@ -11,30 +11,30 @@ const MemoryStats = function () {
   const GRAPH_HEIGHT = 30;
   let redrawMBThreshold = GRAPH_HEIGHT;
 
-  const container = document.createElement('div');
-  container.id = 'stats';
+  const container = document.createElement("div");
+  container.id = "stats";
   container.style.cssText =
-    'width:80px;height:48px;opacity:0.9;cursor:pointer;overflow:hidden;z-index:10000;will-change:transform;';
+    "width:80px;height:48px;opacity:0.9;cursor:pointer;overflow:hidden;z-index:10000;will-change:transform;";
 
-  const msDiv = document.createElement('div');
-  msDiv.id = 'ms';
-  msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;';
+  const msDiv = document.createElement("div");
+  msDiv.id = "ms";
+  msDiv.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;";
   container.appendChild(msDiv);
 
-  const msText = document.createElement('div');
-  msText.id = 'msText';
+  const msText = document.createElement("div");
+  msText.id = "msText";
   msText.style.cssText =
-    'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
-  msText.innerHTML = 'Memory';
+    "color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";
+  msText.innerHTML = "Memory";
   msDiv.appendChild(msText);
 
-  const msGraph = document.createElement('div');
-  msGraph.id = 'msGraph';
+  const msGraph = document.createElement("div");
+  msGraph.id = "msGraph";
   msGraph.style.cssText = `position:relative;width:74px;height:${GRAPH_HEIGHT}px;background-color:#0f0`;
   msDiv.appendChild(msGraph);
 
   while (msGraph.children.length < 74) {
-    const bar = document.createElement('span');
+    const bar = document.createElement("span");
     bar.style.cssText = `width:1px;height:${GRAPH_HEIGHT}px;float:left;background-color:#131`;
     msGraph.appendChild(bar);
   }
@@ -63,14 +63,14 @@ const MemoryStats = function () {
 
   // support of the API?
   if (performance.memory.totalJSHeapSize === 0) {
-    console.warn('totalJSHeapSize === 0... performance.memory is only available in Chrome .');
+    console.warn("totalJSHeapSize === 0... performance.memory is only available in Chrome .");
   }
 
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
   let precision;
   let i;
   function bytesToSize(bytes, nFractDigit) {
-    if (bytes === 0) return 'n/a';
+    if (bytes === 0) return "n/a";
     nFractDigit = nFractDigit !== undefined ? nFractDigit : 0;
     precision = 10 ** nFractDigit;
     i = Math.floor(Math.log(bytes) / Math.log(1024));
@@ -85,7 +85,7 @@ const MemoryStats = function () {
   let lastTime = Date.now();
   let lastUsedHeap = performance.memory.usedJSHeapSize;
   let delta = 0;
-  let color = '#131';
+  let color = "#131";
   let ms = 0;
   let mbValue = 0;
   let factor = 0;
@@ -103,7 +103,7 @@ const MemoryStats = function () {
       lastUsedHeap = performance.memory.usedJSHeapSize;
 
       // if memory has gone down, consider it a GC and draw a red bar.
-      color = delta < 0 ? '#830' : '#131';
+      color = delta < 0 ? "#830" : "#131";
 
       ms = lastUsedHeap;
       msMin = Math.min(msMin, ms);
@@ -124,6 +124,6 @@ const MemoryStats = function () {
   };
 };
 
-if (typeof module !== 'undefined' && module.exports) {
+if (typeof module !== "undefined" && module.exports) {
   module.exports = MemoryStats;
 }
diff --git a/src/global.d.ts b/src/global.d.ts
index f2652c0..2070993 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,5 +1,5 @@
 // SCSS
-declare module '*.module.scss' {
+declare module "*.module.scss" {
   const classes: { [key: string]: string };
   export default classes;
 }
diff --git a/src/helpers/components/Flex/Flex.tsx b/src/helpers/components/Flex/Flex.tsx
index 463f94b..a2e390d 100644
--- a/src/helpers/components/Flex/Flex.tsx
+++ b/src/helpers/components/Flex/Flex.tsx
@@ -1,10 +1,10 @@
-import React, { useMemo } from 'react';
-import cx from 'classnames';
-import { FlexAlign, FlexDirection, FlexGap, FlexJustify } from './FlexConstants';
-import { getStyle } from '../../utils/typesciptCssModulesHelper';
-import { ElementContent, withStaticProps } from '../../../types';
-import { VibeComponentProps } from '../../types';
-import styles from './Flex.module.scss';
+import React, { useMemo } from "react";
+import cx from "classnames";
+import { FlexAlign, FlexDirection, FlexGap, FlexJustify } from "./FlexConstants";
+import { getStyle } from "../../utils/typesciptCssModulesHelper";
+import { ElementContent, withStaticProps } from "../../../types";
+import { VibeComponentProps } from "../../types";
+import styles from "./Flex.module.scss";
 
 interface FlexProps extends VibeComponentProps {
   style?: object;
@@ -31,7 +31,7 @@ const Flex: React.FC<FlexProps> & {
 } = ({
   className,
   id,
-  elementType = 'div',
+  elementType = "div",
   direction = Flex.directions?.ROW,
   wrap = false,
   children,
@@ -43,13 +43,13 @@ const Flex: React.FC<FlexProps> & {
   ariaLabelledby,
   ariaLabel,
   tabIndex,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
 }) => {
   const overrideStyle = useMemo(() => ({ ...style, gap: `${gap}px` }), [style, gap]);
   const onClickProps = useMemo(() => {
     if (onClick) return { elementType, ariaLabelledby };
 
-    return { 'aria-labelledby': ariaLabelledby };
+    return { "aria-labelledby": ariaLabelledby };
   }, [onClick, elementType, ariaLabelledby]);
   const Element = elementType;
 
diff --git a/src/helpers/components/Flex/FlexConstants.ts b/src/helpers/components/Flex/FlexConstants.ts
index c99ebe2..ccfb07e 100644
--- a/src/helpers/components/Flex/FlexConstants.ts
+++ b/src/helpers/components/Flex/FlexConstants.ts
@@ -1,17 +1,17 @@
 export enum FlexAlign {
-  START = 'Start',
-  CENTER = 'Center',
-  END = 'End',
-  STRETCH = 'Stretch',
+  START = "Start",
+  CENTER = "Center",
+  END = "End",
+  STRETCH = "Stretch",
 }
 
 export enum FlexJustify {
-  START = 'Start',
-  CENTER = 'Center',
-  END = 'End',
-  STRETCH = 'Stretch',
-  SPACE_AROUND = 'SpaceAround',
-  SPACE_BETWEEN = 'SpaceBetween',
+  START = "Start",
+  CENTER = "Center",
+  END = "End",
+  STRETCH = "Stretch",
+  SPACE_AROUND = "SpaceAround",
+  SPACE_BETWEEN = "SpaceBetween",
 }
 
 export enum FlexGap {
@@ -23,6 +23,6 @@ export enum FlexGap {
 }
 
 export enum FlexDirection {
-  ROW = 'Row',
-  COLUMN = 'Column',
+  ROW = "Row",
+  COLUMN = "Column",
 }
diff --git a/src/helpers/components/Icons/Check.tsx b/src/helpers/components/Icons/Check.tsx
index c254f66..6d4d4aa 100644
--- a/src/helpers/components/Icons/Check.tsx
+++ b/src/helpers/components/Icons/Check.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable */
 /* tslint:disable */
-import React from 'react';
+import React from "react";
 interface CheckProps extends React.SVGAttributes<SVGElement> {
   size?: string | number;
 }
 const Check: React.FC<CheckProps> = ({ size, ...props }) => (
-  <svg viewBox="0 0 20 20" fill="currentColor" width={size || '20'} height={size || '20'} {...props}>
+  <svg viewBox="0 0 20 20" fill="currentColor" width={size || "20"} height={size || "20"} {...props}>
     <path
       d="M8.53033 14.2478L8 13.7175L7.46967 14.2478C7.76256 14.5407 8.23744 14.5407 8.53033 14.2478ZM8 12.6569L4.53033 9.18718C4.23744 8.89429 3.76256 8.89429 3.46967 9.18718C3.17678 9.48008 3.17678 9.95495 3.46967 10.2478L7.46967 14.2478L8 13.7175L8.53033 14.2478L16.2478 6.53033C16.5407 6.23743 16.5407 5.76256 16.2478 5.46967C15.955 5.17677 15.4801 5.17677 15.1872 5.46967L8 12.6569Z"
       fill="currentColor"
@@ -14,7 +14,7 @@ const Check: React.FC<CheckProps> = ({ size, ...props }) => (
     />
   </svg>
 );
-Check.displayName = 'Check';
+Check.displayName = "Check";
 export default Check;
 /* tslint:enable */
 /* eslint-enable */
diff --git a/src/helpers/components/Icons/CloseSmall.tsx b/src/helpers/components/Icons/CloseSmall.tsx
index 2c0f091..4e5105d 100644
--- a/src/helpers/components/Icons/CloseSmall.tsx
+++ b/src/helpers/components/Icons/CloseSmall.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable */
 /* tslint:disable */
-import React from 'react';
+import React from "react";
 interface CloseSmallProps extends React.SVGAttributes<SVGElement> {
   size?: string | number;
 }
 const CloseSmall: React.FC<CloseSmallProps> = ({ size, ...props }) => (
-  <svg viewBox="0 0 20 20" fill="currentColor" width={size || '20'} height={size || '20'} {...props}>
+  <svg viewBox="0 0 20 20" fill="currentColor" width={size || "20"} height={size || "20"} {...props}>
     <path
       d="M6.53033 5.46967C6.23744 5.17678 5.76256 5.17678 5.46967 5.46967C5.17678 5.76256 5.17678 6.23744 5.46967 6.53033L8.62562 9.68628L5.47045 12.8415C5.17756 13.1343 5.17756 13.6092 5.47045 13.9021C5.76334 14.195 6.23822 14.195 6.53111 13.9021L9.68628 10.7469L12.8415 13.9021C13.1343 14.195 13.6092 14.195 13.9021 13.9021C14.195 13.6092 14.195 13.1343 13.9021 12.8415L10.7469 9.68628L13.9029 6.53033C14.1958 6.23744 14.1958 5.76256 13.9029 5.46967C13.61 5.17678 13.1351 5.17678 12.8422 5.46967L9.68628 8.62562L6.53033 5.46967Z"
       fill="currentColor"
@@ -14,7 +14,7 @@ const CloseSmall: React.FC<CloseSmallProps> = ({ size, ...props }) => (
     />
   </svg>
 );
-CloseSmall.displayName = 'CloseSmall';
+CloseSmall.displayName = "CloseSmall";
 export default CloseSmall;
 /* tslint:enable */
 /* eslint-enable */
diff --git a/src/helpers/components/Link/Link.tsx b/src/helpers/components/Link/Link.tsx
index 2ab23a9..7cf9f74 100644
--- a/src/helpers/components/Link/Link.tsx
+++ b/src/helpers/components/Link/Link.tsx
@@ -1,10 +1,10 @@
-import cx from 'classnames';
-import React, { forwardRef, useCallback } from 'react';
-import { NOOP } from '../../utils/function-utils';
-import { LinkTarget } from './LinkConsts';
-import { VibeComponentProps, VibeComponent } from '../../types';
-import { withStaticProps } from '../../../types';
-import styles from './Link.module.scss';
+import cx from "classnames";
+import React, { forwardRef, useCallback } from "react";
+import { NOOP } from "../../utils/function-utils";
+import { LinkTarget } from "./LinkConsts";
+import { VibeComponentProps, VibeComponent } from "../../types";
+import { withStaticProps } from "../../../types";
+import styles from "./Link.module.scss";
 
 interface LinkProps extends VibeComponentProps {
   /**
@@ -41,14 +41,14 @@ const Link: VibeComponent<LinkProps, HTMLAnchorElement> & {
     {
       className,
       textClassName,
-      href = '',
-      text = '',
-      rel = 'noreferrer',
+      href = "",
+      text = "",
+      rel = "noreferrer",
       onClick = NOOP,
       target = Link.targets?.NEW_WINDOW,
-      ariaLabelDescription = '',
-      id = '',
-      ariaLabeledBy = '',
+      ariaLabelDescription = "",
+      id = "",
+      ariaLabeledBy = "",
       disableNavigation = false,
       inheritFontSize = false,
       inlineText = false,
diff --git a/src/helpers/components/Link/LinkConsts.ts b/src/helpers/components/Link/LinkConsts.ts
index 4f24c35..0e2291a 100644
--- a/src/helpers/components/Link/LinkConsts.ts
+++ b/src/helpers/components/Link/LinkConsts.ts
@@ -1,6 +1,6 @@
 export enum LinkTarget {
-  NEW_WINDOW = '_blank',
-  SELF = '_self',
-  PARENT = '_parent',
-  TOP = '_top',
+  NEW_WINDOW = "_blank",
+  SELF = "_self",
+  PARENT = "_parent",
+  TOP = "_top",
 }
diff --git a/src/helpers/types/VibeComponent.ts b/src/helpers/types/VibeComponent.ts
index 9ba9f51..9470bdc 100644
--- a/src/helpers/types/VibeComponent.ts
+++ b/src/helpers/types/VibeComponent.ts
@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 
 export type VibeComponent<T, P = HTMLElement> = React.ForwardRefExoticComponent<T & React.RefAttributes<P>>;
diff --git a/src/helpers/types/VibeComponentProps.ts b/src/helpers/types/VibeComponentProps.ts
index 5005faa..252c866 100644
--- a/src/helpers/types/VibeComponentProps.ts
+++ b/src/helpers/types/VibeComponentProps.ts
@@ -1,5 +1,5 @@
 export interface VibeComponentProps {
   className?: string;
-  'data-testid'?: string;
+  "data-testid"?: string;
   id?: string;
 }
diff --git a/src/helpers/types/index.ts b/src/helpers/types/index.ts
index edf8e99..e8501fe 100644
--- a/src/helpers/types/index.ts
+++ b/src/helpers/types/index.ts
@@ -1,2 +1,2 @@
-export * from './VibeComponent';
-export * from './VibeComponentProps';
+export * from "./VibeComponent";
+export * from "./VibeComponentProps";
diff --git a/src/helpers/utils/typesciptCssModulesHelper.ts b/src/helpers/utils/typesciptCssModulesHelper.ts
index 91c860b..cadc63e 100644
--- a/src/helpers/utils/typesciptCssModulesHelper.ts
+++ b/src/helpers/utils/typesciptCssModulesHelper.ts
@@ -7,7 +7,7 @@ export function getStyle<StylesType>(
   styles: StylesType,
   key: string | undefined | null,
 ): StylesType[keyof StylesType] | string {
-  if (!key || !styles[key as keyof typeof styles]) return '';
+  if (!key || !styles[key as keyof typeof styles]) return "";
 
   return styles[key as keyof typeof styles];
 }
diff --git a/src/index.ts b/src/index.ts
index b165f6e..57c7f08 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
-import './styles/tokens/index.scss';
+import "./styles/tokens/index.scss";
 
-export * from './components';
-export * from './decorators';
-export * from './functions';
+export * from "./components";
+export * from "./decorators";
+export * from "./functions";
diff --git a/src/styles/mixins/_index.scss b/src/styles/mixins/_index.scss
index 1082f0f..687a47d 100644
--- a/src/styles/mixins/_index.scss
+++ b/src/styles/mixins/_index.scss
@@ -1,3 +1,3 @@
-@import 'layout';
-@import 'focus';
-@import 'typography';
+@import "layout";
+@import "focus";
+@import "typography";
diff --git a/src/styles/tokens/index.scss b/src/styles/tokens/index.scss
index fbfb6d0..a194781 100644
--- a/src/styles/tokens/index.scss
+++ b/src/styles/tokens/index.scss
@@ -1,4 +1,4 @@
-@import './colors';
-@import './typography';
-@import './spacing';
-@import './border-radius';
+@import "./colors";
+@import "./typography";
+@import "./spacing";
+@import "./border-radius";
diff --git a/src/styles/tokens/typography.scss b/src/styles/tokens/typography.scss
index 1812505..b080c8a 100644
--- a/src/styles/tokens/typography.scss
+++ b/src/styles/tokens/typography.scss
@@ -11,8 +11,8 @@
   --sb-text-font-size: 16px;
   --sb-small-text-font-size: 14px;
   // Font family
-  --sb-font-family: 'Figtree', 'Roboto', 'Noto Sans Hebrew', 'Noto Kufi Arabic', 'Noto Sans JP', sans-serif;
-  --sb-title-font-family: 'Poppins', 'Roboto', 'Noto Sans Hebrew', 'Noto Kufi Arabic', 'Noto Sans JP', sans-serif;
+  --sb-font-family: "Figtree", "Roboto", "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif;
+  --sb-title-font-family: "Poppins", "Roboto", "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif;
   // Font definition
   --sb-font-general-label: var(--sb-font-weight-normal) var(--sb-small-text-font-size) / var(--sb-text-line-height)
     var(--sb-font-family);
diff --git a/src/types/ElementContent.ts b/src/types/ElementContent.ts
index a895417..6de1175 100644
--- a/src/types/ElementContent.ts
+++ b/src/types/ElementContent.ts
@@ -1,3 +1,3 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
 export type ElementContent = ReactNode | ReactNode[];
diff --git a/src/types/index.ts b/src/types/index.ts
index d14271f..f683aa6 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,2 +1,2 @@
-export * from './ElementContent';
-export * from './withStaticProps';
+export * from "./ElementContent";
+export * from "./withStaticProps";
diff --git a/src/types/published-types.ts b/src/types/published-types.ts
index 2c45fd5..635a756 100644
--- a/src/types/published-types.ts
+++ b/src/types/published-types.ts
@@ -2,4 +2,4 @@
 export {
   StoryMetaSettingsArgs as CreateStoryMetaSettingsArgs,
   StoryMetaSettingsResult as CreateStoryMetaSettingsArgsResult,
-} from '../functions/createStoryMetaSettings/types';
+} from "../functions/createStoryMetaSettings/types";
diff --git a/src/types/withStaticProps.ts b/src/types/withStaticProps.ts
index ce24feb..261e6eb 100644
--- a/src/types/withStaticProps.ts
+++ b/src/types/withStaticProps.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 type Required<T> = {
   [P in keyof T]-?: T[P];
diff --git a/storybook/components/component-name/component-name-decorator.jsx b/storybook/components/component-name/component-name-decorator.jsx
index fc84558..7818b31 100644
--- a/storybook/components/component-name/component-name-decorator.jsx
+++ b/storybook/components/component-name/component-name-decorator.jsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import cx from 'classnames';
-import ComponentName from '../../../src/components/component-name/component-name';
-import './component-name-decorator.scss';
+import React from "react";
+import cx from "classnames";
+import ComponentName from "../../../src/components/component-name/component-name";
+import "./component-name-decorator.scss";
 
 const ComponentNameDecorator = ({ children, className, withFoundationBackground = false }) => {
   return (
     <ComponentName
-      className={cx('vibe-storybook-component-name', className, {
-        'vibe-storybook-component-name--foundation': withFoundationBackground,
+      className={cx("vibe-storybook-component-name", className, {
+        "vibe-storybook-component-name--foundation": withFoundationBackground,
       })}
     >
       {children}
diff --git a/storybook/components/component-name/component-name-decorator.scss b/storybook/components/component-name/component-name-decorator.scss
index c8865ec..06e28a3 100644
--- a/storybook/components/component-name/component-name-decorator.scss
+++ b/storybook/components/component-name/component-name-decorator.scss
@@ -1,7 +1,7 @@
 .vibe-storybook-component-name {
-  background-image: url('./assets/component-background.png');
+  background-image: url("./assets/component-background.png");
 
   &--foundation {
-    background-image: url('./assets/foundation-background.png');
+    background-image: url("./assets/foundation-background.png");
   }
 }
diff --git a/storybook/components/index.js b/storybook/components/index.js
index 177a344..3bfebc5 100644
--- a/storybook/components/index.js
+++ b/storybook/components/index.js
@@ -1 +1 @@
-export { default as ComponentNameDecorator } from './component-name/component-name-decorator';
+export { default as ComponentNameDecorator } from "./component-name/component-name-decorator";