@sanity/ui - npm Package Compare versions

Comparing version 1.3.3 to 1.8.3

package.json

 {
   "name": "@sanity/ui",
-  "version": "1.3.3",
+  "version": "1.8.3",
   "sideEffects": false,
@@ -15,4 +15,4 @@ "types": "./dist/index.d.ts",
       "node": {
-        "import": "./dist/index.cjs.mjs",
-        "require": "./dist/index.js"
+        "module": "./dist/index.esm.js",
+        "import": "./dist/index.cjs.mjs"
       },
@@ -53,65 +53,65 @@ "import": "./dist/index.esm.js",
   "dependencies": {
-    "@floating-ui/react-dom": "1.1.1",
-    "@sanity/color": "^2.2.3",
-    "@sanity/icons": "^2.2.2",
-    "csstype": "^3.1.1",
-    "framer-motion": "^10.0.0",
+    "@floating-ui/react-dom": "2.0.0",
+    "@sanity/color": "^2.2.5",
+    "@sanity/icons": "^2.4.1",
+    "csstype": "^3.1.2",
+    "framer-motion": "^10.16.2",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@commitlint/cli": "^17.4.4",
-    "@commitlint/config-conventional": "^17.4.4",
+    "@babel/core": "^7.22.11",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.11",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^2.2.13",
-    "@sanity/semantic-release-preset": "^4.1.0",
-    "@sanity/ui-workshop": "^1.2.1",
-    "@testing-library/dom": "^9.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@sanity/pkg-utils": "^2.4.8",
+    "@sanity/semantic-release-preset": "^4.1.4",
+    "@sanity/ui-workshop": "^1.2.11",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.4.0",
+    "@types/jest": "^29.5.4",
     "@types/jest-axe": "^3.5.5",
-    "@types/node": "^18.14.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/react-is": "^17.0.3",
+    "@types/node": "^20.5.9",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-is": "^18.2.1",
     "@types/refractor": "^3.0.2",
-    "@types/styled-components": "^5.1.26",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
     "commitizen": "^4.3.0",
-    "cypress": "^12.8.1",
-    "cypress-real-events": "^1.7.6",
+    "cypress": "^13.1.0",
+    "cypress-real-events": "^1.10.1",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.17.12",
+    "esbuild": "^0.19.2",
     "esbuild-register": "^3.4.2",
-    "eslint": "^8.34.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.4.3",
-    "jest-axe": "^7.0.0",
-    "jest-environment-jsdom": "^29.4.3",
-    "lint-staged": "^13.1.2",
-    "module-alias": "^2.2.2",
+    "jest": "^29.6.4",
+    "jest-axe": "^8.0.0",
+    "jest-environment-jsdom": "^29.6.4",
+    "lint-staged": "^14.0.1",
+    "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.4",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rimraf": "^5.0.0",
-    "semantic-release": "^21.0.0",
+    "refractor": "^4.8.1",
+    "rimraf": "^5.0.1",
+    "semantic-release": "^21.1.1",
     "start-server-and-test": "^2.0.0",
-    "styled-components": "^5.3.9",
-    "tsconfig-paths": "^4.1.2",
-    "typescript": "^5.0.0"
+    "styled-components": "^6.0.7",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.2.2"
   },
@@ -122,3 +122,3 @@ "peerDependencies": {
     "react-is": "^18",
-    "styled-components": "^5.2"
+    "styled-components": "^5.2 || ^6"
   },
@@ -152,5 +152,6 @@ "engines": {
   },
-  "packageManager": "pnpm@8.2.0",
+  "packageManager": "pnpm@8.6.12",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
@@ -157,0 +158,0 @@ "release": {

README.md

@@ -24,3 +24,3 @@ # @sanity/ui
     <Button text="Hello, world" />
-  </ThemeProvider>
+  </ThemeProvider>,
 )
@@ -27,0 +27,0 @@ ```

src/__workshop__/constants.ts

@@ -142,3 +142,3 @@ import {icons, IconSymbol} from '@sanity/icons'
 export const WORKSHOP_ICON_SYMBOL_OPTIONS: {[key: string]: IconSymbol | ''} = Object.keys(
-  icons
+  icons,
 ).reduce(
@@ -150,3 +150,3 @@ (acc: {[key: string]: IconSymbol | ''}, key) => {
   },
-  {'(none)': ''}
+  {'(none)': ''},
 )
@@ -153,0 +153,0 @@

src/components/autocomplete/__mocks__/apiStore.ts

@@ -7,3 +7,3 @@ import countries from '../__fixtures__/countries'
     onResults: (results: {value: string}[]) => void,
-    onLoading: (flag: boolean) => void
+    onLoading: (flag: boolean) => void,
   ): {cancel: () => void} {
@@ -31,3 +31,3 @@ const fakeDelay = 350 + Math.random() * 800
     onResult: (value: {code: string; title: string} | null) => void,
-    onLoading: (flag: boolean) => void
+    onLoading: (flag: boolean) => void,
   ): {cancel: () => void} {
@@ -34,0 +34,0 @@ const fakeDelay = 50 + Math.random() * 400

src/components/autocomplete/autocompleteReducer.ts

@@ -8,3 +8,3 @@ import {AutocompleteMsg, AutocompleteState} from './types'
   state: AutocompleteState,
-  msg: AutocompleteMsg
+  msg: AutocompleteMsg,
 ): AutocompleteState {
@@ -11,0 +11,0 @@ if (msg.type === 'input/change') {

src/components/dialog/styles.ts

@@ -1,4 +0,4 @@
-import {CSSObject} from 'styled-components'
 import {_responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
+import {CSSObject} from '../../types/styled'
 
@@ -32,3 +32,3 @@ /**
 export function responsiveDialogPositionStyle(
-  props: ResponsiveDialogPositionStyleProps & ThemeProps
+  props: ResponsiveDialogPositionStyleProps & ThemeProps,
 ): CSSObject[] {
@@ -35,0 +35,0 @@ const {theme} = props

src/components/menu/__workshop__/index.ts

@@ -73,3 +73,8 @@ import {defineScope} from '@sanity/ui-workshop'
     },
+    {
+      name: 'shouldFocus',
+      title: 'Menu with shouldFocus',
+      component: lazy(() => import('./shouldFocus')),
+    },
   ],
 })

src/components/menu/menuDivider.ts

@@ -1,3 +0,2 @@
-import styled, {StyledComponent} from 'styled-components'
-import {Theme} from '../../theme'
+import styled from 'styled-components'
 
@@ -7,3 +6,3 @@ /**
  */
-export const MenuDivider: StyledComponent<'hr', Theme> = styled.hr`
+export const MenuDivider = styled.hr`
   height: 1px;
@@ -10,0 +9,0 @@ border: 0;

src/components/menu/useMenuController.ts

@@ -64,3 +64,3 @@ import {useCallback, useEffect, useRef, useState} from 'react'
     },
-    [rootElement, setActiveIndex]
+    [rootElement, setActiveIndex],
   )
@@ -163,3 +163,3 @@
     },
-    [onKeyDown, originElement, setActiveIndex]
+    [onKeyDown, originElement, setActiveIndex],
   )
@@ -174,9 +174,14 @@
     },
-    [setActiveIndex]
+    [setActiveIndex],
   )
 
   const handleItemMouseLeave = useCallback(() => {
+    // Set the active index to -2 to deactivate all menu items
+    // when the user moves the mouse away from the menu item.
+    // We avoid using -1 because it would focus the first menu item,
+    // which would be incorrect when the user hovers over a gap
+    // between two menu items or a menu divider.
+    setActiveIndex(-2)
     rootElement?.focus()
-    setActiveIndex(-1)
-  }, [rootElement, setActiveIndex])
+  }, [setActiveIndex, rootElement])
 
@@ -183,0 +188,0 @@ // Set focus on the currently active element

src/components/tree/__workshop__/basic.perf.ts

@@ -6,3 +6,3 @@ import {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
   title: string,
-  run: PerfTestRunFn<ElementType>
+  run: PerfTestRunFn<ElementType>,
 ): PerfTestProps<ElementType> {
@@ -9,0 +9,0 @@ return {name: title, run}

src/components/tree/__workshop__/index.ts

@@ -14,3 +14,9 @@ import {defineScope} from '@sanity/ui-workshop'
     },
+    {
+      name: 'tab',
+      title: 'Tab',
+      component: lazy(() => import('./tabFromElement')),
+      // options: {perfTests: () => import('./basic.perf')},
+    },
   ],
 })

src/components/tree/helpers.ts

@@ -6,3 +6,3 @@ import {TreeState} from './types'
   itemElements: HTMLElement[],
-  focusedElement: HTMLElement
+  focusedElement: HTMLElement,
 ): HTMLElement | null {
@@ -50,3 +50,3 @@ const idx = itemElements.indexOf(focusedElement)
   itemElements: HTMLElement[],
-  focusedElement: HTMLElement
+  focusedElement: HTMLElement,
 ): HTMLElement | null {
@@ -53,0 +53,0 @@ const idx = itemElements.indexOf(focusedElement)

src/components/tree/style.ts

@@ -1,6 +0,6 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 
-export function treeItemRootStyle(): FlattenSimpleInterpolation {
+export function treeItemRootStyle(): ReturnType<typeof css> {
   return css`
@@ -32,3 +32,3 @@ &[role='none'] > [role='treeitem'] {
 
-export function treeItemRootColorStyle(props: ThemeProps): FlattenSimpleInterpolation {
+export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
@@ -96,4 +96,4 @@ const $tone = 'default'
 export function treeItemBoxStyle(
-  props: TreeItemBoxStyleProps & ThemeProps
-): FlattenSimpleInterpolation {
+  props: TreeItemBoxStyleProps & ThemeProps,
+): ReturnType<typeof css> {
   const {$level, theme} = props
@@ -100,0 +100,0 @@ const {space} = theme.sanity

src/hooks/useArrayProp.ts

@@ -13,3 +13,3 @@ import {useMemo} from 'react'
   val: T | T[] | undefined,
-  defaultVal?: T[]
+  defaultVal?: T[],
 ): T[] {
@@ -24,4 +24,4 @@ // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [__perf_hash__]
+    [__perf_hash__],
   )
 }

src/hooks/useClickOutside.ts

@@ -11,3 +11,3 @@ import {useEffect, useRef, useState} from 'react'
   element: HTMLElement | null,
-  elementsArg: Array<HTMLElement | HTMLElement[] | null>
+  elementsArg: Array<HTMLElement | HTMLElement[] | null>,
 ): HTMLElement[] {
@@ -33,3 +33,3 @@ const ret = [element]
   elementsArg: Array<HTMLElement | HTMLElement[] | null> = EMPTY_ARRAY,
-  boundaryElement?: HTMLElement | null
+  boundaryElement?: HTMLElement | null,
 ): (el: HTMLElement | null) => void {
@@ -36,0 +36,0 @@ const [element, setElement] = useState<HTMLElement | null>(null)

src/hooks/useCustomValidity.ts

@@ -8,3 +8,3 @@ import {useEffect} from 'react'
   ref: {current: null | {setCustomValidity: (validity: string) => void}},
-  customValidity: string | undefined
+  customValidity: string | undefined,
 ): void {
@@ -11,0 +11,0 @@ useEffect(() => {

src/lib/globalScope.ts

@@ -0,1 +1,2 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
@@ -2,0 +3,0 @@ * Gets the global scope instance in a given environment.

src/primitives/_selectable/style.ts

@@ -1,2 +0,2 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
@@ -13,3 +13,3 @@ import {_colorVarsStyle} from '../../styles/colorVars'
 
-export function selectableBaseStyle(): FlattenSimpleInterpolation {
+export function selectableBaseStyle(): ReturnType<typeof css> {
   return css`
@@ -26,2 +26,3 @@ background-color: inherit;
       border: 0;
+      width: -webkit-fill-available;
       width: stretch;
@@ -38,4 +39,4 @@ }
 export function selectableColorStyle(
-  props: SelectableStyleProps & ThemeProps
-): FlattenSimpleInterpolation {
+  props: SelectableStyleProps & ThemeProps,
+): ReturnType<typeof css> {
   const {$tone, theme} = props
@@ -42,0 +43,0 @@ const {base, muted, selectable} = theme.sanity.color

src/primitives/avatar/styles.ts

@@ -1,4 +0,4 @@
-import {CSSObject} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
+import {CSSObject} from '../../types/styled'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
@@ -35,2 +35,3 @@
 
+      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       '&:not([hidden])': {
@@ -74,2 +75,3 @@ display: 'block',
     '&>svg': {
+      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       '&:not([hidden])': {
@@ -82,3 +84,3 @@ display: 'block',
     '&[data-as="button"]': {
-      '-webkit-font-smoothing': 'inherit',
+      WebkitFontSmoothing: 'inherit',
       appearance: 'none',
@@ -92,2 +94,3 @@ margin: 0,
 
+      // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       '&:focus': {
@@ -105,3 +108,3 @@ boxShadow: focusRingStyle({focusRing}),
 export function responsiveAvatarSizeStyle(
-  props: ResponsiveAvatarSizeStyleProps & ThemeProps
+  props: ResponsiveAvatarSizeStyleProps & ThemeProps,
 ): CSSObject[] {
@@ -160,3 +163,3 @@ const {theme} = props
     '[data-status="editing"] &': {
-      strokeSasharray: '2 4',
+      strokeDasharray: '2 4',
       strokeLinecap: 'round',
@@ -163,0 +166,0 @@ },

src/primitives/badge/styles.ts

@@ -1,3 +0,3 @@
-import {CSSObject} from 'styled-components'
 import {ThemeProps} from '../../styles'
+import {CSSObject} from '../../types/styled'
 import {BadgeStyleProps} from './types'
@@ -4,0 +4,0 @@

src/primitives/button/styles.ts

@@ -1,2 +0,2 @@
-import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
@@ -6,2 +6,3 @@ import {_colorVarsStyle} from '../../styles/colorVars'
 import {ButtonMode, ButtonTone} from '../../types'
+import {CSSObject} from '../../types/styled'
 
@@ -11,3 +12,3 @@ /**
  */
-export function buttonBaseStyles(): FlattenSimpleInterpolation {
+export function buttonBaseStyles(): ReturnType<typeof css> {
   return css`
@@ -51,3 +52,3 @@ -webkit-font-smoothing: inherit;
 export function buttonColorStyles(
-  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps
+  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
 ): CSSObject[] {
@@ -54,0 +55,0 @@ const {$mode, theme} = props

src/primitives/card/styles.ts

@@ -1,2 +0,2 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
@@ -8,8 +8,8 @@ import {_colorVarsStyle} from '../../styles/colorVars'
 export function cardStyle(
-  props: CardStyleProps & ThemeProps
-): Array<FlattenSimpleInterpolation | (() => FlattenSimpleInterpolation)> {
+  props: CardStyleProps & ThemeProps,
+): Array<ReturnType<typeof css> | (() => ReturnType<typeof css>)> {
   return [cardBaseStyle(props), cardColorStyle(props)]
 }
 
-export function cardBaseStyle(props: CardStyleProps & ThemeProps): FlattenSimpleInterpolation {
+export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
   const {$checkered, theme} = props
@@ -33,2 +33,3 @@ const space = theme.sanity.space
       border: 0;
+      width: -webkit-fill-available;
       width: stretch;
@@ -50,3 +51,3 @@ }
 
-export function cardColorStyle(props: CardStyleProps & ThemeProps): FlattenSimpleInterpolation {
+export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
   const {$checkered, $focusRing, theme} = props
@@ -53,0 +54,0 @@ const {focusRing} = theme.sanity

src/primitives/checkbox/styles.ts

@@ -1,6 +0,6 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 
-export function checkboxBaseStyles(): FlattenSimpleInterpolation {
+export function checkboxBaseStyles(): ReturnType<typeof css> {
   return css`
@@ -12,3 +12,3 @@ position: relative;
 
-export function inputElementStyles(props: ThemeProps): FlattenSimpleInterpolation {
+export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
@@ -15,0 +15,0 @@ const color = theme.sanity.color.input

src/primitives/code/styles.ts

@@ -1,6 +0,4 @@
-import {css, FlattenInterpolation, ThemeProps as StyledThemeProps} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {Theme} from '../../theme'
+import {css, ExecutionContext} from 'styled-components'
 
-function codeSyntaxHighlightingStyle({theme}: ThemeProps) {
+function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
   const color = theme.sanity.color.syntax
@@ -48,3 +46,3 @@
 
-export function codeBaseStyle(): FlattenInterpolation<StyledThemeProps<Theme>> {
+export function codeBaseStyle(): ReturnType<typeof css> {
   return css`
@@ -51,0 +49,0 @@ color: var(--card-code-fg-color);

src/primitives/container/styles.ts

@@ -1,3 +0,3 @@
-import {CSSObject} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
+import {CSSObject} from '../../types/styled'
 import {ResponsiveWidthStyleProps} from './types'
@@ -15,3 +15,3 @@
 export function responsiveContainerWidthStyle(
-  props: ResponsiveWidthStyleProps & ThemeProps
+  props: ResponsiveWidthStyleProps & ThemeProps,
 ): CSSObject[] {
@@ -18,0 +18,0 @@ const {theme} = props

src/primitives/heading/styles.ts

@@ -1,8 +0,6 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {HeadingStyleProps} from './types'
 
-export function headingBaseStyle(
-  props: HeadingStyleProps & ThemeProps
-): FlattenSimpleInterpolation {
+export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
   const {$accent, $muted, theme} = props
@@ -39,3 +37,5 @@
       &:focus {
-        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);
+        box-shadow:
+          0 0 0 1px var(--card-bg-color),
+          0 0 0 3px var(--card-focus-ring-color);
       }
@@ -42,0 +42,0 @@

src/primitives/helpers.ts

 import {isElement, isFragment} from 'react-is'
 
 export function childrenToElementArray(
-  children: React.ReactNode
+  children: React.ReactNode,
 ): Array<React.ReactElement | string> {
@@ -9,4 +9,4 @@ const childrenArray = Array.isArray(children) ? children : [children]
   return childrenArray.filter(
-    (node) => isElement(node) || isFragment(node) || typeof node === 'string'
+    (node) => isElement(node) || isFragment(node) || typeof node === 'string',
   ) as Array<React.ReactElement | string>
 }

src/primitives/inline/styles.ts

@@ -1,3 +0,3 @@
-import {CSSObject} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
+import {CSSObject} from '../../types/styled'
 import {ResponsiveInlineSpaceStyleProps} from './types'
@@ -4,0 +4,0 @@

src/primitives/label/styles.ts

@@ -1,7 +0,7 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
 export function labelBaseStyle(
-  props: {$accent?: boolean; $muted: boolean} & ThemeProps
-): FlattenSimpleInterpolation {
+  props: {$accent?: boolean; $muted: boolean} & ThemeProps,
+): ReturnType<typeof css> {
   const {$accent, $muted, theme} = props
@@ -8,0 +8,0 @@ const {fonts} = theme.sanity

src/primitives/popover/__workshop__/index.ts

@@ -43,3 +43,8 @@ import {defineScope} from '@sanity/ui-workshop'
     },
+    {
+      name: 'side-panel',
+      title: 'Side panel',
+      component: lazy(() => import('./SidePanelStory')),
+    },
   ],
 })

src/primitives/popover/constants.ts

@@ -1,2 +0,2 @@
-import {PopoverMargins} from '../../types'
+import {Placement, PopoverMargins} from '../../types'
 
@@ -8,1 +8,15 @@ export const DEFAULT_POPOVER_DISTANCE = 4
 export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]
+export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
+  top: ['bottom', 'left', 'right'],
+  'top-start': ['bottom-start', 'left-start', 'right-start'],
+  'top-end': ['bottom-end', 'left-end', 'right-end'],
+  bottom: ['top', 'left', 'right'],
+  'bottom-start': ['top-start', 'left-start', 'right-start'],
+  'bottom-end': ['top-end', 'left-end', 'right-end'],
+  left: ['right', 'top', 'bottom'],
+  'left-start': ['right-start', 'top-start', 'bottom-start'],
+  'left-end': ['right-end', 'top-end', 'bottom-end'],
+  right: ['left', 'top', 'bottom'],
+  'right-start': ['left-start', 'top-start', 'bottom-start'],
+  'right-end': ['left-end', 'top-end', 'bottom-end'],
+}

src/primitives/popover/index.ts

 export * from './popover'
+export * from './types'

src/primitives/radio/styles.ts

@@ -1,6 +0,6 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 
-export function radioBaseStyle(): FlattenSimpleInterpolation {
+export function radioBaseStyle(): ReturnType<typeof css> {
   return css`
@@ -19,3 +19,3 @@ position: relative;
 
-export function inputElementStyle(props: ThemeProps): FlattenSimpleInterpolation {
+export function inputElementStyle(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
@@ -22,0 +22,0 @@ const {focusRing, input} = theme.sanity

src/primitives/select/styles.ts

@@ -1,2 +0,2 @@
-import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
@@ -11,6 +11,8 @@ import {
 import {ThemeFontSize} from '../../theme'
+import {CSSObject} from '../../types/styled'
 
-function rootStyle(): FlattenSimpleInterpolation {
+function rootStyle(): ReturnType<typeof css> {
   return css`
     position: relative;
+    width: -webkit-fill-available;
     width: stretch;
@@ -24,3 +26,3 @@
 
-function inputBaseStyle(props: ThemeProps): FlattenSimpleInterpolation {
+function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
@@ -110,3 +112,3 @@ const font = theme.sanity.fonts.text
   return _responsive(theme.sanity.media, $fontSize, (sizeIndex) =>
-    textSize(sizes[sizeIndex] || sizes[2])
+    textSize(sizes[sizeIndex] || sizes[2]),
   )
@@ -121,5 +123,5 @@ }
         $space: number[]
-      } & ThemeProps
+      } & ThemeProps,
     ) => CSSObject[])
-  | ((props: ThemeProps) => FlattenSimpleInterpolation)
+  | ((props: ThemeProps) => ReturnType<typeof css>)
 > {
@@ -135,3 +137,3 @@ return [
 
-function iconBoxStyle(props: ThemeProps): FlattenSimpleInterpolation {
+function iconBoxStyle(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
@@ -138,0 +140,0 @@ const color = theme.sanity.color.input

src/primitives/stack/styles.ts

@@ -1,3 +0,3 @@
-import {CSSObject} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
+import {CSSObject} from '../../types/styled'
 
@@ -24,3 +24,3 @@ export interface ResponsiveStackSpaceStyleProps {
 export function responsiveStackSpaceStyle(
-  props: ResponsiveStackSpaceStyleProps & ThemeProps
+  props: ResponsiveStackSpaceStyleProps & ThemeProps,
 ): CSSObject[] {
@@ -27,0 +27,0 @@ const {theme} = props

src/primitives/switch/styles.ts

@@ -1,2 +0,2 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
@@ -6,3 +6,3 @@ import {focusRingStyle} from '../../styles/internal'
 /* Root */
-export function switchBaseStyles(): FlattenSimpleInterpolation {
+export function switchBaseStyles(): ReturnType<typeof css> {
   return css`
@@ -17,3 +17,3 @@ position: relative;
 /* Input */
-export function switchInputStyles(): FlattenSimpleInterpolation {
+export function switchInputStyles(): ReturnType<typeof css> {
   // Visually hide the input element while keeping it interactive
@@ -39,3 +39,3 @@ return css`
 /* Representation */
-export function switchRepresentationStyles(props: ThemeProps): FlattenSimpleInterpolation {
+export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
@@ -108,3 +108,3 @@ const {focusRing, input} = theme.sanity
 /* Track */
-export function switchTrackStyles(props: ThemeProps): FlattenSimpleInterpolation {
+export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
   const {theme} = props
@@ -129,4 +129,4 @@ const {input} = theme.sanity
 export function switchThumbStyles(
-  props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps
-): FlattenSimpleInterpolation {
+  props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
+): ReturnType<typeof css> {
   const {$indeterminate, theme} = props
@@ -133,0 +133,0 @@ const {input} = theme.sanity

src/primitives/text/styles.ts

@@ -1,7 +0,7 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
 export function textBaseStyle(
-  props: {$accent?: boolean; $muted?: boolean} & ThemeProps
-): FlattenSimpleInterpolation {
+  props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
+): ReturnType<typeof css> {
   const {$accent, $muted, theme} = props
@@ -43,3 +43,5 @@ const {weights} = theme.sanity.fonts.text
       &:focus {
-        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);
+        box-shadow:
+          0 0 0 1px var(--card-bg-color),
+          0 0 0 3px var(--card-focus-ring-color);
       }
@@ -46,0 +48,0 @@

src/primitives/tooltip/index.ts

 export * from './tooltip'
+export * from './tooltipDelayGroup'

src/primitives/types.ts

@@ -132,1 +132,11 @@ import {
 }
+
+/**
+ * @beta
+ */
+export type Delay =
+  | number
+  | Partial<{
+      open: number
+      close: number
+    }>

src/styles/border/borderStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
@@ -19,3 +19,3 @@ import {ThemeProps} from '../types'
   return _responsive(media, props.$border, (value) =>
-    value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}}
+    value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}},
   )
@@ -29,3 +29,3 @@ }
   return _responsive(media, props.$borderTop, (value) =>
-    value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}}
+    value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}},
   )
@@ -39,3 +39,3 @@ }
   return _responsive(media, props.$borderRight, (value) =>
-    value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}}
+    value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}},
   )
@@ -49,3 +49,3 @@ }
   return _responsive(media, props.$borderBottom, (value) =>
-    value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}}
+    value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}},
   )
