npm - @charcoal-ui/react - Versions diffs - 3.13.0 → 3.14.0 - Mend

@charcoal-ui/react 3.13.0 → 3.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -20,7 +20,7 @@
     "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^3.13.0",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^3.14.0",
     "@react-types/dialog": "^3.5.8",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^8.0.5",
@@ -48,11 +48,11 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^3.13.0",
-    "@charcoal-ui/icons": "^3.13.0",
-    "@charcoal-ui/styled": "^3.13.0",
-    "@charcoal-ui/theme": "^3.13.0",
-    "@charcoal-ui/utils": "^3.13.0",
+    "@charcoal-ui/foundation": "^3.14.0",
+    "@charcoal-ui/icons": "^3.14.0",
+    "@charcoal-ui/styled": "^3.14.0",
+    "@charcoal-ui/theme": "^3.14.0",
+    "@charcoal-ui/utils": "^3.14.0",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",
@@ -86,5 +86,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "f0267a5894ade5fd8f378a5f77dddf8ba27bd320"
+  "gitHead": "694af78ad36f1caa108a4c3fae4f51ce54b7f78b"
 }

package/src/README.mdx ADDED Viewed

@@ -0,0 +1,68 @@
+import { Meta, Story, Canvas, Props } from '@storybook/addon-docs'
+<Meta title="react/README" />
+# Quickstart
+[![npmバッジ](https://img.shields.io/npm/v/@charcoal-ui/react?label=%40charcoal-ui%2Freact&style=flat-square&logo=npm)](https://www.npmjs.com/package/@charcoal-ui/react)
+## インストール
+以下のいずれかのパッケージマネージャーを使用してインストールしてください
+### npm
+```bash
+npm install @charcoal-ui/react
+```
+### yarn
+```bash
+yarn add @charcoal-ui/react
+```
+### pnpm
+```bash
+pnpm add @charcoal-ui/react
+```
+### bun
+```bash
+bun add @charcoal-ui/react
+```
+## Usage
+`@charcoal-ui/styled`と合わせて使用してください。
+`ThemeProvider`、`TokenInjector`を使用してください。詳しくは `@charcoal-ui/styled`のクイックスタートを参照してください。
+必要に応じて`SSRProvider`や`OverlayProvider`も使用してください。
+また、`ThemeProvider`、`TokenInjector`、`SSRProvider`、`OverlayProvider`を内包した CharcoalProvider を使用することもできます。
+```tsx
+import { CharcoalProvider } from '@charcoal-ui/react'
+import { prefersColorScheme, themeSelector } from '@charcoal-ui/styled'
+import { dark, light } from '@charcoal-ui/theme'
+import { FC, ReactNode } from 'react'
+export const CharcoalProviderExample: FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <CharcoalProvider
+      themeMap={{
+        ':root': light,
+        [themeSelector('light')]: light,
+        [themeSelector('dark')]: dark,
+        [prefersColorScheme('dark')]: dark,
+      }}
+    >
+      {children}
+    </CharcoalProvider>
+  )
+}
+```

package/src/SSR.mdx ADDED Viewed

@@ -0,0 +1,67 @@
+import { Meta } from '@storybook/addon-docs'
+<Meta title="react/SSR Guide" />
+# サーバーサイドレンダリング
+charcoal は [Next.js](https://nextjs.org/) などのサーバーサイドレンダリングをサポートしています。
+## SSRProvider
+React18 以下で SSR を利用する際は`SSRProvider`をアプリケーションに適用してください。[react-aria の SSRProvider について](https://react-spectrum.adobe.com/react-aria/SSRProvider.html)
+```typescript
+import { FC, ReactNode } from 'react'
+import { SSRProvider } from '@charcoal-ui/react'
+const YourAppProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  return <SSRProvider>{children}</SSRProvider>
+}
+```
+## ダークテーマ
+ダークテーマを利用する場合は、`makeSetThemeScriptCode`を用いてアプリケーションの起動前にテーマを変更するスクリプトを実行してください。これによりクライアントサイドのレンダリングによるテーマのチラつきを抑えることができます。Next.js の場合は `_document.tsx` に下記のように記述することができます（[Next.js の document.tsx について](https://nextjs.org/docs/advanced-features/custom-document)）。
+```typescript
+export default class MyDocument extends Document {
+  render() {
+    const setThemeScript = makeSetThemeScriptCode()
+    return (
+      <Html>
+        <Head>
+          <Script id="set-theme-script" strategy="beforeInteractive">
+            {setThemeScript}
+          </Script>
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+```
+## Modal
+[Modal](/docs/react-modal--docs) を利用する際は `portalContainer`に `document.body`を適用してください。このとき、サーバサイドでは`isOpen`を `true` にしないでください。`document`を参照できずにエラーになります。
+```typescript
+import { FC, ReactNode } from 'react'
+import { Modal } from '@charcoal-ui/react'
+const Example: FC<{ children: ReactNode }> = ({ children }) => {
+  return (
+    <Modal
+      title="modal"
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      portalContainer={document.body}
+    >
+      {children}
+    </Modal>
+  )
+}
+```

package/src/_lib/index.ts CHANGED Viewed

@@ -24,7 +24,7 @@ export function unreachable(): never
  * @param value Value to be asserted as unreachable
  */
 // NOTE: Uses separate overloads, _not_ `value?: never`, to not allow `undefined` to be passed
-// eslint-disable-next-line @typescript-eslint/unified-signatures
 export function unreachable(value: never): never
 export function unreachable(value?: never): never {
   throw new Error(

package/src/components/Button/__snapshots__/index.story.storyshot CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storybook Tests react/Button Danger 1`] = `
+exports[`Storybook Tests > react/Button > Danger 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -116,7 +116,7 @@ exports[`Storybook Tests react/Button Danger 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Button Default 1`] = `
+exports[`Storybook Tests > react/Button > Default 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -232,7 +232,7 @@ exports[`Storybook Tests react/Button Default 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Button Disabled 1`] = `
+exports[`Storybook Tests > react/Button > Disabled 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -348,7 +348,7 @@ exports[`Storybook Tests react/Button Disabled 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Button FullWidth 1`] = `
+exports[`Storybook Tests > react/Button > FullWidth 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -464,7 +464,7 @@ exports[`Storybook Tests react/Button FullWidth 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Button IsActive 1`] = `
+exports[`Storybook Tests > react/Button > IsActive 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -574,7 +574,7 @@ exports[`Storybook Tests react/Button IsActive 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Button Navigation 1`] = `
+exports[`Storybook Tests > react/Button > Navigation 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -690,7 +690,7 @@ exports[`Storybook Tests react/Button Navigation 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Button Overlay 1`] = `
+exports[`Storybook Tests > react/Button > Overlay 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -806,7 +806,7 @@ exports[`Storybook Tests react/Button Overlay 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Button Primary 1`] = `
+exports[`Storybook Tests > react/Button > Primary 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -922,7 +922,7 @@ exports[`Storybook Tests react/Button Primary 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Button Small 1`] = `
+exports[`Storybook Tests > react/Button > Small 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;

package/src/components/Checkbox/__snapshots__/index.story.storyshot CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storybook Tests react/Checkbox Checked 1`] = `
+exports[`Storybook Tests > react/Checkbox > Checked 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -167,7 +167,7 @@ exports[`Storybook Tests react/Checkbox Checked 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Checkbox Default 1`] = `
+exports[`Storybook Tests > react/Checkbox > Default 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -325,7 +325,7 @@ exports[`Storybook Tests react/Checkbox Default 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Checkbox Disabled 1`] = `
+exports[`Storybook Tests > react/Checkbox > Disabled 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -493,7 +493,7 @@ exports[`Storybook Tests react/Checkbox Disabled 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Checkbox Invalid 1`] = `
+exports[`Storybook Tests > react/Checkbox > Invalid 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -662,7 +662,7 @@ exports[`Storybook Tests react/Checkbox Invalid 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Checkbox Label 1`] = `
+exports[`Storybook Tests > react/Checkbox > Label 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -830,7 +830,7 @@ exports[`Storybook Tests react/Checkbox Label 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Checkbox ReadOnly 1`] = `
+exports[`Storybook Tests > react/Checkbox > ReadOnly 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;

package/src/components/Clickable/__snapshots__/index.story.storyshot CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storybook Tests react/Clickable Button 1`] = `
+exports[`Storybook Tests > react/Clickable > Button 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -51,7 +51,7 @@ exports[`Storybook Tests react/Clickable Button 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/Clickable Link 1`] = `
+exports[`Storybook Tests > react/Clickable > Link 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;

package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storybook Tests react/internals/ListItem Basic 1`] = `
+exports[`Storybook Tests > react/internals/ListItem > Basic 1`] = `
 .c0 {
   list-style: none;
 }

package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storybook Tests react/internals/MenuList Basic 1`] = `
+exports[`Storybook Tests > react/internals/MenuList > Basic 1`] = `
 .c0 {
   padding: 0;
   margin: 0;
@@ -210,7 +210,7 @@ exports[`Storybook Tests react/internals/MenuList Basic 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/internals/MenuList Disabled 1`] = `
+exports[`Storybook Tests > react/internals/MenuList > Disabled 1`] = `
 .c0 {
   padding: 0;
   margin: 0;
@@ -291,32 +291,12 @@ exports[`Storybook Tests react/internals/MenuList Disabled 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/internals/MenuList Group 1`] = `
+exports[`Storybook Tests > react/internals/MenuList > Group 1`] = `
 .c0 {
   padding: 0;
   margin: 0;
 }
-.c2 {
-  display: block;
-  color: var(--charcoal-text3);
-  font-size: 12px;
-  font-weight: bold;
-  padding: 12px 0 8px 16px;
-}
-.c3 {
-  padding-left: 0;
-  margin: 0;
-  box-sizing: border-box;
-  list-style: none;
-  overflow: hidden;
-}
-.c1 {
-  display: block;
-}
 .c4 {
   list-style: none;
 }
@@ -351,6 +331,26 @@ exports[`Storybook Tests react/internals/MenuList Group 1`] = `
   background-color: var(--charcoal-surface3);
 }
+.c2 {
+  display: block;
+  color: var(--charcoal-text3);
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 0 8px 16px;
+}
+.c3 {
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: hidden;
+}
+.c1 {
+  display: block;
+}
 <div
   data-dark={false}
 >

package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storybook Tests react/internals/Popover Basic 1`] = `
+exports[`Storybook Tests > react/internals/Popover > Basic 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;

package/src/components/DropdownSelector/__snapshots__/index.story.storyshot CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > AssistiveText 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -186,7 +186,7 @@ exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > CustomChildren 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -351,7 +351,7 @@ exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector Default 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > Default 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -508,7 +508,7 @@ exports[`Storybook Tests react/DropdownSelector Default 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > Disabled 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -667,7 +667,7 @@ exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > DisabledItem 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -835,7 +835,7 @@ exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > InFormTag 1`] = `
 .c4 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -1110,7 +1110,7 @@ exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector InModal 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > InModal 1`] = `
 <div
   data-dark={false}
 >
@@ -1130,7 +1130,7 @@ exports[`Storybook Tests react/DropdownSelector InModal 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > Invalid 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -1292,7 +1292,7 @@ exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > InvalidAssistiveText 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -1484,7 +1484,7 @@ exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector Label 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > Label 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -1744,7 +1744,7 @@ exports[`Storybook Tests react/DropdownSelector Label 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > LongNames 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -1901,7 +1901,7 @@ exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector RequiredText 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > RequiredText 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;
@@ -2198,7 +2198,7 @@ exports[`Storybook Tests react/DropdownSelector RequiredText 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector Section 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > Section 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -2370,7 +2370,7 @@ exports[`Storybook Tests react/DropdownSelector Section 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/DropdownSelector SubLabel 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > SubLabel 1`] = `
 .c3 {
   font-size: 14px;
   line-height: 22px;

package/src/components/Icon/__snapshots__/index.story.storyshot CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storybook Tests react/Icon Default 1`] = `
+exports[`Storybook Tests > react/Icon > Default 1`] = `
 <div
   data-dark={false}
 >

package/src/components/IconButton/__snapshots__/index.story.storyshot CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storybook Tests react/IconButton Default 1`] = `
+exports[`Storybook Tests > react/IconButton > Default 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -113,7 +113,7 @@ exports[`Storybook Tests react/IconButton Default 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/IconButton IsActive 1`] = `
+exports[`Storybook Tests > react/IconButton > IsActive 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -219,7 +219,7 @@ exports[`Storybook Tests react/IconButton IsActive 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/IconButton Overlay 1`] = `
+exports[`Storybook Tests > react/IconButton > Overlay 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;

package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storybook Tests react/LoadingSpinner Default 1`] = `
+exports[`Storybook Tests > react/LoadingSpinner > Default 1`] = `
 .c0 {
   box-sizing: content-box;
   margin: auto;
@@ -46,7 +46,7 @@ exports[`Storybook Tests react/LoadingSpinner Default 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/LoadingSpinner Padding 1`] = `
+exports[`Storybook Tests > react/LoadingSpinner > Padding 1`] = `
 .c0 {
   box-sizing: content-box;
   margin: auto;
@@ -92,7 +92,7 @@ exports[`Storybook Tests react/LoadingSpinner Padding 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/LoadingSpinner Size 1`] = `
+exports[`Storybook Tests > react/LoadingSpinner > Size 1`] = `
 .c0 {
   box-sizing: content-box;
   margin: auto;
@@ -138,7 +138,7 @@ exports[`Storybook Tests react/LoadingSpinner Size 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/LoadingSpinner Transparent 1`] = `
+exports[`Storybook Tests > react/LoadingSpinner > Transparent 1`] = `
 .c0 {
   box-sizing: content-box;
   margin: auto;

package/src/components/Modal/index.story.tsx CHANGED Viewed

@@ -12,6 +12,7 @@ import styled from 'styled-components'
 import { theme } from '../../styled'
 import TextField from '../TextField'
 import DropdownSelector from '../DropdownSelector'
+import Checkbox from '../Checkbox'
 import DropdownMenuItem from '../DropdownSelector/DropdownMenuItem'
 import { Meta, StoryObj } from '@storybook/react'
@@ -54,6 +55,11 @@ export default {
       </OverlayProvider>
     )
   },
+  parameters: {
+    storyshots: {
+      skip: true,
+    },
+  },
 } as Meta<typeof Modal>
 const M = (props: ModalProps) => {
@@ -201,6 +207,7 @@ export const BottomSheet: StoryObj<typeof Modal> = {
               </StyledModalText>
             </ModalVStack>
             <ModalButtons>
+              <Checkbox checked>test checkbox</Checkbox>
               <Button variant="Danger" onClick={() => state.close()} fullWidth>
                 削除する
               </Button>

package/src/components/MultiSelect/__snapshots__/index.story.storyshot CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Storybook Tests react/MultiSelect Basic 1`] = `
+exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -260,7 +260,7 @@ exports[`Storybook Tests react/MultiSelect Basic 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/MultiSelect Invalid 1`] = `
+exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -525,7 +525,7 @@ exports[`Storybook Tests react/MultiSelect Invalid 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/MultiSelect Overlay 1`] = `
+exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -789,7 +789,7 @@ exports[`Storybook Tests react/MultiSelect Overlay 1`] = `
 </div>
 `;
-exports[`Storybook Tests react/MultiSelect Playground 1`] = `
+exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;