@loadsmart/loadsmart-ui 5.10.0 → 5.11.0

package/src/components/ErrorMessage/ErrorMessage.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import ErrorMessage, { ErrorMessageProps } from './ErrorMessage'
 

package/src/components/ErrorMessage/ErrorMessage.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 import ErrorMessage from './ErrorMessage'
 

package/src/components/HighlightMatch/HighlightMatch.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import HighlightMatch, { HighlightMatchProps } from './HighlightMatch'
 

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

@@ -2,8 +2,8 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './HighlightMatch.stories'
-import renderer, { screen } from '../../../tests/renderer'
-import { HighlightMatchProps } from './HighlightMatch'
+import renderer, { screen } from '../../tests/renderer'
+import type { HighlightMatchProps } from './HighlightMatch'
 
 const { Playground } = composeStories(stories)
 

package/src/components/HighlightMatch/HighlightMatch.tsx

@@ -15,9 +15,9 @@ const HighlightMatchWrapper = styled.span`
   white-space: pre;
 
   mark {
+    font-weight: ${token('font-weight-bold')};
 
     color: inherit;
-    font-weight: ${token('font-weight-bold')};
 
     background-color: ${token('color-transparent')};
   }

package/src/components/IconFactory/IconFactory.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 import {
   Title,
   Subtitle,

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

@@ -3,8 +3,8 @@ import { composeStories } from '@storybook/testing-react'
 
 import { icons } from './IconFactory.fixtures'
 import * as stories from './IconFactory.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { IconProps } from './IconFactory'
 

package/src/components/Label/Label.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Label, { LabelProps } from './Label'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 export default {
   title: 'Components/Label',

package/src/components/Label/Label.test.tsx

@@ -3,8 +3,8 @@ import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import Label from './Label'
-import generator from '../../../tests/generator'
-import renderer from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer from '../../tests/renderer'
 
 const setup = ({ ...overrides }) => renderer(<Label {...overrides} />).render()
 

package/src/components/Label/Label.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { LabelHTMLAttributes } from 'react'
+import type { LabelHTMLAttributes } from 'react'
 import styled from 'styled-components'
 import clsx from 'clsx'
 import { isNil } from '@loadsmart/utils-object'
 
-import ColorScheme from 'utils/types/ColorScheme'
+import type ColorScheme from 'utils/types/ColorScheme'
 import conditional, { whenProps } from 'tools/conditional'
 import disableable from 'styles/disableable'
 import ellipsizable from 'styles/ellipsizable'
@@ -56,9 +56,9 @@ const StyledChildren = styled.span<WithAdditionalProps>`
 
 const StyledRequired = styled.sup`
   top: 0;
+  font-size: ${token('label-font-size')};
 
   color: ${token('label-required-color')};
-  font-size: ${token('label-font-size')};
 `
 
 const StyledTooltipAnchor = styled.span<WithAdditionalProps>`
@@ -68,13 +68,13 @@ const StyledTooltipAnchor = styled.span<WithAdditionalProps>`
   width: 16px;
   height: 16px;
   margin: 0 0 0 ${token('label-tooltip-margin-left')};
+  font-size: ${token('label-tooltip-font-size')};
+  font-weight: ${token('label-tooltip-font-weight')};
 
   color: ${conditional({
     'label-tooltip-font-color': whenProps({ scheme: 'light' }),
     'label-tooltip-dark-font-color': whenProps({ scheme: 'dark' }),
   })};
