diff --git a/documentation-site/examples/use-styletron/basic.tsx b/documentation-site/examples/use-styletron/basic.tsx index 108a2c6131..f2751a37f0 100644 --- a/documentation-site/examples/use-styletron/basic.tsx +++ b/documentation-site/examples/use-styletron/basic.tsx @@ -1,10 +1,10 @@ -import React from 'react'; -import {useStyletron} from 'baseui'; +import React from "react"; +import { useStyletron } from "baseui"; function UseStyletronExample() { const [css, theme] = useStyletron(); return ( -
+
This is a blue div
); diff --git a/documentation-site/pages/components/typography.mdx b/documentation-site/pages/components/typography.mdx index 0ee3270ab0..8460a6f939 100644 --- a/documentation-site/pages/components/typography.mdx +++ b/documentation-site/pages/components/typography.mdx @@ -1,3 +1,5 @@ +import { Notification, KIND } from "baseui/notification"; + import Example from "../../components/example"; import Layout from "../../components/layout"; import Exports from "../../components/exports"; @@ -9,6 +11,15 @@ import Text from "examples/typography/text.tsx"; export default Layout; + + These typography components are built on top of the Block component, which we + no longer recommend. Refer to the Styling guide + to understand how to use Base Web typography in your components. + + # Typography A set of text block components for an out-of-the-box path to the BaseUI font standard. diff --git a/documentation-site/pages/components/use-styletron.mdx b/documentation-site/pages/components/use-styletron.mdx index d876dd445d..366ad1a51c 100644 --- a/documentation-site/pages/components/use-styletron.mdx +++ b/documentation-site/pages/components/use-styletron.mdx @@ -50,9 +50,9 @@ on the given component: To understand overrides better, go [here](/guides/understanding-overrides/). -## Custom themes and Flow type +## Custom themes and types -The `styled` and `withStyle` functions imported from `baseui` provide flow type support for the +The `styled` and `withStyle` functions imported from `baseui` provide type support for the default [theme shape](/guides/theming/#theme-properties). However, if you create a custom theme with additional fields, flow will show an error. To help, baseui exports two utility functions `createThemedStyled` and `createThemedWithStyle`. These will return their respective functions with a provided theme type. @@ -68,27 +68,27 @@ Doing so saves you from needing to import the custom theme type around. See belo + createThemedUseStyletron, } from 'baseui'; - type CustomThemeT = {myBlue: string, myRed: string}; + type CustomTheme = {myBlue: string, myRed: string}; // you'll likely want to import these functions from a relative path in your application -+const themedStyled = createThemedStyled(); -+const themedWithStyle = createThemedWithStyle(); -+const themedUseStyletron = createThemedUseStyletron(); ++const themedStyled = createThemedStyled(); ++const themedWithStyle = createThemedWithStyle(); ++const themedUseStyletron = createThemedUseStyletron(); - type PropsT = { + type Props = { $active: boolean -- $theme: CustomThemeT +- $theme: CustomTheme }; --const First = styled('div', props => { -+const First = themedStyled('div', props => { +-const First = styled('div', props => { ++const First = themedStyled('div', props => { return { backgroundColor: props.$active ? props.$theme.colors.myBlue : props.$theme.colors.myRed, }; }); --const Second = withStyle('div', props => { -+const Second = themedWithStyle(First, props => { +-const Second = withStyle('div', props => { ++const Second = themedWithStyle(First, props => { return { color: props.$active ? props.$theme.colors.myBlue : props.$theme.colors.myRed, }; @@ -99,7 +99,7 @@ const Third = () => { + const [css, theme] = themedUseStyletron(); return ( --
+-
+
test
diff --git a/documentation-site/pages/getting-started/learn.mdx b/documentation-site/pages/getting-started/learn.mdx index 770fc2e90e..d885371078 100644 --- a/documentation-site/pages/getting-started/learn.mdx +++ b/documentation-site/pages/getting-started/learn.mdx @@ -26,7 +26,7 @@ export default () => { href="/my-link" className={css({ fontSize: "20px", - color: theme.colors.primary, + color: theme.colors.contentPrimary, })} > Custom Link diff --git a/documentation-site/pages/guides/colors.mdx b/documentation-site/pages/guides/colors.mdx new file mode 100644 index 0000000000..34fd9f906d --- /dev/null +++ b/documentation-site/pages/guides/colors.mdx @@ -0,0 +1,41 @@ +import Layout from "../../components/layout"; + +export default Layout; + +# Colors + +There are three layers of color tokens in Base Web: + +### 1) Primitive colors + +These are the tokens that map directly to CSS hex values. + +Examples: `green100`, `yellow600`, `magenta200` + +### 2) Semantic colors + +These tokens play a fundamental semantic role in the Base design language. They map to layer 1 primitive color tokens. + +Examples: `contentPrimary`, `backgroundTeriary`, `borderWarning` + +### 3) Component colors + +These tokens are referenced inside Base Web styled components. They map both to primitive and semantic color tokens. + +Examples: `buttonPrimaryText`, `linkHover` + +### Deprecated colors + +The foundation color tokens are deprecated. These tokens include `primaryA`, `primaryB`, `accent`, `positive`, `negative`, `warning`, and all of their variations. They are a legacy holdover from the previous theme creation API, intended to provide a quick way to "skin" our standard light and dark themes. They will be removed in a future version of Base Web. + +## Using colors in your own components + +All of the color tokens can be accessed via your application's theme object. It's rarely necessary to use primitive color tokens directly in your application. In most cases, semantic color tokens are the best choice. They are named according to the role they play in the design system, making them easier to use and understand in the context of your application. This helps assure that your components will be accessible and consistent with the rest of the design system. They also adjust between light and dark themes automatically. See the [Semantic tokens](/guides/styling/#semantic-tokens) section of the style guide for examples. + +In some cases it may also make sense to use component color tokens. For example, if you create a custom button-like component, you can ensure consistency with other button components by using the collection of button-specific component color tokens that Base Web uses internally for styling its native button components. + +## Customizing colors + +To customize a specific instance of a component, use component overrides. For everything else, use the `overrides` argument of the [`createTheme`](./theming.mdx#createTheme) function. + +As with using color tokens, it is usually best to customize your theme by targeting semantic color tokens and remapping them onto Base Web's primitive color tokens. diff --git a/documentation-site/pages/guides/styling.mdx b/documentation-site/pages/guides/styling.mdx index 1500cdae11..816b17d51e 100644 --- a/documentation-site/pages/guides/styling.mdx +++ b/documentation-site/pages/guides/styling.mdx @@ -202,7 +202,7 @@ export default function StyledFancyLink(props) { return ( ({ - color: $theme.colors.primary, + color: $theme.colors.contentPrimary, })} {...props} /> @@ -219,7 +219,7 @@ import { withStyle } from "baseui"; import { StyledLink } from "./link"; export const StyledFancyLink = withStyle(StyledLink, ({ $theme }) => ({ - color: $theme.colors.primary, + color: $theme.colors.contentPrimary, })); ``` @@ -359,37 +359,6 @@ There are three main techniques for styling Base Web components: the theme, `wit The [theming guide](/guides/theming) is your best resource for understanding the nuances of theming Base Web components. Theming is the first strategy we would recommend trying out when styling Base Web components. You can modify spacing, border radii, colors, typography scales- a whole slew of systemic theme tokens which will change the look of Base Web. -```js -import { createLightTheme } from "baseui"; -const primitives = { - accent: "#F127E4", // hot pink - accent50: "#FDEDFC", - accent100: "#FCD3F9", - accent200: "#F89FF3", - accent300: "#F45AEA", - accent400: "#F127E4", - accent500: "#B71DAD", - accent600: "#901788", - accent700: "#600F5B", -}; - -const overrides = { - colors: { - buttonSecondaryFill: primitives.accent100, - buttonSecondaryText: primitives.accent, - buttonSecondaryHover: primitives.accent200, - buttonSecondaryActive: primitives.accent300, - buttonSecondarySelectedFill: primitives.accent200, - buttonSecondarySelectedText: primitives.accent, - buttonSecondarySpinnerForeground: primitives.accent700, - buttonSecondarySpinnerBackground: primitives.accent300, - }, -}; - -export const lightTheme = createLightTheme(primitives, overrides); -export const darkTheme = createDarkTheme(primitives, overrides); -``` - We think you can get pretty far with just the theming layer alone. When it isn’t enough there are a few more techniques available to you. ### withStyle @@ -401,7 +370,7 @@ import { withStyle } from "baseui"; import { StyledLink } from "baseui/link"; export const MyStyledLink = withStyle(StyledLink, ({ $theme }) => ({ - borderBottom: `solid 2px ${theme.colors.primary}`, + borderBottom: `solid 2px ${theme.colors.contentPrimary}`, })); ``` diff --git a/documentation-site/pages/guides/theming.mdx b/documentation-site/pages/guides/theming.mdx index b22c2a123b..c455e50ec0 100644 --- a/documentation-site/pages/guides/theming.mdx +++ b/documentation-site/pages/guides/theming.mdx @@ -21,7 +21,6 @@ In this guide, we will cover the basics of theming Base Web components. We'll go - [Setting up Base Web with a theme](#setting-up-baseweb-with-a-theme) - [Toggling between light and dark themes](#toggling-between-light-and-dark) - [Customizing your theme](#customizing-your-theme) -- [Customizing typography](#customizing-typography) - [Customizing icons](#customizing-icons) - [Extending the theme](#extending-the-theme-type) - [Accessing your theme through styling utilities](#accessing-your-theme-through-styling-utilities) @@ -59,10 +58,10 @@ The theme object itself is nothing special—just an object with specific proper }, }} > - Make sure to reference the Flow/TypesScript definitions when customizing your - theme object. Base Web components assume certain properties are on the theme - object at run-time. A missing property on the theme object can lead to a - runtime error. + Make sure to reference the TypesScript definitions when customizing your theme + object. Base Web components assume certain properties are on the theme object + at run-time. A missing property on the theme object can lead to a runtime + error. ### Default themes @@ -148,186 +147,53 @@ However, before you go down either road, you should know that Base Web exports a As you might expect, `createTheme` is a factory function for Base Web-compliant theme objects. We provide it as a utility for you to quickly create a custom theme. -```js -import {createTheme} from 'baseui'; - -const theme = createTheme(/* primitives */, /* overrides */); -``` - -#### `primitives` - -Our theme object has a lot of properties. Most of these properties are assigned to a subset of recurring values. We call these reoccurring values theme building `primitives`. Primitives are made up mostly of colors (`primary`, `accent`, etc.), gradients of those colors (`primary100`, `primary200`, etc.), and a `primaryFontFamily`. To see the exact shape for `primitives`, reference the [Flow](https://github.com/uber/baseweb/blob/master/src/themes/types.js#L560) or [TypeScript](https://github.com/uber/baseweb/blob/master/src/theme.ts#L777) definitions. - -These are passed as the first argument to `createTheme`. - ```js import { createTheme } from "baseui"; -const primitives = { - accent: "#F127E4", // hot pink - accent50: "#FDEDFC", - accent100: "#FCD3F9", - accent200: "#F89FF3", - accent300: "#F45AEA", - accent400: "#F127E4", - accent500: "#B71DAD", - accent600: "#901788", - accent700: "#600F5B", -}; - -const theme = createTheme(primitives); +const theme = createTheme(/* overrides */); ``` -`createTheme` will use these primitive values to fill out all required properties on your theme object. Note: you don't have to assign every primitive right away. The primitives you pass into `createTheme` will override our default primitives so you can gradually build up your theme. - -Once you've passed some primitives in, `createTheme` _maps_ this small set of `primitives` to a much larger set of theme properties in a sensible manner. - -But what if the default _mapping_ (of primitives to theme properties) is not quite what you want? - -#### `overrides` - -The second parameter for createTheme is an `overrides` object. - -The `overrides` object will be deep-merged with the initial result of mapping `primitives` to all the theme properties. `overrides` is just a convenient shortcut for deep-merging assignments onto your theme object. +The only parameter for createTheme is an `overrides` object. `overrides` is just a convenient shortcut for deep-merging assignments onto your theme object. ```js import { createTheme } from "baseui"; -const primitives = { - accent: "#F127E4", // hot pink - accent50: "#FDEDFC", - accent100: "#FCD3F9", - accent200: "#F89FF3", - accent300: "#F45AEA", - accent400: "#F127E4", - accent500: "#B71DAD", - accent600: "#901788", - accent700: "#600F5B", +const colorOverrides = { + accent: theme.colors.magenta300, + linkText: theme.colors.accent, + linkVisited: theme.colors.accent, }; -const overrides = { - colors: { - buttonSecondaryFill: primitives.accent100, - buttonSecondaryText: primitives.accent, - buttonSecondaryHover: primitives.accent200, - buttonSecondaryActive: primitives.accent300, - buttonSecondarySelectedFill: primitives.accent200, - buttonSecondarySelectedText: primitives.accent, - buttonSecondarySpinnerForeground: primitives.accent700, - buttonSecondarySpinnerBackground: primitives.accent300, - }, +const iconsOverrides = { + Alert: Alarm, + Menu: ThreeLinesFilled, + TriangleDown: ChevronDown, + TriangleUp: ChevronUp, }; -const theme = createTheme(primitives, overrides); -``` - -In this example, we first reassign the accent color on our theme primitives to hot pink. Then we use `overrides` to re-map the secondary button colors to use our hot pink accent colors rather than the default primary colors. - -### `createDarkTheme` - -One of the main reasons to have a dynamic theme is to toggle your app between light and dark modes. `createTheme` will by default map `primitives` to theme colors in a way suited to light themes. If you want to create a custom theme on top of our dark theme, you can instead use the `createDarkTheme` function. - -```js -import { createDarkTheme } from "baseui"; - -const primitives = { - accent: "#F127E4", // hot pink - accent50: "#FDEDFC", - accent100: "#FCD3F9", - accent200: "#F89FF3", - accent300: "#F45AEA", - accent400: "#F127E4", - accent500: "#B71DAD", - accent600: "#901788", - accent700: "#600F5B", -}; - -const darkTheme = createDarkTheme(primitives); -``` - -This works exactly the same as `createTheme`, but `createDarkTheme` will map all your `primitives` to theme properties in a way that’s better suited to dark themes. Note: `createDarkTheme` also accepts an optional `overrides` object as the second argument. - -```js -import { createDarkTheme } from "baseui"; - -const primitives = { - accent: "#F127E4", // hot pink - accent50: "#FDEDFC", - accent100: "#FCD3F9", - accent200: "#F89FF3", - accent300: "#F45AEA", - accent400: "#F127E4", - accent500: "#B71DAD", - accent600: "#901788", - accent700: "#600F5B", -}; - -const overrides = { - colors: { - buttonSecondaryFill: primitives.accent100, - buttonSecondaryText: primitives.accent, - buttonSecondaryHover: primitives.accent200, - buttonSecondaryActive: primitives.accent300, - buttonSecondarySelectedFill: primitives.accent200, - buttonSecondarySelectedText: primitives.accent, - buttonSecondarySpinnerForeground: primitives.accent700, - buttonSecondarySpinnerBackground: primitives.accent300, +const typographyOverrides = { + DisplayLarge: { + fontFamily: "Georgia", }, }; -const darkTheme = createDarkTheme(primitives, overrides); -``` - -This is equivalent to our earlier `overrides` example, only the result is a dark theme rather than a light theme. - -If you aren't sure why this change in mapping is necessary, try creating a dark theme with `createTheme`. You might notice that the colors look somewhat off. This is because, in a typical light theme, things start light and then get darker as they require more attention; in a dark theme, things start dark and become lighter. We need to know which direction (light/dark) to go when assigning your primitive colors to theme properties. By separating the assignment logic for light and dark theme creation, we can better estimate which values to assign to various properties. - -### Customizing typography - -The `primitives` object has an optional property, `primaryFontFamily`, which allows you to set a custom font family string for typography components. - -```js -import { createTheme } from "baseui"; - -const primitives = { - primaryFontFamily: "Verdana", +const overrides = { + colors: colorOverrides, + icons: iconsOverrides, + typography: typographyOverrides, }; -const theme = createTheme(primitives); +const theme = createTheme(overrides); ``` -In this example, we assign `primaryFontFamily` to the vastly underrated `Verdana` font family. With this change, all Base Web components will use `Verdana`. - -But what if we wanted to use `Georgia` for Display typography? For this purpose, you would need to use `overrides`. - -```js -import { createTheme } from "baseui"; - -const primitives = { - primaryFontFamily: "Verdana", -}; +In this example, we first reassign our theme's accent color to a shade of magenta. Then we re-map the link colors to use our hot magenta accent color rather than the default colors. See the section on customizing colors for more information about how the various layers of color tokens map onto eachother. -const overrides = { - typography: { - DisplayLarge: { - fontFamily: "Georgia", - }, - DisplayMedium: { - fontFamily: "Georgia", - }, - DisplaySmall: { - fontFamily: "Georgia", - }, - DisplayXSmall: { - fontFamily: "Georgia", - }, - }, -}; +Next we replace some of the default icons with custom icons. And lastly, we override the `DisplayLarge` typography level to use the `Georgia` font family without affecting the font size, weight, or line height properties (or any of the other typography levels). -const theme = createTheme(primitives, overrides); -``` +### `createDarkTheme` -Initially, `Verdana` will be mapped to every typography value as a `primitive`. By using `overrides`, we can easily deep-merge some reassignments over the theme object. In this case, we set our `Display` typography levels to use the `Georgia` font. We use this same `overrides` technique for our applications. +One of the main reasons to have a dynamic theme is to toggle your app between light and dark modes. `createTheme` is an alias of `createLightTheme`; it will use the light theme color primitives as the foundation for the higher layer theme colors (read our [colors guide](./colors.mdx) to better understand about our higher layer color tokens map onto the color primitives). If you want to create a custom theme on top of our dark theme, you can instead use the `createDarkTheme` function. +It works exactly the same as `createTheme`, but `createDarkTheme` will use the dark theme color primitives as the foundation for your theme's color scheme. ### Customizing icons @@ -380,64 +246,6 @@ All the icons that can be found on the Icon component page can be overridden usi There may be a scenario where you want to extend our default theme. We do not recommend removing theme properties, as this may lead to a runtime error when a component references a missing property. _Adding_ new properties, though is perfectly acceptable. -```js -import type { ThemeT } from "baseui"; - -const CustomThemeT = ThemeT & { customColor: string }; -``` - -You will notice, however, that you can't use `createTheme` with your `CustomThemeT`. If you want to use `createTheme`, we recommend that you first create a normal theme with `createTheme` and then _extend_ it with your custom properties. - -```js -import { createTheme } from "baseui"; -import type { ThemeT } from "baseui"; - -const CustomThemeT = ThemeT & { customColor: string }; - -const theme = createTheme(/*primitives, overrides*/); -const customTheme: CustomThemeT = { - ...theme, - customColor: "pink", -}; - -function App() { - return ( - - {/* ... */} - - ); -} -``` - -Note: you can use the custom type theme object with our provider as so long as it _extends_ the default `ThemeT`. Base Web components will essentially ignore the additional properties, but the theme object will be available in component overrides. - -If you’re using Flow and want to use a custom theme shape with our various styling utilities, you can create new `styled`, `withStyle`, and `useStyletron` methods that respect your custom theme type. - -```js -// my-style-utils.js - -import { - createThemedStyled, - createThemedWithStyle, - createThemedUseStyletron -} from 'baseui'; - -export const themedStyled = createThemedStyled(); -export const themedWithStyle = createThemedWithStyle(); -export const themedUseStyletron = createThemedUseStyletron(); -``` - -You can import these custom themed utilities wherever you want access to your custom theme. - -```js -import { themedUseStyletron as useStyletron } from "path/to/my-style-utils.jsx"; - -function Foo() { - const [css, theme] = useStyletron(); - return
Okay
; -} -``` - ## Accessing your Theme through style utilities The theme object acts not only as a centralized API for customizing global styling properties, but it also allows developers to use consistent values when extending components or styling new components. Base Web makes access to the theme object a priority across all of our styling utilities and component overrides so that you can always use the right value. @@ -613,13 +421,6 @@ Control the media query widths used to establish responsive breakpoints. Control literal and semantic color values. These differ between light and dark themes. - - - - - - - @@ -670,55 +471,6 @@ Control literal and semantic color values. These differ between light and dark t -The following colors are "primitive" colors used to construct the theme when using `createTheme`. We make them available directly on the `theme.colors` object for your convenience. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/documentation-site/pages/guides/understanding-overrides.mdx b/documentation-site/pages/guides/understanding-overrides.mdx index 79aa1dccd4..bf7b2d233e 100644 --- a/documentation-site/pages/guides/understanding-overrides.mdx +++ b/documentation-site/pages/guides/understanding-overrides.mdx @@ -132,7 +132,9 @@ Let's use `$isDragged` to change the label color when dragged: overrides={{ Label: { style: ({ $theme, $isDragged }) => ({ - color: $isDragged ? $theme.colors.primary : $theme.colors.accent400, + color: $isDragged + ? $theme.colors.backgroundPrimary + : $theme.colors.backgroundAccent, }), }, }} diff --git a/documentation-site/routes.jsx b/documentation-site/routes.jsx index 7308b93230..b9d98625ad 100644 --- a/documentation-site/routes.jsx +++ b/documentation-site/routes.jsx @@ -49,6 +49,10 @@ const routes = [ title: "Overrides", itemId: "/guides/understanding-overrides", }, + { + title: "Colors", + itemId: "/guides/colors", + }, { title: "API Cheat Sheet", itemId: "/cheat-sheet", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 17e336e45c..12f1799bf7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: '@date-io/moment': specifier: ^2.13.1 version: 2.17.0(moment@2.29.4) + baseui: + specifier: ^14.0.0 + version: 14.0.0(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)(styletron-react@6.1.1) card-validator: specifier: ^6.2.0 version: 6.2.0 @@ -93,7 +96,7 @@ dependencies: specifier: 1.5.1 version: 1.5.1 styletron-react: - specifier: '>=6' + specifier: ^6.1.1 version: 6.1.1(react@18.2.0) styletron-standard: specifier: ^3.1.0 @@ -3014,6 +3017,7 @@ packages: /acorn-import-assertions@1.9.0(acorn@8.11.2): resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==} + deprecated: package has been renamed to acorn-import-attributes peerDependencies: acorn: ^8 dependencies: @@ -3296,6 +3300,51 @@ packages: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} dev: true + /baseui@14.0.0(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)(styletron-react@6.1.1): + resolution: {integrity: sha512-+lKgTfMow9jAfugBwmxo0QSi2vSo88UThQZoMxDiNwPGP85xGGSaK+Rqlo0FfshqJYJp0mlc8QyEKQgUsWLmbQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + react: '>=18 || 18' + react-dom: '>=18 || 18' + styletron-react: '>=6' + dependencies: + '@date-io/date-fns': 2.17.0(date-fns@2.30.0) + '@date-io/moment': 2.17.0(moment@2.29.4) + card-validator: 6.2.0 + csstype: 2.6.11 + d3: 6.7.0 + d3-array: 2.4.0 + date-fns: 2.30.0 + date-fns-tz: 1.3.8(date-fns@2.30.0) + just-extend: 4.1.1 + memoize-one: 5.0.0 + mockdate: 2.0.5 + moment: 2.29.4 + polished: 4.2.2 + popper.js: 1.16.1 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-dropzone: 9.0.0(react@18.2.0) + react-focus-lock: 2.9.6(@types/react@18.2.45)(react@18.2.0) + react-hook-form: 7.49.2(react@18.2.0) + react-input-mask: 2.0.4(react-dom@18.2.0)(react@18.2.0) + react-is: 17.0.2 + react-map-gl: 5.2.13(react-dom@18.2.0)(react@18.2.0) + react-movable: 3.0.4(react-dom@18.2.0)(react@18.2.0) + react-multi-ref: 1.0.1 + react-range: 1.8.14(react-dom@18.2.0)(react@18.2.0) + react-uid: 2.3.0(@types/react@18.2.45)(react@18.2.0) + react-virtualized: 9.22.5(react-dom@18.2.0)(react@18.2.0) + react-virtualized-auto-sizer: 1.0.2(react-dom@18.2.0)(react@18.2.0) + react-window: 1.8.5(react-dom@18.2.0)(react@18.2.0) + resize-observer-polyfill: 1.5.1 + styletron-react: 6.1.1(react@18.2.0) + styletron-standard: 3.1.0 + transitivePeerDependencies: + - '@types/react' + dev: false + /bcp-47-match@2.0.3: resolution: {integrity: sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==} dev: true @@ -8638,6 +8687,7 @@ packages: /trim@0.0.1: resolution: {integrity: sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==} + deprecated: Use String.prototype.trim() instead dev: true /trough@1.0.5: