@opentrons/components 0.1.7-alpha.0 → 0.1.7-alpha.1

package/src/atoms/StyledText/StyledText.stories.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable storybook/prefer-pascal-case */
-import { SPACING } from '../../ui-style-constants'
 import { Flex } from '../../primitives'
-import { StyledText, ODD_STYLES, HELIX_STYLES } from './index'
+import { SPACING } from '../../ui-style-constants'
+import { HELIX_STYLES, ODD_STYLES, StyledText } from './index'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof StyledText> = {

package/src/atoms/StyledText/StyledText.tsx

@@ -1,10 +1,11 @@
 import styled, { css } from 'styled-components'
-import { Text } from '../../primitives'
-import { TYPOGRAPHY, RESPONSIVENESS } from '../../ui-style-constants'
+
 import { TYPOGRAPHY as HELIX_TYPOGRAPHY } from '../../helix-design-system/product'
+import { Text } from '../../primitives'
+import { RESPONSIVENESS, TYPOGRAPHY } from '../../ui-style-constants'
 
-import type { ComponentProps, ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { ComponentProps, ReactNode } from 'react'
 
 const helixProductStyleMap = {
   displayBold: {

package/src/atoms/SubListTable/SubListTable.stories.tsx

@@ -4,8 +4,8 @@ import { Flex, VIEWPORT } from '@opentrons/components'
 
 import { SubListTable as SubListTableComponent } from './index'
 
+import type { Meta, Story } from '@storybook/react'
 import type { ComponentProps } from 'react'
-import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'Helix/Atoms/SubListTable',

package/src/atoms/SubListTable/__tests__/SubListTable.test.tsx

@@ -1,8 +1,8 @@
-import { describe, it, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
+import { beforeEach, describe, it } from 'vitest'
 
-import { renderWithProviders } from '../../../testing/utils'
 import { SubListTable } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/SubListTable/index.tsx

@@ -1,13 +1,13 @@
 import { css } from 'styled-components'
 
-import { StyledText } from '../StyledText'
-import { DIRECTION_COLUMN, DISPLAY_GRID } from '../../styles'
-import { SPACING, RESPONSIVENESS } from '../../ui-style-constants'
 import { COLORS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
+import { DIRECTION_COLUMN, DISPLAY_GRID } from '../../styles'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
 
-import type { ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { ReactNode } from 'react'
 
 export interface SubListTableProps {
   children: ReactNode

package/src/atoms/Tag/Tag.stories.tsx

@@ -1,7 +1,8 @@
+import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
 import { Flex } from '../../primitives'
 import { SPACING, VIEWPORT } from '../../ui-style-constants'
 import { Tag as TagComponent } from './index'
-import { ICON_DATA_BY_NAME } from '../../icons/icon-data'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof TagComponent> = {

package/src/atoms/Tag/__tests__/Tag.test.tsx

@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest'
 import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
 import { COLORS } from '../../../helix-design-system'
 import { renderWithProviders } from '../../../testing/utils'
 import { Tag } from '../index'

package/src/atoms/Tag/index.tsx

@@ -1,12 +1,16 @@
 import { css } from 'styled-components'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { LiquidIcon } from '../../molecules/LiquidIcon'
 import { Flex } from '../../primitives'
 import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
-import { Icon } from '../../icons'
 import { StyledText } from '../StyledText'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { IconName } from '../../icons'
+import type { LiquidIconProps } from '../../molecules/LiquidIcon'
 
 export type TagType = 'default' | 'interactive' | 'branded' | 'onColor'
 
@@ -17,9 +21,11 @@ export interface TagProps {
   type: TagType
   /** iconLocation */
   iconPosition?: 'left' | 'right'
-  /** Tagicon */
+  /** Tag icon */
   iconName?: IconName
   shrinkToContent?: boolean
+  /** liquid icon */
+  liquidIcon?: LiquidIconProps
 }
 
 const defaultColors = {
@@ -47,37 +53,14 @@ const TAG_PROPS_BY_TYPE: Record<
 }
 
 export function Tag(props: TagProps): JSX.Element {
-  const { iconName, type, text, iconPosition, shrinkToContent = false } = props
-
-  const DEFAULT_CONTAINER_STYLE = css`
-    padding: ${SPACING.spacing2} ${SPACING.spacing8};
-    border-radius: ${BORDERS.borderRadius4};
-    width: ${shrinkToContent ? FLEX_MAX_CONTENT : 'inherit'};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      border-radius: ${BORDERS.borderRadius8};
-      padding: ${SPACING.spacing8} ${SPACING.spacing12};
-    }
-  `
-
-  const INTERACTIVE_CONTAINER_STYLE = css`
-    ${DEFAULT_CONTAINER_STYLE}
-    &:hover {
-      background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
-    }
-    &:focus-visible {
-      box-shadow: 0 0 0 3px ${COLORS.blue50};
-      outline: none;
-    }
-  `
-
-  const ICON_STYLE = css`
-    width: ${SPACING.spacing16};
-    height: ${SPACING.spacing16};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      width: ${SPACING.spacing24};
-      height: ${SPACING.spacing24};
-    }
-  `
+  const {
+    iconName,
+    type,
+    text,
+    iconPosition,
+    shrinkToContent = false,
+    liquidIcon,
+  } = props
 
   return (
     <Flex
@@ -87,8 +70,8 @@ export function Tag(props: TagProps): JSX.Element {
       backgroundColor={TAG_PROPS_BY_TYPE[type].backgroundColor}
       css={
         type === 'interactive'
-          ? INTERACTIVE_CONTAINER_STYLE
-          : DEFAULT_CONTAINER_STYLE
+          ? INTERACTIVE_CONTAINER_STYLE(shrinkToContent)
+          : DEFAULT_CONTAINER_STYLE(shrinkToContent)
       }
       gridGap={SPACING.spacing4}
       data-testid={`Tag_${type}`}
@@ -100,6 +83,7 @@ export function Tag(props: TagProps): JSX.Element {
           css={ICON_STYLE}
         />
       ) : null}
+      {liquidIcon != null ? <LiquidIcon {...liquidIcon} /> : null}
       <StyledText desktopStyle="bodyDefaultRegular" oddStyle="bodyTextRegular">
         {text}
       </StyledText>
@@ -113,3 +97,37 @@ export function Tag(props: TagProps): JSX.Element {
     </Flex>
   )
 }
+
+const DEFAULT_CONTAINER_STYLE = (
+  shrinkToContent: boolean
+): FlattenSimpleInterpolation => css`
+  padding: ${SPACING.spacing2} ${SPACING.spacing8};
+  border-radius: ${BORDERS.borderRadius4};
+  width: ${shrinkToContent ? FLEX_MAX_CONTENT : 'inherit'};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    border-radius: ${BORDERS.borderRadius8};
+    padding: ${SPACING.spacing8} ${SPACING.spacing12};
+  }
+`
+
+const INTERACTIVE_CONTAINER_STYLE = (
+  shrinkToContent: boolean
+): FlattenSimpleInterpolation => css`
+  ${DEFAULT_CONTAINER_STYLE(shrinkToContent)}
+  &:hover {
+    background-color: ${COLORS.black90}${COLORS.opacity40HexCode};
+  }
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.blue50};
+    outline: none;
+  }
+`
+
+const ICON_STYLE = css`
+  width: ${SPACING.spacing16};
+  height: ${SPACING.spacing16};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: ${SPACING.spacing24};
+    height: ${SPACING.spacing24};
+  }
+`

package/src/atoms/Toast/ODDToast.stories.tsx

@@ -1,22 +1,32 @@
 import * as React from 'react'
 
 import { Toast } from '.'
-import { SPACING, VIEWPORT } from '../../ui-style-constants'
-import { Flex } from '../../primitives'
+import { Flex, STYLE_PROPS } from '../../primitives'
 import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   JUSTIFY_CENTER,
   POSITION_FIXED,
 } from '../../styles'
+import { SPACING, VIEWPORT } from '../../ui-style-constants'
 import { PrimaryButton } from '../buttons'
-import { LegacyStyledText } from '../StyledText'
-import type { Story, Meta } from '@storybook/react'
+import { StyledText } from '../StyledText'
+
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'ODD/Atoms/Toast',
   component: Toast,
   parameters: VIEWPORT.touchScreenViewport,
+  argTypes: {
+    // Disable all StyleProps
+    ...Object.fromEntries(
+      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
+        prop,
+        { table: { disable: true } },
+      ])
+    ),
+  },
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof Toast>> = args => {
@@ -31,14 +41,14 @@ const Template: Story<React.ComponentProps<typeof Toast>> = args => {
       <Flex flexDirection={DIRECTION_ROW} marginY={SPACING.spacing16}>
         <PrimaryButton onClick={handleClick}>Click me</PrimaryButton>
         <Flex flexDirection={DIRECTION_COLUMN} marginLeft={SPACING.spacing8}>
-          <LegacyStyledText as="p">
+          <StyledText as="p">
             When clicking the button, the Toast shows up in the bottom.
-          </LegacyStyledText>
-          <LegacyStyledText as="p">
+          </StyledText>
+          <StyledText as="p">
             Unless you set a duration or disable the timeout, the Toast will
             disappear between 2 and 7 seconds depending on the length of the
             text.
-          </LegacyStyledText>
+          </StyledText>
         </Flex>
       </Flex>
       {isShowToast && (

package/src/atoms/Toast/Toast.stories.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react'
 
-import { Toast } from './index'
 import { Flex, STYLE_PROPS } from '../../primitives'
 import { DIRECTION_COLUMN, DIRECTION_ROW } from '../../styles'
 import { SPACING } from '../../ui-style-constants'
 import { PrimaryButton } from '../buttons'
 import { LegacyStyledText } from '../StyledText'
-import type { Story, Meta } from '@storybook/react'
+import { Toast } from './index'
+
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'Helix/Atoms/Toast',

package/src/atoms/Toast/__tests__/ODDToast.test.tsx

@@ -1,8 +1,11 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
 import { act, fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
+
 import { Toast, TOAST_ANIMATION_DURATION } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/Toast/__tests__/Toast.test.tsx

@@ -1,8 +1,11 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
 import { act, fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
+
 import { Toast, TOAST_ANIMATION_DURATION } from '..'
+import { renderWithProviders } from '../../../testing/utils'
 
 import type { ComponentProps } from 'react'
 

package/src/atoms/Toast/index.tsx

@@ -1,11 +1,9 @@
 import { useState } from 'react'
 import { css } from 'styled-components'
 
-import { Btn, Flex, Link } from '../../primitives'
-import { Icon } from '../../icons'
 import { BORDERS, COLORS } from '../../helix-design-system'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
-import { truncateString } from '../../utils'
+import { Icon } from '../../icons'
+import { Btn, Flex, Link } from '../../primitives'
 import {
   ALIGN_CENTER,
   DIRECTION_COLUMN,
@@ -13,14 +11,17 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   NO_WRAP,
 } from '../../styles'
-import { LegacyStyledText } from '../StyledText'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { truncateString } from '../../utils'
+import { StyledText } from '../StyledText'
+
 import type {
   DefaultTheme,
   FlattenSimpleInterpolation,
   ThemedCssFunction,
 } from 'styled-components'
-import type { StyleProps } from '../../primitives'
 import type { IconName, IconProps } from '../../icons'
+import type { StyleProps } from '../../primitives'
 
 export const SUCCESS_TOAST: 'success' = 'success'
 export const WARNING_TOAST: 'warning' = 'warning'
@@ -185,20 +186,6 @@ export function Toast(props: ToastProps): JSX.Element {
 
   const ODD_ANIMATION_NONE = css``
 
-  const TEXT_STYLE = css`
-    color: ${COLORS.black90};
-    font-size: ${showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP};
-    font-weight: ${showODDStyle
-      ? TYPOGRAPHY.fontWeightSemiBold
-      : TYPOGRAPHY.fontWeightRegular};
-    line-height: ${showODDStyle
-      ? TYPOGRAPHY.lineHeight28
-      : TYPOGRAPHY.lineHeight20};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `
-
   let oddAnimation: FlattenSimpleInterpolation | ThemedCssFunction<DefaultTheme>
 
   if (isClosed) {
@@ -346,19 +333,9 @@ export function Toast(props: ToastProps): JSX.Element {
           width={showODDStyle ? 'auto' : '100%'}
         >
           {headingText.length > 0 ? (
-            <LegacyStyledText
-              color={COLORS.black90}
-              fontSize={
-                showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-              }
-              fontWeight={
-                showODDStyle
-                  ? TYPOGRAPHY.fontWeightBold
-                  : TYPOGRAPHY.fontWeightSemiBold
-              }
-              lineHeight={
-                showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-              }
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
               marginRight={showODDStyle ? SPACING.spacing4 : undefined}
               maxWidth={showODDStyle ? '30.375rem' : 'auto'}
               overflow="hidden"
@@ -366,59 +343,77 @@ export function Toast(props: ToastProps): JSX.Element {
               whiteSpace={NO_WRAP}
             >
               {headingText}
-            </LegacyStyledText>
+            </StyledText>
           ) : null}
           <Flex alignItems={ALIGN_CENTER}>
-            <LegacyStyledText css={TEXT_STYLE}>{message}</LegacyStyledText>
-            {linkText != null ? (
-              <Link
-                role="button"
-                onClick={() => {
-                  onLinkClick()
-                  onCloseHandler()
-                }}
-                css={TEXT_STYLE}
-                marginLeft={SPACING.spacing4}
-                marginRight={SPACING.spacing8}
-                textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              >
-                {linkText}
-              </Link>
-            ) : null}
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
+              overflow="hidden"
+              text-overflow="ellipsis"
+              white-space="nowrap"
+            >
+              {message}
+            </StyledText>
           </Flex>
         </Flex>
       </Flex>
-      {closeText ? (
-        <Link
-          role="button"
-          onClick={() => {
-            onCloseHandler()
-          }}
-          padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-        >
-          <LegacyStyledText
-            color={COLORS.black90}
-            fontSize={
-              showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-            }
-            fontWeight={
-              showODDStyle
-                ? TYPOGRAPHY.fontWeightSemiBold
-                : TYPOGRAPHY.fontWeightRegular
-            }
-            lineHeight={
-              showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-            }
-            textDecoration={
-              showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-            }
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-            whiteSpace={NO_WRAP}
+
+      <Flex alignItems={ALIGN_CENTER}>
+        {linkText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onLinkClick()
+              onCloseHandler()
+            }}
+            marginLeft={SPACING.spacing4}
+            marginRight={SPACING.spacing8}
           >
-            {closeText}
-          </LegacyStyledText>
-        </Link>
-      ) : null}
+            <StyledText
+              fontSize={
+                showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
+              }
+              fontWeight={
+                showODDStyle
+                  ? TYPOGRAPHY.fontWeightSemiBold
+                  : TYPOGRAPHY.fontWeightRegular
+              }
+              lineHeight={
+                showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
+              }
+              textDecoration={
+                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
+              }
+              textTransform={TYPOGRAPHY.textTransformCapitalize}
+              whiteSpace={NO_WRAP}
+            >
+              {linkText}
+            </StyledText>
+          </Link>
+        ) : null}
+        {closeText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onCloseHandler()
+            }}
+            padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
+          >
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
+              textDecoration={
+                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
+              }
+              textTransform={TYPOGRAPHY.textTransformCapitalize}
+              whiteSpace={NO_WRAP}
+            >
+              {closeText}
+            </StyledText>
+          </Link>
+        ) : null}
+      </Flex>
       {!closeText && closeButton ? (
         <Btn
           onClick={() => {

package/src/atoms/ToggleGroup/ToggleGroup.stories.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
+
 import { ToggleGroup as ToggleGroupComponent } from './index'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof ToggleGroupComponent> = {

package/src/atoms/ToggleGroup/__tests__/ToggleGroup.test.tsx

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
 import { renderWithProviders } from '../../../testing/utils'
 import { ToggleGroup } from '../index'
 

package/src/atoms/ToggleGroup/index.tsx

@@ -1,7 +1,8 @@
 import { css } from 'styled-components'
+
+import { PrimaryButton } from '../../atoms/buttons/PrimaryButton'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
-import { PrimaryButton } from '../../atoms/buttons/PrimaryButton'
 import { spacing8 } from '../../ui-style-constants/spacing'
 import { StyledText } from '../StyledText'
 

package/src/atoms/Tooltip/Tooltip.stories.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react'
+
+import { COLORS } from '../../helix-design-system'
 import { Flex, Link } from '../../primitives'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { COLORS } from '../../helix-design-system'
-import { PrimaryButton } from '../buttons'
 import {
   TOOLTIP_AUTO,
   TOOLTIP_TOP_START,
   useHoverTooltip,
 } from '../../tooltips'
-
+import { TYPOGRAPHY } from '../../ui-style-constants'
+import { PrimaryButton } from '../buttons'
 import { Tooltip } from './index'
-import type { Story, Meta } from '@storybook/react'
+
+import type { Meta, Story } from '@storybook/react'
 
 export default {
   title: 'App/Atoms/Tooltip',

package/src/atoms/Tooltip/__tests__/Tooltip.test.tsx

@@ -1,14 +1,15 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import '@testing-library/jest-dom/vitest'
+
 import { screen } from '@testing-library/react'
 
+import { Tooltip } from '..'
 import { COLORS } from '../../../helix-design-system'
-import { TOOLTIP_TOP } from '../../../tooltips'
-import { SPACING } from '../../../ui-style-constants'
 import { POSITION_ABSOLUTE } from '../../../styles'
-
 import { renderWithProviders } from '../../../testing/utils'
-import { Tooltip } from '..'
+import { TOOLTIP_TOP } from '../../../tooltips'
+import { SPACING } from '../../../ui-style-constants'
 
 import type { ComponentProps, ReactNode } from 'react'
 

package/src/atoms/Tooltip/index.tsx

@@ -1,11 +1,11 @@
 import { COLORS } from '../../helix-design-system'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import { LegacyTooltip } from '../../tooltips'
 import { FLEX_MAX_CONTENT } from '../../styles'
+import { LegacyTooltip } from '../../tooltips'
+import { TYPOGRAPHY } from '../../ui-style-constants'
 
 import type { ReactNode } from 'react'
-import type { UseTooltipResultTooltipProps } from '../../tooltips'
 import type { StyleProps } from '../../primitives'
+import type { UseTooltipResultTooltipProps } from '../../tooltips'
 
 export interface TooltipProps extends StyleProps {
   children: ReactNode

package/src/atoms/buttons/AlertPrimaryButton.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
-import { TYPOGRAPHY, SPACING } from '../../ui-style-constants'
+
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { NewAlertPrimaryBtn, styleProps } from '../../primitives'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
 export const AlertPrimaryButton = styled(NewAlertPrimaryBtn)`
   background-color: ${COLORS.red50};

package/src/atoms/buttons/AltPrimaryButton.tsx

@@ -1,8 +1,8 @@
 import styled from 'styled-components'
 
+import { PrimaryButton } from '../..'
 import { COLORS } from '../../helix-design-system'
 import { styleProps } from '../../primitives'
-import { PrimaryButton } from '../..'
 
 export const AltPrimaryButton = styled(PrimaryButton)`
   background-color: ${COLORS.grey30};

package/src/atoms/buttons/EmptySelectorButton.stories.tsx

@@ -1,5 +1,6 @@
 import { Box } from '../../primitives'
 import { EmptySelectorButton as EmptySelectorButtonComponent } from './EmptySelectorButton'
+
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof EmptySelectorButtonComponent> = {