fix: update to yarn 4

Author: Andy Wilson

.pnp.cjs

@@ -28,57 +28,8 @@
     "prepare": "husky install"
   },
   "devDependencies": {
-    "eslint-plugin-prettier": "5.0.0",
     "husky": "8.0.3",
-    "lerna": "7.1.5",
-    "prettier": "3.0.1"
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
-  "eslintConfig": {
-    "extends": [
-      "plugin:import/errors",
-      "plugin:import/warnings",
-      "plugin:import/typescript"
-    ],
-    "plugins": [
-      "import"
-    ],
-    "parserOptions": {
-      "sourceType": "module",
-      "ecmaVersion": "latest",
-      "ecmaFeatures": {
-        "jsx": true,
-        "modules": true
-      }
-    },
-    "rules": {
-      "@typescript-eslint/no-empty-function": "off",
-      "import/no-unresolved": "off",
-      "import/no-named-as-default": "off",
-      "import/no-anonymous-default-export": "off",
-      "import/order": [
-        "error",
-        {
-          "groups": [
-            "builtin",
-            "external",
-            "parent",
-            "sibling",
-            "index"
-          ],
-          "newlines-between": "always",
-          "alphabetize": {
-            "order": "asc",
-            "caseInsensitive": true
-          }
-        }
-      ]
-    }
+    "lerna": "7.1.5"
   },
   "packageManager": "[email protected]"
 }

.yarn/cache/@jest-globals-npm-29.1.1-91689e18a4-921eed37ee.zip

@@ -63,9 +63,11 @@
     }
   },
   "devDependencies": {
+    "@babel/core": "^7.22.11",
     "@babel/preset-env": "7.22.10",
     "@babel/preset-react": "7.22.5",
     "@babel/preset-typescript": "7.22.11",
+    "@jest/globals": "29.1.1",
     "@size-limit/file": "8.2.6",
     "@storybook/addon-essentials": "7.2.3",
     "@storybook/addon-interactions": "7.2.3",
@@ -78,21 +80,34 @@
     "@storybook/react-webpack5": "7.2.3",
     "@storybook/testing-library": "0.2.0",
     "@techstack/tcm-cli": "workspace:*",
-    "@testing-library/react": "14.0.0",
+    "@testing-library/react": "^14.0.0",
     "@tsconfig/create-react-app": "2.0.1",
     "@tsconfig/recommended": "1.0.2",
+    "@types/jest": "^29.5.4",
+    "@types/node": "^20.5.6",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
     "chromatic": "6.24.0",
     "cross-env": "7.0.3",
-    "eslint-plugin-import": "2.28.0",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "7.33.2",
     "esm": "3.2.25",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "jest": "29.1.1",
+    "jest-environment-jsdom": "29.1.1",
+    "jest-watch-typeahead": "2.2.2",
+    "prettier": "3.0.2",
+    "react-dom": "^18.2.0",
     "react-is": "18.2.0",
     "sass": "1.66.1",
     "sass-loader": "13.3.2",
     "size-limit": "8.2.6",
     "storybook": "7.2.3",
+    "ts-jest": "29.1.1",
     "tslib": "2.6.2",
     "typescript": "5.2.2",
     "webpack": "5.88.2"
@@ -101,22 +116,29 @@
     "@emotion/is-prop-valid": "1.2.1",
     "@tanstack/react-table": "8.9.3",
     "@techstack/memoize": "workspace:*",
+    "@techstack/react-feather": "workspace:*",
+    "@techstack/react-lazy-named": "workspace:*",
     "@techstack/styled-system": "1.0.78",
     "@techstack/theme": "workspace:*",
     "@types/react-table": "7.7.14",
     "classnames": "2.3.2",
-    "csstype": "3.1.2",
+    "csstype": "^3.1.2",
     "deepmerge": "4.3.1",
     "i18next": "23.4.4",
+    "react": "^18.2.0",
     "react-date-picker": "10.5.0",
     "react-datetime-picker": "5.5.1",
     "react-i18next": "13.2.0",
-    "react-lazy-named": "1.2.2",
     "react-responsive-carousel": "3.2.23",
     "react-table": "7.8.0",
     "react-virtual": "2.10.4",
     "styled-components": "6.0.7"
   },
