fix: dist build

.github/workflows/main.yaml

@@ -28,6 +28,9 @@ jobs:
       - name: Install
         run: yarn install --frozen-lockfile --production
 
+      - name: Patch
+        run: yarn patch
+
       - name: Build
         env:
           NODE_ENV: production

.github/workflows/pr.yaml

@@ -21,6 +21,9 @@ jobs:
       - name: Install
         run: yarn install --immutable --immutable-cache --check-cache
 
+      - name: Patch
+        run: yarn patch
+
       - name: Test
         run: yarn test:ci
 

.github/workflows/release.yaml

@@ -21,6 +21,9 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile --production
 
+      - name: Patch
+        run: yarn patch
+
       - name: Build
         run: yarn build
 

README.md

@@ -58,6 +58,14 @@ docker run -it -v $(pwd):/usr/local/src/ -w /usr/local/src/ -p 3000:3000 node:la
 yarn install
 ```
 
+- Patch the package
+
+Stitches package needs to be patched after the upgrade to TypeScript version 5. You can run this script after installing the dependencies to apply the patch:
+
+```sh
+yarn patch
+```
+
 - Run the Storybook
 
 ```sh

components/Alert/Alert.stories.tsx

@@ -10,6 +10,7 @@ const AlertForStory = modifyVariantsForStory<AlertVariants, AlertProps>(BaseAler
 
 const Component: Meta<typeof AlertForStory> = {
   title: 'Components/Alert',
+  // @ts-expect-error
   component: Alert,
 };
 

components/Navigation/NavigationItem.stories.tsx

@@ -18,8 +18,10 @@ import { Badge } from '../Badge';
 
 const Component: Meta<typeof NavigationDrawer> = {
   title: 'Components/NavigationItem',
+  // @ts-expect-error
   component: NavigationItem,
   argTypes: {
+    // @ts-expect-error
     as: {
       options: ['a', 'button'],
     },

package.json

@@ -40,6 +40,7 @@
     "deploy-storybook": "storybook-to-ghpages",
     "test": "jest --watch",
     "test:ci": "jest --ci --silent",
+    "patch": "patch-package",
     "prepare": "husky install",
     "pre-commit": "lint-staged"
   },
@@ -113,6 +114,7 @@
     "lint-staged": "13.1.0",
     "lodash.merge": "^4.6.2",
     "np": "^8.0.4",
+    "patch-package": "^8.0.0",
     "prettier": "^2.1.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",

patches/@stitches+react+1.2.8.patch

@@ -0,0 +1,39 @@
+diff --git a/node_modules/@stitches/react/types/css-util.d.ts b/node_modules/@stitches/react/types/css-util.d.ts
+index 1668fc2ab56c421894c547b2e5a988166cd90e5f..cfdad3f208ef7f57c89de7fb94cdaecbd7378c63 100644
+--- a/node_modules/@stitches/react/types/css-util.d.ts
++++ b/node_modules/@stitches/react/types/css-util.d.ts
+@@ -117,3 +117,11 @@ export type $$ScaleValue = typeof $$ScaleValue
+ export declare const $$ThemeValue: unique symbol
+
+ export type $$ThemeValue = typeof $$ThemeValue
++
++// https://github.com/microsoft/TypeScript/issues/37888#issuecomment-846638356
++export type WithPropertyValue<T> = {
++	readonly [K in $$PropertyValue]: T
++}
++export type WithScaleValue<T> = {
++	readonly [K in $$ScaleValue]: T;
++}
+\ No newline at end of file
+diff --git a/node_modules/@stitches/react/types/index.d.ts b/node_modules/@stitches/react/types/index.d.ts
+index 8dbcc9cad3f6c556a3f370065dd95300a02dd973..dafadd22e8b6285aadee2630936a7918c9c5b02b 100644
+--- a/node_modules/@stitches/react/types/index.d.ts
++++ b/node_modules/@stitches/react/types/index.d.ts
+@@ -35,7 +35,7 @@ export type ComponentProps<Component> = Component extends ((...args: any[]) => a
+ /** Returns a type that expects a value to be a kind of CSS property value. */
+ export type PropertyValue<Property extends keyof CSSUtil.CSSProperties, Config = null> = (
+ 	Config extends null
+-		? { readonly [K in CSSUtil.$$PropertyValue]: Property }
++		? CSSUtil.WithPropertyValue<Property>
+ 	: Config extends { [K: string]: any }
+ 		? CSSUtil.CSS<
+ 			Config['media'],
+@@ -49,7 +49,7 @@ export type PropertyValue<Property extends keyof CSSUtil.CSSProperties, Config =
+ /** Returns a type that expects a value to be a kind of theme scale value. */
+ export type ScaleValue<Scale, Config = null> = (
+ 	Config extends null
+-		? { readonly [K in CSSUtil.$$ScaleValue]: Scale }
++		? CSSUtil.WithScaleValue<Scale>
+ 	: Config extends { [K: string]: any }
+ 		? Scale extends keyof Config['theme']
+ 			? `$${string & keyof Config['theme'][Scale]}`

stitches.config.ts

@@ -50,7 +50,7 @@ export const colors: Record<string, Property.Color> = {
   divider: 'hsl(207, 10%, 82%)',
 };
 
-const stitches = (createStitches as any)({
+const stitches = createStitches({
   theme: {
     colors: {
       ...colors,
@@ -270,6 +270,7 @@ export type CSS<T = typeof stitches.config> = StitchesCSS<T>;
 
 export const { styled, css, createTheme, getCssText, globalCss, keyframes, config } = stitches;
 
+// @ts-expect-error
 export const utils = config.utils;
 
 export const darkTheme = (primary: PrimaryColor) => {