Update several dependencies

.eslintrc

@@ -328,7 +328,7 @@
       ],
       "extends": [
         "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking"
+        "plugin:@typescript-eslint/recommended-type-checked"
       ],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
@@ -338,7 +338,6 @@
         ]
       },
       "rules": {
-        "@typescript-eslint/no-duplicate-imports": "error",
         "@typescript-eslint/no-shadow": ["error",
           {
             "ignoreOnInitialization": true

.stylelintrc

@@ -40,6 +40,7 @@
         "annotation-no-unknown": null,
         "block-no-empty": null,
         "function-no-unknown": null,
+        "media-query-no-invalid": null,
         "no-empty-source": null
       }
     }

package.json

@@ -33,10 +33,10 @@
   },
   "devDependencies": {
     "@ampproject/toolbox-optimizer": "^2.9.0",
-    "@babel/core": "^7.22.5",
-    "@babel/eslint-parser": "^7.22.5",
+    "@babel/core": "^7.22.8",
+    "@babel/eslint-parser": "^7.22.7",
     "@babel/eslint-plugin": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-env": "^7.22.7",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@googleforcreators/dashboard": "*",
@@ -48,29 +48,29 @@
     "@googleforcreators/story-editor": "*",
     "@jest/types": "^29.5.0",
     "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
-    "@percy/cli": "^1.26.1",
+    "@percy/cli": "^1.26.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "@prettier/plugin-xml": "^2.2.0",
+    "@prettier/plugin-xml": "^3.1.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.2",
-    "@rollup/plugin-dynamic-import-vars": "^2.0.3",
+    "@rollup/plugin-dynamic-import-vars": "^2.0.4",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/plugin-url": "^8.0.1",
-    "@storybook/addon-a11y": "^7.0.22",
-    "@storybook/addon-backgrounds": "^7.0.22",
-    "@storybook/addon-docs": "^7.0.22",
-    "@storybook/addon-essentials": "^7.0.22",
-    "@storybook/addon-links": "^7.0.22",
-    "@storybook/addon-storysource": "^7.0.22",
-    "@storybook/addon-viewport": "^7.0.22",
-    "@storybook/client-api": "^7.0.22",
-    "@storybook/client-logger": "^7.0.22",
+    "@storybook/addon-a11y": "^7.0.26",
+    "@storybook/addon-backgrounds": "^7.0.26",
+    "@storybook/addon-docs": "^7.0.26",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-links": "^7.0.26",
+    "@storybook/addon-storysource": "^7.0.26",
+    "@storybook/addon-viewport": "^7.0.26",
+    "@storybook/client-api": "^7.0.26",
+    "@storybook/client-logger": "^7.0.26",
     "@storybook/csf": "^0.1.1",
-    "@storybook/csf-tools": "^7.0.22",
-    "@storybook/react": "^7.0.22",
-    "@storybook/react-webpack5": "^7.0.22",
+    "@storybook/csf-tools": "^7.0.26",
+    "@storybook/react": "^7.0.26",
+    "@storybook/react-webpack5": "^7.0.26",
     "@stylelint/postcss-css-in-js": "^0.38.0",
     "@svgr/rollup": "^8.0.1",
     "@svgr/webpack": "^8.0.1",
@@ -87,8 +87,8 @@
     "@types/node": "^20.3.2",
     "@types/styled-components": "^5.1.26",
     "@types/uuid": "^9.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "@web-stories-wp/e2e-tests": "*",
     "@web-stories-wp/eslint-import-resolver": "*",
     "@web-stories-wp/jest-amp": "*",
@@ -101,18 +101,18 @@
     "@wordpress/eslint-plugin": "^14.8.0",
     "ajv-cli": "^5.0.0",
     "ajv-formats": "^2.1.1",
-    "babel-jest": "^29.5.0",
-    "babel-loader": "^9.1.2",
+    "babel-jest": "^29.6.1",
+    "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "browserslist": "^4.21.9",
     "circular-dependency-plugin": "^5.2.2",
-    "core-js": "^3.31.0",
+    "core-js": "^3.31.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "cssnano": "^6.0.1",
-    "eslint": "^8.43.0",
+    "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-header": "^3.1.0",
@@ -121,22 +121,22 @@
     "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-jest-dom": "^5.0.1",
     "eslint-plugin-jest-extended": "^2.0.0",
-    "eslint-plugin-jsdoc": "^46.3.0",
+    "eslint-plugin-jsdoc": "^46.4.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.0.0-alpha.2",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-security": "^1.7.1",
     "eslint-plugin-styled-components-a11y": "^1.0.0",
     "eslint-plugin-testing-library": "^5.11.0",
     "html-webpack-plugin": "^5.5.3",
     "husky": "^8.0.3",
-    "jest": "^29.5.0",
+    "jest": "^29.6.1",
     "jest-axe": "^6.0.0",
-    "jest-canvas-mock": "^2.5.1",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.6.1",
     "jest-extended": "^4.0.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-matcher-deep-close-to": "^3.0.2",
@@ -149,18 +149,18 @@
     "karma-parallel": "^0.3.1",
     "karma-sourcemap-loader": "^0.4.0",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^13.2.2",
+    "lint-staged": "^13.2.3",
     "markdownlint-cli": "^0.35.0",
     "mini-css-extract-plugin": "^2.7.6",
     "mockdate": "^3.0.5",
-    "npm-package-json-lint": "^6.4.0",
+    "npm-package-json-lint": "^7.0.0",
     "npm-run-all": "^4.1.5",
-    "patch-package": "^7.0.0",
+    "patch-package": "^7.0.1",
     "postcss-jsx": "^0.36.4",
     "postcss-styled-syntax": "^0.4.0",
     "postcss-syntax": "^0.36.2",
     "prettier": "^3.0.0",
-    "puppeteer": "^20.7.3",
+    "puppeteer": "^20.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-refresh": "^0.14.0",
@@ -171,15 +171,15 @@
     "rollup-plugin-web-worker-loader": "^1.6.1",
     "rtlcss-webpack-plugin": "^4.0.7",
     "source-map-loader": "^4.0.1",
-    "storybook": "^7.0.23",
+    "storybook": "^7.0.26",
     "styled-components": "^5.3.11",
     "stylelint": "^15.10.1",
-    "stylelint-config-recommended": "^12.0.0",
+    "stylelint-config-recommended": "^13.0.0",
     "stylelint-prettier": "^4.0.0",
     "stylis-plugin-rtl": "^1.0.0",
     "terser-webpack-plugin": "^5.3.9",
-    "typescript": "^5.1.3",
-    "webpack": "^5.88.0",
+    "typescript": "^5.1.6",
+    "webpack": "^5.88.1",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
@@ -191,6 +191,8 @@
     "@axe-core/puppeteer": {
       "puppeteer": "$puppeteer"
     },
+    "@typescript-eslint/parser": "$@typescript-eslint/parser",
+    "@typescript-eslint/eslint-plugin": "$@typescript-eslint/eslint-plugin",
     "date-fns": "^2.30.0",
     "eslint-plugin-jsdoc": "$eslint-plugin-jsdoc",
     "eslint-plugin-prettier": "$eslint-plugin-prettier",

packages/commander/package.json

@@ -28,7 +28,7 @@
   "type": "module",
   "dependencies": {
     "commander": "^11.0.0",
-    "semver": "^7.5.3"
+    "semver": "^7.5.4"
   },
   "devDependencies": {
     "@types/node": "^20.3.2",

packages/dashboard/package.json

@@ -61,7 +61,7 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
-    "jest": "^29.5.0",
+    "jest": "^29.6.1",
     "react": "^17.0.2"
   }
 }