+  "eslintConfig": {
+    "rules": {
+      "import/no-unresolved": "off"
+    }
+  },
   "gitHead": "7bb2bc7bbce0432773369ca533adf6d1719e877a",
   "browser": {
     "./node_modules/@storybook/client-api": "./node_modules/@storybook/client-api/dist/cjs/index.js",

.yarn/cache/@nrwl-nx-cloud-npm-16.3.0-f3c5ce5a92-f9767c6620.zip

@@ -1,4 +1,4 @@
-import Avatar, { Props as AvatarProps } from './Avatar';
+import { Avatar, Props as AvatarProps } from './Avatar';
 
 export default Avatar;
 export { Avatar, AvatarProps };

.yarn/cache/@pnpm-config.env-replace-npm-1.1.0-cd7057bf65-fabe35cede.zip

@@ -1,7 +1,7 @@
 import { act, screen, waitFor } from '@testing-library/react';
 
 import { mountWithTheme } from '../../../test-tools';
-import Button from '../index';
+import { Button } from '../index';
 
 describe('<Button />', () => {
   it('renders default correctly', () => {

.yarn/cache/@pnpm-network.ca-file-npm-1.0.2-5faaf6e6bf-d8d0884646.zip

@@ -1,4 +1,4 @@
-import Button from './index';
+import { Button } from './index';
 
 export default {
   title: 'Components / Atoms / Button',

.yarn/cache/@pnpm-npm-conf-npm-2.2.2-b8f7ae7bc8-45422fecc7.zip

@@ -1,7 +1,7 @@
 import { variant } from '@techstack/styled-system';
 
 import { Interactable, StyledBoxProps } from '../../primal';
-import styled from '../../workarounds/styled-components';
+import { default as styled } from '../../workarounds/styled-components';
 
 export const iconMargins = {
   left: {

.yarn/cache/@types-quill-npm-2.0.10-90c7db437f-3f8a85cfc3.zip

@@ -1,5 +1,5 @@
 import { default as CardAction, Props as CardActionProps } from './Actions';
-import Card, { Props as CardProps } from './Card';
+import { Card, Props as CardProps } from './Card';
 import { default as CardContent, Props as CardContentProps } from './Content';
 
 export {

.yarn/cache/@webpack-cli-configtest-npm-2.1.1-2aa637b6bc-9f9f9145c2.zip

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react';
 
-import Button from '../button';
+import { Button } from '../button';
 
 import { Card } from './Card';
 

.yarn/cache/@webpack-cli-info-npm-2.0.2-494be2e91a-8f9a178afc.zip

@@ -1,5 +1,5 @@
 import { mountWithTheme } from '../../../test-tools';
-import Divider from '../index';
+import { Divider } from '../index';
 
 describe('<Divider />', () => {
   it('renders correctly', () => {

.yarn/cache/@webpack-cli-serve-npm-2.0.5-5a220c2601-20424e5c1e.zip

@@ -1,4 +1,4 @@
-import Divider from './index';
+import { Divider } from './index';
 
 export default {
   title: 'Components / Atoms / Divider',

.yarn/cache/acorn-npm-1.2.2-377d222061-b8f921cfb3.zip

@@ -1,5 +1,5 @@
 import { StyledBoxProps } from '../../primal';
-import styled from '../../workarounds/styled-components';
+import { default as styled } from '../../workarounds/styled-components';
 
 export const StyledHr = styled.hr`
   ${StyledBoxProps}

.yarn/cache/ansi-align-npm-3.0.1-8e6288d20a-4c7e8b6a10.zip

@@ -1,5 +1,5 @@
 import { mountWithTheme } from '../../../test-tools';
-import Grid, { Cell } from '../index';
+import { Grid, Cell } from '../index';
 
 describe('<Grid />', () => {
   it('renders correctly', () => {

.yarn/cache/array-flatten-npm-3.0.0-bd1cc8ecc1-e1b11b51c0.zip

@@ -1,4 +1,4 @@
-import Grid, { Cell } from './index';
+import { Grid, Cell } from './index';
 
 export default {
   title: 'Components / Atoms / Grid',

.yarn/cache/as-array-npm-2.0.0-294458e59c-8d743c7aa4.zip

@@ -1,7 +1,7 @@
 import { grid } from '@techstack/styled-system';
 
 import { Box } from '../../primal';
-import styled from '../../workarounds/styled-components';
+import { default as styled } from '../../workarounds/styled-components';
 
 export const StyledGrid = styled(Box)`
   ${grid}

.yarn/cache/axios-npm-1.1.3-4b63965ac1-af4524f6a5.zip

@@ -10,7 +10,7 @@ import { ThemeContext } from 'styled-components';
 import { BoxProps } from '../../primal';
 import { DefaultThemeWithDefaultStyles } from '../../utils';
 
-import Checkbox from './checkbox';
+import { Checkbox } from './checkbox';
 import { StyledInput, StyledTextArea } from './styled';
 import { InputPropsUnion } from './types';
 

.yarn/cache/basic-auth-connect-npm-1.0.0-45193662ca-f62e7fd17c.zip

@@ -1,5 +1,5 @@
 import { mountWithTheme } from '../../../test-tools';
-import Input from '../index';
+import { Input } from '../index';
 
 describe('<Input />', () => {
   it('renders correctly', () => {

.yarn/cache/basic-auth-npm-2.0.1-f1627ef330-3419b805d5.zip

@@ -1,7 +1,7 @@
 import { waitFor, screen, act } from '@testing-library/react';
 
 import { mountWithTheme } from '../../../../test-tools';
-import Checkbox from '../index';
+import { Checkbox } from '../index';
 
 describe('<Checkbox />', () => {
   it('renders correctly no icon', () => {

.yarn/cache/blanket-npm-1.2.3-206a309a46-4e46e57497.zip

@@ -1,4 +1,4 @@
-import Input from './index';
+import { Input } from './index';
 
 export default {
   title: 'Components / Atoms / Input',

.yarn/cache/boxen-npm-5.1.2-364ee34f2f-bc3d3d88d7.zip

@@ -1,5 +1,5 @@
 import { StyledBoxProps } from '../../primal';
-import styled from '../../workarounds/styled-components';
+import { default as styled } from '../../workarounds/styled-components';
 
 export const StyledInput = styled.input`
   ${StyledBoxProps}

.yarn/cache/cheerio-npm-1.0.0-rc.12-6785a97c2a-812fed61aa.zip

@@ -9,7 +9,7 @@ import {
 import { FC, useRef, useState } from 'react';
 import { useVirtual } from 'react-virtual';
 
-import Button from '../button';
+import { Button } from '../button';
 
 import {
   StyledTable,

.yarn/cache/cheerio-select-npm-2.1.0-e92bc2f296-b5d89208c2.zip

@@ -1,5 +1,5 @@
 import { mountWithTheme } from '../../../test-tools';
-import Table from '../index';
+import { Table } from '../index';
 
 describe('<Table />', () => {
   it('should render correctly', () => {

.yarn/cache/ci-info-npm-2.0.0-78012236a1-3b374666a8.zip

@@ -1,4 +1,4 @@
-import Table from './index';
+import { Table } from './index';
 
 export default {
   title: 'Components / Atoms / Table',

.yarn/cache/cli-boxes-npm-2.2.1-7125a5ba44-be79f8ec23.zip

@@ -1,5 +1,5 @@
 import { StyledBoxProps } from '../../primal';
-import styled from '../../workarounds/styled-components';
+import { default as styled } from '../../workarounds/styled-components';
 
 export const StyledTable = styled.table`
   ${StyledBoxProps}

.yarn/cache/clone-npm-2.1.2-1d491c6629-d9c79efba6.zip

@@ -1,4 +1,4 @@
-import Accordion from './index';
+import { Accordion } from './index';
 
 export default {
   title: 'Components / Molecules / Accordion',

.yarn/cache/commander-npm-10.0.1-f17613b72b-8799faa84a.zip

@@ -1,5 +1,5 @@
 import { StyledBox, Box } from '../../primal';
-import styled from '../../workarounds/styled-components';
+import { default as styled } from '../../workarounds/styled-components';
 
 export const StyledAccordion = styled(Box)<{
   open: boolean;

.yarn/cache/config-chain-npm-1.1.13-82e06afbc4-83d22cabf7.zip

@@ -1,6 +1,6 @@
 import { Button } from '../../atoms';
 
-import ButtonGroup from './index';
+import { ButtonGroup } from './index';
 
 export default {
   title: 'Components / Molecules / ButtonGroup',

.yarn/cache/configstore-npm-5.0.1-739433cdc5-60ef65d493.zip

@@ -1,5 +1,5 @@
 import { Box } from '../../primal';
-import styled from '../../workarounds/styled-components';
+import { default as styled } from '../../workarounds/styled-components';
 
 export const StyledBox = styled(Box)`
   button {

.yarn/cache/connect-npm-3.7.0-25ccb085cc-f94818b198.zip

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react';
 
-import Carousel from './';
+import { Carousel } from './';
 
 export default {
   title: 'Components / Molecules / Carousel',

.yarn/cache/cpx-npm-1.5.0-ebb9af3acb-e8902f33ee.zip

@@ -1,5 +1,5 @@
 import { Box } from '../../primal';
-import styled from '../../workarounds/styled-components';
+import { default as styled } from '../../workarounds/styled-components';
 
 export const StyledCarousel = styled(Box)`
   .carousel-root,

.yarn/cache/deep-equal-npm-1.1.1-67ff9c29b9-3212af3e6b.zip

@@ -1,4 +1,4 @@
-import Box, { Props as BoxProps } from './Box';
+import { default as Box, Props as BoxProps } from './Box';
 import { StyledBox, StyledBoxProps } from './styled';
 
 export { Box, BoxProps, StyledBox, StyledBoxProps };

.yarn/cache/deep-extend-npm-0.6.0-e182924219-7be7e5a8d4.zip

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react';
 
-import Box from './Box';
+import { Box } from './Box';
 
 export default {
   title: 'Components / Primal / Box',

.yarn/cache/dotenv-npm-10.0.0-36b272df25-55f701ae21.zip

@@ -15,7 +15,7 @@ import {
 } from '@techstack/styled-system';
 
 import { shouldForwardProp } from '../../utils';
-import styled from '../../workarounds/styled-components';
+import { default as styled } from '../../workarounds/styled-components';
 
 const utilProps = system({
   visibility: {