agroptima-design-system 0.27.21 → 0.27.22

package/.storybook/main.ts

@@ -1,5 +1,5 @@
 import type { StorybookConfig } from '@storybook/nextjs'
-import { join, dirname, resolve } from 'path'
+import { dirname, join, resolve } from 'path'
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -41,7 +41,7 @@ const config: StorybookConfig = {
     const imageRule = config.module.rules.find((rule) =>
       rule?.['test']?.test('.svg'),
     )
-    if (!imageRule || typeof imageRule !== 'object') return
+    if (!imageRule || typeof imageRule !== 'object') return config
 
     // Configure .svg files to be loaded with @svgr/webpack
     config.module.rules.push({

package/.storybook/preview.ts

@@ -1,6 +1,6 @@
-import type { Preview } from '@storybook/react'
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import '../src/index.scss'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import type { Preview } from '@storybook/react'
 
 const preview: Preview = {
   parameters: {

package/eslint.config.mjs

@@ -1,8 +1,9 @@
+import { FlatCompat } from '@eslint/eslintrc'
+import js from '@eslint/js'
 import prettier from 'eslint-plugin-prettier'
+import simpleImportSort from 'eslint-plugin-simple-import-sort'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import js from '@eslint/js'
-import { FlatCompat } from '@eslint/eslintrc'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -18,10 +19,21 @@ const config = [
   {
     plugins: {
       prettier,
+      'simple-import-sort': simpleImportSort,
+    },
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
     },
-
     rules: {
       'prettier/prettier': ['error'],
+      'simple-import-sort/imports': [
+        'error',
+        {
+          groups: [['^\\u0000', '^@?\\w', '^[^.]', '^\\.']],
+        },
+      ],
+      'simple-import-sort/exports': 'error',
     },
   },
 ]

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.27.21",
+  "version": "0.27.22",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
     "build": "npm run build-storybook",
     "build-storybook": "storybook build",
     "lint": "eslint",
-    "lint:fix": "eslint src --fix",
+    "lint:fix": "eslint --fix",
     "types": "tsc --noEmit",
     "chromatic": "npx chromatic --exit-zero-on-changes",
     "test": "jest",
@@ -18,10 +18,10 @@
     "next": "^15.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sass": "^1.83.0"
+    "sass": "^1.83.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
+    "@chromatic-com/storybook": "^3.2.3",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.16.0",
     "@storybook/addon-a11y": "^8.4.7",
@@ -40,15 +40,16 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^22.10.2",
-    "@types/react": "^19.0.1",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.3",
     "@types/react-dom": "^19.0.2",
     "ajv": "^8.17.1",
-    "eslint": "^9.16.0",
-    "eslint-config-next": "^15.1.0",
+    "eslint": "^9.17.0",
+    "eslint-config-next": "^15.1.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-storybook": "^0.11.2",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",

package/src/atoms/Alert/Alert.tsx

@@ -1,15 +1,16 @@
+import './Alert.scss'
+import type { ReactElement } from 'react'
+import { classNames } from '../../utils/classNames'
 import type { IconButtonProps } from '../Button'
 import { IconButton } from '../Button'
 import { Icon } from '../Icon'
-import './Alert.scss'
-import { classNames } from '../../utils/classNames'
 
 export type Variant = 'info' | 'success' | 'warning' | 'error'
 
 export interface AlertProps extends React.ComponentPropsWithoutRef<'div'> {
   id: string
   variant?: Variant
-  text: string
+  text: string | ReactElement
   button?: IconButtonProps
   fadeOut?: boolean
   fitContent?: boolean

package/src/atoms/Alert/AlertContainer.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './AlertContainer.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface AlertContainerProps
   extends React.ComponentPropsWithoutRef<'section'> {}

package/src/atoms/Badge.tsx

@@ -1,7 +1,7 @@
+import './Badge.scss'
+import { classNames } from '../utils/classNames'
 import type { IconType } from './Icon'
 import { Icon } from './Icon'
-import { classNames } from '../utils/classNames'
-import './Badge.scss'
 
 export type Variant =
   | 'info'

package/src/atoms/Button/Button.tsx

@@ -1,9 +1,9 @@
+import './Button.scss'
+import { classNames } from '../../utils/classNames'
 import type { IconType } from '../Icon'
-import type { BaseButtonProps } from './BaseButton'
 import { Icon } from '../Icon'
-import { classNames } from '../../utils/classNames'
+import type { BaseButtonProps } from './BaseButton'
 import { BaseButton } from './BaseButton'
-import './Button.scss'
 
 interface CustomProps {
   label: string

package/src/atoms/Button/FloatingButton.tsx

@@ -1,9 +1,9 @@
+import './FloatingButton.scss'
+import { classNames } from '../../utils/classNames'
 import type { IconType } from '../Icon'
-import type { BaseButtonProps } from './BaseButton'
 import { Icon } from '../Icon'
-import { classNames } from '../../utils/classNames'
+import type { BaseButtonProps } from './BaseButton'
 import { BaseButton } from './BaseButton'
-import './FloatingButton.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Button/IconButton.tsx

@@ -1,9 +1,9 @@
+import './IconButton.scss'
+import { classNames } from '../../utils/classNames'
 import type { IconSize, IconType } from '../Icon'
-import type { BaseButtonProps } from './BaseButton'
 import { Icon } from '../Icon'
-import { classNames } from '../../utils/classNames'
+import type { BaseButtonProps } from './BaseButton'
 import { BaseButton } from './BaseButton'
-import './IconButton.scss'
 
 export type Variant = 'primary' | 'secondary'
 

package/src/atoms/Button/SubmitButton.tsx

@@ -1,7 +1,7 @@
 'use client'
+import { useFormStatus } from 'react-dom'
 import type { ButtonProps } from './Button'
 import { Button } from './Button'
-import { useFormStatus } from 'react-dom'
 
 export type SubmitButtonProps = ButtonProps
 

package/src/atoms/Button/index.ts

@@ -1,13 +1,13 @@
+import { BaseButton } from './BaseButton'
 import { Button } from './Button'
-import { IconButton } from './IconButton'
 import { FloatingButton } from './FloatingButton'
-import { BaseButton } from './BaseButton'
+import { IconButton } from './IconButton'
 import { SubmitButton } from './SubmitButton'
 
+export type { BaseButtonProps } from './BaseButton'
 export type { ButtonProps } from './Button'
-export type { IconButtonProps } from './IconButton'
 export type { FloatingButtonProps } from './FloatingButton'
-export type { BaseButtonProps } from './BaseButton'
+export type { IconButtonProps } from './IconButton'
 export type { SubmitButtonProps } from './SubmitButton'
 
-export { Button, IconButton, FloatingButton, BaseButton, SubmitButton }
+export { BaseButton, Button, FloatingButton, IconButton, SubmitButton }

package/src/atoms/Card/Card.tsx

@@ -1,7 +1,7 @@
 import './Card.scss'
+import Link from 'next/link'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
-import Link from 'next/link'
 
 export type Variant = 'primary'
 

package/src/atoms/Card/index.ts

@@ -1,6 +1,6 @@
 import { Card } from './Card'
-import { CardHeader } from './CardHeader'
 import { CardContent } from './CardContent'
 import { CardFooter } from './CardFooter'
+import { CardHeader } from './CardHeader'
 
-export { Card, CardHeader, CardContent, CardFooter }
+export { Card, CardContent, CardFooter, CardHeader }

package/src/atoms/CardMenu/CardMenuOption.tsx

@@ -1,9 +1,9 @@
-import type { IconType } from '../Icon'
+import './CardMenu.scss'
 import type { LinkProps as NextLinkProps } from 'next/link'
-import { Icon } from '../Icon'
-import { classNames } from '../../utils/classNames'
 import Link from 'next/link'
-import './CardMenu.scss'
+import { classNames } from '../../utils/classNames'
+import type { IconType } from '../Icon'
+import { Icon } from '../Icon'
 
 export type Variant = 'primary'
 

package/src/atoms/CardsTable/CardsTable.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './CardsTable.scss'
+import { classNames } from '../../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/CardsTable/CardsTableCell.tsx

@@ -1,6 +1,6 @@
-import { classNames } from '../../utils/classNames'
 import './CardsTable.scss'
 import React from 'react'
+import { classNames } from '../../utils/classNames'
 
 export enum Alignment {
   Left = 'left',

package/src/atoms/CardsTable/CardsTableRow.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import './CardsTable.scss'
+import React from 'react'
 import { classNames } from '../../utils/classNames'
 
 export interface CardsTableRowProps

package/src/atoms/CardsTable/index.ts

@@ -1,16 +1,16 @@
 import { CardsTable } from './CardsTable'
+import { CardsTableBody } from './CardsTableBody'
+import { Alignment, CardsTableCell } from './CardsTableCell'
 import { CardsTableHead } from './CardsTableHead'
 import { CardsTableHeader } from './CardsTableHeader'
 import { CardsTableRow } from './CardsTableRow'
-import { CardsTableBody } from './CardsTableBody'
-import { CardsTableCell, Alignment } from './CardsTableCell'
 
 export {
+  Alignment,
   CardsTable,
+  CardsTableBody,
+  CardsTableCell,
   CardsTableHead,
   CardsTableHeader,
   CardsTableRow,
-  CardsTableBody,
-  CardsTableCell,
-  Alignment,
 }

package/src/atoms/CardsTableList.tsx

@@ -1,16 +1,16 @@
-import type { IconType } from './Icon'
+import './CardsTable/CardsTable.scss'
 import React, { useState } from 'react'
 import { sortBy } from '../utils/sort'
 import {
-  CardsTableHeader,
-  CardsTableCell,
-  CardsTableRow,
   CardsTable,
-  CardsTableHead,
   CardsTableBody,
+  CardsTableCell,
+  CardsTableHead,
+  CardsTableHeader,
+  CardsTableRow,
 } from './CardsTable'
+import type { IconType } from './Icon'
 import { Icon } from './Icon'
-import './CardsTable/CardsTable.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/CheckableTag/CheckableTag.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './CheckableTag.scss'
+import { classNames } from '../../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/CheckableTag/CheckableTagGroup.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './CheckableTag.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface CheckableTagGroupProps
   extends React.ComponentPropsWithoutRef<'div'> {}

package/src/atoms/Checkbox.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../utils/classNames'
 import './Checkbox.scss'
+import { classNames } from '../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/Collapsible.tsx

@@ -1,6 +1,6 @@
+import './Collapsible.scss'
 import { classNames } from '../utils/classNames'
 import { Icon } from './Icon'
-import './Collapsible.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/DetailItem.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../utils/classNames'
 import './DetailItem.scss'
+import { classNames } from '../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/Drawer.tsx

@@ -1,7 +1,7 @@
-import type { ButtonProps } from './Button'
+import './Drawer.scss'
 import { classNames } from '../utils/classNames'
+import type { ButtonProps } from './Button'
 import { Button, IconButton } from './Button'
-import './Drawer.scss'
 import { Actions } from './Form'
 
 export type Variant = 'primary'

package/src/atoms/EmptyState.tsx

@@ -1,7 +1,7 @@
-import type { IconType } from './Icon'
+import './EmptyState.scss'
 import { classNames } from '../utils/classNames'
+import type { IconType } from './Icon'
 import { Icon } from './Icon'
-import './EmptyState.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Form/Actions.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './Form.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface ActionsProps extends React.ComponentPropsWithoutRef<'div'> {
   children: React.ReactNode

package/src/atoms/Form/Form.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './Form.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface FormProps extends React.ComponentPropsWithoutRef<'form'> {
   fullWidth?: boolean

package/src/atoms/Form/index.ts

@@ -1,4 +1,4 @@
-import Form from './Form'
 import Actions from './Actions'
+import Form from './Form'
 
-export { Form, Actions }
+export { Actions, Form }

package/src/atoms/Icon.tsx

@@ -1,5 +1,5 @@
 import './Icon.scss'
-
+import type { ReactNode } from 'react'
 import * as icons from '../icons'
 import { classNames } from '../utils/classNames'
 export type IconType = keyof typeof icons
@@ -28,7 +28,7 @@ export const Icon: React.FC<IconProps> = ({
   })
   return (
     <span role="img" title={props.title || name} className={cssClasses}>
-      {icons[name](props)}
+      {icons[name](props) as ReactNode}
     </span>
   )
 }

package/src/atoms/Input.tsx

@@ -1,10 +1,10 @@
-import type { IconType } from './Icon'
+import './Input.scss'
 import React, { useState } from 'react'
-import { Icon } from './Icon'
-import { IconButton } from './Button/IconButton'
-import { classNames } from '../utils/classNames'
 import { buildHelpText } from '../utils/buildHelpText'
-import './Input.scss'
+import { classNames } from '../utils/classNames'
+import { IconButton } from './Button/IconButton'
+import type { IconType } from './Icon'
+import { Icon } from './Icon'
 
 export type InputVariant = 'primary'
 

package/src/atoms/Menu/MenuDropdown.tsx

@@ -1,7 +1,7 @@
-import type { IconType } from '../Icon'
+import './Menu.scss'
 import { classNames } from '../../utils/classNames'
+import type { IconType } from '../Icon'
 import { Icon } from '../Icon'
-import './Menu.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Menu/MenuLink.tsx

@@ -1,9 +1,9 @@
-import type { IconType } from '../Icon'
+import './Menu.scss'
+import Link from 'next/link'
 import React from 'react'
-import { Icon } from '../Icon'
 import { classNames } from '../../utils/classNames'
-import Link from 'next/link'
-import './Menu.scss'
+import type { IconType } from '../Icon'
+import { Icon } from '../Icon'
 
 export type Variant = 'primary'
 

package/src/atoms/Menu/index.ts

@@ -1,5 +1,5 @@
 import { Menu } from './Menu'
-import { MenuLink } from './MenuLink'
 import { MenuDropdown } from './MenuDropdown'
+import { MenuLink } from './MenuLink'
 
-export { Menu, MenuLink, MenuDropdown }
+export { Menu, MenuDropdown, MenuLink }

package/src/atoms/Modal.tsx

@@ -1,8 +1,8 @@
-import type { ButtonProps } from './Button'
+import './Modal.scss'
 import { classNames } from '../utils/classNames'
+import type { ButtonProps } from './Button'
 import { Button } from './Button'
 import { Icon } from './Icon'
-import './Modal.scss'
 
 export type Variant =
   | 'info'

package/src/atoms/Multiselect.tsx

@@ -1,13 +1,13 @@
 import './Select.scss'
 import React, { useRef, useState } from 'react'
-import { Icon } from './Icon'
-import { IconButton } from './Button'
-import { classNames } from '../utils/classNames'
-import { buildHelpText } from '../utils/buildHelpText'
-import { useOutsideClick } from '../hooks/useOutsideClick'
 import { useOpen } from '../hooks/useOpen'
-import { Input } from './Input'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 import { useSearch } from '../hooks/useSearch'
+import { buildHelpText } from '../utils/buildHelpText'
+import { classNames } from '../utils/classNames'
+import { IconButton } from './Button'
+import { Icon } from './Icon'
+import { Input } from './Input'
 
 export type Variant = 'primary'
 export type Option = { id: string; label: string }

package/src/atoms/Pagination/Ellipsis.tsx

@@ -1,6 +1,6 @@
+import './Pagination.scss'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
-import './Pagination.scss'
 
 export interface EllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}
 

package/src/atoms/Pagination/Pagination.tsx

@@ -1,6 +1,6 @@
+import './Pagination.scss'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
-import './Pagination.scss'
 
 type Size = 'small' | 'medium'
 

package/src/atoms/Pagination/PaginationArrow.tsx

@@ -1,8 +1,8 @@
-import type { IconButtonProps } from '../Button'
+import './Pagination.scss'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
+import type { IconButtonProps } from '../Button'
 import { IconButton } from '../Button'
-import './Pagination.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Pagination/PaginationNumber.tsx

@@ -1,8 +1,8 @@
-import type { ButtonProps } from '../Button'
+import './Pagination.scss'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
+import type { ButtonProps } from '../Button'
 import { Button } from '../Button'
-import './Pagination.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Pagination/index.ts

@@ -1,6 +1,6 @@
+import { Ellipsis } from './Ellipsis'
 import { Pagination } from './Pagination'
 import { PaginationArrow } from './PaginationArrow'
 import { PaginationNumber } from './PaginationNumber'
-import { Ellipsis } from './Ellipsis'
 
-export { Pagination, PaginationArrow, PaginationNumber, Ellipsis }
+export { Ellipsis, Pagination, PaginationArrow, PaginationNumber }

package/src/atoms/Popover/Popover.tsx

@@ -1,9 +1,9 @@
 'use client'
+import './Popover.scss'
+import { useRef } from 'react'
+import { useOpen } from '../../hooks/useOpen'
 import { useOutsideClick } from '../../hooks/useOutsideClick'
 import { classNames } from '../../utils/classNames'
-import { useOpen } from '../../hooks/useOpen'
-import { useRef } from 'react'
-import './Popover.scss'
 
 export interface PopoverProps {
   renderButton: (props: {

package/src/atoms/Popover/PopoverMenu.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../../utils/classNames'
 import './Popover.scss'
+import { classNames } from '../../utils/classNames'
 
 export interface PopoverMenuProps
   extends React.ComponentPropsWithoutRef<'div'> {}

package/src/atoms/Popover/PopoverMenuOption.tsx

@@ -1,7 +1,7 @@
+import './Popover.scss'
 import type { LinkProps as NextLinkProps } from 'next/link'
-import { classNames } from '../../utils/classNames'
 import Link from 'next/link'
-import './Popover.scss'
+import { classNames } from '../../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/QuantitySelector.tsx

@@ -1,9 +1,9 @@
-import type { InputProps } from './Input'
+import './QuantitySelector.scss'
 import React from 'react'
 import { classNames } from '../utils/classNames'
-import { Input } from './Input'
 import { Button } from './Button'
-import './QuantitySelector.scss'
+import type { InputProps } from './Input'
+import { Input } from './Input'
 
 export type Variant = 'primary'
 

package/src/atoms/RadioButton.tsx

@@ -1,5 +1,5 @@
-import { classNames } from '../utils/classNames'
 import './RadioButton.scss'
+import { classNames } from '../utils/classNames'
 
 export type Variant = 'primary'
 

package/src/atoms/Select.tsx

@@ -1,14 +1,14 @@
 'use client'
+import './Select.scss'
 import React, { useRef, useState } from 'react'
-import { Icon } from './Icon'
-import { IconButton } from './Button'
-import { classNames } from '../utils/classNames'
-import { buildHelpText } from '../utils/buildHelpText'
-import { useOutsideClick } from '../hooks/useOutsideClick'
 import { useOpen } from '../hooks/useOpen'
-import './Select.scss'
-import { Input } from './Input'
+import { useOutsideClick } from '../hooks/useOutsideClick'
 import { useSearch } from '../hooks/useSearch'
+import { buildHelpText } from '../utils/buildHelpText'
+import { classNames } from '../utils/classNames'
+import { IconButton } from './Button'
+import { Icon } from './Icon'
+import { Input } from './Input'
 
 export type Variant = 'primary'
 export type Option = { id: string; label: string }

package/src/atoms/TextArea.tsx

@@ -1,6 +1,6 @@
-import { classNames } from '../utils/classNames'
-import { buildHelpText } from '../utils/buildHelpText'
 import './Input.scss'
+import { buildHelpText } from '../utils/buildHelpText'
+import { classNames } from '../utils/classNames'
 
 export type TextAreaVariant = 'primary'
 

package/src/icons/index.tsx

@@ -6,11 +6,11 @@ import AngleRight from './angle-right.svg'
 import AngleUp from './angle-up.svg'
 import ArrowBack from './arrow-back.svg'
 import Calendar from './calendar.svg'
+import ChangePassword from './change-password.svg'
 import Check from './check.svg'
 import CheckboxActive from './checkbox-active.svg'
 import CheckboxInactive from './checkbox-inactive.svg'
 import CheckboxIndeterminate from './checkbox-indeterminate.svg'
-import ChangePassword from './change-password.svg'
 import Client from './client.svg'
 import Close from './close.svg'
 import Comment from './comment.svg'
@@ -34,6 +34,7 @@ import Invoice from './invoice.svg'
 import Loading from './loading.svg'
 import Logout from './logout.svg'
 import Minus from './minus.svg'
+import PDF from './pdf.svg'
 import Product from './product.svg'
 import ReturnDeliveryNote from './return-delivery-note.svg'
 import Salesman from './salesman.svg'
@@ -46,7 +47,6 @@ import Sorter from './sorter.svg'
 import Upload from './upload.svg'
 import UserMenu from './user-menu.svg'
 import Warning from './warning.svg'
-import PDF from './pdf.svg'
 
 export {
   Add,

package/src/stories/Card.stories.js

@@ -1,6 +1,6 @@
 import { IconButton } from '../atoms/Button'
-import { Card, CardHeader, CardContent, CardFooter } from '../atoms/Card'
 import { Button } from '../atoms/Button'
+import { Card, CardContent, CardFooter, CardHeader } from '../atoms/Card'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/CardsTable.stories.js

@@ -1,18 +1,17 @@
 import React from 'react'
-
+import { Badge } from '../atoms/Badge'
+import { IconButton } from '../atoms/Button'
+import { Button } from '../atoms/Button'
 import {
   CardsTable,
+  CardsTableBody,
+  CardsTableCell,
   CardsTableHead,
   CardsTableHeader,
   CardsTableRow,
-  CardsTableBody,
-  CardsTableCell,
 } from '../atoms/CardsTable'
-import { IconButton } from '../atoms/Button'
-import { Badge } from '../atoms/Badge'
 import { Checkbox } from '../atoms/Checkbox'
 import { Popover, PopoverMenu, PopoverMenuOption } from '../atoms/Popover'
-import { Button } from '../atoms/Button'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/CardsTableList.stories.ts

@@ -1,5 +1,5 @@
-import { CardsTableList } from '../atoms/CardsTableList'
 import type { StoryObj } from '@storybook/react'
+import { CardsTableList } from '../atoms/CardsTableList'
 
 const meta = {
   title: 'Design System/Atoms/Cards Table List',

package/src/stories/Collapsible.stories.js

@@ -1,10 +1,10 @@
 import React from 'react'
+import { Button } from '../atoms/Button'
+import { Card } from '../atoms/Card'
 import { Collapsible } from '../atoms/Collapsible'
+import { Actions, Form as FormComponent } from '../atoms/Form'
 import { Input } from '../atoms/Input'
 import { Select } from '../atoms/Select'
-import { Card } from '../atoms/Card'
-import { Form as FormComponent, Actions } from '../atoms/Form'
-import { Button } from '../atoms/Button'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/Drawer.stories.js

@@ -1,8 +1,7 @@
 import React from 'react'
-
-import { Drawer } from '../atoms/Drawer'
-import { CheckableTagGroup, CheckableTag } from '../atoms/CheckableTag'
+import { CheckableTag, CheckableTagGroup } from '../atoms/CheckableTag'
 import { Collapsible } from '../atoms/Collapsible'
+import { Drawer } from '../atoms/Drawer'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/Form.stories.js

@@ -1,6 +1,6 @@
-import { Form, Actions } from '../atoms/Form'
-import { Input } from '../atoms/Input'
 import { Button } from '../atoms/Button'
+import { Actions, Form } from '../atoms/Form'
+import { Input } from '../atoms/Input'
 
 const meta = {
   title: 'Design System/Atoms/Form',

package/src/stories/Input.stories.ts

@@ -1,5 +1,5 @@
-import { Input } from '../atoms/Input'
 import type { StoryObj } from '@storybook/react'
+import { Input } from '../atoms/Input'
 
 const meta = {
   title: 'Design System/Atoms/Input',

package/src/stories/Menu.stories.js

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import { Menu, MenuLink, MenuDropdown } from '../atoms/Menu'
+import { Menu, MenuDropdown, MenuLink } from '../atoms/Menu'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/Modal.stories.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Modal } from '../atoms/Modal'
-import { DetailItem } from '../atoms/DetailItem'
-import { Collapsible } from '../atoms/Collapsible'
 import { Card } from '../atoms/Card'
+import { Collapsible } from '../atoms/Collapsible'
+import { DetailItem } from '../atoms/DetailItem'
+import { Modal } from '../atoms/Modal'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/Multiselect.stories.ts

@@ -1,5 +1,5 @@
-import { Multiselect } from '../atoms/Multiselect'
 import type { StoryObj } from '@storybook/react'
+import { Multiselect } from '../atoms/Multiselect'
 
 const meta = {
   title: 'Design System/Atoms/Multiselect',

package/src/stories/Pagination.stories.js

@@ -1,10 +1,9 @@
 import React from 'react'
-
 import {
+  Ellipsis,
   Pagination,
   PaginationArrow,
   PaginationNumber,
-  Ellipsis,
 } from '../atoms/Pagination'
 
 const figmaPrimaryDesign = {

package/src/stories/Popover.stories.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Popover, PopoverMenu, PopoverMenuOption } from '../atoms/Popover'
 import { Button } from '../atoms/Button'
+import { Popover, PopoverMenu, PopoverMenuOption } from '../atoms/Popover'
 
 const figmaPrimaryDesign = {
   design: {

package/src/stories/QuantitySelector.stories.ts

@@ -1,5 +1,5 @@
-import { QuantitySelector } from '../atoms/QuantitySelector'
 import type { StoryObj } from '@storybook/react'
+import { QuantitySelector } from '../atoms/QuantitySelector'
 
 const meta = {
   title: 'Design System/Atoms/QuantitySelector',

package/src/stories/Select.stories.ts

@@ -1,5 +1,5 @@
-import { Select } from '../atoms/Select'
 import type { StoryObj } from '@storybook/react'
+import { Select } from '../atoms/Select'
 
 const meta = {
   title: 'Design System/Atoms/Select',

package/src/stories/TextArea.stories.ts

@@ -1,5 +1,5 @@
-import { TextArea } from '../atoms/TextArea'
 import type { StoryObj } from '@storybook/react'
+import { TextArea } from '../atoms/TextArea'
 
 const meta = {
   title: 'Design System/Atoms/Textarea',

package/tests/Alert.spec.tsx

@@ -1,7 +1,7 @@
-import type { Variant } from '../src/atoms/Alert/Alert'
+import { render, screen } from '@testing-library/react'
 import React from 'react'
-import { screen, render } from '@testing-library/react'
 import { Alert } from '../src/atoms/Alert'
+import type { Variant } from '../src/atoms/Alert/Alert'
 
 describe('Alert', () => {
   const variants = ['info', 'success', 'warning', 'error']

package/tests/Badge.spec.tsx

@@ -1,6 +1,6 @@
-import type { Variant } from '../src/atoms/Badge'
-import React from 'react'
 import { render, screen } from '@testing-library/react'
+import React from 'react'
+import type { Variant } from '../src/atoms/Badge'
 import { Badge } from '../src/atoms/Badge'
 
 describe('Badge', () => {

package/tests/Button.spec.tsx

@@ -1,7 +1,7 @@
-import type { ButtonVariant } from '../src/atoms/Button/Button'
-import React from 'react'
-import { screen, render, getByRole } from '@testing-library/react'
+import { getByRole, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import React from 'react'
+import type { ButtonVariant } from '../src/atoms/Button/Button'
 import { Button } from '../src/atoms/Button/Button'
 
 describe('Button', () => {

package/tests/Card.spec.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import { render } from '@testing-library/react'
-import { Card, CardHeader, CardContent, CardFooter } from '../src/atoms/Card'
+import React from 'react'
 import { Button } from '../src/atoms/Button'
+import { Card, CardContent, CardFooter, CardHeader } from '../src/atoms/Card'
 
 describe('Product card', () => {
   it('renders the expected structure and data', () => {

package/tests/CardMenuOption.spec.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 import { CardMenuOption } from '../src/atoms/CardMenu/CardMenuOption'
 
 describe('CardMenuOption', () => {

package/tests/CardsTable.spec.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
+import { Badge } from '../src/atoms/Badge'
+import { IconButton } from '../src/atoms/Button'
 import {
+  Alignment,
   CardsTable,
+  CardsTableBody,
+  CardsTableCell,
   CardsTableHead,
   CardsTableHeader,
   CardsTableRow,
-  CardsTableBody,
-  CardsTableCell,
-  Alignment,
 } from '../src/atoms/CardsTable'
-import { IconButton } from '../src/atoms/Button'
-import { Badge } from '../src/atoms/Badge'
 
 describe('CardsTable', () => {
   it('renders', () => {

package/tests/CheckableTag.spec.tsx

@@ -1,6 +1,6 @@
-import type { Variant } from '../src/atoms/CheckableTag'
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
+import type { Variant } from '../src/atoms/CheckableTag'
 import { CheckableTag } from '../src/atoms/CheckableTag'
 
 describe('CheckableTag', () => {

package/tests/Checkbox.spec.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 import { Checkbox } from '../src/atoms/Checkbox'
 
 describe('Checkbox', () => {

package/tests/Collapsible.spec.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 import { Collapsible } from '../src/atoms/Collapsible'
 import { Input } from '../src/atoms/Input'
 

package/tests/Drawer.spec.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { render } from '@testing-library/react'
-import { Drawer } from '../src/atoms/Drawer'
-import { Collapsible } from '../src/atoms/Collapsible'
+import React from 'react'
 import { CheckableTag, CheckableTagGroup } from '../src/atoms/CheckableTag'
+import { Collapsible } from '../src/atoms/Collapsible'
+import { Drawer } from '../src/atoms/Drawer'
 
 describe('Drawer', () => {
   it('renders with expected title, content and buttons', () => {

package/tests/EmptyState.spec.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
+import { Button } from '../src/atoms/Button/Button'
 import type { Variant } from '../src/atoms/EmptyState'
 import { EmptyState } from '../src/atoms/EmptyState'
-import { Button } from '../src/atoms/Button/Button'
 
 describe('EmptyState', () => {
   const variants = ['primary']

package/tests/FloatingButton.spec.tsx

@@ -1,7 +1,7 @@
-import type { Variant } from '../src/atoms/Button/FloatingButton'
-import React from 'react'
-import { screen, render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import React from 'react'
+import type { Variant } from '../src/atoms/Button/FloatingButton'
 import { FloatingButton } from '../src/atoms/Button/FloatingButton'
 
 describe('Floating Button', () => {

package/tests/Icon.spec.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 import { Icon } from '../src/atoms/Icon'
 
 describe('Icon', () => {

package/tests/IconButton.spec.tsx

@@ -1,7 +1,7 @@
-import type { Variant } from '../src/atoms/Button/IconButton'
-import React from 'react'
-import { screen, render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import React from 'react'
+import type { Variant } from '../src/atoms/Button/IconButton'
 import { IconButton } from '../src/atoms/Button/IconButton'
 
 describe('Icon Button', () => {

package/tests/Input.spec.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
 import { getByText, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import React from 'react'
 import { Input } from '../src/atoms/Input'
 
 describe('Input', () => {

package/tests/Menu.spec.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import { render } from '@testing-library/react'
-import { Menu } from '../src/atoms/Menu/Menu'
+import React from 'react'
 import { MenuDropdown, MenuLink } from '../src/atoms/Menu'
+import { Menu } from '../src/atoms/Menu/Menu'
 
 describe('Menu', () => {
   it('renders first-level menu', () => {

package/tests/Modal.spec.tsx

@@ -1,5 +1,5 @@
+import { render, screen } from '@testing-library/react'
 import React from 'react'
-import { screen, render } from '@testing-library/react'
 import { Modal } from '../src/atoms/Modal'
 
 describe('Modal', () => {

package/tests/Multiselect.spec.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Multiselect } from '../src/atoms/Multiselect'
+import React from 'react'
 import { Placeholder } from 'storybook/internal/components'
+import { Multiselect } from '../src/atoms/Multiselect'
 
 describe('Multiselect', () => {
   it('renders', async () => {

package/tests/Pagination.spec.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
 import { render } from '@testing-library/react'
+import React from 'react'
 import {
+  Ellipsis,
   Pagination,
   PaginationArrow,
   PaginationNumber,
-  Ellipsis,
 } from '../src/atoms/Pagination'
 
 describe('Pagination', () => {

package/tests/Popover.spec.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
 import { render } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Popover, PopoverMenu, PopoverMenuOption } from '../src/atoms/Popover'
+import React from 'react'
 import { Button } from '../src/atoms/Button'
+import { Popover, PopoverMenu, PopoverMenuOption } from '../src/atoms/Popover'
 
 describe('PopoverMenu', () => {
   it('shows when click on button', async () => {

package/tests/Select.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
-import { Select } from '../src/atoms/Select'
 import userEvent from '@testing-library/user-event'
+import { Select } from '../src/atoms/Select'
 
 describe('Select', () => {
   it('renders', async () => {

package/tests/a11y.spec.tsx

@@ -1,7 +1,6 @@
 import { composeStories } from '@storybook/react'
 import { act, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
-
 import * as components from './library'
 
 expect.extend(toHaveNoViolations)

package/tests/library.ts

@@ -3,9 +3,9 @@ export * as CardsTable from '../src/stories/CardsTable.stories'
 export * as CardsTableList from '../src/stories/CardsTableList.stories'
 export * as Checkbox from '../src/stories/Checkbox.stories'
 export * as EmptyState from '../src/stories/EmptyState.stories'
+export * as Form from '../src/stories/Form.stories'
 export * as IconButton from '../src/stories/IconButton.stories'
 export * as Input from '../src/stories/Input.stories'
-export * as Multiselect from '../src/stories/Multiselect.stories'
 export * as Modal from '../src/stories/Modal.stories'
+export * as Multiselect from '../src/stories/Multiselect.stories'
 export * as Select from '../src/stories/Select.stories'
-export * as Form from '../src/stories/Form.stories'