-  font-weight: ${token('label-tooltip-font-weight')};
-  font-size: ${token('label-tooltip-font-size')};
 
   background: ${conditional({
     'label-tooltip-background-color': whenProps({ scheme: 'light' }),

package/src/components/Layout/Box.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 import { getToken as token } from 'theming'
 import conditional, { whenProps } from 'tools/conditional'
-import { Spacing } from './Layout.types'
+import type { Spacing } from './Layout.types'
 import { getSpace } from './Layout.utils'
 
 import type { HTMLAttributes } from 'react'

package/src/components/Layout/Grid.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import prop from 'tools/prop'
 
 import { getSpace } from 'components/Layout/Layout.utils'
-import { Spacing } from './Layout.types'
+import type { Spacing } from './Layout.types'
 
 import type { HTMLAttributes } from 'react'
 

package/src/components/Layout/Layout.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import { Layout } from '.'
 

package/src/components/Layout/Sidebar.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import conditional, { whenProps } from 'tools/conditional'
 import prop from 'tools/prop'
 
-import { Spacing } from './Layout.types'
+import type { Spacing } from './Layout.types'
 import { getSpace } from './Layout.utils'
 
 import type { HTMLAttributes } from 'react'

package/src/components/Layout/Switcher.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import prop from 'tools/prop'
 
-import { Spacing } from './Layout.types'
+import type { Spacing } from './Layout.types'
 import { getSpace } from './Layout.utils'
 
 import type { HTMLAttributes } from 'react'

package/src/components/Link/Link.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Link, { LinkProps } from './Link'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 export default {
   title: 'Components/Link',

package/src/components/Link/Link.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
-import renderer from '../../../tests/renderer'
+import renderer from '../../tests/renderer'
 import Link from './Link'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 describe('<Link />', () => {
   describe('default', () => {

package/src/components/Link/Link.tsx

@@ -17,31 +17,27 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 
 const StyledBaseAnchor = styled.a`
-  ${font({
-    height: 'link-font-height',
-    weight: 'link-font-weight',
-  })}
-  ${transition()}
-
-  ${ellipsizable()}
-
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
-  text-align: center;
+  min-height: 24px;
   font-size: ${token('link-font-size')};
   color: ${token('color-neutral-darker')};
+  text-align: center;
   text-decoration: none;
 
-  min-height: 24px;
-
+  ${font({
+    height: 'link-font-height',
+    weight: 'link-font-weight',
+  })}
+  ${ellipsizable()}
+  ${transition()}
   ${hoverable`
     text-decoration: underline;
     font-weight: ${token('link-font-weight--hover')};
   `}
-
   ${disableable``}
 
   ${({ children }) =>
@@ -53,13 +49,13 @@ const StyledBaseAnchor = styled.a`
         overflow: hidden;
 
         font-weight: ${token('link-font-weight--hover')};
+        pointer-events: none;
 
         visibility: hidden;
 
         content: attr(data-text);
         content: attr(data-text) / '';
         user-select: none;
-        pointer-events: none;
 
         @media speech {
           display: none;

package/src/components/Link/useSafeLink.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes } from 'react'
+import type { AnchorHTMLAttributes } from 'react'
 import { isBlank } from '@loadsmart/utils-string'
 
 const INSECURE_HREF = /^javascript:/i

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

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 import { Text } from 'components/Text'
 
-import { LoadingBarProps } from './LoadingBar'
+import type { LoadingBarProps } from './LoadingBar'
 
 import LoadingBar from './LoadingBar'
 
@@ -12,7 +12,7 @@ export default {
   argTypes: {},
 } as Meta
 
-export const Playground: Story<LoadingBarProps> = (args: LoadingBarProps) => {
+export const Playground: Story<LoadingBarProps> = (args) => {
   return (
     <div className="flex flex-col space-y-2">
       <div className="flex items-center">

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './LoadingBar.stories'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { LoadingBarProps } from './LoadingBar'
 

package/src/components/Loaders/LoadingBar.tsx

@@ -29,12 +29,12 @@ export const Bar = styled.div<{ width?: number; velocity?: number }>`
     width: 100%;
     height: ${token('space-s')};
 
+    content: '';
+
     background-color: ${token('color-primary')};
 
     animation: ${loading} ${({ velocity }) => (velocity && velocity > 0 ? velocity : 2.5)}s linear
       infinite;
-
-    content: '';
   }
 `
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 import { Button } from 'components/Button'
 
 import LoadingDots, { LoadingDotsProps } from './LoadingDots'

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './LoadingDots.stories'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { LoadingDotsProps } from './LoadingDots'
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import Spinner, { SpinnerProps } from './Spinner'
 

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

@@ -2,8 +2,8 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './Spinner.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { SpinnerProps } from './Spinner'
 

package/src/components/Modal/Modal.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 import { useArgs } from '@storybook/client-api'
 import Modal from './Modal'
 import type { ModalProps } from './Modal'

package/src/components/Modal/Modal.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import Modal from './Modal'
-import generator from '../../../tests/generator'
-import renderer, { screen, user } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen, user } from '../../tests/renderer'
 
 const setup = ({ open = false, ...overrides }) =>
   renderer(<Modal open={open} {...overrides} />).render()

package/src/components/Modal/Modal.tsx

@@ -52,13 +52,13 @@ const ModalWrapper = styled.div<ModalWrapperProps>`
 `
 
 const HeaderWrapper = styled.div`
+  box-sizing: content-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: content-box;
   height: ${token('space-xl')};
-  margin-bottom: ${token('space-l')};
   padding-bottom: ${token('space-s')};
+  margin-bottom: ${token('space-l')};
 
   border-bottom: 1px solid ${token('color-neutral-light')};
 `
@@ -71,19 +71,14 @@ const Close = styled(CloseButton).attrs({
 `
 
 const Content = styled.div<ContentProps>`
-  background: white;
-  border-radius: ${token('border-radius-s')};
-  box-shadow: ${token('shadow-modal')};
-
+  position: relative;
+  z-index: ${token('z-index-modal')};
   padding: ${token('space-xl')};
-
   margin: 0 auto;
-
-  position: relative;
-
+  background: white;
+  border-radius: ${token('border-radius-s')};
   outline: none;
-
-  z-index: ${token('z-index-modal')};
+  box-shadow: ${token('shadow-modal')};
 
   ${({ fullscreen }) =>
     fullscreen &&

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Pagination from './Pagination'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import type { PaginationProps } from './Pagination.types'
 

package/src/components/Pagination/Pagination.test.tsx

@@ -1,10 +1,10 @@
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 
-import renderer, { screen, fire } from '../../../tests/renderer'
+import renderer, { screen, fire } from '../../tests/renderer'
 
 import Pagination from './Pagination'
-import { PaginationProps } from './Pagination.types'
+import type { PaginationProps } from './Pagination.types'
 
 describe('Pagination', () => {
   const setup = (overrides: PaginationProps) => renderer(<Pagination {...overrides} />).render()

package/src/components/Pagination/Pagination.types.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from 'react'
+import type { HTMLAttributes } from 'react'
 
-import { ButtonProps } from 'components/Button'
+import type { ButtonProps } from 'components/Button'
 
 export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, 'onChange'> & {
   /**

package/src/components/Popover/Popover.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import Popover from './Popover'
 

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

@@ -2,8 +2,8 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './Popover.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { PopoverProps } from './Popover'
 

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ProgressBar, { ProgressBarProps } from './ProgressBar'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 import Status from 'utils/types/Status'
 
 export default {

package/src/components/ProgressBar/ProgressBar.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
 
-import renderer from '../../../tests/renderer'
+import renderer from '../../tests/renderer'
 
 import { ProgressBar } from './ProgressBar'
 

package/src/components/ProgressBar/ProgressBar.tsx

@@ -5,19 +5,17 @@ import conditional, { whenProps } from 'tools/conditional'
 import Status from 'utils/types/Status'
 
 const Bar = styled.div<{ rounded: boolean }>`
-  align-items: center;
+  position: relative;
   display: flex;
   flex-grow: 0;
   flex-shrink: 1;
-
+  align-items: center;
   justify-content: center;
-  overflow: hidden;
   width: 100%;
-
-  position: relative;
-
   height: ${token('progressbar-height')};
 
+  overflow: hidden;
+
   ${({ rounded }) =>
     rounded &&
     css`

package/src/components/Radio/Radio.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Radio, { RadioProps } from './Radio'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import Status from 'utils/types/Status'
 

package/src/components/Radio/Radio.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import Radio from './Radio'
-import generator from '../../../tests/generator'
-import renderer, { fire } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { fire } from '../../tests/renderer'
 
 const setup = ({ ...overrides }) => renderer(<Radio {...overrides} />).render()
 

package/src/components/Radio/Radio.tsx

@@ -2,7 +2,7 @@ import React, { Fragment, InputHTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 
 import { Icon } from 'components/Icon'
-import ColorScheme from 'utils/types/ColorScheme'
+import type ColorScheme from 'utils/types/ColorScheme'
 import conditional, { whenProps } from 'tools/conditional'
 import disableable from 'styles/disableable'
 import focusable from 'styles/focusable'
@@ -21,45 +21,37 @@ export interface RadioProps extends InputHTMLAttributes<HTMLInputElement>, Selec
 const Check = styled(Icon)<SelectionStyleProps>`
   position: absolute;
   top: 50%;
-
   left: 50%;
 
   width: 10px;
   height: 10px;
 
-  transform: translate(-50%, -50%);
-
   pointer-events: none;
 
   fill: currentColor;
+
+  transform: translate(-50%, -50%);
 `
 
 const Selector = styled.input<SelectionStyleProps>`
-  ${transition()}
-
   display: inline-flex;
   flex-flow: row nowrap;
   align-items: center;
 
-  cursor: pointer;
-
-  appearance: none;
-
-  outline: none;
-
-  color: white;
-
-  height: ${token('radio-small-selector-size')};
   width: ${token('radio-small-selector-size')};
-
-  border-radius: ${token('radio-selector-border-radius')};
-  border-width: ${token('button-border-width')};
-  border-style: solid;
-
+  height: ${token('radio-small-selector-size')};
+  color: white;
+  cursor: pointer;
   background: ${conditional({
     'radio-selector-background': whenProps({ scheme: 'light' }),
     'radio-dark-selector-background': whenProps({ scheme: 'dark' }),
   })};
+  appearance: none;
+  border-style: solid;
+  border-width: ${token('button-border-width')};
+  border-radius: ${token('radio-selector-border-radius')};
+  outline: none;
+  ${transition()}
 
   &:not(:checked) {
     border-color: ${conditional({

package/src/components/Section/Section.test.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react'
 
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 
 import Section from './Section'
 

package/src/components/Section/Section.tsx

@@ -12,18 +12,16 @@ const StyledSection = styled.section`
 `
 
 const StyledSectionTitle = styled.section`
-  ${font({
-    weight: 'font-weight-bold',
-    height: 'font-height-2',
-  })}
-
+  padding: ${token('space-s')} ${token('space-xs')};
+  margin-bottom: ${token('space-l')};
   font-size: ${token('font-size-3')};
   color: ${token('color-neutral-darker')};
-
   border-bottom: 2px solid ${token('color-neutral-light')};
 
-  padding: ${token('space-s')} ${token('space-xs')};
-  margin-bottom: ${token('space-l')};
+  ${font({
+    weight: 'font-weight-bold',
+    height: 'font-height-2',
+  })}
 `
 
 const StyledSpan = styled.span`

package/src/components/Section/Sections.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 import Section from './Section'
 import type { SectionProps } from './Section'
 
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 export default {
   title: 'Components/Section',