packages/date/src/third_party/buildLocalizeFn.ts

@@ -46,12 +46,12 @@ type LocaleDayPeriod =
 
 type LocaleUnit = Era | Quarter | Month | Day | LocaleDayPeriod;
 
-type LocalizeUnitIndex<U extends LocaleUnit | number> = U extends LocaleUnit
+type LocalizeUnitIndex<U extends LocaleUnit> = U extends LocaleUnit
   ? LocalizeUnitValuesIndex<LocalizeUnitValues<U>>
   : number;
 
 type LocalizeFn<
-  Result extends LocaleUnit | number,
+  Result extends LocaleUnit,
   ArgCallback extends
     | BuildLocalizeFnArgCallback<Result>
     | undefined = undefined,
@@ -126,7 +126,7 @@ type LocalizePeriodValuesMap<U extends LocaleUnit> = {
   [pattern in LocalePatternWidth]?: LocalizeUnitValues<U>;
 };
 
-type BuildLocalizeFnArgCallback<Result extends LocaleUnit | number> = (
+type BuildLocalizeFnArgCallback<Result extends LocaleUnit> = (
   value: Result
 ) => LocalizeUnitIndex<Result>;
 

packages/design-system/src/components/switch/switch.tsx

@@ -192,7 +192,7 @@ const Switch = forwardRef(function Switch(
 
   const handleChange = useCallback(
     (evt: ChangeEvent<HTMLInputElement>) => {
-      onChange(evt, evt.target.value === Value.On);
+      onChange(evt, (evt.target.value as Value) === Value.On);
     },
     [onChange]
   );

packages/design-system/src/typings/styled.d.ts

@@ -25,6 +25,5 @@ import 'styled-components';
 import type { Theme } from '../theme';
 
 declare module 'styled-components' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface -- WAI.
   export interface DefaultTheme extends Theme {}
 }

packages/migration/src/migrations/v0019_conicToLinear.ts

@@ -17,7 +17,7 @@
 /**
  * Internal dependencies
  */
-import type { Linear, Pattern } from '../types/pattern';
+import { type Linear, type Pattern, PatternTypeV0 } from '../types/pattern';
 import type {
   GifElementV18,
   ImageElementV18,
@@ -109,7 +109,7 @@ function updateElement(element: UnionElementV18): UnionElementV19 {
         },
       };
     }
-    if (backgroundColor.type === 'conic') {
+    if (backgroundColor.type === PatternTypeV0.Conic) {
       return {
         ...element,
         backgroundColor: {

packages/output/src/utils/populateElementFontData.ts

@@ -17,8 +17,8 @@
 /**
  * External dependencies
  */
-import type { Page, FontData } from '@googleforcreators/elements';
-import { elementIs } from '@googleforcreators/elements';
+import type { FontData, Page } from '@googleforcreators/elements';
+import { elementIs, ElementType } from '@googleforcreators/elements';
 
 type Fonts = Record<string, FontData>;
 function populateElementFontProperties(
@@ -33,7 +33,7 @@ function populateElementFontProperties(
     elements: elements.map((element) => {
       if (
         elementIs.text(element) &&
-        element.type === 'text' &&
+        element.type === ElementType.Text &&
         Boolean(element.font?.family)
       ) {
         return { ...element, font: fonts[element.font?.family] };

packages/rich-text/src/styleManipulation.ts

@@ -38,7 +38,7 @@ import type { SetStyleCallback, StyleGetter } from './types';
  */
 export function getPrefixStyleForCharacter(
   styles: OrderedSet<string>,
-  prefix: string | typeof NONE
+  prefix: string
 ): string {
   const list = styles.toArray();
   const matcher = (style: string) => style && style.startsWith(prefix);

packages/story-editor/package.json

@@ -96,7 +96,7 @@
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
-    "jest": "^29.5.0",
+    "jest": "^29.6.1",
     "jest-axe": "^6.0.0",
     "jest-matcher-deep-close-to": "^3.0.2",
     "libheif-js": "^1.15.1",

packages/story-editor/src/app/media/utils/getResourceFromUrl.ts

@@ -24,9 +24,9 @@ import {
   getVideoLength,
   hasVideoGotAudio,
   preloadVideo,
-  seekVideo,
-  ResourceType,
   type Resource,
+  ResourceType,
+  seekVideo,
   type VideoResource,
 } from '@googleforcreators/media';
 
@@ -71,7 +71,7 @@ async function getResourceFromUrl(resourceLike: ResourceLike) {
 
   // Only need to fetch metadata if not already provided.
 
-  if (type === 'video' && videoHasMissingMetadata) {
+  if (type === ResourceType.Video && videoHasMissingMetadata) {
     const video = await preloadVideo(src);
     await seekVideo(video);
 
@@ -86,7 +86,7 @@ async function getResourceFromUrl(resourceLike: ResourceLike) {
     additionalData.isMuted = !hasVideoGotAudio(video);
   }
 
-  if (type === 'image' && !hasDimensions) {
+  if (type === ResourceType.Image && !hasDimensions) {
     const dimensions = await getImageDimensions(src);
     additionalData.width = dimensions.width;
     additionalData.height = dimensions.height;

packages/story-editor/src/app/media/utils/useDetectBaseColor.ts

@@ -22,6 +22,7 @@ import {
   getSmallestUrlForWidth,
   type Resource,
   type ResourceId,
+  ResourceType,
   type VideoResource,
 } from '@googleforcreators/media';
 
@@ -152,7 +153,7 @@ function useDetectBaseColor({
         imageSrc = resource.poster;
       }
 
-      if (type === 'image') {
+      if (type === ResourceType.Image) {
         imageSrc = getSmallestUrlForWidth(0, resource);
       } else if (!isExternal) {
         try {

packages/story-editor/src/app/story/useStoryReducer/reducers/duplicateElementsById.ts

@@ -19,8 +19,8 @@
  */
 import {
   duplicateElement,
-  ELEMENT_TYPES,
   elementIs,
+  ElementType,
 } from '@googleforcreators/elements';
 import { produce } from 'immer';
 
@@ -65,7 +65,7 @@ export const duplicateElementsById = (
       return;
     }
 
-    if (elementToDuplicate.type === ELEMENT_TYPES.PRODUCT) {
+    if (elementToDuplicate.type === ElementType.Product) {
       return;
     }
     const { element, elementAnimations } = duplicateElement({