@loadsmart/loadsmart-ui 6.0.15 → 6.1.0

package/src/components/Button/Button.tsx

@@ -142,11 +142,12 @@ const StyledButton = styled(BaseStyledButton)<{
 
   color: ${conditional({
     'button-primary-color': whenProps({ $variant: 'primary' }),
-    'button-secondary-color': whenProps({ $variant: ['secondary', 'tertiary'], $scheme: 'light' }),
+    'button-secondary-color': whenProps({ $variant: 'secondary', $scheme: 'light' }),
     'button-secondary-dark-color': whenProps({
-      $variant: ['secondary', 'tertiary'],
+      $variant: 'secondary',
       $scheme: 'dark',
     }),
+    'button-tertiary-color': whenProps({ $variant: 'tertiary' }),
     'button-warning-color': whenProps({ $variant: 'warning' }),
     'button-icon-color': whenProps({ $variant: 'icon' }),
   })};
@@ -154,13 +155,16 @@ const StyledButton = styled(BaseStyledButton)<{
   background: ${conditional({
     'button-primary-background': whenProps({ $variant: 'primary' }),
     'button-secondary-background': whenProps({
-      $variant: ['secondary', 'tertiary'],
+      $variant: 'secondary',
       $scheme: 'light',
     }),
     'button-secondary-dark-background': whenProps({
-      $variant: ['secondary', 'tertiary'],
+      $variant: 'secondary',
       $scheme: 'dark',
     }),
+    'button-tertiary': whenProps({
+      $variant: 'tertiary',
+    }),
     'button-warning-background': whenProps({ $variant: 'warning' }),
     'button-icon-background': whenProps({ $variant: 'icon' }),
   })};
@@ -169,9 +173,9 @@ const StyledButton = styled(BaseStyledButton)<{
     'button-primary-border-color': whenProps({ $variant: 'primary' }),
     'button-secondary-border-color': whenProps({ $variant: 'secondary', $scheme: 'light' }),
     'button-secondary-dark-border-color': whenProps({ $variant: 'secondary', $scheme: 'dark' }),
+    'button-tertiary-border-color': whenProps({ $variant: 'tertiary' }),
     'button-warning-border-color': whenProps({ $variant: 'warning' }),
     'button-icon-border-color': whenProps({ $variant: 'icon' }),
-    'color-transparent': whenProps({ $variant: 'tertiary' }),
   })};
   border-radius: ${conditional({
     'button-border-radius': whenProps({ $variant: ['primary', 'secondary', 'warning'] }),
@@ -182,13 +186,16 @@ const StyledButton = styled(BaseStyledButton)<{
     background: ${conditional({
       'button-primary-background--hover': whenProps({ $variant: 'primary' }),
       'button-secondary-background--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-background--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-background--hover': whenProps({
+        $variant: 'tertiary',
+      }),
       'button-warning-background--hover': whenProps({ $variant: 'warning' }),
       'button-icon-background--hover': whenProps({ $variant: 'icon' }),
     })};
@@ -202,20 +209,21 @@ const StyledButton = styled(BaseStyledButton)<{
         $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-border-color--hover': whenProps({ $variant: 'tertiary' }),
       'button-warning-border-color--hover': whenProps({ $variant: 'warning' }),
       'button-icon-border-color--hover': whenProps({ $variant: 'icon' }),
-      'color-transparent': whenProps({ $variant: 'tertiary' }),
     })};
     color: ${conditional({
       'button-primary-color--hover': whenProps({ $variant: 'primary' }),
       'button-secondary-color--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-color--hover': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-color--hover': whenProps({ $variant: 'tertiary' }),
       'button-warning-color--hover': whenProps({ $variant: 'warning' }),
       'button-icon-color--hover': whenProps({ $variant: 'icon' }),
     })};
@@ -225,13 +233,14 @@ const StyledButton = styled(BaseStyledButton)<{
     background: ${conditional({
       'button-primary-background--disabled': whenProps({ $variant: 'primary' }),
       'button-secondary-background--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-background--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-background--disabled': whenProps({ $variant: 'tertiary' }),
       'button-warning-background--disabled': whenProps({ $variant: 'warning' }),
       'button-icon-background--disabled': whenProps({ $variant: 'icon' }),
     })};
@@ -245,20 +254,21 @@ const StyledButton = styled(BaseStyledButton)<{
         $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-border-color--disabled': whenProps({ $variant: 'tertiary' }),
       'button-warning-border-color--disabled': whenProps({ $variant: 'warning' }),
       'button-icon-border-color--disabled': whenProps({ $variant: 'icon' }),
-      'color-transparent': whenProps({ $variant: 'tertiary' }),
     })};
     color: ${conditional({
       'button-primary-color--disabled': whenProps({ $variant: 'primary' }),
       'button-secondary-color--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-color--disabled': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-color--disabled': whenProps({ $variant: 'tertiary' }),
       'button-warning-color--disabled': whenProps({ $variant: 'warning' }),
       'button-icon-color--disabled': whenProps({ $variant: 'icon' }),
     })};
@@ -268,13 +278,14 @@ const StyledButton = styled(BaseStyledButton)<{
     background: ${conditional({
       'button-primary-background--focus': whenProps({ $variant: 'primary' }),
       'button-secondary-background--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-background--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-background--focus': whenProps({ $variant: 'tertiary' }),
       'button-warning-background--focus': whenProps({ $variant: 'warning' }),
       'button-icon-background--focus': whenProps({ $variant: 'icon' }),
     })};
@@ -285,30 +296,42 @@ const StyledButton = styled(BaseStyledButton)<{
         $scheme: 'light',
       }),
       'button-secondary-dark-border-color--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'dark',
       }),
