feat: wds button refactoring (#21849)

## Description 1. Moved `wds` to the `design-system` folder. 2. Added `headless` package and `HeadlessButton`. 3. Added `theming` package. `ThemeProvider` and two classes were created to work with tokens([TokensAccessor](https://github.com/appsmithorg/appsmith/pull/21849/files#diff-58832e8b8e8017648929473a90eb716e6a2671ba1749be3d4c5665b093bc3dc3)) and colors([ColorsAccessor](https://github.com/appsmithorg/appsmith/pull/21849/files#diff-f515e0eefc418c8bfc0710572e83a0029bd94f2fb975853f71730e5b11c774bd)) 5. The token structure has been changed. The same class(TokensAccessor) is now used to create CSS variables and tokens for Figma([themeTokens.json](https://github.com/appsmithorg/appsmith/pull/21849/files#diff-5ad75b848cb4254c0bd0bb0bf6a89eeccb628dc0012752172654e12e62d570d9)) The final storybook is [here](https://widget-design-system-b1p6g13iq-get-appsmith.vercel.app/?path=/story/design-system-widgets--button). ## Type of change - New feature (non-breaking change which adds functionality) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update ## How Has This Been Tested? - Manual ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag --------- Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
2023-04-05 15:39:11 +03:00 · 2023-04-05 15:39:11 +03:00 · e50b31b65c
commit e50b31b65c
parent c3f7d6c0cf
54 changed files with 1145 additions and 946 deletions
--- a/app/client/package.json
+++ b/app/client/package.json
@ -7,7 +7,7 @@
    "npm": "^8.5.5"
  },
  "workspaces": [
-    "packages/*"
+    "packages/**/*"
  ],
  "cracoConfig": "craco.dev.config.js",
  "scripts": {
@ -41,7 +41,7 @@
    "@blueprintjs/icons": "^3.10.0",
    "@blueprintjs/popover2": "^0.5.0",
    "@blueprintjs/select": "^3.10.0",
-    "@design-system/wds": "*",
+    "@design-system/widgets": "*",
    "@fusioncharts/powercharts": "^3.16.0",
    "@github/g-emoji-element": "^1.1.5",
    "@googlemaps/markerclusterer": "^2.0.14",
--- a/app/client/packages/design-system/headless/.eslintrc.json
+++ b/app/client/packages/design-system/headless/.eslintrc.json
@ -0,0 +1,3 @@
+{
+  "extends": ["../../../.eslintrc.json"]
+}
--- a/app/client/packages/design-system/headless/package.json
+++ b/app/client/packages/design-system/headless/package.json
@ -0,0 +1,30 @@
+{
+  "name": "@design-system/headless",
+  "version": "1.0.0",
+  "main": "src/index.ts",
+  "author": "Valera Melnikov <valera@appsmith.com>, Pawan Kumar <pawan@appsmith.com>",
+  "license": "MIT",
+  "scripts": {
+    "lint:ci": "eslint --cache .",
+    "prettier:ci": "prettier --check ."
+  },
+  "dependencies": {
+    "@react-aria/button": "^3.7.0",
+    "@react-aria/focus": "^3.11.0",
+    "@react-aria/interactions": "^3.14.0",
+    "@react-aria/utils": "^3.15.0",
+    "@react-spectrum/utils": "^3.9.0",
+    "@react-types/button": "^3.7.1",
+    "@react-types/shared": "^3.17.0",
+    "classnames": "*",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+  }
+}
--- a/app/client/packages/design-system/headless/src/components/Button.tsx
+++ b/app/client/packages/design-system/headless/src/components/Button.tsx
@ -0,0 +1,39 @@
+import React, { forwardRef } from "react";
+import { useFocusableRef } from "@react-spectrum/utils";
+import classNames from "classnames";
+import { FocusRing } from "@react-aria/focus";
+import { mergeProps } from "@react-aria/utils";
+import { useButton } from "@react-aria/button";
+import { useHover } from "@react-aria/interactions";
+import type { RefObject } from "react";
+import type { FocusableRef } from "@react-types/shared";
+import type { ButtonProps as SpectrumButtonProps } from "@react-types/button";
+
+export interface ButtonProps extends SpectrumButtonProps {
+  className?: string;
+}
+
+export type ButtonRef = FocusableRef<HTMLElement>;
+
+export const Button = forwardRef((props: ButtonProps, ref: ButtonRef) => {
+  const { autoFocus, children, className, isDisabled } = props;
+  const domRef = useFocusableRef(ref) as RefObject<HTMLButtonElement>;
+  const { buttonProps, isPressed } = useButton(props, domRef);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+
+  return (
+    <FocusRing autoFocus={autoFocus} focusRingClass="focus-ring">
+      <button
+        {...mergeProps(buttonProps, hoverProps)}
+        className={classNames(className, {
+          "is-disabled": isDisabled,
+          "is-active": isPressed,
+          "is-hovered": isHovered,
+        })}
+        ref={domRef}
+      >
+        {children}
+      </button>
+    </FocusRing>
+  );
+});
--- a/app/client/packages/design-system/headless/src/index.ts
+++ b/app/client/packages/design-system/headless/src/index.ts
@ -0,0 +1,2 @@
+export { Button } from "./components/Button";
+export type { ButtonProps, ButtonRef } from "./components/Button";
--- a/app/client/packages/design-system/headless/tsconfig.json
+++ b/app/client/packages/design-system/headless/tsconfig.json
@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["./src/**/*"]
+}
--- a/app/client/packages/design-system/theming/.eslintrc.json
+++ b/app/client/packages/design-system/theming/.eslintrc.json
@ -1,5 +1,5 @@
 {
-  "extends": ["../../.eslintrc.json", "plugin:storybook/recommended"],
+  "extends": ["../../../.eslintrc.json"],
  "overrides": [
    {
      "files": ["**/*.stories.*"],
--- a/app/client/packages/design-system/theming/package.json
+++ b/app/client/packages/design-system/theming/package.json
@ -0,0 +1,23 @@
+{
+  "name": "@design-system/theming",
+  "version": "1.0.0",
+  "main": "src/index.ts",
+  "author": "Valera Melnikov <valera@appsmith.com>, Pawan Kumar <pawan@appsmith.com>",
+  "license": "MIT",
+  "scripts": {
+    "lint:ci": "eslint --cache .",
+    "prettier:ci": "prettier --check .",
+    "build:tokens": "npx ts-node ./src/utils/buildTokens.ts"
+  },
+  "dependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+  }
+}
--- a/app/client/packages/design-system/theming/src/components/ThemeProvider.tsx
+++ b/app/client/packages/design-system/theming/src/components/ThemeProvider.tsx
@ -0,0 +1,36 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import kebabCase from "lodash/kebabCase";
+import type { ReactNode } from "react";
+import type themeTokens from "../tokens/themeTokens.json";
+
+type Theme = typeof themeTokens;
+
+export interface ThemeProviderProps {
+  theme: Theme;
+  children: ReactNode;
+}
+
+/**
+ * creates locally scoped css variables
+ *
+ */
+const StyledProvider = styled.div<ThemeProviderProps>`
+  ${({ theme }) => {
+    return css`
+      ${Object.keys(theme).map((key) => {
+        return Object.keys(theme[key]).map((nestedKey) => {
+          return `--${kebabCase(key)}-${kebabCase(nestedKey)}: ${
+            theme[key][nestedKey].value
+          };`;
+        });
+      })}
+    `;
+  }}
+`;
+
+export const ThemeProvider = (props: ThemeProviderProps) => {
+  const { children, theme } = props;
+
+  return <StyledProvider theme={theme}>{children}</StyledProvider>;
+};
--- a/app/client/packages/design-system/theming/src/index.ts
+++ b/app/client/packages/design-system/theming/src/index.ts
@ -0,0 +1,3 @@
+export { ThemeProvider } from "./components/ThemeProvider";
+export { TokensAccessor } from "./utils/TokensAccessor";
+export { ColorsAccessor } from "./utils/ColorsAccessor";
--- a/app/client/packages/design-system/theming/src/tokens/defaultTokens.json
+++ b/app/client/packages/design-system/theming/src/tokens/defaultTokens.json
@ -0,0 +1,18 @@
+{
+  "seedColor": "#553de9",
+  "focusColor": "#2a82ea",
+  "rootUnit": 4,
+  "isDarkMode": false,
+  "borderRadius": {
+    "1": "0px"
+  },
+  "boxShadow": {
+    "1": "0 0 0 0 rgba(0, 0, 0, 0.2)"
+  },
+  "borderWidth": {
+    "1": "1px"
+  },
+  "opacity": {
+    "disabled": 0.3
+  }
+}
--- a/app/client/packages/design-system/theming/src/tokens/themeTokens.json
+++ b/app/client/packages/design-system/theming/src/tokens/themeTokens.json
@ -0,0 +1,96 @@
+{
+  "color": {
+    "bg-accent": {
+      "value": "#553de9",
+      "type": "color"
+    },
+    "bg-accent-hover": {
+      "value": "#6e61ff",
+      "type": "color"
+    },
+    "bg-accent-active": {
+      "value": "#8f85ff",
+      "type": "color"
+    },
+    "bg-accent-subtle-hover": {
+      "value": "#b6adff",
+      "type": "color"
+    },
+    "bg-accent-subtle-active": {
+      "value": "#d7d0ff",
+      "type": "color"
+    },
+    "bd-accent": {
+      "value": "#553de9",
+      "type": "color"
+    },
+    "fg-accent": {
+      "value": "#553de9",
+      "type": "color"
+    },
+    "fg-on-accent": {
+      "value": "#fff",
+      "type": "color"
+    },
+    "bd-focus": {
+      "value": "#2a82ea",
+      "type": "color"
+    }
+  },
+  "sizing": {
+    "root-unit": {
+      "value": "4px",
+      "type": "sizing"
+    }
+  },
+  "spacing": {
+    "0": {
+      "value": "0px",
+      "type": "spacing"
+    },
+    "1": {
+      "value": "4px",
+      "type": "spacing"
+    },
+    "2": {
+      "value": "8px",
+      "type": "spacing"
+    },
+    "3": {
+      "value": "12px",
+      "type": "spacing"
+    },
+    "4": {
+      "value": "16px",
+      "type": "spacing"
+    },
+    "5": {
+      "value": "20px",
+      "type": "spacing"
+    }
+  },
+  "borderRadius": {
+    "1": {
+      "value": "0px",
+      "type": "borderRadius"
+    }
+  },
+  "boxShadow": {
+    "1": {
+      "value": "0 0 0 0 rgba(0, 0, 0, 0.2)",
+      "type": "boxShadow"
+    }
+  },
+  "borderWidth": {
+    "1": {
+      "value": "1px",
+      "type": "borderWidth"
+    }
+  },
+  "opacity": {
+    "disabled": {
+      "value": 0.3,
+      "type": "opacity"
+    }
+  }
+}
--- a/app/client/packages/design-system/theming/src/utils/ColorsAccessor.ts
+++ b/app/client/packages/design-system/theming/src/utils/ColorsAccessor.ts
@ -0,0 +1,95 @@
+import Color from "colorjs.io";
+import type { ColorTypes } from "colorjs.io/types/src/color";
+import defaultsTokens from "../tokens/defaultTokens.json";
+
+export class ColorsAccessor {
+  private color: Color;
+
+  constructor(color: ColorTypes) {
+    this.color = this.parse(color);
+  }
+
+  private parse = (color: ColorTypes) => {
+    try {
+      return new Color(color);
+    } catch (error) {
+      return new Color(defaultsTokens.seedColor);
+    }
+  };
+
+  updateColor = (color: ColorTypes) => {
+    this.color = this.parse(color);
+  };
+
+  getHex = () => {
+    return this.color.toString({ format: "hex" });
+  };
+
+  /* Lightness */
+  isVeryDark = () => {
+    return this.color.oklch.l < 30;
+  };
+
+  isVeryLight = () => {
+    return this.color.oklch.l > 90;
+  };
+
+  /* Chroma */
+  isAchromatic = () => {
+    return this.color.oklch.c < 5;
+  };
+
+  isColorful = () => {
+    return this.color.oklch.c > 17;
+  };
+
+  /* Hue */
+  isCold = () => {
+    return this.color.oklch.h >= 120 && this.color.oklch.h <= 300;
+  };
+
+  isBlue = () => {
+    return this.color.oklch.h >= 230 && this.color.oklch.h <= 270;
+  };
+
+  isGreen = () => {
+    return this.color.oklch.h >= 105 && this.color.oklch.h <= 165;
+  };
+
+  isYellow = () => {
+    return this.color.oklch.h >= 60 && this.color.oklch.h <= 75;
+  };
+
+  isRed = () => {
+    return this.color.oklch.h >= 29 && this.color.oklch.h <= 50;
+  };
+
+  lighten = (color: ColorTypes, lightness = 0.1) => {
+    return this.parse(color)
+      .set("oklch.l", (l) => l + lightness)
+      .toString({ format: "hex" });
+  };
+
+  darken = (color: ColorTypes, lightness = 0.1) => {
+    return this.parse(color)
+      .set("oklch.l", (l) => l - lightness)
+      .toString({ format: "hex" });
+  };
+
+  /**
+   * returns black or white based on the contrast of the color compare to white
+   * using APCA algorithm
+   */
+  getComplementaryGrayscale = () => {
+    const contrast = this.color.contrast(new Color("#fff"), "APCA");
+
+    // if contrast is less than -35 then the text color should be white
+    if (contrast < -60) return "#fff";
+
+    return "#000";
+  };
+
+  getFocus = () => {
+    return defaultsTokens.focusColor;
+  };
+}
--- a/app/client/packages/design-system/theming/src/utils/TokensAccessor.ts
+++ b/app/client/packages/design-system/theming/src/utils/TokensAccessor.ts
@ -0,0 +1,164 @@
+import { ColorsAccessor } from "../utils/ColorsAccessor";
+import type { ColorTypes } from "colorjs.io/types/src/color";
+import defaultTokens from "../tokens/defaultTokens.json";
+import range from "lodash/range";
+import kebabCase from "lodash/kebabCase";
+
+type TokenType =
+  | "sizing"
+  | "color"
+  | "spacing"
+  | "borderRadius"
+  | "boxShadow"
+  | "borderWidth"
+  | "opacity";
+
+type Token = {
+  value: string | number;
+  type: TokenType;
+};
+
+type ThemeTokens = {
+  [key in TokenType]: { [key: string]: Token };
+};
+
+type TokenObj = { [key: string]: string | number };
+
+export class TokensAccessor {
+  constructor(
+    private color: ColorTypes = defaultTokens.seedColor,
+    private rootUnit: number = defaultTokens.rootUnit,
+    private borderRadius: TokenObj = defaultTokens.borderRadius,
+    private boxShadow: TokenObj = defaultTokens.boxShadow,
+    private borderWidth: TokenObj = defaultTokens.borderWidth,
+    private opacity: TokenObj = defaultTokens.opacity,
+    private colorsAccessor: ColorsAccessor = new ColorsAccessor(color),
+  ) {}
+
+  updateSeedColor = (color: ColorTypes) => {
+    this.colorsAccessor.updateColor(color);
+  };
+
+  updateBorderRadius = (borderRadius: TokenObj) => {
+    this.borderRadius = borderRadius;
+    this.createTokenObject(this.borderRadius, "borderRadius");
+  };
+
+  getColors = () => {
+    const colors = {
+      bgAccent: this.getBgAccent(),
+      bgAccentHover: this.getBgAccentHover(),
+      bgAccentActive: this.getBgAccentActive(),
+      bgAccentSubtleHover: this.getBgAccentSubtleHover(),
+      bgAccentSubtleActive: this.getAccentSubtleActive(),
+      bdAccent: this.getBdAccent(),
+      fgAccent: this.getFgAccent(),
+      fgOnAccent: this.getFgOnAccent(),
+      bdFocus: this.getBdFocus(),
+    };
+
+    return this.createTokenObject(colors, "color");
+  };
+
+  getSizing = () => {
+    const sizing = {
+      rootUnit: `${this.rootUnit}px`,
+    };
+
+    return this.createTokenObject(sizing, "sizing");
+  };
+
+  getSpacing = (count = 6) => {
+    const spacing = range(count).reduce((acc, value, index) => {
+      return {
+        ...acc,
+        [index]: `${this.rootUnit * value}px`,
+      };
+    }, {});
+
+    return this.createTokenObject(spacing, "spacing");
+  };
+
+  getBorderRadius = () => {
+    return this.createTokenObject(this.borderRadius, "borderRadius");
+  };
+
+  getBoxShadow = () => {
+    return this.createTokenObject(this.boxShadow, "boxShadow");
+  };
+
+  getBorderWidth = () => {
+    return this.createTokenObject(this.borderWidth, "borderWidth");
+  };
+
+  getOpacity = () => {
+    return this.createTokenObject(this.opacity, "opacity");
+  };
+
+  getAllTokens = () => {
+    return {
+      ...this.getColors(),
+      ...this.getSizing(),
+      ...this.getSpacing(),
+      ...this.getBorderRadius(),
+      ...this.getBoxShadow(),
+      ...this.getBorderWidth(),
+      ...this.getOpacity(),
+    };
+  };
+
+  private createTokenObject = (
+    tokenObj: TokenObj,
+    tokenType: TokenType,
+  ): ThemeTokens => {
+    const themeTokens = {} as ThemeTokens;
+
+    Object.keys(tokenObj).forEach((key) => {
+      themeTokens[tokenType] = {
+        ...themeTokens[tokenType],
+        [kebabCase(key)]: {
+          value: tokenObj[key],
+          type: tokenType,
+        },
+      };
+    });
+
+    return themeTokens;
+  };
+
+  private getBgAccent = () => {
+    return this.colorsAccessor.getHex();
+  };
+
+  private getBgAccentHover = () => {
+    return this.colorsAccessor.lighten(this.getBgAccent());
+  };
+
+  private getBgAccentActive = () => {
+    return this.colorsAccessor.lighten(this.getBgAccentHover());
+  };
+
+  private getBgAccentSubtleHover = () => {
+    return this.colorsAccessor.lighten(this.getBgAccent(), 0.3);
+  };
+
+  private getAccentSubtleActive = () => {
+    return this.colorsAccessor.lighten(this.getBgAccentSubtleHover());
+  };
+
+  private getBdAccent = () => {
+    return this.colorsAccessor.getHex();
+  };
+
+  private getFgAccent = () => {
+    return this.colorsAccessor.getHex();
+  };
+
+  private getFgOnAccent = () => {
+    return this.colorsAccessor.getComplementaryGrayscale();
+  };
+
+  private getBdFocus = () => {
+    return this.colorsAccessor.getFocus();
+  };
+}
--- a/app/client/packages/design-system/theming/src/utils/buildTokens.ts
+++ b/app/client/packages/design-system/theming/src/utils/buildTokens.ts
@ -0,0 +1,7 @@
+import fs from "fs";
+import { TokensAccessor } from "../utils/TokensAccessor";
+
+fs.writeFileSync(
+  `${__dirname}/../tokens/themeTokens.json`,
+  `${JSON.stringify(new TokensAccessor().getAllTokens(), null, 2)}\r\n`,
+);
--- a/app/client/packages/design-system/theming/tsconfig.json
+++ b/app/client/packages/design-system/theming/tsconfig.json
@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../../tsconfig.json",
  "include": ["./src/**/*"],
  "ts-node": {
    "compilerOptions": {
--- a/app/client/packages/design-system/widgets/.eslintrc.json
+++ b/app/client/packages/design-system/widgets/.eslintrc.json
@ -0,0 +1,11 @@
+{
+  "extends": ["../../../.eslintrc.json", "plugin:storybook/recommended"],
+  "overrides": [
+    {
+      "files": ["**/*.stories.*"],
+      "rules": {
+        "import/no-anonymous-default-export": "off"
+      }
+    }
+  ]
+}
--- a/app/client/packages/design-system/widgets/package.json
+++ b/app/client/packages/design-system/widgets/package.json
@ -1,26 +1,28 @@
 {
-  "name": "@design-system/wds",
+  "name": "@design-system/widgets",
  "version": "1.0.0",
  "main": "src/index.ts",
  "author": "Valera Melnikov <valera@appsmith.com>, Pawan Kumar <pawan@appsmith.com>",
  "license": "MIT",
  "scripts": {
-    "build:tokens": "npx ts-node  ./src/utils/buildTokens.ts",
    "lint:ci": "eslint --cache .",
    "prettier:ci": "prettier --check ."
  },
-  "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
-    "eslint": "*",
-    "eslint-plugin-storybook": "^0.6.10",
-    "prettier": "*"
-  },
  "dependencies": {
    "@capsizecss/core": "^3.1.0",
    "@capsizecss/metrics": "^1.0.1",
+    "@design-system/headless": "*",
+    "@design-system/theming": "*",
    "colorjs.io": "^0.4.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "eslint-plugin-storybook": "^0.6.10",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
  }
 }
--- a/app/client/packages/design-system/widgets/src/components/Button/Button.stories.mdx
+++ b/app/client/packages/design-system/widgets/src/components/Button/Button.stories.mdx
@ -0,0 +1,84 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { Button } from "./";
+
+<Meta
+  title="Design-system/widgets"
+  component={Button}
+  parameters={{
+    height: 32,
+    width: 180,
+  }}
+  args={{
+    children: "Button",
+  }}
+/>
+
+export const Template = (args, { globals: { fontFamily } }) => (
+  <Button isFitContainer {...args} fontFamily={fontFamily} />
+);
+
+# Button
+
+A button is a clickable element that is used to trigger an action.
+
+<Canvas>
+  <Story name="Button">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Button" of={Button} />
+
+# Variants
+
+There are 3 variants of the button component.
+
+<Canvas>
+  <Story
+    name="Primary"
+    args={{
+      children: "Primary",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="Secondary"
+    args={{
+      variant: "secondary",
+      children: "Secondary",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="Tertiary"
+    args={{
+      variant: "tertiary",
+      children: "Tertiary",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+# States
+
+<Canvas>
+  <Story
+    name="Disabled State"
+    args={{
+      isDisabled: true,
+      children: "Disabled",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="Loading State"
+    args={{
+      isLoading: true,
+      children: "Loading",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
--- a/app/client/packages/design-system/widgets/src/components/Button/Button.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Button/Button.tsx
@ -0,0 +1,74 @@
+import React, { forwardRef } from "react";
+import { Text } from "../Text";
+import { Spinner } from "../Spinner";
+import { StyledButton } from "./index.styled";
+import type { fontFamilyTypes } from "../../utils/typography";
+import type {
+  ButtonProps as HeadlessButtonProps,
+  ButtonRef as HeadlessButtonRef,
+} from "@design-system/headless";
+
+export type ButtonVariants = "primary" | "secondary" | "tertiary";
+
+export interface ButtonProps extends Omit<HeadlessButtonProps, "className"> {
+  /**
+   *  @default primary
+   */
+  variant?: ButtonVariants;
+  children?: React.ReactNode;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  fontFamily?: fontFamilyTypes;
+  isFitContainer?: boolean;
+}
+
+export const Button = forwardRef(
+  (props: ButtonProps, ref: HeadlessButtonRef) => {
+    const {
+      children,
+      fontFamily,
+      isDisabled,
+      isFitContainer = false,
+      isLoading,
+      onBlur,
+      onFocus,
+      onFocusChange,
+      onKeyDown,
+      onKeyUp,
+      onPress,
+      onPressChange,
+      onPressEnd,
+      onPressStart,
+      onPressUp,
+      variant = "primary",
+    } = props;
+
+    return (
+      <StyledButton
+        data-fit-container={isFitContainer}
+        data-loading={isLoading}
+        data-variant={variant}
+        isDisabled={isDisabled}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        onFocusChange={onFocusChange}
+        onKeyDown={onKeyDown}
+        onKeyUp={onKeyUp}
+        onPress={onPress}
+        onPressChange={onPressChange}
+        onPressEnd={onPressEnd}
+        onPressStart={onPressStart}
+        onPressUp={onPressUp}
+        ref={ref}
+      >
+        {isLoading && <Spinner />}
+
+        {!isLoading && (
+          <Text data-component="text" fontFamily={fontFamily}>
+            {children}
+          </Text>
+        )}
+      </StyledButton>
+    );
+  },
+);
--- a/app/client/packages/design-system/widgets/src/components/Button/index.styled.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Button/index.styled.tsx
@ -0,0 +1,93 @@
+import styled from "styled-components";
+import { Button as HeadlessButton } from "@design-system/headless";
+import type { ButtonProps } from "./Button";
+
+export const StyledButton = styled(HeadlessButton)<ButtonProps>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  outline: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  gap: var(--spacing-4);
+  padding: var(--spacing-2) var(--spacing-4);
+  min-height: calc(var(--sizing-root-unit) * 8);
+  border-radius: var(--border-radius-1);
+  user-select: none;
+
+  // TODO: remove this when we use only flex layout
+  &[data-fit-container="true"] {
+    width: 100%;
+    height: 100%;
+  }
+
+  &[data-loading="true"] {
+    pointer-events: none;
+  }
+
+  & [data-component="text"] {
+    width: 100%;
+
+    span {
+      display: block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  &[data-variant="primary"] {
+    background-color: var(--color-bg-accent);
+    color: var(--color-fg-on-accent);
+    border-color: transparent;
+
+    &.is-hovered {
+      background-color: var(--color-bg-accent-hover);
+    }
+
+    &.is-active {
+      background-color: var(--color-bg-accent-active);
+    }
+  }
+
+  &[data-variant="secondary"] {
+    background-color: transparent;
+    color: var(--color-fg-accent);
+    border-color: var(--color-bd-accent);
+    border-width: var(--border-width-1);
+
+    &.is-hovered {
+      background-color: var(--color-bg-accent-subtle-hover);
+    }
+
+    &.is-active {
+      background-color: var(--color-bg-accent-subtle-active);
+    }
+  }
+
+  &[data-variant="tertiary"] {
+    background: transparent;
+    color: var(--color-fg-accent);
+    border-color: transparent;
+    border-width: 0;
+
+    &.is-hovered {
+      background: var(--color-bg-accent-subtle-hover);
+    }
+
+    &.is-active {
+      background: var(--color-bg-accent-subtle-active);
+    }
+  }
+
+  // we don't use :focus-visible because not all browsers (safari) have it yet
+  &:not([data-loading]).focus-ring {
+    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-bd-focus);
+  }
+
+  &.is-disabled {
+    pointer-events: none;
+    opacity: var(--opacity-disabled);
+  }
+`;
--- a/app/client/packages/design-system/widgets/src/components/Button/index.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Button/index.tsx
@ -0,0 +1 @@
+export { Button } from "./Button";
--- a/app/client/packages/design-system/widgets/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/app/client/packages/design-system/widgets/src/components/ButtonGroup/ButtonGroup.tsx
--- a/app/client/packages/design-system/widgets/src/components/ButtonGroup/index.styled.tsx
+++ b/app/client/packages/design-system/widgets/src/components/ButtonGroup/index.styled.tsx
--- a/app/client/packages/design-system/widgets/src/components/ButtonGroup/index.tsx
+++ b/app/client/packages/design-system/widgets/src/components/ButtonGroup/index.tsx
--- a/app/client/packages/design-system/widgets/src/components/Spinner/index.styled.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Spinner/index.styled.tsx
--- a/app/client/packages/design-system/widgets/src/components/Spinner/index.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Spinner/index.tsx
--- a/app/client/packages/design-system/widgets/src/components/Text/Text.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Text/Text.tsx
--- a/app/client/packages/design-system/widgets/src/components/Text/index.styled.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Text/index.styled.tsx
--- a/app/client/packages/design-system/widgets/src/components/Text/index.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Text/index.tsx
--- a/app/client/packages/design-system/widgets/src/index.ts
+++ b/app/client/packages/design-system/widgets/src/index.ts
@ -1,3 +1,2 @@
 export { Button } from "./components/Button";
-export { createCSSVars } from "./utils/createTokens";
 export { fontMetricsMap, createGlobalFontStack } from "./utils/typography";
--- a/app/client/packages/design-system/widgets/src/tokens.json
+++ b/app/client/packages/design-system/widgets/src/tokens.json
@ -89,4 +89,4 @@
      "type": "boxShadow"
    }
  }
-}
+}
--- a/app/client/packages/design-system/widgets/src/utils/typography.ts
+++ b/app/client/packages/design-system/widgets/src/utils/typography.ts
--- a/app/client/packages/design-system/widgets/tsconfig.json
+++ b/app/client/packages/design-system/widgets/tsconfig.json
@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["./src/**/*"],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs",
+      "types": ["node"]
+    }
+  }
+}
--- a/app/client/packages/storybook/.storybook/addons/theming/register.js
+++ b/app/client/packages/storybook/.storybook/addons/theming/register.js
@ -1,5 +1,5 @@
 import styled from "styled-components";
-import React, { useEffect } from "react";
+import React, { useCallback } from "react";
 import { addons, types } from "@storybook/addons";
 import {
  Icons,
@ -9,9 +9,9 @@ import {
  H6,
  ColorControl,
 } from "@storybook/components";
-
 import { useGlobals } from "@storybook/api";
-import { fontMetricsMap } from "@design-system/wds";
+import { fontMetricsMap } from "@design-system/widgets";
+import debounce from "lodash/debounce";

 const { Select } = Form;

@ -61,6 +61,9 @@ addons.register("wds/theming", () => {
        });
      };

+      const colorChange = (value) => updateGlobal("accentColor", value);
+      const debouncedColorChange = useCallback(debounce(colorChange, 300), []);
+
      return (
        <WithTooltip
          trigger="click"
@ -92,7 +95,7 @@ addons.register("wds/theming", () => {
                  label="Accent Color"
                  defaultValue={globals.accentColor}
                  value={globals.accentColor}
-                  onChange={(value) => updateGlobal("accentColor", value)}
+                  onChange={debouncedColorChange}
                />
              </div>

--- a/app/client/packages/storybook/.storybook/decorators/theming.js
+++ b/app/client/packages/storybook/.storybook/decorators/theming.js
@ -1,15 +1,14 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import webfontloader from "webfontloader";
 import styled, { createGlobalStyle } from "styled-components";
-
-import { createCSSVars, createGlobalFontStack } from "@design-system/wds";
+import { ThemeProvider, TokensAccessor } from "@design-system/theming";
+import { createGlobalFontStack } from "@design-system/widgets";

 const StyledContainer = styled.div`
-  ${createCSSVars}
-
  display: flex;
  width: 100%;
  height: 100%;
+  padding: 8px;
  align-items: center;
  justify-content: center;
 `;
@ -19,7 +18,11 @@ const GlobalStyles = createGlobalStyle`
   ${fontFaces}
 `;

+const tokensAccessor = new TokensAccessor();
+
 export const theming = (Story, args) => {
+  const [theme, setTheme] = useState(tokensAccessor.getAllTokens());
+
  // Load the font if it's not the default
  useEffect(() => {
    if (
@ -34,13 +37,40 @@ export const theming = (Story, args) => {
    }
  }, [args.globals.fontFamily]);

+  useEffect(() => {
+    if (args.globals.accentColor) {
+      tokensAccessor.updateSeedColor(args.globals.accentColor);
+
+      setTheme((prevState) => {
+        return {
+          ...prevState,
+          ...tokensAccessor.getColors(),
+        };
+      });
+    }
+  }, [args.globals.accentColor]);
+
+  useEffect(() => {
+    if (args.globals.borderRadius) {
+      tokensAccessor.updateBorderRadius({
+        1: args.globals.borderRadius,
+      });
+
+      setTheme((prevState) => {
+        return {
+          ...prevState,
+          ...tokensAccessor.getBorderRadius(),
+        };
+      });
+    }
+  }, [args.globals.borderRadius]);
+
  return (
-    <StyledContainer
-      accentColor={args.globals.accentColor || "#553DE9"}
-      borderRadius={args.globals.borderRadius}
-    >
-      <GlobalStyles />
-      <Story fontFamily={args.globals.fontFamily} />
+    <StyledContainer>
+      <ThemeProvider theme={theme}>
+        <GlobalStyles />
+        <Story fontFamily={args.globals.fontFamily} />
+      </ThemeProvider>
    </StyledContainer>
  );
 };
--- a/app/client/packages/storybook/.storybook/main.js
+++ b/app/client/packages/storybook/.storybook/main.js
@ -22,8 +22,8 @@ async function webpackConfig(config) {

 module.exports = {
  stories: [
-    "../../wds/src/**/*.stories.mdx",
-    "../../wds/src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../../design-system/widgets/src/**/*.stories.mdx",
+    "../../design-system/widgets/src/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
@ -38,4 +38,13 @@ module.exports = {
  core: {
    builder: "@storybook/builder-webpack5",
  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    },
+  },
 };
--- a/app/client/packages/storybook/.storybook/styles.css
+++ b/app/client/packages/storybook/.storybook/styles.css
@ -1,6 +1,3 @@
-@import url("../../wds/src/styles/tokens/raw.css");
-@import url("../../wds/src/styles/tokens/semantic.css");
-
 html,
 body,
 #root {
--- a/app/client/packages/storybook/package.json
+++ b/app/client/packages/storybook/package.json
@ -13,7 +13,6 @@
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
@ -39,9 +38,9 @@
  "dependencies": {
    "@capsizecss/core": "^3.1.0",
    "@capsizecss/metrics": "^1.0.1",
-    "@design-system/wds": "*",
    "colorjs.io": "^0.4.3",
    "react": "^17.0.2",
+    "react-docgen-typescript": "^2.2.2",
    "react-dom": "^17.0.2"
  }
 }
--- a/app/client/packages/wds/.prettierignore
+++ b/app/client/packages/wds/.prettierignore
@ -1 +0,0 @@
-src/tokens.json
--- a/app/client/packages/wds/src/components/Button/Button.stories.mdx
+++ b/app/client/packages/wds/src/components/Button/Button.stories.mdx
@ -1,107 +0,0 @@
-<!-- Button.stories.mdx -->
-
-import { Canvas, Meta, Story } from "@storybook/addon-docs";
-
-import { Button } from "./";
-
-<Meta
-  title="WDS/Button"
-  component={Button}
-  parameters={{
-    height: 32,
-    width: 180,
-  }}
-  argTypes={{
-    children: {
-      name: "children",
-      description: "Text shown by button",
-      defaultValue: "Button",
-      control: {
-        type: "text",
-      },
-      table: {
-        type: {
-          summary: "The label contents",
-          detail: "Text displayed by the Badge",
-        },
-      },
-    },
-  }}
-/>
-
-export const Template = (args, { globals: { fontFamily } }) => (
-  <Button {...args} fontFamily={fontFamily} />
-);
-
-# Button
-
-A button is a clickable element that is used to trigger an action.
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-# Variants
-
-There are 4 variants of the button component.
-
-<Canvas>
-  <Story
-    name="Filled Variant"
-    args={{
-      children: "Filled",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="Outline Variant"
-    args={{
-      variant: "outline",
-      children: "Outline",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="Light Variant"
-    args={{
-      variant: "light",
-      children: "Light",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="Subtle Variant"
-    args={{
-      variant: "subtle",
-      children: "Subtle",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-# States
-
-<Canvas>
-  <Story
-    name="Disabled State"
-    args={{
-      isDisabled: true,
-      children: "Disabled",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="Loading State"
-    args={{
-      isLoading: true,
-      children: "Loading",
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
--- a/app/client/packages/wds/src/components/Button/Button.tsx
+++ b/app/client/packages/wds/src/components/Button/Button.tsx
@ -1,82 +0,0 @@
-import type { HTMLAttributes } from "react";
-import React, { useMemo, forwardRef } from "react";
-
-import { Text } from "../Text";
-import { Spinner } from "../Spinner";
-import { StyledButton } from "./index.styled";
-import type { fontFamilyTypes } from "../../utils/typography";
-
-// types
-export enum ButtonVariant {
-  FILLED = "filled",
-  OUTLINE = "outline",
-  LIGHT = "light",
-  SUBTLE = "subtle",
-}
-
-export type ButtonProps = {
-  accentColor?: string;
-  variant?: ButtonVariant;
-  boxShadow?: string;
-  borderRadius?: string;
-  tooltip?: string;
-  children?: React.ReactNode;
-  isDisabled?: boolean;
-  isLoading?: boolean;
-  className?: string;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
-  as?: keyof JSX.IntrinsicElements;
-  fontFamily?: fontFamilyTypes;
-} & HTMLAttributes<HTMLButtonElement>;
-
-// component
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const {
-    children,
-    fontFamily,
-    isDisabled,
-    isLoading,
-    leadingIcon,
-    trailingIcon,
-    variant = ButtonVariant.FILLED,
-    ...rest
-  } = props;
-
-  const content = useMemo(() => {
-    if (isLoading) return <Spinner />;
-
-    return (
-      <>
-        {leadingIcon && <span data-component="leadingIcon">{leadingIcon}</span>}
-        {children && (
-          <Text data-component="text" fontFamily={fontFamily}>
-            {children}
-          </Text>
-        )}
-        {trailingIcon && (
-          <span data-component="trailingIcon">{trailingIcon}</span>
-        )}
-      </>
-    );
-  }, [isLoading, children, trailingIcon, leadingIcon, fontFamily]);
-
-  return (
-    <StyledButton
-      {...rest}
-      data-button
-      data-disabled={isDisabled || undefined}
-      data-loading={isLoading || undefined}
-      data-variant={variant}
-      disabled={isDisabled || undefined}
-      ref={ref}
-      variant={variant}
-    >
-      {content}
-    </StyledButton>
-  );
-}) as typeof StyledButton;
-
-Button.displayName = "Button";
-
-export { Button };
--- a/app/client/packages/wds/src/components/Button/index.styled.tsx
+++ b/app/client/packages/wds/src/components/Button/index.styled.tsx
@ -1,195 +0,0 @@
-import styled, { css } from "styled-components";
-
-import {
-  lightenColor,
-  getComplementaryGrayscaleColor,
-  calulateHoverColor,
-  darkenColor,
-  parseColor,
-} from "../../utils/colors";
-import type { ButtonProps } from "./Button";
-
-/**
- * creates locally scoped css variables to be used in variants styles
- *
- */
-export const variantTokens = css`
-  ${({ accentColor: color }: Pick<ButtonProps, "accentColor" | "variant">) => {
-    if (!color) return "";
-
-    const accentColor = parseColor(color).toString({ format: "hex" });
-    const accentHoverColor = calulateHoverColor(color);
-    const lightAccentColor = lightenColor(color);
-    const accentActiveColor = darkenColor(accentHoverColor);
-    const lightAccentHoverColor = calulateHoverColor(lightAccentColor);
-    const textColor = getComplementaryGrayscaleColor(accentColor);
-    const onAccentBorderColor = darkenColor(color, 0.1);
-    const onAccentLightBorderColor = lightenColor(color, 0.98);
-    const lightAcctentActiveColor = darkenColor(lightAccentHoverColor, 0.03);
-
-    return css`
-      --wds-v2-color-bg-accent: ${accentColor};
-      --wds-v2-color-bg-accent-hover: ${accentHoverColor};
-      --wds-v2-color-bg-accent-light: ${lightAccentColor};
-      --wds-v2-color-bg-accent-active: ${accentActiveColor};
-      --wds-v2-color-bg-accent-light-active: ${lightAcctentActiveColor};
-      --wds-v2-color-bg-accent-light-hover: ${lightAccentHoverColor};
-
-      --wds-v2-color-text-accent: ${accentColor};
-      --wds-v2-color-text-onaccent: ${textColor};
-
-      --wds-v2-color-border-accent: ${accentColor};
-      --wds-vs-color-border-onaccent: ${onAccentBorderColor};
-      --wds-vs-color-border-onaccent-light: ${onAccentLightBorderColor};
-    `;
-  }}
-`;
-
-export const StyledButton = styled.button<ButtonProps>`
-  display: flex;
-  overflow: hidden;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  outline: 0;
-  cursor: pointer;
-  white-space: nowrap;
-  gap: var(--wds-v2-spacing-4);
-  padding: var(--wds-v2-spacing-2) var(--wds-v2-spacing-4);
-  min-height: 32px;
-  border-radius: var(--wds-v2-radii);
-  box-shadow: var(--wds-v2-shadow);
-  border-width: 0;
-
-  ${({ borderRadius }) => borderRadius && `--wds-v2-radii: ${borderRadius};`};
-  ${({ boxShadow }) => boxShadow && `--wds-v2-shadow: ${boxShadow};`};
-
-  &[data-loading] {
-    pointer-events: none;
-  }
-
-  & [data-component="text"] {
-    width: 100%;
-
-    span {
-      display: block;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-
-  ${variantTokens}
-
-  /**
-  * ----------------------------------------------------------------------------
-  * variants
-  * ----------------------------------------------------------------------------
-  */
-  &[data-variant="filled"] {
-    background-color: var(--wds-v2-color-bg-accent);
-    color: var(--wds-v2-color-text-onaccent);
-    border-color: transparent;
-
-    &:hover {
-      background-color: var(--wds-v2-color-bg-accent-hover);
-    }
-
-    &:active {
-      background-color: var(--wds-v2-color-bg-accent-active);
-    }
-  }
-
-  &[data-variant="outline"] {
-    border-width: 1px;
-    background-color: transparent;
-    color: var(--wds-v2-color-text-accent);
-    border-color: var(--wds-v2-color-border-accent);
-
-    &:hover {
-      background-color: var(--wds-v2-color-bg-accent-light-hover);
-    }
-
-    &:active {
-      background-color: var(--wds-v2-color-bg-accent-light-active);
-    }
-
-    &:hover:disabled {
-      background-color: transparent;
-    }
-  }
-
-  &[data-variant="light"] {
-    background: var(--wds-v2-color-bg-accent-light);
-    border-color: transparent;
-    color: var(--wds-v2-color-text-accent);
-    border-width: 0;
-
-    &:hover {
-      background: var(--wds-v2-color-bg-accent-light-hover);
-    }
-
-    &:active {
-      background: var(--wds-v2-color-bg-accent-light-active);
-    }
-  }
-
-  &[data-variant="subtle"] {
-    border-color: transparent;
-    color: var(--wds-v2-color-text-accent);
-    border-width: 0;
-    background: transparent;
-
-    &:hover {
-      background: var(--wds-v2-color-bg-accent-light-hover);
-    }
-
-    &:active {
-      background: var(--wds-v2-color-bg-accent-light-active);
-    }
-  }
-
-  &[data-variant="input"] {
-    text-align: left;
-    background: var(--wds-v2-color-bg-select);
-    box-shadow: rgb(27 31 36 / 4%) 0px 1px 0px,
-      rgb(255 255 255 / 25%) 0px 1px 0px inset;
-    border-width: 1px;
-    border-color: var(--wds-v2-color-border);
-    padding: var(--wds-v2-spacing-2) var(--wds-v2-spacing-2);
-
-    &:hover {
-      background-color: var(--wds-v2-color-bg-select-hover);
-    }
-  }
-
-  /**
-  * ----------------------------------------------------------------------------
-  * psudo states
-  * ----------------------------------------------------------------------------
-  */
-  /* // we don't use :focus-visible because not all browsers (safari) have it yet */
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--wds-v2-color-border-focus);
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: none;
-    box-shadow: none;
-  }
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &:is([data-disabled]),
-  &:is(:disabled) {
-    pointer-events: none;
-    opacity: 0.5;
-    box-shadow: none;
-    background-image: none;
-  }
-`;
--- a/app/client/packages/wds/src/components/Button/index.tsx
+++ b/app/client/packages/wds/src/components/Button/index.tsx
@ -1,2 +0,0 @@
-export { Button } from "./Button";
-export { transformV1ButtonProps } from "./utils";
--- a/app/client/packages/wds/src/components/Button/utils.ts
+++ b/app/client/packages/wds/src/components/Button/utils.ts
@ -1,27 +0,0 @@
-import { ButtonVariant } from "./Button";
-
-export const transformV1ButtonProps = (v1Props: any) => {
-  const { buttonColor, buttonVariant, text } = v1Props;
-
-  const transformedProps: any = {};
-
-  switch (buttonVariant) {
-    case "PRIMARY":
-      transformedProps.variant = ButtonVariant.FILLED;
-      break;
-    case "SECONDARY":
-      transformedProps.variant = ButtonVariant.OUTLINE;
-      break;
-    case "TERTIARY":
-      transformedProps.variant = ButtonVariant.SUBTLE;
-      break;
-  }
-
-  transformedProps.children = text;
-  transformedProps.accentColor = buttonColor;
-
-  return {
-    ...v1Props,
-    ...transformedProps,
-  };
-};
--- a/app/client/packages/wds/src/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/app/client/packages/wds/src/components/ButtonGroup/ButtonGroup.stories.tsx
@ -1,40 +0,0 @@
-import React from "react";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
-
-import { ButtonGroup } from "./index";
-import { Button } from "../Button";
-
-export default {
-  title: "WDS/Button Group",
-  component: ButtonGroup,
-  argTypes: {
-    variant: {
-      defaultValue: "filled",
-      options: ["filled", "outline", "subtle", "light"],
-      control: { type: "radio" },
-    },
-  },
-} as ComponentMeta<typeof Button>;
-
-// eslint-disable-next-line react/function-component-definition
-const Template: ComponentStory<typeof Button> = ({ orientation, ...args }) => {
-  return (
-    <ButtonGroup orientation={orientation}>
-      <Button {...args}>Option 1</Button>
-      <Button {...args}>Option 2</Button>
-      <Button {...args}>Option 3</Button>
-    </ButtonGroup>
-  );
-};
-
-export const TextStory = Template.bind({});
-TextStory.storyName = "Button Group";
-TextStory.args = {
-  isLoading: false,
-  isDisabled: false,
-};
-
-TextStory.parameters = {
-  height: "32px",
-  width: "300px",
-};
--- a/app/client/packages/wds/src/constants/defaultTokens.json
+++ b/app/client/packages/wds/src/constants/defaultTokens.json
@ -1,13 +0,0 @@
-{
-  "seedColor": "#1a7f37",
-  "rootUnit": 4,
-  "isDarkMode": false,
-  "borderRadius": 4,
-  "boxShadow": {
-    "x": 0,
-    "y": 0,
-    "blur": 0,
-    "spread": 0,
-    "color": "rgba(0, 0, 0, 0.2)"
-  }
-}
--- a/app/client/packages/wds/src/styles/tokens/raw.css
+++ b/app/client/packages/wds/src/styles/tokens/raw.css
@ -1,8 +0,0 @@
-:root {
-  --wds-v2-spacing-root: 4px;
-
-  --wds-v2-spacing-0: 0px;
-  --wds-v2-spacing-1: var(--wds-v2-spacing-root);
-  --wds-v2-spacing-2: calc(var(--wds-v2-spacing-root) * 2);
-  --wds-v2-spacing-4: calc(var(--wds-v2-spacing-root) * 4);
-}
--- a/app/client/packages/wds/src/styles/tokens/semantic.css
+++ b/app/client/packages/wds/src/styles/tokens/semantic.css
@ -1,11 +0,0 @@
-:root {
-  --wds-v2-color-bg-disabled: var(--wds-v2-color-gray-100);
-  --wds-v2-color-text-disabled: var(--wds-v2-color-gray-400);
-
-  --wds-v2-color-border: var(--wds-v2-color-gray-200);
-  --wds-v2-color-border-disabled: var(--wds-v2-color-gray-200);
-  --wds-v2-color-border-focus: var(--wds-v2-color-blue-300);
-
-  --wds-v2-color-bg-select: var(--wds-v2-color-white);
-  --wds-v2-color-bg-select-hover: var(--wds-v2-color-gray-100);
-}
--- a/app/client/packages/wds/src/utils/buildTokens.ts
+++ b/app/client/packages/wds/src/utils/buildTokens.ts
@ -1,58 +0,0 @@
-import * as fs from "fs";
-import { kebabCase, startCase, range } from "lodash";
-
-import defaults from "../constants/defaultTokens.json";
-import { createSemanticColorTokens } from "./createTokens";
-
-type Token = {
-  value: string;
-  type: "color" | "sizing" | "borderRadius" | "boxShadow" | "opacity";
-};
-
-// generating semantic tokens
-const semanticColors = createSemanticColorTokens(defaults.seedColor);
-
-const transformedSemanticTokens: Record<string, Token> = {};
-for (const [key, value] of Object.entries(semanticColors)) {
-  transformedSemanticTokens[kebabCase(`color${startCase(key)}`)] = {
-    value: value,
-    type: "color",
-  };
-}
-
-// generating spacing tokens
-const spacingTokens: Record<string, Token> = {};
-
-range(6).map((value, index) => {
-  spacingTokens[`spacing-${index}`] = {
-    value: `${defaults.rootUnit * value}px`,
-    type: "sizing",
-  };
-});
-
-const finalTokens = {
-  semantic: {
-    ...transformedSemanticTokens,
-    "opacity-disabled": {
-      value: 0.5,
-      type: "opacity",
-    },
-  },
-  raw: {
-    ...spacingTokens,
-    "border-radius": {
-      value: `${defaults.borderRadius}px`,
-      type: "borderRadius",
-    },
-    "box-shadow": {
-      value: defaults.boxShadow,
-      type: "boxShadow",
-    },
-  },
-};
-
-// write to file
-fs.writeFileSync(
-  `${__dirname}/../tokens.json`,
-  JSON.stringify(finalTokens, null, 2) + "\r\n",
-);
--- a/app/client/packages/wds/src/utils/colors.ts
+++ b/app/client/packages/wds/src/utils/colors.ts
@ -1,128 +0,0 @@
-import Color from "colorjs.io";
-
-/* Color Utility Functions. Lightness */
-
-export const isVeryDark = (hex = "#000") => {
-  return parseColor(hex).oklch.l < 30;
-};
-
-export const isVeryLight = (hex = "#000") => {
-  return parseColor(hex).oklch.l > 90;
-};
-
-/* Chroma */
-
-export const isAchromatic = (hex = "#000") => {
-  return parseColor(hex).oklch.c < 5;
-};
-
-export const isColorful = (hex = "#000") => {
-  return parseColor(hex).oklch.c > 17;
-};
-
-/* Hue */
-
-export const isCold = (hex = "#000") => {
-  return parseColor(hex).oklch.h >= 120 && parseColor(hex).oklch.h <= 300;
-};
-
-export const isBlue = (hex = "#000") => {
-  return parseColor(hex).oklch.h >= 230 && parseColor(hex).oklch.h <= 270;
-};
-
-export const isGreen = (hex = "#000") => {
-  return parseColor(hex).oklch.h >= 105 && parseColor(hex).oklch.h <= 165;
-};
-
-export const isYellow = (hex = "#000") => {
-  return parseColor(hex).oklch.h >= 60 && parseColor(hex).oklch.h <= 75;
-};
-
-export const isRed = (hex = "#000") => {
-  return parseColor(hex).oklch.h >= 29 && parseColor(hex).oklch.h <= 50;
-};
-
-/**
- * returns black or white based on the constrast of the color compare to white
- * using APCA algorithm
- *
- * @param color
- * @returns
- */
-export const getComplementaryGrayscaleColor = (hex = "#000") => {
-  const bg = parseColor(hex);
-  const text = new Color("#fff");
-
-  const contrast = bg.contrast(text, "APCA");
-
-  // if contrast is less than -35 then the text color should be white
-  if (contrast < -35) return "#fff";
-
-  return "#000";
-};
-
-/**
- * lightens color
- *
- * @param color
- * @param amount
- * @returns
- */
-export const lightenColor = (hex = "#000", lightness = 0.9) => {
-  const color = parseColor(hex);
-
-  color.set("oklch.l", () => lightness);
-
-  return color.toString({ format: "hex" });
-};
-
-/**
- * darkens color by a given amount
- *
- * @param hex
- * @param lightness
- * @returns
- */
-export const darkenColor = (hex = "#000", lightness = 0.03) => {
-  const color = parseColor(hex);
-
-  color.set("oklch.l", (l: any) => l - lightness);
-
-  return color.toString({ format: "hex" });
-};
-
-/**
- * calculate the hover color
- *
- * @param hex
- * @returns
- */
-export const calulateHoverColor = (hex = "#000") => {
-  const color = parseColor(hex);
-
-  switch (true) {
-    case color.get("oklch.l") > 0.35:
-      color.set("oklch.l", (l: any) => l + 0.03);
-      break;
-    case color.get("oklch.l") < 0.35:
-      color.set("oklch.l", (l: any) => l - 0.03);
-      break;
-  }
-
-  return color.toString({ format: "hex" });
-};
-
-/**
- * Parses a color and returns a color object
- * if the color is invalid it returns black
- *
- * @param hex
- * @returns
- */
-export const parseColor = (hex = "#000") => {
-  try {
-    return new Color(hex);
-  } catch (error) {
-    return new Color("#000");
-  }
-};
--- a/app/client/packages/wds/src/utils/createTokens.ts
+++ b/app/client/packages/wds/src/utils/createTokens.ts
@ -1,112 +0,0 @@
-import kebabCase from "lodash/kebabCase";
-import type { CSSProperties } from "styled-components";
-import { css } from "styled-components";
-import {
-  lightenColor,
-  darkenColor,
-  getComplementaryGrayscaleColor,
-  parseColor,
-  calulateHoverColor,
-} from "./colors";
-import defaultsTokens from "../constants/defaultTokens.json";
-
-/**
- * This function is used to create tokens for widgets
- */
-export const createCSSVars = css`
-  ${({
-    accentColor: color,
-    borderRadius,
-    boxShadow,
-  }: {
-    accentColor: CSSProperties["color"];
-    borderRadius: CSSProperties["borderRadius"];
-    boxShadow: CSSProperties["boxShadow"];
-  }) => {
-    const colorTokens: any = createSemanticColorTokens(color);
-
-    return css`
-      ${Object.keys(colorTokens).map(
-        (key) => css`
-          --wds-v2-color-${kebabCase(key)}: ${colorTokens[key]};`,
-      )}
-
-      --wds-v2-shadow: ${boxShadow};
-      --wds-v2-radii: ${borderRadius};
-    `;
-  }}
-`;
-
-/** Semantic tokens utils */
-
-const getBgAccentColor = (color: CSSProperties["color"]) => {
-  return parseColor(color).toString({ format: "hex" });
-};
-
-const getBgAccentHoverColor = (color: CSSProperties["color"]) => {
-  return calulateHoverColor(color);
-};
-
-const getBgAccentSubtleColor = (color: CSSProperties["color"]) => {
-  return lightenColor(color);
-};
-
-const getBgAccentSubtleHoverColor = (color: CSSProperties["color"]) => {
-  return calulateHoverColor(color);
-};
-
-const getBgAccentActiveColor = (color: CSSProperties["color"]) => {
-  return darkenColor(color);
-};
-
-const getFgOnAccentTextColor = (color: CSSProperties["color"]) => {
-  return getComplementaryGrayscaleColor(color);
-};
-
-const getAccentSubtleActiveColor = (color: CSSProperties["color"]) => {
-  return darkenColor(color, 0.03);
-};
-
-const getBdOnAccentColor = (color: CSSProperties["color"]) => {
-  return darkenColor(color, 0.1);
-};
-
-const getBdOnAccentSubtleColor = (color: CSSProperties["color"]) => {
-  return lightenColor(color, 0.98);
-};
-
-/**
- * create semantic color tokens
- *
- * @param color
- * @returns
- */
-export const createSemanticColorTokens = (
-  color: CSSProperties["color"] = defaultsTokens.seedColor,
-) => {
-  const bgAccent = getBgAccentColor(color);
-  const bgAccentHover = getBgAccentHoverColor(color);
-  const bgAccentSubtle = getBgAccentSubtleColor(color);
-  const bgAccentActive = getBgAccentActiveColor(bgAccentHover);
-  const bgAccentSubtleHover = getBgAccentSubtleHoverColor(bgAccentSubtle);
-  const fgOnaccent = getFgOnAccentTextColor(bgAccent);
-  const bgAccentSubtleActive = getAccentSubtleActiveColor(bgAccentSubtleHover);
-  const bgOnAccent = getBdOnAccentColor(color);
-  const bdOnAccentSubtle = getBdOnAccentSubtleColor(color);
-
-  return {
-    bgAccent,
-    bgAccentHover,
-    bgAccentSubtle,
-    bgAccentActive,
-    bgAccentSubtleActive,
-    bgAccentSubtleHover,
-
-    fgAccent: color,
-    fgOnaccent,
-
-    bdAccent: color,
-    bdOnaccent: bgOnAccent,
-    bdOnaccentSubtle: bdOnAccentSubtle,
-  };
-};
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@ -2896,17 +2896,12 @@
  integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==

 "@eslint-community/eslint-utils@^4.2.0":
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.3.0.tgz#a556790523a351b4e47e9d385f47265eaaf9780a"
-  integrity sha512-v3oplH6FYCULtFuCeqyuTd9D2WKO937Dxdq+GmHOLL72TTRriLxz2VLlNfkZRsvj6PKnOPAtuT6dwrs/pA5DvA==
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
  dependencies:
    eslint-visitor-keys "^3.3.0"

-"@eslint-community/regexpp@^4.4.0":
-  version "4.4.0"
-  resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.4.0.tgz#3e61c564fcd6b921cb789838631c5ee44df09403"
-  integrity sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ==
-
 "@eslint/eslintrc@^1.2.3":
  version "1.2.3"
  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.3.tgz"
@ -2937,31 +2932,11 @@
    minimatch "^3.1.2"
    strip-json-comments "^3.1.1"

-"@eslint/eslintrc@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.1.tgz#7888fe7ec8f21bc26d646dbd2c11cd776e21192d"
-  integrity sha512-eFRmABvW2E5Ho6f5fHLqgena46rOj7r7OKHYfLElqcBfGFHHpjBhivyi5+jOEQuSpdc/1phIZJlbC2te+tZNIw==
-  dependencies:
-    ajv "^6.12.4"
-    debug "^4.3.2"
-    espree "^9.5.0"
-    globals "^13.19.0"
-    ignore "^5.2.0"
-    import-fresh "^3.2.1"
-    js-yaml "^4.1.0"
-    minimatch "^3.1.2"
-    strip-json-comments "^3.1.1"
-
 "@eslint/js@8.35.0":
  version "8.35.0"
  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.35.0.tgz#b7569632b0b788a0ca0e438235154e45d42813a7"
  integrity sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw==

-"@eslint/js@8.36.0":
-  version "8.36.0"
-  resolved "https://registry.npmjs.org/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe"
-  integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==
-
 "@faker-js/faker@^7.4.0":
  version "7.4.0"
  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-7.4.0.tgz#cac720d860a89d487b47e55e66a4fd114f1d3fe5"
@ -2992,6 +2967,45 @@
    lodash.isundefined "^3.0.1"
    lodash.uniq "^4.5.0"

+"@formatjs/ecma402-abstract@1.14.3":
+  version "1.14.3"
+  resolved "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.14.3.tgz#6428f243538a11126180d121ce8d4b2f17465738"
+  integrity sha512-SlsbRC/RX+/zg4AApWIFNDdkLtFbkq3LNoZWXZCE/nHVKqoIJyaoQyge/I0Y38vLxowUn9KTtXgusLD91+orbg==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.2.32"
+    tslib "^2.4.0"
+
+"@formatjs/fast-memoize@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.0.0.tgz#e9655d2d2bba87c14b277f5bfc8caf4ba8114223"
+  integrity sha512-U88W/qhEs5ZuX+Inw/DZHjA6w2YCTWTNzTkprzNznyWoGl8h+XtlOCW3nM78+VX7lSbvpMdnaHmWLnDnjJjuwg==
+  dependencies:
+    tslib "^2.4.0"
+
+"@formatjs/icu-messageformat-parser@2.3.0":
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.3.0.tgz#8e8fd577c3e39454ef14bba4963f2e1d5f2cc46c"
+  integrity sha512-xqtlqYAbfJDF4b6e4O828LBNOWXrFcuYadqAbYORlDRwhyJ2bH+xpUBPldZbzRGUN2mxlZ4Ykhm7jvERtmI8NQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.14.3"
+    "@formatjs/icu-skeleton-parser" "1.3.18"
+    tslib "^2.4.0"
+
+"@formatjs/icu-skeleton-parser@1.3.18":
+  version "1.3.18"
+  resolved "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.18.tgz#7aed3d60e718c8ad6b0e64820be44daa1e29eeeb"
+  integrity sha512-ND1ZkZfmLPcHjAH1sVpkpQxA+QYfOX3py3SjKWMUVGDow18gZ0WPqz3F+pJLYQMpS2LnnQ5zYR2jPVYTbRwMpg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.14.3"
+    tslib "^2.4.0"
+
+"@formatjs/intl-localematcher@0.2.32":
+  version "0.2.32"
+  resolved "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.32.tgz#00d4d307cd7d514b298e15a11a369b86c8933ec1"
+  integrity sha512-k/MEBstff4sttohyEpXxCmC3MqbUn9VvHGlZ8fauLzkbwXmVrEeyzS+4uhrvAk9DWU9/7otYWxyDox4nT/KVLQ==
+  dependencies:
+    tslib "^2.4.0"
+
 "@fortawesome/fontawesome-common-types@6.3.0":
  version "6.3.0"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz#51f734e64511dbc3674cd347044d02f4dd26e86b"
@ -3222,6 +3236,35 @@
  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==

+"@internationalized/date@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@internationalized/date/-/date-3.1.0.tgz#da48aeaa971df6ad410cd32597c174d6cab9a3b4"
+  integrity sha512-wjeur7K4AecT+YwoBmBXQ/+n5lP69tuZc34hw09s44EozZK7FZHSyfPvRp5/xEb2D6abLboskDY4jG+Nt0TNUQ==
+  dependencies:
+    "@swc/helpers" "^0.4.14"
+
+"@internationalized/message@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@internationalized/message/-/message-3.1.0.tgz#b284014cd8bbb430a648b76c87c62bdca968b04c"
+  integrity sha512-Oo5m70FcBdADf7G8NkUffVSfuCdeAYVfsvNjZDi9ELpjvkc4YNJVTHt/NyTI9K7FgAVoELxiP9YmN0sJ+HNHYQ==
+  dependencies:
+    "@swc/helpers" "^0.4.14"
+    intl-messageformat "^10.1.0"
+
+"@internationalized/number@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/@internationalized/number/-/number-3.2.0.tgz#dffb661cacd61a87b814c47b7d5240a286249066"
+  integrity sha512-GUXkhXSX1Ee2RURnzl+47uvbOxnlMnvP9Er+QePTjDjOPWuunmLKlEkYkEcLiiJp7y4l9QxGDLOlVr8m69LS5w==
+  dependencies:
+    "@swc/helpers" "^0.4.14"
+
+"@internationalized/string@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@internationalized/string/-/string-3.1.0.tgz#0b365906a8c3f44800b0db52c2e990cff345abce"
+  integrity sha512-TJQKiyUb+wyAfKF59UNeZ/kELMnkxyecnyPCnBI1ma4NaXReJW+7Cc2mObXAqraIBJUVv7rgI46RLKrLgi35ng==
+  dependencies:
+    "@swc/helpers" "^0.4.14"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
  version "1.1.0"
  resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz"
@ -3579,6 +3622,7 @@
  version "5.10.1"
  resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-5.10.1.tgz#0227441a818144932dd6e8fd8f53eb7525dfe005"
  integrity sha512-Fhl2f5z/F+NVzZgPUPP9tP4NUUMeTBpmlmlo3mPuQztw1kmXdxtBjD1MzRS7A84FuaJNo2wxLhQ+Gnjtf3hZ8A==
+
 "@mdx-js/mdx@^1.6.22":
  version "1.6.22"
  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"
@ -3728,6 +3772,83 @@
  version "2.9.2"
  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz"

+"@react-aria/button@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.npmjs.org/@react-aria/button/-/button-3.7.0.tgz#b00635c8be0e47e19733c96f3702b699f65242b7"
+  integrity sha512-4DSGXrAWflzT4cQe/x0KdrPzz7hv9vZgqYJuNXQkpmeIMs1EmUKuby2xC+W9GHuZ+8dMxjTWKy3XdwX2tCM42A==
+  dependencies:
+    "@react-aria/focus" "^3.11.0"
+    "@react-aria/interactions" "^3.14.0"
+    "@react-aria/utils" "^3.15.0"
+    "@react-stately/toggle" "^3.5.0"
+    "@react-types/button" "^3.7.1"
+    "@react-types/shared" "^3.17.0"
+    "@swc/helpers" "^0.4.14"
+
+"@react-aria/focus@^3.11.0":
+  version "3.11.0"
+  resolved "https://registry.npmjs.org/@react-aria/focus/-/focus-3.11.0.tgz#8124b2341e8d43af72f3da85b08567bda45421b7"
+  integrity sha512-yPuWs9bAR9CMfIwyOPm2oXLPF19gNkUqW+ozSPhWbLMTEa8Ma09eHW1br4xbN+4ONOm/dCJsIkxTNPUkiLdQoA==
+  dependencies:
+    "@react-aria/interactions" "^3.14.0"
+    "@react-aria/utils" "^3.15.0"
+    "@react-types/shared" "^3.17.0"
+    "@swc/helpers" "^0.4.14"
+    clsx "^1.1.1"
+
+"@react-aria/i18n@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.7.0.tgz#c1dfcd7a76a5161cbccbd6980ecf201c9b4d1826"
+  integrity sha512-PZCWmhO9mJvelwiYlsXLY6W4L2o+oza3xnDx0cZDVqp/Hf+OwMAPHWtZsFRTKdjk4TaOPB/ISc9HknWn6UpY4w==
+  dependencies:
+    "@internationalized/date" "^3.1.0"
+    "@internationalized/message" "^3.1.0"
+    "@internationalized/number" "^3.2.0"
+    "@internationalized/string" "^3.1.0"
+    "@react-aria/ssr" "^3.5.0"
+    "@react-aria/utils" "^3.15.0"
+    "@react-types/shared" "^3.17.0"
+    "@swc/helpers" "^0.4.14"
+
+"@react-aria/interactions@^3.14.0":
+  version "3.14.0"
+  resolved "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.14.0.tgz#d6480985048c009d58b8572428010dc61093cfcc"
+  integrity sha512-e1Tkr0UTuYFpV21PJrXy7jEY542Vl+C2Fo70oukZ1fN+wtfQkzodsTIzyepXb7kVMGmC34wDisMJUrksVkfY2w==
+  dependencies:
+    "@react-aria/utils" "^3.15.0"
+    "@react-types/shared" "^3.17.0"
+    "@swc/helpers" "^0.4.14"
+
+"@react-aria/ssr@^3.5.0":
+  version "3.5.0"
+  resolved "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.5.0.tgz#40c1270a75868185f72a88cafe37bd1392f690cb"
+  integrity sha512-h0MJdSWOd1qObLnJ8mprU31wI8tmKFJMuwT22MpWq6psisOOZaga6Ml4u6Ee6M6duWWISjXvqO4Sb/J0PBA+nQ==
+  dependencies:
+    "@swc/helpers" "^0.4.14"
+
+"@react-aria/utils@^3.15.0":
+  version "3.15.0"
+  resolved "https://registry.npmjs.org/@react-aria/utils/-/utils-3.15.0.tgz#a836674dd40ec7f15e9f7a69b1a14f19b1ee42e6"
+  integrity sha512-aJZBG++iz1UwTW5gXFaHicKju4p0MPhAyBTcf2awHYWeTUUslDjJcEnNg7kjBYZBOrOSlA2rAt7/7C5CCURQPg==
+  dependencies:
+    "@react-aria/ssr" "^3.5.0"
+    "@react-stately/utils" "^3.6.0"
+    "@react-types/shared" "^3.17.0"
+    "@swc/helpers" "^0.4.14"
+    clsx "^1.1.1"
+
+"@react-spectrum/utils@^3.9.0":
+  version "3.9.0"
+  resolved "https://registry.npmjs.org/@react-spectrum/utils/-/utils-3.9.0.tgz#60d782efce26c5ebed53a587177edbbf9e046c1e"
+  integrity sha512-I1JKwiyLE54mAT7Z2wadVKoai1Q60QFg4XNuYUwk8TwWAEz7DUUHucntHAND6dqFpVIMK1Rk9lcZBft43FF2BQ==
+  dependencies:
+    "@react-aria/i18n" "^3.7.0"
+    "@react-aria/ssr" "^3.5.0"
+    "@react-aria/utils" "^3.15.0"
+    "@react-types/shared" "^3.17.0"
+    "@swc/helpers" "^0.4.14"
+    clsx "^1.1.1"
+
 "@react-spring/animated@~9.4.0":
  version "9.4.1"
  resolved "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.1.tgz"
@ -3814,6 +3935,42 @@
    "@react-spring/shared" "~9.4.0"
    "@react-spring/types" "~9.4.0"

+"@react-stately/toggle@^3.5.0":
+  version "3.5.0"
+  resolved "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.5.0.tgz#fee5a29d7699e43867c52981834af5393f47c1c4"
+  integrity sha512-vKwLLkFsiIve4pXIQC/dqLAz7Z+qtzJ8+D00EXXO1Nf8YHcyIMDkTmi3NTM8Qtvmt4xX2hbJFiPDF6WvF6mBIg==
+  dependencies:
+    "@react-stately/utils" "^3.6.0"
+    "@react-types/checkbox" "^3.4.2"
+    "@react-types/shared" "^3.17.0"
+    "@swc/helpers" "^0.4.14"
+
+"@react-stately/utils@^3.6.0":
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/@react-stately/utils/-/utils-3.6.0.tgz#f273e7fcb348254347d2e88c8f0c45571060c207"
+  integrity sha512-rptF7iUWDrquaYvBAS4QQhOBQyLBncDeHF03WnHXAxnuPJXNcr9cXJtjJPGCs036ZB8Q2hc9BGG5wNyMkF5v+Q==
+  dependencies:
+    "@swc/helpers" "^0.4.14"
+
+"@react-types/button@^3.7.1":
+  version "3.7.1"
+  resolved "https://registry.npmjs.org/@react-types/button/-/button-3.7.1.tgz#a51d2617a593d9862c72306b3bf0c4b5bff4793d"
+  integrity sha512-c+8xjmqWSjI5/mEHVLbVSp0eh/z2UU8Ga+wqjbEUZUjm8uopYj1PaCAwZ7YgcAebyQrL/21GyjK6tFHKzuUdJQ==
+  dependencies:
+    "@react-types/shared" "^3.17.0"
+
+"@react-types/checkbox@^3.4.2":
+  version "3.4.2"
+  resolved "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.4.2.tgz#6089e9ef2d023415a5f871e312f30bae54143ba5"
+  integrity sha512-/NWFCEQLvVgo25afPt2jv4syxYvZeY/D/n2Y92IGtoNV4akdz4AuQ65+1X+JOhQc/ZbAblWw5fFWUZoQs3CLZg==
+  dependencies:
+    "@react-types/shared" "^3.17.0"
+
+"@react-types/shared@^3.17.0":
+  version "3.17.0"
+  resolved "https://registry.npmjs.org/@react-types/shared/-/shared-3.17.0.tgz#b7c5e318664aadb315d305a27dd2a209d1837d95"
+  integrity sha512-1SNZ/RhVrrQ1e6yE0bPV7d5Sfp+Uv0dfUEhwF9MAu2v5msu7AMewnsiojKNA0QA6Ing1gpDLjHCxtayQfuxqcg==
+
 "@redux-saga/core@^1.1.3":
  version "1.1.3"
  resolved "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.3.tgz"
@ -4092,7 +4249,7 @@
    lodash "^4.17.21"
    ts-dedent "^2.0.0"

-"@storybook/addon-docs@6.5.16", "@storybook/addon-docs@^6.5.16":
+"@storybook/addon-docs@6.5.16":
  version "6.5.16"
  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.5.16.tgz#3de912f51fb8e48b9a53b11a5b1cede067acbe70"
  integrity sha512-QM9WDZG9P02UvbzLu947a8ZngOrQeAKAT8jCibQFM/+RJ39xBlfm8rm+cQy3dm94wgtjmVkA3mKGOV/yrrsddg==
@ -4652,7 +4809,7 @@

 "@storybook/csf@^0.0.1":
  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
+  resolved "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
  integrity sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==
  dependencies:
    lodash "^4.17.15"
@ -5200,6 +5357,13 @@
    "@svgr/plugin-svgo" "^5.5.0"
    loader-utils "^2.0.0"

+"@swc/helpers@^0.4.14":
+  version "0.4.14"
+  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74"
+  integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==
+  dependencies:
+    tslib "^2.4.0"
+
 "@szmarczak/http-timer@^4.0.5":
  version "4.0.6"
  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.6.tgz#b4a914bb62e7c272d4e5989fe4440f812ab1d807"
@ -6092,7 +6256,7 @@

 "@types/semver@^7.3.12":
  version "7.3.13"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
+  resolved "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
  integrity sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==

 "@types/serve-index@^1.9.1":
@ -6333,13 +6497,13 @@
    "@typescript-eslint/types" "5.25.0"
    "@typescript-eslint/visitor-keys" "5.25.0"

-"@typescript-eslint/scope-manager@5.54.0":
-  version "5.54.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.54.0.tgz#74b28ac9a3fc8166f04e806c957adb8c1fd00536"
-  integrity sha512-VTPYNZ7vaWtYna9M4oD42zENOBrb+ZYyCNdFs949GcN8Miwn37b8b7eMj+EZaq7VK9fx0Jd+JhmkhjFhvnovhg==
+"@typescript-eslint/scope-manager@5.57.0":
+  version "5.57.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.57.0.tgz#79ccd3fa7bde0758059172d44239e871e087ea36"
+  integrity sha512-NANBNOQvllPlizl9LatX8+MHi7bx7WGIWYjPHDmQe5Si/0YEYfxSljJpoTyTWFTgRy3X8gLYSE4xQ2U+aCozSw==
  dependencies:
-    "@typescript-eslint/types" "5.54.0"
-    "@typescript-eslint/visitor-keys" "5.54.0"
+    "@typescript-eslint/types" "5.57.0"
+    "@typescript-eslint/visitor-keys" "5.57.0"

 "@typescript-eslint/type-utils@5.25.0":
  version "5.25.0"
@ -6355,10 +6519,10 @@
  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.25.0.tgz"
  integrity sha512-7fWqfxr0KNHj75PFqlGX24gWjdV/FDBABXL5dyvBOWHpACGyveok8Uj4ipPX/1fGU63fBkzSIycEje4XsOxUFA==

-"@typescript-eslint/types@5.54.0":
-  version "5.54.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.54.0.tgz#7d519df01f50739254d89378e0dcac504cab2740"
-  integrity sha512-nExy+fDCBEgqblasfeE3aQ3NuafBUxZxgxXcYfzYRZFHdVvk5q60KhCSkG0noHgHRo/xQ/BOzURLZAafFpTkmQ==
+"@typescript-eslint/types@5.57.0":
+  version "5.57.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.57.0.tgz#727bfa2b64c73a4376264379cf1f447998eaa132"
+  integrity sha512-mxsod+aZRSyLT+jiqHw1KK6xrANm19/+VFALVFP5qa/aiJnlP38qpyaTd0fEKhWvQk6YeNZ5LGwI1pDpBRBhtQ==

 "@typescript-eslint/typescript-estree@5.25.0":
  version "5.25.0"
@ -6373,13 +6537,13 @@
    semver "^7.3.7"
    tsutils "^3.21.0"

-"@typescript-eslint/typescript-estree@5.54.0":
-  version "5.54.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.54.0.tgz#f6f3440cabee8a43a0b25fa498213ebb61fdfe99"
-  integrity sha512-X2rJG97Wj/VRo5YxJ8Qx26Zqf0RRKsVHd4sav8NElhbZzhpBI8jU54i6hfo9eheumj4oO4dcRN1B/zIVEqR/MQ==
+"@typescript-eslint/typescript-estree@5.57.0":
+  version "5.57.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.57.0.tgz#ebcd0ee3e1d6230e888d88cddf654252d41e2e40"
+  integrity sha512-LTzQ23TV82KpO8HPnWuxM2V7ieXW8O142I7hQTxWIHDcCEIjtkat6H96PFkYBQqGFLW/G/eVVOB9Z8rcvdY/Vw==
  dependencies:
-    "@typescript-eslint/types" "5.54.0"
-    "@typescript-eslint/visitor-keys" "5.54.0"
+    "@typescript-eslint/types" "5.57.0"
+    "@typescript-eslint/visitor-keys" "5.57.0"
    debug "^4.3.4"
    globby "^11.1.0"
    is-glob "^4.0.3"
@ -6399,17 +6563,17 @@
    eslint-utils "^3.0.0"

 "@typescript-eslint/utils@^5.45.0":
-  version "5.54.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.54.0.tgz#3db758aae078be7b54b8ea8ea4537ff6cd3fbc21"
-  integrity sha512-cuwm8D/Z/7AuyAeJ+T0r4WZmlnlxQ8wt7C7fLpFlKMR+dY6QO79Cq1WpJhvZbMA4ZeZGHiRWnht7ZJ8qkdAunw==
+  version "5.57.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.57.0.tgz#eab8f6563a2ac31f60f3e7024b91bf75f43ecef6"
+  integrity sha512-ps/4WohXV7C+LTSgAL5CApxvxbMkl9B9AUZRtnEFonpIxZDIT7wC1xfvuJONMidrkB9scs4zhtRyIwHh4+18kw==
  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
    "@types/json-schema" "^7.0.9"
    "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.54.0"
-    "@typescript-eslint/types" "5.54.0"
-    "@typescript-eslint/typescript-estree" "5.54.0"
+    "@typescript-eslint/scope-manager" "5.57.0"
+    "@typescript-eslint/types" "5.57.0"
+    "@typescript-eslint/typescript-estree" "5.57.0"
    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
    semver "^7.3.7"

 "@typescript-eslint/visitor-keys@5.25.0":
@ -6420,12 +6584,12 @@
    "@typescript-eslint/types" "5.25.0"
    eslint-visitor-keys "^3.3.0"

-"@typescript-eslint/visitor-keys@5.54.0":
-  version "5.54.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.54.0.tgz#846878afbf0cd67c19cfa8d75947383d4490db8f"
-  integrity sha512-xu4wT7aRCakGINTLGeyGqDn+78BwFlggwBjnHa1ar/KaGagnmwLYmlrXIrgAaQ3AE1Vd6nLfKASm7LrFHNbKGA==
+"@typescript-eslint/visitor-keys@5.57.0":
+  version "5.57.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.57.0.tgz#e2b2f4174aff1d15eef887ce3d019ecc2d7a8ac1"
+  integrity sha512-ery2g3k0hv5BLiKpPuwYt9KBkAp2ugT6VvyShXdLOkax895EC55sP0Tx5L0fZaQueiK3fBLvHVvEl3jFS5ia+g==
  dependencies:
-    "@typescript-eslint/types" "5.54.0"
+    "@typescript-eslint/types" "5.57.0"
    eslint-visitor-keys "^3.3.0"

 "@ungap/promise-all-settled@1.1.2":
@ -8377,6 +8541,11 @@ class-utils@^0.3.5:
    isobject "^3.0.0"
    static-extend "^0.1.1"

+classnames@*:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 classnames@2.x, classnames@^2.3.1:
  version "2.3.1"
  resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
@ -8514,6 +8683,11 @@ clsx@^1.0.4, clsx@^1.1.0:
  version "1.1.1"
  resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz"

+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 co@^4.6.0:
  version "4.6.0"
  resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
@ -10500,7 +10674,7 @@ eslint-plugin-sort-destructure-keys@^1.3.5:

 eslint-plugin-storybook@^0.6.10:
  version "0.6.11"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.11.tgz#3c52fc3e994d1539d8a69c4028999402601eaacb"
+  resolved "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.11.tgz#3c52fc3e994d1539d8a69c4028999402601eaacb"
  integrity sha512-lIVmCqQgA0bhcuS1yWYBFrnPHBKPEQI+LHPDtlN81UE1/17onCqgwUW7Nyt7gS2OHjCAiOR4npjTGEoe0hssKw==
  dependencies:
    "@storybook/csf" "^0.0.1"
@ -10562,52 +10736,6 @@ eslint-webpack-plugin@^3.1.1:
    normalize-path "^3.0.0"
    schema-utils "^3.1.1"

-eslint@*:
-  version "8.36.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-8.36.0.tgz#1bd72202200a5492f91803b113fb8a83b11285cf"
-  integrity sha512-Y956lmS7vDqomxlaaQAHVmeb4tNMp2FWIvU/RnU5BD3IKMD/MJPr76xdyr68P8tV1iNMvN2mRK0yy3c+UjL+bw==
-  dependencies:
-    "@eslint-community/eslint-utils" "^4.2.0"
-    "@eslint-community/regexpp" "^4.4.0"
-    "@eslint/eslintrc" "^2.0.1"
-    "@eslint/js" "8.36.0"
-    "@humanwhocodes/config-array" "^0.11.8"
-    "@humanwhocodes/module-importer" "^1.0.1"
-    "@nodelib/fs.walk" "^1.2.8"
-    ajv "^6.10.0"
-    chalk "^4.0.0"
-    cross-spawn "^7.0.2"
-    debug "^4.3.2"
-    doctrine "^3.0.0"
-    escape-string-regexp "^4.0.0"
-    eslint-scope "^7.1.1"
-    eslint-visitor-keys "^3.3.0"
-    espree "^9.5.0"
-    esquery "^1.4.2"
-    esutils "^2.0.2"
-    fast-deep-equal "^3.1.3"
-    file-entry-cache "^6.0.1"
-    find-up "^5.0.0"
-    glob-parent "^6.0.2"
-    globals "^13.19.0"
-    grapheme-splitter "^1.0.4"
-    ignore "^5.2.0"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    is-glob "^4.0.0"
-    is-path-inside "^3.0.3"
-    js-sdsl "^4.1.4"
-    js-yaml "^4.1.0"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.4.1"
-    lodash.merge "^4.6.2"
-    minimatch "^3.1.2"
-    natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    strip-ansi "^6.0.1"
-    strip-json-comments "^3.1.0"
-    text-table "^0.2.0"
-
 eslint@^8.3.0:
  version "8.15.0"
  resolved "https://registry.npmjs.org/eslint/-/eslint-8.15.0.tgz"
@ -10713,15 +10841,6 @@ espree@^9.4.0:
    acorn-jsx "^5.3.2"
    eslint-visitor-keys "^3.3.0"

-espree@^9.5.0:
-  version "9.5.0"
-  resolved "https://registry.npmjs.org/espree/-/espree-9.5.0.tgz#3646d4e3f58907464edba852fa047e6a27bdf113"
-  integrity sha512-JPbJGhKc47++oo4JkEoTe2wjy4fmMwvFpgJT9cQzmfXKp22Dr6Hf1tdCteLz1h0P3t+mGvWZ+4Uankvh8+c6zw==
-  dependencies:
-    acorn "^8.8.0"
-    acorn-jsx "^5.3.2"
-    eslint-visitor-keys "^3.3.0"
-
 esprima@^4.0.0, esprima@^4.0.1:
  version "4.0.1"
  resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
@ -12748,6 +12867,16 @@ interweave@^12.7.2:
  dependencies:
    escape-html "^1.0.3"

+intl-messageformat@^10.1.0:
+  version "10.3.2"
+  resolved "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.3.2.tgz#39b6929bbb41e47b122b24a87dca95efe2cbf8c3"
+  integrity sha512-kGY1KrpxPGbWX/yz6rpWQahBh5bJC6pIbq/cTzVYlmAYjRVzP+l2MulagbZf/5mABbcLT/0RJbZC46Iw6Mhmtw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.14.3"
+    "@formatjs/fast-memoize" "2.0.0"
+    "@formatjs/icu-messageformat-parser" "2.3.0"
+    tslib "^2.4.0"
+
 invariant@^2.2.4:
  version "2.2.4"
  resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
@ -17115,11 +17244,6 @@ prettier-linter-helpers@^1.0.0:
  dependencies:
    fast-diff "^1.1.2"

-prettier@*, prettier@^2.8.6:
-  version "2.8.6"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.6.tgz#5c174b29befd507f14b83e3c19f83fdc0e974b71"
-  integrity sha512-mtuzdiBbHwPEgl7NxWlqOkithPyp4VN93V7VeHVWBF+ad3I5avc0RVDT4oImXQy9H/AqxA2NSQH8pSxHW6FYbQ==
-
 "prettier@>=2.2.1 <=2.3.0":
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
@ -17130,6 +17254,11 @@ prettier@^2.6.2:
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==

+prettier@^2.8.6:
+  version "2.8.6"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.6.tgz#5c174b29befd507f14b83e3c19f83fdc0e974b71"
+  integrity sha512-mtuzdiBbHwPEgl7NxWlqOkithPyp4VN93V7VeHVWBF+ad3I5avc0RVDT4oImXQy9H/AqxA2NSQH8pSxHW6FYbQ==
+
 pretty-bytes@^5.3.0:
  version "5.4.1"
  resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.4.1.tgz"
@ -17718,7 +17847,7 @@ react-dnd@^9.3.4:
    hoist-non-react-statics "^3.3.0"
    shallowequal "^1.1.0"

-react-docgen-typescript@^2.1.1:
+react-docgen-typescript@^2.1.1, react-docgen-typescript@^2.2.2:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"
  integrity sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==
@ -17744,6 +17873,14 @@ react-documents@^1.0.4:
  resolved "https://registry.npmjs.org/react-documents/-/react-documents-1.0.4.tgz"
  integrity sha512-EpoY+MZEu3hPffIWA4FadUYu8daubNkr+LK2zuoPkCAVtyNY+z+/RuzzTriuhjcDydKXzgzp42kQTfAD2j3Mxw==

+react-dom@*:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
 react-dom@^17.0.2:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@ -18242,6 +18379,13 @@ react-zoom-pan-pinch@^1.6.1:
  version "1.6.1"
  resolved "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-1.6.1.tgz"

+react@*:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 react@^17.0.2:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@ -18742,7 +18886,7 @@ require-main-filename@^2.0.0:

 requireindex@^1.1.0:
  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/requireindex/-/requireindex-1.2.0.tgz#3463cdb22ee151902635aa6c9535d4de9c2ef1ef"
+  resolved "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz#3463cdb22ee151902635aa6c9535d4de9c2ef1ef"
  integrity sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==

 requires-port@^1.0.0:
@ -19061,6 +19205,13 @@ scheduler@^0.20.2:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"

+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@2.7.0:
  version "2.7.0"
  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz"
@ -20681,7 +20832,7 @@ tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
  version "1.14.1"
  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"

-tslib@^2.0.0, tslib@^2.0.1:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.4.0:
  version "2.5.0"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
--- a/app/yarn.lock
+++ b/app/yarn.lock