update to new linting standard

package.json

@@ -25,17 +25,17 @@
 		]
 	},
 	"devDependencies": {
-		"@essex/eslint-config": "^20.0.5",
-		"@essex/eslint-plugin": "^20.0.6",
-		"@essex/jest-config": "^21.0.2",
+		"@essex/eslint-config": "^20.0.6",
+		"@essex/eslint-plugin": "^20.0.7",
+		"@essex/jest-config": "^21.0.4",
 		"@essex/prettier-config": "^18.0.2",
-		"@essex/scripts": "^20.4.4",
+		"@essex/scripts": "^20.4.6",
 		"@types/jest": "^27.4.1",
 		"@types/node": "^17.0.21",
 		"eslint": "^8.10.0",
 		"husky": "^7.0.4",
 		"jest": "^27.5.1",
-		"lint-staged": "^12.3.4",
+		"lint-staged": "^12.3.5",
 		"npm-run-all": "^4.1.5",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",

packages/color/package.json

@@ -25,7 +25,7 @@
 		"hsluv": "^0.1.0"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^20.4.4",
+		"@essex/scripts": "^20.4.6",
 		"@essex/tsconfig-base": "^1.0.2",
 		"@types/chroma-js": "^2.1.3",
 		"@types/node": "^17.0.21"

packages/color/src/colorBlindness.ts

@@ -5,7 +5,8 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-ignore
 import cb from 'color-blind'
-import { ColorBlindnessMode, ColorBlindnessMeta, Scheme } from './interfaces.js'
+import type { ColorBlindnessMeta, Scheme } from './interfaces.js'
+import { ColorBlindnessMode } from './interfaces.js'
 
 const noop = (color: string) => color
 

packages/core/package.json

@@ -26,7 +26,7 @@
 		"murmurhash-js": "^1.0.0"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^20.4.4",
+		"@essex/scripts": "^20.4.6",
 		"@essex/tsconfig-base": "^1.0.2",
 		"@types/d3-scale": "^2.2.6",
 		"@types/jest": "^27.4.1",

packages/core/src/Theme.ts

@@ -2,7 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { Params, Scheme, ColorBlindnessMode } from '@thematic/color'
+import type { Params, Scheme } from '@thematic/color'
+import { ColorBlindnessMode } from '@thematic/color'
 import merge from 'lodash-es/merge.js'
 import {
 	nominal,
@@ -34,7 +35,7 @@ import {
 	computeDefinition,
 	createScheme,
 } from './scheme.js'
-import {
+import type {
 	Theme as ITheme,
 	ThemeSpec,
 	ThemeDefinition,
@@ -61,11 +62,11 @@ import {
 	Process,
 	Flow,
 	MarkConfig,
-	ThemeVariant,
 	Rule,
 	Transformer,
 	ExportConfig,
 } from './types/index.js'
+import { ThemeVariant } from './types/index.js'
 
 const defaultConfig = {
 	variant: ThemeVariant.Light,

packages/core/src/extensions/office.ts

@@ -2,7 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { Theme, ThemeVariant, Transformer } from '../types/index.js'
+import type { Theme, Transformer } from '../types/index.js'
+import { ThemeVariant } from '../types/index.js'
 
 export type OfficeTheme = {
 	dark1: string

packages/core/src/impls/colorScales.ts

@@ -5,11 +5,11 @@
 import { Color } from '@thematic/color'
 import murmur from 'murmurhash-js'
 import { linear, log, quantile } from '../scales.js'
-import {
-	ScaleType,
+import type {
 	NominalColorScaleFunction,
 	ContinuousColorScaleFunction,
 } from '../types/index.js'
+import { ScaleType } from '../types/index.js'
 
 /**
  * Nominal (categorical) scale generator.

packages/core/src/impls/svg-marks.ts

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Color } from '@thematic/color'
-import {
+import type {
 	Text,
 	Circle,
 	Rect,
@@ -27,10 +27,10 @@ import {
 	ProcessSpec,
 	TextSpec,
 	MarkConfig,
-	SelectionState,
 	Rule,
 	RuleSpec,
 } from '../types/index.js'
+import { SelectionState } from '../types/index.js'
 
 const identity = (datum: any) => datum
 

packages/core/src/scheme.ts

@@ -2,23 +2,13 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import {
-	Params,
-	Scheme,
-	getScheme,
-	defaultParams,
-	ColorBlindnessMode,
-	colorBlindness,
-} from '@thematic/color'
+import type { Params, Scheme, ColorBlindnessMode } from '@thematic/color'
+import { getScheme, defaultParams, colorBlindness } from '@thematic/color'
 import merge from 'lodash-es/merge.js'
 import set from 'lodash-es/set.js'
 import defaults from './themes/defaults.js'
-import {
-	ThemeDefinition,
-	ThemeSpec,
-	ThemeVariant,
-	SVGSpec,
-} from './types/index.js'
+import type { ThemeDefinition, ThemeSpec, SVGSpec } from './types/index.js'
+import { ThemeVariant } from './types/index.js'
 
 // these are static default settings for the marks that are not derived from the computed scheme
 const DEFAULT_NOMINAL_ITEMS = 10

packages/d3/package.json

@@ -25,7 +25,7 @@
 		"d3-selection": "^1.4.2"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^20.4.4",
+		"@essex/scripts": "^20.4.6",
 		"@essex/tsconfig-base": "^1.0.2",
 		"@types/d3-axis": "^1.0.16",
 		"@types/d3-selection": "^1.4.3",

packages/d3/src/scales.ts

@@ -2,7 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { Theme, ScaleType, SelectionState } from '@thematic/core'
+import type { Theme, ScaleType } from '@thematic/core'
+import { SelectionState } from '@thematic/core'
 import type { Selection } from 'd3-selection'
 
 /**

packages/fluent/package.json

@@ -27,10 +27,10 @@
 		"d3-scale": "^3.3.0"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^20.4.4",
+		"@essex/scripts": "^20.4.6",
 		"@essex/tsconfig-base": "^1.0.2",
 		"@fluentui/font-icons-mdl2": "^8.2.0",
-		"@fluentui/react": "^8.57.0",
+		"@fluentui/react": "^8.58.0",
 		"@types/chroma-js": "^2.1.3",
 		"@types/d3-scale": "^3.3.2",
 		"@types/node": "^17.0.21",

packages/fluent/src/FluentTheme.ts

@@ -2,12 +2,10 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { createTheme, Theme as IFluentTheme } from '@fluentui/react'
-import {
-	Theme as IThematicTheme,
-	ThemeImpl,
-	ThemeVariant,
-} from '@thematic/core'
+import type { Theme as IFluentTheme } from '@fluentui/react'
+import { createTheme } from '@fluentui/react'
+import type { Theme as IThematicTheme } from '@thematic/core'
+import { ThemeImpl, ThemeVariant } from '@thematic/core'
 import { themeJson } from './theme/index.js'
 import type { FluentTheme as IThematicFluentTheme } from './types.js'
 

packages/fluent/src/components/ColorPicker/ColorPicker.tsx

@@ -2,15 +2,14 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import {
-	ColorPicker as FluentColorPicker,
-	Slider,
-	IColor,
-} from '@fluentui/react'
+import type { IColor } from '@fluentui/react'
+import { ColorPicker as FluentColorPicker, Slider } from '@fluentui/react'
 
-import { css2hsluv, Params } from '@thematic/color'
+import type { Params } from '@thematic/color'
+import { css2hsluv } from '@thematic/color'
 import type { Theme } from '@thematic/core'
-import { CSSProperties, FC, useCallback, useMemo } from 'react'
+import type { CSSProperties, FC } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useThematicFluent } from '../../provider/index.js'
 
 export enum ColorPickerLayout {

packages/fluent/src/components/ColorPickerButton/ColorPickerButton.tsx

@@ -4,7 +4,8 @@
  */
 import { IconButton, Label } from '@fluentui/react'
 import type { Theme } from '@thematic/core'
-import { memo, CSSProperties, FC, useMemo, useCallback } from 'react'
+import type { CSSProperties, FC } from 'react'
+import { memo, useMemo, useCallback } from 'react'
 import { useThematicFluent } from '../../provider/index.js'
 import { ColorPicker } from '../ColorPicker/index.js'
 

packages/fluent/src/components/ScaleDropdown/ColorChips.tsx

@@ -3,7 +3,8 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { scaleLinear } from 'd3-scale'
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import type { ChipsProps } from './types.js'
 
 export const ColorChips: FC<ChipsProps> = ({

packages/fluent/src/components/ScaleDropdown/ContinuousBand.tsx

@@ -2,7 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { FC, useMemo, CSSProperties } from 'react'
+import type { FC, CSSProperties } from 'react'
+import { useMemo } from 'react'
 import type { ChipsProps } from './types.js'
 
 export const ContinuousBand: FC<ChipsProps> = ({ scale, width, height }) => {

packages/fluent/src/components/ScaleDropdown/ScaleDropdown.tsx

@@ -3,7 +3,8 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Dropdown } from '@fluentui/react'
-import { FC, useCallback, useRef } from 'react'
+import type { FC } from 'react'
+import { useCallback, useRef } from 'react'
 import { ScaleDropdownItem } from './ScaleDropdownItem.js'
 import {
 	usePaletteWidth,

packages/fluent/src/components/ScaleDropdown/ScaleDropdownItem.tsx

@@ -2,7 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { TEXT_WIDTH, useScale, usePaletteComponent } from './hooks/theme.js'
 import { useSafeCollapseDimensions } from './hooks/useSafeDimensions.js'
 import type { ScaleDropdownItemProps } from './types.js'

packages/fluent/src/components/ScaleDropdown/hooks/theme.ts

@@ -7,7 +7,8 @@ import type {
 	NominalColorScaleFunction,
 	ContinuousColorScaleFunction,
 } from '@thematic/core'
-import React, { useMemo } from 'react'
+import type React from 'react'
+import { useMemo } from 'react'
 import { useThematicFluent } from '../../../provider/index.js'
 import type { ChipsProps } from '../types.js'
 import { chooseScale, selectColorPalette } from '../util.js'

packages/fluent/src/components/ScaleDropdown/hooks/useSafeDimensions.ts

@@ -2,7 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { Dimensions, useDimensions } from '@essex/hooks'
+import type { Dimensions } from '@essex/hooks'
+import { useDimensions } from '@essex/hooks'
 
 const DEFAULT_WIDTH = 200
 const DEFAULT_HEIGHT = 32

packages/fluent/src/components/ScaleTypeChoiceGroup/index.tsx

@@ -2,13 +2,11 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import {
-	ChoiceGroup,
-	IChoiceGroupOption,
-	IChoiceGroupStyles,
-} from '@fluentui/react'
+import type { IChoiceGroupOption, IChoiceGroupStyles } from '@fluentui/react'
+import { ChoiceGroup } from '@fluentui/react'
 import type { ScaleType } from '@thematic/core'
-import { FC, useCallback, useMemo } from 'react'
+import type { FC } from 'react'
+import { useCallback, useMemo } from 'react'
 
 export interface ScaleTypeChoiceGroupProps {
 	selectedType: ScaleType

packages/fluent/src/provider/ThematicFluentProvider.tsx

@@ -6,7 +6,8 @@ import { initializeIcons } from '@fluentui/font-icons-mdl2'
 import { ThemeProvider } from '@fluentui/react'
 import type { Theme } from '@thematic/core'
 import { ThematicProvider } from '@thematic/react'
-import { useMemo, FC, useEffect } from 'react'
+import type { FC } from 'react'
+import { useMemo, useEffect } from 'react'
 import { loadFluentTheme } from '../loader.js'
 import { ThematicFluentContext } from './ThematicFluentContext.js'
 

packages/fluent/src/theme/themeJson.ts

@@ -7,7 +7,8 @@ import {
 	ThemeGenerator,
 	themeRulesStandardCreator,
 } from '@fluentui/react'
-import { Theme, ThemeVariant } from '@thematic/core'
+import type { Theme } from '@thematic/core'
+import { ThemeVariant } from '@thematic/core'
 import { correctShades } from './shades.js'
 
 type ThemeInputColors = {

packages/react/package.json

@@ -24,7 +24,7 @@
 		"@thematic/core": "workspace:^"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^20.4.4",
+		"@essex/scripts": "^20.4.6",
 		"@essex/tsconfig-base": "^1.0.2",
 		"@types/node": "^17.0.21",
 		"@types/react": "^17.0.39",

packages/react/src/ApplicationStyles.tsx

@@ -2,7 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { useThematic } from './useThematic.js'
 
 /**

packages/react/src/ThematicContext.ts

@@ -2,7 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { loadById, Theme } from '@thematic/core'
+import type { Theme } from '@thematic/core'
+import { loadById } from '@thematic/core'
 import { createContext } from 'react'
 export const defaultTheme = loadById('default') as Theme
 

packages/react/src/ThematicProvider.tsx

@@ -3,7 +3,8 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import type { Theme } from '@thematic/core'
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { ThematicContext, defaultTheme } from './ThematicContext.js'
 
 export interface ThematicProviderProps {

packages/vega/package.json

@@ -23,7 +23,7 @@
 		"@thematic/core": "workspace:^"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^20.4.4",
+		"@essex/scripts": "^20.4.6",
 		"@essex/tsconfig-base": "^1.0.2",
 		"@types/node": "^17.0.21",
 		"vega": "5.15.0"

packages/webapp/package.json

@@ -19,7 +19,7 @@
 	},
 	"dependencies": {
 		"@fluentui/font-icons-mdl2": "^8.2.0",
-		"@fluentui/react": "^8.57.0",
+		"@fluentui/react": "^8.58.0",
 		"@thematic/color": "workspace:^",
 		"@thematic/core": "workspace:^",
 		"@thematic/d3": "workspace:^",
@@ -35,9 +35,9 @@
 		"vega": "5.15.0"
 	},
 	"devDependencies": {
-		"@essex/scripts": "^20.4.4",
+		"@essex/scripts": "^20.4.6",
 		"@essex/tsconfig-base": "^1.0.2",
-		"@essex/webpack-config": "^20.1.4",
+		"@essex/webpack-config": "^20.1.6",
 		"@types/d3-axis": "^1.0.16",
 		"@types/d3-scale": "^2.2.6",
 		"@types/d3-selection": "^1.4.3",

packages/webapp/src/components/ColorPalette/ApplicationPalette.tsx

@@ -6,7 +6,8 @@
 import './index.css'
 import type { Theme, Application } from '@thematic/core'
 import { useThematic } from '@thematic/react'
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { ColorStrip } from '../ColorStrip'
 
 const applicationPrimaryKeys = ['accent', 'foreground', 'background', 'border']

packages/webapp/src/components/ColorPalette/ColorBand.tsx

@@ -3,7 +3,8 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 
 export interface ColorBandProps {
 	colors: string[]

packages/webapp/src/components/ColorPalette/ColorStrip.tsx

@@ -3,7 +3,8 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 
 export interface ColorStripProps {
 	colors: string[]

packages/webapp/src/components/ColorPalette/Contrast.tsx

@@ -4,7 +4,8 @@
  */
 import { IconButton } from '@fluentui/react'
 import { contrast } from '@thematic/color'
-import { CSSProperties, FC, useMemo } from 'react'
+import type { CSSProperties, FC } from 'react'
+import { useMemo } from 'react'
 
 export interface ContrastProps {
 	foreground: string

packages/webapp/src/components/ColorPalette/index.tsx

@@ -3,7 +3,8 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { mark2style, useThematic } from '@thematic/react'
-import { FC, Fragment, useMemo } from 'react'
+import type { FC } from 'react'
+import { Fragment, useMemo } from 'react'
 import { ApplicationPalette } from './ApplicationPalette'
 import { ColorBand } from './ColorBand'
 import { ColorStrip } from './ColorStrip'

packages/webapp/src/components/ControlPanel/ControlPanel.tsx

@@ -2,17 +2,13 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import {
-	Dropdown,
-	IDropdownOption,
-	Toggle,
-	SpinButton,
-	Position,
-} from '@fluentui/react'
+import type { IDropdownOption } from '@fluentui/react'
+import { Dropdown, Toggle, SpinButton, Position } from '@fluentui/react'
 import { ColorBlindnessMode, colorBlindnessInfo } from '@thematic/color'
 import type { ThemeListing, Theme } from '@thematic/core'
 import { ColorPickerButton } from '@thematic/fluent'
-import { useCallback, FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useCallback, useMemo } from 'react'
 import { EnumDropdown } from '../EnumDropdown'
 
 import './index.css'

packages/webapp/src/components/DownloadLink/index.tsx

@@ -2,13 +2,14 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import {
-	Link,
+import type {
 	IStyleFunctionOrObject,
 	ILinkStyleProps,
 	ILinkStyles,
 } from '@fluentui/react'
-import { FC, useMemo } from 'react'
+import { Link } from '@fluentui/react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 
 export interface DownloadLinkProps {
 	/**

packages/webapp/src/components/EnumButtonBar/index.tsx

@@ -2,14 +2,13 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import {
-	CommandBar,
+import type {
 	ICommandBarStyleProps,
 	ICommandBarStyles,
 	IStyleFunctionOrObject,
-	Label,
 	ICommandBarItemProps,
 } from '@fluentui/react'
+import { CommandBar, Label } from '@fluentui/react'
 import { useThematic } from '@thematic/react'
 import { useCallback, useMemo } from 'react'
 

packages/webapp/src/components/EnumDropdown/index.tsx

@@ -2,13 +2,13 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import {
-	Dropdown,
+import type {
 	IDropdownOption,
 	IDropdownStyles,
 	IDropdownStyleProps,
 	IStyleFunctionOrObject,
 } from '@fluentui/react'
+import { Dropdown } from '@fluentui/react'
 import { useCallback, useMemo, useState } from 'react'
 
 export interface EnumDropdownProps<E> {

packages/webapp/src/components/FluentControls/index.tsx

@@ -2,7 +2,8 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { ScaleType, Theme } from '@thematic/core'
+import type { Theme } from '@thematic/core'
+import { ScaleType } from '@thematic/core'
 import {
 	ScaleDropdown,
 	ScaleTypeChoiceGroup,
@@ -10,7 +11,8 @@ import {
 	ColorPickerButton,
 } from '@thematic/fluent'
 import { useThematic } from '@thematic/react'
-import { useState, useCallback, useMemo, FC } from 'react'
+import type { FC } from 'react'
+import { useState, useCallback, useMemo } from 'react'
 import { useSetTheme } from '../../state'
 
 export interface FluentControlsComponentProps {

packages/webapp/src/components/FluentViewer/FluentPalette.tsx

@@ -4,7 +4,8 @@
  */
 import type { IPalette, Theme } from '@fluentui/react'
 import type { FluentTheme } from '@thematic/fluent'
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { ColorStrip } from '../ColorStrip'
 
 export interface FluentPaletteProps {

packages/webapp/src/components/FluentViewer/index.tsx

@@ -4,7 +4,8 @@
  */
 import { loadFluentTheme } from '@thematic/fluent'
 import { useThematic } from '@thematic/react'
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { DownloadLink } from '../DownloadLink'
 import { FluentPalette } from './FluentPalette'
 

packages/webapp/src/components/GIMP/index.tsx

@@ -5,7 +5,8 @@
 import { TextField } from '@fluentui/react'
 import { gimp } from '@thematic/core'
 import { useThematic } from '@thematic/react'
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { DownloadLink } from '../DownloadLink'
 // the deep nesting of the component requires several layers of size adjustment
 const styles = {

packages/webapp/src/components/JSON/index.tsx

@@ -3,7 +3,8 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { useThematic } from '@thematic/react'
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { useScaleItemCount } from '../../state'
 import { DownloadLink } from '../DownloadLink'
 import { JSONEditor } from '../JSONEditor'

packages/webapp/src/components/MarkGrid/GridCell.tsx

@@ -4,7 +4,8 @@
  */
 import type { SelectionState, ThemeElementType } from '@thematic/core'
 import { useThematic, mark2style } from '@thematic/react'
-import { CSSProperties, FC, useMemo } from 'react'
+import type { CSSProperties, FC } from 'react'
+import { useMemo } from 'react'
 import { Rect, Circle, Line, Arc, Text } from '../svg'
 
 export interface GridCellProps {

packages/webapp/src/components/MarkGrid/index.tsx

@@ -2,9 +2,11 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { SelectionState, MarkType, ChromeType } from '@thematic/core'
+import type { MarkType, ChromeType } from '@thematic/core'
+import { SelectionState } from '@thematic/core'
 import { useThematic } from '@thematic/react'
-import { useState, useCallback, useMemo, FC } from 'react'
+import type { FC } from 'react'
+import { useState, useCallback, useMemo } from 'react'
 import { EnumButtonBar } from '../EnumButtonBar'
 import { GridCell } from './GridCell'
 import './index.css'

packages/webapp/src/components/Office/OfficePalette.tsx

@@ -4,7 +4,8 @@
  */
 import type { OfficeTheme } from '@thematic/core'
 import { useThematic } from '@thematic/react'
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { ColorStrip } from '../ColorStrip'
 
 export interface OfficePaletteProps {

packages/webapp/src/components/Office/index.tsx

@@ -2,9 +2,11 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { office, OfficeTheme } from '@thematic/core'
+import type { OfficeTheme } from '@thematic/core'
+import { office } from '@thematic/core'
 import { useThematic } from '@thematic/react'
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { DownloadLink } from '../DownloadLink'
 import { OfficePalette } from './OfficePalette'
 

packages/webapp/src/components/PowerBI/PowerBIPalette.tsx

@@ -4,8 +4,10 @@
  */
 import type { PowerBITheme } from '@thematic/core'
 import { useThematic } from '@thematic/react'
-import { FC, useMemo } from 'react'
-import { ColorDefinition, ColorStrip } from '../ColorStrip'
+import type { FC } from 'react'
+import { useMemo } from 'react'
+import type { ColorDefinition } from '../ColorStrip'
+import { ColorStrip } from '../ColorStrip'
 
 export interface PowerBIPaletteProps {
 	colors: PowerBITheme

packages/webapp/src/components/PowerBI/index.tsx

@@ -2,9 +2,11 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { powerbi, PowerBITheme } from '@thematic/core'
+import type { PowerBITheme } from '@thematic/core'
+import { powerbi } from '@thematic/core'
 import { useThematic } from '@thematic/react'
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { DownloadLink } from '../DownloadLink'
 import { PowerBIPalette } from './PowerBIPalette'
 

packages/webapp/src/components/ThemeViewer/ThemeViewer.tsx

@@ -3,7 +3,8 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Pivot, PivotItem } from '@fluentui/react'
-import { FC, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import type { Graph } from '../../interfaces'
 import { FluentControls } from '../FluentControls'
 import { D3Chart } from '../charts/D3'

packages/webapp/src/components/charts/D3/index.tsx

@@ -7,8 +7,10 @@ import { chart, plotArea, axis, circle } from '@thematic/d3'
 import { useThematic } from '@thematic/react'
 import { axisLeft, axisBottom } from 'd3-axis'
 import { scaleLinear } from 'd3-scale'
-import { select, Selection } from 'd3-selection'
-import { useLayoutEffect, useRef, useState, useMemo, FC } from 'react'
+import type { Selection } from 'd3-selection'
+import { select } from 'd3-selection'
+import type { FC } from 'react'
+import { useLayoutEffect, useRef, useState, useMemo } from 'react'
 
 export interface ChartProps {
 	width?: number

packages/webapp/src/components/charts/Vega/index.tsx

@@ -4,7 +4,8 @@
  */
 import { useThematic } from '@thematic/react'
 import { vega as decorator } from '@thematic/vega'
-import { memo, useLayoutEffect, useRef, useMemo, FC } from 'react'
+import type { FC } from 'react'
+import { memo, useLayoutEffect, useRef, useMemo } from 'react'
 
 import { parse, View } from 'vega'
 

packages/webapp/src/components/graphs/D3/index.tsx

@@ -14,13 +14,13 @@ import {
 import { useThematic } from '@thematic/react'
 import { scaleLinear } from 'd3-scale'
 import { select } from 'd3-selection'
+import type { FC } from 'react'
 import {
 	useLayoutEffect,
 	useState,
 	useRef,
 	useEffect,
 	useCallback,
-	FC,
 } from 'react'
 import type { Graph, Node, Edge } from '../../../interfaces'
 import { bounds } from '../../../util/graph'

packages/webapp/src/state/theme.ts

@@ -2,10 +2,10 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { defaultParams, Params, ColorBlindnessMode } from '@thematic/color'
+import type { Params } from '@thematic/color'
+import { defaultParams, ColorBlindnessMode } from '@thematic/color'
+import type { Theme, ThemeListing } from '@thematic/core'
 import {
-	Theme,
-	ThemeListing,
 	ThemeVariant,
 	defaultThemes,
 	loadById,

yarn.lock

@@ -847,21 +847,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@essex/eslint-config@npm:^20.0.5":
-  version: 20.0.5
-  resolution: "@essex/eslint-config@npm:20.0.5"
+"@essex/eslint-config@npm:^20.0.6":
+  version: 20.0.6
+  resolution: "@essex/eslint-config@npm:20.0.6"
   peerDependencies:
-    "@essex/eslint-plugin": ">=20.0.6"
+    "@essex/eslint-plugin": ">=20.0.7"
     "@typescript-eslint/eslint-plugin": ">= 4.4.1"
     "@typescript-eslint/parser": ">= 4.4.1"
     eslint-import-resolver-node: ">= 0.3.4"
-  checksum: 78a86a2078a169becfb74248d320fcd628c01951ca9f8b55a55d61e62acf6218b58108db01bfedecd7a914bb4e716e6b3d3c172a0b193867acb17a05e6e8ec24
+  checksum: dbb36c508682a8a8946dad0c886b7674e0e4003a77a18b3c220227cbb4f6625e9464dc00b5ca7e7242f9861852e65684e42205ddb68fb98594137f86bd490b66
   languageName: node
   linkType: hard
 
-"@essex/eslint-plugin@npm:^20.0.6":
-  version: 20.0.6
-  resolution: "@essex/eslint-plugin@npm:20.0.6"
+"@essex/eslint-plugin@npm:^20.0.7":
+  version: 20.0.7
+  resolution: "@essex/eslint-plugin@npm:20.0.7"
   dependencies:
     "@babel/core": ^7.17.5
     "@babel/eslint-parser": ^7.17.0
@@ -884,7 +884,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ">= 4.4.1"
     "@typescript-eslint/parser": ">= 4.4.1"
     eslint-import-resolver-node: ">= 0.3.4"
-  checksum: 85887249ed7a736653c283000f249769d49654dd5a98f9fa83c6424066a7d723de900cd7cb7ac4dfab755b436fbe9d97b6d2b2d18ffc40d9801360ca05bd9ee0
+  checksum: 3d0754508d6b271e8971e3c33856e101ee665402790542db8ae889e876debede7b4b6684c6811374f48a07af983a7b0587a24afa32182c506eb377f7a089ebb7
   languageName: node
   linkType: hard
 
@@ -903,12 +903,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@essex/jest-config@npm:^21.0.2":
-  version: 21.0.2
-  resolution: "@essex/jest-config@npm:21.0.2"
+"@essex/jest-config@npm:^21.0.4":
+  version: 21.0.4
+  resolution: "@essex/jest-config@npm:21.0.4"
   dependencies:
-    "@essex/swc-opts": ^20.0.4
-    "@swc/core": 1.2.147
+    "@essex/swc-opts": ^20.0.5
+    "@swc/core": 1.2.148
     "@swc/jest": ^0.2.20
     "@types/jest": ^27.4.1
     identity-obj-proxy: ^3.0.0
@@ -918,7 +918,7 @@ __metadata:
   peerDependenciesMeta:
     jest:
       optional: true
-  checksum: 69644e5228d24a7fb1e6982968c35bde1b131c8b0c06ed9d6044baafc68bcf4eb22b680e6b8f8a31b19ef667599e94f1dbaa6359465621f3438b7f09b38d042d
+  checksum: d2d7099d970e064bf8dc0873daa35e234239f2dc5eb2521db68862b5e2e188c883544f372f24680b73c24102516a7a7d61adb0f560b56c766070e80ea2e92a1a
   languageName: node
   linkType: hard
 
@@ -929,16 +929,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@essex/scripts@npm:^20.4.4":
-  version: 20.4.4
-  resolution: "@essex/scripts@npm:20.4.4"
+"@essex/scripts@npm:^20.4.6":
+  version: 20.4.6
+  resolution: "@essex/scripts@npm:20.4.6"
   dependencies:
     "@azure/storage-blob": ^12.8.0
-    "@essex/eslint-config": ^20.0.5
-    "@essex/eslint-plugin": ^20.0.6
+    "@essex/eslint-config": ^20.0.6
+    "@essex/eslint-plugin": ^20.0.7
     "@essex/shellrunner": ^20.0.4
-    "@essex/swc-opts": ^20.0.4
-    "@swc/core": 1.2.147
+    "@essex/swc-opts": ^20.0.5
+    "@swc/core": 1.2.148
     "@typescript-eslint/eslint-plugin": ^5.13.0
     "@typescript-eslint/parser": ^5.13.0
     archiver: ^5.3.0
@@ -960,8 +960,8 @@ __metadata:
     typedoc: ^0.22.12
     typescript: ^4.6.2
   peerDependencies:
-    "@essex/eslint-config": ">=20.0.5"
-    "@essex/jest-config": ">=21.0.2"
+    "@essex/eslint-config": ">=20.0.6"
+    "@essex/jest-config": ">=21.0.4"
     "@essex/prettier-config": ">=18.0.2"
     "@typescript-eslint/eslint-plugin": ">= 4.4.1"
     "@typescript-eslint/parser": ">= 4.4.1"
@@ -991,7 +991,7 @@ __metadata:
   bin:
     essex: ./lib/index.mjs
     essex-scripts: ./lib/index.mjs
-  checksum: 26e354873bee5636e463aeecae6c1d21f4b8b445d5235fa1453085cc25d0b822763314e1de5be2051dfb22bd071fe6c9eb9b34a9b790c88cfca91f34311dd81b
+  checksum: f3908b3ecc25b577430d84d42ebe1a9f9a859b381c2571fb10591fd41980e5b68fdbd3fd77f0b2a02ff216359011c2425e6abd97c8d3aea624b3f3891f08ed62
   languageName: node
   linkType: hard
 
@@ -1005,14 +1005,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@essex/swc-opts@npm:^20.0.4":
-  version: 20.0.4
-  resolution: "@essex/swc-opts@npm:20.0.4"
+"@essex/swc-opts@npm:^20.0.5":
+  version: 20.0.5
+  resolution: "@essex/swc-opts@npm:20.0.5"
   dependencies:
-    "@swc/core": 1.2.147
+    "@swc/core": 1.2.148
     lodash: ^4.17.21
     tslib: ^2.3.1
-  checksum: 2e3c6762500ce01bda9dfc4a3cf53c56c1a29ab65f603b9468c25a36b811f146b25acc1d8de9b0474f40529ef66fe444fd67d7884c1262364b45fa157503c3f5
+  checksum: b43eec4e9560db80ae2b255ec2d5af0b51a8c3b64efcdd884131003fb3db6d3e678dd0aa1e41c7f5833d7f2b5b5831ed39cadfd07f047ae8153065bf1c8816f8
   languageName: node
   linkType: hard
 
@@ -1030,16 +1030,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@essex/webpack-config@npm:^20.1.4":
-  version: 20.1.4
-  resolution: "@essex/webpack-config@npm:20.1.4"
+"@essex/webpack-config@npm:^20.1.6":
+  version: 20.1.6
+  resolution: "@essex/webpack-config@npm:20.1.6"
   dependencies:
-    "@essex/swc-opts": ^20.0.4
+    "@essex/swc-opts": ^20.0.5
     "@swc/cli": ^0.1.55
-    "@swc/core": 1.2.147
+    "@swc/core": 1.2.148
     "@types/webpack": ^5.28.0
     "@types/webpack-dev-server": ^4.7.2
-    css-loader: ^6.6.0
+    css-loader: ^6.7.0
     debug: ^4.3.3
     fork-ts-checker-webpack-plugin: ^7.2.1
     html-webpack-plugin: ^5.5.0
@@ -1056,7 +1056,7 @@ __metadata:
   peerDependencies:
     typescript: ">= 4 <5"
     webpack: ">= 4"
-  checksum: c7dcd39a44e8184cbfd29a47033b06869b8458e55b2202091775ec11e5009f0e9c340fb3255cf4f8ed9c7e51bfb734917217a33ce91bee8bc592ae2550c9a36a
+  checksum: 8e410a9579704e2de15764dd7b796bb665b07444544c773b2c0fd5caa5d048f13e7d5b722236000d74bca806c02769e8d765571e8317331eb370508d40f24a67
   languageName: node
   linkType: hard
 
@@ -1171,9 +1171,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fluentui/react@npm:^8.57.0":
-  version: 8.57.0
-  resolution: "@fluentui/react@npm:8.57.0"
+"@fluentui/react@npm:^8.58.0":
+  version: 8.58.0
+  resolution: "@fluentui/react@npm:8.58.0"
   dependencies:
     "@fluentui/date-time-utilities": ^8.4.0
     "@fluentui/font-icons-mdl2": ^8.2.0
@@ -1193,7 +1193,7 @@ __metadata:
     "@types/react-dom": ">=16.8.0 <18.0.0"
     react: ">=16.8.0 <18.0.0"
     react-dom: ">=16.8.0 <18.0.0"
-  checksum: 60b3325fb38c7381de8b25033519e1036883a91e9d8f26217030396cce79f358483987aea3e2bd5cdfa7ba08f553502b27d48f88b16bd245633edd655245988e
+  checksum: 80854ac7bdd3435b67e0a4d13f601648a7a36450f0ede7760828f780142df948eed6ccb7292db71651cbe9c607ded6f8b0a559b6665485d45d04d34ead64484f
   languageName: node
   linkType: hard
 
@@ -1602,114 +1602,114 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/core-android-arm-eabi@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-android-arm-eabi@npm:1.2.147"
+"@swc/core-android-arm-eabi@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-android-arm-eabi@npm:1.2.148"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@swc/core-android-arm64@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-android-arm64@npm:1.2.147"
+"@swc/core-android-arm64@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-android-arm64@npm:1.2.148"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-darwin-arm64@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-darwin-arm64@npm:1.2.147"
+"@swc/core-darwin-arm64@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-darwin-arm64@npm:1.2.148"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-darwin-x64@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-darwin-x64@npm:1.2.147"
+"@swc/core-darwin-x64@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-darwin-x64@npm:1.2.148"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@swc/core-freebsd-x64@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-freebsd-x64@npm:1.2.147"
+"@swc/core-freebsd-x64@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-freebsd-x64@npm:1.2.148"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm-gnueabihf@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.2.147"
+"@swc/core-linux-arm-gnueabihf@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.2.148"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm64-gnu@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-linux-arm64-gnu@npm:1.2.147"
+"@swc/core-linux-arm64-gnu@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-linux-arm64-gnu@npm:1.2.148"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm64-musl@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-linux-arm64-musl@npm:1.2.147"
+"@swc/core-linux-arm64-musl@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-linux-arm64-musl@npm:1.2.148"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-linux-x64-gnu@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-linux-x64-gnu@npm:1.2.147"
+"@swc/core-linux-x64-gnu@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-linux-x64-gnu@npm:1.2.148"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"@swc/core-linux-x64-musl@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-linux-x64-musl@npm:1.2.147"
+"@swc/core-linux-x64-musl@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-linux-x64-musl@npm:1.2.148"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"@swc/core-win32-arm64-msvc@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-win32-arm64-msvc@npm:1.2.147"
+"@swc/core-win32-arm64-msvc@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-win32-arm64-msvc@npm:1.2.148"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-win32-ia32-msvc@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-win32-ia32-msvc@npm:1.2.147"
+"@swc/core-win32-ia32-msvc@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-win32-ia32-msvc@npm:1.2.148"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@swc/core-win32-x64-msvc@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core-win32-x64-msvc@npm:1.2.147"
+"@swc/core-win32-x64-msvc@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core-win32-x64-msvc@npm:1.2.148"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@swc/core@npm:1.2.147":
-  version: 1.2.147
-  resolution: "@swc/core@npm:1.2.147"
+"@swc/core@npm:1.2.148":
+  version: 1.2.148
+  resolution: "@swc/core@npm:1.2.148"
   dependencies:
-    "@swc/core-android-arm-eabi": 1.2.147
-    "@swc/core-android-arm64": 1.2.147
-    "@swc/core-darwin-arm64": 1.2.147
-    "@swc/core-darwin-x64": 1.2.147
-    "@swc/core-freebsd-x64": 1.2.147
-    "@swc/core-linux-arm-gnueabihf": 1.2.147
-    "@swc/core-linux-arm64-gnu": 1.2.147
-    "@swc/core-linux-arm64-musl": 1.2.147
-    "@swc/core-linux-x64-gnu": 1.2.147
-    "@swc/core-linux-x64-musl": 1.2.147
-    "@swc/core-win32-arm64-msvc": 1.2.147
-    "@swc/core-win32-ia32-msvc": 1.2.147
-    "@swc/core-win32-x64-msvc": 1.2.147
+    "@swc/core-android-arm-eabi": 1.2.148
+    "@swc/core-android-arm64": 1.2.148
+    "@swc/core-darwin-arm64": 1.2.148
+    "@swc/core-darwin-x64": 1.2.148
+    "@swc/core-freebsd-x64": 1.2.148
+    "@swc/core-linux-arm-gnueabihf": 1.2.148
+    "@swc/core-linux-arm64-gnu": 1.2.148
+    "@swc/core-linux-arm64-musl": 1.2.148
+    "@swc/core-linux-x64-gnu": 1.2.148
+    "@swc/core-linux-x64-musl": 1.2.148
+    "@swc/core-win32-arm64-msvc": 1.2.148
+    "@swc/core-win32-ia32-msvc": 1.2.148
+    "@swc/core-win32-x64-msvc": 1.2.148
   dependenciesMeta:
     "@swc/core-android-arm-eabi":
       optional: true
@@ -1739,7 +1739,7 @@ __metadata:
       optional: true
   bin:
     swcx: run_swcx.js
-  checksum: 6cf22c758e1a2fd018b809662a3a12e1d3e1be3a261ed76e7372e5325ad9447ae1538cce54964bdbe00343318b6810524715e0d294bc4c32d5e8cd4c170e9a23
+  checksum: 3c3c68b36b2a1913246c029e73b84a1615eb4ba78bc478e70c3ba51d0c467d6d2e55d55b3936366a0a99bc7370028b5bd82931626515501d639e42397e039d2e
   languageName: node
   linkType: hard
 
@@ -1758,7 +1758,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thematic/color@workspace:packages/color"
   dependencies:
-    "@essex/scripts": ^20.4.4
+    "@essex/scripts": ^20.4.6
     "@essex/tsconfig-base": ^1.0.2
     "@types/chroma-js": ^2.1.3
     "@types/node": ^17.0.21
@@ -1780,7 +1780,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thematic/core@workspace:packages/core"
   dependencies:
-    "@essex/scripts": ^20.4.4
+    "@essex/scripts": ^20.4.6
     "@essex/tsconfig-base": ^1.0.2
     "@thematic/color": "workspace:^"
     "@types/d3-scale": ^2.2.6
@@ -1807,7 +1807,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thematic/d3@workspace:packages/d3"
   dependencies:
-    "@essex/scripts": ^20.4.4
+    "@essex/scripts": ^20.4.6
     "@essex/tsconfig-base": ^1.0.2
     "@thematic/core": "workspace:^"
     "@types/d3-axis": ^1.0.16
@@ -1834,10 +1834,10 @@ __metadata:
   resolution: "@thematic/fluent@workspace:packages/fluent"
   dependencies:
     "@essex/hooks": ^4.0.4
-    "@essex/scripts": ^20.4.4
+    "@essex/scripts": ^20.4.6
     "@essex/tsconfig-base": ^1.0.2
     "@fluentui/font-icons-mdl2": ^8.2.0
-    "@fluentui/react": ^8.57.0
+    "@fluentui/react": ^8.58.0
     "@thematic/color": "workspace:^"
     "@thematic/core": "workspace:^"
     "@thematic/react": "workspace:^"
@@ -1872,7 +1872,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thematic/react@workspace:packages/react"
   dependencies:
-    "@essex/scripts": ^20.4.4
+    "@essex/scripts": ^20.4.6
     "@essex/tsconfig-base": ^1.0.2
     "@thematic/color": "workspace:^"
     "@thematic/core": "workspace:^"
@@ -1897,17 +1897,17 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thematic/root@workspace:."
   dependencies:
-    "@essex/eslint-config": ^20.0.5
-    "@essex/eslint-plugin": ^20.0.6
-    "@essex/jest-config": ^21.0.2
+    "@essex/eslint-config": ^20.0.6
+    "@essex/eslint-plugin": ^20.0.7
+    "@essex/jest-config": ^21.0.4
     "@essex/prettier-config": ^18.0.2
-    "@essex/scripts": ^20.4.4
+    "@essex/scripts": ^20.4.6
     "@types/jest": ^27.4.1
     "@types/node": ^17.0.21
     eslint: ^8.10.0
     husky: ^7.0.4
     jest: ^27.5.1
-    lint-staged: ^12.3.4
+    lint-staged: ^12.3.5
     npm-run-all: ^4.1.5
     react: ^17.0.2
     react-dom: ^17.0.2
@@ -1920,7 +1920,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thematic/vega@workspace:packages/vega"
   dependencies:
-    "@essex/scripts": ^20.4.4
+    "@essex/scripts": ^20.4.6
     "@essex/tsconfig-base": ^1.0.2
     "@thematic/core": "workspace:^"
     "@types/node": ^17.0.21
@@ -1937,11 +1937,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thematic/webapp@workspace:packages/webapp"
   dependencies:
-    "@essex/scripts": ^20.4.4
+    "@essex/scripts": ^20.4.6
     "@essex/tsconfig-base": ^1.0.2
-    "@essex/webpack-config": ^20.1.4
+    "@essex/webpack-config": ^20.1.6
     "@fluentui/font-icons-mdl2": ^8.2.0
-    "@fluentui/react": ^8.57.0
+    "@fluentui/react": ^8.58.0
     "@thematic/color": "workspace:^"
     "@thematic/core": "workspace:^"
     "@thematic/d3": "workspace:^"
@@ -4192,12 +4192,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-loader@npm:^6.6.0":
-  version: 6.6.0
-  resolution: "css-loader@npm:6.6.0"
+"css-loader@npm:^6.7.0":
+  version: 6.7.0
+  resolution: "css-loader@npm:6.7.0"
   dependencies:
     icss-utils: ^5.1.0
-    postcss: ^8.4.5
+    postcss: ^8.4.7
     postcss-modules-extract-imports: ^3.0.0
     postcss-modules-local-by-default: ^4.0.0
     postcss-modules-scope: ^3.0.0
@@ -4206,7 +4206,7 @@ __metadata:
     semver: ^7.3.5
   peerDependencies:
     webpack: ^5.0.0
-  checksum: cc4117320c2bfbbc3e84cdf811fb29219f1900cf4dcebb7dbf916b7cbdfc193cd9017d19b62be2d57d22baeb791919de52bf2e3086213d184875813817ac290f
+  checksum: 222bbde35315f4cf723fb1dd3a7c5a21e073de2018e8a9475f89631a090f6fd829ef756972a0f15ed6298f6c852d0f45e46ee729625256397ee17638c0b4ae9d
   languageName: node
   linkType: hard
 
@@ -7838,9 +7838,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lint-staged@npm:^12.3.4":
-  version: 12.3.4
-  resolution: "lint-staged@npm:12.3.4"
+"lint-staged@npm:^12.3.5":
+  version: 12.3.5
+  resolution: "lint-staged@npm:12.3.5"
   dependencies:
     cli-truncate: ^3.1.0
     colorette: ^2.0.16
@@ -7857,7 +7857,7 @@ __metadata:
     yaml: ^1.10.2
   bin:
     lint-staged: bin/lint-staged.js
-  checksum: 4e0b4b9da4183a0daeab35d41e4d243fb1270a39db997efa0c3745fa148a7a4b8b723a51cb757595fc8bb118796ca1465e67aede72f25e9ea48165aec36cec3b
+  checksum: 6653c7078b36741e521e5f309b56bb75db198a05cbdd188124ff82a290e352ade3eb1e6080265729e19711ac08d190e300874af00e4e540b57b3c8f0690e2573
   languageName: node
   linkType: hard
 
@@ -8337,12 +8337,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "nanoid@npm:3.2.0"
+"nanoid@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "nanoid@npm:3.3.1"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 3d1d5a69fea84e538057cf64106e713931c4ef32af344068ecff153ff91252f39b0f2b472e09b0dfff43ac3cf520c92938d90e6455121fe93976e23660f4fccc
+  checksum: 4ef0969e1bbe866fc223eb32276cbccb0961900bfe79104fa5abe34361979dead8d0e061410a5c03bc3d47455685adf32c09d6f27790f4a6898fb51f7df7ec86
   languageName: node
   linkType: hard
 
@@ -9092,14 +9092,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.5":
-  version: 8.4.6
-  resolution: "postcss@npm:8.4.6"
+"postcss@npm:^8.4.7":
+  version: 8.4.8
+  resolution: "postcss@npm:8.4.8"
   dependencies:
-    nanoid: ^3.2.0
+    nanoid: ^3.3.1
     picocolors: ^1.0.0
     source-map-js: ^1.0.2
-  checksum: 60e7808f39c4a9d0fa067bfd5eb906168c4eb6d3ff0093f7d314d1979b001a16363deedccd368a7df869c63ad4ae350d27da439c94ff3fb0f8fc93d49fe38a90
+  checksum: 8e42def1ea98a4ac800d2b8937b19c83c6722da6c39ded72b1877eb743922f51b6e93be3667284b685ac18e8b583f21d97f24e0a73161c70fe8dc6901e614b87
   languageName: node
   linkType: hard