+      'button-tertiary-border-color--focus': whenProps({ $variant: 'tertiary' }),
       'button-warning-border-color--focus': whenProps({ $variant: 'warning' }),
       'button-icon-border-color--focus': whenProps({ $variant: 'icon' }),
-      'color-transparent': whenProps({ $variant: 'tertiary' }),
     })};
     color: ${conditional({
       'button-primary-color--focus': whenProps({ $variant: 'primary' }),
       'button-secondary-color--focus': whenProps({
-        $variant: ['secondary', 'tertiary'],
+        $variant: 'secondary',
         $scheme: 'light',
       }),
       'button-secondary-dark-color--focus': whenProps({ $variant: 'secondary', $scheme: 'dark' }),
+      'button-tertiary-color--focus': whenProps({ $variant: 'tertiary' }),
       'button-warning-color--focus': whenProps({ $variant: 'warning' }),
       'button-icon-color--focus': whenProps({ $variant: 'icon' }),
     })};
 
     box-shadow: ${conditional({
+      'button-primary-box-shadow': whenProps({ $variant: 'primary' }),
+      'button-secondary-box-shadow': whenProps({ $variant: 'secondary' }),
+      'button-warning-box-shadow': whenProps({ $variant: 'warning' }),
+      'button-tertiary-box-shadow': whenProps({ $variant: 'tertiary' }),
+      'button-icon-box-shadow': whenProps({ $variant: 'icon' }),
+    })};
+
+    outline: ${conditional({
       'button-primary-outline': whenProps({ $variant: 'primary' }),
       'button-secondary-outline': whenProps({ $variant: 'secondary' }),
+      'button-tertiary-outline': whenProps({ $variant: 'tertiary' }),
       'button-warning-outline': whenProps({ $variant: 'warning' }),
       'button-icon-outline': whenProps({ $variant: 'icon' }),
-    })}
+    })};
+
+    outline-offset: ${token('button-outline-offset')};
   `}
 
   ${activatable`

package/src/components/Calendar/Calendar.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable testing-library/render-result-naming-convention */
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import { getRenderableMonth } from './useCalendar'
 import { TODAY } from './Date.helper'

package/src/components/Card/Card.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import * as stories from './Card.stories'
 import Card from './Card'

package/src/components/Checkbox/Checkbox.tsx