@@ -59,4 +59,4 @@ }
   return _responsive(media, props.$borderLeft, (value) =>
-    value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}}
+    value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}},
   )
 }

src/styles/box/boxStyle.ts

 import {Property} from 'csstype'
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
@@ -4,0 +4,0 @@ import {ThemeProps} from '../types'

src/styles/colorVars/colorVarsStyle.ts

@@ -1,3 +0,3 @@
-import {CSSObject} from 'styled-components'
 import {ThemeColorBase, ThemeColorGenericState} from '../../theme'
+import {CSSObject} from '../../types/styled'
 
@@ -10,3 +10,3 @@ /**
   color: ThemeColorGenericState,
-  checkered = false
+  checkered = false,
 ): CSSObject {
@@ -13,0 +13,0 @@ return {

src/styles/flex/flexItemStyle.ts

@@ -1,3 +0,3 @@
-import {CSSObject} from 'styled-components'
 import {EMPTY_ARRAY} from '../../constants'
+import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
@@ -19,3 +19,3 @@ import {ThemeProps} from '../types'
 export function responsiveFlexItemStyle(
-  props: ResponsiveFlexItemStyleProps & ThemeProps
+  props: ResponsiveFlexItemStyleProps & ThemeProps,
 ): CSSObject[] {
@@ -22,0 +22,0 @@ const {theme} = props

src/styles/flex/flexStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {rem, _responsive} from '../helpers'
@@ -26,3 +26,3 @@ import {ThemeProps} from '../types'
 export function responsiveFlexAlignStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps
+  props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
@@ -56,3 +56,3 @@ const {theme} = props
 export function responsiveFlexJustifyStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps
+  props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
@@ -68,3 +68,3 @@ const {theme} = props
 export function responsiveFlexDirectionStyle(
-  props: ResponsiveFlexStyleProps & ThemeProps
+  props: ResponsiveFlexStyleProps & ThemeProps,
 ): CSSObject[] {
@@ -71,0 +71,0 @@ const {theme} = props

src/styles/font/codeFontStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {ThemeProps} from '../types'
@@ -3,0 +3,0 @@ import {responsiveFont} from './responsiveFont'

src/styles/font/headingFontStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {ThemeProps} from '../types'
@@ -3,0 +3,0 @@ import {responsiveFont} from './responsiveFont'

src/styles/font/labelFontStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {ThemeProps} from '../types'
@@ -3,0 +3,0 @@ import {responsiveFont} from './responsiveFont'

src/styles/font/responsiveFont.ts

@@ -1,3 +0,3 @@
-import {CSSObject} from 'styled-components'
 import {ThemeFontSize, ThemeFontKey} from '../../theme'
+import {CSSObject} from '../../types/styled'
 import {rem, _responsive} from '../helpers'
@@ -13,3 +13,3 @@ import {ThemeProps} from '../types'
   fontKey: ThemeFontKey,
-  props: ResponsiveFontStyleProps & ThemeProps
+  props: ResponsiveFontStyleProps & ThemeProps,
 ): CSSObject[] {
@@ -16,0 +16,0 @@ const {$size, $weight, theme} = props

src/styles/font/textAlignStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
@@ -11,3 +11,3 @@ import {ThemeProps} from '../types'
 export function responsiveTextAlignStyle(
-  props: ResponsiveTextAlignStyleProps & ThemeProps
+  props: ResponsiveTextAlignStyleProps & ThemeProps,
 ): CSSObject[] {
@@ -14,0 +14,0 @@ const {theme} = props

src/styles/font/textFontStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {ThemeProps} from '../types'
@@ -3,0 +3,0 @@ import {responsiveFont} from './responsiveFont'

src/styles/grid/gridItemStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {_responsive} from '../helpers'
@@ -3,0 +3,0 @@ import {ThemeProps} from '../types'

src/styles/grid/gridStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {rem, _responsive} from '../helpers'
@@ -3,0 +3,0 @@ import {ThemeProps} from '../types'

src/styles/helpers.ts

@@ -1,4 +0,4 @@
-import {CSSObject} from 'styled-components'
 import {EMPTY_ARRAY} from '../constants'
 import {Theme} from '../theme'
+import {CSSObject} from '../types/styled'
 
@@ -31,3 +31,3 @@ /**
   values: T[],
-  callback: (value: T, index: number, array: T[]) => CSSObject
+  callback: (value: T, index: number, array: T[]) => CSSObject,
 ): CSSObject[] {
@@ -58,3 +58,3 @@ const statements = values?.map(callback) || []
   props: string[],
-  spaceIndexes: number[] = EMPTY_ARRAY
+  spaceIndexes: number[] = EMPTY_ARRAY,
 ): CSSObject[] | null {
@@ -70,4 +70,4 @@ if (!Array.isArray(spaceIndexes)) {
   return _responsive(theme.sanity.media, spaceIndexes, (spaceIndex) =>
-    _fillCSSObject(props, rem(theme.sanity.space[spaceIndex]))
+    _fillCSSObject(props, rem(theme.sanity.space[spaceIndex])),
   )
 }

src/styles/input/responsiveInputPaddingStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {rem, _responsive} from '../helpers'
@@ -14,3 +14,3 @@ import {ThemeProps} from '../types'
 export function responsiveInputPaddingStyle(
-  props: TextInputResponsivePaddingStyleProps & ThemeProps
+  props: TextInputResponsivePaddingStyleProps & ThemeProps,
 ): CSSObject[] {
@@ -55,3 +55,3 @@ const {$fontSize, $iconLeft, $iconRight, $padding, $space, theme} = props
     $space: number[]
-  } & ThemeProps
+  } & ThemeProps,
 ): CSSObject[] {
@@ -66,3 +66,3 @@ return responsiveInputPaddingStyle({...props, $iconLeft: true, $iconRight: true})
     $space: number[]
-  } & ThemeProps
+  } & ThemeProps,
 ): CSSObject[] {
@@ -77,5 +77,5 @@ return responsiveInputPaddingStyle({...props, $iconLeft: true})
     $space: number[]
-  } & ThemeProps
+  } & ThemeProps,
 ): CSSObject[] {
   return responsiveInputPaddingStyle({...props, $iconRight: true})
 }

src/styles/input/textInputStyle.ts

@@ -1,4 +0,5 @@
-import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
+import {css} from 'styled-components'
 import {ThemeColorSchemeKey, ThemeFontWeightKey} from '../../theme'
 import {CardTone} from '../../types'
+import {CSSObject} from '../../types/styled'
 import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
@@ -36,3 +37,3 @@ import {rem, _responsive} from '../helpers'
 
-export function textInputRootStyle(): FlattenSimpleInterpolation {
+export function textInputRootStyle(): ReturnType<typeof css> {
   return ROOT_STYLE
@@ -42,4 +43,4 @@ }
 export function textInputBaseStyle(
-  props: TextInputInputStyleProps & ThemeProps
-): FlattenSimpleInterpolation {
+  props: TextInputInputStyleProps & ThemeProps,
+): ReturnType<typeof css> {
   const {theme, $scheme, $tone, $weight} = props
@@ -131,4 +132,4 @@ const font = theme.sanity.fonts.text
 export function textInputRepresentationStyle(
-  props: TextInputRepresentationStyleProps & ThemeProps
-): FlattenSimpleInterpolation {
+  props: TextInputRepresentationStyleProps & ThemeProps,
+): ReturnType<typeof css> {
   const {$hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
@@ -135,0 +136,0 @@ const {focusRing, input} = theme.sanity

src/styles/margin/marginStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {_getResponsiveSpace} from '../helpers'
@@ -7,3 +7,3 @@ import {ThemeProps} from '../types'
 export function responsiveMarginStyle(
-  props: ResponsiveMarginStyleProps & ThemeProps
+  props: ResponsiveMarginStyleProps & ThemeProps,
 ): CSSObject[][] {
@@ -10,0 +10,0 @@ const {theme} = props

src/styles/padding/paddingStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {_getResponsiveSpace} from '../helpers'
@@ -7,3 +7,3 @@ import {ThemeProps} from '../types'
 export function responsivePaddingStyle(
-  props: ResponsivePaddingStyleProps & ThemeProps
+  props: ResponsivePaddingStyleProps & ThemeProps,
 ): CSSObject[][] {
@@ -10,0 +10,0 @@ const {theme} = props

src/styles/radius/radiusStyle.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../../types/styled'
 import {rem, _responsive} from '../helpers'
@@ -3,0 +3,0 @@ import {ThemeProps} from '../types'

src/styles/shadow/shadowStyle.ts

@@ -1,4 +0,4 @@
-import {CSSObject} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {BoxShadow, ThemeShadow} from '../../theme'
+import {CSSObject} from '../../types/styled'
 import {rem, _responsive} from '../helpers'
@@ -5,0 +5,0 @@ import {ThemeProps} from '../types'

src/theme/lib/theme/color/button/createButtonModes.ts

@@ -13,3 +13,3 @@ import {ThemeColorBase} from '../base'
   solid: ThemeColorSolid,
-  muted: ThemeColorMuted
+  muted: ThemeColorMuted,
 ): ThemeColorButton {
@@ -16,0 +16,0 @@ return {

src/theme/lib/theme/color/button/createButtonTones.ts

@@ -13,3 +13,3 @@ import {ThemeColorBase} from '../base'
   muted: ThemeColorMuted,
-  mode: ThemeColorButtonModeKey
+  mode: ThemeColorButtonModeKey,
 ): ThemeColorButtonTones {
@@ -16,0 +16,0 @@ return {

src/theme/lib/theme/color/card/createCardStates.ts

@@ -14,3 +14,3 @@ import {ThemeColorBase} from '../base'
   solid: ThemeColorSolid,
-  muted: ThemeColorMuted
+  muted: ThemeColorMuted,
 ): ThemeColorCard {
@@ -17,0 +17,0 @@ return {

src/theme/lib/theme/color/factory.ts

@@ -90,3 +90,3 @@ import {ThemeColorGenericState} from './_generic'
 export function createColorTheme(
-  partialOpts: PartialThemeColorBuilderOpts = {}
+  partialOpts: PartialThemeColorBuilderOpts = {},
 ): ThemeColorSchemes {
@@ -121,3 +121,3 @@ const builders: ThemeColorBuilderOpts = {...defaultOpts, ...partialOpts}
   dark: boolean,
-  name: ThemeColorName
+  name: ThemeColorName,
 ): ThemeColor {
@@ -124,0 +124,0 @@ const base = opts.base({dark, name})

src/theme/lib/theme/color/input/createInputModes.ts

@@ -12,3 +12,3 @@ import {ThemeColorBase} from '../base'
   solid: ThemeColorSolid,
-  muted: ThemeColorMuted
+  muted: ThemeColorMuted,
 ): ThemeColorInput {
@@ -15,0 +15,0 @@ return {

src/theme/lib/theme/color/muted/createMuted.ts

@@ -10,3 +10,3 @@ import {ThemeColorBase} from '../base'
   dark: boolean,
-  name: ThemeColorName
+  name: ThemeColorName,
 ): ThemeColorMuted {
@@ -13,0 +13,0 @@ return {

src/theme/lib/theme/color/selectable/createSelectableTones.ts

@@ -12,3 +12,3 @@ import {ThemeColorBase} from '../base'
   solid: ThemeColorSolid,
-  muted: ThemeColorMuted
+  muted: ThemeColorMuted,
 ): ThemeColorSelectable {
@@ -30,3 +30,3 @@ return {
   muted: ThemeColorMuted,
-  tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+  tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical',
 ): ThemeColorSelectableStates {
@@ -33,0 +33,0 @@ return {

src/theme/lib/theme/color/solid/createSolidTones.ts

@@ -10,3 +10,3 @@ import {ThemeColorBase} from '../base'
   dark: boolean,
-  name: ThemeColorName
+  name: ThemeColorName,
 ): ThemeColorSolid {
@@ -13,0 +13,0 @@ return {

src/theme/lib/theme/color/spot/createSpot.ts

@@ -8,3 +8,3 @@ import {ThemeColorBase} from '../base'
   base: ThemeColorBase,
-  dark: boolean
+  dark: boolean,
 ): ThemeColorSpot {
@@ -11,0 +11,0 @@ return {

src/theme/lib/theme/shadow.ts

@@ -10,3 +10,3 @@ /**
   number,
-  number
+  number,
 ]
@@ -13,0 +13,0 @@

src/theme/lib/theme/theme.ts

@@ -13,3 +13,3 @@ import {ThemeAvatar} from './avatar'
   // eslint-disable-next-line @typescript-eslint/ban-types
-  Styles extends {} = {}
+  Styles extends {} = {},
 > {
@@ -16,0 +16,0 @@ avatar: ThemeAvatar

src/theme/types.ts

@@ -1,2 +0,2 @@
-import {CSSObject} from 'styled-components'
+import {CSSObject} from '../types/styled'
 import {BaseTheme, ThemeColor, ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
@@ -3,0 +3,0 @@

src/theme/useRootTheme.ts

@@ -0,1 +1,2 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import {useContext} from 'react'
@@ -2,0 +3,0 @@ import {isRecord} from '../lib/isRecord'

src/types/index.ts

@@ -13,2 +13,3 @@ export * from './avatar'
 export * from './selectable'
+export * from './styled'
 export * from './text'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2875884

increased by5.09%

Number of package files

561

increased by2.75%

Lines of code

45022

increased by5.28%

Dependency changes

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@floating-ui/react-dom@2.0.0(transitive)

• + Added@types/stylis@4.2.5(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addedpostcss@8.4.38(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstyled-components@6.1.13(transitive)

• + Addedstylis@4.3.2(transitive)

• + Addedtslib@2.6.2(transitive)

• - Removed@ampproject/remapping@2.3.0(transitive)

• - Removed@babel/code-frame@7.24.7(transitive)

• - Removed@babel/compat-data@7.25.4(transitive)

• - Removed@babel/core@7.25.2(transitive)

• - Removed@babel/generator@7.25.6(transitive)

• - Removed@babel/helper-annotate-as-pure@7.24.7(transitive)

• - Removed@babel/helper-compilation-targets@7.25.2(transitive)

• - Removed@babel/helper-module-imports@7.24.7(transitive)

• - Removed@babel/helper-module-transforms@7.25.2(transitive)

• - Removed@babel/helper-plugin-utils@7.24.8(transitive)

• - Removed@babel/helper-simple-access@7.24.7(transitive)

• - Removed@babel/helper-string-parser@7.24.8(transitive)

• - Removed@babel/helper-validator-identifier@7.24.7(transitive)

• - Removed@babel/helper-validator-option@7.24.8(transitive)

• - Removed@babel/helpers@7.25.6(transitive)

• - Removed@babel/highlight@7.24.7(transitive)

• - Removed@babel/parser@7.25.6(transitive)

• - Removed@babel/plugin-syntax-jsx@7.24.7(transitive)

• - Removed@babel/template@7.25.0(transitive)

• - Removed@babel/traverse@7.25.6(transitive)

• - Removed@babel/types@7.25.6(transitive)

• - Removed@emotion/is-prop-valid@1.3.0(transitive)

• - Removed@emotion/memoize@0.9.0(transitive)

• - Removed@emotion/stylis@0.8.5(transitive)

• - Removed@emotion/unitless@0.7.5(transitive)

• - Removed@floating-ui/react-dom@1.1.1(transitive)

• - Removed@jridgewell/gen-mapping@0.3.5(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removedansi-styles@3.2.1(transitive)

• - Removedbabel-plugin-styled-components@2.1.4(transitive)

• - Removedbrowserslist@4.23.3(transitive)

• - Removedcaniuse-lite@1.0.30001660(transitive)

• - Removedchalk@2.4.2(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedconvert-source-map@2.0.0(transitive)

• - Removeddebug@4.3.7(transitive)

• - Removedelectron-to-chromium@1.5.22(transitive)

• - Removedescalade@3.2.0(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedgensync@1.0.0-beta.2(transitive)

• - Removedglobals@11.12.0(transitive)

• - Removedhas-flag@3.0.0(transitive)

• - Removedhoist-non-react-statics@3.3.2(transitive)

• - Removedjsesc@2.5.2(transitive)

• - Removedjson5@2.2.3(transitive)

• - Removedlodash@4.17.21(transitive)

• - Removedlru-cache@5.1.1(transitive)

• - Removedms@2.1.3(transitive)

• - Removednode-releases@2.0.18(transitive)

• - Removedpicomatch@2.3.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedsemver@6.3.1(transitive)

• - Removedstyled-components@5.3.11(transitive)

• - Removedsupports-color@5.5.0(transitive)

• - Removedto-fast-properties@2.0.0(transitive)

• - Removedupdate-browserslist-db@1.1.0(transitive)

• - Removedyallist@3.1.1(transitive)

• Updated@floating-ui/react-dom@2.0.0

• Updated@sanity/color@^2.2.5

• Updated@sanity/icons@^2.4.1

• Updatedcsstype@^3.1.2

• Updatedframer-motion@^10.16.2