@@ -127,7 +127,7 @@ const Selector = styled.input<SelectionStyleProps>`
       color: ${token('checkbox-selector-icon-color')};
     }
 
-    box-shadow: ${token('checkbox-selector-outline')};
+    box-shadow: ${token('checkbox-selector-box-shadow')};
   `}
 `
 

package/src/components/DatePicker/DatePicker.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import { DatePickerEvent } from '../../testing/DatePickerEvent'
 import { formatter } from './DatePicker'

package/src/components/DatePicker/DateRangePicker.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import { MonthHelper } from '../Calendar'
 import { DateRangePickerEvent } from '../../testing/DatePickerEvent'

package/src/components/Dropdown/Dropdown.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import { ACTIONS, PROFILE_ACTIONS, SUBSCRIPTION_ACTIONS } from './Dropdown.fixtures'
 import * as stories from './Dropdown.stories'

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -64,6 +64,8 @@ const TriggerButton = styled(
 
   border: none;
 
+  height: ${token('dropdown-trigger-height')};
+
   text-transform: ${conditional({
     capitalize: whenProps({ outlined: false, variant: 'tertiary' }),
     uppercase: whenProps({ outlined: true }),
@@ -159,21 +161,15 @@ const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
   border-width: ${token('button-border-width')};
   border-style: solid;
   border-color: ${conditional({
-    'button-secondary-border-color': whenProps({ scheme: 'light', $outlined: true }),
-    'button-secondary-dark-border-color': whenProps({ scheme: 'dark', $outlined: true }),
-    'color-transparent': whenProps({ $outlined: false }),
+    'dropdown-trigger-border-color': whenProps({ scheme: 'light', $outlined: true }),
+    'dropdown-trigger-dark-border-color': whenProps({ scheme: 'dark', $outlined: true }),
+    'dropdown-trigger-outlined-border-color': whenProps({ $outlined: false }),
   })};
 
   font-size: ${token('font-size-4')};
 
   color: ${token('color-neutral-darker')};
 
-  height: ${conditional({
-    'dropdown-trigger-height': whenProps({ $scale: 'default' }),
-    'dropdown-trigger-small-height': whenProps({ $scale: 'small' }),
-    'dropdown-trigger-large-height': whenProps({ $scale: 'large' }),
-  })};
-
   box-sizing: border-box;
 
   flex: 1;
@@ -210,7 +206,9 @@ const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
       'color-transparent': whenProps({ $outlined: false }),
     })};
 
-      box-shadow: ${conditional({ 'shadow-glow-primary': whenProps({ $outlined: true }) })};
+    box-shadow: ${conditional({ 'dropdown-trigger-box-shadow': whenProps({ $outlined: true }) })};
+    outline: ${token('dropdown-trigger-outline')};
+    outline-offset: ${token('dropdown-trigger-outline-offset')};
   `}
 
   ${activatable`
@@ -231,7 +229,7 @@ const TriggerHandle = styled(BaseButton)`
   border-radius: 0 ${token('border-radius-s')} ${token('border-radius-s')} 0;
   border: none;
 
-  height: calc(100% - 2px);
+  height: ${token('dropdown-trigger-height')};
 `
 
 const RotatableIcon = styled(DefaultIcon)<{ $rotate: boolean }>`

package/src/components/EmptyState/EmptyState.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 import userEvent from '@testing-library/user-event'
 
 import * as stories from './EmptyState.stories'

package/src/components/HighlightMatch/HighlightMatch.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import * as stories from './HighlightMatch.stories'
 import renderer, { screen } from '../../tests/renderer'

package/src/components/IconFactory/IconFactory.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import { icons } from './IconFactory.fixtures'
 import * as stories from './IconFactory.stories'

package/src/components/Link/Link.tsx

@@ -8,6 +8,7 @@ import font from 'styles/font'
 import transition from 'styles/transition'
 import ellipsizable from 'styles/ellipsizable'
 import hoverable from 'styles/hoverable'
+import focusable from 'styles/focusable'
 import disableable from 'styles/disableable'
 import { getToken as token } from 'theming'
 
@@ -37,11 +38,19 @@ const StyledBaseAnchor = styled.a`
 
   min-height: 24px;
 
+  border-radius: ${token('border-radius-s')};
+
   ${hoverable`
     text-decoration: underline;
     font-weight: ${token('link-font-weight--hover')};
   `}
 
+  ${focusable`
+    box-shadow: ${token('link-box-shadow')};
+    outline: ${token('link-outline')};
+    outline-offset: ${token('link-outline-offset')};
+  `}
+
   ${disableable``}
 
   ${({ children }) =>

package/src/components/Loaders/LoadingBar.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import * as stories from './LoadingBar.stories'
 import renderer, { screen } from '../../tests/renderer'

package/src/components/Loaders/LoadingDots.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import * as stories from './LoadingDots.stories'
 import renderer, { screen } from '../../tests/renderer'

package/src/components/Loaders/Spinner.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import * as stories from './Spinner.stories'
 import generator from '../../tests/generator'

package/src/components/Popover/Popover.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import * as stories from './Popover.stories'
 import generator from '../../tests/generator'

package/src/components/Radio/Radio.tsx

@@ -112,7 +112,7 @@ const Selector = styled.input<SelectionStyleProps>`
       'radio-dark-selector-border-color--focus': whenProps({ scheme: 'dark' }),
     })};
 
-    box-shadow: ${token('radio-selector-outline')};
+    box-shadow: ${token('radio-selector-box-shadow')};
   `}
 `
 

package/src/components/Select/Select.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import { render } from '@testing-library/react'
 

package/src/components/Select/SelectTrigger.tsx

@@ -24,7 +24,7 @@ const SelectTriggerSearchField = styled(TextField)`
   border: none;
   border-radius: ${token('border-radius-s')} 0 0 ${token('border-radius-s')};
 
-  height: 100%;
+  height: ${token('select-trigger-height')};
 
   flex: 1;
 

package/src/components/SideNavigation/Menu/MenuLink.tsx

@@ -6,7 +6,9 @@ import { getToken as token } from 'theming'
 import hoverable from 'styles/hoverable'
 import MenuBaseItem from './MenuBaseItem'
 
-const StyledMenuItem = styled((props) => <MenuBaseItem as="a" {...props} />)`
+const StyledMenuItem = styled(({ url, ...props }) => (
+  <MenuBaseItem as={url ? 'a' : 'button'} {...props} />
+))`
   ${hoverable`
     color: ${token('side-navigation-menu-link-color--hover')};
   `}
@@ -29,7 +31,7 @@ export type MenuLinkProps = React.HTMLAttributes<HTMLAnchorElement> & {
 }
 
 function MenuLink({ url, ...props }: MenuLinkProps): JSX.Element {
-  return <StyledMenuItem href={url} {...props} role="menuitem" />
+  return <StyledMenuItem href={url} url={url} {...props} role="menuitem" />
 }
 
 export default styled(MenuLink)({})

package/src/components/Steps/Steps.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStory } from '@storybook/testing-react'
+import { composeStory } from '@storybook/react'
 
 import { STEPS, CONTENTS } from './Steps.fixtures'
 import generator from '../../tests/generator'

package/src/components/Switch/Switch.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 import userEvent from '@testing-library/user-event'
 
 import * as stories from './Switch.stories'

package/src/components/Switch/Switch.tsx

@@ -64,7 +64,9 @@ const SwitchWrapper = styled.label<WithAdditionalProps>`
   `}
 
   ${focusable`
-    box-shadow: ${token('switch-outline')}
+    box-shadow: ${token('switch-box-shadow')};
+    outline: ${token('switch-outline')};
+    outline-offset: ${token('switch-outline-offset')};
   `}
 
   ${disableable``}

package/src/components/Tag/Tag.tsx

@@ -80,9 +80,14 @@ const StyledSpan = styled.span<TagProps>`
   })};
 
   padding: ${conditional({
-    'tag-spacing': whenProps({ removable: (removable) => !removable }),
-    'tag-spacing-removable': whenProps([{ size: (size) => size !== 'small', removable: true }]),
-    'tag-small-spacing-removable': whenProps([{ size: 'small', removable: true }]),
+    'tag-small-spacing': whenProps({ size: 'small', removable: (removable) => !removable }),
+    'tag-spacing': whenProps({
+      size: (size) => !['small', 'large'].includes(size ?? ''),
+      removable: (removable) => !removable,
+    }),
+    'tag-large-spacing': whenProps({ size: 'large', removable: (removable) => !removable }),
+    'tag-removable-spacing': whenProps([{ size: (size) => size !== 'small', removable: true }]),
+    'tag-small-removable-spacing': whenProps([{ size: 'small', removable: true }]),
   })};
 
   min-width: ${token('tag-width')};
@@ -92,6 +97,12 @@ const StyledSpan = styled.span<TagProps>`
     'tag-large-height': whenProps({ size: 'large' }),
   })};
 
+  font-weight: ${conditional({
+    'tag-font-weight': whenProps({ size: 'default' }),
+    'tag-small-font-weight': whenProps({ size: 'small' }),
+    'tag-large-font-weight': whenProps({ size: 'large' }),
+  })};
+
   color: ${conditional({
     'tag-default-color': whenProps({ variant: 'default' }),
     'tag-outlined-color': whenProps({ variant: 'outlined' }),
@@ -223,7 +234,16 @@ const StyledSpan = styled.span<TagProps>`
       'tag-warning-background--focus': whenProps({ variant: 'warning' }),
       'tag-danger-background--focus': whenProps({ variant: 'danger' }),
     })};
-    box-shadow: ${token('tag-outline')};
+    box-shadow: ${token('tag-box-shadow')};
+    outline: ${conditional({
+      'tag-default-outline': whenProps({ variant: 'default' }),
+      'tag-outlined-outline': whenProps({ variant: 'outlined' }),
+      'tag-accent-outline': whenProps({ variant: 'accent' }),
+      'tag-success-outline': whenProps({ variant: 'success' }),
+      'tag-warning-outline': whenProps({ variant: 'warning' }),
+      'tag-danger-outline': whenProps({ variant: 'danger' }),
+    })};
+    outline-offset: ${token('tag-outline-offset')};
   `}
 
   ${disableable`

package/src/components/TextField/TextField.tsx

@@ -96,9 +96,12 @@ const InputWrapper = styled.div<WithAdditionalProps>`
     })};
 
     box-shadow: ${conditional({
-      'text-field-outline': whenProps({ scheme: 'light' }),
-      'text-field-dark-outline': whenProps({ scheme: 'dark' }),
+      'text-field-box-shadow': whenProps({ scheme: 'light' }),
+      'text-field-dark-box-shadow': whenProps({ scheme: 'dark' }),
     })};
+
+    outline: ${token('text-field-outline')};
+    outline-offset: ${token('text-field-outline-offset')};
   `}
 
   ${disableable()}

package/src/components/Textarea/Textarea.tsx

@@ -93,9 +93,12 @@ const TextareaWrapper = styled.div<WithAdditionalProps>`
     })};
 
     box-shadow: ${conditional({
-      'textarea-outline': whenProps({ scheme: 'light' }),
-      'textarea-dark-outline': whenProps({ scheme: 'dark' }),
+      'textarea-box-shadow': whenProps({ scheme: 'light' }),
+      'textarea-dark-box-shadow': whenProps({ scheme: 'dark' }),
     })};
+
+    outline: ${token('textarea-outline')};
+    outline-offset: ${token('textarea-outline-offset')};
   `}
 
   ${disableable()}

package/src/components/ToggleGroup/Toggle.tsx

@@ -68,7 +68,9 @@ const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
       'toggle-checked-color--focus': whenProps({ 'aria-checked': true }),
     })};
 
-    box-shadow: ${token('button-primary-outline')};
+    box-shadow: ${token('toggle-box-shadow')};
+    outline: ${token('toggle-outline')};
+    outline-offset: ${token('toggle-outline-offset')};
   `}
 
   ${activatable`

package/src/components/ToggleGroup/ToggleGroup.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import { OPTIONS } from './ToggleGroup.constants'
 import * as stories from './ToggleGroup.stories'

package/src/hooks/useFocusTrap/useFocusTrap.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import renderer, { screen, fire, user } from '../../tests/renderer'
-import { composeStories } from '@storybook/testing-react'
+import { composeStories } from '@storybook/react'
 
 import * as stories from './useFocusTrap.stories'